@wordpress/components 19.13.0 → 19.14.0

package/src/mobile/link-picker/index.native.js

@@ -3,7 +3,6 @@
  */
 import { SafeAreaView, TouchableOpacity, View } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
-import { lowerCase, startsWith } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -26,7 +25,7 @@ import styles from './styles.scss';
 export const createDirectEntry = ( value ) => {
 	let type = 'URL';
 
-	const protocol = lowerCase( getProtocol( value ) ) || '';
+	const protocol = getProtocol( value )?.toLowerCase() || '';
 
 	if ( protocol.includes( 'mailto' ) ) {
 		type = 'mailto';
@@ -36,7 +35,7 @@ export const createDirectEntry = ( value ) => {
 		type = 'tel';
 	}
 
-	if ( startsWith( value, '#' ) ) {
+	if ( value?.startsWith( '#' ) ) {
 		type = 'internal';
 	}
 

package/src/mobile/segmented-control/index.native.js

@@ -9,7 +9,6 @@ import {
 	Animated,
 	Easing,
 } from 'react-native';
-import { values, map, reduce } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -101,11 +100,13 @@ const SegmentedControls = ( {
 		const { paddingLeft: offset } = isIOS
 			? styles.containerIOS
 			: styles.container;
-		const widths = map( values( segmentsDimensions ), 'width' );
+		const widths = Object.values( segmentsDimensions ).map(
+			( dimension ) => dimension.width
+		);
 		const widthsDistance = widths.slice( 0, index );
-		const widthsDistanceSum = reduce(
-			widthsDistance,
-			( sum, n ) => sum + n
+		const widthsDistanceSum = widthsDistance.reduce(
+			( sum, n ) => sum + n,
+			0
 		);
 
 		const endValue = index === 0 ? 0 : widthsDistanceSum;

package/src/navigation/group/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { find, uniqueId } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,8 +15,10 @@ import { NavigationGroupContext } from './context';
 import { GroupTitleUI } from '../styles/navigation-styles';
 import { useNavigationContext } from '../context';
 
+let uniqueId = 0;
+
 export default function NavigationGroup( { children, className, title } ) {
-	const [ groupId ] = useState( uniqueId( 'group-' ) );
+	const [ groupId ] = useState( `group-${ ++uniqueId }` );
 	const {
 		navigationTree: { items },
 	} = useNavigationContext();
@@ -25,7 +26,11 @@ export default function NavigationGroup( { children, className, title } ) {
 	const context = { group: groupId };
 
 	// Keep the children rendered to make sure invisible items are included in the navigation tree.
-	if ( ! find( items, { group: groupId, _isVisible: true } ) ) {
+	if (
+		! Object.values( items ).some(
+			( item ) => item.group === groupId && item._isVisible
+		)
+	) {
 		return (
 			<NavigationGroupContext.Provider value={ context }>
 				{ children }

package/src/navigation/item/base.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { uniqueId } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,10 +15,12 @@ import { useNavigationContext } from '../context';
 import { useNavigationTreeItem } from './use-navigation-tree-item';
 import { ItemBaseUI } from '../styles/navigation-styles';
 
+let uniqueId = 0;
+
 export default function NavigationItemBase( props ) {
 	const { children, className, ...restProps } = props;
 
-	const [ itemId ] = useState( uniqueId( 'item-' ) );
+	const [ itemId ] = useState( `item-${ ++uniqueId }` );
 
 	useNavigationTreeItem( itemId, props );
 	const { navigationTree } = useNavigationContext();

package/src/navigation/item/use-navigation-tree-item.js

@@ -34,5 +34,7 @@ export const useNavigationTreeItem = ( itemId, props ) => {
 		return () => {
 			removeItem( itemId );
 		};
+		// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/41639
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ activeMenu, search ] );
 };

package/src/navigation/menu/menu-title-search.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -49,7 +44,9 @@ function MenuTitleSearch( {
 			return;
 		}
 
-		const count = filter( items, '_isVisible' ).length;
+		const count = Object.values( items ).filter(
+			( item ) => item._isVisible
+		).length;
 		const resultsFoundMessage = sprintf(
 			/* translators: %d: number of results. */
 			_n( '%d result found.', '%d results found.', count ),

package/src/navigation/menu/search-no-results-found.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -19,7 +14,9 @@ export default function NavigationSearchNoResultsFound( { search } ) {
 		navigationTree: { items },
 	} = useNavigationContext();
 
-	const resultsCount = filter( items, '_isVisible' ).length;
+	const resultsCount = Object.values( items ).filter(
+		( item ) => item._isVisible
+	).length;
 
 	if ( ! search || !! resultsCount ) {
 		return null;

package/src/navigation/use-navigation-tree-nodes.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { omit } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -13,14 +8,20 @@ export const useNavigationTreeNodes = () => {
 
 	const getNode = ( key ) => nodes[ key ];
 
-	const addNode = ( key, value ) =>
-		setNodes( ( original ) => ( {
+	const addNode = ( key, value ) => {
+		const { children, ...newNode } = value;
+		return setNodes( ( original ) => ( {
 			...original,
-			[ key ]: omit( value, 'children' ),
+			[ key ]: newNode,
 		} ) );
+	};
 
-	const removeNode = ( key ) =>
-		setNodes( ( original ) => omit( original, key ) );
+	const removeNode = ( key ) => {
+		return setNodes( ( original ) => {
+			const { [ key ]: removedNode, ...remainingNodes } = original;
+			return remainingNodes;
+		} );
+	};
 
 	return { nodes, getNode, addNode, removeNode };
 };

package/src/navigation/utils.js

@@ -1,11 +1,11 @@
 /**
  * External dependencies
  */
-import { deburr } from 'lodash';
+import removeAccents from 'remove-accents';
 
 // @see packages/block-editor/src/components/inserter/search-items.js
 export const normalizeInput = ( input ) =>
-	deburr( input ).replace( /^\//, '' ).toLowerCase();
+	removeAccents( input ).replace( /^\//, '' ).toLowerCase();
 
 export const normalizedSearch = ( title, search ) =>
 	-1 !== normalizeInput( title ).indexOf( normalizeInput( search ) );

package/src/number-control/stories/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { boolean, number, text } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -16,29 +11,21 @@ import NumberControl from '../';
 export default {
 	title: 'Components (Experimental)/NumberControl',
 	component: NumberControl,
-	parameters: {
-		knobs: { disable: false },
+	argTypes: {
+		size: {
+			control: {
+				type: 'select',
+				options: [ 'default', 'small', '__unstable-large' ],
+			},
+		},
+		onChange: { action: 'onChange' },
 	},
 };
 
-function Example() {
+function Template( { onChange, ...props } ) {
 	const [ value, setValue ] = useState( '0' );
 	const [ isValidValue, setIsValidValue ] = useState( true );
 
-	const props = {
-		disabled: boolean( 'disabled', false ),
-		hideLabelFromVision: boolean( 'hideLabelFromVision', false ),
-		isPressEnterToChange: boolean( 'isPressEnterToChange', false ),
-		isShiftStepEnabled: boolean( 'isShiftStepEnabled', true ),
-		label: text( 'label', 'Number' ),
-		min: number( 'min', 0 ),
-		max: number( 'max', 100 ),
-		placeholder: text( 'placeholder', '0' ),
-		required: boolean( 'required', false ),
-		shiftStep: number( 'shiftStep', 10 ),
-		step: text( 'step', '1' ),
-	};
-
 	return (
 		<>
 			<NumberControl
@@ -47,6 +34,7 @@ function Example() {
 				onChange={ ( v, extra ) => {
 					setValue( v );
 					setIsValidValue( extra.event.target.validity.valid );
+					onChange( v, extra );
 				} }
 			/>
 			<p>Is valid? { isValidValue ? 'Yes' : 'No' }</p>
@@ -54,6 +42,18 @@ function Example() {
 	);
 }
 
-export const _default = () => {
-	return <Example />;
+export const Default = Template.bind( {} );
+Default.args = {
+	disabled: false,
+	hideLabelFromVision: false,
+	isPressEnterToChange: false,
+	isShiftStepEnabled: true,
+	label: 'Number',
+	min: 0,
+	max: 100,
+	placeholder: '0',
+	required: false,
+	shiftStep: 10,
+	size: 'default',
+	step: '1',
 };

package/src/range-control/index.js

@@ -3,7 +3,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { clamp } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -20,6 +19,7 @@ import Button from '../button';
 import Icon from '../icon';
 import { COLORS } from '../utils';
 import { floatClamp, useControlledRangeValue } from './utils';
+import { clamp } from '../utils/math';
 import InputRange from './input-range';
 import RangeRail from './rail';
 import SimpleTooltip from './tooltip';

package/src/range-control/utils.js

@@ -1,8 +1,4 @@
 // @ts-nocheck
-/**
- * External dependencies
- */
-import { clamp } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -13,6 +9,7 @@ import { useCallback, useRef, useEffect, useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { useControlledState } from '../utils/hooks';
+import { clamp } from '../utils/math';
 
 const noop = () => {};
 

package/src/slot-fill/test/slot.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { isEmpty } from 'lodash';
 import { render, fireEvent } from '@testing-library/react';
 
 /**
@@ -120,9 +119,9 @@ describe( 'Slot', () => {
 				<div>
 					<Slot name="chicken">
 						{ ( fills ) =>
-							! isEmpty( fills ) && (
+							[ ...fills ].length ? (
 								<blockquote>{ fills }</blockquote>
-							)
+							) : null
 						}
 					</Slot>
 				</div>

package/src/spacer/component.tsx

@@ -11,7 +11,7 @@ import { View } from '../view';
 import { useSpacer } from './hook';
 import type { Props } from './types';
 
-function Spacer(
+function UnconnectedSpacer(
 	props: WordPressComponentProps< Props, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -25,7 +25,6 @@ function Spacer(
  *
  * `Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props work as a multiplier to the library's grid system (base of `4px`).
  *
- * @example
  * ```jsx
  * import { Spacer } from `@wordpress/components`
  *
@@ -43,6 +42,6 @@ function Spacer(
  * }
  * ```
  */
-const ConnectedSpacer = contextConnect( Spacer, 'Spacer' );
+export const Spacer = contextConnect( UnconnectedSpacer, 'Spacer' );
 
-export default ConnectedSpacer;
+export default Spacer;

package/src/spacer/stories/index.tsx

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Spacer } from '..';
+
+const controls = [
+	'margin',
+	'marginY',
+	'marginX',
+	'marginTop',
+	'marginBottom',
+	'marginLeft',
+	'marginRight',
+
+	'padding',
+	'paddingY',
+	'paddingX',
+	'paddingTop',
+	'paddingBottom',
+	'paddingLeft',
+	'paddingRight',
+].reduce(
+	( acc, prop ) => ( { ...acc, [ prop ]: { control: { type: 'text' } } } ),
+	{}
+);
+
+const meta: ComponentMeta< typeof Spacer > = {
+	component: Spacer,
+	title: 'Components (Experimental)/Spacer',
+	argTypes: {
+		as: { control: { type: 'text' } },
+		children: {
+			control: { type: 'text' },
+		},
+		...controls,
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const BlackBox = () => (
+	<div
+		style={ { backgroundColor: 'black', width: '100px', height: '100px' } }
+	/>
+);
+
+const Template: ComponentStory< typeof Spacer > = ( { onChange, ...args } ) => {
+	return (
+		<>
+			<BlackBox />
+			<Spacer { ...args } />
+			<BlackBox />
+		</>
+	);
+};
+
+export const Default: ComponentStory< typeof Spacer > = Template.bind( {} );
+Default.args = {
+	children: 'This is the spacer',
+};

package/src/spinner/{index.js → index.tsx}

@@ -2,24 +2,23 @@
  * External dependencies
  */
 import classNames from 'classnames';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
  */
 import { StyledSpinner, SpinnerTrack, SpinnerIndicator } from './styles';
+import type { WordPressComponentProps } from '../ui/context';
 
 /**
- * @typedef OwnProps
- *
- * @property {string} [className] Class name
+ * WordPress dependencies
  */
-/** @typedef {import('react').ComponentPropsWithoutRef<'svg'> & OwnProps} Props */
+import { forwardRef } from '@wordpress/element';
 
-/**
- * @param {Props} props
- * @return {JSX.Element} Element
- */
-export default function Spinner( { className, ...props } ) {
+export function UnforwardedSpinner(
+	{ className, ...props }: WordPressComponentProps< {}, 'svg', false >,
+	forwardedRef: ForwardedRef< any >
+) {
 	return (
 		<StyledSpinner
 			className={ classNames( 'components-spinner', className ) }
@@ -28,6 +27,7 @@ export default function Spinner( { className, ...props } ) {
 			role="presentation"
 			focusable="false"
 			{ ...props }
+			ref={ forwardedRef }
 		>
 			{ /* Gray circular background */ }
 			<SpinnerTrack
@@ -45,3 +45,17 @@ export default function Spinner( { className, ...props } ) {
 		</StyledSpinner>
 	);
 }
+/**
+ * `Spinner` is a component used to notify users that their action is being processed.
+ *
+ * @example
+ * ```js
+ *   import { Spinner } from '@wordpress/components';
+ *
+ *   function Example() {
+ *     return <Spinner />;
+ *   }
+ * ```
+ */
+export const Spinner = forwardRef( UnforwardedSpinner );
+export default Spinner;

package/src/spinner/stories/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Spinner from '../';
+import { space } from '../../ui/utils/space';
+
+const meta: ComponentMeta< typeof Spinner > = {
+	title: 'Components/Spinner',
+	component: Spinner,
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof Spinner > = ( args ) => {
+	return <Spinner { ...args } />;
+};
+
+export const Default: ComponentStory< typeof Spinner > = Template.bind( {} );
+
+// The Spinner can be resized to any size, but the stroke width will remain unchanged.
+export const CustomSize: ComponentStory< typeof Spinner > = Template.bind( {} );
+CustomSize.args = { style: { width: space( 20 ), height: space( 20 ) } };

package/src/style.scss

@@ -17,6 +17,7 @@
 @import "./drop-zone/style.scss";
 @import "./dropdown/style.scss";
 @import "./dropdown-menu/style.scss";
+@import "./duotone-picker/style.scss";
 @import "./font-size-picker/style.scss";
 @import "./form-toggle/style.scss";
 @import "./form-token-field/style.scss";

package/src/text/types.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import type { Props as TruncateProps } from '../truncate/types';
+import type { TruncateProps } from '../truncate/types';
 
 /**
  * External dependencies

package/src/truncate/README.md

@@ -24,15 +24,14 @@ function Example() {
 
 ## Props
 
-##### ellipsis
+##### `ellipsis`: `string`
 
-**Type**: `string`
+The ellipsis string when truncating the text by the `limit` prop's value.
 
-The ellipsis string when `truncate` is set.
+-   Required: No
+-   Default: `…`
 
-##### ellipsizeMode
-
-**Type**: `"auto"`,`"head"`,`"tail"`,`"middle"`
+##### `ellipsizeMode`: `'auto' | 'head' | 'tail' | 'middle' | 'none'`
 
 Determines where to truncate. For example, we can truncate text right in the middle. To do this, we need to set `ellipsizeMode` to `middle` and a text `limit`.
 
@@ -41,17 +40,22 @@ Determines where to truncate. For example, we can truncate text right in the mid
 -   `middle`: Trims content in the middle. Requires a `limit`.
 -   `tail`: Trims content at the end. Requires a `limit`.
 
-##### limit
+-   Required: No
+-   Default: `auto`
+
+##### `limit`: `number`
 
-**Type**: `number`
+Determines the max number of characters to be displayed before the rest of the text gets truncated. Requires `ellipsizeMode` to assume values different from `auto` and `none`.
 
-Determines the max characters when `truncate` is set.
+-   Required: No
+-   Default: `0`
 
-##### numberOfLines
+##### `numberOfLines`: `number`
 
-**Type**: `number`
+Clamps the text content to the specified `numberOfLines`, adding an ellipsis at the end. Note: this feature ignores the value of the `ellipsis` prop and always displays the default `…` ellipsis.
 
-Clamps the text content to the specifiec `numberOfLines`, adding the `ellipsis` at the end.
+-   Required: No
+-   Default: `0`
 
 ```jsx
 import { __experimentalTruncate as Truncate } from '@wordpress/components';

package/src/truncate/{component.js → component.tsx}

@@ -1,15 +1,20 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../ui/context';
+import { contextConnect, WordPressComponentProps } from '../ui/context';
 import { View } from '../view';
 import useTruncate from './hook';
+import type { TruncateProps } from './types';
 
-/**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props
- * @param {import('react').ForwardedRef<any>}                                                forwardedRef
- */
-function Truncate( props, forwardedRef ) {
+function UnconnectedTruncate(
+	props: WordPressComponentProps< TruncateProps, 'span' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const truncateProps = useTruncate( props );
 
 	return <View as="span" { ...truncateProps } ref={ forwardedRef } />;
@@ -21,7 +26,6 @@ function Truncate( props, forwardedRef ) {
  * `Subheading` is used to render text content. However,`Truncate` is
  * available for custom implementations.
  *
- * @example
  * ```jsx
  * import { __experimentalTruncate as Truncate } from `@wordpress/components`;
  *
@@ -36,6 +40,6 @@ function Truncate( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedTruncate = contextConnect( Truncate, 'Truncate' );
+export const Truncate = contextConnect( UnconnectedTruncate, 'Truncate' );
 
-export default ConnectedTruncate;
+export default Truncate;