@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

package/src/slot-fill/stories/index.story.js

@@ -1,89 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { Slot, Fill, Provider as SlotFillProvider } from '../';
-
-export default {
-	title: 'Components/SlotFill',
-	component: Slot,
-	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-	subcomponents: { Fill, SlotFillProvider },
-	parameters: {
-		controls: { expanded: true },
-		docs: { canvas: { sourceState: 'shown' } },
-	},
-};
-
-export const _default = () => {
-	return (
-		<SlotFillProvider>
-			<h2>Profile</h2>
-			<p>
-				Name: <Slot bubblesVirtually as="span" name="name" />
-			</p>
-			<p>
-				Age: <Slot bubblesVirtually as="span" name="age" />
-			</p>
-			<Fill name="name">Grace</Fill>
-			<Fill name="age">33</Fill>
-		</SlotFillProvider>
-	);
-};
-
-export const WithFillProps = () => {
-	return (
-		<SlotFillProvider>
-			<h2>Profile</h2>
-			<p>
-				Name:{ ' ' }
-				<Slot
-					bubblesVirtually
-					as="span"
-					name="name"
-					fillProps={ { name: 'Grace' } }
-				/>
-			</p>
-			<p>
-				Age:{ ' ' }
-				<Slot
-					bubblesVirtually
-					as="span"
-					name="age"
-					fillProps={ { age: 33 } }
-				/>
-			</p>
-			<Fill name="name">{ ( fillProps ) => fillProps.name }</Fill>
-			<Fill name="age">{ ( fillProps ) => fillProps.age }</Fill>
-		</SlotFillProvider>
-	);
-};
-
-export const WithContext = () => {
-	const Context = createContext();
-	const ContextFill = ( { name } ) => {
-		const value = useContext( Context );
-		return <Fill name={ name }>{ value }</Fill>;
-	};
-	return (
-		<SlotFillProvider>
-			<h2>Profile</h2>
-			<p>
-				Name: <Slot bubblesVirtually as="span" name="name" />
-			</p>
-			<p>
-				Age: <Slot bubblesVirtually as="span" name="age" />
-			</p>
-			<Context.Provider value="Grace">
-				<ContextFill name="name" />
-			</Context.Provider>
-			<Context.Provider value={ 33 }>
-				<ContextFill name="age" />
-			</Context.Provider>
-		</SlotFillProvider>
-	);
-};

package/src/text/stories/index.story.js

@@ -1,53 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Text } from '..';
-
-export default {
-	component: Text,
-	title: 'Components (Experimental)/Text',
-};
-
-export const _default = () => {
-	return <Text>Hello</Text>;
-};
-
-export const Truncate = () => {
-	return (
-		<Text numberOfLines={ 2 } truncate>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
-			facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt.
-			Duis semper dui id augue malesuada, ut feugiat nisi aliquam.
-			Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla
-			facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel.
-			In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis
-			arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque
-			eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada
-			ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat
-			risus. Vivamus iaculis dui aliquet ante ultricies feugiat.
-			Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-			posuere cubilia curae; Vivamus nec pretium velit, sit amet
-			consectetur ante. Praesent porttitor ex eget fermentum mattis.
-		</Text>
-	);
-};
-
-export const Highlight = () => {
-	return (
-		<Text highlightWords={ [ 'con' ] }>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
-			facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt.
-			Duis semper dui id augue malesuada, ut feugiat nisi aliquam.
-			Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla
-			facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel.
-			In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis
-			arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque
-			eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada
-			ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat
-			risus. Vivamus iaculis dui aliquet ante ultricies feugiat.
-			Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-			posuere cubilia curae; Vivamus nec pretium velit, sit amet
-			consectetur ante. Praesent porttitor ex eget fermentum mattis.
-		</Text>
-	);
-};

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

