@wordpress/components 23.5.0 → 23.6.0

package/src/toolbar/toolbar-button/types.ts

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type ToolbarButtonProps = {
+	/**
+	 * Children to be rendered inside the button.
+	 */
+	children?: ReactNode;
+	/**
+	 * An optional class name for the button container.
+	 */
+	containerClassName?: string;
+	/**
+	 * Additional props to be passed alongside props.
+	 */
+	extraProps?: any;
+	/**
+	 * Indicates if the button is active.
+	 */
+	isActive?: boolean;
+	/**
+	 * Indicates if the button is disabled.
+	 */
+	isDisabled?: boolean;
+	/**
+	 * An optional subscript for the button.
+	 */
+	subscript?: string;
+	/**
+	 * An optional title/label for the button.
+	 */
+	title?: string;
+};
+
+export type ToolbarButtonContainerProps = {
+	/**
+	 * Children to be rendered inside the button container.
+	 */
+	children?: ReactNode;
+	/**
+	 * An optional class name for the button container.
+	 */
+	className?: string;
+};

package/src/toolbar/toolbar-context/index.ts

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import type { ToolbarStateReturn } from 'reakit/Toolbar';
+
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+const ToolbarContext = createContext< ToolbarStateReturn | undefined >(
+	undefined
+);
+
+export default ToolbarContext;

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-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/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/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"
 	]
 }