@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

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

@@ -10,7 +10,7 @@ import Button from '../../button';
 import { COLORS, CONFIG } from '../../utils';
 import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 
 export const Wrapper = styled.div`
 	box-sizing: border-box;
@@ -84,8 +84,8 @@ export const DayButton = styled( Button, {
 
 	&&& {
 		border-radius: 100%;
-		height: ${ space( 7 ) };
-		width: ${ space( 7 ) };
+		height: ${ space( 8 ) };
+		width: ${ space( 8 ) };
 
 		${ ( props ) =>
 			props.isSelected &&
@@ -108,7 +108,7 @@ export const DayButton = styled( Button, {
 		::before {
 			background: ${ props.isSelected ? COLORS.white : COLORS.theme.accent };
 			border-radius: 2px;
-			bottom: 0;
+			bottom: 2px;
 			content: " ";
 			height: 4px;
 			left: 50%;

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

@@ -15,6 +15,7 @@ import { __ } from '@wordpress/i18n';
 import BaseControl from '../../base-control';
 import Button from '../../button';
 import ButtonGroup from '../../button-group';
+import SelectControl from '../../select-control';
 import TimeZone from './timezone';
 import type { TimePickerProps } from '../types';
 import {
@@ -24,7 +25,6 @@ import {
 	TimeSeparator,
 	MinutesInput,
 	MonthSelectWrapper,
-	MonthSelect,
 	DayInput,
 	YearInput,
 	TimeWrapper,
@@ -127,7 +127,14 @@ export function TimePicker( {
 		method: 'hours' | 'minutes' | 'date' | 'year'
 	) => {
 		const callback: InputChangeCallback = ( value, { event } ) => {
-			if ( ! ( event.target instanceof HTMLInputElement ) ) {
+			// `instanceof` checks need to get the instance definition from the
+			// corresponding window object — therefore, the following logic makes
+			// the component work correctly even when rendered inside an iframe.
+			const HTMLInputElementInstance =
+				( event.target as HTMLInputElement )?.ownerDocument.defaultView
+					?.HTMLInputElement ?? HTMLInputElement;
+
+			if ( ! ( event.target instanceof HTMLInputElementInstance ) ) {
 				return;
 			}
 
@@ -174,7 +181,7 @@ export function TimePicker( {
 			className="components-datetime__time-field components-datetime__time-field-day" // Unused, for backwards compatibility.
 			label={ __( 'Day' ) }
 			hideLabelFromVision
-			__next36pxDefaultSize
+			__next40pxDefaultSize
 			value={ day }
 			step={ 1 }
 			min={ 1 }
@@ -190,10 +197,11 @@ export function TimePicker( {
 
 	const monthField = (
 		<MonthSelectWrapper>
-			<MonthSelect
+			<SelectControl
 				className="components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility.
 				label={ __( 'Month' ) }
 				hideLabelFromVision
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				value={ month }
 				options={ [
@@ -240,7 +248,7 @@ export function TimePicker( {
 							className="components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
 							label={ __( 'Hours' ) }
 							hideLabelFromVision
-							__next36pxDefaultSize
+							__next40pxDefaultSize
 							value={ hours }
 							step={ 1 }
 							min={ is12Hour ? 1 : 0 }
@@ -267,7 +275,7 @@ export function TimePicker( {
 							className="components-datetime__time-field-minutes-input" // Unused, for backwards compatibility.
 							label={ __( 'Minutes' ) }
 							hideLabelFromVision
-							__next36pxDefaultSize
+							__next40pxDefaultSize
 							value={ minutes }
 							step={ 1 }
 							min={ 0 }
@@ -294,6 +302,7 @@ export function TimePicker( {
 								variant={
 									am === 'AM' ? 'primary' : 'secondary'
 								}
+								__next40pxDefaultSize
 								onClick={ buildAmPmChangeCallback( 'AM' ) }
 							>
 								{ __( 'AM' ) }
@@ -303,6 +312,7 @@ export function TimePicker( {
 								variant={
 									am === 'PM' ? 'primary' : 'secondary'
 								}
+								__next40pxDefaultSize
 								onClick={ buildAmPmChangeCallback( 'PM' ) }
 							>
 								{ __( 'PM' ) }
@@ -338,7 +348,7 @@ export function TimePicker( {
 						className="components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
 						label={ __( 'Year' ) }
 						hideLabelFromVision
-						__next36pxDefaultSize
+						__next40pxDefaultSize
 						value={ year }
 						step={ 1 }
 						min={ 1 }

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

@@ -8,14 +8,12 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { COLORS, CONFIG } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 import {
 	Input,
 	BackdropUI,
 } from '../../input-control/styles/input-control-styles';
 import NumberControl from '../../number-control';
-import SelectControl from '../../select-control';
-import { Select } from '../../select-control/styles/select-control-styles';
 
 export const Wrapper = styled.div`
 	box-sizing: border-box;
