@wordpress/components 25.6.0 → 25.7.0

package/src/truncate/stories/index.story.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { Truncate } from '..';
 
-const meta: ComponentMeta< typeof Truncate > = {
+const meta: Meta< typeof Truncate > = {
 	component: Truncate,
 	title: 'Components (Experimental)/Truncate',
 	argTypes: {
@@ -19,7 +19,7 @@ const meta: ComponentMeta< typeof Truncate > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
@@ -27,19 +27,17 @@ export default meta;
 const defaultText =
 	'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt. Duis semper dui id augue malesuada, ut feugiat nisi aliquam. Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel. In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat risus. Vivamus iaculis dui aliquet ante ultricies feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus nec pretium velit, sit amet consectetur ante. Praesent porttitor ex eget fermentum mattis.';
 
-const Template: ComponentStory< typeof Truncate > = ( args ) => {
+const Template: StoryFn< typeof Truncate > = ( args ) => {
 	return <Truncate { ...args } />;
 };
 
-export const Default: ComponentStory< typeof Truncate > = Template.bind( {} );
+export const Default: StoryFn< typeof Truncate > = Template.bind( {} );
 Default.args = {
 	numberOfLines: 2,
 	children: defaultText,
 };
 
-export const CharacterCount: ComponentStory< typeof Truncate > = Template.bind(
-	{}
-);
+export const CharacterCount: StoryFn< typeof Truncate > = Template.bind( {} );
 CharacterCount.args = {
 	limit: 23,
 	children: defaultText,

package/src/ui/context/constants.js

@@ -1,7 +1,5 @@
-export const REACT_TYPEOF_KEY = '$$typeof';
 export const COMPONENT_NAMESPACE = 'data-wp-component';
 export const CONNECTED_NAMESPACE = 'data-wp-c16t';
-export const CONTEXT_COMPONENT_NAMESPACE = 'data-wp-c5tc8t';
 
 /**
  * Special key where the connected namespaces are stored.

package/src/unit-control/index.tsx

@@ -223,7 +223,6 @@ function UnforwardedUnitControl(
  * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).
  *
  *
- * @example
  * ```jsx
  * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import { UnitControl } from '../';
 import { CSS_UNITS } from '../utils';
 
-const meta: ComponentMeta< typeof UnitControl > = {
+const meta: Meta< typeof UnitControl > = {
 	component: UnitControl,
 	title: 'Components (Experimental)/UnitControl',
 	argTypes: {
@@ -30,12 +30,12 @@ const meta: ComponentMeta< typeof UnitControl > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const DefaultTemplate: ComponentStory< typeof UnitControl > = ( {
+const DefaultTemplate: StoryFn< typeof UnitControl > = ( {
 	onChange,
 	...args
 } ) => {
@@ -53,8 +53,9 @@ const DefaultTemplate: ComponentStory< typeof UnitControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof UnitControl > =
-	DefaultTemplate.bind( {} );
+export const Default: StoryFn< typeof UnitControl > = DefaultTemplate.bind(
+	{}
+);
 Default.args = {
 	label: 'Label',
 };
@@ -64,7 +65,7 @@ Default.args = {
  * will not fire while a new value is typed in the input field (you can verify this
  * behavior by inspecting the console's output).
  */
-export const PressEnterToChange: ComponentStory< typeof UnitControl > =
+export const PressEnterToChange: StoryFn< typeof UnitControl > =
 	DefaultTemplate.bind( {} );
 PressEnterToChange.args = {
 	...Default.args,
@@ -75,7 +76,7 @@ PressEnterToChange.args = {
  * Most of `NumberControl`'s props can be passed to `UnitControl`, and they will
  * affect its numeric input field.
  */
-export const TweakingTheNumberInput: ComponentStory< typeof UnitControl > =
+export const TweakingTheNumberInput: StoryFn< typeof UnitControl > =
 	DefaultTemplate.bind( {} );
 TweakingTheNumberInput.args = {
 	...Default.args,
@@ -88,7 +89,7 @@ TweakingTheNumberInput.args = {
 /**
  * When only one unit is available, the unit selection dropdown becomes static text.
  */
-export const WithSingleUnit: ComponentStory< typeof UnitControl > =
+export const WithSingleUnit: StoryFn< typeof UnitControl > =
 	DefaultTemplate.bind( {} );
 WithSingleUnit.args = {
 	...Default.args,
@@ -100,7 +101,7 @@ WithSingleUnit.args = {
  * if the `isResetValueOnUnitChange` is set to `true`, the input's quantity is
  * reset to the new unit's default value.
  */
-export const WithCustomUnits: ComponentStory< typeof UnitControl > = ( {
+export const WithCustomUnits: StoryFn< typeof UnitControl > = ( {
 	onChange,
 	...args
 } ) => {

package/src/utils/hooks/use-cx.ts

@@ -25,7 +25,7 @@ const isSerializedStyles = ( o: any ): o is SerializedStyles =>
  * `cx` normally knows how to handle. It also hooks into the Emotion
  * Cache, allowing `css` calls to work inside iframes.
  *
- * @example
+ * ```jsx
  * import { css } from '@emotion/react';
  *
  * const styles = css`
@@ -39,6 +39,7 @@ const isSerializedStyles = ( o: any ): o is SerializedStyles =>
  *
  * 	return <span className={classes} {...props} />;
  * }
+ * ```
  */
 export const useCx = () => {
 	const cache = useEmotionCache();

package/src/utils/math.js

@@ -96,14 +96,3 @@ export function roundClamp(
 		? getNumber( clampedValue.toFixed( precision ) )
 		: clampedValue;
 }
-
-/**
- * Clamps a value based on a min/max range with rounding.
- * Returns a string.
- *
- * @param {Parameters<typeof roundClamp>} args Arguments for roundClamp().
- * @return {string} The rounded and clamped value.
- */
-export function roundClampString( ...args ) {
-	return roundClamp( ...args ).toString();
-}

package/src/utils/values.js

@@ -39,65 +39,6 @@ export function getDefinedValue( values = [], fallbackValue ) {
 	return values.find( isValueDefined ) ?? fallbackValue;
 }
 
-/**
- * @param {string} [locale]
- * @return {[RegExp, RegExp]} The delimiter and decimal regexp
- */
-const getDelimiterAndDecimalRegex = ( locale ) => {
-	const formatted = Intl.NumberFormat( locale ).format( 1000.1 );
-	const delimiter = formatted[ 1 ];
-	const decimal = formatted[ formatted.length - 2 ];
-	return [
-		new RegExp( `\\${ delimiter }`, 'g' ),
-		new RegExp( `\\${ decimal }`, 'g' ),
-	];
-};
-
-// https://en.wikipedia.org/wiki/Decimal_separator#Current_standards
-const INTERNATIONAL_THOUSANDS_DELIMITER = / /g;
-
-const ARABIC_NUMERAL_LOCALES = [ 'ar', 'fa', 'ur', 'ckb', 'ps' ];
-
-const EASTERN_ARABIC_NUMBERS = /([۰-۹]|[٠-٩])/g;
-
-/**
- * Checks to see if a value is a numeric value (`number` or `string`).
- *
- * Intentionally ignores whether the thousands delimiters are only
- * in the thousands marks.
- *
- * @param {any}    value
- * @param {string} [locale]
- * @return {boolean} Whether value is numeric.
- */
-export function isValueNumeric( value, locale = window.navigator.language ) {
-	if ( ARABIC_NUMERAL_LOCALES.some( ( l ) => locale.startsWith( l ) ) ) {
-		locale = 'en-GB';
-		if ( EASTERN_ARABIC_NUMBERS.test( value ) ) {
-			value = value
-				.replace( /[٠-٩]/g, ( /** @type {string} */ d ) =>
-					'٠١٢٣٤٥٦٧٨٩'.indexOf( d )
-				)
-				.replace( /[۰-۹]/g, ( /** @type {string} */ d ) =>
-					'۰۱۲۳۴۵۶۷۸۹'.indexOf( d )
-				)
-				.replace( /٬/g, ',' )
-				.replace( /٫/g, '.' );
-		}
-	}
-
-	const [ delimiterRegexp, decimalRegexp ] =
-		getDelimiterAndDecimalRegex( locale );
-	const valueToCheck =
-		typeof value === 'string'
-			? value
-					.replace( delimiterRegexp, '' )
-					.replace( decimalRegexp, '.' )
-					.replace( INTERNATIONAL_THOUSANDS_DELIMITER, '' )
-			: value;
-	return ! isNaN( parseFloat( valueToCheck ) ) && isFinite( valueToCheck );
-}
-
 /**
  * Converts a string to a number.
  *
@@ -108,16 +49,6 @@ export const stringToNumber = ( value ) => {
 	return parseFloat( value );
 };
 
-/**
- * Converts a number to a string.
- *
- * @param {number} value
- * @return {string} Number as a string.
- */
-export const numberToString = ( value ) => {
-	return `${ value }`;
-};
-
 /**
  * Regardless of the input being a string or a number, returns a number.
  *
@@ -129,15 +60,3 @@ export const numberToString = ( value ) => {
 export const ensureNumber = ( value ) => {
 	return typeof value === 'string' ? stringToNumber( value ) : value;
 };
-
-/**
- * Regardless of the input being a string or a number, returns a number.
- *
- * Returns `undefined` in case the string is `undefined` or not a valid numeric value.
- *
- * @param {string | number} value
- * @return {string} The converted string, or `undefined` in case the input is `undefined` or `NaN`.
- */
-export const ensureString = ( value ) => {
-	return typeof value === 'string' ? value : numberToString( value );
-};

package/src/v-stack/stories/e2e/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,13 +9,13 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import { View } from '../../../view';
 import { VStack } from '../..';
 
-const meta: ComponentMeta< typeof VStack > = {
+const meta: Meta< typeof VStack > = {
 	component: VStack,
 	title: 'Components (Experimental)/VStack',
 };
 export default meta;
 
-const Template: ComponentStory< typeof VStack > = ( props ) => {
+const Template: StoryFn< typeof VStack > = ( props ) => {
 	return (
 		<VStack
 			{ ...props }
@@ -30,7 +30,7 @@ const Template: ComponentStory< typeof VStack > = ( props ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof VStack > = Template.bind( {} );
+export const Default: StoryFn< typeof VStack > = Template.bind( {} );
 Default.args = {
 	spacing: 3,
 };

package/src/v-stack/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -23,7 +23,7 @@ const ALIGNMENTS = {
 	stretch: 'stretch',
 };
 
-const meta: ComponentMeta< typeof VStack > = {
+const meta: Meta< typeof VStack > = {
 	component: VStack,
 	title: 'Components (Experimental)/VStack',
 	argTypes: {
@@ -39,12 +39,12 @@ const meta: ComponentMeta< typeof VStack > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: ComponentStory< typeof VStack > = ( props ) => {
+const Template: StoryFn< typeof VStack > = ( props ) => {
 	return (
 		<VStack
 			{ ...props }

package/src/view/component.tsx

@@ -14,7 +14,6 @@ import type { ViewProps } from './types';
  * `View` is a core component that renders everything in the library.
  * It is the principle component in the entire library.
  *
- * @example
  * ```jsx
  * import { View } from `@wordpress/components`;
  *

package/src/view/stories/index.story.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { View } from '..';
 
-const meta: ComponentMeta< typeof View > = {
+const meta: Meta< typeof View > = {
 	component: View,
 	title: 'Components (Experimental)/View',
 	argTypes: {
@@ -17,16 +17,16 @@ const meta: ComponentMeta< typeof View > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: ComponentStory< typeof View > = ( args ) => {
+const Template: StoryFn< typeof View > = ( args ) => {
 	return <View { ...args } />;
 };
 
-export const Default: ComponentStory< typeof View > = Template.bind( {} );
+export const Default: StoryFn< typeof View > = Template.bind( {} );
 Default.args = {
 	children: 'An example tip',
 };

package/src/visually-hidden/stories/index.story.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { VisuallyHidden } from '..';
 
-const meta: ComponentMeta< typeof VisuallyHidden > = {
+const meta: Meta< typeof VisuallyHidden > = {
 	component: VisuallyHidden,
 	title: 'Components/VisuallyHidden',
 	argTypes: {
@@ -19,12 +19,12 @@ const meta: ComponentMeta< typeof VisuallyHidden > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-export const Default: ComponentStory< typeof VisuallyHidden > = ( args ) => (
+export const Default: StoryFn< typeof VisuallyHidden > = ( args ) => (
 	<>
 		<VisuallyHidden as="span" { ...args }>
 			This should not show.
@@ -39,7 +39,7 @@ export const Default: ComponentStory< typeof VisuallyHidden > = ( args ) => (
 	</>
 );
 
-export const WithForwardedProps: ComponentStory< typeof VisuallyHidden > = (
+export const WithForwardedProps: StoryFn< typeof VisuallyHidden > = (
 	args
 ) => (
 	<>
@@ -52,9 +52,9 @@ export const WithForwardedProps: ComponentStory< typeof VisuallyHidden > = (
 	</>
 );
 
-export const WithAdditionalClassNames: ComponentStory<
-	typeof VisuallyHidden
-> = ( args ) => (
+export const WithAdditionalClassNames: StoryFn< typeof VisuallyHidden > = (
+	args
+) => (
 	<>
 		Additional class names passed to VisuallyHidden extend the component
 		class name.{ ' ' }

package/src/z-stack/stories/index.story.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { CSSProperties } from 'react';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -11,7 +11,7 @@ import { Elevation } from '../../elevation';
 import { View } from '../../view';
 import { ZStack } from '..';
 
-const meta: ComponentMeta< typeof ZStack > = {
+const meta: Meta< typeof ZStack > = {
 	component: ZStack,
 	title: 'Components (Experimental)/ZStack',
 	argTypes: {
@@ -22,7 +22,7 @@ const meta: ComponentMeta< typeof ZStack > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
@@ -52,7 +52,7 @@ const Avatar = ( {
 	);
 };
 
-const Template: ComponentStory< typeof ZStack > = ( args ) => {
+const Template: StoryFn< typeof ZStack > = ( args ) => {
 	return (
 		<ZStack { ...args }>
 			<Avatar backgroundColor="#444" />
@@ -63,7 +63,7 @@ const Template: ComponentStory< typeof ZStack > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof ZStack > = Template.bind( {} );
+export const Default: StoryFn< typeof ZStack > = Template.bind( {} );
 Default.args = {
 	offset: 20,
 };