@wordpress/components 28.6.0 → 28.7.0

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

@@ -1,17 +1,20 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryFn, StoryContext } from '@storybook/react';
 
 /**
  * WordPress dependencies
  */
 import { isRTL } from '@wordpress/i18n';
+import { useContext, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { Composite, useCompositeStore } from '..';
+import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
+import { Composite } from '..';
+import { useCompositeStore } from '../store';
 import { UseCompositeStorePlaceholder, transform } from './utils';
 
 const meta: Meta< typeof UseCompositeStorePlaceholder > = {
@@ -34,20 +37,14 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 		'Composite.Typeahead': Composite.Typeahead,
 	},
 	argTypes: {
-		activeId: { control: 'text' },
-		defaultActiveId: { control: 'text' },
 		setActiveId: { control: { type: null } },
 		focusLoop: {
 			control: 'select',
 			options: [ true, false, 'horizontal', 'vertical', 'both' ],
 		},
-		focusShift: { control: 'boolean' },
-		focusWrap: { control: 'boolean' },
-		virtualFocus: { control: 'boolean' },
-		rtl: { control: 'boolean' },
-		orientation: {
+		focusWrap: {
 			control: 'select',
-			options: [ 'horizontal', 'vertical', 'both' ],
+			options: [ true, false, 'horizontal', 'vertical', 'both' ],
 		},
 	},
 	tags: [ 'status-private' ],
@@ -56,261 +53,6 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 		docs: {
 			canvas: { sourceState: 'shown' },
 			source: { transform },
-			extractArgTypes: ( component: React.FunctionComponent ) => {
-				const commonArgTypes = {
-					render: {
-						name: 'render',
-						description:
-							'Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.',
-						table: {
-							type: {
-								summary:
-									'RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>',
-							},
-						},
-					},
-					children: {
-						name: 'children',
-						description: 'The contents of the component.',
-						table: { type: { summary: 'React.ReactNode' } },
-					},
-				};
-				const accessibleWhenDisabled = {
-					name: 'accessibleWhenDisabled',
-					description: `Indicates whether the element should be focusable even when it is
-\`disabled\`.
-
-This is important when discoverability is a concern. For example:
-
-> A toolbar in an editor contains a set of special smart paste functions
-> that are disabled when the clipboard is empty or when the function is not
-> applicable to the current content of the clipboard. It could be helpful to
-> keep the disabled buttons focusable if the ability to discover their
-> functionality is primarily via their presence on the toolbar.
-
-Learn more on [Focusability of disabled
-controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).`,
-					table: {
-						type: {
-							summary: 'boolean',
-						},
-					},
-				};
-
-				const argTypes = {
-					useCompositeStore: {
-						activeId: {
-							name: 'activeId',
-							description: `The current active item \`id\`. The active item is the element within the composite widget that has either DOM or virtual focus (in case the \`virtualFocus\` prop is enabled).
-- \`null\` represents the base composite element (the one with a [composite role](https://w3c.github.io/aria/#composite)). Users will be able to navigate out of it using arrow keys.
-- If \`activeId\` is initially set to \`null\`, the base composite element itself will have focus and users will be able to navigate to it using arrow keys.`,
-							table: { type: { summary: 'string | null' } },
-						},
-						defaultActiveId: {
-							name: 'defaultActiveId',
-							description:
-								'The composite item id that should be active by default when the composite widget is rendered. If `null`, the composite element itself will have focus and users will be able to navigate to it using arrow keys. If `undefined`, the first enabled item will be focused.',
-							table: { type: { summary: 'string | null' } },
-						},
-						setActiveId: {
-							name: 'setActiveId',
-							description:
-								'A callback that gets called when the `activeId` state changes.',
-							table: {
-								type: {
-									summary:
-										'((activeId: string | null | undefined) => void)',
-								},
-							},
-						},
-						focusLoop: {
-							name: 'focusLoop',
-							description: `On one-dimensional composite widgets:
-
-- \`true\` loops from the last item to the first item and vice-versa.
-- \`horizontal\` loops only if \`orientation\` is \`horizontal\` or not set.
-- \`vertical\` loops only if \`orientation\` is \`vertical\` or not set.
-- If \`activeId\` is initially set to \`null\`, the composite element will be focused in between the last and first items.
-
-On two-dimensional composite widgets (ie. when using \`CompositeRow\`):
-
-- \`true\` loops from the last row/column item to the first item in the same row/column and vice-versa. If it's the last item in the last row, it moves to the first item in the first row and vice-versa.
-- \`horizontal\` loops only from the last row item to the first item in the same row.
-- \`vertical\` loops only from the last column item to the first item in the column row.
-- If \`activeId\` is initially set to \`null\`, vertical loop will have no effect as moving down from the last row or up from the first row will focus on the composite element.
-- If \`focusWrap\` matches the value of \`focusLoop\`, it'll wrap between the last item in the last row or column and the first item in the first row or column and vice-versa.`,
-							table: {
-								defaultValue: {
-									summary: 'false',
-								},
-								type: {
-									summary:
-										"boolean | 'horizontal' | 'vertical' | 'both'",
-								},
-							},
-						},
-						focusShift: {
-							name: 'focusShift',
-							description: `**Works only on two-dimensional composite widgets**.
-
-If enabled, moving up or down when there's no next item or when the next item is disabled will shift to the item right before it.`,
-							table: {
-								defaultValue: {
-									summary: 'false',
-								},
-								type: {
-									summary: 'boolean',
-								},
-							},
-						},
-						focusWrap: {
-							name: 'focusWrap',
-							description: `**Works only on two-dimensional composite widgets**.
-
-If enabled, moving to the next item from the last one in a row or column
-will focus on the first item in the next row or column and vice-versa.
-
-- \`true\` wraps between rows and columns.
-- \`horizontal\` wraps only between rows.
-- \`vertical\` wraps only between columns.
-- If \`focusLoop\` matches the value of \`focusWrap\`, it'll wrap between the
-    last item in the last row or column and the first item in the first row or
-    column and vice-versa.`,
-							table: {
-								defaultValue: {
-									summary: 'false',
-								},
-								type: {
-									summary: 'boolean',
-								},
-							},
-						},
-						virtualFocus: {
-							name: 'virtualFocus',
-							description: `If enabled, the composite element will act as an [\`aria-activedescendant\`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant)
-container instead of [roving tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex). DOM focus will remain on the composite element while its items receive
-virtual focus.
-
-In both scenarios, the item in focus will carry the \`data-active-item\` attribute.`,
-							table: {
-								defaultValue: {
-									summary: 'false',
-								},
-								type: {
-									summary: 'boolean',
-								},
-							},
-						},
-						orientation: {
-							name: 'orientation',
-							description: `Defines the orientation of the composite widget. If the composite has a single row or column (one-dimensional), the \`orientation\` value determines which arrow keys can be used to move focus:
-
-- \`both\`: all arrow keys work.
-- \`horizontal\`: only left and right arrow keys work.
-- \`vertical\`: only up and down arrow keys work.
-
-It doesn't have any effect on two-dimensional composites.`,
-							table: {
-								defaultValue: {
-									summary: "'both'",
-								},
-								type: {
-									summary:
-										"'horizontal' | 'vertical' | 'both'",
-								},
-							},
-						},
-						rtl: {
-							name: 'rtl',
-							description: `Determines how the \`store\`'s \`next\` and \`previous\` functions will behave. If \`rtl\` is set to \`true\`, they will be inverted.
-
-This only affects the composite widget behavior. You still need to set \`dir="rtl"\` on HTML/CSS.`,
-							table: {
-								defaultValue: {
-									summary: 'false',
-								},
-								type: {
-									summary: 'boolean',
-								},
-							},
-						},
-					},
-					Composite: {
-						...commonArgTypes,
-						store: {
-							name: 'store',
-							description:
-								'Object returned by the `useCompositeStore` hook.',
-							table: {
-								type: {
-									summary:
-										'CompositeStore<CompositeStoreItem>',
-								},
-							},
-							type: { required: true },
-						},
-						focusable: {
-							name: 'focusable',
-							description: `Makes the component a focusable element. When this element gains keyboard focus, it gets a \`data-focus-visible\` attribute and triggers the \`onFocusVisible\` prop.
-
-The component supports the \`disabled\` prop even for those elements not supporting the native \`disabled\` attribute. Disabled elements may be still accessible via keyboard by using the the \`accessibleWhenDisabled\` prop.
-
-Non-native focusable elements will lose their focusability entirely. However, native focusable elements will retain their inherent focusability.`,
-							table: {
-								type: {
-									summary: 'boolean',
-								},
-							},
-						},
-						disabled: {
-							name: 'disabled',
-							description: `Determines if the element is disabled. This sets the \`aria-disabled\` attribute accordingly, enabling support for all elements, including those that don't support the native \`disabled\` attribute.
-
-This feature can be combined with the \`accessibleWhenDisabled\` prop to
-make disabled elements still accessible via keyboard.
-
-**Note**: For this prop to work, the \`focusable\` prop must be set to
-\`true\`, if it's not set by default.`,
-							table: {
-								defaultValue: {
-									summary: 'false',
-								},
-								type: {
-									summary: 'boolean',
-								},
-							},
-						},
-						accessibleWhenDisabled,
-						onFocusVisible: {
-							name: 'onFocusVisible',
-							description: `Custom event handler invoked when the element gains focus through keyboard interaction or a key press occurs while the element is in focus. This is the programmatic equivalent of the \`data-focus-visible\` attribute.
-
-**Note**: For this prop to work, the \`focusable\` prop must be set to \`true\` if it's not set by default.`,
-							table: {
-								type: {
-									summary:
-										'(event: SyntheticEvent<HTMLElement>) => void',
-								},
-							},
-						},
-					},
-					'Composite.Group': commonArgTypes,
-					'Composite.GroupLabel': commonArgTypes,
-					'Composite.Row': commonArgTypes,
-					'Composite.Item': {
-						...commonArgTypes,
-						accessibleWhenDisabled,
-					},
-					'Composite.Hover': commonArgTypes,
-					'Composite.Typeahead': commonArgTypes,
-				};
-
-				const name = component.displayName ?? '';
-
-				return name in argTypes
-					? argTypes[ name as keyof typeof argTypes ]
-					: {};
-			},
 		},
 	},
 	decorators: [
@@ -464,3 +206,134 @@ Typeahead.parameters = {
 		},
 	},
 };
