@wordpress/components 23.4.0 → 23.6.0

package/src/autocomplete/autocompleter-ui.js

@@ -1,118 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useLayoutEffect, useRef, useEffect } from '@wordpress/element';
-import { useAnchor } from '@wordpress/rich-text';
-
-/**
- * Internal dependencies
- */
-import getDefaultUseItems from './get-default-use-items';
-import Button from '../button';
-import Popover from '../popover';
-
-export function getAutoCompleterUI( autocompleter ) {
-	const useItems = autocompleter.useItems
-		? autocompleter.useItems
-		: getDefaultUseItems( autocompleter );
-
-	function AutocompleterUI( {
-		filterValue,
-		instanceId,
-		listBoxId,
-		className,
-		selectedIndex,
-		onChangeOptions,
-		onSelect,
-		onReset,
-		reset,
-		value,
-		contentRef,
-	} ) {
-		const [ items ] = useItems( filterValue );
-		const popoverAnchor = useAnchor( {
-			editableContentElement: contentRef.current,
-			value,
-		} );
-
-		const popoverRef = useRef();
-
-		useOnClickOutside( popoverRef, reset );
-
-		useLayoutEffect( () => {
-			onChangeOptions( items );
-			// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
-			// See https://github.com/WordPress/gutenberg/pull/41820
-			// eslint-disable-next-line react-hooks/exhaustive-deps
-		}, [ items ] );
-
-		if ( ! items.length > 0 ) {
-			return null;
-		}
-
-		return (
-			<Popover
-				focusOnMount={ false }
-				onClose={ onReset }
-				placement="top-start"
-				className="components-autocomplete__popover"
-				anchor={ popoverAnchor }
-				ref={ popoverRef }
-			>
-				<div
-					id={ listBoxId }
-					role="listbox"
-					className="components-autocomplete__results"
-				>
-					{ items.map( ( option, index ) => (
-						<Button
-							key={ option.key }
-							id={ `components-autocomplete-item-${ instanceId }-${ option.key }` }
-							role="option"
-							aria-selected={ index === selectedIndex }
-							disabled={ option.isDisabled }
-							className={ classnames(
-								'components-autocomplete__result',
-								className,
-								{
-									'is-selected': index === selectedIndex,
-								}
-							) }
-							onClick={ () => onSelect( option ) }
-						>
-							{ option.label }
-						</Button>
-					) ) }
-				</div>
-			</Popover>
-		);
-	}
-
-	return AutocompleterUI;
-}
-
-function useOnClickOutside( ref, handler ) {
-	useEffect( () => {
-		const listener = ( event ) => {
-			// Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element
-			if ( ! ref.current || ref.current.contains( event.target ) ) {
-				return;
-			}
-			handler( event );
-		};
-		document.addEventListener( 'mousedown', listener );
-		document.addEventListener( 'touchstart', listener );
-		return () => {
-			document.removeEventListener( 'mousedown', listener );
-			document.removeEventListener( 'touchstart', listener );
-		};
-		// Disable reason: `ref` is a ref object and should not be included in a
-		// hook's dependency list.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ handler ] );
-}

package/src/dimension-control/index.js

@@ -1,73 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { Icon, SelectControl } from '../';
-import sizesTable, { findSizeBySlug } from './sizes';
-
-export function DimensionControl( props ) {
-	const {
-		label,
-		value,
-		sizes = sizesTable,
-		icon,
-		onChange,
-		className = '',
-	} = props;
-
-	const onChangeSpacingSize = ( val ) => {
-		const theSize = findSizeBySlug( sizes, val );
-
-		if ( ! theSize || value === theSize.slug ) {
-			onChange( undefined );
-		} else if ( typeof onChange === 'function' ) {
-			onChange( theSize.slug );
-		}
-	};
-
-	const formatSizesAsOptions = ( theSizes ) => {
-		const options = theSizes.map( ( { name, slug } ) => ( {
-			label: name,
-			value: slug,
-		} ) );
-
-		return [
-			{
-				label: __( 'Default' ),
-				value: '',
-			},
-		].concat( options );
-	};
-
-	const selectLabel = (
-		<>
-			{ icon && <Icon icon={ icon } /> }
-			{ label }
-		</>
-	);
-
-	return (
-		<SelectControl
-			className={ classnames(
-				className,
-				'block-editor-dimension-control'
-			) }
-			label={ selectLabel }
-			hideLabelFromVision={ false }
-			value={ value }
-			onChange={ onChangeSpacingSize }
-			options={ formatSizesAsOptions( sizes ) }
-		/>
-	);
-}
-
-export default DimensionControl;

package/src/higher-order/with-constrained-tabbing/index.js

@@ -1,22 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createHigherOrderComponent,
-	useConstrainedTabbing,
-} from '@wordpress/compose';
-
-const withConstrainedTabbing = createHigherOrderComponent(
-	( WrappedComponent ) =>
-		function ComponentWithConstrainedTabbing( props ) {
-			const ref = useConstrainedTabbing();
-			return (
-				<div ref={ ref } tabIndex={ -1 }>
-					<WrappedComponent { ...props } />
-				</div>
-			);
-		},
-	'withConstrainedTabbing'
-);
-
-export default withConstrainedTabbing;

package/src/higher-order/with-focus-return/index.js

@@ -1,64 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { createHigherOrderComponent, useFocusReturn } from '@wordpress/compose';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Returns true if the given object is component-like. An object is component-
- * like if it is an instance of wp.element.Component, or is a function.
- *
- * @param {*} object Object to test.
- *
- * @return {boolean} Whether object is component-like.
- */
-function isComponentLike( object ) {
-	return object instanceof Component || typeof object === 'function';
-}
-
-/**
- * Higher Order Component used to be used to wrap disposable elements like
- * sidebars, modals, dropdowns. When mounting the wrapped component, we track a
- * reference to the current active element so we know where to restore focus
- * when the component is unmounted.
- *
- * @param {(WPComponent|Object)} options The component to be enhanced with
- *                                       focus return behavior, or an object
- *                                       describing the component and the
- *                                       focus return characteristics.
- *
- * @return {Function} Higher Order Component with the focus restauration behaviour.
- */
-export default createHigherOrderComponent( ( options ) => {
-	const HoC =
-		( { onFocusReturn } = {} ) =>
-		( WrappedComponent ) => {
-			const WithFocusReturn = ( props ) => {
-				const ref = useFocusReturn( onFocusReturn );
-				return (
-					<div ref={ ref }>
-						<WrappedComponent { ...props } />
-					</div>
-				);
-			};
-
-			return WithFocusReturn;
-		};
-
-	if ( isComponentLike( options ) ) {
-		const WrappedComponent = options;
-		return HoC()( WrappedComponent );
-	}
-
-	return HoC( options );
-}, 'withFocusReturn' );
-
-export const Provider = ( { children } ) => {
-	deprecated( 'wp.components.FocusReturnProvider component', {
-		since: '5.7',
-		hint: 'This provider is not used anymore. You can just remove it from your codebase',
-	} );
-
-	return children;
-};

package/src/higher-order/with-notices/index.js

@@ -1,104 +0,0 @@
-/**
- * External dependencies
- */
-import { v4 as uuid } from 'uuid';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef, useState, useMemo } from '@wordpress/element';
-import { createHigherOrderComponent } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import NoticeList from '../../notice/list';
-
-/**
- * Override the default edit UI to include notices if supported.
- *
- * @param {WPComponent} OriginalComponent Original component.
- *
- * @return {WPComponent} Wrapped component.
- */
-export default createHigherOrderComponent( ( OriginalComponent ) => {
-	function Component( props, ref ) {
-		const [ noticeList, setNoticeList ] = useState( [] );
-
-		const noticeOperations = useMemo( () => {
-			/**
-			 * Function passed down as a prop that adds a new notice.
-			 *
-			 * @param {Object} notice Notice to add.
-			 */
-			const createNotice = ( notice ) => {
-				const noticeToAdd = notice.id
-					? notice
-					: { ...notice, id: uuid() };
-				setNoticeList( ( current ) => [ ...current, noticeToAdd ] );
-			};
-
-			return {
-				createNotice,
-
-				/**
-				 * Function passed as a prop that adds a new error notice.
-				 *
-				 * @param {string} msg Error message of the notice.
-				 */
-				createErrorNotice: ( msg ) => {
-					createNotice( {
-						status: 'error',
-						content: msg,
-					} );
-				},
-
-				/**
-				 * Removes a notice by id.
-				 *
-				 * @param {string} id Id of the notice to remove.
-				 */
-				removeNotice: ( id ) => {
-					setNoticeList( ( current ) =>
-						current.filter( ( notice ) => notice.id !== id )
-					);
-				},
-
-				/**
-				 * Removes all notices
-				 */
-				removeAllNotices: () => {
-					setNoticeList( [] );
-				},
-			};
-		}, [] );
-
-		const propsOut = {
-			...props,
-			noticeList,
-			noticeOperations,
-			noticeUI: noticeList.length > 0 && (
-				<NoticeList
-					className="components-with-notices-ui"
-					notices={ noticeList }
-					onRemove={ noticeOperations.removeNotice }
-				/>
-			),
-		};
-
-		return isForwardRef ? (
-			<OriginalComponent { ...propsOut } ref={ ref } />
-		) : (
-			<OriginalComponent { ...propsOut } />
-		);
-	}
-
-	let isForwardRef;
-	const { render } = OriginalComponent;
-	// Returns a forwardRef if OriginalComponent appears to be a forwardRef.
-	if ( typeof render === 'function' ) {
-		isForwardRef = true;
-		return forwardRef( Component );
-	}
-	return Component;
-} );

