@wordpress/components 29.0.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

@@ -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
@@ -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

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/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 }
 									/>
 								) }

package/src/tree-select/README.md

@@ -1,10 +1,10 @@
 # TreeSelect
 
-TreeSelect component is used to generate select input fields.
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
 
-## Usage
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-treeselect--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
 
-Render a user interface to select the parent page in a hierarchy of pages:
+Generates a hierarchical select input.
 
 ```jsx
 import { useState } from 'react';
@@ -15,7 +15,8 @@ const MyTreeSelect = () => {
 
 	return (
 		<TreeSelect
-		  __nextHasNoMarginBottom
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label="Parent page"
 			noOptionLabel="No parent page"
 			onChange={ ( newPage ) => setPage( newPage ) }
@@ -53,48 +54,163 @@ const MyTreeSelect = () => {
 
 ## Props
 
-The set of props accepted by the component will be specified below.
-Props not included in this set will be applied to the SelectControl component being used.
+### `__next40pxDefaultSize`
 
-### label
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+### `__nextHasNoMarginBottom`
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+### `children`
+
+ - Type: `ReactNode`
+ - Required: No
+
+As an alternative to the `options` prop, `optgroup`s and `options` can be
+passed in as `children` for more customizability.
+
+### `disabled`
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+If true, the `input` will be disabled.
+
+### `hideLabelFromVision`
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+If true, the label will only be visible to screen readers.
+
+### `help`
+
+ - Type: `ReactNode`
+ - Required: No
+
+Additional description for the control.
+
+Only use for meaningful description or instructions for the control. An element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
+
+### `label`
+
+ - Type: `ReactNode`
+ - Required: No
 
 If this property is added, a label will be generated using label property as the content.
 
--   Type: `String`
--   Required: No
+### `labelPosition`
+
+ - Type: `"top" | "bottom" | "side" | "edge"`
+ - Required: No
+ - Default: `'top'`
+
+The position of the label.
+
+### `noOptionLabel`
 
-### noOptionLabel
+ - Type: `string`
+ - Required: No
 
 If this property is added, an option will be added with this label to represent empty selection.
 
--   Type: `String`
--   Required: No
+### `onChange`
 
-### onChange
+ - Type: `(value: string, extra?: { event?: ChangeEvent<HTMLSelectElement>; }) => void`
+ - Required: No
 
-A function that receives the id of the new node element that is being selected.
+A function that receives the value of the new option that is being selected as input.
 
--   Type: `function`
--   Required: Yes
+### `options`
 
-### selectedId
+ - Type: `readonly ({ label: string; value: string; } & Omit<OptionHTMLAttributes<HTMLOptionElement>, "label" | "value">)[]`
+ - Required: No
+
+An array of option property objects to be rendered,
+each with a `label` and `value` property, as well as any other
+`<option>` attributes.
+
+### `prefix`
+
+ - Type: `ReactNode`
+ - Required: No
+
+Renders an element on the left side of the input.
+
+By default, the prefix is aligned with the edge of the input border, with no padding.
+If you want to apply standard padding in accordance with the size variant, wrap the element in
+the provided `<InputControlPrefixWrapper>` component.
+
+```jsx
+import {
+  __experimentalInputControl as InputControl,
+  __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+} from '@wordpress/components';
+
+<InputControl
+  prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>}
+/>
+```
+
+### `selectedId`
+
+ - Type: `string`
+ - Required: No
 
 The id of the currently selected node.
 
--   Type: `string` | `string[]`
--   Required: No
+### `size`
 
-### tree
+ - Type: `"default" | "small" | "compact" | "__unstable-large"`
+ - Required: No
+ - Default: `'default'`
 
-An array containing the tree objects with the possible nodes the user can select.
+Adjusts the size of the input.
 
--   Type: `Object[]`
--   Required: No
+### `suffix`
 
-#### __nextHasNoMarginBottom
+ - Type: `ReactNode`
+ - Required: No
 
-Start opting into the new margin-free styles that will become the default in a future version.
+Renders an element on the right side of the input.
+
+By default, the suffix is aligned with the edge of the input border, with no padding.
+If you want to apply standard padding in accordance with the size variant, wrap the element in
+the provided `<InputControlSuffixWrapper>` component.
+
+```jsx
+import {
+  __experimentalInputControl as InputControl,
+  __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+} from '@wordpress/components';
+
+<InputControl
+  suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>}
+/>
+```
+
+### `tree`
+
+ - Type: `Tree[]`
+ - Required: No
+
+An array containing the tree objects with the possible nodes the user can select.
+
+### `variant`
+
+ - Type: `"default" | "minimal"`
+ - Required: No
+ - Default: `'default'`
 
--   Type: `Boolean`
--   Required: No
--   Default: `false`
+The style variant of the control.

package/src/tree-select/docs-manifest.json

@@ -0,0 +1,5 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "TreeSelect",
+	"filePath": "./index.tsx"
+}

package/src/tree-select/index.tsx

@@ -11,6 +11,7 @@ import { SelectControl } from '../select-control';
 import type { TreeSelectProps, Tree, Truthy } from './types';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 import { ContextSystemProvider } from '../context';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const CONTEXT_VALUE = {
 	BaseControl: {
@@ -35,11 +36,11 @@ function getSelectOptions(
 }
 
 /**
- * TreeSelect component is used to generate select input fields.
+ * Generates a hierarchical select input.
  *
  * ```jsx
