@wordpress/components 23.1.0 → 23.3.0

package/src/keyboard-shortcuts/index.js

@@ -1,56 +0,0 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useRef, Children } from '@wordpress/element';
-import { useKeyboardShortcut } from '@wordpress/compose';
-
-function KeyboardShortcut( {
-	target,
-	callback,
-	shortcut,
-	bindGlobal,
-	eventName,
-} ) {
-	useKeyboardShortcut( shortcut, callback, {
-		bindGlobal,
-		target,
-		eventName,
-	} );
-
-	return null;
-}
-
-function KeyboardShortcuts( { children, shortcuts, bindGlobal, eventName } ) {
-	const target = useRef();
-
-	const element = map( shortcuts, ( callback, shortcut ) => (
-		<KeyboardShortcut
-			key={ shortcut }
-			shortcut={ shortcut }
-			callback={ callback }
-			bindGlobal={ bindGlobal }
-			eventName={ eventName }
-			target={ target }
-		/>
-	) );
-
-	// Render as non-visual if there are no children pressed. Keyboard
-	// events will be bound to the document instead.
-	if ( ! Children.count( children ) ) {
-		return element;
-	}
-
-	return (
-		<div ref={ target }>
-			{ element }
-			{ children }
-		</div>
-	);
-}
-
-export default KeyboardShortcuts;

package/src/notice/list.js

@@ -1,48 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import Notice from './';
-
-const noop = () => {};
-
-/**
- * Renders a list of notices.
- *
- * @param {Object}   $0           Props passed to the component.
- * @param {Array}    $0.notices   Array of notices to render.
- * @param {Function} $0.onRemove  Function called when a notice should be removed / dismissed.
- * @param {Object}   $0.className Name of the class used by the component.
- * @param {Object}   $0.children  Array of children to be rendered inside the notice list.
- *
- * @return {Object} The rendered notices list.
- */
-function NoticeList( { notices, onRemove = noop, className, children } ) {
-	const removeNotice = ( id ) => () => onRemove( id );
-
-	className = classnames( 'components-notice-list', className );
-
-	return (
-		<div className={ className }>
-			{ children }
-			{ [ ...notices ].reverse().map( ( notice ) => {
-				const { content, ...restNotice } = notice;
-				return (
-					<Notice
-						{ ...restNotice }
-						key={ notice.id }
-						onRemove={ removeNotice( notice.id ) }
-					>
-						{ notice.content }
-					</Notice>
-				);
-			} ) }
-		</div>
-	);
-}
-
-export default NoticeList;

package/src/notice/stories/index.js

@@ -1,74 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, select, text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import Notice from '../';
-
-export default {
-	title: 'Components/Notice',
-	component: Notice,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const status = select(
-		'Status',
-		{
-			Warning: 'warning',
-			Success: 'success',
-			Error: 'error',
-			Info: 'info',
-		},
-		'info'
-	);
-	const isDismissible = boolean( 'Is Dismissible', true );
-
-	return (
-		<Notice status={ status } isDismissible={ isDismissible }>
-			<p>This is a notice.</p>
-		</Notice>
-	);
-};
-
-export const withCustomSpokenMessage = () => {
-	const status = select(
-		'Status',
-		{
-			Warning: 'warning',
-			Success: 'success',
-			Error: 'error',
-			Info: 'info',
-		},
-		'info'
-	);
-	const isDismissible = boolean( 'Is Dismissible', true );
-	const politeness = select(
-		'Politeness',
-		{
-			Assertive: 'assertive',
-			Polite: 'polite',
-		},
-		'assertive'
-	);
-	const spokenMessage = text(
-		'Spoken Message',
-		'This is a notice with a custom spoken message'
-	);
-
-	return (
-		<Notice
-			status={ status }
-			isDismissible={ isDismissible }
-			politeness={ politeness }
-			spokenMessage={ spokenMessage }
-		>
-			<p>This is a notice.</p>
-		</Notice>
-	);
-};

package/src/query-controls/author-select.js

@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import { buildTermsTree } from './terms';
-import TreeSelect from '../tree-select';
-
-export default function AuthorSelect( {
-	label,
-	noOptionLabel,
-	authorList,
-	selectedAuthorId,
-	onChange,
-} ) {
-	if ( ! authorList ) return null;
-	const termsTree = buildTermsTree( authorList );
-	return (
-		<TreeSelect
-			{ ...{ label, noOptionLabel, onChange } }
-			tree={ termsTree }
-			selectedId={ selectedAuthorId }
-		/>
-	);
-}