+
+const ExampleSlotFill = createSlotFill( 'Example' );
+
+const Slot = () => {
+	const compositeContext = useContext( Composite.Context );
+
+	// Forward the Slot's composite context to the Fill via fillProps, so that
+	// Composite components rendered inside the Fill can work as expected.
+	const fillProps = useMemo(
+		() => ( {
+			forwardedContext: [
+				[ Composite.Context.Provider, { value: compositeContext } ],
+			],
+		} ),
+		[ compositeContext ]
+	);
+
+	return (
+		<ExampleSlotFill.Slot
+			fillProps={ fillProps }
+			bubblesVirtually
+			style={ { display: 'contents' } }
+		/>
+	);
+};
+
+type ForwardedContextTuple< P = {} > = [
+	React.ComponentType< React.PropsWithChildren< P > >,
+	P,
+];
+
+const Fill = ( { children }: { children: React.ReactNode } ) => {
+	const innerMarkup = <>{ children }</>;
+
+	return (
+		<ExampleSlotFill.Fill>
+			{ ( fillProps: { forwardedContext?: ForwardedContextTuple[] } ) => {
+				const { forwardedContext = [] } = fillProps;
+
+				// Render all context providers forwarded by the Slot via fillProps.
+				return forwardedContext.reduce(
+					( inner: JSX.Element, [ Provider, props ] ) => (
+						<Provider { ...props }>{ inner }</Provider>
+					),
+					innerMarkup
+				);
+			} }
+		</ExampleSlotFill.Fill>
+	);
+};
+
+export const WithSlotFill: StoryFn< typeof UseCompositeStorePlaceholder > = (
+	props
+) => {
+	return (
+		<SlotFillProvider>
+			<Composite { ...props }>
+				<Composite.Item>Item one (direct child)</Composite.Item>
+				<Slot />
+				<Composite.Item>Item four (direct child)</Composite.Item>
+			</Composite>
+
+			<Fill>
+				<Composite.Item>Item two (from slot fill)</Composite.Item>
+				<Composite.Item>Item three (from slot fill)</Composite.Item>
+			</Fill>
+		</SlotFillProvider>
+	);
+};
+WithSlotFill.args = {
+	...Default.args,
+};
+WithSlotFill.parameters = {
+	docs: {
+		description: {
+			story: 'When rendering Composite components across a SlotFill, the Composite.Context should be manually forwarded from the Slot to the Fill component.',
+		},
+		source: {
+			transform: ( code: string, storyContext: StoryContext ) => {
+				return `const ExampleSlotFill = createSlotFill( 'Example' );
+
+const Slot = () => {
+	const compositeContext = useContext( Composite.Context );
+
+	// Forward the Slot's composite context to the Fill via fillProps, so that
+	// Composite components rendered inside the Fill can work as expected.
+	const fillProps = useMemo(
+		() => ( {
+			forwardedContext: [
+				[ Composite.Context.Provider, { value: compositeContext } ],
+			],
+		} ),
+		[ compositeContext ]
+	);
+
+	return (
+		<ExampleSlotFill.Slot
+			fillProps={ fillProps }
+			bubblesVirtually
+			style={ { display: 'contents' } }
+		/>
+	);
+};
+
+const Fill = ( { children } ) => {
+	const innerMarkup = <>{ children }</>;
+
+	return (
+		<ExampleSlotFill.Fill>
+			{ ( fillProps ) => {
+				const { forwardedContext = [] } = fillProps;
+
+				// Render all context providers forwarded by the Slot via fillProps.
+				return forwardedContext.reduce(
+					( inner, [ Provider, props ] ) => (
+						<Provider { ...props }>{ inner }</Provider>
+					),
+					innerMarkup
+				);
+			} }
+		</ExampleSlotFill.Fill>
+	);
+};
+
+// In a separate component:
+
+${ transform( code, storyContext ) }`;
+			},
+		},
+	},
+};