+ * import { useState } from 'react';
  * import { TreeSelect } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
  *
  * const MyTreeSelect = () => {
  * 	const [ page, setPage ] = useState( 'p21' );
@@ -47,6 +48,7 @@ function getSelectOptions(
  * 	return (
  * 		<TreeSelect
  * 			__nextHasNoMarginBottom
+ * 			__next40pxDefaultSize
  * 			label="Parent page"
  * 			noOptionLabel="No parent page"
  * 			onChange={ ( newPage ) => setPage( newPage ) }
@@ -99,9 +101,16 @@ export function TreeSelect( props: TreeSelectProps ) {
 		].filter( < T, >( option: T ): option is Truthy< T > => !! option );
 	}, [ noOptionLabel, tree ] );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'TreeSelect',
+		size: restProps.size,
+		__next40pxDefaultSize: restProps.__next40pxDefaultSize,
+	} );
+
 	return (
 		<ContextSystemProvider value={ CONTEXT_VALUE }>
 			<SelectControl
+				__shouldNotWarnDeprecated36pxSize
 				{ ...{ label, options, onChange } }
 				value={ selectedId }
 				{ ...restProps }

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

@@ -50,6 +50,7 @@ const TreeSelectWithState: StoryFn< typeof TreeSelect > = ( props ) => {
 export const Default = TreeSelectWithState.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 	label: 'Label Text',
 	noOptionLabel: 'No parent page',
 	help: 'Help text to explain the select control.',

package/src/tree-select/types.ts

@@ -16,11 +16,18 @@ export interface Tree {
 // `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' > {
+	extends Omit<
+		SelectControlSingleSelectionProps,
+		'value' | 'multiple' | 'onChange'
+	> {
 	/**
 	 * If this property is added, an option will be added with this label to represent empty selection.
 	 */
 	noOptionLabel?: string;
+	/**
+	 * A function that receives the value of the new option that is being selected as input.
+	 */
+	onChange?: SelectControlSingleSelectionProps[ 'onChange' ];
 	/**
 	 * An array containing the tree objects with the possible nodes the user can select.
 	 */

package/tsconfig.json

@@ -2,8 +2,6 @@
 	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
-		"rootDir": "src",
-		"declarationDir": "build-types",
 		"types": [
 			"gutenberg-env",
 			"gutenberg-test-env",
@@ -31,7 +29,6 @@
 		{ "path": "../rich-text" },
 		{ "path": "../warning" }
 	],
-	"include": [ "src/**/*" ],
 	"exclude": [
 		"src/**/*.android.js",
 		"src/**/*.ios.js",