@wordpress/components 18.0.0 → 19.0.3

package/src/navigator/navigator-provider/component.tsx

@@ -3,11 +3,12 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
+import { css } from '@emotion/react';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -17,6 +18,7 @@ import {
 	useContextSystem,
 	WordPressComponentProps,
 } from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
 import { View } from '../../view';
 import { NavigatorContext } from '../context';
 import type { NavigatorProviderProps, NavigatorPath } from '../types';
@@ -25,17 +27,26 @@ function NavigatorProvider(
 	props: WordPressComponentProps< NavigatorProviderProps, 'div' >,
 	forwardedRef: Ref< any >
 ) {
-	const { initialPath, children, ...otherProps } = useContextSystem(
-		props,
-		'NavigatorProvider'
-	);
+	const {
+		initialPath,
+		children,
+		className,
+		...otherProps
+	} = useContextSystem( props, 'NavigatorProvider' );
 
 	const [ path, setPath ] = useState< NavigatorPath >( {
 		path: initialPath,
 	} );
 
+	const cx = useCx();
+	const classes = useMemo(
+		// Prevents horizontal overflow while animating screen transitions
+		() => cx( css( { overflowX: 'hidden' } ), className ),
+		[ className ]
+	);
+
 	return (
-		<View ref={ forwardedRef } { ...otherProps }>
+		<View ref={ forwardedRef } className={ classes } { ...otherProps }>
 			<NavigatorContext.Provider value={ [ path, setPath ] }>
 				{ children }
 			</NavigatorContext.Provider>

package/src/navigator/navigator-screen/component.tsx

@@ -5,11 +5,12 @@
 import type { Ref } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { motion, MotionProps } from 'framer-motion';
+import { css } from '@emotion/react';
 
 /**
  * WordPress dependencies
  */
-import { useContext, useEffect, useState } from '@wordpress/element';
+import { useContext, useEffect, useState, useMemo } from '@wordpress/element';
 import { useReducedMotion, useFocusOnMount } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
 
@@ -21,6 +22,7 @@ import {
 	useContextSystem,
 	WordPressComponentProps,
 } from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
 import { View } from '../../view';
 import { NavigatorContext } from '../context';
 import type { NavigatorScreenProps } from '../types';
@@ -38,7 +40,7 @@ type Props = Omit<
 >;
 
 function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
-	const { children, path, ...otherProps } = useContextSystem(
+	const { children, className, path, ...otherProps } = useContextSystem(
 		props,
 		'NavigatorScreen'
 	);
@@ -48,6 +50,21 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 	const isMatch = currentPath.path === path;
 	const ref = useFocusOnMount();
 
+	const cx = useCx();
+	const classes = useMemo(
+		() =>
+			cx(
+				css( {
+					// Ensures horizontal overflow is visually accessible
+					overflowX: 'auto',
+					// In case the root has a height, it should not be exceeded
+					maxHeight: '100%',
+				} ),
+				className
+			),
+		[ className ]
+	);
+
 	// This flag is used to only apply the focus on mount when the actual path changes.
 	// It avoids the focus to happen on the first render.
 	const [ hasPathChanged, setHasPathChanged ] = useState( false );
@@ -61,7 +78,7 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 
 	if ( prefersReducedMotion ) {
 		return (
-			<View ref={ forwardedRef } { ...otherProps }>
+			<View ref={ forwardedRef } className={ classes } { ...otherProps }>
 				{ children }
 			</View>
 		);
@@ -107,6 +124,7 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 	return (
 		<motion.div
 			ref={ hasPathChanged ? ref : undefined }
+			className={ classes }
 			{ ...otherProps }
 			{ ...animatedProps }
 		>

package/src/navigator/stories/index.js

@@ -1,7 +1,16 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
 /**
  * Internal dependencies
  */
 import Button from '../../button';
+import { Card, CardBody, CardFooter, CardHeader } from '../../card';
+import { HStack } from '../../h-stack';
+import { Flyout } from '../../flyout';
+import { useCx } from '../../utils/hooks/use-cx';
 import { NavigatorProvider, NavigatorScreen, useNavigator } from '../';
 
 export default {
@@ -13,30 +22,167 @@ function NavigatorButton( { path, isBack = false, ...props } ) {
 	const navigator = useNavigator();
 	return (
 		<Button
+			variant="secondary"
 			onClick={ () => navigator.push( path, { isBack } ) }
 			{ ...props }
 		/>
 	);
 }
 
-const MyNavigation = () => (
-	<NavigatorProvider initialPath="/">
-		<NavigatorScreen path="/">
-			<p>This is the home screen.</p>
-			<NavigatorButton isPrimary path="/child">
-				Navigate to child screen.
-			</NavigatorButton>
-		</NavigatorScreen>
-
-		<NavigatorScreen path="/child">
-			<p>This is the child screen.</p>
-			<NavigatorButton isPrimary path="/" isBack>
-				Go back
-			</NavigatorButton>
-		</NavigatorScreen>
-	</NavigatorProvider>
-);
+const MyNavigation = () => {
+	const cx = useCx();
+	return (
+		<NavigatorProvider
+			initialPath="/"
+			className={ cx( css( `height: 100vh; max-height: 450px;` ) ) }
+		>
+			<NavigatorScreen path="/">
+				<Card>
+					<CardBody>
+						<p>This is the home screen.</p>
+
+						<HStack justify="flex-start" wrap>
+							<NavigatorButton path="/child">
+								Navigate to child screen.
+							</NavigatorButton>
+
+							<NavigatorButton path="/overflow-child">
+								Navigate to screen with horizontal overflow.
+							</NavigatorButton>
+
+							<NavigatorButton path="/stickies">
+								Navigate to screen with sticky content.
+							</NavigatorButton>
+
+							<Flyout
+								trigger={
+									<Button variant="primary">
+										Open test dialog
+									</Button>
+								}
+								placement="bottom-start"
+							>
+								<CardHeader>Go</CardHeader>
+								<CardBody>Stuff</CardBody>
+							</Flyout>
+						</HStack>
+					</CardBody>
+				</Card>
+			</NavigatorScreen>
+
+			<NavigatorScreen path="/child">
+				<Card>
+					<CardBody>
+						<p>This is the child screen.</p>
+						<NavigatorButton path="/" isBack>
+							Go back
+						</NavigatorButton>
+					</CardBody>
+				</Card>
+			</NavigatorScreen>
+
+			<NavigatorScreen path="/overflow-child">
+				<Card>
+					<CardBody>
+						<NavigatorButton path="/" isBack>
+							Go back
+						</NavigatorButton>
+						<div
+							className={ cx(
+								css( `
+									display: inline-block;
+									background: papayawhip;
+								` )
+							) }
+						>
+							<span
+								className={ cx(
+									css( `
+										color: palevioletred;
+										white-space: nowrap;
+										font-size: 42vw;
+									` )
+								) }
+							>
+								¯\_(ツ)_/¯
+							</span>
+						</div>
+					</CardBody>
+				</Card>
+			</NavigatorScreen>
+
+			<NavigatorScreen path="/stickies">
+				<Card>
+					<Sticky as={ CardHeader } z="2">
+						<NavigatorButton path="/" isBack>
+							Go back
+						</NavigatorButton>
+					</Sticky>
+					<CardBody>
+						<Sticky top="69px" colors="papayawhip/peachpuff">
+							<h2>A wild sticky element appears</h2>
+						</Sticky>
+						<MetaphorIpsum quantity={ 3 } />
+					</CardBody>
+					<CardBody>
+						<Sticky top="69px" colors="azure/paleturquoise">
+							<h2>Another wild sticky element appears</h2>
+						</Sticky>
+						<MetaphorIpsum quantity={ 3 } />
+					</CardBody>
+					<Sticky as={ CardFooter } colors="mistyrose/pink">
+						<Button variant="primary">Primary noop</Button>
+					</Sticky>
+				</Card>
+			</NavigatorScreen>
+		</NavigatorProvider>
+	);
+};
 
 export const _default = () => {
 	return <MyNavigation />;
 };
+
+function Sticky( {
+	as: Tag = 'div',
+	bottom = 0,
+	colors = 'whitesmoke/lightgrey',
+	top = 0,
+	z: zIndex = 1,
+	...props
+} ) {
+	const cx = useCx();
+	const [ bgColor, dotColor ] = colors.split( '/' );
+	const className = cx(
+		css( {
+			top,
+			bottom,
+			zIndex,
+			display: 'flex',
+			position: 'sticky',
+			background: `radial-gradient(${ dotColor } 1px, ${ bgColor } 2px) 50%/1em 1em`,
+		} ),
+		props.className
+	);
+	const propsOut = { ...props, className };
+	return <Tag { ...propsOut } />;
+}
+
+function MetaphorIpsum( { quantity } ) {
+	const cx = useCx();
+	const list = [
+		'A loopy clarinet’s year comes with it the thought that the fenny step-son is an ophthalmologist. The literature would have us believe that a glabrate country is not but a rhythm. A beech is a rub from the right perspective. In ancient times few can name an unglossed walrus that isn’t an unspilt trial.',
+		'Authors often misinterpret the afterthought as a roseless mother-in-law, when in actuality it feels more like an uncapped thunderstorm. In recent years, some posit the tarry bottle to be less than acerb. They were lost without the unkissed timbale that composed their customer. A donna is a springtime breath.',
+		'It’s an undeniable fact, really; their museum was, in this moment, a snotty beef. The swordfishes could be said to resemble prowessed lasagnas. However, the rainier authority comes from a cureless soup. Unfortunately, that is wrong; on the contrary, the cover is a powder.',
+	];
+	quantity = Math.min( list.length, quantity );
+	return (
+		<>
+			{ list.slice( 0, quantity ).map( ( text, key ) => (
+				<p className={ cx( css( `max-width: 20em;` ) ) } key={ key }>
+					{ text }
+				</p>
+			) ) }
+		</>
+	);
+}

package/src/notice/stories/index.js

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

package/src/number-control/README.md

@@ -81,6 +81,22 @@ The position of the label (`top`, `side`, `bottom`, or `edge`).
 -   Type: `String`
 -   Required: No
 
+### max
+
+The maximum `value` allowed.
+
+-   Type: `Number`
+-   Required: No
+-   Default: `Infinity`
+
+### min
+
+The minimum `value` allowed.
+
+-   Type: `Number`
+-   Required: No
+-   Default: `-Infinity`
+
 ### required
 
 If `true` enforces a valid number within the control's min/max range. If `false` allows an empty string as a valid value.
@@ -99,8 +115,8 @@ Amount to increment by when the `SHIFT` key is held down. This shift value is a
 
 ### step
 
-Amount to increment by when incrementing/decrementing.
+Amount by which the `value` is changed when incrementing/decrementing. It is also a factor in validation as `value` must be a multiple of `step` (offset by `min`, if specified) to be valid. Accepts the special string value `any` that voids the validation constraint and causes stepping actions to increment/decrement by `1`.
 
--   Type: `Number`
+-   Type: `Number | "any"`
 -   Required: No
 -   Default: `1`

package/src/number-control/index.js

@@ -17,7 +17,6 @@ import { Input } from './styles/number-control-styles';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
 import { composeStateReducers } from '../input-control/reducer/reducer';
 import { add, subtract, roundClamp } from '../utils/math';
-import { useJumpStep } from '../utils/hooks';
 import { isValueEmpty } from '../utils/values';
 
 export function NumberControl(
@@ -40,13 +39,15 @@ export function NumberControl(
 	},
 	ref
 ) {
-	const baseValue = roundClamp( 0, min, max, step );
-
-	const jumpStep = useJumpStep( {
-		step,
-		shiftStep,
-		isShiftStepEnabled,
-	} );
+	const isStepAny = step === 'any';
+	const baseStep = isStepAny ? 1 : parseFloat( step );
+	const baseValue = roundClamp( 0, min, max, baseStep );
+	const constrainValue = ( value, stepOverride ) => {
+		// When step is "any" clamp the value, otherwise round and clamp it
+		return isStepAny
+			? Math.min( max, Math.max( min, value ) )
+			: roundClamp( value, min, max, stepOverride ?? baseStep );
+	};
 
 	const autoComplete = typeProp === 'number' ? 'off' : null;
 	const classes = classNames( 'components-number-control', className );
@@ -75,8 +76,8 @@ export function NumberControl(
 			const enableShift = event.shiftKey && isShiftStepEnabled;
 
 			const incrementalValue = enableShift
-				? parseFloat( shiftStep ) * parseFloat( step )
-				: parseFloat( step );
+				? parseFloat( shiftStep ) * baseStep
+				: baseStep;
 			let nextValue = isValueEmpty( currentValue )
 				? baseValue
 				: currentValue;
@@ -93,58 +94,55 @@ export function NumberControl(
 				nextValue = subtract( nextValue, incrementalValue );
 			}
 
-			nextValue = roundClamp( nextValue, min, max, incrementalValue );
-
-			state.value = nextValue;
+			state.value = constrainValue(
+				nextValue,
+				enableShift ? incrementalValue : null
+			);
 		}
 
 		/**
 		 * Handles drag to update events
 		 */
 		if ( type === inputControlActionTypes.DRAG && isDragEnabled ) {
-			const { delta, shiftKey } = payload;
-			const [ x, y ] = delta;
-			const modifier = shiftKey
-				? parseFloat( shiftStep ) * parseFloat( step )
-				: parseFloat( step );
+			const [ x, y ] = payload.delta;
+			const enableShift = payload.shiftKey && isShiftStepEnabled;
+			const modifier = enableShift
+				? parseFloat( shiftStep ) * baseStep
+				: baseStep;
 
 			let directionModifier;
-			let directionBaseValue;
+			let delta;
 
 			switch ( dragDirection ) {
 				case 'n':
-					directionBaseValue = y;
+					delta = y;
 					directionModifier = -1;
 					break;
 
 				case 'e':
-					directionBaseValue = x;
+					delta = x;
 					directionModifier = isRTL() ? -1 : 1;
 					break;
 
 				case 's':
-					directionBaseValue = y;
+					delta = y;
 					directionModifier = 1;
 					break;
 
 				case 'w':
-					directionBaseValue = x;
+					delta = x;
 					directionModifier = isRTL() ? 1 : -1;
 					break;
 			}
 
-			const distance = directionBaseValue * modifier * directionModifier;
-			let nextValue;
+			if ( delta !== 0 ) {
+				delta = Math.ceil( Math.abs( delta ) ) * Math.sign( delta );
+				const distance = delta * modifier * directionModifier;
 
-			if ( distance !== 0 ) {
-				nextValue = roundClamp(
+				state.value = constrainValue(
 					add( currentValue, distance ),
-					min,
-					max,
-					modifier
+					enableShift ? modifier : null
 				);
-
-				state.value = nextValue;
 			}
 		}
 
@@ -159,7 +157,7 @@ export function NumberControl(
 
 			state.value = applyEmptyValue
 				? currentValue
-				: roundClamp( currentValue, min, max, step );
+				: constrainValue( currentValue );
 		}
 
 		return state;
@@ -179,7 +177,7 @@ export function NumberControl(
 			min={ min }
 			ref={ ref }
 			required={ required }
-			step={ jumpStep }
+			step={ step }
 			type={ typeProp }
 			value={ valueProp }
 			__unstableStateReducer={ composeStateReducers(

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

@@ -16,6 +16,9 @@ import NumberControl from '../';
 export default {
 	title: 'Components/NumberControl',
 	component: NumberControl,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 function Example() {
@@ -32,7 +35,7 @@ function Example() {
 		placeholder: text( 'placeholder', 0 ),
 		required: boolean( 'required', false ),
 		shiftStep: number( 'shiftStep', 10 ),
-		step: number( 'step', 1 ),
+		step: text( 'step', 1 ),
 	};
 
 	return (

package/src/number-control/test/index.js

@@ -170,6 +170,16 @@ describe( 'NumberControl', () => {
 			expect( input.value ).toBe( '-4' );
 		} );
 
+		it( 'should increment while preserving the decimal value when `step` is “any”', () => {
+			render( <StatefulNumberControl value={ 866.5309 } step="any" /> );
+
+			const input = getInput();
+			input.focus();
+			fireKeyDown( { keyCode: UP } );
+
+			expect( input.value ).toBe( '867.5309' );
+		} );
+
 		it( 'should increment by shiftStep on key UP + shift press', () => {
 			render( <StatefulNumberControl value={ 5 } shiftStep={ 10 } /> );
 
@@ -180,6 +190,16 @@ describe( 'NumberControl', () => {
 			expect( input.value ).toBe( '20' );
 		} );
 
+		it( 'should increment by shiftStep while preserving the decimal value when `step` is “any”', () => {
+			render( <StatefulNumberControl value={ 857.5309 } step="any" /> );
+
+			const input = getInput();
+			input.focus();
+			fireKeyDown( { keyCode: UP, shiftKey: true } );
+
+			expect( input.value ).toBe( '867.5309' );
+		} );
+
 		it( 'should increment by custom shiftStep on key UP + shift press', () => {
 			render( <StatefulNumberControl value={ 5 } shiftStep={ 100 } /> );
 
@@ -254,6 +274,16 @@ describe( 'NumberControl', () => {
 			expect( input.value ).toBe( '-6' );
 		} );
 
+		it( 'should decrement while preserving the decimal value when `step` is “any”', () => {
+			render( <StatefulNumberControl value={ 868.5309 } step="any" /> );
+
+			const input = getInput();
+			input.focus();
+			fireKeyDown( { keyCode: DOWN } );
+
+			expect( input.value ).toBe( '867.5309' );
+		} );
+
 		it( 'should decrement by shiftStep on key DOWN + shift press', () => {
 			render( <StatefulNumberControl value={ 5 } /> );
 
@@ -264,6 +294,16 @@ describe( 'NumberControl', () => {
 			expect( input.value ).toBe( '0' );
 		} );
 
+		it( 'should decrement by shiftStep while preserving the decimal value when `step` is “any”', () => {
+			render( <StatefulNumberControl value={ 877.5309 } step="any" /> );
+
+			const input = getInput();
+			input.focus();
+			fireKeyDown( { keyCode: DOWN, shiftKey: true } );
+
+			expect( input.value ).toBe( '867.5309' );
+		} );
+
 		it( 'should decrement by custom shiftStep on key DOWN + shift press', () => {
 			render( <StatefulNumberControl value={ 5 } shiftStep={ 100 } /> );
 

package/src/panel/stories/index.js

@@ -15,7 +15,13 @@ import PanelBody from '../body';
  */
 import { wordpress } from '@wordpress/icons';
 
-export default { title: 'Components/Panel', component: Panel };
+export default {
+	title: 'Components/Panel',
+	component: Panel,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 export const _default = () => {
 	const bodyTitle = text( 'Body Title', 'My Block Settings' );

package/src/placeholder/stories/index.js

@@ -9,7 +9,13 @@ import { boolean, text } from '@storybook/addon-knobs';
 import Placeholder from '../';
 import TextControl from '../../text-control';
 
-export default { title: 'Components/Placeholder', component: Placeholder };
+export default {
+	title: 'Components/Placeholder',
+	component: Placeholder,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 export const _default = () => {
 	const icon = text( 'Icon', 'smiley' );

package/src/popover/index.js

@@ -12,6 +12,8 @@ import {
 	useState,
 	useLayoutEffect,
 	forwardRef,
+	createContext,
+	useContext,
 } from '@wordpress/element';
 import { getRectangleFromRange } from '@wordpress/dom';
 import {
@@ -38,6 +40,8 @@ import { getAnimateClassName } from '../animate';
  */
 const SLOT_NAME = 'Popover';
 
+const slotNameContext = createContext();
+
 function computeAnchorRect(
 	anchorRefFallback,
 	anchorRect,
@@ -267,7 +271,8 @@ const Popover = (
 	const containerRef = useRef();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const [ animateOrigin, setAnimateOrigin ] = useState();
-	const slot = useSlot( __unstableSlotName );
+	const slotName = useContext( slotNameContext ) || __unstableSlotName;
+	const slot = useSlot( slotName );
 	const isExpanded = expandOnMobile && isMobileViewport;
 	const [ containerResizeListener, contentSize ] = useResizeObserver();
 	noArrow = isExpanded || noArrow;
@@ -326,9 +331,7 @@ const Popover = (
 
 			let boundaryElement;
 			if ( __unstableBoundaryParent ) {
-				boundaryElement = containerRef.current.closest(
-					'.popover-slot'
-				)?.parentNode;
+				boundaryElement = containerRef.current.parentElement;
 			}
 
 			const usedContentSize = ! contentSize.height
@@ -453,11 +456,11 @@ const Popover = (
 			defaultView.cancelAnimationFrame( rafId );
 
 			if ( anchorDocument && anchorDocument !== ownerDocument ) {
-				anchorDocument.defaultView.removeEventListener(
+				anchorDocument.defaultView?.removeEventListener(
 					'resize',
 					refresh
 				);
-				anchorDocument.defaultView.removeEventListener(
+				anchorDocument.defaultView?.removeEventListener(
 					'scroll',
 					refresh,
 					true
@@ -552,7 +555,7 @@ const Popover = (
 	);
 
 	if ( slot.ref ) {
-		content = <Fill name={ __unstableSlotName }>{ content }</Fill>;
+		content = <Fill name={ slotName }>{ content }</Fill>;
 	}
 
 	if ( anchorRef || anchorRect ) {
@@ -576,5 +579,6 @@ function PopoverSlot( { name = SLOT_NAME }, ref ) {
 }
 
 PopoverContainer.Slot = forwardRef( PopoverSlot );
+PopoverContainer.__unstableSlotNameProvider = slotNameContext.Provider;
 
 export default PopoverContainer;