@wordpress/components 19.12.0 → 19.13.0

package/src/radio-control/README.md

@@ -75,57 +75,51 @@ const MyRadioControl = () => {
 			onChange={ ( value ) => setOption( value ) }
 		/>
 	);
-}
+};
 ```
 
 ### Props
 
 The component accepts the following props:
 
-### hideLabelFromVision
+#### `help`: `string | WPElement`
 
-If true, the label will only be visible to screen readers.
+If this property is added, a help text will be generated using help property as the content.
 
--   Type: `Boolean`
 -   Required: No
 
-#### label
+#### `hideLabelFromVision`: `boolean`
 
-If this property is added, a label will be generated using label property as the content.
+If true, the label will only be visible to screen readers.
 
--   Type: `String`
 -   Required: No
 
-#### help
+#### `label`: `string`
 
-If this property is added, a help text will be generated using help property as the content.
+If this property is added, a label will be generated using label property as the content.
 
--   Type: `String|WPElement`
 -   Required: No
 
-#### selected
+#### `onChange`: `( value: string ) => void`
 
-The value property of the currently selected option.
+A function that receives the value of the new option that is being selected as input.
 
--   Type: `Object`
--   Required: No
+-   Required: Yes
 
-#### options
+#### `options`: `{ label: string, value: string }[]`
 
-An array of objects containing the following properties:
+An array of objects containing the value and label of the options.
 
--   `label`: (string) The label to be shown to the user.
--   `value`: (Object) The internal value compared against select and passed to onChange.
+-   `label`: `string` The label to be shown to the user.
+-   `value`: `string` The internal value compared against select and passed to onChange.
 
-*   Type: `Array`
 *   Required: No
 
-#### onChange
+#### `selected`: `string`
 
-A function that receives the value of the new option that is being selected as input.
+The value property of the currently selected option.
 
--   Type: `function`
--   Required: Yes
+-   Required: No
 
 ## Related components
 

package/src/radio-control/index.tsx

@@ -0,0 +1,107 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+import classnames from 'classnames';
+import type { ChangeEvent } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import BaseControl from '../base-control';
+import type { WordPressComponentProps } from '../ui/context';
+import type { RadioControlProps } from './types';
+
+/**
+ * Render a user interface to select the user type using radio inputs.
+ *
+ * ```jsx
+ * import { RadioControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyRadioControl = () => {
+ *   const [ option, setOption ] = useState( 'a' );
+ *
+ *   return (
+ *     <RadioControl
+ *       label="User type"
+ *       help="The type of the current user"
+ *       selected={ option }
+ *       options={ [
+ *         { label: 'Author', value: 'a' },
+ *         { label: 'Editor', value: 'e' },
+ *       ] }
+ *       onChange={ ( value ) => setOption( value ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export function RadioControl(
+	// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add
+	// ref forwarding to RadioControl.
+	props: Omit<
+		WordPressComponentProps< RadioControlProps, 'input', false >,
+		'ref'
+	>
+) {
+	const {
+		label,
+		className,
+		selected,
+		help,
+		onChange,
+		hideLabelFromVision,
+		options = [],
+		...additionalProps
+	} = props;
+	const instanceId = useInstanceId( RadioControl );
+	const id = `inspector-radio-control-${ instanceId }`;
+	const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
+		onChange( event.target.value );
+
+	if ( isEmpty( options ) ) {
+		return null;
+	}
+
+	return (
+		<BaseControl
+			label={ label }
+			id={ id }
+			hideLabelFromVision={ hideLabelFromVision }
+			help={ help }
+			className={ classnames( className, 'components-radio-control' ) }
+		>
+			{ options.map( ( option, index ) => (
+				<div
+					key={ `${ id }-${ index }` }
+					className="components-radio-control__option"
+				>
+					<input
+						id={ `${ id }-${ index }` }
+						className="components-radio-control__input"
+						type="radio"
+						name={ id }
+						value={ option.value }
+						onChange={ onChangeValue }
+						checked={ option.value === selected }
+						aria-describedby={
+							!! help ? `${ id }__help` : undefined
+						}
+						{ ...additionalProps }
+					/>
+					<label htmlFor={ `${ id }-${ index }` }>
+						{ option.label }
+					</label>
+				</div>
+			) ) }
+		</BaseControl>
+	);
+}
+
+export default RadioControl;

package/src/radio-control/stories/index.tsx

@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import RadioControl from '..';
+
+const meta: ComponentMeta< typeof RadioControl > = {
+	component: RadioControl,
+	title: 'Components/RadioControl',
+	argTypes: {
+		onChange: {
+			action: 'onChange',
+		},
+		selected: {
+			control: { type: null },
+		},
+		label: {
+			control: { type: 'text' },
+		},
+		help: {
+			control: { type: 'text' },
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof RadioControl > = ( {
+	onChange,
+	options,
+	...args
+} ) => {
+	const [ value, setValue ] = useState( options?.[ 0 ]?.value );
+
+	return (
+		<RadioControl
+			{ ...args }
+			selected={ value }
+			options={ options }
+			onChange={ ( v ) => {
+				setValue( v );
+				onChange( v );
+			} }
+		/>
+	);
+};
+
+export const Default: ComponentStory< typeof RadioControl > = Template.bind(
+	{}
+);
+Default.args = {
+	label: 'Post visibility',
+	options: [
+		{ label: 'Public', value: 'public' },
+		{ label: 'Private', value: 'private' },
+		{ label: 'Password Protected', value: 'password' },
+	],
+};

package/src/radio-control/types.ts

@@ -0,0 +1,32 @@
+/**
+ * Internal dependencies
+ */
+import type { BaseControlProps } from '../base-control/types';
+
+export type RadioControlProps = Pick<
+	BaseControlProps,
+	'label' | 'help' | 'hideLabelFromVision'
+> & {
+	/**
+	 * A function that receives the value of the new option that is being
+	 * selected as input.
+	 */
+	onChange: ( value: string ) => void;
+	/**
+	 * An array of objects containing the value and label of the options.
+	 */
+	options?: {
+		/**
+		 * The label to be shown to the user
+		 */
+		label: string;
+		/**
+		 * The internal value compared against select and passed to onChange
+		 */
+		value: string;
+	}[];
+	/**
+	 * The value property of the currently selected option.
+	 */
+	selected?: string;
+};

package/src/range-control/index.js

@@ -3,7 +3,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { clamp, isFinite, noop } from 'lodash';
+import { clamp } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -35,6 +35,8 @@ import {
 	Wrapper,
 } from './styles/range-control-styles';
 
+const noop = () => {};
+
 function RangeControl(
 	{
 		afterIcon,
@@ -121,7 +123,7 @@ function RangeControl(
 
 	const id = useInstanceId( RangeControl, 'inspector-range-control' );
 	const describedBy = !! help ? `${ id }__help` : undefined;
-	const enableTooltip = showTooltipProp !== false && isFinite( value );
+	const enableTooltip = showTooltipProp !== false && Number.isFinite( value );
 
 	const handleOnRangeChange = ( event ) => {
 		const nextValue = parseFloat( event.target.value );

package/src/range-control/input-range.js

@@ -1,9 +1,4 @@
 // @ts-nocheck
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -15,6 +10,8 @@ import { forwardRef } from '@wordpress/element';
 import { InputRange as BaseInputRange } from './styles/range-control-styles';
 import { useDebouncedHoverInteraction } from './utils';
 
+const noop = () => {};
+
 function InputRange(
 	{
 		describedBy,

package/src/range-control/utils.js

@@ -2,7 +2,7 @@
 /**
  * External dependencies
  */
-import { clamp, noop } from 'lodash';
+import { clamp } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -14,6 +14,8 @@ import { useCallback, useRef, useEffect, useState } from '@wordpress/element';
  */
 import { useControlledState } from '../utils/hooks';
 
+const noop = () => {};
+
 /**
  * A float supported clamp function for a specific value.
  *

package/src/resizable-box/resize-tooltip/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import classnames from 'classnames';
 import type { Ref, ForwardedRef } from 'react';
 
@@ -30,6 +29,8 @@ type ResizeTooltipProps = React.ComponentProps< typeof Root > & {
 	zIndex?: number;
 };
 
+const noop = () => {};
+
 function ResizeTooltip(
 	{
 		axis,

package/src/resizable-box/resize-tooltip/utils.ts

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -10,6 +5,7 @@ import { useEffect, useRef, useState } from '@wordpress/element';
 import { useResizeObserver } from '@wordpress/compose';
 
 const { clearTimeout, setTimeout } = window;
+const noop = () => {};
 
 export type Axis = 'x' | 'y';
 

package/src/responsive-wrapper/index.js

@@ -15,10 +15,8 @@ function ResponsiveWrapper( {
 	children,
 	isInline = false,
 } ) {
-	const [
-		containerResizeListener,
-		{ width: containerWidth },
-	] = useResizeObserver();
+	const [ containerResizeListener, { width: containerWidth } ] =
+		useResizeObserver();
 	if ( Children.count( children ) !== 1 ) {
 		return null;
 	}

package/src/sandbox/test/index.js

@@ -46,9 +46,8 @@ describe( 'Sandbox', () => {
 
 		const iframe = result.container.querySelector( '.components-sandbox' );
 
-		let sandboxedIframe = iframe.contentWindow.document.body.querySelector(
-			'.mock-iframe'
-		);
+		let sandboxedIframe =
+			iframe.contentWindow.document.body.querySelector( '.mock-iframe' );
 
 		expect( sandboxedIframe.getAttribute( 'src' ) ).toBe(
 			'https://super.embed'
@@ -58,9 +57,8 @@ describe( 'Sandbox', () => {
 			fireEvent.click( result.getByRole( 'button' ) );
 		} );
 
-		sandboxedIframe = iframe.contentWindow.document.body.querySelector(
-			'.mock-iframe'
-		);
+		sandboxedIframe =
+			iframe.contentWindow.document.body.querySelector( '.mock-iframe' );
 
 		expect( sandboxedIframe.getAttribute( 'src' ) ).toBe(
 			'https://another.super.embed'

package/src/select-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, noop } from 'lodash';
+import { isEmpty } from 'lodash';
 import classNames from 'classnames';
 import type { ChangeEvent, FocusEvent, ForwardedRef } from 'react';
 
@@ -21,6 +21,8 @@ import { Select, DownArrowWrapper } from './styles/select-control-styles';
 import type { WordPressComponentProps } from '../ui/context';
 import type { SelectControlProps } from './types';
 
+const noop = () => {};
+
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( SelectControl );
 	const id = `inspector-select-control-${ instanceId }`;

package/src/select-control/stories/index.tsx

@@ -12,7 +12,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import SelectControl from '..';
+import SelectControl from '../';
 
 const meta: ComponentMeta< typeof SelectControl > = {
 	title: 'Components/SelectControl',
@@ -34,9 +34,8 @@ export default meta;
 const SelectControlWithState: ComponentStory< typeof SelectControl > = (
 	args
 ) => {
-	const [ selection, setSelection ] = useState<
-		ComponentProps< typeof SelectControl >[ 'value' ]
-	>();
+	const [ selection, setSelection ] =
+		useState< ComponentProps< typeof SelectControl >[ 'value' ] >();
 
 	return (
 		<SelectControl

package/src/slot-fill/fill.js

@@ -1,8 +1,4 @@
 // @ts-nocheck
-/**
- * External dependencies
- */
-import { isFunction } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -50,7 +46,7 @@ function FillComponent( { name, children, registerFill, unregisterFill } ) {
 	}
 
 	// If a function is passed as a child, provide it with the fillProps.
-	if ( isFunction( children ) ) {
+	if ( typeof children === 'function' ) {
 		children = children( slot.props.fillProps );
 	}
 

package/src/slot-fill/slot.js

@@ -2,7 +2,7 @@
 /**
  * External dependencies
  */
-import { isFunction, isString, map, negate } from 'lodash';
+import { isString, map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -19,6 +19,16 @@ import {
  */
 import SlotFillContext from './context';
 
+/**
+ * Whether the argument is a function.
+ *
+ * @param {*} maybeFunc The argument to check.
+ * @return {boolean} True if the argument is a function, false otherwise.
+ */
+function isFunction( maybeFunc ) {
+	return typeof maybeFunc === 'function';
+}
+
 class SlotComponent extends Component {
 	constructor() {
 		super( ...arguments );
@@ -79,7 +89,7 @@ class SlotComponent extends Component {
 			// In some cases fills are rendered only when some conditions apply.
 			// This ensures that we only use non-empty fills when rendering, i.e.,
 			// it allows us to render wrappers only when the fills are actually present.
-			negate( isEmptyElement )
+			( element ) => ! isEmptyElement( element )
 		);
 
 		return <>{ isFunction( children ) ? children( fills ) : fills }</>;

package/src/snackbar/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -17,6 +16,7 @@ import warning from '@wordpress/warning';
  */
 import { Button } from '../';
 
+const noop = () => {};
 const NOTICE_TIMEOUT = 10000;
 
 /** @typedef {import('@wordpress/element').WPElement} WPElement */

package/src/snackbar/list.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit, noop } from 'lodash';
+import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -19,6 +19,7 @@ import {
 	__unstableAnimatePresence as AnimatePresence,
 } from '../animation';
 
+const noop = () => {};
 const SNACKBAR_VARIANTS = {
 	init: {
 		height: 0,

package/src/tab-panel/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { partial, noop, find } from 'lodash';
+import { partial, find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,6 +16,8 @@ import { useInstanceId } from '@wordpress/compose';
 import { NavigableMenu } from '../navigable-container';
 import Button from '../button';
 
+const noop = () => {};
+
 const TabButton = ( { tabId, onClick, children, selected, ...rest } ) => (
 	<Button
 		role="tab"

package/src/text/hook.js

@@ -89,7 +89,10 @@ export default function useText( props ) {
 			display,
 			fontSize: getFontSize( size ),
 			/* eslint-disable jsdoc/valid-types */
-			fontWeight: /** @type {import('react').CSSProperties['fontWeight']} */ ( weight ),
+			fontWeight:
+				/** @type {import('react').CSSProperties['fontWeight']} */ (
+					weight
+				),
 			/* eslint-enable jsdoc/valid-types */
 			lineHeight,
 			letterSpacing,

package/src/text/utils.js

@@ -102,9 +102,8 @@ export function createHighlighterText( {
 			let highlightClass;
 			if ( typeof highlightClassName === 'object' ) {
 				if ( ! caseSensitive ) {
-					highlightClassName = memoizedLowercaseProps(
-						highlightClassName
-					);
+					highlightClassName =
+						memoizedLowercaseProps( highlightClassName );
 					highlightClass = highlightClassName[ text.toLowerCase() ];
 				} else {
 					highlightClass = highlightClassName[ text ];

package/src/text-control/stories/index.tsx

@@ -51,14 +51,12 @@ const DefaultTemplate: ComponentStory< typeof TextControl > = ( {
 	);
 };
 
-export const Default: ComponentStory<
-	typeof TextControl
-> = DefaultTemplate.bind( {} );
+export const Default: ComponentStory< typeof TextControl > =
+	DefaultTemplate.bind( {} );
 Default.args = {};
 
-export const WithLabelAndHelpText: ComponentStory<
-	typeof TextControl
-> = DefaultTemplate.bind( {} );
+export const WithLabelAndHelpText: ComponentStory< typeof TextControl > =
+	DefaultTemplate.bind( {} );
 WithLabelAndHelpText.args = {
 	...Default.args,
 	label: 'Label Text',

package/src/toggle-control/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { isFunction } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -32,7 +31,7 @@ export default function ToggleControl( {
 	let describedBy, helpLabel;
 	if ( help ) {
 		describedBy = id + '__help';
-		helpLabel = isFunction( help ) ? help( checked ) : help;
+		helpLabel = typeof help === 'function' ? help( checked ) : help;
 	}
 
 	return (

package/src/toggle-control/index.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isFunction } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -16,7 +11,8 @@ const ToggleControl = memo(
 	( { label, checked, help, instanceId, className, onChange, ...props } ) => {
 		const id = `inspector-toggle-control-${ instanceId }`;
 
-		const helpLabel = help && isFunction( help ) ? help( checked ) : help;
+		const helpLabel =
+			help && typeof help === 'function' ? help( checked ) : help;
 
 		return (
 			<SwitchCell

package/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx

@@ -36,10 +36,8 @@ function ToggleGroupControlBackdrop( {
 		}
 
 		const computeDimensions = () => {
-			const {
-				width: offsetWidth,
-				x,
-			} = targetNode.getBoundingClientRect();
+			const { width: offsetWidth, x } =
+				targetNode.getBoundingClientRect();
 
 			const { x: parentX } = containerNode.getBoundingClientRect();
 

package/src/toolbar/index.js

@@ -30,8 +30,7 @@ function Toolbar( { className, label, ...props }, ref ) {
 		deprecated( 'Using Toolbar without label prop', {
 			since: '5.6',
 			alternative: 'ToolbarGroup component',
-			link:
-				'https://developer.wordpress.org/block-editor/components/toolbar/',
+			link: 'https://developer.wordpress.org/block-editor/components/toolbar/',
 		} );
 		return <ToolbarGroup { ...props } className={ className } />;
 	}