@@ -92,14 +90,6 @@ export const MonthSelectWrapper = styled.div`
 	flex-grow: 1;
 `;
 
-export const MonthSelect = styled( SelectControl )`
-	height: 36px;
-
-	${ Select } {
-		line-height: 30px;
-	}
-`;
-
 export const DayInput = styled( NumberControl )`
 	${ baseInput }
 

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

@@ -30,15 +30,27 @@ const TimeZone = () => {
 	const zoneAbbr =
 		'' !== timezone.abbr && isNaN( Number( timezone.abbr ) )
 			? timezone.abbr
-			: `UTC${ offsetSymbol }${ timezone.offset }`;
+			: `UTC${ offsetSymbol }${ timezone.offsetFormatted }`;
+
+	// Replace underscore with space in strings like `America/Costa_Rica`.
+	const prettyTimezoneString = timezone.string.replace( '_', ' ' );
 
 	const timezoneDetail =
 		'UTC' === timezone.string
 			? __( 'Coordinated Universal Time' )
-			: `(${ zoneAbbr }) ${ timezone.string.replace( '_', ' ' ) }`;
-
-	return (
-		<Tooltip position="top center" text={ timezoneDetail }>
+			: `(${ zoneAbbr }) ${ prettyTimezoneString }`;
+
+	// When the prettyTimezoneString is empty, there is no additional timezone
+	// detail information to show in a Tooltip.
+	const hasNoAdditionalTimezoneDetail =
+		prettyTimezoneString.trim().length === 0;
+
+	return hasNoAdditionalTimezoneDetail ? (
+		<StyledComponent className="components-datetime__timezone">
+			{ zoneAbbr }
+		</StyledComponent>
+	) : (
+		<Tooltip placement="top" text={ timezoneDetail }>
 			<StyledComponent className="components-datetime__timezone">
 				{ zoneAbbr }
 			</StyledComponent>

package/src/dimension-control/README.md

@@ -9,8 +9,8 @@ This feature is still experimental. “Experimental” means this is an early im
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 export default function MyCustomDimensionControl() {
 	const [ paddingSize, setPaddingSize ] = useState( '' );

package/src/dimension-control/index.tsx

@@ -42,6 +42,7 @@ import type { SelectControlSingleSelectionProps } from '../select-control/types'
  */
 export function DimensionControl( props: DimensionControlProps ) {
 	const {
+		__next40pxDefaultSize = false,
 		label,
 		value,
 		sizes = sizesTable,
@@ -85,6 +86,7 @@ export function DimensionControl( props: DimensionControlProps ) {
 
 	return (
 		<SelectControl
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 			className={ classnames(
 				className,
 				'block-editor-dimension-control'

package/src/dimension-control/test/__snapshots__/index.test.js.snap

@@ -96,7 +96,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   -ms-flex: 1;
   flex: 1;
   position: relative;
-  background-color: #fff;
+  background-color: var(--wp-components-color-background, #fff);
   width: 100%;
 }
 
@@ -119,8 +119,8 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
-  height: 30px;
-  min-height: 30px;
+  height: 32px;
+  min-height: 32px;
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 8px;
@@ -174,7 +174,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #949494;
+  border-color: var(--wp-components-color-gray-600, #949494);
   border-style: solid;
   border-width: 1px;
   padding-left: 2px;
@@ -188,9 +188,9 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
         data-wp-c16t="true"
-        data-wp-component="Flex"
+        data-wp-component="InputBase"
       >
         <div
           class="components-flex-item emotion-7 emotion-8 emotion-6"
@@ -367,7 +367,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   -ms-flex: 1;
   flex: 1;
   position: relative;
-  background-color: #fff;
+  background-color: var(--wp-components-color-background, #fff);
   width: 100%;
 }
 
@@ -390,8 +390,8 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
-  height: 30px;
-  min-height: 30px;
+  height: 32px;
+  min-height: 32px;
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 8px;
@@ -445,7 +445,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #949494;
+  border-color: var(--wp-components-color-gray-600, #949494);
   border-style: solid;
   border-width: 1px;
   padding-left: 2px;
@@ -459,9 +459,9 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
         data-wp-c16t="true"
-        data-wp-component="Flex"
+        data-wp-component="InputBase"
       >
         <div
           class="components-flex-item emotion-7 emotion-8 emotion-6"
@@ -648,7 +648,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   -ms-flex: 1;
   flex: 1;
   position: relative;
-  background-color: #fff;
+  background-color: var(--wp-components-color-background, #fff);
   width: 100%;
 }
 
@@ -671,8 +671,8 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
-  height: 30px;
-  min-height: 30px;
+  height: 32px;
+  min-height: 32px;
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 8px;
@@ -726,7 +726,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #949494;
+  border-color: var(--wp-components-color-gray-600, #949494);
   border-style: solid;
   border-width: 1px;
   padding-left: 2px;
@@ -740,9 +740,9 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
         data-wp-c16t="true"
-        data-wp-component="Flex"
+        data-wp-component="InputBase"
       >
         <div
           class="components-flex-item emotion-7 emotion-8 emotion-6"
@@ -764,7 +764,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z"
+                d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"
               />
             </svg>
             Margin
@@ -941,7 +941,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   -ms-flex: 1;
   flex: 1;
   position: relative;
-  background-color: #fff;
+  background-color: var(--wp-components-color-background, #fff);
   width: 100%;
 }
 
@@ -964,8 +964,8 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
-  height: 30px;
-  min-height: 30px;
+  height: 32px;
+  min-height: 32px;
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 8px;
@@ -1019,7 +1019,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #949494;
+  border-color: var(--wp-components-color-gray-600, #949494);
   border-style: solid;
   border-width: 1px;
   padding-left: 2px;
@@ -1033,9 +1033,9 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
         data-wp-c16t="true"
-        data-wp-component="Flex"
+        data-wp-component="InputBase"
       >
         <div
           class="components-flex-item emotion-7 emotion-8 emotion-6"
@@ -1057,7 +1057,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z"
+                d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"
               />
             </svg>
             Margin

package/src/dimension-control/types.ts

@@ -45,4 +45,10 @@ export type DimensionControlProps = {
 	 * @default ''
 	 */
 	className?: string;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 };

package/src/disabled/README.md

@@ -7,8 +7,8 @@ Disabled is a component which disables descendant tabbable elements and prevents
 Assuming you have a form component, you can disable all form inputs by wrapping the form with `<Disabled>`.
 
 ```jsx
