@wordpress/components 19.12.0 → 19.13.0

package/build-types/z-stack/component.d.ts

@@ -1,31 +1,21 @@
+import type { ZStackProps } from './types';
 /**
- * External dependencies
+ * `ZStack` allows you to stack things along the Z-axis.
+ *
+ * ```jsx
+ * import { __experimentalZStack as ZStack } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <ZStack offset={ 20 } isLayered>
+ *       <ExampleImage />
+ *       <ExampleImage />
+ *       <ExampleImage />
+ *     </ZStack>
+ *   );
+ * }
+ * ```
  */
-import type { ReactNode } from 'react';
-export interface ZStackProps {
-    /**
-     * Layers children elements on top of each other (first: highest z-index, last: lowest z-index).
-     *
-     * @default true
-     */
-    isLayered?: boolean;
-    /**
-     * Reverse the layer ordering (first: lowest z-index, last: highest z-index).
-     *
-     * @default false
-     */
-    isReversed?: boolean;
-    /**
-     * The amount of offset between each child element. The amount of space between each child element. Defaults to `0`. Its value is automatically inverted (i.e. from positive to negative, and viceversa) when switching from LTR to RTL.
-     *
-     * @default 0
-     */
-    offset?: number;
-    /**
-     * Child elements.
-     */
-    children: ReactNode;
-}
-declare const _default: import("../ui/context").WordPressComponent<"div", ZStackProps, true>;
-export default _default;
+export declare const ZStack: import("../ui/context").WordPressComponent<"div", ZStackProps, true>;
+export default ZStack;
 //# sourceMappingURL=component.d.ts.map

package/build-types/z-stack/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/z-stack/component.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAerD,MAAM,WAAW,WAAW;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACpB;;AA+CD,wBAAkD"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/z-stack/component.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAgD3C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,MAAM,sEAAgD,CAAC;AAEpE,eAAe,MAAM,CAAC"}

package/build-types/z-stack/stories/index.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ZStack } from '..';
+declare const meta: ComponentMeta<typeof ZStack>;
+export default meta;
+export declare const Default: ComponentStory<typeof ZStack>;
+//# sourceMappingURL=index.d.ts.map

package/build-types/z-stack/stories/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/z-stack/stories/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAQtE,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,MAAM,CAavC,CAAC;AACF,eAAe,IAAI,CAAC;AA4CpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,MAAM,CAAwB,CAAC"}

package/build-types/z-stack/types.d.ts

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+export declare type ZStackProps = {
+    /**
+     * Layers children elements on top of each other (first: highest z-index,
+     * last: lowest z-index).
+     *
+     * @default true
+     */
+    isLayered?: boolean;
+    /**
+     * Reverse the layer ordering (first: lowest z-index, last: highest
+     * z-index).
+     *
+     * @default false
+     */
+    isReversed?: boolean;
+    /**
+     * The amount of space between each child element. Its value is
+     * automatically inverted (i.e. from positive to negative, and viceversa)
+     * when switching from LTR to RTL.
+     *
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * The children to stack.
+     */
+    children: ReactNode;
+};
+//# sourceMappingURL=types.d.ts.map

package/build-types/z-stack/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/z-stack/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,oBAAY,WAAW,GAAG;IACzB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.12.0",
+	"version": "19.13.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,21 +38,21 @@
 		"@emotion/utils": "1.0.0",
 		"@floating-ui/react-dom": "0.6.3",
 		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "^3.10.0",
-		"@wordpress/compose": "^5.8.0",
-		"@wordpress/date": "^4.10.0",
-		"@wordpress/deprecated": "^3.10.0",
-		"@wordpress/dom": "^3.10.0",
-		"@wordpress/element": "^4.8.0",
-		"@wordpress/escape-html": "^2.10.0",
-		"@wordpress/hooks": "^3.10.0",
-		"@wordpress/i18n": "^4.10.0",
-		"@wordpress/icons": "^9.1.0",
-		"@wordpress/is-shallow-equal": "^4.10.0",
-		"@wordpress/keycodes": "^3.10.0",
-		"@wordpress/primitives": "^3.8.0",
-		"@wordpress/rich-text": "^5.8.0",
-		"@wordpress/warning": "^2.10.0",
+		"@wordpress/a11y": "^3.11.0",
+		"@wordpress/compose": "^5.9.0",
+		"@wordpress/date": "^4.11.0",
+		"@wordpress/deprecated": "^3.11.0",
+		"@wordpress/dom": "^3.11.0",
+		"@wordpress/element": "^4.9.0",
+		"@wordpress/escape-html": "^2.11.0",
+		"@wordpress/hooks": "^3.11.0",
+		"@wordpress/i18n": "^4.11.0",
+		"@wordpress/icons": "^9.2.0",
+		"@wordpress/is-shallow-equal": "^4.11.0",
+		"@wordpress/keycodes": "^3.11.0",
+		"@wordpress/primitives": "^3.9.0",
+		"@wordpress/rich-text": "^5.9.0",
+		"@wordpress/warning": "^2.11.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"dom-scroll-into-view": "^1.2.1",
@@ -76,5 +76,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a3e0b62091e8a8bdf5e2518e42d60d7098af48cc"
+	"gitHead": "48d5f37dfb52d2e77c8eeb662f9874cf141b8c6b"
 }