package/src/navigation/group/context.js

@@ -1,9 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-export const NavigationGroupContext = createContext( { group: undefined } );
-
-export const useNavigationGroupContext = () =>
-	useContext( NavigationGroupContext );

package/src/navigation/menu/context.js

@@ -1,11 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-export const NavigationMenuContext = createContext( {
-	menu: undefined,
-	search: '',
-} );
-export const useNavigationMenuContext = () =>
-	useContext( NavigationMenuContext );

package/src/navigation/stories/index.js

@@ -1,33 +0,0 @@
-/**
- * Internal dependencies
- */
-import Navigation from '..';
-import NavigationBackButton from '../back-button';
-import NavigationGroup from '../group';
-import NavigationItem from '../item';
-import NavigationMenu from '../menu';
-import { DefaultStory } from './utils/default';
-import { GroupStory } from './utils/group';
-import { ControlledStateStory } from './utils/controlled-state';
-import { SearchStory } from './utils/search';
-import { MoreExamplesStory } from './utils/more-examples';
-import { HideIfEmptyStory } from './utils/hide-if-empty';
-import './style.css';
-
-export default {
-	title: 'Components (Experimental)/Navigation',
-	component: Navigation,
-	subcomponents: {
-		NavigationBackButton,
-		NavigationGroup,
-		NavigationItem,
-		NavigationMenu,
-	},
-};
-
-export const _default = () => <DefaultStory />;
-export const controlledState = () => <ControlledStateStory />;
-export const groups = () => <GroupStory />;
-export const search = () => <SearchStory />;
-export const moreExamples = () => <MoreExamplesStory />;
-export const hideIfEmpty = () => <HideIfEmptyStory />;

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

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

package/src/toolbar/toolbar-context/index.js

@@ -1,10 +0,0 @@
-// @ts-nocheck
-
-/**
- * WordPress dependencies
- */
-import { createContext } from '@wordpress/element';
-
-const ToolbarContext = createContext();
-
-export default ToolbarContext;