+import { useState } from 'react';
 import { Button, Disabled, TextControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyDisabled = () => {
 	const [ isDisabled, setIsDisabled ] = useState( true );

package/src/disabled/index.tsx

@@ -8,7 +8,7 @@ import { createContext } from '@wordpress/element';
  */
 import { disabledStyles } from './styles/disabled-styles';
 import type { DisabledProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import { useCx } from '../utils';
 
 const Context = createContext< boolean >( false );

package/src/disclosure/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DisclosureContentProps } from './types';
+import type { WordPressComponentProps } from '../context';
+
+/**
+ * Accessible Disclosure component that controls visibility of a section of
+ * content. It follows the WAI-ARIA Disclosure Pattern.
+ */
+const UnforwardedDisclosureContent = (
+	{
+		visible,
+		children,
+		...props
+	}: WordPressComponentProps< DisclosureContentProps, 'div', false >,
+	ref: React.ForwardedRef< any >
+) => {
+	const disclosure = Ariakit.useDisclosureStore( { open: visible } );
+
+	return (
+		<Ariakit.DisclosureContent
+			store={ disclosure }
+			ref={ ref }
+			{ ...props }
+		>
+			{ children }
+		</Ariakit.DisclosureContent>
+	);
+};
+
+export const DisclosureContent = forwardRef( UnforwardedDisclosureContent );
+export default DisclosureContent;

package/src/disclosure/types.tsx

@@ -0,0 +1,10 @@
+export type DisclosureContentProps = {
+	/**
+	 * If set to `true` the content will be shown, otherwise it's hidden.
+	 */
+	visible?: boolean;
+	/**
+	 * The content to display within the component.
+	 */
+	children: React.ReactNode;
+};

package/src/divider/README.md

@@ -55,4 +55,4 @@ Divider's orientation. When using inside a flex container, you may need to make
 
 ### Inherited props
 
-`Divider` also inherits all of the [`Separator` props](https://reakit.io/docs/separator/).
+`Divider` also inherits all of the [`Separator` props](https://ariakit.org/reference/separator#optional-props).

package/src/divider/component.tsx

@@ -2,14 +2,14 @@
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import { Separator } from 'reakit';
+import * as Ariakit from '@ariakit/react';
 import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect, useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect, useContextSystem } from '../context';
 import { DividerView } from './styles';
 import type { DividerProps } from './types';
 
@@ -20,8 +20,8 @@ function UnconnectedDivider(
 	const contextProps = useContextSystem( props, 'Divider' );
 
 	return (
-		<Separator
-			as={ DividerView }
+		<Ariakit.Separator
+			render={ <DividerView /> }
 			{ ...contextProps }
 			ref={ forwardedRef }
 		/>

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

@@ -23,6 +23,14 @@ const meta: Meta< typeof Divider > = {
 		marginEnd: {
 			control: { type: 'text' },
 		},
+		wrapElement: {
+			control: { type: null },
+		},
+		ref: {
+			table: {
+				disable: true,
+			},
+		},
 	},
 	parameters: {
 		controls: { expanded: true },

package/src/divider/styles.ts

@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { rtl } from '../utils';
 import type { DividerProps } from './types';
 

package/src/divider/types.ts

@@ -2,16 +2,16 @@
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import type { SeparatorProps } from 'reakit';
+import type { SeparatorProps } from '@ariakit/react';
 
 /**
  * Internal dependencies
  */
-import type { SpaceInput } from '../ui/utils/space';
+import type { SpaceInput } from '../utils/space';
 
 export type DividerProps = Omit<
 	SeparatorProps,
-	'children' | 'unstable_system' | 'orientation'
+	'children' | 'unstable_system' | 'orientation' | 'as' | 'render'
 > & {
 	/**
 	 * Adjusts all margins on the inline dimension.

package/src/drop-zone/README.md

@@ -5,8 +5,8 @@
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { DropZone } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyDropZone = () => {
 	const [ hasDropped, setHasDropped ] = useState( false );

package/src/drop-zone/index.tsx

@@ -23,7 +23,7 @@ import {
 	__unstableAnimatePresence as AnimatePresence,
 } from '../animation';
 import type { DropType, DropZoneProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 /**
  * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.

package/src/dropdown/README.md

@@ -44,6 +44,12 @@ If you want to target the dropdown menu for styling purposes, you need to provid
 
 -   Required: No
 
+### `defaultOpen`: `boolean`
+
+The open state of the dropdown when initially rendered. Use when you do not need to control its open state. It will be overridden by the `open` prop if it is specified on the component's first render.
+
+-   Required: No
+
 ### `expandOnMobile`: `boolean`
 
 Opt-in prop to show popovers fullscreen on mobile.
@@ -74,11 +80,15 @@ A callback invoked when the popover should be closed.
 
 -   Required: No
 
-### `onToggle`: `( willOpen: boolean ) => void`
+### `open`: `boolean`
 
-A callback invoked when the state of the popover changes from open to closed and vice versa.
+The controlled open state of the dropdown. Must be used in conjunction with `onToggle`.
+
+-   Required: No
+
+### `onToggle`: `( willOpen: boolean ) => void`
 
-The callback receives a boolean as a parameter. If `true`, the popover will open. If `false`, the popover will close.
+A callback invoked when the state of the dropdown changes from open to closed and vice versa.
 
 -   Required: No
 

package/src/dropdown/dropdown-content-wrapper.tsx

@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect, useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect, useContextSystem } from '../context';
 import { DropdownContentWrapperDiv } from './styles';
 import type { DropdownContentWrapperProps } from './types';