@wordpress/components 28.7.0 → 28.8.0

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

@@ -1,12 +1,11 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn, StoryContext } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 /**
  * WordPress dependencies
  */
-import { isRTL } from '@wordpress/i18n';
 import { useContext, useMemo } from '@wordpress/element';
 
 /**
@@ -14,15 +13,11 @@ import { useContext, useMemo } from '@wordpress/element';
  */
 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 > = {
-	title: 'Components/Composite (V2)',
-	component: UseCompositeStorePlaceholder,
+const meta: Meta< typeof Composite > = {
+	title: 'Components/Composite',
+	component: Composite,
 	subcomponents: {
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		Composite,
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		'Composite.Group': Composite.Group,
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
@@ -35,8 +30,12 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 		'Composite.Hover': Composite.Hover,
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		'Composite.Typeahead': Composite.Typeahead,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Composite.Context': Composite.Context,
 	},
 	argTypes: {
+		children: { control: { type: null } },
+		render: { control: { type: null } },
 		setActiveId: { control: { type: null } },
 		focusLoop: {
 			control: 'select',
@@ -47,12 +46,10 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 			options: [ true, false, 'horizontal', 'vertical', 'both' ],
 		},
 	},
-	tags: [ 'status-private' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: {
 			canvas: { sourceState: 'shown' },
-			source: { transform },
 		},
 	},
 	decorators: [
@@ -93,116 +90,111 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 };
 export default meta;
 
-export const Default: StoryFn< typeof UseCompositeStorePlaceholder > = (
-	storeProps
-) => {
-	const rtl = isRTL();
-	const store = useCompositeStore( { rtl, ...storeProps } );
-
-	return (
-		<Composite store={ store }>
-			<Composite.Item>Item one</Composite.Item>
-			<Composite.Item>Item two</Composite.Item>
-			<Composite.Item>Item three</Composite.Item>
-		</Composite>
-	);
+export const Default: StoryObj< typeof Composite > = {
+	args: {
+		children: (
+			<>
+				<Composite.Item>Item one</Composite.Item>
+				<Composite.Item>Item two</Composite.Item>
+				<Composite.Item>Item three</Composite.Item>
+			</>
+		),
+	},
 };
 
-export const Groups: StoryFn< typeof UseCompositeStorePlaceholder > = (
-	storeProps
-) => {
-	const rtl = isRTL();
-	const store = useCompositeStore( { rtl, ...storeProps } );
-
-	return (
-		<Composite store={ store }>
-			<Composite.Group>
-				<Composite.GroupLabel>Group one</Composite.GroupLabel>
-				<Composite.Item>Item 1.1</Composite.Item>
-				<Composite.Item>Item 1.2</Composite.Item>
-			</Composite.Group>
-			<Composite.Group>
-				<Composite.GroupLabel>Group two</Composite.GroupLabel>
-				<Composite.Item>Item 2.1</Composite.Item>
-				<Composite.Item>Item 2.1</Composite.Item>
-			</Composite.Group>
-		</Composite>
-	);
+export const Groups: StoryObj< typeof Composite > = {
+	...Default,
+	args: {
+		...Default.args,
+		children: (
+			<>
+				<Composite.Group>
+					<Composite.GroupLabel>Group one</Composite.GroupLabel>
+					<Composite.Item>Item 1.1</Composite.Item>
+					<Composite.Item>Item 1.2</Composite.Item>
+				</Composite.Group>
+				<Composite.Group>
+					<Composite.GroupLabel>Group two</Composite.GroupLabel>
+					<Composite.Item>Item 2.1</Composite.Item>
+					<Composite.Item>Item 2.1</Composite.Item>
+				</Composite.Group>
+			</>
+		),
+	},
 };
 
-export const Grid: StoryFn< typeof UseCompositeStorePlaceholder > = (
-	storeProps
-) => {
-	const rtl = isRTL();
-	const store = useCompositeStore( { rtl, ...storeProps } );
-
-	return (
-		<Composite role="grid" store={ store } aria-label="Composite">
-			<Composite.Row role="row">
-				<Composite.Item role="gridcell">Item A1</Composite.Item>
-				<Composite.Item role="gridcell">Item A2</Composite.Item>
-				<Composite.Item role="gridcell">Item A3</Composite.Item>
-			</Composite.Row>
-			<Composite.Row role="row">
-				<Composite.Item role="gridcell">Item B1</Composite.Item>
-				<Composite.Item role="gridcell">Item B2</Composite.Item>
-				<Composite.Item role="gridcell">Item B3</Composite.Item>
-			</Composite.Row>
-			<Composite.Row role="row">
-				<Composite.Item role="gridcell">Item C1</Composite.Item>
-				<Composite.Item role="gridcell">Item C2</Composite.Item>
-				<Composite.Item role="gridcell">Item C3</Composite.Item>
-			</Composite.Row>
-		</Composite>
-	);
+export const Grid: StoryObj< typeof Composite > = {
+	...Default,
+	args: {
+		...Default.args,
+		role: 'grid',
+		'aria-label': 'Composite',
+		children: (
+			<>
+				<Composite.Row role="row">
+					<Composite.Item role="gridcell">Item A1</Composite.Item>
+					<Composite.Item role="gridcell">Item A2</Composite.Item>
+					<Composite.Item role="gridcell">Item A3</Composite.Item>
+				</Composite.Row>
+				<Composite.Row role="row">
+					<Composite.Item role="gridcell">Item B1</Composite.Item>
+					<Composite.Item role="gridcell">Item B2</Composite.Item>
+					<Composite.Item role="gridcell">Item B3</Composite.Item>
+				</Composite.Row>
+				<Composite.Row role="row">
+					<Composite.Item role="gridcell">Item C1</Composite.Item>
+					<Composite.Item role="gridcell">Item C2</Composite.Item>
+					<Composite.Item role="gridcell">Item C3</Composite.Item>
+				</Composite.Row>
+			</>
+		),
+	},
 };
 
-export const Hover: StoryFn< typeof UseCompositeStorePlaceholder > = (
-	storeProps
-) => {
-	const rtl = isRTL();
-	const store = useCompositeStore( { rtl, ...storeProps } );
-
-	return (
-		<Composite store={ store }>
-			<Composite.Hover render={ <Composite.Item /> }>
-				Hover item one
-			</Composite.Hover>
-			<Composite.Hover render={ <Composite.Item /> }>
-				Hover item two
-			</Composite.Hover>
-			<Composite.Hover render={ <Composite.Item /> }>
-				Hover item three
-			</Composite.Hover>
-		</Composite>
-	);
-};
-Hover.parameters = {
-	docs: {
-		description: {
-			story: 'Elements in the composite widget will receive focus on mouse move and lose focus to the composite base element on mouse leave.',
+export const Hover: StoryObj< typeof Composite > = {
+	...Default,
+	args: {
+		...Default.args,
+		children: (
+			<>
+				<Composite.Hover render={ <Composite.Item /> }>
+					Hover item one
+				</Composite.Hover>
+				<Composite.Hover render={ <Composite.Item /> }>
+					Hover item two
+				</Composite.Hover>
+				<Composite.Hover render={ <Composite.Item /> }>
+					Hover item three
+				</Composite.Hover>
+			</>
+		),
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: 'Elements in the composite widget will receive focus on mouse move and lose focus to the composite base element on mouse leave.',
+			},
 		},
 	},
 };
 
-export const Typeahead: StoryFn< typeof UseCompositeStorePlaceholder > = (
-	storeProps
-) => {
-	const rtl = isRTL();
-	const store = useCompositeStore( { rtl, ...storeProps } );
-
-	return (
-		<Composite store={ store } render={ <Composite.Typeahead /> }>
-			<Composite.Item>Apple</Composite.Item>
-			<Composite.Item>Banana</Composite.Item>
-			<Composite.Item>Peach</Composite.Item>
-		</Composite>
-	);
-};
-Typeahead.parameters = {
-	docs: {
-		description: {
-			story: 'When focus in on the composite widget, hitting printable character keys will move focus to the next composite item that begins with the input characters.',
+export const Typeahead: StoryObj< typeof Composite > = {
+	args: {
+		...Default.args,
+		render: <Composite.Typeahead />,
+		children: (
+			<>
+				<Composite.Item>Apple</Composite.Item>
+				<Composite.Item>Banana</Composite.Item>
+				<Composite.Item>Peach</Composite.Item>
+			</>
+		),
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: 'When focus in on the composite widget, hitting printable character keys will move focus to the next composite item that begins with the input characters.',
+			},
 		},
 	},
 };
@@ -257,82 +249,106 @@ const Fill = ( { children }: { children: React.ReactNode } ) => {
 	);
 };
 
-export const WithSlotFill: StoryFn< typeof UseCompositeStorePlaceholder > = (
-	props
-) => {
-	return (
-		<SlotFillProvider>
-			<Composite { ...props }>
+export const WithSlotFill: StoryObj< typeof Composite > = {
+	...Default,
+	args: {
+		...Default.args,
+		children: (
+			<>
 				<Composite.Item>Item one (direct child)</Composite.Item>
 				<Slot />
 				<Composite.Item>Item four (direct child)</Composite.Item>
-			</Composite>
+			</>
+		),
+	},
+	decorators: [
+		( Story ) => {
+			return (
+				<SlotFillProvider>
+					<Story />
 
-			<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.',
+					<Fill>
+						<Composite.Item>
+							Item two (from slot fill)
+						</Composite.Item>
+						<Composite.Item>
+							Item three (from slot fill)
+						</Composite.Item>
+					</Fill>
+				</SlotFillProvider>
+			);
 		},
-		source: {
-			transform: ( code: string, storyContext: StoryContext ) => {
-				return `const ExampleSlotFill = createSlotFill( 'Example' );
+	],
+	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 ) => {
+					return `const ExampleSlotFill = createSlotFill( 'Example' );
 
 const Slot = () => {
-	const compositeContext = useContext( Composite.Context );
+  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 ]
-	);
+  // 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' } }
-		/>
-	);
+  return (
+    <ExampleSlotFill.Slot
+      fillProps={ fillProps }
+      bubblesVirtually
+      style={ { display: 'contents' } }
+    />
+  );
 };
 
 const Fill = ( { children } ) => {
-	const innerMarkup = <>{ children }</>;
+  const innerMarkup = <>{ children }</>;
 
-	return (
-		<ExampleSlotFill.Fill>
-			{ ( fillProps ) => {
-				const { forwardedContext = [] } = fillProps;
+  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>
-	);
+        // 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 ) }`;
+<SlotFillProvider>
+  ${
+		// Add one level of indentation to match the surrounding code.
+		code.replaceAll( '\n', '\n  ' )
+  }
+
+  <Fill>
+    <Composite.Item>
+      Item two (from slot fill)
+    </Composite.Item>
+    <Composite.Item>
+      Item three (from slot fill)
+    </Composite.Item>
+  </Fill>
+</SlotFillProvider>`;
+				},
 			},
 		},
 	},

package/src/composite/typeahead.tsx

@@ -22,7 +22,7 @@ export const CompositeTypeahead = forwardRef<
 	const context = useCompositeContext();
 	return (
 		<Ariakit.CompositeTypeahead
-			store={ context?.store }
+			store={ context.store as Ariakit.CompositeStore }
 			{ ...props }
 			ref={ ref }
 		/>

package/src/composite/types.ts

@@ -3,16 +3,18 @@
  */
 import type * as Ariakit from '@ariakit/react';
 
-export type CompositeContextProps =
-	| {
-			/**
-			 * Object returned by the `useCompositeStore` hook.
-			 */
-			store: Ariakit.CompositeStore;
-	  }
-	| undefined;
+export type CompositeContextProps = {
+	/**
+	 * The component store, used for advanced usage of the component.
+	 *
+	 * _Note: Using the store directly is not recommended. Instead, use the props
+	 * exposed by the `Composite` component._
+	 *
+	 */
+	store?: unknown;
+};
 
-export type CompositeStoreProps = {
+type CompositeStoreProps = {
 	/**
 	 * The current active item `id`. The active item is the element within the
 	 * composite widget that has either DOM or virtual focus (in case
@@ -117,22 +119,18 @@ export type CompositeStoreProps = {
 	 */
 	orientation?: Ariakit.CompositeStoreProps[ 'orientation' ];
 	/**
-	 * Determines how the `store`'s `next` and `previous` functions will behave.
+	 * Controls how the previous and next items are determined.
 	 * 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.
 	 *
-	 * @default false
+	 * @default `isRtl()`
 	 */
 	rtl?: Ariakit.CompositeStoreProps[ 'rtl' ];
 };
 
 export type CompositeProps = CompositeStoreProps & {
-	/**
-	 * Object returned by the `useCompositeStore` hook.
-	 */
-	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-select-control-v2/styles.ts

@@ -120,6 +120,7 @@ export const SelectPopover = styled( Ariakit.SelectPopover )`
 	background-color: ${ COLORS.theme.background };
 	border-radius: ${ CONFIG.radiusSmall };
 	border: 1px solid ${ COLORS.theme.foreground };
+	box-shadow: ${ CONFIG.elevationMedium };
 
 	/* z-index(".components-popover") */
 	z-index: 1000000;

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { useLilius } from 'use-lilius';
 import {
 	format,
 	isSameDay,
@@ -29,6 +28,7 @@ import { useState, useRef, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { useLilius } from './use-lilius';
 import type { DatePickerProps } from '../types';
 import {
 	Wrapper,

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

@@ -7,13 +7,13 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import Button from '../../button';
-import { COLORS, CONFIG } from '../../utils';
+import { boxSizingReset, COLORS, CONFIG } from '../../utils';
 import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';
 import { space } from '../../utils/space';
 
 export const Wrapper = styled.div`
-	box-sizing: border-box;
+	${ boxSizingReset }
 `;
 
 export const Navigator = styled( HStack )`
@@ -38,7 +38,7 @@ export const Calendar = styled.div`
 `;
 
 export const DayOfWeek = styled.div`
-	color: ${ COLORS.gray[ 700 ] };
+	color: ${ COLORS.theme.gray[ 700 ] };
 	font-size: ${ CONFIG.fontSize };
 	line-height: ${ CONFIG.fontLineHeightBase };
 
@@ -90,15 +90,34 @@ export const DayButton = styled( Button, {
 		${ ( props ) =>
 			props.isSelected &&
 			`
-			background: ${ COLORS.theme.accent };
-			color: ${ COLORS.white };
+				background: ${ COLORS.theme.accent };
+
+				&,
+				&:hover:not(:disabled, [aria-disabled=true]) {
+					color: ${ COLORS.theme.accentInverted };
+				}
+
+				&:focus:not(:disabled),
+				&:focus:not(:disabled) {
+					border: ${ CONFIG.borderWidthFocus } solid currentColor;
+				}
+
+				/* Highlight the selected day for high-contrast mode */
+				&::after {
+					content: '';
+					position: absolute;
+					pointer-events: none;
+					inset: 0;
+					border-radius: inherit;
+					border: 1px solid transparent;
+				}
 			` }
 
 		${ ( props ) =>
 			! props.isSelected &&
 			props.isToday &&
 			`
-			background: ${ COLORS.gray[ 200 ] };
+			background: ${ COLORS.theme.gray[ 200 ] };
 			` }
 	}
 
@@ -106,15 +125,16 @@ export const DayButton = styled( Button, {
 		props.hasEvents &&
 		`
 		::before {
-			background: ${ props.isSelected ? COLORS.white : COLORS.theme.accent };
+			border: 2px solid ${
+				props.isSelected
+					? COLORS.theme.accentInverted
+					: COLORS.theme.accent
+			};
 			border-radius: ${ CONFIG.radiusRound };
-			bottom: 2px;
 			content: " ";
-			height: 4px;
 			left: 50%;
-			margin-left: -2px;
 			position: absolute;
-			width: 4px;
+			transform: translate(-50%, 9px);
 		}
 		` }
 `;