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

package/src/tip/stories/index.js

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

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

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

package/src/toggle-group-control/stories/index.js

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

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

@@ -12,7 +12,7 @@ import useResizeAware from 'react-resize-aware';
  */
 import { __ } from '@wordpress/i18n';
 import { useRef, useMemo } from '@wordpress/element';
-import { useMergeRefs, useInstanceId, usePrevious } from '@wordpress/compose';
+import { useMergeRefs, useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -59,15 +59,10 @@ function ToggleGroupControl(
 		baseId,
 		state: value,
 	} );
-	const previousValue = usePrevious( value );
 
 	// Propagate radio.state change
 	useUpdateEffect( () => {
-		// Avoid calling onChange if radio state changed
-		// from incoming value.
-		if ( previousValue !== radio.state ) {
-			onChange( radio.state );
-		}
+		onChange( radio.state );
 	}, [ radio.state ] );
 
 	// Sync incoming value with radio.state

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

@@ -35,36 +35,21 @@ function ToggleGroupControlBackdrop( {
 			return;
 		}
 
-		const computeDimensions = () => {
-			const {
-				width: offsetWidth,
-				x,
-			} = targetNode.getBoundingClientRect();
+		const { x: parentX } = containerNode.getBoundingClientRect();
+		const { width: offsetWidth, x } = targetNode.getBoundingClientRect();
+		const borderWidth = 1;
+		const offsetLeft = x - parentX - borderWidth;
 
-			const { x: parentX } = containerNode.getBoundingClientRect();
+		setLeft( offsetLeft );
+		setWidth( offsetWidth );
 
-			const borderWidth = 1;
-			const offsetLeft = x - parentX - borderWidth;
-
-			setLeft( offsetLeft );
-			setWidth( offsetWidth );
-		};
-		// Fix to make the component appear as expected inside popovers.
-		// If the targetNode width is 0 it means the element was not yet rendered we should allow
-		// some time for the render to happen.
-		// requestAnimationFrame instead of setTimeout with a small time does not seems to work.
-		const dimensionsRequestId = window.setTimeout( computeDimensions, 100 );
-
-		let animationRequestId: number;
+		let requestId: number;
 		if ( ! canAnimate ) {
-			animationRequestId = window.requestAnimationFrame( () => {
+			requestId = window.requestAnimationFrame( () => {
 				setCanAnimate( true );
 			} );
 		}
-		return () => {
-			window.clearTimeout( dimensionsRequestId );
-			window.cancelAnimationFrame( animationRequestId );
-		};
+		return () => window.cancelAnimationFrame( requestId );
 	}, [ canAnimate, containerRef, containerWidth, state, isAdaptiveWidth ] );
 
 	if ( ! renderBackdrop ) {

package/src/toolbar-button/stories/index.js

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

package/src/tools-panel/stories/index.js

@@ -85,56 +85,6 @@ export const _default = () => {
 	);
 };
 
-export const WithNonToolsPanelItems = () => {
-	const [ height, setHeight ] = useState();
-	const [ width, setWidth ] = useState();
-
-	const resetAll = () => {
-		setHeight( undefined );
-		setWidth( undefined );
-	};
-
-	return (
-		<PanelWrapperView>
-			<Panel>
-				<ToolsPanel
-					label="ToolsPanel (with non-menu items)"
-					resetAll={ resetAll }
-				>
-					<IntroText>
-						This text illustrates not all items must be wrapped in a
-						ToolsPanelItem and represented in the panel menu.
-					</IntroText>
-					<SingleColumnItem
-						hasValue={ () => !! width }
-						label="Width"
-						onDeselect={ () => setWidth( undefined ) }
-						isShownByDefault={ true }
-					>
-						<UnitControl
-							label="Width"
-							value={ width }
-							onChange={ ( next ) => setWidth( next ) }
-						/>
-					</SingleColumnItem>
-					<SingleColumnItem
-						hasValue={ () => !! height }
-						label="Height"
-						onDeselect={ () => setHeight( undefined ) }
-						isShownByDefault={ true }
-					>
-						<UnitControl
-							label="Height"
-							value={ height }
-							onChange={ ( next ) => setHeight( next ) }
-						/>
-					</SingleColumnItem>
-				</ToolsPanel>
-			</Panel>
-		</PanelWrapperView>
-	);
-};
-
 export const WithOptionalItemsPlusIcon = () => {
 	const [ height, setHeight ] = useState();
 	const [ width, setWidth ] = useState();
@@ -462,7 +412,3 @@ const PanelWrapperView = styled.div`
 const SingleColumnItem = styled( ToolsPanelItem )`
 	grid-column: span 1;
 `;
-
-const IntroText = styled.div`
-	grid-column: span 2;
-`;

package/src/tools-panel/styles.ts

@@ -8,11 +8,8 @@ import { css } from '@emotion/react';
  */
 import {
 	StyledField as BaseControlField,
-	StyledHelp as BaseControlHelp,
-	StyledLabel as BaseControlLabel,
 	Wrapper as BaseControlWrapper,
 } from '../base-control/styles/base-control-styles';
-import { LabelWrapper } from '../input-control/styles/input-control-styles';
 import { COLORS, CONFIG } from '../utils';
 import { space } from '../ui/utils/space';
 
@@ -72,7 +69,6 @@ export const ToolsPanelHeader = css`
 	 */
 	.components-dropdown-menu {
 		margin: ${ space( -1 ) } 0;
-		line-height: 0;
 	}
 	&&&& .components-dropdown-menu__toggle {
 		padding: 0;
@@ -107,46 +103,10 @@ export const ToolsPanelItem = css`
 	&& ${ BaseControlWrapper } {
 		margin-bottom: 0;
 
-		/**
-		 * To maintain proper spacing within a base control, the field's bottom
-		 * margin should only be removed when there is no help text included and
-		 * it is therefore the last-child.
-		 */
-		${ BaseControlField }:last-child {
+		${ BaseControlField } {
 			margin-bottom: 0;
 		}
 	}
-
-	${ BaseControlHelp } {
-		margin-bottom: 0;
-	}
-
-	/**
-	 * Standardize InputControl and BaseControl labels with other labels when
-	 * inside ToolsPanel.
-	 *
-	 * This is a temporary fix until the different control components have their
-	 * labels normalized.
-	 */
-	&& ${ LabelWrapper } {
-		label {
-			margin-bottom: ${ space( 2 ) };
-			padding-bottom: 0;
-			line-height: 1.4em;
-		}
-	}
-
-	/**
-	 * The targeting of .components-custom-select-control__label here is a
-	 * temporary measure only.
-	 *
-	 * It should be replaced once CustomSelectControl component has been
-	 * refactored and can be targeted via component interpolation.
-	 */
-	.components-custom-select-control__label,
-	${ BaseControlLabel } {
-		line-height: 1.4em;
-	}
 `;
 
 export const ToolsPanelItemPlaceholder = css`

package/src/tools-panel/test/index.js

@@ -11,6 +11,7 @@ import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
 
 const { Fill: ToolsPanelItems, Slot } = createSlotFill( 'ToolsPanelSlot' );
 const resetAll = jest.fn();
+const noop = () => undefined;
 
 // Default props for the tools panel.
 const defaultProps = {
@@ -86,6 +87,23 @@ const GroupedItems = ( {
 	);
 };
 
+// This context object is used to help simulate different scenarios in which
+// `ToolsPanelItem` registration or deregistration requires testing.
+const panelContext = {
+	panelId: '1234',
+	menuItems: {
+		default: {},
+		optional: { [ altControlProps.label ]: true },
+	},
+	hasMenuItems: false,
+	isResetting: false,
+	shouldRenderPlaceholderItems: false,
+	registerPanelItem: jest.fn(),
+	deregisterPanelItem: jest.fn(),
+	flagItemCustomization: noop,
+	areAllOptionalControlsHidden: true,
+};
+
 // Renders a tools panel including panel items that have been grouped within
 // a custom component.
 const renderGroupedItemsInPanel = () => {
@@ -499,6 +517,10 @@ describe( 'ToolsPanel', () => {
 	} );
 
 	describe( 'registration of panel items', () => {
+		beforeEach( () => {
+			jest.clearAllMocks();
+		} );
+
 		it( 'should register and deregister items when panelId changes', () => {
 			// This test simulates switching block selection, which causes the
 			// `ToolsPanel` to rerender with a new panelId, necessitating the
@@ -509,23 +531,7 @@ describe( 'ToolsPanel', () => {
 			// themselves, while those for the old panelId deregister.
 			//
 			// See: https://github.com/WordPress/gutenberg/pull/36588
-
-			const noop = () => undefined;
-			const context = {
-				panelId: '1234',
-				menuItems: {
-					default: {},
-					optional: { [ altControlProps.label ]: true },
-				},
-				hasMenuItems: false,
-				isResetting: false,
-				shouldRenderPlaceholderItems: false,
-				registerPanelItem: jest.fn(),
-				deregisterPanelItem: jest.fn(),
-				flagItemCustomization: noop,
-				areAllOptionalControlsHidden: true,
-			};
-
+			const context = { ...panelContext };
 			const TestPanel = () => (
 				<ToolsPanelContext.Provider value={ context }>
 					<ToolsPanelItem { ...altControlProps } panelId="1234">
@@ -581,6 +587,67 @@ describe( 'ToolsPanel', () => {
 			// deregisterPanelItem has still only been called once.
 			expect( context.deregisterPanelItem ).toHaveBeenCalledTimes( 1 );
 		} );
+
+		it( 'should register items when ToolsPanel panelId is null', () => {
+			// This test simulates when a panel spans multiple block selections.
+			// Multi-selection means a panel can't have a single id to match
+			// against the item's. Instead the panel gets an id of `null` and
+			// individual items should still render themselves in this case.
+			//
+			// See: https://github.com/WordPress/gutenberg/pull/37216
+			const context = { ...panelContext, panelId: null };
+			const TestPanel = () => (
+				<ToolsPanelContext.Provider value={ context }>
+					<ToolsPanelItem { ...altControlProps } panelId="1234">
+						<div>Item</div>
+					</ToolsPanelItem>
+				</ToolsPanelContext.Provider>
+			);
+
+			// On the initial render of the panel, the ToolsPanelItem should
+			// be registered.
+			const { rerender, unmount } = render( <TestPanel /> );
+
+			expect( context.registerPanelItem ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					label: altControlProps.label,
+					panelId: '1234',
+				} )
+			);
+			expect( context.deregisterPanelItem ).not.toHaveBeenCalled();
+
+			// Simulate a further block selection being added to the
+			// multi-selection. The panelId will remain `null` in this case.
+			rerender( <TestPanel /> );
+			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 1 );
+			expect( context.deregisterPanelItem ).not.toHaveBeenCalled();
+
+			// Simulate a change in panel back to single block selection for
+			// which the item matches panelId.
+			context.panelId = '1234';
+			rerender( <TestPanel /> );
+			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 1 );
+			expect( context.deregisterPanelItem ).not.toHaveBeenCalled();
+
+			// Simulate another multi-selection where the panelId is `null`.
+			// Item should re-register itself after it deregistered as the
+			// multi-selection occurred.
+			context.panelId = null;
+			rerender( <TestPanel /> );
+			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 2 );
+			expect( context.deregisterPanelItem ).toHaveBeenCalledTimes( 1 );
+
+			// Simulate a change in panel e.g. back to a single block selection
+			// Where the item's panelId is not a match.
+			context.panelId = '4321';
+			rerender( <TestPanel /> );
+
+			// As the item no longer matches the panelId it should not have
+			// registered again but instead deregistered.
+			unmount();
+			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 2 );
+			expect( context.deregisterPanelItem ).toHaveBeenCalledTimes( 2 );
+		} );
 	} );
 
 	describe( 'callbacks on menu item selection', () => {
@@ -775,8 +842,6 @@ describe( 'ToolsPanel', () => {
 			// This test simulates this issue by rendering an item within a
 			// contrived `ToolsPanelContext` to reflect the changes the panel
 			// item needs to protect against.
-
-			const noop = () => undefined;
 			const context = {
 				panelId: '1234',
 				menuItems: {
@@ -821,6 +886,59 @@ describe( 'ToolsPanel', () => {
 
 			expect( altControlProps.onDeselect ).not.toHaveBeenCalled();
 		} );
+
+		it( 'should not contain orphaned menu items when panelId changes', async () => {
+			// As fills and the panel can update independently this aims to
+			// test that no orphaned items appear registered in the panel menu.
+			//
+			// See: https://github.com/WordPress/gutenberg/pull/34085
+			const TestSlotFillPanel = ( { panelId } ) => (
+				<SlotFillProvider>
+					<ToolsPanelItems>
+						<ToolsPanelItem { ...altControlProps } panelId="1234">
+							<div>Item 1</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanelItems>
+						<ToolsPanelItem { ...controlProps } panelId="9999">
+							<div>Item 2</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanel { ...defaultProps } panelId={ panelId }>
+						<Slot />
+					</ToolsPanel>
+				</SlotFillProvider>
+			);
+
+			const { rerender } = render( <TestSlotFillPanel panelId="1234" /> );
+			await openDropdownMenu();
+
+			// Only the item matching the panelId should have been registered
+			// and appear in the panel menu.
+			let altMenuItem = screen.getByRole( 'menuitemcheckbox', {
+				name: 'Show Alt',
+			} );
+			let exampleMenuItem = screen.queryByRole( 'menuitemcheckbox', {
+				name: 'Hide and reset Example',
+			} );
+
+			expect( altMenuItem ).toBeInTheDocument();
+			expect( exampleMenuItem ).not.toBeInTheDocument();
+
+			// Re-render the panel with different panelID simulating a block
+			// selection change.
+			rerender( <TestSlotFillPanel panelId="9999" /> );
+
+			altMenuItem = screen.queryByRole( 'menuitemcheckbox', {
+				name: 'Show Alt',
+			} );
+			exampleMenuItem = screen.getByRole( 'menuitemcheckbox', {
+				name: 'Hide and reset Example',
+			} );
+
+			expect( altMenuItem ).not.toBeInTheDocument();
+			expect( exampleMenuItem ).toBeInTheDocument();
+		} );
 	} );
 
 	describe( 'panel header icon toggle', () => {

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

@@ -25,11 +25,6 @@ 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
@@ -56,10 +51,6 @@ 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 ) }
@@ -93,8 +84,9 @@ panel's dropdown menu.
 ### `panelId`: `string`
 
 If a `panelId` is set, it is passed through the `ToolsPanelContext` and used
-to restrict panel items. Only items with a matching `panelId` will be able
-to register themselves with this panel.
+to restrict panel items. When a `panelId` is set, items can only register
+themselves if the `panelId` is explicitly `null` or the item's `panelId` matches
+exactly.
 
 - Required: No
 

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

@@ -24,11 +24,14 @@ const ToolsPanel = (
 		panelContext,
 		resetAllItems,
 		toggleItem,
-		...toolsPanelProps
+		className,
 	} = 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 { ...toolsPanelProps } columns={ 2 } ref={ forwardedRef }>
+		<Grid columns={ 2 } className={ className } ref={ forwardedRef }>
 			<ToolsPanelContext.Provider value={ panelContext }>
 				<ToolsPanelHeader
 					label={ label }

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

@@ -40,11 +40,15 @@ export function useToolsPanelItem(
 
 	const hasValueCallback = useCallback( hasValue, [ panelId ] );
 	const resetAllFilterCallback = useCallback( resetAllFilter, [ panelId ] );
+	const previousPanelId = usePrevious( currentPanelId );
+
+	const hasMatchingPanel =
+		currentPanelId === panelId || currentPanelId === null;
 
 	// Registering the panel item allows the panel to include it in its
 	// automatically generated menu and determine its initial checked status.
 	useEffect( () => {
-		if ( currentPanelId === panelId ) {
+		if ( hasMatchingPanel && previousPanelId !== null ) {
 			registerPanelItem( {
 				hasValue: hasValueCallback,
 				isShownByDefault,
@@ -55,16 +59,21 @@ export function useToolsPanelItem(
 		}
 
 		return () => {
-			if ( currentPanelId === panelId ) {
+			if (
+				( previousPanelId === null && !! currentPanelId ) ||
+				currentPanelId === panelId
+			) {
 				deregisterPanelItem( label );
 			}
 		};
 	}, [
 		currentPanelId,
-		panelId,
+		hasMatchingPanel,
 		isShownByDefault,
 		label,
 		hasValueCallback,
+		panelId,
+		previousPanelId,
 		resetAllFilterCallback,
 	] );
 
@@ -88,7 +97,7 @@ export function useToolsPanelItem(
 	// Determine if the panel item's corresponding menu is being toggled and
 	// trigger appropriate callback if it is.
 	useEffect( () => {
-		if ( isResetting || currentPanelId !== panelId ) {
+		if ( isResetting || ! hasMatchingPanel ) {
 			return;
 		}
 
@@ -100,11 +109,10 @@ export function useToolsPanelItem(
 			onDeselect?.();
 		}
 	}, [
-		currentPanelId,
+		hasMatchingPanel,
 		isMenuItemChecked,
 		isResetting,
 		isValueSet,
-		panelId,
 		wasMenuItemChecked,
 	] );
 

package/src/tooltip/stories/index.js

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

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

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

package/src/truncate/stories/index.js

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

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

@@ -19,7 +19,7 @@ export default {
 	title: 'Components/UnitControl',
 	component: UnitControl,
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 
@@ -45,7 +45,6 @@ function Example() {
 			{
 				default: 'default',
 				small: 'small',
-				'__unstable-large': '__unstable-large',
 			},
 			'default'
 		),
@@ -68,23 +67,6 @@ 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' );