@wordpress/components 25.11.0 → 25.12.0

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/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/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/stories/index.story.tsx

@@ -42,8 +42,16 @@ const Template: StoryFn< typeof Tabs > = ( props ) => {
 			<Tabs.TabPanel id={ 'tab2' }>
 				<p>Selected tab: Tab 2</p>
 			</Tabs.TabPanel>
-			<Tabs.TabPanel id={ 'tab3' }>
+			<Tabs.TabPanel id={ 'tab3' } focusable={ false }>
 				<p>Selected tab: Tab 3</p>
+				<p>
+					This tabpanel has its <code>focusable</code> prop set to
+					<code> false</code>, so it won&apos;t get a tab stop.
+					<br />
+					Instead, the [Tab] key will move focus to the first
+					focusable element within the panel.
+				</p>
+				<Button variant="primary">I&apos;m a button!</Button>
 			</Tabs.TabPanel>
 		</Tabs>
 	);

package/src/tabs/styles.ts

@@ -101,3 +101,19 @@ export const Tab = styled( Ariakit.Tab )`
 		}
 	}
 `;
+
+export const TabPanel = styled( Ariakit.TabPanel )`
+	&:focus {
+		box-shadow: none;
+		outline: none;
+	}
+
+	&:focus-visible {
+		border-radius: 2px;
+		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
+			${ COLORS.theme.accent };
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: 0;
+	}
+`;

package/src/tabs/tab.tsx

@@ -11,11 +11,12 @@ import type { TabProps } from './types';
 import warning from '@wordpress/warning';
 import { TabsContext } from './context';
 import { Tab as StyledTab } from './styles';
+import type { WordPressComponentProps } from '../context';
 
-export const Tab = forwardRef< HTMLButtonElement, TabProps >( function Tab(
-	{ children, id, className, disabled, render, style },
-	ref
-) {
+export const Tab = forwardRef<
+	HTMLButtonElement,
+	WordPressComponentProps< TabProps, 'button', false >
+>( function Tab( { children, id, disabled, render, ...otherProps }, ref ) {
 	const context = useContext( TabsContext );
 	if ( ! context ) {
 		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
@@ -28,10 +29,9 @@ export const Tab = forwardRef< HTMLButtonElement, TabProps >( function Tab(
 			ref={ ref }
 			store={ store }
 			id={ instancedTabId }
-			className={ className }
-			style={ style }
 			disabled={ disabled }
 			render={ render }
+			{ ...otherProps }
 		>
 			{ children }
 		</StyledTab>

package/src/tabs/tablist.tsx

@@ -16,25 +16,26 @@ import { forwardRef } from '@wordpress/element';
 import type { TabListProps } from './types';
 import { useTabsContext } from './context';
 import { TabListWrapper } from './styles';
+import type { WordPressComponentProps } from '../context';
 
-export const TabList = forwardRef< HTMLDivElement, TabListProps >(
-	function TabList( { children, className, style }, ref ) {
-		const context = useTabsContext();
-		if ( ! context ) {
-			warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
-			return null;
-		}
-		const { store } = context;
-		return (
-			<Ariakit.TabList
-				ref={ ref }
-				style={ style }
-				store={ store }
-				className={ className }
-				render={ <TabListWrapper /> }
-			>
-				{ children }
-			</Ariakit.TabList>
-		);
+export const TabList = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< TabListProps, 'div', false >
+>( function TabList( { children, ...otherProps }, ref ) {
+	const context = useTabsContext();
+	if ( ! context ) {
+		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
+		return null;
 	}
-);
+	const { store } = context;
+	return (
+		<Ariakit.TabList
+			ref={ ref }
+			store={ store }
+			render={ <TabListWrapper /> }
+			{ ...otherProps }
+		>
+			{ children }
+		</Ariakit.TabList>
+	);
+} );

package/src/tabs/tabpanel.tsx

@@ -1,8 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
-import * as Ariakit from '@ariakit/react';
 
 /**
  * WordPress dependencies
@@ -14,29 +12,32 @@ import { forwardRef, useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import type { TabPanelProps } from './types';
+import { TabPanel as StyledTabPanel } from './styles';
 
 import warning from '@wordpress/warning';
 import { TabsContext } from './context';
+import type { WordPressComponentProps } from '../context';
 
-export const TabPanel = forwardRef< HTMLDivElement, TabPanelProps >(
-	function TabPanel( { children, id, className, style }, ref ) {
-		const context = useContext( TabsContext );
-		if ( ! context ) {
-			warning( '`Tabs.TabPanel` must be wrapped in a `Tabs` component.' );
-			return null;
-		}
-		const { store, instanceId } = context;
-
-		return (
-			<Ariakit.TabPanel
-				ref={ ref }
-				style={ style }
-				store={ store }
-				id={ `${ instanceId }-${ id }-view` }
-				className={ className }
-			>
-				{ children }
-			</Ariakit.TabPanel>
-		);
+export const TabPanel = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< TabPanelProps, 'div', false >
+>( function TabPanel( { children, id, focusable = true, ...otherProps }, ref ) {
+	const context = useContext( TabsContext );
+	if ( ! context ) {
+		warning( '`Tabs.TabPanel` must be wrapped in a `Tabs` component.' );
+		return null;
 	}
-);
+	const { store, instanceId } = context;
+
+	return (
+		<StyledTabPanel
+			ref={ ref }
+			store={ store }
+			id={ `${ instanceId }-${ id }-view` }
+			focusable={ focusable }
+			{ ...otherProps }
+		>
+			{ children }
+		</StyledTabPanel>
+	);
+} );