@wordpress/components 25.8.3 → 25.9.0

package/src/navigable-container/types.ts

@@ -6,7 +6,7 @@ import type { ForwardedRef, ReactNode } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 type BaseProps = {
 	/**

package/src/navigation/styles/navigation-styles.tsx

@@ -16,7 +16,7 @@ import Button from '../../button';
 import { Text } from '../../text';
 import { Heading } from '../../heading';
 import { reduceMotion, rtl } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 import SearchControl from '../../search-control';
 
 export const NavigationUI = styled.div`

package/src/navigator/navigator-back-button/component.tsx

@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { View } from '../../view';
 import { useNavigatorBackButton } from './hook';
 import type { NavigatorBackButtonProps } from '../types';

package/src/navigator/navigator-back-button/hook.ts

@@ -6,8 +6,8 @@ import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import Button from '../../button';
 import useNavigator from '../use-navigator';
 import type { NavigatorBackButtonHookProps } from '../types';

package/src/navigator/navigator-button/component.tsx

@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { View } from '../../view';
 import { useNavigatorButton } from './hook';
 import type { NavigatorButtonProps } from '../types';

package/src/navigator/navigator-button/hook.ts

@@ -7,8 +7,8 @@ import { escapeAttribute } from '@wordpress/escape-html';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import Button from '../../button';
 import useNavigator from '../use-navigator';
 import type { NavigatorButtonProps } from '../types';

package/src/navigator/navigator-provider/component.tsx

@@ -20,8 +20,8 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect, useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect, useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
 import { View } from '../../view';
 import { NavigatorContext } from '../context';

package/src/navigator/navigator-screen/component.tsx

@@ -26,8 +26,8 @@ import { escapeAttribute } from '@wordpress/escape-html';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect, useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect, useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
 import { View } from '../../view';
 import { NavigatorContext } from '../context';

package/src/navigator/navigator-to-parent-button/component.tsx

@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { View } from '../../view';
 import { useNavigatorBackButton } from '../navigator-back-button/hook';
 import type { NavigatorToParentButtonProps } from '../types';

package/src/notice/list.tsx

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * Internal dependencies
  */
 import Notice from '.';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { NoticeListProps } from './types';
 
 const noop = () => {};

package/src/number-control/index.tsx

@@ -20,21 +20,25 @@ import { Input, SpinButton, styles } from './styles/number-control-styles';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
 import { add, subtract, roundClamp } from '../utils/math';
 import { ensureNumber, isValueEmpty } from '../utils/values';
-import type { WordPressComponentProps } from '../ui/context/wordpress-component';
+import type { WordPressComponentProps } from '../context/wordpress-component';
 import type { NumberControlProps } from './types';
 import { HStack } from '../h-stack';
 import { Spacer } from '../spacer';
 import { useCx } from '../utils';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 const noop = () => {};
 
 function UnforwardedNumberControl(
-	{
+	props: WordPressComponentProps< NumberControlProps, 'input', false >,
+	forwardedRef: ForwardedRef< any >
+) {
+	const {
 		__unstableStateReducer: stateReducerProp,
 		className,
 		dragDirection = 'n',
 		hideHTMLArrows = false,
-		spinControls = 'native',
+		spinControls = hideHTMLArrows ? 'none' : 'native',
 		isDragEnabled = true,
 		isShiftStepEnabled = true,
 		label,
@@ -49,17 +53,19 @@ function UnforwardedNumberControl(
 		size = 'default',
 		suffix,
 		onChange = noop,
-		...props
-	}: WordPressComponentProps< NumberControlProps, 'input', false >,
-	forwardedRef: ForwardedRef< any >
-) {
+		...restProps
+	} = useDeprecated36pxDefaultSizeProp< NumberControlProps >(
+		props,
+		'wp.components.NumberControl',
+		'6.4'
+	);
+
 	if ( hideHTMLArrows ) {
 		deprecated( 'wp.components.NumberControl hideHTMLArrows prop ', {
 			alternative: 'spinControls="none"',
 			since: '6.2',
 			version: '6.3',
 		} );
-		spinControls = 'none';
 	}
 	const inputRef = useRef< HTMLInputElement >();
 	const mergedRef = useMergeRefs( [ inputRef, forwardedRef ] );
@@ -212,7 +218,7 @@ function UnforwardedNumberControl(
 		<Input
 			autoComplete={ autoComplete }
 			inputMode="numeric"
-			{ ...props }
+			{ ...restProps }
 			className={ classes }
 			dragDirection={ dragDirection }
 			hideHTMLArrows={ spinControls !== 'native' }

package/src/number-control/styles/number-control-styles.ts

@@ -10,7 +10,7 @@ import styled from '@emotion/styled';
 import InputControl from '../../input-control';
 import { COLORS } from '../../utils';
 import Button from '../../button';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 
 const htmlArrowStyles = ( { hideHTMLArrows }: { hideHTMLArrows: boolean } ) => {
 	if ( ! hideHTMLArrows ) {

package/src/palette-edit/styles.js

@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
 import Button from '../button';
 import { Heading } from '../heading';
 import { HStack } from '../h-stack';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { COLORS, CONFIG } from '../utils';
 import { View } from '../view';
 import InputControl from '../input-control';

package/src/panel/body.tsx

@@ -14,7 +14,7 @@ import { chevronUp, chevronDown } from '@wordpress/icons';
  * Internal dependencies
  */
 import type { PanelBodyProps, PanelBodyTitleProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import Button from '../button';
 import Icon from '../icon';
 import { useControlledState, useUpdateEffect } from '../utils';

package/src/panel/types.ts

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import type { ButtonAsButtonProps } from '../button/types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 export type PanelProps = {
 	/**

package/src/placeholder/README.md

@@ -17,7 +17,7 @@ Class to set on the container div.
 
 -   Required: No
 
-### `icon`: `string|Function|WPComponent|null`
+### `icon`: `string|Function|Component|null`
 
 If provided, renders an icon next to the label.
 

package/src/placeholder/index.tsx

@@ -16,7 +16,7 @@ import { speak } from '@wordpress/a11y';
  */
 import Icon from '../icon';
 import type { PlaceholderProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 const PlaceholderIllustration = (
 	<SVG

package/src/placeholder/test/index.tsx

@@ -14,7 +14,7 @@ import { speak } from '@wordpress/a11y';
  * Internal dependencies
  */
 import BasePlaceholder from '../';
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
 import type { PlaceholderProps } from '../types';
 
 jest.mock( '@wordpress/compose', () => {

package/src/popover/README.md

@@ -11,8 +11,8 @@ Render a Popover adjacent to its container.
 If a Popover is returned by your component, it will be shown. To hide the popover, simply omit it from your component's render value.
 
 ```jsx
+import { useState } from 'react';
 import { Button, Popover } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyPopover = () => {
 	const [ isVisible, setIsVisible ] = useState( false );
@@ -32,8 +32,8 @@ const MyPopover = () => {
 In order to pass an explicit anchor, you can use the `anchor` prop. When doing so, **the anchor element should be stored in local state** rather than a plain React ref to ensure reactive updating when it changes.
 
 ```jsx
+import { useState } from 'react';
 import { Button, Popover } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyPopover = () => {
 	// Use internal state instead of a ref to make sure that the component
@@ -63,18 +63,17 @@ const MyPopover = () => {
 By default Popovers render at the end of the body of your document. If you want Popover elements to render to a specific location on the page, you must render a `Popover.Slot` further up the element tree:
 
 ```jsx
-import { render } from '@wordpress/element';
+import { createRoot } from 'react-dom/client';
 import { Popover } from '@wordpress/components';
 import Content from './Content';
 
 const app = document.getElementById( 'app' );
-
-render(
+const root = createRoot( app );
+root.render(
 	<div>
 		<Content />
 		<Popover.Slot />
-	</div>,
-	app
+	</div>
 );
 ```
 

package/src/popover/index.tsx

@@ -53,7 +53,7 @@ import {
 	placementToMotionAnimationProps,
 	getReferenceElement,
 } from './utils';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type {
 	PopoverProps,
 	PopoverAnchorRefReference,
@@ -497,7 +497,6 @@ function PopoverSlot(
 ) {
 	return (
 		<Slot
-			// @ts-expect-error Need to type `SlotFill`
 			bubblesVirtually
 			name={ name }
 			className="popover-slot"

package/src/popover/test/utils/index.tsx

@@ -8,7 +8,7 @@ import { createPortal, useState } from '@wordpress/element';
  */
 import Popover from '../..';
 import { Provider as SlotFillProvider } from '../../../slot-fill';
-import type { WordPressComponentProps } from '../../../ui/context';
+import type { WordPressComponentProps } from '../../../context';
 
 const GenericIframe = ( {
 	children,

package/src/private-apis.ts

@@ -22,7 +22,7 @@ import {
 	DropdownSubMenu as DropdownSubMenuV2,
 	DropdownSubMenuTrigger as DropdownSubMenuTriggerV2,
 } from './dropdown-menu-v2';
-import { ComponentsContext } from './ui/context/context-system-provider';
+import { ComponentsContext } from './context/context-system-provider';
 import Theme from './theme';
 
 export const { lock, unlock } =

package/src/progress-bar/index.tsx

@@ -14,7 +14,7 @@ import { forwardRef } from '@wordpress/element';
  */
 import * as ProgressBarStyled from './styles';
 import type { ProgressBarProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 function UnforwardedProgressBar(
 	props: WordPressComponentProps< ProgressBarProps, 'progress', false >,

package/src/query-controls/README.md

@@ -5,8 +5,8 @@
 ### Usage
 
 ```jsx
+import { useState } from 'react';
 import { QueryControls } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const QUERY_DEFAULTS = {
 	category: 1,

package/src/radio-control/README.md

@@ -58,7 +58,7 @@ Render a user interface to select the user type using radio inputs.
 
 ```jsx
 import { RadioControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useState } from 'react';
 
 const MyRadioControl = () => {
 	const [ option, setOption ] = useState( 'a' );
@@ -82,7 +82,7 @@ const MyRadioControl = () => {
 
 The component accepts the following props:
 
-#### `help`: `string | WPElement`
+#### `help`: `string | Element`
 
 If this property is added, a help text will be generated using help property as the content.
 

package/src/radio-control/index.tsx

@@ -13,7 +13,7 @@ import { useInstanceId } from '@wordpress/compose';
  * Internal dependencies
  */
 import BaseControl from '../base-control';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { RadioControlProps } from './types';
 import { VStack } from '../v-stack';
 

package/src/radio-group/README.md

@@ -53,11 +53,11 @@ Radio groups that cannot be selected can either be given a disabled state, or be
 #### Controlled
 
 ```jsx
+import { useState } from 'react';
 import {
 	__experimentalRadio as Radio,
 	__experimentalRadioGroup as RadioGroup,
 } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyControlledRadioRadioGroup = () => {
 	const [ checked, setChecked ] = useState( '25' );
@@ -77,11 +77,11 @@ const MyControlledRadioRadioGroup = () => {
 When using the RadioGroup component as an uncontrolled component, the default value can be set with the `defaultChecked` prop.
 
 ```jsx
+import { useState } from 'react';
 import {
 	__experimentalRadio as Radio,
 	__experimentalRadioGroup as RadioGroup,
 } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyUncontrolledRadioRadioGroup = () => {
 	return (

package/src/range-control/README.md

@@ -90,8 +90,8 @@ RangeControls should provide the full range of choices available for the user to
 Render a RangeControl to make a selection from a range of incremental values.
 
 ```jsx
+import { useState } from 'react';
 import { RangeControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyRangeControl = () => {
 	const [ columns, setColumns ] = useState( 2 );
@@ -113,7 +113,7 @@ const MyRangeControl = () => {
 The set of props accepted by the component will be specified below.
 Props not included in this set will be applied to the input elements.
 
-### `afterIcon`: `string|Function|WPComponent|null`
+### `afterIcon`: `string|Function|Component|null`
 
 If this property is added, an [Icon component](/packages/components/src/icon/README.md) will be rendered after the slider with the icon equal to `afterIcon`.
 
@@ -130,7 +130,7 @@ If this property is true, a button to reset the slider is rendered.
 -   Default: `false`
 -   Platform: Web | Mobile
 
-### `beforeIcon`: `string|Function|WPComponent|null`
+### `beforeIcon`: `string|Function|Component|null`
 
 If this property is added, an [Icon component](/packages/components/src/icon/README.md) will be rendered before the slider with the icon equal to `beforeIcon`.
 
@@ -161,7 +161,7 @@ Disables the `input`, preventing new values from being applied.
 -   Platform: Web
 
 
-### `help`: `string|WPElement`
+### `help`: `string|Element`
 
 If this property is added, a help text will be generated using help property as the content.
 

package/src/range-control/index.tsx

@@ -36,8 +36,8 @@ import {
 } from './styles/range-control-styles';
 
 import type { RangeControlProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
-import { space } from '../ui/utils/space';
+import type { WordPressComponentProps } from '../context';
+import { space } from '../utils/space';
 
 const noop = () => {};
 

package/src/range-control/input-range.tsx

@@ -9,7 +9,7 @@ import { forwardRef } from '@wordpress/element';
 import { InputRange as BaseInputRange } from './styles/range-control-styles';
 
 import type { InputRangeProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 function InputRange(
 	props: WordPressComponentProps< InputRangeProps, 'input' >,

package/src/range-control/mark.tsx

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { Mark, MarkLabel } from './styles/range-control-styles';
 
 import type { RangeMarkProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 export default function RangeMark(
 	props: WordPressComponentProps< RangeMarkProps, 'span' >

package/src/range-control/rail.tsx

@@ -9,7 +9,7 @@ import { isRTL } from '@wordpress/i18n';
 import RangeMark from './mark';
 import { MarksWrapper, Rail } from './styles/range-control-styles';
 
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type {
 	MarksProps,
 	RangeMarkProps,

package/src/range-control/styles/range-control-styles.ts

@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
  */
 import NumberControl from '../../number-control';
 import { COLORS, reduceMotion, rtl } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 
 import type {
 	RangeMarkProps,
@@ -301,7 +301,7 @@ export const Tooltip = styled.span< TooltipProps >`
 `;
 
 // @todo: Refactor RangeControl with latest HStack configuration
-// @wordpress/components/ui/hstack.
+// @see: packages/components/src/h-stack
 export const InputNumber = styled( NumberControl )`
 	display: inline-block;
 	font-size: 13px;

package/src/range-control/tooltip.tsx

@@ -14,7 +14,7 @@ import { useCallback, useEffect, useState } from '@wordpress/element';
 import { Tooltip } from './styles/range-control-styles';
 
 import type { TooltipProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 export default function SimpleTooltip(
 	props: WordPressComponentProps< TooltipProps, 'span' >

package/src/sandbox/README.md

@@ -53,4 +53,10 @@ The `<title>` of the iframe document.
 The CSS class name to apply to the `<html>` and `<body>` elements of the iframe.
 
 -   Required: No
--   Default: ""
+-   Default: ""
+
+### `tabIndex`: `HTMLElement[ 'tabIndex' ]`
+
+The `tabindex` the iframe should receive.
+
+-   Required: No

package/src/sandbox/index.tsx

@@ -130,6 +130,7 @@ function SandBox( {
 	styles = [],
 	scripts = [],
 	onFocus,
+	tabIndex,
 }: SandBoxProps ) {
 	const ref = useRef< HTMLIFrameElement >();
 	const [ width, setWidth ] = useState( 0 );
@@ -282,6 +283,7 @@ function SandBox( {
 		<iframe
 			ref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }
 			title={ title }
+			tabIndex={ tabIndex }
 			className="components-sandbox"
 			sandbox="allow-scripts allow-same-origin allow-presentation"
 			onFocus={ onFocus }

package/src/sandbox/types.ts

@@ -31,4 +31,10 @@ export type SandBoxProps = {
 	 * The `onFocus` callback for the iframe.
 	 */
 	onFocus?: React.DOMAttributes< HTMLIFrameElement >[ 'onFocus' ];
+	/**
+	 * The `tabindex` the iframe should receive.
+	 *
+	 * @default 0
+	 */
+	tabIndex?: HTMLElement[ 'tabIndex' ];
 };

package/src/scroll-lock/README.md

@@ -7,8 +7,8 @@ ScrollLock is a content-free React component for declaratively preventing scroll
 Declare scroll locking as part of modal UI.
 
 ```jsx
+import { useState } from 'react';
 import { ScrollLock, Button } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyScrollLock = () => {
 	const [ isScrollLocked, setIsScrollLocked ] = useState( false );

package/src/scrollable/component.tsx

@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
 import { View } from '../view';
 import { useScrollable } from './hook';
 import type { ScrollableProps } from './types';

package/src/scrollable/hook.ts

@@ -6,8 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
-import { useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem } from '../context';
 import * as styles from './styles';
 import { useCx } from '../utils/hooks/use-cx';
 import type { ScrollableProps } from './types';

package/src/search-control/README.md

@@ -15,9 +15,9 @@ SearchControl components let users display a search control.
 Render a user interface to input the name of an additional css class.
 
 ```jsx
+import { useState } from 'react';
 import { __ } from '@wordpress/i18n';
 import { SearchControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 function MySearchControl( { className, setState } ) {
     const [ searchInput, setSearchInput ] = useState( '' );
@@ -80,7 +80,7 @@ A function that receives the value of the input.
 
 If this property is added, a help text will be generated using help property as the content.
 
--   Type: `String|WPElement`
+-   Type: `String|Element`
 -   Required: No
 
 ### hideLabelFromVision

package/src/search-control/index.tsx

@@ -16,7 +16,7 @@ import { forwardRef, useRef } from '@wordpress/element';
  */
 import Button from '../button';
 import BaseControl from '../base-control';
-import type { WordPressComponentProps } from '../ui/context/wordpress-component';
+import type { WordPressComponentProps } from '../context/wordpress-component';
 import type { SearchControlProps } from './types';
 import type { ForwardedRef } from 'react';