@wordpress/components 28.13.1-next.082ed6819.0 → 29.0.1-next.a9f418477.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.13.1-next.082ed6819.0",
+	"version": "29.0.1-next.a9f418477.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,7 +32,7 @@
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@ariakit/react": "^0.4.10",
+		"@ariakit/react": "^0.4.15",
 		"@babel/runtime": "7.25.7",
 		"@emotion/cache": "^11.7.1",
 		"@emotion/css": "^11.7.1",
@@ -44,23 +44,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.12.1-next.082ed6819.0",
-		"@wordpress/compose": "^7.12.1-next.082ed6819.0",
-		"@wordpress/date": "^5.12.1-next.082ed6819.0",
-		"@wordpress/deprecated": "^4.12.1-next.082ed6819.0",
-		"@wordpress/dom": "^4.12.1-next.082ed6819.0",
-		"@wordpress/element": "^6.12.1-next.082ed6819.0",
-		"@wordpress/escape-html": "^3.12.1-next.082ed6819.0",
-		"@wordpress/hooks": "^4.12.1-next.082ed6819.0",
-		"@wordpress/html-entities": "^4.12.1-next.082ed6819.0",
-		"@wordpress/i18n": "^5.12.1-next.082ed6819.0",
-		"@wordpress/icons": "^10.12.1-next.082ed6819.0",
-		"@wordpress/is-shallow-equal": "^5.12.1-next.082ed6819.0",
-		"@wordpress/keycodes": "^4.12.1-next.082ed6819.0",
-		"@wordpress/primitives": "^4.12.1-next.082ed6819.0",
-		"@wordpress/private-apis": "^1.12.1-next.082ed6819.0",
-		"@wordpress/rich-text": "^7.12.1-next.082ed6819.0",
-		"@wordpress/warning": "^3.12.1-next.082ed6819.0",
+		"@wordpress/a11y": "^4.13.1-next.a9f418477.0",
+		"@wordpress/compose": "^7.13.1-next.a9f418477.0",
+		"@wordpress/date": "^5.13.1-next.a9f418477.0",
+		"@wordpress/deprecated": "^4.13.1-next.a9f418477.0",
+		"@wordpress/dom": "^4.13.1-next.a9f418477.0",
+		"@wordpress/element": "^6.13.1-next.a9f418477.0",
+		"@wordpress/escape-html": "^3.13.1-next.a9f418477.0",
+		"@wordpress/hooks": "^4.13.1-next.a9f418477.0",
+		"@wordpress/html-entities": "^4.13.1-next.a9f418477.0",
+		"@wordpress/i18n": "^5.13.1-next.a9f418477.0",
+		"@wordpress/icons": "^10.13.1-next.a9f418477.0",
+		"@wordpress/is-shallow-equal": "^5.13.1-next.a9f418477.0",
+		"@wordpress/keycodes": "^4.13.1-next.a9f418477.0",
+		"@wordpress/primitives": "^4.13.1-next.a9f418477.0",
+		"@wordpress/private-apis": "^1.13.1-next.a9f418477.0",
+		"@wordpress/rich-text": "^7.13.1-next.a9f418477.0",
+		"@wordpress/warning": "^3.13.1-next.a9f418477.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2bb7bad15ddb8e88210fab7d4a1ef1565466e424"
+	"gitHead": "c1a8f3e9cada3b7d8342d1d2595c2dac0433111d"
 }

package/src/alignment-matrix-control/stories/index.story.tsx