package/src/alignment-matrix-control/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -20,6 +19,8 @@ import { Root, Row } from './styles/alignment-matrix-control-styles';
 import AlignmentMatrixControlIcon from './icon';
 import { GRID, getItemId } from './utils';
 
+const noop = () => {};
+
 function useBaseId( id ) {
 	const instanceId = useInstanceId(
 		AlignmentMatrixControl,

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

@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { FlexBlock, FlexItem } from '../flex';
-import NumberControl from '../input-control';
+import NumberControl from '../number-control';
 import AngleCircle from './angle-circle';
 import { Root } from './styles/angle-picker-control-styles';
 import { space } from '../ui/utils/space';

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

@@ -35,9 +35,8 @@ const BaseControlWithTextarea: ComponentStory< typeof BaseControl > = ( {
 	);
 };
 
-export const Default: ComponentStory<
-	typeof BaseControl
-> = BaseControlWithTextarea.bind( {} );
+export const Default: ComponentStory< typeof BaseControl > =
+	BaseControlWithTextarea.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
 	id: 'textarea-default-1',

package/src/border-box-control/border-box-control-linked-button/component.tsx

@@ -19,11 +19,8 @@ const BorderBoxControlLinkedButton = (
 	props: WordPressComponentProps< LinkedButtonProps, 'div' >,
 	forwardedRef: React.ForwardedRef< any >
 ) => {
-	const {
-		className,
-		isLinked,
-		...buttonProps
-	} = useBorderBoxControlLinkedButton( props );
+	const { className, isLinked, ...buttonProps } =
+		useBorderBoxControlLinkedButton( props );
 	const label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );
 
 	return (

package/src/border-box-control/utils.ts

@@ -135,8 +135,11 @@ export const getShorthandBorderStyle = (
 		return fallbackBorder;
 	}
 
-	const { color: fallbackColor, style: fallbackStyle, width: fallbackWidth } =
-		fallbackBorder || {};
+	const {
+		color: fallbackColor,
+		style: fallbackStyle,
+		width: fallbackWidth,
+	} = fallbackBorder || {};
 
 	const {
 		color = fallbackColor,

package/src/border-control/border-control/hook.ts

@@ -62,9 +62,8 @@ export function useBorderControl(
 	const onWidthChange = useCallback(
 		( newWidth?: string ) => {
 			const newWidthValue = newWidth === '' ? undefined : newWidth;
-			const [ parsedValue ] = parseQuantityAndUnitFromRawValue(
-				newWidth
-			);
+			const [ parsedValue ] =
+				parseQuantityAndUnitFromRawValue( newWidth );
 			const hasZeroWidth = parsedValue === 0;
 
 			const updatedBorder = { ...border, width: newWidthValue };

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

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
 /**
  * Internal dependencies
  */
@@ -14,6 +10,8 @@ import {
 	isValuesDefined,
 } from './utils';
 
+const noop = () => {};
+
 export default function AllInputControl( {
 	onChange = noop,
 	onFocus = noop,

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

@@ -115,12 +115,10 @@ export default function AxialInputControls( {
 			className="component-box-control__vertical-horizontal-input-controls"
 		>
 			{ filteredSides.map( ( side ) => {
-				const [
-					parsedQuantity,
-					parsedUnit,
-				] = parseQuantityAndUnitFromRawValue(
-					side === 'vertical' ? values.top : values.left
-				);
+				const [ parsedQuantity, parsedUnit ] =
+					parseQuantityAndUnitFromRawValue(
+						side === 'vertical' ? values.top : values.left
+					);
 				const selectedUnit =
 					side === 'vertical'
 						? selectedUnits.top

package/src/box-control/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -39,6 +34,8 @@ const defaultInputProps = {
 	min: 0,
 };
 
+const noop = () => {};
+
 function useUniqueId( idProp ) {
 	const instanceId = useInstanceId( BoxControl, 'inspector-box-control' );
 

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -11,6 +6,8 @@ import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import { ALL_SIDES, LABELS } from './utils';
 import { LayoutContainer, Layout } from './styles/box-control-styles';
 
+const noop = () => {};
+
 export default function BoxInputControls( {
 	onChange = noop,
 	onFocus = noop,
@@ -38,37 +35,39 @@ export default function BoxInputControls( {
 		onChange( nextValues );
 	};
 
-	const createHandleOnChange = ( side ) => ( next, { event } ) => {
-		const { altKey } = event;
-		const nextValues = { ...values };
-		const isNumeric = ! isNaN( parseFloat( next ) );
-		const nextValue = isNumeric ? next : undefined;
+	const createHandleOnChange =
+		( side ) =>
+		( next, { event } ) => {
+			const { altKey } = event;
+			const nextValues = { ...values };
+			const isNumeric = ! isNaN( parseFloat( next ) );
+			const nextValue = isNumeric ? next : undefined;
 
-		nextValues[ side ] = nextValue;
+			nextValues[ side ] = nextValue;
 
-		/**
-		 * Supports changing pair sides. For example, holding the ALT key
-		 * when changing the TOP will also update BOTTOM.
-		 */
-		if ( altKey ) {
-			switch ( side ) {
-				case 'top':
-					nextValues.bottom = nextValue;
-					break;
-				case 'bottom':
-					nextValues.top = nextValue;
-					break;
-				case 'left':
-					nextValues.right = nextValue;
-					break;
-				case 'right':
-					nextValues.left = nextValue;
-					break;
+			/**
+			 * Supports changing pair sides. For example, holding the ALT key
+			 * when changing the TOP will also update BOTTOM.
+			 */
+			if ( altKey ) {
+				switch ( side ) {
+					case 'top':
+						nextValues.bottom = nextValue;
+						break;
+					case 'bottom':
+						nextValues.top = nextValue;
+						break;
+					case 'left':
+						nextValues.right = nextValue;
+						break;
+					case 'right':
+						nextValues.left = nextValue;
+						break;
+				}
 			}
-		}
 
-		handleOnChange( nextValues );
-	};
+			handleOnChange( nextValues );
+		};
 
 	const createHandleOnUnitChange = ( side ) => ( next ) => {
 		const newUnits = { ...selectedUnits };
@@ -93,10 +92,8 @@ export default function BoxInputControls( {
 				className="component-box-control__input-controls"
 			>
 				{ filteredSides.map( ( side ) => {
-					const [
-						parsedQuantity,
-						parsedUnit,
-					] = parseQuantityAndUnitFromRawValue( values[ side ] );
+					const [ parsedQuantity, parsedUnit ] =
+						parseQuantityAndUnitFromRawValue( values[ side ] );
 
 					const computedUnit = values[ side ]
 						? parsedUnit

package/src/box-control/unit-control.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import { useHover } from '@use-gesture/react';
 
 /**
@@ -10,6 +9,8 @@ import { useHover } from '@use-gesture/react';
 import BaseTooltip from '../tooltip';
 import { UnitControlWrapper, UnitControl } from './styles/box-control-styles';
 
+const noop = () => {};
+
 export default function BoxUnitControl( {
 	isFirst,
 	isLast,

package/src/button/index.native.js

@@ -8,7 +8,6 @@ import {
 	View,
 	Platform,
 } from 'react-native';
-import { isArray } from 'lodash';
 import { LongPressGestureHandler, State } from 'react-native-gesture-handler';
 
 /**
@@ -153,7 +152,7 @@ export function Button( props ) {
 			( !! label &&
 				// The children are empty and...
 				( ! children ||
-					( isArray( children ) && ! children.length ) ) &&
+					( Array.isArray( children ) && ! children.length ) ) &&
 				// The tooltip is not explicitly disabled.
 				false !== showTooltip ) );
 

package/src/card/stories/index.js

@@ -74,7 +74,8 @@ export const _default = () => {
 		isBorderless: select(
 			'CardHeader: isBorderless',
 			{
-				'unset (defaults to the value set on the <Card> parent)': PROP_UNSET,
+				'unset (defaults to the value set on the <Card> parent)':
+					PROP_UNSET,
 				true: true,
 				false: false,
 			},
@@ -89,7 +90,8 @@ export const _default = () => {
 		size: select(
 			'CardHeader: size',
 			{
-				'unset (defaults to the value set on the <Card> parent)': PROP_UNSET,
+				'unset (defaults to the value set on the <Card> parent)':
+					PROP_UNSET,
 				large: 'large',
 				medium: 'medium',
 				small: 'small',
@@ -105,7 +107,8 @@ export const _default = () => {
 		size: select(
 			'CardBody: size',
 			{
-				'unset (defaults to the value set on the <Card> parent)': PROP_UNSET,
+				'unset (defaults to the value set on the <Card> parent)':
+					PROP_UNSET,
 				large: 'large',
 				medium: 'medium',
 				small: 'small',
@@ -120,7 +123,8 @@ export const _default = () => {
 		isBorderless: select(
 			'CardFooter: isBorderless',
 			{
-				'unset (defaults to the value set on the <Card> parent)': PROP_UNSET,
+				'unset (defaults to the value set on the <Card> parent)':
+					PROP_UNSET,
 				true: true,
 				false: false,
 			},
@@ -148,7 +152,8 @@ export const _default = () => {
 		size: select(
 			'CardFooter: size',
 			{
-				'unset (defaults to the value set on the <Card> parent)': PROP_UNSET,
+				'unset (defaults to the value set on the <Card> parent)':
+					PROP_UNSET,
 				large: 'large',
 				medium: 'medium',
 				small: 'small',

package/src/checkbox-control/index.tsx

@@ -66,9 +66,8 @@ export function CheckboxControl(
 	}
 
 	const [ showCheckedIcon, setShowCheckedIcon ] = useState( false );
-	const [ showIndeterminateIcon, setShowIndeterminateIcon ] = useState(
-		false
-	);
+	const [ showIndeterminateIcon, setShowIndeterminateIcon ] =
+		useState( false );
 
 	// Run the following callback every time the `ref` (and the additional
 	// dependencies) change.

package/src/checkbox-control/stories/index.tsx

@@ -53,9 +53,8 @@ const DefaultTemplate: ComponentStory< typeof CheckboxControl > = ( {
 	);
 };
 
-export const Default: ComponentStory<
-	typeof CheckboxControl
-> = DefaultTemplate.bind( {} );
+export const Default: ComponentStory< typeof CheckboxControl > =
+	DefaultTemplate.bind( {} );
 Default.args = {
 	label: 'Is author',
 	help: 'Is the user an author or not?',

package/src/checkbox-control/test/index.tsx

@@ -3,7 +3,6 @@
  */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,6 +15,8 @@ import { useState } from '@wordpress/element';
 import BaseCheckboxControl from '..';
 import type { CheckboxControlProps } from '../types';
 
+const noop = () => {};
+
 const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
 
 const CheckboxControl = ( props: Omit< CheckboxControlProps, 'onChange' > ) => {

package/src/color-picker/index.native.js

@@ -36,10 +36,13 @@ function ColorPicker( {
 	const didMount = useRef( false );
 	const isIOS = Platform.OS === 'ios';
 	const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
-	const { h: initH, s: initS, v: initV } =
-		! isGradientColor && activeColor
-			? colord( activeColor ).toHsv()
-			: { h: 0, s: 50, v: 50 };
+	const {
+		h: initH,
+		s: initS,
+		v: initV,
+	} = ! isGradientColor && activeColor
+		? colord( activeColor ).toHsv()
+		: { h: 0, s: 50, v: 50 };
 	const [ hue, setHue ] = useState( initH );
 	const [ sat, setSaturation ] = useState( initS / 100 );
 	const [ val, setValue ] = useState( initV / 100 );

package/src/combobox-control/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop, deburr } from 'lodash';
+import { deburr } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -29,6 +29,8 @@ import Button from '../button';
 import { Flex, FlexBlock, FlexItem } from '../flex';
 import withFocusOutside from '../higher-order/with-focus-outside';
 
+const noop = () => {};
+
 const DetectOutside = withFocusOutside(
 	class extends Component {
 		handleFocusOutside( event ) {
@@ -166,7 +168,7 @@ function ComboboxControl( {
 
 	const handleOnReset = () => {
 		onChange( null );
-		inputContainer.current.input.focus();
+		inputContainer.current.focus();
 	};
 
 	// Update current selections when the filter input changes.

package/src/confirm-dialog/component.tsx

@@ -57,14 +57,13 @@ function ConfirmDialog(
 	}, [ isOpenProp ] );
 
 	const handleEvent = useCallback(
-		( callback?: ( event: DialogInputEvent ) => void ) => (
-			event: DialogInputEvent
-		) => {
-			callback?.( event );
-			if ( shouldSelfClose ) {
-				setIsOpen( false );
-			}
-		},
+		( callback?: ( event: DialogInputEvent ) => void ) =>
+			( event: DialogInputEvent ) => {
+				callback?.( event );
+				if ( shouldSelfClose ) {
+					setIsOpen( false );
+				}
+			},
 		[ shouldSelfClose, setIsOpen ]
 	);
 

package/src/custom-gradient-bar/constants.js

@@ -1,10 +1,10 @@
 export const GRADIENT_MARKERS_WIDTH = 16;
 export const INSERT_POINT_WIDTH = 16;
-export const MINIMUM_ABSOLUTE_LEFT_POSITION = 5;
 export const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;
 export const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;
 export const MINIMUM_SIGNIFICANT_MOVE = 5;
 
-export const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
+export const KEYBOARD_CONTROL_POINT_VARIATION =
+	MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
 export const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER =
 	( INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH ) / 2;