@wordpress/components 19.1.5 → 19.2.1-next.33ec3857e2.0

package/src/tools-panel/tools-panel/README.md

@@ -25,6 +25,11 @@ displaying by default through the `isShownByDefault` prop. Determining whether a
 child has a value is done via the `hasValue` function provided through the
 child's props.
 
+Components that are not wrapped within a `ToolsPanelItem` are still rendered
+however they will not be represented within, or controlled by, the `ToolsPanel`
+menu. An example scenario that benefits from this could be displaying
+introduction or help text within a panel.
+
 ## Usage
 
 ```jsx
@@ -51,6 +56,10 @@ export function DimensionPanel( props ) {
 
 	return (
 		<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
+			<p>
+				Select dimensions or spacing related settings from the menu for
+				additional controls.
+			</p>
 			{ ! isPaddingDisabled && (
 				<ToolsPanelItem
 					hasValue={ () => hasPaddingValue( props ) }

package/src/tools-panel/tools-panel/component.tsx

@@ -24,14 +24,11 @@ const ToolsPanel = (
 		panelContext,
 		resetAllItems,
 		toggleItem,
-		className,
+		...toolsPanelProps
 	} = useToolsPanel( props );
 
-	// Props are not directly passed through to avoid exposing Grid props
-	// until agreement has been reached on how ToolsPanel layout should be
-	// handled.
 	return (
-		<Grid columns={ 2 } className={ className } ref={ forwardedRef }>
+		<Grid { ...toolsPanelProps } columns={ 2 } ref={ forwardedRef }>
 			<ToolsPanelContext.Provider value={ panelContext }>
 				<ToolsPanelHeader
 					label={ label }

package/src/tools-panel/tools-panel/hook.ts

@@ -22,12 +22,21 @@ const DEFAULT_COLUMNS = 2;
 const generateMenuItems = ( {
 	panelItems,
 	shouldReset,
+	currentMenuItems,
 }: ToolsPanelMenuItemsConfig ) => {
 	const menuItems: ToolsPanelMenuItems = { default: {}, optional: {} };
 
 	panelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {
 		const group = isShownByDefault ? 'default' : 'optional';
-		menuItems[ group ][ label ] = shouldReset ? false : hasValue();
+
+		// If a menu item for this label already exists, do not overwrite its value.
+		// This can cause default controls that have been flagged as customized to
+		// lose their value.
+		const existingItemValue = currentMenuItems?.[ group ]?.[ label ];
+		const value =
+			existingItemValue !== undefined ? existingItemValue : hasValue();
+
+		menuItems[ group ][ label ] = shouldReset ? false : value;
 	} );
 
 	return menuItems;
@@ -62,7 +71,19 @@ export function useToolsPanel(
 	const [ panelItems, setPanelItems ] = useState< ToolsPanelItem[] >( [] );
 
 	const registerPanelItem = ( item: ToolsPanelItem ) => {
-		setPanelItems( ( items ) => [ ...items, item ] );
+		setPanelItems( ( items ) => {
+			const newItems = [ ...items ];
+			// If an item with this label is already registered, remove it first.
+			// This can happen when an item is moved between the default and optional
+			// groups.
+			const existingIndex = newItems.findIndex(
+				( oldItem ) => oldItem.label === item.label
+			);
+			if ( existingIndex !== -1 ) {
+				newItems.splice( existingIndex, 1 );
+			}
+			return [ ...newItems, item ];
+		} );
 	};
 
 	// Panels need to deregister on unmount to avoid orphans in menu state.
@@ -72,11 +93,16 @@ export function useToolsPanel(
 		// controls, e.g. both panels have a "padding" control, the
 		// deregistration of the first panel doesn't occur until after the
 		// registration of the next.
-		const index = panelItems.findIndex( ( item ) => item.label === label );
-
-		if ( index !== -1 ) {
-			setPanelItems( ( items ) => items.splice( index, 1 ) );
-		}
+		setPanelItems( ( items ) => {
+			const newItems = [ ...items ];
+			const index = newItems.findIndex(
+				( item ) => item.label === label
+			);
+			if ( index !== -1 ) {
+				newItems.splice( index, 1 );
+			}
+			return newItems;
+		} );
 	};
 
 	// Manage and share display state of menu items representing child controls.
@@ -87,27 +113,33 @@ export function useToolsPanel(
 
 	// Setup menuItems state as panel items register themselves.
 	useEffect( () => {
-		const items = generateMenuItems( {
-			panelItems,
-			shouldReset: false,
+		setMenuItems( ( prevState ) => {
+			const items = generateMenuItems( {
+				panelItems,
+				shouldReset: false,
+				currentMenuItems: prevState,
+			} );
+			return items;
 		} );
-		setMenuItems( items );
 	}, [ panelItems ] );
 
 	// Force a menu item to be checked.
 	// This is intended for use with default panel items. They are displayed
 	// separately to optional items and have different display states,
-	//.we need to update that when their value is customized.
+	// we need to update that when their value is customized.
 	const flagItemCustomization = (
 		label: string,
 		group: ToolsPanelMenuItemKey = 'default'
 	) => {
-		setMenuItems( {
-			...menuItems,
-			[ group ]: {
-				...menuItems[ group ],
-				[ label ]: true,
-			},
+		setMenuItems( ( items ) => {
+			const newState = {
+				...items,
+				[ group ]: {
+					...items[ group ],
+					[ label ]: true,
+				},
+			};
+			return newState;
 		} );
 	};
 

package/src/tools-panel/tools-panel-item/hook.ts

@@ -54,7 +54,11 @@ export function useToolsPanelItem(
 			} );
 		}
 
-		return () => deregisterPanelItem( label );
+		return () => {
+			if ( currentPanelId === panelId ) {
+				deregisterPanelItem( label );
+			}
+		};
 	}, [
 		currentPanelId,
 		panelId,

package/src/tools-panel/types.ts

@@ -124,7 +124,10 @@ export type ToolsPanelContext = {
 	hasMenuItems: boolean;
 	registerPanelItem: ( item: ToolsPanelItem ) => void;
 	deregisterPanelItem: ( label: string ) => void;
-	flagItemCustomization: ( label: string ) => void;
+	flagItemCustomization: (
+		label: string,
+		group?: ToolsPanelMenuItemKey
+	) => void;
 	isResetting: boolean;
 	shouldRenderPlaceholderItems: boolean;
 	areAllOptionalControlsHidden: boolean;
@@ -139,4 +142,5 @@ export type ToolsPanelControlsGroupProps = {
 export type ToolsPanelMenuItemsConfig = {
 	panelItems: ToolsPanelItem[];
 	shouldReset: boolean;
+	currentMenuItems?: ToolsPanelMenuItems;
 };

package/src/tooltip/stories/index.js

@@ -18,7 +18,7 @@ export default {
 	title: 'Components/ToolTip',
 	component: Tooltip,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/tree-select/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/TreeSelect',
 	component: TreeSelect,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/truncate/stories/index.js

@@ -12,7 +12,7 @@ export default {
 	component: Truncate,
 	title: 'Components (Experimental)/Truncate',
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

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

@@ -19,7 +19,7 @@ export default {
 	title: 'Components/UnitControl',
 	component: UnitControl,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 
@@ -45,6 +45,7 @@ function Example() {
 			{
 				default: 'default',
 				small: 'small',
+				'__unstable-large': '__unstable-large',
 			},
 			'default'
 		),
@@ -67,6 +68,23 @@ export const _default = () => {
 	return <Example />;
 };
 
+export const WithSingleUnit = ( props ) => {
+	const [ value, setValue ] = useState( '10px' );
+	return (
+		<ControlWrapperView>
+			<UnitControl
+				{ ...props }
+				value={ value }
+				onChange={ ( v ) => setValue( v ) }
+			/>
+		</ControlWrapperView>
+	);
+};
+WithSingleUnit.args = {
+	label: 'Value',
+	units: CSS_UNITS.slice( 0, 1 ),
+};
+
 export function WithCustomUnits() {
 	const [ value, setValue ] = useState( '10km' );
 

package/src/unit-control/styles/unit-control-styles.ts

@@ -18,6 +18,7 @@ type SelectProps = {
 
 type InputProps = {
 	disableUnits?: boolean;
+	size: SelectSize;
 };
 
 export const Root = styled.div`