package/src/query-controls/category-select.js

@@ -1,31 +0,0 @@
-/**
- * Internal dependencies
- */
-import { buildTermsTree } from './terms';
-import TreeSelect from '../tree-select';
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-
-export default function CategorySelect( {
-	label,
-	noOptionLabel,
-	categoriesList,
-	selectedCategoryId,
-	onChange,
-	...props
-} ) {
-	const termsTree = useMemo( () => {
-		return buildTermsTree( categoriesList );
-	}, [ categoriesList ] );
-
-	return (
-		<TreeSelect
-			{ ...{ label, noOptionLabel, onChange } }
-			tree={ termsTree }
-			selectedId={ selectedCategoryId }
-			{ ...props }
-		/>
-	);
-}

package/src/query-controls/index.js

@@ -1,121 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import CategorySelect from './category-select';
-import { RangeControl, SelectControl, FormTokenField } from '../';
-import AuthorSelect from './author-select';
-
-const DEFAULT_MIN_ITEMS = 1;
-const DEFAULT_MAX_ITEMS = 100;
-const MAX_CATEGORIES_SUGGESTIONS = 20;
-
-export default function QueryControls( {
-	authorList,
-	selectedAuthorId,
-	categoriesList,
-	selectedCategoryId,
-	categorySuggestions,
-	selectedCategories,
-	numberOfItems,
-	order,
-	orderBy,
-	maxItems = DEFAULT_MAX_ITEMS,
-	minItems = DEFAULT_MIN_ITEMS,
-	onCategoryChange,
-	onAuthorChange,
-	onNumberOfItemsChange,
-	onOrderChange,
-	onOrderByChange,
-} ) {
-	return [
-		onOrderChange && onOrderByChange && (
-			<SelectControl
-				key="query-controls-order-select"
-				label={ __( 'Order by' ) }
-				value={ `${ orderBy }/${ order }` }
-				options={ [
-					{
-						label: __( 'Newest to oldest' ),
-						value: 'date/desc',
-					},
-					{
-						label: __( 'Oldest to newest' ),
-						value: 'date/asc',
-					},
-					{
-						/* translators: label for ordering posts by title in ascending order */
-						label: __( 'A → Z' ),
-						value: 'title/asc',
-					},
-					{
-						/* translators: label for ordering posts by title in descending order */
-						label: __( 'Z → A' ),
-						value: 'title/desc',
-					},
-				] }
-				onChange={ ( value ) => {
-					const [ newOrderBy, newOrder ] = value.split( '/' );
-					if ( newOrder !== order ) {
-						onOrderChange( newOrder );
-					}
-					if ( newOrderBy !== orderBy ) {
-						onOrderByChange( newOrderBy );
-					}
-				} }
-			/>
-		),
-		categoriesList && onCategoryChange && (
-			<CategorySelect
-				key="query-controls-category-select"
-				categoriesList={ categoriesList }
-				label={ __( 'Category' ) }
-				noOptionLabel={ __( 'All' ) }
-				selectedCategoryId={ selectedCategoryId }
-				onChange={ onCategoryChange }
-			/>
-		),
-		categorySuggestions && onCategoryChange && (
-			<FormTokenField
-				key="query-controls-categories-select"
-				label={ __( 'Categories' ) }
-				value={
-					selectedCategories &&
-					selectedCategories.map( ( item ) => ( {
-						id: item.id,
-						value: item.name || item.value,
-					} ) )
-				}
-				suggestions={ Object.keys( categorySuggestions ) }
-				onChange={ onCategoryChange }
-				maxSuggestions={ MAX_CATEGORIES_SUGGESTIONS }
-			/>
-		),
-		onAuthorChange && (
-			<AuthorSelect
-				key="query-controls-author-select"
-				authorList={ authorList }
-				label={ __( 'Author' ) }
-				noOptionLabel={ __( 'All' ) }
-				selectedAuthorId={ selectedAuthorId }
-				onChange={ onAuthorChange }
-			/>
-		),
-		onNumberOfItemsChange && (
-			<RangeControl
-				__nextHasNoMarginBottom
-				key="query-controls-range-control"
-				label={ __( 'Number of items' ) }
-				value={ numberOfItems }
-				onChange={ onNumberOfItemsChange }
-				min={ minItems }
-				max={ maxItems }
-				required
-			/>
-		),
-	];
-}

package/src/query-controls/terms.js