package/src/composite/typeahead.tsx

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { useCompositeContext } from './context';
+import type { CompositeTypeaheadProps } from './types';
+
+export const CompositeTypeahead = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< CompositeTypeaheadProps, 'div', false >
+>( function CompositeTypeahead( props, ref ) {
+	const context = useCompositeContext();
+	return (
+		<Ariakit.CompositeTypeahead
+			store={ context?.store }
+			{ ...props }
+			ref={ ref }
+		/>
+	);
+} );

package/src/composite/types.ts

@@ -128,11 +128,11 @@ export type CompositeStoreProps = {
 	rtl?: Ariakit.CompositeStoreProps[ 'rtl' ];
 };
 
-export type CompositeProps = {
+export type CompositeProps = CompositeStoreProps & {
 	/**
 	 * Object returned by the `useCompositeStore` hook.
 	 */
-	store: Ariakit.CompositeStore;
+	store?: Ariakit.CompositeStore;
 	/**
 	 * Allows the component to be rendered as a different HTML element or React
 	 * component. The value can be a React element or a function that takes in the

package/src/custom-gradient-picker/gradient-bar/control-points.tsx

@@ -128,11 +128,11 @@ function ControlPoints( {
 	onStopControlPointChange,
 	__experimentalIsRenderedInSidebar,
 }: ControlPointsProps ) {
-	const controlPointMoveState = useRef< ControlPointMoveState >();
+	const controlPointMoveStateRef = useRef< ControlPointMoveState >();
 
 	const onMouseMove = ( event: MouseEvent ) => {
 		if (
-			controlPointMoveState.current === undefined ||
+			controlPointMoveStateRef.current === undefined ||
 			gradientPickerDomRef.current === null
 		) {
 			return;
@@ -144,14 +144,14 @@ function ControlPoints( {
 		);
 
 		const { initialPosition, index, significantMoveHappened } =
-			controlPointMoveState.current;
+			controlPointMoveStateRef.current;
 
 		if (
 			! significantMoveHappened &&
 			Math.abs( initialPosition - relativePosition ) >=
 				MINIMUM_SIGNIFICANT_MOVE
 		) {
-			controlPointMoveState.current.significantMoveHappened = true;
+			controlPointMoveStateRef.current.significantMoveHappened = true;
 		}
 
 		onChange(
@@ -163,13 +163,13 @@ function ControlPoints( {
 		if (
 			window &&
 			window.removeEventListener &&
-			controlPointMoveState.current &&
-			controlPointMoveState.current.listenersActivated
+			controlPointMoveStateRef.current &&
+			controlPointMoveStateRef.current.listenersActivated
 		) {
 			window.removeEventListener( 'mousemove', onMouseMove );
 			window.removeEventListener( 'mouseup', cleanEventListeners );
 			onStopControlPointChange();
-			controlPointMoveState.current.listenersActivated = false;
+			controlPointMoveStateRef.current.listenersActivated = false;
 		}
 	};
 
@@ -202,8 +202,8 @@ function ControlPoints( {
 									key={ index }
 									onClick={ () => {
 										if (
-											controlPointMoveState.current &&
-											controlPointMoveState.current
+											controlPointMoveStateRef.current &&
+											controlPointMoveStateRef.current
 												.significantMoveHappened
 										) {
 											return;
@@ -220,7 +220,7 @@ function ControlPoints( {
 											window &&
 											window.addEventListener
 										) {
-											controlPointMoveState.current = {
+											controlPointMoveStateRef.current = {
 												initialPosition,
 												index,
 												significantMoveHappened: false,

package/src/custom-gradient-picker/style.scss

@@ -48,7 +48,7 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 		height: inherit;
 		width: inherit;
 		min-width: $grid-unit-20;
-		border-radius: 50%;
+		border-radius: $radius-round;
 
 		background: $white;
 		padding: 2px;
@@ -65,7 +65,7 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 		// Same size as the .components-custom-gradient-picker__control-point-dropdown parent
 		height: inherit;
 		width: inherit;
-		border-radius: 50%;
+		border-radius: $radius-round;
 		padding: 0;
 
 		// Shadow and stroke.
@@ -100,25 +100,6 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 	height: 20px;
 }
 
-.components-custom-gradient-picker .components-custom-gradient-picker__toolbar {
-	border: none;
-
-	// Work-around to target the inner button containers rendered by <ToolbarGroup />
-	> div + div {
-		margin-left: 1px;
-	}
-
-	button {
-		&.is-pressed {
-			> svg {
-				background: $white;
-				border: $border-width solid $gray-600;
-				border-radius: 2px;
-			}
-		}
-	}
-}
-
 .components-custom-gradient-picker__ui-line {
 	position: relative;
 	z-index: 0;

package/src/custom-select-control-v2/styles.ts

@@ -21,9 +21,9 @@ const ANIMATION_PARAMS = {
 };
 
 const INLINE_PADDING = {
-	compact: 8, // space(2)
-	small: 8, // space(2)
-	default: 16, // space(4)
+	compact: CONFIG.controlPaddingXSmall,
+	small: CONFIG.controlPaddingXSmall,
+	default: CONFIG.controlPaddingX,
 };
 
 const getSelectSize = (
@@ -118,7 +118,7 @@ export const SelectPopover = styled( Ariakit.SelectPopover )`
 	flex-direction: column;
 
 	background-color: ${ COLORS.theme.background };
-	border-radius: 2px;
+	border-radius: ${ CONFIG.radiusSmall };
 	border: 1px solid ${ COLORS.theme.foreground };
 
 	/* z-index(".components-popover") */

package/src/date-time/date/styles.ts

@@ -83,7 +83,7 @@ export const DayButton = styled( Button, {
 		` }
 
 	&&& {
-		border-radius: 100%;
+		border-radius: ${ CONFIG.radiusRound };
 		height: ${ space( 7 ) };
 		width: ${ space( 7 ) };
 
@@ -107,7 +107,7 @@ export const DayButton = styled( Button, {
 		`
 		::before {
 			background: ${ props.isSelected ? COLORS.white : COLORS.theme.accent };
-			border-radius: 2px;
+			border-radius: ${ CONFIG.radiusRound };
 			bottom: 2px;
 			content: " ";
 			height: 4px;

package/src/date-time/time/test/index.tsx

@@ -281,12 +281,9 @@ describe( 'TimePicker', () => {
 		expect(
 			( screen.getByLabelText( 'Minutes' ) as HTMLInputElement ).value
 		).toBe( '00' );
-		/**
-		 * This is not ideal, but best of we can do for now until we refactor
-		 * AM/PM into accessible elements, like radio buttons.
-		 */
-		expect( screen.getByText( 'AM' ) ).not.toHaveClass( 'is-primary' );
-		expect( screen.getByText( 'PM' ) ).toHaveClass( 'is-primary' );
+
+		expect( screen.getByRole( 'radio', { name: 'AM' } ) ).not.toBeChecked();
+		expect( screen.getByRole( 'radio', { name: 'PM' } ) ).toBeChecked();
 	} );
 
 	it( 'should have different layouts/orders for 12/24 hour formats', () => {