@@ -24,8 +24,8 @@ const meta: Meta< typeof AlignmentMatrixControl > = {
 		'AlignmentMatrixControl.Icon': AlignmentMatrixControl.Icon,
 	},
 	argTypes: {
-		onChange: { control: { type: null } },
-		value: { control: { type: null } },
+		onChange: { control: false },
+		value: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

package/src/angle-picker-control/index.tsx

@@ -57,12 +57,12 @@ function UnforwardedAnglePickerControl(
 		<Flex { ...restProps } ref={ ref } className={ classes } gap={ 2 }>
 			<FlexBlock>
 				<NumberControl
+					__next40pxDefaultSize
 					label={ label }
 					className="components-angle-picker-control__input-field"
 					max={ 360 }
 					min={ 0 }
 					onChange={ handleOnNumberChange }
-					size="__unstable-large"
 					step="1"
 					value={ value }
 					spinControls="none"

package/src/angle-picker-control/stories/index.story.tsx

@@ -17,8 +17,8 @@ const meta: Meta< typeof AnglePickerControl > = {
 	title: 'Components/AnglePickerControl',
 	component: AnglePickerControl,
 	argTypes: {
-		as: { control: { type: null } },
-		value: { control: { type: null } },
+		as: { control: false },
+		value: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

package/src/animation/index.tsx

@@ -9,5 +9,4 @@
 export {
 	motion as __unstableMotion,
 	AnimatePresence as __unstableAnimatePresence,
-	MotionContext as __unstableMotionContext,
 } from 'framer-motion';

package/src/base-control/stories/index.story.tsx

@@ -18,7 +18,7 @@ const meta: Meta< typeof BaseControl > = {
 		'BaseControl.VisualLabel': BaseControl.VisualLabel,
 	},
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 		help: { control: { type: 'text' } },
 		label: { control: { type: 'text' } },
 	},

package/src/border-box-control/border-box-control-split-controls/component.tsx

@@ -73,7 +73,7 @@ const BorderBoxControlSplitControls = (
 	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
 
 	return (
-		<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>
+		<Grid { ...otherProps } ref={ mergedRef } gap={ 3 }>
 			<BorderBoxControlVisualizer value={ value } size={ size } />
 			<BorderControl
 				className={ centeredClassName }

package/src/border-box-control/stories/index.story.tsx

@@ -20,7 +20,7 @@ const meta: Meta< typeof BorderBoxControl > = {
 	component: BorderBoxControl,
 	argTypes: {
 		onChange: { action: 'onChange' },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

package/src/border-control/border-control/component.tsx

@@ -75,6 +75,8 @@ const UnconnectedBorderControl = (
 			/>
 			<HStack spacing={ 4 } className={ innerWrapperClassName }>
 				<UnitControl
+					__next40pxDefaultSize={ __next40pxDefaultSize }
+					__shouldNotWarnDeprecated36pxSize
 					prefix={
 						<Spacer marginRight={ 1 } marginBottom={ 0 }>
 							<BorderControlDropdown

package/src/border-control/stories/index.story.tsx

@@ -23,7 +23,7 @@ const meta: Meta< typeof BorderControl > = {
 			action: 'onChange',
 		},
 		width: { control: { type: 'text' } },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

package/src/box-control/README.md

@@ -1,106 +1,126 @@
 # BoxControl
 
-A control that lets users set values for top, right, bottom, and left. Can be used as an input control for values like `padding` or `margin`.
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
 
-## Usage
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-boxcontrol--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
+
+A control that lets users set values for top, right, bottom, and left. Can be
+used as an input control for values like `padding` or `margin`.
 
 ```jsx
 import { useState } from 'react';
 import { BoxControl } from '@wordpress/components';
 
 function Example() {
-	const [ values, setValues ] = useState( {
-		top: '50px',
-		left: '10%',
-		right: '10%',
-		bottom: '50px',
-	} );
-
-	return (
-		<BoxControl
-			values={ values }
-			onChange={ ( nextValues ) => setValues( nextValues ) }
-		/>
-	);
-}
+  const [ values, setValues ] = useState( {
+    top: '50px',
+    left: '10%',
+    right: '10%',
+    bottom: '50px',
+  } );
+
+  return (
+    <BoxControl
+      __next40pxDefaultSize
+      values={ values }
+      onChange={ setValues }
+    />
+  );
+};
 ```
-
 ## Props
 
-### `allowReset`: `boolean`
+### `__next40pxDefaultSize`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+### `allowReset`
 
 If this property is true, a button to reset the box control is rendered.
 
--   Required: No
--   Default: `true`
+ - Type: `boolean`
+ - Required: No
+ - Default: `true`
 
-### `splitOnAxis`: `boolean`
+### `id`
 
-If this property is true, when the box control is unlinked, vertical and horizontal controls can be used instead of updating individual sides.
+The id to use as a base for the unique HTML id attribute of the control.
 
--   Required: No
--   Default: `false`
+ - Type: `string`
+ - Required: No
 
-### `inputProps`: `object`
+### `inputProps`
 
-Props for the internal [UnitControl](../unit-control) components.
+Props for the internal `UnitControl` components.
 
--   Required: No
--   Default: `{ min: 0 }`
+ - Type: `UnitControlPassthroughProps`
+ - Required: No
+ - Default: `{
+    	min: 0,
+    }`
 
-### `label`: `string`
+### `label`
 
 Heading label for the control.
 
--   Required: No
--   Default: `__( 'Box Control' )`
+ - Type: `string`
+ - Required: No
+ - Default: `__( 'Box Control' )`
 
-### `onChange`: `(next: BoxControlValue) => void`
+### `onChange`
 
 A callback function when an input value changes.
 
--   Required: Yes
+ - Type: `(next: BoxControlValue) => void`
+ - Required: No
+ - Default: `() => {}`
 
-### `resetValues`: `object`
+### `resetValues`
 
 The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.
 
--   Required: No
--   Default: `{ top: undefined, right: undefined, bottom: undefined, left: undefined }`
-
-### `sides`: `string[]`
-
-Collection of sides to allow control of. If omitted or empty, all sides will be available. Allowed values are "top", "right", "bottom", "left", "vertical", and "horizontal".
-
--   Required: No
-
-### `units`: `WPUnitControlUnit[]`
-
-Collection of available units which are compatible with [UnitControl](../unit-control).
+ - Type: `BoxControlValue`
+ - Required: No
+ - Default: `{
+    	top: undefined,
+    	right: undefined,
+    	bottom: undefined,
+    	left: undefined,
+    }`
 
--   Required: No
+### `sides`
 
-### `values`: `object`
+Collection of sides to allow control of. If omitted or empty, all sides will be available.
 
-The `top`, `right`, `bottom`, and `left` box dimension values.
+Allowed values are "top", "right", "bottom", "left", "vertical", and "horizontal".
 
--   Required: No
+ - Type: `readonly (keyof BoxControlValue | "horizontal" | "vertical")[]`
+ - Required: No
 
-### `onMouseOver`: `function`
+### `splitOnAxis`
 
-A handler for onMouseOver events.
+If this property is true, when the box control is unlinked, vertical and horizontal controls
+can be used instead of updating individual sides.
 
--   Required: No
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
 
-### `onMouseOut`: `function`
+### `units`
 
-A handler for onMouseOut events.
+Available units to select from.
 
--   Required: No
+ - Type: `WPUnitControlUnit[]`
+ - Required: No
+ - Default: `CSS_UNITS`
 
-### `__next40pxDefaultSize`: `boolean`
+### `values`
 
-Start opting into the larger default size that will become the default size in a future version.
+The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.
 
--   Required: No
--   Default: `false`
+ - Type: `BoxControlValue`
+ - Required: No

package/src/box-control/all-input-control.tsx

@@ -74,6 +74,7 @@ export default function AllInputControl( {
 		<>
 			<StyledUnitControl
 				{ ...props }
+				__shouldNotWarnDeprecated36pxSize
 				__next40pxDefaultSize={ __next40pxDefaultSize }
 				className="component-box-control__unit-control"
 				disableUnits={ isMixed }

package/src/box-control/axial-input-controls.tsx

@@ -106,6 +106,7 @@ export default function AxialInputControls( {
 						<Tooltip placement="top-end" text={ LABELS[ side ] }>
 							<StyledUnitControl
 								{ ...props }
+								__shouldNotWarnDeprecated36pxSize
 								__next40pxDefaultSize={ __next40pxDefaultSize }
 								className="component-box-control__unit-control"
 								id={ inputId }

package/src/box-control/docs-manifest.json

@@ -0,0 +1,5 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "BoxControl",
+	"filePath": "./index.tsx"
+}

package/src/box-control/index.tsx

@@ -33,6 +33,7 @@ import type {
 	BoxControlProps,
 	BoxControlValue,
 } from './types';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const defaultInputProps = {
 	min: 0,
@@ -51,23 +52,24 @@ function useUniqueId( idProp?: string ) {
  * used as an input control for values like `padding` or `margin`.
  *
  * ```jsx
+ * import { useState } from 'react';
  * import { BoxControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
  *
  * function Example() {
- * 	const [ values, setValues ] = useState( {
- * 		top: '50px',
- * 		left: '10%',
- * 		right: '10%',
- * 		bottom: '50px',
- * 	} );
+ *   const [ values, setValues ] = useState( {
+ *     top: '50px',
+ *     left: '10%',
+ *     right: '10%',
+ *     bottom: '50px',
+ *   } );
  *
- * 	return (
- * 		<BoxControl
- * 			values={ values }
- * 			onChange={ ( nextValues ) => setValues( nextValues ) }
- * 		/>
- * 	);
+ *   return (
+ *     <BoxControl
+ *       __next40pxDefaultSize
+ *       values={ values }
+ *       onChange={ setValues }
+ *     />
+ *   );
  * };
  * ```
  */
@@ -141,6 +143,8 @@ function BoxControl( {
 	};
 
 	const inputControlProps = {
+		onMouseOver,
+		onMouseOut,
 		...inputProps,
 		onChange: handleOnChange,
 		onFocus: handleOnFocus,
@@ -150,11 +154,15 @@ function BoxControl( {
 		setSelectedUnits,
 		sides,
 		values: inputValues,
-		onMouseOver,
-		onMouseOut,
 		__next40pxDefaultSize,
 	};
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'BoxControl',
+		__next40pxDefaultSize,
+		size: undefined,
+	} );
+
 	return (
 		<Grid
 			id={ id }

package/src/box-control/input-controls.tsx

@@ -108,6 +108,7 @@ export default function BoxInputControls( {
 						<Tooltip placement="top-end" text={ LABELS[ side ] }>
 							<StyledUnitControl
 								{ ...props }
+								__shouldNotWarnDeprecated36pxSize
 								__next40pxDefaultSize={ __next40pxDefaultSize }
 								className="component-box-control__unit-control"
 								id={ inputId }

package/src/box-control/stories/index.story.tsx

@@ -17,7 +17,7 @@ const meta: Meta< typeof BoxControl > = {
 	title: 'Components/BoxControl',
 	component: BoxControl,
 	argTypes: {
-		values: { control: { type: null } },
+		values: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
@@ -49,6 +49,7 @@ const TemplateControlled: StoryFn< typeof BoxControl > = ( props ) => {
 export const Default = TemplateUncontrolled.bind( {} );
 Default.args = {
 	label: 'Label',
+	__next40pxDefaultSize: true,
 };
 
 export const Controlled = TemplateControlled.bind( {} );