@wordpress/components 17.0.0 → 19.0.2

package/src/font-size-picker/utils.js

@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+const DEFAULT_FONT_SIZE = 'default';
+const DEFAULT_FONT_SIZE_OPTION = {
+	slug: DEFAULT_FONT_SIZE,
+	name: __( 'Default' ),
+};
+export const CUSTOM_FONT_SIZE = 'custom';
+const CUSTOM_FONT_SIZE_OPTION = {
+	slug: CUSTOM_FONT_SIZE,
+	name: __( 'Custom' ),
+};
+
+/**
+ * Helper util to split a font size to its numeric value
+ * and its `unit`, if exists.
+ *
+ * @param {string|number} size Font size.
+ * @return {[number, string]} An array with the numeric value and the unit if exists.
+ */
+export function splitValueAndUnitFromSize( size ) {
+	/**
+	 * The first matched result is ignored as it's the left
+	 * hand side of the capturing group in the regex.
+	 */
+	const [ , numericValue, unit ] = size.split( /(\d+)/ );
+	return [ numericValue, unit ];
+}
+
+/**
+ * Some themes use css vars for their font sizes, so until we
+ * have the way of calculating them don't display them.
+ *
+ * @param {string|number} value The value that is checked.
+ * @return {boolean} Whether the value is a simple css value.
+ */
+export function isSimpleCssValue( value ) {
+	const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
+	return sizeRegex.test( value );
+}
+
+/**
+ * Return font size options in the proper format depending
+ * on the currently used control (select, toggle group).
+ *
+ * @param {boolean}  useSelectControl       Whether to use a select control.
+ * @param {Object[]} optionsArray           Array of available font sizes objects.
+ * @param {*}        disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
+ * @return {Object[]|null} Array of font sizes in proper format for the used control.
+ */
+export function getFontSizeOptions(
+	useSelectControl,
+	optionsArray,
+	disableCustomFontSizes
+) {
+	if ( disableCustomFontSizes && ! optionsArray.length ) {
+		return null;
+	}
+	return useSelectControl
+		? getSelectOptions( optionsArray, disableCustomFontSizes )
+		: getToggleGroupOptions( optionsArray );
+}
+
+function getSelectOptions( optionsArray, disableCustomFontSizes ) {
+	const options = [
+		DEFAULT_FONT_SIZE_OPTION,
+		...optionsArray,
+		...( disableCustomFontSizes ? [] : [ CUSTOM_FONT_SIZE_OPTION ] ),
+	];
+	return options.map( ( { slug, name, size } ) => ( {
+		key: slug,
+		name,
+		size,
+		__experimentalHint:
+			size && isSimpleCssValue( size ) && parseInt( size ),
+	} ) );
+}
+
+function getToggleGroupOptions( optionsArray ) {
+	return optionsArray.map( ( { slug, size, name } ) => {
+		let label = size;
+		if ( typeof size === 'string' ) {
+			const [ numericValue ] = splitValueAndUnitFromSize( size );
+			label = numericValue;
+		}
+		return { key: slug, value: size, label, name };
+	} );
+}
+
+export function getSelectedOption( fontSizes, value ) {
+	if ( ! value ) {
+		return DEFAULT_FONT_SIZE_OPTION;
+	}
+	return (
+		fontSizes.find( ( font ) => font.size === value ) ||
+		CUSTOM_FONT_SIZE_OPTION
+	);
+}

package/src/form-token-field/stories/index.js

