diff --git a/packages/components/src/autocomplete/autocompleter-ui.tsx b/packages/components/src/autocomplete/autocompleter-ui.tsx index dbbbe724113d7c..62f2e55425373d 100644 --- a/packages/components/src/autocomplete/autocompleter-ui.tsx +++ b/packages/components/src/autocomplete/autocompleter-ui.tsx @@ -2,6 +2,7 @@ * External dependencies */ import clsx from 'clsx'; +import { createPortal } from 'react-dom'; /** * WordPress dependencies @@ -14,8 +15,8 @@ import { } from '@wordpress/element'; import { useAnchor } from '@wordpress/rich-text'; import { useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose'; -import { speak } from '@wordpress/a11y'; import { __, _n, sprintf } from '@wordpress/i18n'; +import { speak } from '@wordpress/a11y'; /** * Internal dependencies @@ -24,7 +25,6 @@ import getDefaultUseItems from './get-default-use-items'; import Button from '../button'; import Popover from '../popover'; import { VisuallyHidden } from '../visually-hidden'; -import { createPortal } from 'react-dom'; import type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types'; type ListBoxProps = { diff --git a/packages/components/src/box-control/utils.ts b/packages/components/src/box-control/utils.ts index 26bdae4e559511..bc7660274e6e59 100644 --- a/packages/components/src/box-control/utils.ts +++ b/packages/components/src/box-control/utils.ts @@ -2,6 +2,7 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; +import deprecated from '@wordpress/deprecated'; /** * Internal dependencies @@ -13,7 +14,6 @@ import type { CustomValueUnits, Preset, } from './types'; -import deprecated from '@wordpress/deprecated'; export const CUSTOM_VALUE_SETTINGS: CustomValueUnits = { px: { max: 300, step: 1 }, diff --git a/packages/components/src/button/test/index.tsx b/packages/components/src/button/test/index.tsx index 664c755ac44043..0dda7266ff8574 100644 --- a/packages/components/src/button/test/index.tsx +++ b/packages/components/src/button/test/index.tsx @@ -2,6 +2,7 @@ * External dependencies */ import { render, screen } from '@testing-library/react'; +import { press } from '@ariakit/test'; /** * WordPress dependencies @@ -15,7 +16,6 @@ import { plusCircle } from '@wordpress/icons'; import _Button from '..'; import Tooltip from '../../tooltip'; import cleanupTooltip from '../../tooltip/test/utils'; -import { press } from '@ariakit/test'; jest.mock( '../../icon', () => () =>
); diff --git a/packages/components/src/color-picker/test/index.tsx b/packages/components/src/color-picker/test/index.tsx index 98e059d5994ded..83e01bc0c68fec 100644 --- a/packages/components/src/color-picker/test/index.tsx +++ b/packages/components/src/color-picker/test/index.tsx @@ -3,6 +3,7 @@ */ import { fireEvent, screen, render, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import { click } from '@ariakit/test'; /** * WordPress dependencies @@ -13,7 +14,6 @@ import { useState } from '@wordpress/element'; * Internal dependencies */ import { ColorPicker } from '..'; -import { click } from '@ariakit/test'; const hslaMatcher = expect.objectContaining( { h: expect.any( Number ), diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/index.tsx b/packages/components/src/custom-gradient-picker/gradient-bar/index.tsx index 4f5eafb17523b4..944ce3744e84ca 100644 --- a/packages/components/src/custom-gradient-picker/gradient-bar/index.tsx +++ b/packages/components/src/custom-gradient-picker/gradient-bar/index.tsx @@ -2,6 +2,7 @@ * External dependencies */ import clsx from 'clsx'; +import type { MouseEventHandler } from 'react'; /** * WordPress dependencies @@ -20,7 +21,6 @@ import type { CustomGradientBarReducerAction, CustomGradientBarIdleState, } from '../types'; -import type { MouseEventHandler } from 'react'; const customGradientBarReducer = ( state: CustomGradientBarReducerState, diff --git a/packages/components/src/dimension-control/index.tsx b/packages/components/src/dimension-control/index.tsx index ffdfaeb84ee51d..d4f8bc525f476d 100644 --- a/packages/components/src/dimension-control/index.tsx +++ b/packages/components/src/dimension-control/index.tsx @@ -7,6 +7,7 @@ import clsx from 'clsx'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; +import deprecated from '@wordpress/deprecated'; /** * Internal dependencies @@ -17,7 +18,6 @@ import sizesTable, { findSizeBySlug } from './sizes'; import type { DimensionControlProps, Size } from './types'; import type { SelectControlSingleSelectionProps } from '../select-control/types'; import { ContextSystemProvider } from '../context'; -import deprecated from '@wordpress/deprecated'; import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size'; const CONTEXT_VALUE = { diff --git a/packages/components/src/disabled/test/index.tsx b/packages/components/src/disabled/test/index.tsx index fd03d5161f3300..7f117a549d5c77 100644 --- a/packages/components/src/disabled/test/index.tsx +++ b/packages/components/src/disabled/test/index.tsx @@ -2,12 +2,12 @@ * External dependencies */ import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; /** * Internal dependencies */ import Disabled from '../'; -import userEvent from '@testing-library/user-event'; describe( 'Disabled', () => { const Form = () => ( diff --git a/packages/components/src/duotone-picker/color-list-picker/index.tsx b/packages/components/src/duotone-picker/color-list-picker/index.tsx index e3925b7d064fdc..daed6b213e92bf 100644 --- a/packages/components/src/duotone-picker/color-list-picker/index.tsx +++ b/packages/components/src/duotone-picker/color-list-picker/index.tsx @@ -4,6 +4,7 @@ import { useState } from '@wordpress/element'; import { swatch } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; +import { useInstanceId } from '@wordpress/compose'; /** * Internal dependencies @@ -13,7 +14,6 @@ import ColorPalette from '../../color-palette'; import ColorIndicator from '../../color-indicator'; import Icon from '../../icon'; import type { ColorListPickerProps, ColorOptionProps } from './types'; -import { useInstanceId } from '@wordpress/compose'; function ColorOption( { label, diff --git a/packages/components/src/focal-point-picker/index.tsx b/packages/components/src/focal-point-picker/index.tsx index cad14aff5b693f..e19ca4f08eb03c 100644 --- a/packages/components/src/focal-point-picker/index.tsx +++ b/packages/components/src/focal-point-picker/index.tsx @@ -2,6 +2,7 @@ * External dependencies */ import clsx from 'clsx'; +import type { KeyboardEventHandler } from 'react'; /** * WordPress dependencies @@ -33,7 +34,6 @@ import type { FocalPoint as FocalPointType, FocalPointPickerProps, } from './types'; -import type { KeyboardEventHandler } from 'react'; const GRID_OVERLAY_TIMEOUT = 600; diff --git a/packages/components/src/menu/radio-item.tsx b/packages/components/src/menu/radio-item.tsx index 1da6d573c26852..8b7acbece92b68 100644 --- a/packages/components/src/menu/radio-item.tsx +++ b/packages/components/src/menu/radio-item.tsx @@ -8,6 +8,7 @@ import * as Ariakit from '@ariakit/react'; */ import { forwardRef, useContext } from '@wordpress/element'; import { Icon } from '@wordpress/icons'; +import { SVG, Circle } from '@wordpress/primitives'; /** * Internal dependencies @@ -16,7 +17,6 @@ import type { WordPressComponentProps } from '../context'; import { Context } from './context'; import type { RadioItemProps } from './types'; import * as Styled from './styles'; -import { SVG, Circle } from '@wordpress/primitives'; const radioCheck = ( diff --git a/packages/components/src/mobile/color-settings/palette.screen.native.js b/packages/components/src/mobile/color-settings/palette.screen.native.js index a780a4295dfba5..a65abb614d9f5e 100644 --- a/packages/components/src/mobile/color-settings/palette.screen.native.js +++ b/packages/components/src/mobile/color-settings/palette.screen.native.js @@ -2,6 +2,7 @@ * External dependencies */ import { View, Text, TouchableWithoutFeedback } from 'react-native'; +import { useRoute, useNavigation } from '@react-navigation/native'; /** * WordPress dependencies @@ -9,7 +10,6 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native'; import { __ } from '@wordpress/i18n'; import { useState, useContext } from '@wordpress/element'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; -import { useRoute, useNavigation } from '@react-navigation/native'; /** * Internal dependencies @@ -22,7 +22,6 @@ import { colorsUtils } from './utils'; import PanelBody from '../../panel/body'; import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context'; import ColorControl from '../../color-control'; - import styles from './style.scss'; const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 }; diff --git a/packages/components/src/modal/use-modal-exit-animation.ts b/packages/components/src/modal/use-modal-exit-animation.ts index 729b4f9ea6f86c..669693ac740e70 100644 --- a/packages/components/src/modal/use-modal-exit-animation.ts +++ b/packages/components/src/modal/use-modal-exit-animation.ts @@ -3,12 +3,12 @@ */ import { useReducedMotion } from '@wordpress/compose'; import { useCallback, useRef, useState } from '@wordpress/element'; +import warning from '@wordpress/warning'; /** * Internal dependencies */ import { CONFIG } from '../utils'; -import warning from '@wordpress/warning'; // Animation duration (ms) extracted to JS in order to be used on a setTimeout. const FRAME_ANIMATION_DURATION = CONFIG.transitionDuration; diff --git a/packages/components/src/navigator/navigator/component.tsx b/packages/components/src/navigator/navigator/component.tsx index bd49b3682fb144..8cf545106540da 100644 --- a/packages/components/src/navigator/navigator/component.tsx +++ b/packages/components/src/navigator/navigator/component.tsx @@ -9,6 +9,7 @@ import type { ForwardedRef } from 'react'; import { useMemo, useReducer } from '@wordpress/element'; import isShallowEqual from '@wordpress/is-shallow-equal'; import warning from '@wordpress/warning'; +import deprecated from '@wordpress/deprecated'; /** * Internal dependencies @@ -28,7 +29,6 @@ import type { Screen, NavigateToParentOptions, } from '../types'; -import deprecated from '@wordpress/deprecated'; type MatchedPath = ReturnType< typeof patternMatch >; diff --git a/packages/components/src/notice/list.native.js b/packages/components/src/notice/list.native.js index 72a4c743108995..3c759d8c089a3d 100644 --- a/packages/components/src/notice/list.native.js +++ b/packages/components/src/notice/list.native.js @@ -8,13 +8,13 @@ import { View } from 'react-native'; */ import { useSelect, useDispatch } from '@wordpress/data'; import { store as noticesStore } from '@wordpress/notices'; +import { useCallback } from '@wordpress/element'; /** * Internal dependencies */ import Notice from './'; import styles from './style.scss'; -import { useCallback } from '@wordpress/element'; function NoticeList() { const { notices } = useSelect( ( select ) => { diff --git a/packages/components/src/panel/row.tsx b/packages/components/src/panel/row.tsx index 392f215c2c6754..533b88c1f97064 100644 --- a/packages/components/src/panel/row.tsx +++ b/packages/components/src/panel/row.tsx @@ -2,12 +2,12 @@ * External dependencies */ import clsx from 'clsx'; +import type { ForwardedRef } from 'react'; /** * WordPress dependencies */ import { forwardRef } from '@wordpress/element'; -import type { ForwardedRef } from 'react'; /** * Internal dependencies diff --git a/packages/components/src/query-controls/category-select.tsx b/packages/components/src/query-controls/category-select.tsx index bc2306ff048fa1..7d8df0305fc102 100644 --- a/packages/components/src/query-controls/category-select.tsx +++ b/packages/components/src/query-controls/category-select.tsx @@ -1,13 +1,13 @@ /** - * Internal dependencies + * WordPress dependencies */ -import { buildTermsTree } from './terms'; -import TreeSelect from '../tree-select'; +import { useMemo } from '@wordpress/element'; /** - * WordPress dependencies + * Internal dependencies */ -import { useMemo } from '@wordpress/element'; +import { buildTermsTree } from './terms'; +import TreeSelect from '../tree-select'; import type { CategorySelectProps } from './types'; export default function CategorySelect( { diff --git a/packages/components/src/search-control/index.tsx b/packages/components/src/search-control/index.tsx index 54ef5f3eb9ca56..1b820965d190c8 100644 --- a/packages/components/src/search-control/index.tsx +++ b/packages/components/src/search-control/index.tsx @@ -2,6 +2,7 @@ * External dependencies */ import clsx from 'clsx'; +import type { ForwardedRef } from 'react'; /** * WordPress dependencies @@ -18,7 +19,6 @@ import deprecated from '@wordpress/deprecated'; import Button from '../button'; import type { WordPressComponentProps } from '../context/wordpress-component'; import type { SearchControlProps, SuffixItemProps } from './types'; -import type { ForwardedRef } from 'react'; import { ContextSystemProvider } from '../context'; import { StyledInputControl, SuffixItemWrapper } from './styles'; diff --git a/packages/components/src/slot-fill/provider.tsx b/packages/components/src/slot-fill/provider.tsx index e5319bc7f33e44..8346ec9ce2070b 100644 --- a/packages/components/src/slot-fill/provider.tsx +++ b/packages/components/src/slot-fill/provider.tsx @@ -2,6 +2,7 @@ * WordPress dependencies */ import { useState } from '@wordpress/element'; +import { observableMap } from '@wordpress/compose'; /** * Internal dependencies @@ -15,7 +16,6 @@ import type { SlotFillProviderProps, SlotKey, } from './types'; -import { observableMap } from '@wordpress/compose'; function createSlotRegistry(): BaseSlotFillContext { const slots = observableMap< SlotKey, BaseSlotInstance >(); diff --git a/packages/components/src/tabs/tab.tsx b/packages/components/src/tabs/tab.tsx index 8226d0589f08c8..75f7acba36a497 100644 --- a/packages/components/src/tabs/tab.tsx +++ b/packages/components/src/tabs/tab.tsx @@ -1,14 +1,14 @@ /** * WordPress dependencies */ - import { forwardRef } from '@wordpress/element'; +import warning from '@wordpress/warning'; +import { chevronRight } from '@wordpress/icons'; /** * Internal dependencies */ import type { TabProps } from './types'; -import warning from '@wordpress/warning'; import { useTabsContext } from './context'; import { Tab as StyledTab, @@ -16,7 +16,6 @@ import { TabChevron as StyledTabChevron, } from './styles'; import type { WordPressComponentProps } from '../context'; -import { chevronRight } from '@wordpress/icons'; export const Tab = forwardRef< HTMLButtonElement, diff --git a/packages/components/src/tabs/tabpanel.tsx b/packages/components/src/tabs/tabpanel.tsx index 512b2609682722..e7ccbfb6d392cd 100644 --- a/packages/components/src/tabs/tabpanel.tsx +++ b/packages/components/src/tabs/tabpanel.tsx @@ -7,14 +7,13 @@ import { useStoreState } from '@ariakit/react'; * WordPress dependencies */ import { forwardRef } from '@wordpress/element'; +import warning from '@wordpress/warning'; /** * Internal dependencies */ import type { TabPanelProps } from './types'; import { TabPanel as StyledTabPanel } from './styles'; - -import warning from '@wordpress/warning'; import { useTabsContext } from './context'; import type { WordPressComponentProps } from '../context'; diff --git a/packages/components/src/text/hook.ts b/packages/components/src/text/hook.ts index 76314686eb963b..64644dd4fb40cc 100644 --- a/packages/components/src/text/hook.ts +++ b/packages/components/src/text/hook.ts @@ -3,6 +3,7 @@ */ import type { SerializedStyles } from '@emotion/react'; import { css } from '@emotion/react'; +import type React from 'react'; /** * WordPress dependencies @@ -23,7 +24,6 @@ import { CONFIG, COLORS } from '../utils'; import { getLineHeight } from './get-line-height'; import { useCx } from '../utils/hooks/use-cx'; import type { Props } from './types'; -import type React from 'react'; /** * @param {import('../context').WordPressComponentProps} props diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx index 9f3427e95a6017..cd8d700e241dda 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx +++ b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx @@ -7,6 +7,7 @@ import type { ForwardedRef } from 'react'; * WordPress dependencies */ import { useMemo, useState } from '@wordpress/element'; +import { useMergeRefs } from '@wordpress/compose'; /** * Internal dependencies @@ -21,7 +22,6 @@ import * as styles from './styles'; import { ToggleGroupControlAsRadioGroup } from './as-radio-group'; import { ToggleGroupControlAsButtonGroup } from './as-button-group'; import { useTrackElementOffsetRect } from '../../utils/element-rect'; -import { useMergeRefs } from '@wordpress/compose'; import { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect'; import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';