@@ -1,84 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useEffect, memo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import type { ToggleGroupControlBackdropProps } from '../types';
-import { BackdropView } from './styles';
-
-function ToggleGroupControlBackdrop( {
-	containerRef,
-	containerWidth,
-	isAdaptiveWidth,
-	state,
-}: ToggleGroupControlBackdropProps ) {
-	const [ left, setLeft ] = useState( 0 );
-	const [ width, setWidth ] = useState( 0 );
-	const [ canAnimate, setCanAnimate ] = useState( false );
-	const [ renderBackdrop, setRenderBackdrop ] = useState( false );
-
-	useEffect( () => {
-		const containerNode = containerRef?.current;
-		if ( ! containerNode ) return;
-
-		/**
-		 * Workaround for Reakit
-		 */
-		const targetNode = containerNode.querySelector(
-			`[data-value="${ state }"]`
-		);
-		setRenderBackdrop( !! targetNode );
-		if ( ! targetNode ) {
-			return;
-		}
-
-		const computeDimensions = () => {
-			const { width: offsetWidth, x } =
-				targetNode.getBoundingClientRect();
-
-			const { x: parentX } = containerNode.getBoundingClientRect();
-
-			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;
-		if ( ! canAnimate ) {
-			animationRequestId = window.requestAnimationFrame( () => {
-				setCanAnimate( true );
-			} );
-		}
-		return () => {
-			window.clearTimeout( dimensionsRequestId );
-			window.cancelAnimationFrame( animationRequestId );
-		};
-	}, [ canAnimate, containerRef, containerWidth, state, isAdaptiveWidth ] );
-
-	if ( ! renderBackdrop ) {
-		return null;
-	}
-
-	return (
-		<BackdropView
-			role="presentation"
-			style={ {
-				transform: `translateX(${ left }px)`,
-				transition: canAnimate ? undefined : 'none',
-				width,
-			} }
-		/>
-	);
-}
-
-export default memo( ToggleGroupControlBackdrop );

package/src/toolbar/toolbar-group/toolbar-group-container.js

@@ -1,8 +0,0 @@
-// @ts-nocheck
-
-const ToolbarGroupContainer = ( { className, children, ...props } ) => (
-	<div className={ className } { ...props }>
-		{ children }
-	</div>
-);
-export default ToolbarGroupContainer;

package/src/tooltip/index.js

@@ -1,293 +0,0 @@
-// @ts-nocheck
-
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import {
-	Children,
-	cloneElement,
-	concatChildren,
-	useEffect,
-	useState,
-} from '@wordpress/element';
-import { useDebounce, useMergeRefs } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import Popover from '../popover';
-import Shortcut from '../shortcut';
-
-/**
- * Time over children to wait before showing tooltip
- *
- * @type {number}
- */
-export const TOOLTIP_DELAY = 700;
-
-const eventCatcher = <div className="event-catcher" />;
-
-const getDisabledElement = ( {
-	eventHandlers,
-	child,
-	childrenWithPopover,
-	mergedRefs,
-} ) => {
-	return cloneElement(
-		<span className="disabled-element-wrapper">
-			{ cloneElement( eventCatcher, eventHandlers ) }
-			{ cloneElement( child, {
-				children: childrenWithPopover,
-				ref: mergedRefs,
-			} ) }
-		</span>,
-		{ ...eventHandlers }
-	);
-};
-
-const getRegularElement = ( {
-	child,
-	eventHandlers,
-	childrenWithPopover,
-	mergedRefs,
-} ) => {
-	return cloneElement( child, {
-		...eventHandlers,
-		children: childrenWithPopover,
-		ref: mergedRefs,
-	} );
-};
-
-const addPopoverToGrandchildren = ( {
-	anchor,
-	grandchildren,
-	isOver,
-	offset,
-	position,
-	shortcut,
-	text,
-	className,
-	...props
-} ) =>
-	concatChildren(
-		grandchildren,
-		isOver && (
-			<Popover
-				focusOnMount={ false }
-				position={ position }
-				className={ classNames( 'components-tooltip', className ) }
-				aria-hidden="true"
-				animate={ false }
-				offset={ offset }
-				anchor={ anchor }
-				shift
-				{ ...props }
-			>
-				{ text }
-				<Shortcut
-					className="components-tooltip__shortcut"
-					shortcut={ shortcut }
-				/>
-			</Popover>
-		)
-	);
-
-const emitToChild = ( children, eventName, event ) => {
-	if ( Children.count( children ) !== 1 ) {
-		return;
-	}
-
-	const child = Children.only( children );
-
-	// If the underlying element is disabled, do not emit the event.
-	if ( child.props.disabled ) {
-		return;
-	}
-
-	if ( typeof child.props[ eventName ] === 'function' ) {
-		child.props[ eventName ]( event );
-	}
-};
-
-function Tooltip( props ) {
-	const {
-		children,
-		position = 'bottom middle',
-		text,
-		shortcut,
-		delay = TOOLTIP_DELAY,
-		...popoverProps
-	} = props;
-	/**
-	 * Whether a mouse is currently pressed, used in determining whether
-	 * to handle a focus event as displaying the tooltip immediately.
-	 *
-	 * @type {boolean}
-	 */
-	const [ isMouseDown, setIsMouseDown ] = useState( false );
-	const [ isOver, setIsOver ] = useState( false );
-	const delayedSetIsOver = useDebounce( setIsOver, delay );
-	// Using internal state (instead of a ref) for the popover anchor to make sure
-	// that the component re-renders when the anchor updates.
-	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
-
-	// Create a reference to the Tooltip's child, to be passed to the Popover
-	// so that the Tooltip can be correctly positioned. Also, merge with the
-	// existing ref for the first child, so that its ref is preserved.
-	const existingChildRef = Children.toArray( children )[ 0 ]?.ref;
-	const mergedChildRefs = useMergeRefs( [
-		setPopoverAnchor,
-		existingChildRef,
-	] );
-
-	const createMouseDown = ( event ) => {
-		// In firefox, the mouse down event is also fired when the select
-		// list is chosen.
-		// Cancel further processing because re-rendering of child components
-		// causes onChange to be triggered with the old value.
-		// See https://github.com/WordPress/gutenberg/pull/42483
-		if ( event.target.tagName === 'OPTION' ) {
-			return;
-		}
-
-		// Preserve original child callback behavior.
-		emitToChild( children, 'onMouseDown', event );
-
-		// On mouse down, the next `mouseup` should revert the value of the
-		// instance property and remove its own event handler. The bind is
-		// made on the document since the `mouseup` might not occur within
-		// the bounds of the element.
-		document.addEventListener( 'mouseup', cancelIsMouseDown );
-		setIsMouseDown( true );
-	};
-
-	const createMouseUp = ( event ) => {
-		// In firefox, the mouse up event is also fired when the select
-		// list is chosen.
-		// Cancel further processing because re-rendering of child components
-		// causes onChange to be triggered with the old value.
-		// See https://github.com/WordPress/gutenberg/pull/42483
-		if ( event.target.tagName === 'OPTION' ) {
-			return;
-		}
-
-		emitToChild( children, 'onMouseUp', event );
-		document.removeEventListener( 'mouseup', cancelIsMouseDown );
-		setIsMouseDown( false );
-	};
-
-	const createMouseEvent = ( type ) => {
-		if ( type === 'mouseUp' ) return createMouseUp;
-		if ( type === 'mouseDown' ) return createMouseDown;
-	};
-
-	/**
-	 * Prebound `isInMouseDown` handler, created as a constant reference to
-	 * assure ability to remove in component unmount.
-	 *
-	 * @type {Function}
-	 */
-	const cancelIsMouseDown = createMouseEvent( 'mouseUp' );
-
-	const createToggleIsOver = ( eventName, isDelayed ) => {
-		return ( event ) => {
-			// Preserve original child callback behavior.
-			emitToChild( children, eventName, event );
-
-			// Mouse events behave unreliably in React for disabled elements,
-			// firing on mouseenter but not mouseleave.  Further, the default
-			// behavior for disabled elements in some browsers is to ignore
-			// mouse events. Don't bother trying to handle them.
-			//
-			// See: https://github.com/facebook/react/issues/4251
-			if ( event.currentTarget.disabled ) {
-				return;
-			}
-
-			// A focus event will occur as a result of a mouse click, but it
-			// should be disambiguated between interacting with the button and
-			// using an explicit focus shift as a cue to display the tooltip.
-			if ( 'focus' === event.type && isMouseDown ) {
-				return;
-			}
-
-			// Needed in case unsetting is over while delayed set pending, i.e.
-			// quickly blur/mouseleave before delayedSetIsOver is called.
-			delayedSetIsOver.cancel();
-
-			const _isOver = [ 'focus', 'mouseenter' ].includes( event.type );
-			if ( _isOver === isOver ) {
-				return;
-			}
-
-			if ( isDelayed ) {
-				delayedSetIsOver( _isOver );
-			} else {
-				setIsOver( _isOver );
-			}
-		};
-	};
-	const clearOnUnmount = () => {
-		delayedSetIsOver.cancel();
-		document.removeEventListener( 'mouseup', cancelIsMouseDown );
-	};
-
-	// Ignore reason: updating the deps array here could cause unexpected changes in behavior.
-	// Deferring until a more detailed investigation/refactor can be performed.
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	useEffect( () => clearOnUnmount, [] );
-
-	if ( Children.count( children ) !== 1 ) {
-		if ( 'development' === process.env.NODE_ENV ) {
-			// eslint-disable-next-line no-console
-			console.error(
-				'Tooltip should be called with only a single child element.'
-			);
-		}
-
-		return children;
-	}
-
-	const eventHandlers = {
-		onMouseEnter: createToggleIsOver( 'onMouseEnter', true ),
-		onMouseLeave: createToggleIsOver( 'onMouseLeave' ),
-		onClick: createToggleIsOver( 'onClick' ),
-		onFocus: createToggleIsOver( 'onFocus' ),
-		onBlur: createToggleIsOver( 'onBlur' ),
-		onMouseDown: createMouseEvent( 'mouseDown' ),
-	};
-
-	const child = Children.only( children );
-	const { children: grandchildren, disabled } = child.props;
-	const getElementWithPopover = disabled
-		? getDisabledElement
-		: getRegularElement;
-
-	const popoverData = {
-		anchor: popoverAnchor,
-		isOver,
-		offset: 4,
-		position,
-		shortcut,
-		text,
-	};
-	const childrenWithPopover = addPopoverToGrandchildren( {
-		grandchildren,
-		...popoverData,
-		...popoverProps,
-	} );
-
-	return getElementWithPopover( {
-		child,
-		eventHandlers,
-		childrenWithPopover,
-		mergedRefs: mergedChildRefs,
-	} );
-}
-
-export default Tooltip;

package/src/tooltip/stories/index.story.js

@@ -1,85 +0,0 @@
-/**
- * Internal dependencies
- */
-import Tooltip from '../';
-
-export default {
-	title: 'Components/ToolTip',
-	component: Tooltip,
-	argTypes: {
-		delay: { control: 'number' },
-		position: {
-			control: {
-				type: 'select',
-				options: [
-					'top left',
-					'top center',
-					'top right',
-					'bottom left',
-					'bottom center',
-					'bottom right',
-				],
-			},
-		},
-		text: { control: 'text' },
-	},
-	parameters: {
-		docs: { canvas: { sourceState: 'shown' } },
-	},
-};
-
-const Template = ( args ) => {
-	return <Tooltip { ...args } />;
-};
-
-export const Default = Template.bind( {} );
-Default.args = {
-	text: 'More information',
-	children: (
-		<div
-			style={ {
-				margin: '50px auto',
-				width: '200px',
-				padding: '20px',
-				textAlign: 'center',
-				border: '1px solid #ccc',
-			} }
-		>
-			Hover for more information
-		</div>
-	),
-};
-
-export const SmallTarget = Template.bind( {} );
-SmallTarget.args = {
-	...Default.args,
-	children: (
-		<div
-			style={ {
-				margin: '50px auto',
-				width: 'min-content',
-				padding: '4px',
-				textAlign: 'center',
-				border: '1px solid #ccc',
-			} }
-		>
-			Small target
-		</div>
-	),
-};
-
-export const DisabledChild = Template.bind( {} );
-DisabledChild.args = {
-	...Default.args,
-	children: (
-		<button
-			disabled
-			onClick={ () =>
-				// eslint-disable-next-line no-alert
-				window.alert( 'This alert should not be triggered' )
-			}
-		>
-			Hover me, but I am disabled
-		</button>
-	),
-};