@wordpress/components 29.0.1-next.a9f418477.0 → 29.1.0

package/src/tabs/types.ts

@@ -22,18 +22,16 @@ export type TabsProps = {
 	 * `Tabs.Tablist` component and as many instances of the `Tabs.TabPanel`
 	 * components as there are `Tabs.Tab` components.
 	 */
-	children: Ariakit.TabProps[ 'children' ];
+	children: Ariakit.TabProviderProps[ 'children' ];
 	/**
 	 * Determines if the tab should be selected when it receives focus. If set to
 	 * `false`, the tab will only be selected upon clicking, not when using arrow
-	 * keys to shift focus (manual tab activation). See the official W3C docs
+	 * keys to shift focus (manual tab activation). See the [official W3C docs](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/)
 	 * for more info.
 	 *
 	 * @default true
-	 *
-	 * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
 	 */
-	selectOnMove?: Ariakit.TabStoreProps[ 'selectOnMove' ];
+	selectOnMove?: Ariakit.TabProviderProps[ 'selectOnMove' ];
 	/**
 	 * The id of the tab whose panel is currently visible.
 	 *
@@ -44,7 +42,7 @@ export type TabsProps = {
 	 * in "controlled" mode. When in "controlled" mode, the `null` value will
 	 * result in no tabs being selected, and the tablist becoming tabbable.
 	 */
-	selectedTabId?: Ariakit.TabStoreProps[ 'selectedId' ];
+	selectedTabId?: Ariakit.TabProviderProps[ 'selectedId' ];
 	/**
 	 * The id of the tab whose panel is currently visible.
 	 *
@@ -55,21 +53,22 @@ export type TabsProps = {
 	 * Note: this prop will be overridden by the `selectedTabId` prop if it is
 	 * provided (meaning the component will be used in "controlled" mode).
 	 */
-	defaultTabId?: Ariakit.TabStoreProps[ 'defaultSelectedId' ];
+	defaultTabId?: Ariakit.TabProviderProps[ 'defaultSelectedId' ];
 	/**
 	 * The function called when the `selectedTabId` changes.
 	 */
-	onSelect?: Ariakit.TabStoreProps[ 'setSelectedId' ];
+	onSelect?: Ariakit.TabProviderProps[ 'setSelectedId' ];
 	/**
 	 * The current active tab `id`. The active tab is the tab element within the
 	 * tablist widget that has DOM focus.
+	 *
 	 * - `null` represents the tablist (ie. the base composite element). Users
 	 *   will be able to navigate out of it using arrow keys.
 	 * - If `activeTabId` 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.activeTabId
+	 *   arrow keys.
 	 */
-	activeTabId?: Ariakit.TabStoreProps[ 'activeId' ];
+	activeTabId?: Ariakit.TabProviderProps[ 'activeId' ];
 	/**
 	 * The tab id that should be active by default when the composite widget is
 	 * rendered. If `null`, the tablist element itself will have focus
@@ -79,21 +78,22 @@ export type TabsProps = {
 	 * Note: this prop will be overridden by the `activeTabId` prop if it is
 	 * provided.
 	 */
-	defaultActiveTabId?: Ariakit.TabStoreProps[ 'defaultActiveId' ];
+	defaultActiveTabId?: Ariakit.TabProviderProps[ 'defaultActiveId' ];
 	/**
 	 * A callback that gets called when the `activeTabId` state changes.
 	 */
-	onActiveTabIdChange?: Ariakit.TabStoreProps[ 'setActiveId' ];
+	onActiveTabIdChange?: Ariakit.TabProviderProps[ 'setActiveId' ];
 	/**
 	 * Defines the orientation of the tablist and 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.
 	 *
 	 * @default "horizontal"
 	 */
-	orientation?: Ariakit.TabStoreProps[ 'orientation' ];
+	orientation?: Ariakit.TabProviderProps[ 'orientation' ];
 };
 
 export type TabListProps = {
@@ -105,7 +105,6 @@ export type TabListProps = {
 };
 
 // TODO: consider prop name changes (tabId, selectedTabId)
-// switch to auto-generated README
 // compound technique
 
 export type TabProps = {

package/src/text/hook.ts

@@ -105,8 +105,8 @@ export default function useText(
 				getOptimalTextShade( optimizeReadabilityFor ) === 'dark';
 
 			sx.optimalTextColor = isOptimalTextColorDark
-				? css( { color: COLORS.gray[ 900 ] } )
-				: css( { color: COLORS.white } );
+				? css( { color: COLORS.theme.foreground } )
+				: css( { color: COLORS.theme.foregroundInverted } );
 		}
 
 		return cx(

package/src/text/styles.ts

@@ -9,7 +9,7 @@ import { css } from '@emotion/react';
 import { COLORS, CONFIG } from '../utils';
 
 export const Text = css`
-	color: ${ COLORS.gray[ 900 ] };
+	color: ${ COLORS.theme.foreground };
 	line-height: ${ CONFIG.fontLineHeightBase };
 	margin: 0;
 	text-wrap: balance; /* Fallback for Safari. */

package/src/text/test/__snapshots__/index.tsx.snap

@@ -6,7 +6,7 @@ Snapshot Diff:
 + Base styles
 
 @@ -3,8 +3,9 @@
-      "color": "#1e1e1e",
+      "color": "var(--wp-components-color-foreground, #1e1e1e)",
       "font-size": "calc((13 / 13) * 13px)",
       "font-weight": "normal",
       "line-height": "1.4",
@@ -19,7 +19,7 @@ Snapshot Diff:
 
 exports[`Text should render highlighted words with highlightCaseSensitive 1`] = `
 .emotion-0 {
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   line-height: 1.4;
   margin: 0;
   text-wrap: balance;
@@ -52,7 +52,7 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] =
 
 exports[`Text snapshot tests should render correctly 1`] = `
 .emotion-0 {
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   line-height: 1.4;
   margin: 0;
   text-wrap: balance;

package/src/text/test/index.tsx

@@ -25,7 +25,7 @@ describe( 'Text', () => {
 			</Text>
 		);
 		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
-			color: COLORS.white,
+			color: 'rgb( 255, 255, 255 )',
 		} );
 	} );
 

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -72,7 +72,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   content: '';
   position: absolute;
   pointer-events: none;
-  background: #1e1e1e;
+  background: var(--wp-components-color-foreground, #1e1e1e);
   outline: 2px solid transparent;
   outline-offset: -3px;
   --antialiasing-factor: 100;
@@ -134,7 +134,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -158,12 +158,12 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 32px;
   aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
-  color: #fff;
+  color: var(--wp-components-color-foreground-inverted, #fff);
 }
 
 @media not ( prefers-reduced-motion ) {
@@ -183,7 +183,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 .emotion-12:active {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
 }
 
 .emotion-12:active {
@@ -211,7 +211,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -235,7 +235,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 32px;
   aspect-ratio: 1;
   padding-left: 0;
@@ -259,7 +259,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 .emotion-17:active {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
 }
 
 <div>
@@ -357,7 +357,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
     </div>
   </div>
   <button
-    class="components-button"
+    class="components-button is-next-40px-default-size"
     type="button"
   >
     Reset
@@ -437,7 +437,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   content: '';
   position: absolute;
   pointer-events: none;
-  background: #1e1e1e;
+  background: var(--wp-components-color-foreground, #1e1e1e);
   outline: 2px solid transparent;
   outline-offset: -3px;
   --antialiasing-factor: 100;
@@ -499,7 +499,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -542,7 +542,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
 }
 
 .emotion-12:active {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
 }
 
 .emotion-13 {
@@ -626,7 +626,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
     </div>
   </div>
   <button
-    class="components-button"
+    class="components-button is-next-40px-default-size"
     type="button"
   >
     Reset
@@ -706,7 +706,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   content: '';
   position: absolute;
   pointer-events: none;
-  background: #1e1e1e;
+  background: var(--wp-components-color-foreground, #1e1e1e);
   outline: 2px solid transparent;
   outline-offset: -3px;
   --antialiasing-factor: 100;
@@ -768,7 +768,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -792,12 +792,12 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 32px;
   aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
-  color: #fff;
+  color: var(--wp-components-color-foreground-inverted, #fff);
 }
 
 @media not ( prefers-reduced-motion ) {
@@ -817,7 +817,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 .emotion-12:active {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
 }
 
 .emotion-12:active {
@@ -845,7 +845,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -869,7 +869,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 32px;
   aspect-ratio: 1;
   padding-left: 0;
@@ -893,7 +893,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 .emotion-17:active {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
 }
 
 <div>
@@ -1065,7 +1065,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   content: '';
   position: absolute;
   pointer-events: none;
-  background: #1e1e1e;
+  background: var(--wp-components-color-foreground, #1e1e1e);
   outline: 2px solid transparent;
   outline-offset: -3px;
   --antialiasing-factor: 100;
@@ -1127,7 +1127,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -1170,7 +1170,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
 }
 
 .emotion-12:active {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
 }
 
 .emotion-13 {

package/src/toggle-group-control/test/index.tsx

@@ -57,9 +57,15 @@ const ControlledToggleGroupControl = ( {
 				} }
 				value={ value }
 			/>
-			<Button onClick={ () => setValue( undefined ) }>Reset</Button>
+			<Button
+				onClick={ () => setValue( undefined ) }
+				__next40pxDefaultSize
+			>
+				Reset
+			</Button>
 			{ extraButtonOptions?.map( ( obj ) => (
 				<Button
+					__next40pxDefaultSize
 					key={ obj.value }
 					onClick={ () => setValue( obj.value ) }
 				>

package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx

@@ -3,7 +3,6 @@
  */
 import type { ForwardedRef } from 'react';
 import * as Ariakit from '@ariakit/react';
-import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
@@ -70,7 +69,7 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 		rtl: isRTL(),
 	} );
 
-	const selectedValue = useStoreState( radio, 'value' );
+	const selectedValue = Ariakit.useStoreState( radio, 'value' );
 	const setValue = radio.setValue;
 
 	// Ensures that the active id is also reset after the value is "reset" by the consumer.

package/src/toggle-group-control/toggle-group-control/styles.ts

@@ -39,7 +39,7 @@ export const toggleGroupControl = ( {
 		content: '';
 		position: absolute;
 		pointer-events: none;
-		background: ${ COLORS.gray[ 900 ] };
+		background: ${ COLORS.theme.foreground };
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;

package/src/toggle-group-control/toggle-group-control-option-base/styles.ts

@@ -38,7 +38,7 @@ export const buttonView = ( {
 	background: transparent;
 	border: none;
 	border-radius: ${ CONFIG.radiusXSmall };
-	color: ${ COLORS.gray[ 700 ] };
+	color: ${ COLORS.theme.gray[ 700 ] };
 	fill: currentColor;
 	cursor: pointer;
 	display: flex;
@@ -70,7 +70,7 @@ export const buttonView = ( {
 	}
 
 	&:active {
-		background: ${ CONFIG.controlBackgroundColor };
+		background: ${ COLORS.ui.background };
 	}
 
 	${ isDeselectable && deselectable }
@@ -79,7 +79,7 @@ export const buttonView = ( {
 `;
 
 const pressed = css`
-	color: ${ COLORS.white };
+	color: ${ COLORS.theme.foregroundInverted };
 
 	&:active {
 		background: transparent;
@@ -87,11 +87,11 @@ const pressed = css`
 `;
 
 const deselectable = css`
-	color: ${ COLORS.gray[ 900 ] };
+	color: ${ COLORS.theme.foreground };
 
 	&:focus {
 		box-shadow:
-			inset 0 0 0 1px ${ COLORS.white },
+			inset 0 0 0 1px ${ COLORS.ui.background },
 			0 0 0 ${ CONFIG.borderWidthFocus } ${ COLORS.theme.accent };
 		outline: 2px solid transparent;
 	}
@@ -112,7 +112,7 @@ const isIconStyles = ( {
 	};
 
 	return css`
-		color: ${ COLORS.gray[ 900 ] };
+		color: ${ COLORS.theme.foreground };
 		height: ${ iconButtonSizes[ size ] };
 		aspect-ratio: 1;
 		padding-left: 0;

package/src/tooltip/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
-import { useStoreState } from '@ariakit/react';
 import clsx from 'clsx';
 
 /**
@@ -94,7 +93,7 @@ function UnforwardedTooltip(
 		placement: computedPlacement,
 		showTimeout: delay,
 	} );
-	const mounted = useStoreState( tooltipStore, 'mounted' );
+	const mounted = Ariakit.useStoreState( tooltipStore, 'mounted' );
 
 	if ( isNestedInTooltip ) {
 		return isOnlyChild ? (

package/src/tree-grid/stories/index.story.tsx

@@ -111,6 +111,7 @@ const Rows = ( {
 										label="Description"
 										hideLabelFromVision
 										placeholder="Description"
+										__next40pxDefaultSize
 										{ ...props }
 									/>
 								) }
@@ -121,6 +122,7 @@ const Rows = ( {
 										label="Notes"
 										hideLabelFromVision
 										placeholder="Notes"
+										__next40pxDefaultSize
 										{ ...props }
 									/>
 								) }