@wordpress/components 23.2.0 → 23.3.1

package/build-types/radio-context/index.d.ts

@@ -1,6 +0,0 @@
-export default RadioContext;
-declare const RadioContext: import("react").Context<{
-    state: null;
-    setState: () => void;
-}>;
-//# sourceMappingURL=index.d.ts.map

package/build-types/radio-context/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/radio-context/index.js"],"names":[],"mappings":";AAKA;;;GAGI"}

package/src/button/stories/index.js

@@ -1,179 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	formatBold,
-	formatItalic,
-	link,
-	more,
-	wordpress,
-} from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import './style.css';
-import Button from '../';
-
-export default {
-	title: 'Components/Button',
-	component: Button,
-	argTypes: {
-		label: {
-			control: { type: 'text' },
-			description:
-				'Sets the `aria-label` of the component, if none is provided. Sets the Tooltip content if `showTooltip` is provided.',
-		},
-		children: {
-			control: { type: 'text' },
-		},
-		href: {
-			control: { type: 'text' },
-			description: 'If provided, renders `a` instead of `button`.',
-		},
-		icon: {
-			control: { type: 'select' },
-			description:
-				'If provided, renders an `Icon` component inside the button.',
-			options: [ 'wordpress', 'link', 'more' ],
-			mapping: {
-				wordpress,
-				link,
-				more,
-			},
-		},
-		iconSize: {
-			control: { type: 'number' },
-			description: 'If provided with `icon`, sets the icon size.',
-		},
-		iconPosition: {
-			control: { type: 'select' },
-			description:
-				'If provided with `icon`, sets the position of icon relative to the `text`. Available options are `left|right`.',
-			options: [ 'left', 'right' ],
-			table: {
-				defaultValue: { summary: `left` },
-			},
-		},
-		isBusy: {
-			control: 'boolean',
-			description:
-				'Indicates activity while a action is being performed.',
-		},
-		isDestructive: {
-			control: 'boolean',
-			description:
-				'Renders a red text-based button style to indicate destructive behavior.',
-		},
-		isPressed: {
-			control: 'boolean',
-			description: 'Renders a pressed button style.',
-		},
-		isSmall: {
-			control: 'boolean',
-			description: 'Decreases the size of the button.',
-		},
-		disabled: {
-			control: 'boolean',
-			description:
-				'Whether the button is disabled. If `true`, this will force a `button` element to be rendered.',
-		},
-		shortcut: {
-			control: { type: 'text' },
-			description:
-				'If provided with `showTooltip`, appends the Shortcut label to the tooltip content. If an `Object` is provided, it should contain `display` and `ariaLabel` keys.',
-		},
-		showTooltip: {
-			control: 'boolean',
-			description:
-				'If provided, renders a `Tooltip` component for the button.',
-		},
-		tooltipPosition: {
-			control: { type: 'text' },
-			description:
-				'If provided with `showTooltip`, sets the position of the tooltip.',
-		},
-		text: {
-			control: { type: 'text' },
-			description:
-				'If provided, displays the given text inside the button. If the button contains `children` elements, the text is displayed before them.',
-		},
-		target: {
-			control: { type: 'text' },
-			description:
-				'If provided with `href`, sets the `target` attribute to the `a`.',
-		},
-		variant: {
-			control: { type: 'select' },
-			description: "Specifies the button's style.",
-			options: [ 'primary', 'secondary', 'tertiary', 'link' ],
-		},
-		__experimentalIsFocusable: {
-			control: 'boolean',
-			description: 'Makes the button focusable even when disabled',
-		},
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-
-function Template( { children, ...props } ) {
-	return <Button { ...props }>{ children }</Button>;
-}
-
-export const Default = Template.bind( {} );
-Default.args = {
-	children: 'Code is poetry',
-};
-
-export const Primary = Template.bind( {} );
-Primary.args = {
-	...Default.args,
-	variant: 'primary',
-};
-
-export const Secondary = Template.bind( {} );
-Secondary.args = {
-	...Default.args,
-	variant: 'secondary',
-};
-
-export const Tertiary = Template.bind( {} );
-Tertiary.args = {
-	...Default.args,
-	variant: 'tertiary',
-};
-
-export const Link = Template.bind( {} );
-Link.args = {
-	...Default.args,
-	variant: 'link',
-};
-
-export const IsDestructive = Template.bind( {} );
-IsDestructive.args = {
-	...Default.args,
-	isDestructive: true,
-};
-
-export const Icon = Template.bind( {} );
-Icon.args = {
-	label: 'Code is poetry',
-	icon: 'wordpress',
-};
-
-export const groupedIcons = () => {
-	const GroupContainer = ( { children } ) => (
-		<div style={ { display: 'inline-flex' } }>{ children }</div>
-	);
-
-	return (
-		<GroupContainer>
-			<Button icon={ formatBold } label="Bold" />
-			<Button icon={ formatItalic } label="Italic" />
-			<Button icon={ link } label="Link" />
-		</GroupContainer>
-	);
-};

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,46 +0,0 @@
-/**
- * Internal dependencies
- */
-import Notice from '../';
-
-// TODO: Add a story involving NoticeList to help people understand
-// the difference between onDismiss/onRemove.
-
-export default {
-	title: 'Components/Notice',
-	component: Notice,
-	argTypes: {
-		isDismissible: { control: 'boolean' },
-		onDismiss: { control: { type: null } },
-		onRemove: { control: { type: null } },
-		politeness: {
-			control: 'radio',
-			options: [ 'assertive', 'polite' ],
-		},
-		spokenMessage: { control: 'text' },
-		status: {
-			control: 'radio',
-			options: [ 'warning', 'success', 'error', 'info' ],
-		},
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-
-const Template = ( props ) => {
-	return <Notice { ...props } />;
-};
-
-export const Default = Template.bind( {} );
-Default.args = {
-	children: 'This is a notice.',
-};
-
-export const WithCustomSpokenMessage = Template.bind( {} );
-WithCustomSpokenMessage.args = {
-	...Default.args,
-	politeness: 'assertive',
-	spokenMessage: 'This is a notice with a custom spoken message',
-};

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,122 +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
-				__nextHasNoMarginBottom
-				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/toolbar/stories/toolbar-button.js

@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import { text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { wordpress } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { Toolbar, 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/stories/toolbar-group.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' },
-			] }
-		/>
-	);
-};