@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import { groupBy } from 'lodash';
-
-/**
- * Returns terms in a tree form.
- *
- * @param {Array} flatTerms Array of terms in flat format.
- *
- * @return {Array} Array of terms in tree format.
- */
-export function buildTermsTree( flatTerms ) {
-	const flatTermsWithParentAndChildren = flatTerms.map( ( term ) => {
-		return {
-			children: [],
-			parent: null,
-			...term,
-		};
-	} );
-
-	const termsByParent = groupBy( flatTermsWithParentAndChildren, 'parent' );
-	if ( termsByParent.null && termsByParent.null.length ) {
-		return flatTermsWithParentAndChildren;
-	}
-	const fillWithChildren = ( terms ) => {
-		return terms.map( ( term ) => {
-			const children = termsByParent[ term.id ];
-			return {
-				...term,
-				children:
-					children && children.length
-						? fillWithChildren( children )
-						: [],
-			};
-		} );
-	};
-
-	return fillWithChildren( termsByParent[ '0' ] || [] );
-}

package/src/resizable-box/stories/index.js

@@ -1,97 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, number, text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import ResizableBox from '../';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-export default {
-	title: 'Components/ResizableBox',
-	component: ResizableBox,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const Example = ( props ) => {
-	const [ attributes, setAttributes ] = useState( {
-		height: 200,
-		width: 400,
-	} );
-	const { height, width } = attributes;
-	const { children, ...restProps } = props;
-
-	return (
-		<div style={ { margin: 30 } }>
-			<ResizableBox
-				{ ...restProps }
-				size={ {
-					height,
-					width,
-				} }
-				onResizeStop={ ( event, direction, elt, delta ) => {
-					setAttributes( {
-						height: parseInt( height + delta.height, 10 ),
-						width: parseInt( width + delta.width, 10 ),
-					} );
-				} }
-			>
-				{ children }
-			</ResizableBox>
-		</div>
-	);
-};
-
-export const _default = () => {
-	const content = text( 'Example: Content', 'Resize' );
-	const showHandle = boolean( 'showHandle', true );
-	const minHeight = number( 'minHeight', 50 );
-	const minWidth = number( 'minWidth', 50 );
-	const enable = {
-		top: boolean( 'enable.top', false ),
-		right: boolean( 'enable.right', true ),
-		bottom: boolean( 'enable.bottom', true ),
-		left: boolean( 'enable.left', false ),
-		topRight: boolean( 'enable.topRight', false ),
-		bottomRight: boolean( 'enable.bottomRight', true ),
-		bottomLeft: boolean( 'enable.bottomLeft', false ),
-		topLeft: boolean( 'enable.topLeft', false ),
-	};
-	const __experimentalShowTooltip = boolean(
-		'__experimentalShowTooltip',
-		false
-	);
-
-	const props = {
-		enable,
-		minHeight,
-		minWidth,
-		showHandle,
-		__experimentalShowTooltip,
-	};
-
-	return (
-		<Example { ...props }>
-			<div
-				style={ {
-					background: '#eee',
-					display: 'flex',
-					height: '100%',
-					width: '100%',
-					alignItems: 'center',
-					justifyContent: 'center',
-				} }
-			>
-				<span>{ content }</span>
-			</div>
-		</Example>
-	);
-};

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

@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import { text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { wordpress } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { Toolbar } from '../../';
-import ToolbarButton from '../';
-
-export default {
-	title: 'Components/ToolbarButton',
-	component: ToolbarButton,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const label = text( 'Label', 'This is an example label.' );
-
-	return (
-		<Toolbar label="Example Toolbar">
-			<ToolbarButton icon={ wordpress } label={ label } />
-		</Toolbar>
-	);
-};

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

@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { formatBold, formatItalic, link } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { ToolbarButton, ToolbarGroup } from '../../';
-
-export default { title: 'Components/ToolbarGroup', component: ToolbarGroup };
-
-export const _default = () => {
-	return (
-		<ToolbarGroup>
-			<ToolbarButton icon={ formatBold } title="Bold" isActive />
-			<ToolbarButton icon={ formatItalic } title="Italic" />
-			<ToolbarButton icon={ link } title="Link" />
-		</ToolbarGroup>
-	);
-};
-
-export const withControlsProp = () => {
-	return (
-		<ToolbarGroup
-			controls={ [
-				{ icon: formatBold, title: 'Bold', isActive: true },
-				{ icon: formatItalic, title: 'Italic' },
-				{ icon: link, title: 'Link' },
-			] }
-		/>
-	);
-};