@wordpress/components 25.11.1-next.f8d8eceb.0 → 25.13.0

package/src/heading/types.ts

@@ -17,7 +17,10 @@ export type HeadingSize =
 	| '5'
 	| '6';
 
-export type HeadingProps = Omit< TextProps, 'size' > & {
+export type HeadingProps = Omit<
+	TextProps,
+	'size' | 'isBlock' | 'color' | 'weight'
+> & {
 	/**
 	 * Passing any of the heading levels to `level` will both render the correct
 	 * typographic text size as well as the semantic element corresponding to
@@ -26,4 +29,23 @@ export type HeadingProps = Omit< TextProps, 'size' > & {
 	 * @default 2
 	 */
 	level?: HeadingSize;
+	/**
+	 * Sets `Heading` to have `display: block`. Note: text truncation only works
+	 * when `isBlock` is `false`.
+	 *
+	 * @default true
+	 */
+	isBlock?: TextProps[ 'isBlock' ];
+	/**
+	 * Adjusts the text color.
+	 *
+	 * @default '#1e1e1e'
+	 */
+	color?: TextProps[ 'color' ];
+	/**
+	 * Adjusts font-weight of the text.
+	 *
+	 * @default '600'
+	 */
+	weight?: TextProps[ 'weight' ];
 };

package/src/index.native.js

@@ -141,4 +141,5 @@ export {
 	getGlobalStyles,
 	getColorsAndGradients,
 	useMobileGlobalStylesColors,
+	useEditorColorScheme,
 } from './mobile/global-styles-context/utils';

package/src/mobile/audio-player/index.native.js

@@ -14,7 +14,7 @@ import { default as VideoPlayer } from 'react-native-video';
  * WordPress dependencies
  */
 import { View } from '@wordpress/primitives';
-import { Icon } from '@wordpress/components';
+import { Icon, useEditorColorScheme } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { audio, warning } from '@wordpress/icons';
@@ -34,7 +34,6 @@ import { parseAudioUrl } from './audio-url-parser.native';
 const isIOS = Platform.OS === 'ios';
 
 function Player( {
-	getStylesFromColorScheme,
 	isUploadInProgress,
 	isUploadFailed,
 	attributes,
@@ -70,14 +69,14 @@ function Player( {
 		}
 	};
 
-	const containerStyle = getStylesFromColorScheme(
+	const containerStyle = useEditorColorScheme(
 		styles.container,
 		styles.containerDark
 	);
 
-	const iconStyle = getStylesFromColorScheme( styles.icon, styles.iconDark );
+	const iconStyle = useEditorColorScheme( styles.icon, styles.iconDark );
 
-	const iconDisabledStyle = getStylesFromColorScheme(
+	const iconDisabledStyle = useEditorColorScheme(
 		styles.iconDisabled,
 		styles.iconDisabledDark
 	);
@@ -89,7 +88,7 @@ function Player( {
 		...( isDisabled && iconDisabledStyle ),
 	};
 
-	const iconContainerStyle = getStylesFromColorScheme(
+	const iconContainerStyle = useEditorColorScheme(
 		styles.iconContainer,
 		styles.iconContainerDark
 	);
@@ -99,17 +98,14 @@ function Player( {
 		...( isIOS ? styles.titleContainerIOS : styles.titleContainerAndroid ),
 	};
 
-	const titleStyle = getStylesFromColorScheme(
-		styles.title,
-		styles.titleDark
-	);
+	const titleStyle = useEditorColorScheme( styles.title, styles.titleDark );
 
-	const uploadFailedStyle = getStylesFromColorScheme(
+	const uploadFailedStyle = useEditorColorScheme(
 		styles.uploadFailed,
 		styles.uploadFailedDark
 	);
 
-	const subtitleStyle = getStylesFromColorScheme(
+	const subtitleStyle = useEditorColorScheme(
 		styles.subtitle,
 		styles.subtitleDark
 	);
@@ -119,7 +115,7 @@ function Player( {
 		...( isUploadFailed && uploadFailedStyle ),
 	};
 
-	const buttonBackgroundStyle = getStylesFromColorScheme(
+	const buttonBackgroundStyle = useEditorColorScheme(
 		styles.buttonBackground,
 		styles.buttonBackgroundDark
 	);

package/src/mobile/global-styles-context/utils.native.js

@@ -3,6 +3,7 @@
  */
 import { camelCase } from 'change-case';
 import { Dimensions } from 'react-native';
+import { colord } from 'colord';
 
 /**
  * WordPress dependencies
@@ -11,7 +12,14 @@ import {
 	getPxFromCssUnit,
 	useSettings,
 	useMultipleOriginColorsAndGradients,
+	SETTINGS_DEFAULTS,
 } from '@wordpress/block-editor';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { useGlobalStyles } from './index.native';
 
 export const BLOCK_STYLE_ATTRIBUTES = [
 	'textColor',
@@ -355,13 +363,17 @@ export function useMobileGlobalStylesColors( type = 'colors' ) {
 		[]
 	);
 	// Default editor colors/gradients if it's not a block-based theme.
-	const colorPalette =
+	const defaultPaletteSetting =
 		type === 'colors' ? 'color.palette' : 'color.gradients';
-	const [ editorDefaultPalette ] = useSettings( colorPalette );
+	const [ defaultPaletteValue ] = useSettings( defaultPaletteSetting );
+	// In edge cases, the default palette might be undefined. To avoid
+	// exceptions across the editor in that case, we explicitly return
+	// the default editor colors.
+	const defaultPalette = defaultPaletteValue ?? SETTINGS_DEFAULTS.colors;
 
 	return availableThemeColors.length >= 1
 		? availableThemeColors
-		: editorDefaultPalette;
+		: defaultPalette;
 }
 
 export function getColorsAndGradients(
@@ -436,3 +448,40 @@ export function getGlobalStyles( rawStyles, rawFeatures ) {
 		__experimentalGlobalStylesBaseStyles: globalStyles,
 	};
 }
+
+/**
+ * Determine and apply appropriate color scheme based on global styles or device's light/dark mode.
+ *
+ * The function first attempts to retrieve the editor's background color from global styles.
+ * If the detected background color is light, light styles are applied, and dark styles otherwise.
+ * If no custom background color is defined, styles are applied using the device's dark/light setting.
+ *
+ * @param {Object} baseStyle - An object representing the base (light theme) styles for the editor.
+ * @param {Object} darkStyle - An object representing the additional styles to apply when the editor is in dark mode.
+ *
+ * @return {Object} - The combined style object that should be applied to the editor.
+ */
+export const useEditorColorScheme = ( baseStyle, darkStyle ) => {
+	const globalStyles = useGlobalStyles();
+
+	const deviceColorScheme = usePreferredColorSchemeStyle(
+		baseStyle,
+		darkStyle
+	);
+
+	const editorColors = globalStyles?.baseColors?.color;
+	const editorBackgroundColor = editorColors?.background;
+
+	const isBackgroundColorDefined =
+		typeof editorBackgroundColor !== 'undefined' &&
+		editorBackgroundColor !== 'undefined';
+
+	if ( isBackgroundColorDefined ) {
+		const isEditorBackgroundDark = colord( editorBackgroundColor ).isDark();
+		return isEditorBackgroundDark
+			? { ...baseStyle, ...darkStyle }
+			: baseStyle;
+	}
+
+	return deviceColorScheme;
+};

package/src/mobile/utils/alignments.native.js

@@ -10,6 +10,7 @@ export const WIDE_ALIGNMENTS = {
 	},
 	excludeBlocks: [ 'core/heading' ],
 	notInnerContainers: [
+		'core/image',
 		'core/separator',
 		'core/media-text',
 		'core/pullquote',

package/src/navigable-container/README.md

@@ -24,7 +24,7 @@ Gets an offset, given an event.
 
 -   Required: No
 
-### `onKeydown`: `( event: KeyboardEvent ) => void`
+### `onKeyDown`: `( event: KeyboardEvent ) => void`
 
 A callback invoked on the keydown event.
 

package/src/private-apis.ts

@@ -32,11 +32,12 @@ import {
 import {
 	DropdownMenu as DropdownMenuV2Ariakit,
 	DropdownMenuGroup as DropdownMenuGroupV2Ariakit,
-	DropdownMenuGroupLabel as DropdownMenuGroupLabelV2Ariakit,
 	DropdownMenuItem as DropdownMenuItemV2Ariakit,
 	DropdownMenuCheckboxItem as DropdownMenuCheckboxItemV2Ariakit,
 	DropdownMenuRadioItem as DropdownMenuRadioItemV2Ariakit,
 	DropdownMenuSeparator as DropdownMenuSeparatorV2Ariakit,
+	DropdownMenuItemLabel as DropdownMenuItemLabelV2Ariakit,
+	DropdownMenuItemHelpText as DropdownMenuItemHelpTextV2Ariakit,
 } from './dropdown-menu-v2-ariakit';
 import { ComponentsContext } from './context/context-system-provider';
 import Theme from './theme';
@@ -74,9 +75,10 @@ lock( privateApis, {
 	Theme,
 	DropdownMenuV2Ariakit,
 	DropdownMenuGroupV2Ariakit,
-	DropdownMenuGroupLabelV2Ariakit,
 	DropdownMenuItemV2Ariakit,
 	DropdownMenuCheckboxItemV2Ariakit,
 	DropdownMenuRadioItemV2Ariakit,
 	DropdownMenuSeparatorV2Ariakit,
+	DropdownMenuItemLabelV2Ariakit,
+	DropdownMenuItemHelpTextV2Ariakit,
 } );

package/src/radio-group/context.tsx

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const RadioGroupContext = createContext< {
+	store?: Ariakit.RadioStore;
+	disabled?: boolean;
+} >( {
+	store: undefined,
+	disabled: undefined,
+} );

package/src/radio-group/index.tsx

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo, forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ButtonGroup from '../button-group';
+import type { WordPressComponentProps } from '../context';
+import { RadioGroupContext } from './context';
+import type { RadioGroupProps } from './types';
+
+function UnforwardedRadioGroup(
+	{
+		label,
+		checked,
+		defaultChecked,
+		disabled,
+		onChange,
+		children,
+		...props
+	}: WordPressComponentProps< RadioGroupProps, 'div', false >,
+	ref: React.ForwardedRef< any >
+) {
+	const radioStore = Ariakit.useRadioStore( {
+		value: checked,
+		defaultValue: defaultChecked,
+		setValue: ( newValue ) => {
+			onChange?.( newValue ?? undefined );
+		},
+	} );
+
+	const contextValue = useMemo(
+		() => ( {
+			store: radioStore,
+			disabled,
+		} ),
+		[ radioStore, disabled ]
+	);
+
+	return (
+		<RadioGroupContext.Provider value={ contextValue }>
+			<Ariakit.RadioGroup
+				store={ radioStore }
+				render={ <ButtonGroup>{ children }</ButtonGroup> }
+				aria-label={ label }
+				ref={ ref }
+				{ ...props }
+			/>
+		</RadioGroupContext.Provider>
+	);
+}
+
+/**
+ * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
+ */
+export const RadioGroup = forwardRef( UnforwardedRadioGroup );
+export default RadioGroup;

package/src/radio-group/radio.tsx

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import { RadioGroupContext } from './context';
+import type { WordPressComponentProps } from '../context';
+import type { RadioProps } from './types';
+
+function UnforwardedRadio(
+	{
+		value,
+		children,
+		...props
+	}: WordPressComponentProps< RadioProps, 'button', false >,
+	ref: React.ForwardedRef< any >
+) {
+	const { store, disabled } = useContext( RadioGroupContext );
+
+	const selectedValue = store?.useState( 'value' );
+	const isChecked = selectedValue !== undefined && selectedValue === value;
+
+	return (
+		<Ariakit.Radio
+			disabled={ disabled }
+			store={ store }
+			ref={ ref }
+			value={ value }
+			render={
+				<Button
+					variant={ isChecked ? 'primary' : 'secondary' }
+					{ ...props }
+				/>
+			}
+		>
+			{ children || value }
+		</Ariakit.Radio>
+	);
+}
+
+/**
+ * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
+ */
+export const Radio = forwardRef( UnforwardedRadio );
+export default Radio;

package/src/radio-group/stories/index.story.tsx

@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { RadioGroup } from '..';
+import { Radio } from '../radio';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+const meta: Meta< typeof RadioGroup > = {
+	title: 'Components (Deprecated)/RadioGroup',
+	component: RadioGroup,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { Radio },
+	argTypes: {
+		onChange: { control: { type: null } },
+		children: { control: { type: null } },
+		checked: { control: { type: 'text' } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof RadioGroup > = ( props ) => {
+	return <RadioGroup { ...props } />;
+};
+
+export const Default: StoryFn< typeof RadioGroup > = Template.bind( {} );
+Default.args = {
+	id: 'default-radiogroup',
+	label: 'options',
+	defaultChecked: 'option2',
+	children: (
+		<>
+			<Radio value="option1">Option 1</Radio>
+			<Radio value="option2">Option 2</Radio>
+			<Radio value="option3">Option 3</Radio>
+		</>
+	),
+};
+
+export const Disabled: StoryFn< typeof RadioGroup > = Template.bind( {} );
+Disabled.args = {
+	...Default.args,
+	id: 'disabled-radiogroup',
+	disabled: true,
+};
+
+const ControlledTemplate: StoryFn< typeof RadioGroup > = ( {
+	checked: checkedProp,
+	onChange: onChangeProp,
+	...props
+} ) => {
+	const [ checked, setChecked ] =
+		useState< React.ComponentProps< typeof RadioGroup >[ 'checked' ] >(
+			checkedProp
+		);
+
+	const onChange: typeof onChangeProp = ( value ) => {
+		setChecked( value );
+		onChangeProp?.( value );
+	};
+
+	return (
+		<RadioGroup { ...props } onChange={ onChange } checked={ checked } />
+	);
+};
+
+export const Controlled: StoryFn< typeof RadioGroup > = ControlledTemplate.bind(
+	{}
+);
+Controlled.args = {
+	...Default.args,
+	checked: 'option2',
+	id: 'controlled-radiogroup',
+};
+Controlled.argTypes = {
+	checked: { control: { type: null } },
+};

package/src/radio-group/types.ts

@@ -0,0 +1,39 @@
+export type RadioGroupProps = {
+	/**
+	 * Accessible label for the radio group
+	 */
+	label: string;
+	/**
+	 * The `value` of the `Radio` element which should be selected.
+	 * Indicates controlled usage of the component.
+	 */
+	checked?: string | number;
+	/**
+	 * The value of the radio element which is initially selected.
+	 */
+	defaultChecked?: string | number;
+	/**
+	 * Whether the `RadioGroup` should be disabled.
+	 */
+	disabled?: boolean;
+	/**
+	 * Called when a `Radio` element has been selected.
+	 * Receives the `value` of the selected element as an argument.
+	 */
+	onChange?: ( value: string | number | undefined ) => void;
+	/**
+	 * The children elements, which should be a series of `Radio` components.
+	 */
+	children: React.ReactNode;
+};
+
+export type RadioProps = {
+	/**
+	 * The actual value of the radio element.
+	 */
+	value: string | number;
+	/**
+	 * Content displayed on the Radio element. If there aren't any children, `value` is displayed.
+	 */
+	children?: React.ReactNode;
+};

package/src/slot-fill/README.md

@@ -68,7 +68,7 @@ Both `Slot` and `Fill` accept a `name` string prop, where a `Slot` with a given
 -   By default, events will bubble to their parents on the DOM hierarchy (native event bubbling)
 -   If `bubblesVirtually` is set to true, events will bubble to their virtual parent in the React elements hierarchy instead.
 
-`Slot` with `bubblesVirtually` set to true also accept an optional `className` to add to the slot container.
+`Slot` with `bubblesVirtually` set to true also accept optional `className` and `style` props to add to the slot container.
 
 `Slot` **without** `bubblesVirtually` accepts an optional `children` function prop, which takes `fills` as a param. It allows you to perform additional processing and wrap `fills` conditionally.
 

package/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx

@@ -66,7 +66,7 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 		const slotFills = fills.get( name );
 		if ( slotFills ) {
 			// Force update fills.
-			slotFills.map( ( fill ) => fill.current.rerender() );
+			slotFills.forEach( ( fill ) => fill.current.rerender() );
 		}
 	};
 

package/src/slot-fill/types.ts

@@ -36,15 +36,21 @@ export type SlotComponentProps =
 
 			/**
 			 * A function that returns nodes to be rendered.
-			 * Not supported when `bubblesVirtually` is true.
+			 * Supported only when `bubblesVirtually` is `false`.
 			 */
 			children?: never;
 
 			/**
-			 * className.
-			 * Not supported when `bubblesVirtually` is true.
+			 * Additional className for the `Slot` component.
+			 * Supported only when `bubblesVirtually` is `true`.
 			 */
 			className?: string;
+
+			/**
+			 * Additional styles for the `Slot` component.
+			 * Supported only when `bubblesVirtually` is `true`.
+			 */
+			style?: React.CSSProperties;
 	  } )
 	| ( SlotPropBase & {
 			/**
@@ -56,15 +62,21 @@ export type SlotComponentProps =
 
 			/**
 			 * A function that returns nodes to be rendered.
-			 * Not supported when `bubblesVirtually` is true.
+			 * Supported only when `bubblesVirtually` is `false`.
 			 */
 			children?: ( fills: ReactNode ) => ReactNode;
 
 			/**
-			 * className.
-			 * Not supported when `bubblesVirtually` is false.
+			 * Additional className for the `Slot` component.
+			 * Supported only when `bubblesVirtually` is `true`.
 			 */
 			className?: never;
+
+			/**
+			 * Additional styles for the `Slot` component.
+			 * Supported only when `bubblesVirtually` is `true`.
+			 */
+			style?: never;
 	  } );
 
 export type FillComponentProps = {

package/src/tabs/README.md

@@ -159,19 +159,6 @@ The children elements, which should be a series of `Tabs.TabPanel` components.
 
 -   Required: No
 
-###### `className`: `string`
-
-The class name to apply to the tablist.
-
--   Required: No
--   Default: ''
-
-###### `style`: `React.CSSProperties`
-
-Custom CSS styles for the tablist.
-
-- Required: No
-
 #### Tab
 
 ##### Props
@@ -182,24 +169,12 @@ The id of the tab, which is prepended with the `Tabs` instance ID.
 
 - Required: Yes
 
-###### `style`: `React.CSSProperties`
-
-Custom CSS styles for the tab.
-
-- Required: No
-
 ###### `children`: `React.ReactNode`
 
 The children elements, generally the text to display on the tab.
 
 - Required: No
 
-###### `className`: `string`
-
-The class name to apply to the tab.
-
-- Required: No
-
 ###### `disabled`: `boolean`
 
 Determines if the tab button should be disabled.
@@ -229,14 +204,9 @@ The id of the tabpanel, which is combined with the `Tabs` instance ID and the su
 
 - Required: Yes
 
-###### `className`: `string`
-
-The class name to apply to the tabpanel.
-
-- Required: No
-
-###### `style`: `React.CSSProperties`
+###### `focusable`: `boolean`
 
-Custom CSS styles for the tab.
+Determines whether or not the tabpanel element should be focusable. If `false`, pressing the tab key will skip over the tabpanel, and instead focus on the first focusable element in the panel (if there is one).
 
 - Required: No
+- Default: `true`

package/src/tabs/index.tsx

@@ -8,7 +8,7 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useLayoutEffect, useRef } from '@wordpress/element';
+import { useLayoutEffect, useMemo, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -154,8 +154,16 @@ function Tabs( {
 		setSelectedId,
 	] );
 
+	const contextValue = useMemo(
+		() => ( {
+			store,
+			instanceId,
+		} ),
+		[ store, instanceId ]
+	);
+
 	return (
-		<TabsContext.Provider value={ { store, instanceId } }>
+		<TabsContext.Provider value={ contextValue }>
 			{ children }
 		</TabsContext.Provider>
 	);
@@ -164,4 +172,6 @@ function Tabs( {
 Tabs.TabList = TabList;
 Tabs.Tab = Tab;
 Tabs.TabPanel = TabPanel;
+Tabs.Context = TabsContext;
+
 export default Tabs;