@@ -16,6 +16,9 @@ import FormTokenField from '../';
 export default {
 	title: 'Components/FormTokenField',
 	component: FormTokenField,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 const continents = [

package/src/gradient-picker/index.js

@@ -14,18 +14,18 @@ import { useCallback, useMemo } from '@wordpress/element';
  */
 import CircularOptionPicker from '../circular-option-picker';
 import CustomGradientPicker from '../custom-gradient-picker';
+import { VStack } from '../v-stack';
+import { ColorHeading } from '../color-palette/styles';
 
-export default function GradientPicker( {
+function SingleOrigin( {
 	className,
+	clearGradient,
 	gradients,
 	onChange,
 	value,
-	clearable = true,
-	disableCustomGradients = false,
+	actions,
+	content,
 } ) {
-	const clearGradient = useCallback( () => onChange( undefined ), [
-		onChange,
-	] );
 	const gradientOptions = useMemo( () => {
 		return map( gradients, ( { gradient, name } ) => (
 			<CircularOptionPicker.Option
@@ -57,6 +57,70 @@ export default function GradientPicker( {
 		<CircularOptionPicker
 			className={ className }
 			options={ gradientOptions }
+			actions={ actions }
+		>
+			{ content }
+		</CircularOptionPicker>
+	);
+}
+
+function MultipleOrigin( {
+	className,
+	clearGradient,
+	gradients,
+	onChange,
+	value,
+	actions,
+	content,
+} ) {
+	return (
+		<VStack spacing={ 3 } className={ className }>
+			{ gradients.map( ( { name, gradients: gradientSet }, index ) => {
+				return (
+					<VStack spacing={ 2 } key={ index }>
+						<ColorHeading>{ name }</ColorHeading>
+						<SingleOrigin
+							clearGradient={ clearGradient }
+							gradients={ gradientSet }
+							onChange={ onChange }
+							value={ value }
+							{ ...( gradients.length === index + 1
+								? {
+										actions,
+										content,
+								  }
+								: {} ) }
+						/>
+					</VStack>
+				);
+			} ) }
+		</VStack>
+	);
+}
+
+export default function GradientPicker( {
+	className,
+	gradients,
+	onChange,
+	value,
+	clearable = true,
+	disableCustomGradients = false,
+	__experimentalHasMultipleOrigins,
+} ) {
+	const clearGradient = useCallback( () => onChange( undefined ), [
+		onChange,
+	] );
+	const Component = __experimentalHasMultipleOrigins
+		? MultipleOrigin
+		: SingleOrigin;
+	return (
+		<Component
+			className={ className }
+			clearable={ clearable }
+			clearGradient={ clearGradient }
+			gradients={ gradients }
+			onChange={ onChange }
+			value={ value }
 			actions={
 				clearable && (
 					<CircularOptionPicker.ButtonAction
@@ -66,10 +130,14 @@ export default function GradientPicker( {
 					</CircularOptionPicker.ButtonAction>
 				)
 			}
-		>
-			{ ! disableCustomGradients && (
-				<CustomGradientPicker value={ value } onChange={ onChange } />
-			) }
-		</CircularOptionPicker>
+			content={
+				! disableCustomGradients && (
+					<CustomGradientPicker
+						value={ value }
+						onChange={ onChange }
+					/>
+				)
+			}
+		/>
 	);
 }

package/src/gradient-picker/stories/index.js

@@ -16,6 +16,9 @@ import GradientPicker from '../';
 export default {
 	title: 'Components/GradientPicker',
 	component: GradientPicker,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 const GradientPickerWithState = ( props ) => {

package/src/grid/component.js

@@ -1,9 +1,20 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../ui/utils';
+import { contextConnect } from '../ui/context';
+import { View } from '../view';
 import useGrid from './hook';
 
+/**
+ * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
+ * @param {import('react').Ref<any>}                                                        forwardedRef
+ */
+function Grid( props, forwardedRef ) {
+	const gridProps = useGrid( props );
+
+	return <View { ...gridProps } ref={ forwardedRef } />;
+}
+
 /**
  * `Grid` is a primitive layout component that can arrange content in a grid configuration.
  *
@@ -25,10 +36,6 @@ import useGrid from './hook';
  * }
  * ```
  */
-const Grid = createComponent( {
-	as: 'div',
-	useHook: useGrid,
-	name: 'Grid',
-} );
+const ConnectedGrid = contextConnect( Grid, 'Grid' );
 
-export default Grid;
+export default ConnectedGrid;

package/src/grid/stories/index.js

@@ -12,6 +12,9 @@ import { Grid } from '..';
 export default {
 	component: Grid,
 	title: 'Components (Experimental)/Grid',
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 const Item = ( props ) => (

package/src/guide/stories/index.js

@@ -15,7 +15,13 @@ import { useState } from '@wordpress/element';
 import Button from '../../button';
 import Guide from '../';
 
-export default { title: 'Components/Guide', component: Guide };
+export default {
+	title: 'Components/Guide',
+	component: Guide,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 const ModalExample = ( { numberOfPages, ...props } ) => {
 	const [ isOpen, setOpen ] = useState( false );

package/src/h-stack/component.js

@@ -1,9 +1,20 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../ui/utils';
+import { contextConnect } from '../ui/context';
+import { View } from '../view';
 import { useHStack } from './hook';
 
+/**
+ * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
+ * @param {import('react').Ref<any>}                                                        forwardedRef
+ */
+function HStack( props, forwardedRef ) {
+	const hStackProps = useHStack( props );
+
+	return <View { ...hStackProps } ref={ forwardedRef } />;
+}
+
 /**
  * `HStack` (Horizontal Stack) arranges child elements in a horizontal line.
  *
@@ -27,10 +38,6 @@ import { useHStack } from './hook';
  * }
  * ```
  */
-const HStack = createComponent( {
-	as: 'div',
-	useHook: useHStack,
-	name: 'HStack',
-} );
+const ConnectedHStack = contextConnect( HStack, 'HStack' );
 
-export default HStack;
+export default ConnectedHStack;

package/src/h-stack/stories/index.js

@@ -6,7 +6,7 @@ import { HStack } from '..';
 
 export default {
 	component: HStack,
-	title: 'G2 Components (Experimental)/HStack',
+	title: 'Components (Experimental)/HStack',
 };
 
 export const _default = () => {

package/src/heading/component.tsx

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { Ref } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { contextConnect, WordPressComponentProps } from '../ui/context';
+import { View } from '../view';
+import { useHeading, HeadingProps } from './hook';
+
+function Heading(
+	props: WordPressComponentProps< HeadingProps, 'h1' >,
+	forwardedRef: Ref< any >
+) {
+	const headerProps = useHeading( props );
+
+	return <View { ...headerProps } ref={ forwardedRef } />;
+}
+
+/**
+ * `Heading` renders headings and titles using the library's typography system.
+ *
+ * @example
+ * ```jsx
+ * import { Heading } from `@wordpress/components`
+ *
+ * function Example() {
+ *   return <Heading>Code is Poetry</Heading>;
+ * }
+ * ```
+ */
+const ConnectedHeading = contextConnect( Heading, 'Heading' );
+
+export default ConnectedHeading;

package/src/heading/hook.ts

@@ -25,7 +25,7 @@ export interface HeadingProps extends Omit< TextProps, 'size' > {
 	/**
 	 * `Heading` will typically render the sizes `1`, `2`, `3`, `4`, `5`, or `6`, which map to `h1`-`h6`.
 	 *
-	 * @default 3
+	 * @default 2
 	 *
 	 * @example
 	 * ```jsx
@@ -56,16 +56,17 @@ export function useHeading(
 		'Heading'
 	);
 
-	const as = asProp || `h${ level }`;
+	const as = ( asProp || `h${ level }` ) as keyof JSX.IntrinsicElements;
 
 	const a11yProps: {
 		role?: string;
-		'aria-level'?: string | number;
+		'aria-level'?: number;
 	} = {};
 	if ( typeof as === 'string' && as[ 0 ] !== 'h' ) {
 		// if not a semantic `h` element, add a11y props:
 		a11yProps.role = 'heading';
-		a11yProps[ 'aria-level' ] = level;
+		a11yProps[ 'aria-level' ] =
+			typeof level === 'string' ? parseInt( level ) : level;
 	}
 
 	const textProps = useText( {

package/src/heading/stories/index.js

@@ -5,7 +5,7 @@ import { Heading } from '../';
 
 export default {
 	component: Heading,
-	title: 'G2 Components (Experimental)/Heading',
+	title: 'Components (Experimental)/Heading',
 };
 
 export const _default = () => {

package/src/heading/test/__snapshots__/index.js.snap

@@ -2,7 +2,7 @@
 
 exports[`props should render correctly 1`] = `
 .emotion-0 {
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   color: #050505;

package/src/icon/stories/index.js

@@ -1,31 +1,37 @@
 /**
  * External dependencies
  */
-import { number, text } from '@storybook/addon-knobs';
+import { number } from '@storybook/addon-knobs';
 
 /**
  * WordPress dependencies
  */
 import { SVG, Path } from '@wordpress/primitives';
+import { wordpress } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import Icon from '../';
 
-export default { title: 'Components/Icon', component: Icon };
+export default {
+	title: 'Components/Icon',
+	component: Icon,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 const IconSizeLabel = ( { size } ) => (
 	<div style={ { fontSize: 12 } }>{ size }px</div>
 );
 
 export const _default = () => {
-	const icon = text( 'Icon', 'screenoptions' );
 	const size = number( 'Size', '24' );
 
 	return (
 		<div>
-			<Icon icon={ icon } size={ size } />
+			<Icon icon={ wordpress } size={ size } />
 			<IconSizeLabel size={ size } />
 		</div>
 	);
@@ -41,7 +47,7 @@ export const sizes = () => {
 					key={ size }
 					style={ { padding: 20, display: 'inline-block' } }
 				>
-					<Icon icon="screenoptions" size={ size } />
+					<Icon icon={ wordpress } size={ size } />
 					<IconSizeLabel size={ size } />
 				</div>
 			) ) }
@@ -52,18 +58,18 @@ export const sizes = () => {
 export const colors = () => {
 	const iconColors = [ 'blue', 'purple', 'green' ];
 
-	/**
-	 * The SVG icon inherits the color from a parent selector.
-	 */
-
 	return (
 		<>
 			{ iconColors.map( ( color ) => (
 				<div
 					key={ color }
-					style={ { padding: 20, display: 'inline-block', color } }
+					style={ {
+						padding: 20,
+						display: 'inline-block',
+						fill: color,
+					} }
 				>
-					<Icon icon="screenoptions" />
+					<Icon icon={ wordpress } />
 					<IconSizeLabel size={ 24 } />
 				</div>
 			) ) }

package/src/index.js

@@ -39,7 +39,7 @@ export { default as ClipboardButton } from './clipboard-button';
 export { default as __experimentalColorEdit } from './color-edit';
 export { default as ColorIndicator } from './color-indicator';
 export { default as ColorPalette } from './color-palette';
-export { default as ColorPicker } from './color-picker';
+export { ColorPicker } from './color-picker';
 export { default as ComboboxControl } from './combobox-control';
 export {
 	Composite as __unstableComposite,
@@ -96,6 +96,11 @@ export { default as __experimentalNavigationBackButton } from './navigation/back
 export { default as __experimentalNavigationGroup } from './navigation/group';
 export { default as __experimentalNavigationItem } from './navigation/item';
 export { default as __experimentalNavigationMenu } from './navigation/menu';
+export {
+	NavigatorProvider as __experimentalNavigatorProvider,
+	NavigatorScreen as __experimentalNavigatorScreen,
+	useNavigator as __experimentalUseNavigator,
+} from './navigator';
 export { default as Notice } from './notice';
 export { default as __experimentalNumberControl } from './number-control';
 export { default as NoticeList } from './notice/list';
@@ -141,6 +146,7 @@ export { default as ToolbarItem } from './toolbar-item';
 export {
 	ToolsPanel as __experimentalToolsPanel,
 	ToolsPanelItem as __experimentalToolsPanelItem,
+	ToolsPanelContext as __experimentalToolsPanelContext,
 } from './tools-panel';
 export { default as Tooltip } from './tooltip';
 export {
@@ -156,6 +162,7 @@ export {
 	useCustomUnits as __experimentalUseCustomUnits,
 	parseUnit as __experimentalParseUnit,
 } from './unit-control';
+export { View as __experimentalView } from './view';
 export { VisuallyHidden } from './visually-hidden';
 export { VStack as __experimentalVStack } from './v-stack';
 export { default as IsolatedEventContainer } from './isolated-event-container';

package/src/index.native.js

@@ -10,7 +10,7 @@ export {
 } from '@wordpress/primitives';
 export { default as ColorIndicator } from './color-indicator';
 export { default as ColorPalette } from './color-palette';
-export { default as ColorPicker } from './color-picker';
+export { ColorPicker } from './color-picker';
 export { default as Dashicon } from './dashicon';
 export { default as Dropdown } from './dropdown';
 export { default as DropdownMenu } from './dropdown-menu';
@@ -30,7 +30,7 @@ export {
 	Fill,
 	Provider as SlotFillProvider,
 } from './slot-fill';
-export { default as FontSizePicker } from './font-size-picker'; // Intentionally called after slot-fill.
+
 export { default as __experimentalStyleProvider } from './style-provider';
 export { default as BaseControl } from './base-control';
 export { default as TextareaControl } from './textarea-control';
@@ -66,6 +66,7 @@ export { default as Disabled } from './disabled';
 export { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing';
 export { default as withFallbackStyles } from './higher-order/with-fallback-styles';
 export { default as withFilters } from './higher-order/with-filters';
+export { default as FontSizePicker } from './font-size-picker'; // Intentionally called after slot-fill and withFilters.
 export { default as withFocusOutside } from './higher-order/with-focus-outside';
 export { default as withFocusReturn } from './higher-order/with-focus-return';
 export { default as withNotices } from './higher-order/with-notices';
@@ -102,6 +103,7 @@ export { default as LinkPickerScreen } from './mobile/link-picker/link-picker-sc
 export { default as LinkSettings } from './mobile/link-settings';
 export { default as LinkSettingsScreen } from './mobile/link-settings/link-settings-screen';
 export { default as LinkSettingsNavigation } from './mobile/link-settings/link-settings-navigation';
+export { default as ImageLinkDestinationsScreen } from './mobile/link-settings/image-link-destinations-screen';
 export { default as SegmentedControl } from './mobile/segmented-control';
 export { default as Image, IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image';
 export { default as ImageEditingButton } from './mobile/image/image-editing-button';

package/src/input-control/stories/index.js

@@ -16,6 +16,9 @@ import InputControl from '../';
 export default {
 	title: 'Components/InputControl',
 	component: InputControl,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 function Example() {

package/src/input-control/types.ts

@@ -31,15 +31,17 @@ interface BaseProps {
 	size?: 'default' | 'small';
 }
 
+export type InputChangeCallback<
+	E = ChangeEvent< HTMLInputElement >,
+	P = {}
+> = ( nextValue: string | undefined, extra: { event: E } & P ) => void;
+
 export interface InputFieldProps extends BaseProps {
 	dragDirection?: DragDirection;
 	dragThreshold?: number;
 	isDragEnabled?: boolean;
 	isPressEnterToChange?: boolean;
-	onChange?: (
-		nextValue: string | undefined,
-		extra: { event: ChangeEvent< HTMLInputElement > }
-	) => void;
+	onChange?: InputChangeCallback;
 	onValidate?: (
 		nextValue: string,
 		event?: SyntheticEvent< HTMLInputElement >

package/src/item-group/item/README.md

@@ -29,12 +29,11 @@ function Example() {
 
 ## Props
 
-### `isAction`: `boolean`
+### `onClick`: `React.MouseEventHandler<HTMLDivElement>`
 
-Renders the item as an interactive `button` element.
+Even handler for processing `click` events. When defined, the `Item` component will render as a `button` (unless differently specified via the `as` prop).
 
 - Required: No
-- Default: `false`
 
 ### `size`: `'small' | 'medium' | 'large'`