@@ -25,11 +26,21 @@ export const Root = styled.div`
 	position: relative;
 `;
 
-const paddingStyles = ( { disableUnits }: InputProps ) => {
-	const value = disableUnits ? 3 : 24;
+const paddingStyles = ( { disableUnits, size }: InputProps ) => {
+	const paddings = {
+		default: {
+			paddingRight: 8,
+		},
+		small: {
+			paddingRight: 8,
+		},
+		'__unstable-large': {
+			paddingRight: disableUnits ? 16 : 8,
+		},
+	};
 
 	return css`
-		${ rtl( { paddingRight: value } )() };
+		${ rtl( paddings[ size ] )() };
 	`;
 };
 
@@ -62,49 +73,24 @@ export const ValueInput = styled( NumberControl )`
 	}
 `;
 
-const unitSizeStyles = ( { selectSize }: SelectProps ) => {
-	const sizes = {
-		default: {
-			height: 28,
-			lineHeight: '24px',
-			minHeight: 28,
-			top: 1,
-		},
-		small: {
-			height: 22,
-			lineHeight: '18px',
-			minHeight: 22,
-			top: 1,
-		},
-	};
-
-	return css( sizes[ selectSize ] );
-};
-
-const baseUnitLabelStyles = ( props: SelectProps ) => {
-	return css`
-		appearance: none;
-		background: transparent;
-		border-radius: 2px;
-		border: none;
-		box-sizing: border-box;
-		color: ${ COLORS.darkGray[ 500 ] };
-		display: block;
-		font-size: 8px;
-		line-height: 1;
-		letter-spacing: -0.5px;
-		outline: none;
-		padding: 2px 1px;
-		position: absolute;
-		text-align-last: center;
-		text-transform: uppercase;
-		width: 20px;
-
-		${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
-		${ rtl( { right: 0 } )() }
-		${ unitSizeStyles( props ) }
-	`;
-};
+const baseUnitLabelStyles = css`
+	appearance: none;
+	background: transparent;
+	border-radius: 2px;
+	border: none;
+	box-sizing: border-box;
+	color: ${ COLORS.darkGray[ 500 ] };
+	display: block;
+	font-size: 8px;
+	letter-spacing: -0.5px;
+	outline: none;
+	padding: 2px 1px;
+	text-align-last: center;
+	text-transform: uppercase;
+	width: 20px;
+
+	${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
+`;
 
 export const UnitLabel = styled.div< SelectProps >`
 	&&& {
@@ -119,6 +105,7 @@ export const UnitSelect = styled.select< SelectProps >`
 		${ baseUnitLabelStyles };
 		cursor: pointer;
 		border: 1px solid transparent;
+		height: 100%;
 
 		&:hover {
 			background-color: ${ COLORS.lightGray[ 300 ] };

package/src/unit-control/types.ts

@@ -8,11 +8,14 @@ import type { SyntheticEvent } from 'react';
  * Internal dependencies
  */
 import type { StateReducer } from '../input-control/reducer/state';
-import type { InputChangeCallback } from '../input-control/types';
+import type {
+	InputChangeCallback,
+	Size as InputSize,
+} from '../input-control/types';
 
 export type Value = number | string;
 
-export type SelectSize = 'default' | 'small';
+export type SelectSize = InputSize;
 
 export type WPUnitControlUnit = {
 	/**

package/src/z-stack/README.md

@@ -34,7 +34,7 @@ Reverse the layer ordering. When `true`, the first child has the lowest `z-index
 
 ### `offset`: `number`
 
-The amount of space between each child element. Defaults to `0`.
+The amount of space between each child element. Defaults to `0`. Its value is automatically inverted (i.e. from positive to negative, and viceversa) when switching from LTR to RTL.
 
 ### `children`: `ReactNode`
 

package/src/z-stack/component.tsx

@@ -31,7 +31,7 @@ export interface ZStackProps {
 	 */
 	isReversed?: boolean;
 	/**
-	 * The amount of offset between each child element.
+	 * The amount of offset between each child element. The amount of space between each child element. Defaults to `0`. Its value is automatically inverted (i.e. from positive to negative, and viceversa) when switching from LTR to RTL.
 	 *
 	 * @default 0
 	 */

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

@@ -15,7 +15,7 @@ export default {
 	component: ZStack,
 	title: 'Components (Experimental)/ZStack',
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/z-stack/styles.ts

@@ -4,6 +4,11 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
+/**
+ * Internal dependencies
+ */
+import { rtl } from '../utils';
+
 export const ZStackView = styled.div`
 	display: flex;
 	position: relative;
@@ -16,8 +21,8 @@ export const ZStackChildView = styled.div< {
 } >`
 	${ ( { isLayered, offsetAmount } ) =>
 		isLayered
-			? css( { marginLeft: offsetAmount } )
-			: css( { right: offsetAmount * -1 } ) }
+			? css( rtl( { marginLeft: offsetAmount } )() )
+			: css( rtl( { right: offsetAmount * -1 } )() ) }
 
 	${ ( { isLayered } ) =>
 		isLayered ? positionAbsolute : positionRelative }

package/tsconfig.json

@@ -28,6 +28,7 @@
 		"src/base-field/**/*",
 		"src/button/**/*",
 		"src/card/**/*",
+		"src/confirm-dialog/**/*",
 		"src/dashicon/**/*",
 		"src/disabled/**/*",
 		"src/divider/**/*",
@@ -41,11 +42,13 @@
 		"src/grid/**/*",
 		"src/h-stack/**/*",
 		"src/heading/**/*",
-		"src/item-group/**/*",
-		"src/input-control/**/*",
+		"src/higher-order/with-focus-outside/**/*",
 		"src/icon/**/*",
+		"src/input-control/**/*",
+		"src/item-group/**/*",
 		"src/menu-item/**/*",
 		"src/menu-group/**/*",
+		"src/modal/**/*",
 		"src/navigable-container/**/*",
 		"src/navigator/**/*",
 		"src/number-control/**/*",
@@ -57,6 +60,7 @@
 		"src/select-control/**/*",
 		"src/shortcut/**/*",
 		"src/slot-fill/**/*",
+		"src/style-provider/**/*",
 		"src/spacer/**/*",
 		"src/spinner/**/*",
 		"src/surface/**/*",