@wordpress/components 23.4.0 → 23.6.0

package/src/tooltip/index.js

@@ -1,5 +1,10 @@
 // @ts-nocheck
 
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -66,6 +71,8 @@ const addPopoverToGrandchildren = ( {
 	position,
 	shortcut,
 	text,
+	className,
+	...props
 } ) =>
 	concatChildren(
 		grandchildren,
@@ -73,12 +80,13 @@ const addPopoverToGrandchildren = ( {
 			<Popover
 				focusOnMount={ false }
 				position={ position }
-				className="components-tooltip"
+				className={ classNames( 'components-tooltip', className ) }
 				aria-hidden="true"
 				animate={ false }
 				offset={ offset }
 				anchor={ anchor }
 				shift
+				{ ...props }
 			>
 				{ text }
 				<Shortcut
@@ -113,6 +121,7 @@ function Tooltip( props ) {
 		text,
 		shortcut,
 		delay = TOOLTIP_DELAY,
+		...popoverProps
 	} = props;
 	/**
 	 * Whether a mouse is currently pressed, used in determining whether
@@ -270,6 +279,7 @@ function Tooltip( props ) {
 	const childrenWithPopover = addPopoverToGrandchildren( {
 		grandchildren,
 		...popoverData,
+		...popoverProps,
 	} );
 
 	return getElementWithPopover( {

package/src/tree-grid/test/__snapshots__/index.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<div role=\\"application\\"><table role=\\"treegrid\\"><tbody><tr role=\\"row\\" aria-level=\\"1\\" aria-posinset=\\"1\\" aria-setsize=\\"1\\"><td role=\\"gridcell\\">Test</td></tr></tbody></table></div>"`;
+exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<div role="application"><table role="treegrid"><tbody><tr role="row" aria-level="1" aria-posinset="1" aria-setsize="1"><td role="gridcell">Test</td></tr></tbody></table></div>"`;

package/src/tree-select/index.tsx

@@ -8,9 +8,12 @@ import { decodeEntities } from '@wordpress/html-entities';
  * Internal dependencies
  */
 import { SelectControl } from '../select-control';
-import type { TreeSelectProps, Tree, SelectOptions, Truthy } from './types';
+import type { TreeSelectProps, Tree, Truthy } from './types';
 
-function getSelectOptions( tree: Tree[], level = 0 ): SelectOptions {
+function getSelectOptions(
+	tree: Tree[],
+	level = 0
+): NonNullable< TreeSelectProps[ 'options' ] > {
 	return tree.flatMap( ( treeNode ) => [
 		{
 			value: treeNode.id,

package/src/tree-select/types.ts

@@ -1,29 +1,22 @@
-/**
- * External dependencies
- */
-import type { ComponentProps } from 'react';
-
 /**
  * Internal dependencies
  */
-import type SelectControl from '../select-control';
-import type { SelectControlProps } from '../select-control/types';
+import type { SelectControlSingleSelectionProps } from '../select-control/types';
 
 export type Truthy< T > = T extends false | '' | 0 | null | undefined
 	? never
 	: T;
 
-export type SelectOptions = Required<
-	ComponentProps< typeof SelectControl >
->[ 'options' ];
-
 export interface Tree {
 	id: string;
 	name: string;
 	children?: Tree[];
 }
 
-export interface TreeSelectProps extends Omit< SelectControlProps, 'value' > {
+// `TreeSelect` inherits props from `SelectControl`, but only
+// in single selection mode (ie. when the `multiple` prop is not defined).
+export interface TreeSelectProps
+	extends Omit< SelectControlSingleSelectionProps, 'value' | 'multiple' > {
 	/**
 	 * If this property is added, an option will be added with this label to represent empty selection.
 	 */
@@ -35,5 +28,5 @@ export interface TreeSelectProps extends Omit< SelectControlProps, 'value' > {
 	/**
 	 * The id of the currently selected node.
 	 */
-	selectedId?: ComponentProps< typeof SelectControl >[ 'value' ];
+	selectedId?: SelectControlSingleSelectionProps[ 'value' ];
 }

package/src/ui/context/context-system-provider.js

@@ -1,8 +1,9 @@
 /**
  * External dependencies
  */
+import deepmerge from 'deepmerge';
 import fastDeepEqual from 'fast-deep-equal/es6';
-import { merge } from 'lodash';
+import { isPlainObject } from 'is-plain-object';
 
 /**
  * WordPress dependencies
@@ -54,7 +55,7 @@ function useContextSystemBridge( { value } ) {
 	// `parentContext` will always be memoized (i.e., the result of this hook itself)
 	// or the default value from when the `ComponentsContext` was originally
 	// initialized (which will never change, it's a static variable)
-	// so this memoization will prevent `merge` and `JSON.parse/stringify` from rerunning unless
+	// so this memoization will prevent `deepmerge()` from rerunning unless
 	// the references to `value` change OR the `parentContext` has an actual material change
 	// (because again, it's guaranteed to be memoized or a static reference to the empty object
 	// so we know that the only changes for `parentContext` are material ones... i.e., why we
@@ -62,10 +63,12 @@ function useContextSystemBridge( { value } ) {
 	// need to bother with the `value`). The `useUpdateEffect` above will ensure that we are
 	// correctly warning when the `value` isn't being properly memoized. All of that to say
 	// that this should be super safe to assume that `useMemo` will only run on actual
-	// changes to the two dependencies, therefore saving us calls to `merge` and `JSON.parse/stringify`!
+	// changes to the two dependencies, therefore saving us calls to `deepmerge()`!
 	const config = useMemo( () => {
 		// Deep clone `parentContext` to avoid mutating it later.
-		return merge( JSON.parse( JSON.stringify( parentContext ) ), value );
+		return deepmerge( parentContext ?? {}, value ?? {}, {
+			isMergeableObject: isPlainObject,
+		} );
 	}, [ parentContext, value ] );
 
 	return config;

package/src/ui/context/get-styled-class-name-from-key.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { kebabCase } from 'lodash';
+import { paramCase as kebabCase } from 'change-case';
 import memoize from 'memize';
 
 /**

package/src/utils/font.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -14,5 +9,5 @@ import FONT from './font-values';
  * @return {string} Font rule value
  */
 export function font( value ) {
-	return get( FONT, value, '' );
+	return FONT[ value ] ?? '';
 }

package/src/v-stack/README.md

@@ -42,8 +42,8 @@ Determines how the child elements are aligned.
 -   `bottom`: Aligns content to the bottom.
 -   `bottomLeft`: Aligns content to the bottom/left.
 -   `bottomRight`: Aligns content to the bottom/right.
--   `edge`: Aligns content to the edges of the container.
--   `stretch`: Stretches content to the edges of the container.
+-   `edge`: Justifies content to be evenly spread out up to the main axis edges of the container.
+-   `stretch`: Stretches content to the cross axis edges of the container.
 
 ##### `direction`: `FlexDirection`
 

package/src/v-stack/hook.ts

@@ -8,14 +8,16 @@ import type { VStackProps } from './types';
 export function useVStack(
 	props: WordPressComponentProps< VStackProps, 'div' >
 ) {
-	const { expanded = false, ...otherProps } = useContextSystem(
-		props,
-		'VStack'
-	);
+	const {
+		expanded = false,
+		alignment = 'stretch',
+		...otherProps
+	} = useContextSystem( props, 'VStack' );
 
 	const hStackProps = useHStack( {
 		direction: 'column',
 		expanded,
+		alignment,
 		...otherProps,
 	} );
 

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

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../../view';
+import { VStack } from '../..';
+
+const meta: ComponentMeta< typeof VStack > = {
+	component: VStack,
+	title: 'Components (Experimental)/VStack',
+};
+export default meta;
+
+const Template: ComponentStory< typeof VStack > = ( props ) => {
+	return (
+		<VStack
+			{ ...props }
+			style={ { background: '#eee', minHeight: '3rem' } }
+		>
+			{ [ 'One', 'Two', 'Three', 'Four', 'Five' ].map( ( text ) => (
+				<View key={ text } style={ { background: '#b9f9ff' } }>
+					{ text }
+				</View>
+			) ) }
+		</VStack>
+	);
+};
+
+export const Default: ComponentStory< typeof VStack > = Template.bind( {} );
+Default.args = {
+	spacing: 3,
+};

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

@@ -9,11 +9,29 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { View } from '../../view';
 import { VStack } from '..';
 
+const ALIGNMENTS = {
+	top: 'top',
+	topLeft: 'topLeft',
+	topRight: 'topRight',
+	left: 'left',
+	center: 'center',
+	right: 'right',
+	bottom: 'bottom',
+	bottomLeft: 'bottomLeft',
+	bottomRight: 'bottomRight',
+	edge: 'edge',
+	stretch: 'stretch',
+};
+
 const meta: ComponentMeta< typeof VStack > = {
 	component: VStack,
 	title: 'Components (Experimental)/VStack',
 	argTypes: {
-		alignment: { control: { type: 'text' } },
+		alignment: {
+			control: { type: 'select' },
+			options: Object.keys( ALIGNMENTS ),
+			mapping: ALIGNMENTS,
+		},
 		as: { control: { type: 'text' } },
 		direction: { control: { type: 'text' } },
 		justify: { control: { type: 'text' } },
@@ -28,12 +46,15 @@ export default meta;
 
 const Template: ComponentStory< typeof VStack > = ( props ) => {
 	return (
-		<VStack { ...props }>
-			<View>One</View>
-			<View>Two</View>
-			<View>Three</View>
-			<View>Four</View>
-			<View>Five</View>
+		<VStack
+			{ ...props }
+			style={ { background: '#eee', minHeight: '200px' } }
+		>
+			{ [ 'One', 'Two', 'Three', 'Four', 'Five' ].map( ( text ) => (
+				<View key={ text } style={ { background: '#b9f9ff' } }>
+					{ text }
+				</View>
+			) ) }
 		</VStack>
 	);
 };

package/src/v-stack/test/__snapshots__/index.tsx.snap

@@ -6,10 +6,10 @@ exports[`props should render alignment 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -46,17 +46,18 @@ exports[`props should render correctly 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
 
 .emotion-0>* {
@@ -85,17 +86,18 @@ exports[`props should render spacing 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   gap: calc(4px * 5);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
 
 .emotion-0>* {

package/src/v-stack/types.ts

@@ -8,7 +8,7 @@ import type { CSSProperties } from 'react';
  */
 import type { HStackAlignment, Props as HStackProps } from '../h-stack/types';
 
-export type VStackProps = HStackProps & {
+export type VStackProps = Omit< HStackProps, 'alignment' | 'spacing' > & {
 	/**
 	 * Determines how the child elements are aligned.
 	 *
@@ -21,8 +21,10 @@ export type VStackProps = HStackProps & {
 	 * -   `bottom`: Aligns content to the bottom.
 	 * -   `bottomLeft`: Aligns content to the bottom/left.
 	 * -   `bottomRight`: Aligns content to the bottom/right.
-	 * -   `edge`: Aligns content to the edges of the container.
-	 * -   `stretch`: Stretches content to the edges of the container.
+	 * -   `edge`: Justifies content to be evenly spread out up to the main axis edges of the container.
+	 * -   `stretch`: Stretches content to the cross axis edges of the container.
+	 *
+	 * @default 'stretch'
 	 */
 	alignment?: HStackAlignment | CSSProperties[ 'alignItems' ];
 	/**

package/tsconfig.json

@@ -45,19 +45,6 @@
 		"src/**/stories/**/*.js", // only exclude js files, tsx files should be checked
 		"src/**/test/**/*.js", // only exclude js files, ts{x} files should be checked
 		"src/index.js",
-		"src/autocomplete",
-		"src/custom-gradient-picker",
-		"src/dimension-control",
-		"src/duotone-picker",
-		"src/gradient-picker",
-		"src/guide",
-		"src/higher-order/navigate-regions",
-		"src/higher-order/with-fallback-styles",
-		"src/higher-order/with-filters",
-		"src/higher-order/with-focus-return",
-		"src/higher-order/with-notices",
-		"src/navigation",
-		"src/palette-edit",
-		"src/panel/body.js"
+		"src/duotone-picker"
 	]
 }