@wordpress/components 19.10.0 → 19.13.0

package/src/popover/style.scss

@@ -1,222 +1,41 @@
-$arrow-size: 8px;
-
-/*!rtl:begin:ignore*/
 .components-popover {
-	position: fixed;
 	z-index: z-index(".components-popover");
-	top: 0;
-	left: 0;
-
-	// Hide the popover element until the position has been calculated. The position
-	// cannot be calculated until the popover element is rendered because the
-	// position depends on the size of the popover.
-	opacity: 0;
-
-	&.is-expanded,
-	&[data-x-axis][data-y-axis] {
-		opacity: 1;
-	}
 
 	&.is-expanded {
+		position: fixed;
 		top: 0;
 		left: 0;
 		right: 0;
 		bottom: 0;
 		z-index: z-index(".components-popover") !important;
 	}
-
-	&:not(.is-without-arrow) {
-		margin-left: 2px;
-
-		&::before {
-			border: $arrow-size solid $gray-400;
-		}
-
-		&.is-alternate::before {
-			border-color: $gray-900;
-		}
-
-		&::after {
-			border: $arrow-size solid $white;
-		}
-
-		&::before,
-		&::after {
-			content: "";
-			position: absolute;
-			height: 0;
-			width: 0;
-			line-height: 0;
-		}
-
-		&[data-y-axis="top"] {
-			margin-top: - $arrow-size;
-
-			&::before {
-				bottom: - $arrow-size;
-			}
-
-			&::after {
-				bottom: -6px;
-			}
-
-			&::before,
-			&::after {
-				border-bottom: none;
-				border-left-color: transparent;
-				border-right-color: transparent;
-				border-top-style: solid;
-				margin-left: -10px;
-			}
-		}
-
-		&[data-y-axis="bottom"] {
-			margin-top: $arrow-size;
-
-			&::before {
-				top: -$arrow-size;
-			}
-
-			&::after {
-				top: -6px;
-			}
-
-			&::before,
-			&::after {
-				border-bottom-style: solid;
-				border-left-color: transparent;
-				border-right-color: transparent;
-				border-top: none;
-				margin-left: -10px;
-			}
-		}
-
-		&[data-y-axis="middle"][data-x-axis="left"] {
-			margin-left: -$arrow-size;
-
-			&::before {
-				right: -$arrow-size;
-			}
-
-			&::after {
-				right: -6px;
-			}
-
-			&::before,
-			&::after {
-				border-bottom-color: transparent;
-				border-left-style: solid;
-				border-right: none;
-				border-top-color: transparent;
-			}
-		}
-
-		&[data-y-axis="middle"][data-x-axis="right"] {
-			margin-left: $arrow-size;
-
-			&::before {
-				left: -$arrow-size;
-			}
-
-			&::after {
-				left: -6px;
-			}
-
-			&::before,
-			&::after {
-				border-bottom-color: transparent;
-				border-left: none;
-				border-right-style: solid;
-				border-top-color: transparent;
-			}
-		}
-	}
-
-	&[data-y-axis="top"] {
-		bottom: 100%;
-	}
-
-	&[data-y-axis="bottom"] {
-		top: 100%;
-	}
-
-	&[data-y-axis="middle"] {
-		align-items: center;
-		display: flex;
-	}
-
-	// Add spacing.
-	&.is-from-top {
-		margin-top: $grid-unit-15;
-	}
-
-	&.is-from-bottom {
-		margin-top: -$grid-unit-15;
-	}
-
-	&.is-from-left:not(.is-from-top):not(.is-from-bottom) {
-		margin-left: $grid-unit-15;
-	}
-
-	&.is-from-right:not(.is-from-top):not(.is-from-bottom) {
-		margin-right: $grid-unit-15;
-	}
 }
 
 .components-popover__content {
-	height: 100%;
 	background: $white;
-	border: $border-width solid $gray-400;
+	// Using outline instead of border to avoid impacting
+	// popover computations.
+	outline: $border-width solid $gray-400;
 	box-shadow: $shadow-popover;
 	border-radius: $radius-block-ui;
+	box-sizing: border-box;
+	width: min-content;
 
 	// Alternate treatment for popovers that put them at elevation zero with high contrast.
 	.is-alternate & {
-		border: $border-width solid $gray-900;
+		outline: $border-width solid $gray-900;
 		box-shadow: none;
 	}
 
-	.components-popover & {
-		position: absolute;
-		height: auto;
-		overflow-y: auto;
-	}
-
 	.components-popover.is-expanded & {
 		position: static;
 		height: calc(100% - #{ $panel-header-height });
 		overflow-y: visible;
 		min-width: auto;
 		border: none;
+		outline: none;
 		border-top: $border-width solid $gray-900;
 	}
-
-	.components-popover[data-y-axis="top"] & {
-		bottom: 100%;
-	}
-
-	.components-popover[data-x-axis="center"] & {
-		left: 50%;
-		transform: translateX(-50%);
-	}
-
-	.components-popover[data-x-axis="right"] & {
-		position: absolute;
-		left: 100%;
-	}
-
-	.components-popover:not([data-y-axis="middle"])[data-x-axis="right"] & {
-		margin-left: -($grid-unit-30 + $border-width);
-	}
-
-	.components-popover[data-x-axis="left"] & {
-		position: absolute;
-		right: 100%;
-	}
-
-	.components-popover:not([data-y-axis="middle"])[data-x-axis="left"] & {
-		margin-right: -($grid-unit-30 + $border-width);
-	}
 }
 
 .components-popover__header {
@@ -238,4 +57,15 @@ $arrow-size: 8px;
 .components-popover__close.components-button {
 	z-index: z-index(".components-popover__close");
 }
-/*!rtl:end:ignore*/
+
+.components-popover__arrow {
+	position: absolute;
+	background: $gray-400;
+	width: 8px;
+	height: 8px;
+	transform: rotate(45deg);
+	z-index: -1;
+	.is-alternate & {
+		background: $gray-900;
+	}
+}

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

@@ -3,21 +3,15 @@
 exports[`Popover should pass additional props to portaled element 1`] = `
 <span>
   <div
-    class="components-popover components-animate__appear is-from-top is-from-left is-without-arrow"
-    data-x-axis="right"
-    data-y-axis="bottom"
+    class="components-popover components-animate__appear is-from-left is-from-top"
     role="tooltip"
-    style="top: 0px; left: 0px;"
+    style="position: absolute;"
     tabindex="-1"
   >
     <div
       class="components-popover__content"
     >
-      <div
-        style="position: relative;"
-      >
-        Hello
-      </div>
+      Hello
     </div>
   </div>
 </span>
@@ -26,20 +20,14 @@ exports[`Popover should pass additional props to portaled element 1`] = `
 exports[`Popover should render content 1`] = `
 <span>
   <div
-    class="components-popover components-animate__appear is-from-top is-from-left is-without-arrow"
-    data-x-axis="right"
-    data-y-axis="bottom"
-    style="top: 0px; left: 0px;"
+    class="components-popover components-animate__appear is-from-left is-from-top"
+    style="position: absolute;"
     tabindex="-1"
   >
     <div
       class="components-popover__content"
     >
-      <div
-        style="position: relative;"
-      >
-        Hello
-      </div>
+      Hello
     </div>
   </div>
 </span>

package/src/query-controls/README.md

@@ -179,7 +179,7 @@ A function that receives the new author value. If this is not specified, the aut
 
 #### onCategoryChange
 
-A function that receives the new author value. If this is not specified, the category controls are not included.
+A function that receives the new category value. If this is not specified, the category controls are not included.
 
 -   Type: `Function`
 -   Required: No

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,