@wordpress/components 23.3.5 → 23.5.0

package/src/tools-panel/stories/utils/tools-panel-with-item-group-slot.js

@@ -1,246 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-/**
- * WordPress dependencies
- */
-import { useContext, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Button from '../../../button';
-import ColorIndicator from '../../../color-indicator';
-import ColorPalette from '../../../color-palette';
-import Dropdown from '../../../dropdown';
-import Panel from '../../../panel';
-import { FlexItem } from '../../../flex';
-import { HStack } from '../../../h-stack';
-import { Item, ItemGroup } from '../../../item-group';
-import { ToolsPanel, ToolsPanelItem, ToolsPanelContext } from '../..';
-import {
-	createSlotFill,
-	Provider as SlotFillProvider,
-} from '../../../slot-fill';
-import { useCx } from '../../../utils';
-
-// Available border colors.
-const colors = [
-	{ name: 'Gray 0', color: '#f6f7f7' },
-	{ name: 'Gray 5', color: '#dcdcde' },
-	{ name: 'Gray 20', color: '#a7aaad' },
-	{ name: 'Gray 70', color: '#3c434a' },
-	{ name: 'Gray 100', color: '#101517' },
-	{ name: 'Blue 20', color: '#72aee6' },
-	{ name: 'Blue 40', color: '#3582c4' },
-	{ name: 'Blue 70', color: '#0a4b78' },
-	{ name: 'Red 40', color: '#e65054' },
-	{ name: 'Red 70', color: '#8a2424' },
-	{ name: 'Green 10', color: '#68de7c' },
-	{ name: 'Green 40', color: '#00a32a' },
-	{ name: 'Green 60', color: '#007017' },
-	{ name: 'Yellow 10', color: '#f2d675' },
-	{ name: 'Yellow 40', color: '#bd8600' },
-];
-const panelId = 'unique-tools-panel-id';
-
-const { Fill, Slot } = createSlotFill( 'ToolsPanelSlot' );
-
-// This storybook example aims to replicate a virtual bubbling SlotFill use case
-// for the `ToolsPanel` when the Slot itself is an `ItemGroup`.
-
-// In this scenario the `ToolsPanel` has to render item placeholders so fills
-// maintain their order in the DOM. These placeholders in the DOM prevent the
-// normal styling of the `ItemGroup` in particular the border radii on the first
-// and last items. In case consumers of the ItemGroup and ToolsPanel are
-// applying their own styles to these components, the ToolsPanel needs to assist
-// consumers in identifying which of its visible items are first and last.
-
-// This custom fill is required to re-establish the ToolsPanelContext for
-// injected ToolsPanelItem components as they will not have access to the React
-// Context as the Provider is part of the ToolsPanelItems.Slot tree.
-const ToolsPanelItems = ( { children } ) => {
-	return (
-		<Fill>
-			{ ( fillProps ) => (
-				<ToolsPanelContext.Provider value={ fillProps }>
-					{ children }
-				</ToolsPanelContext.Provider>
-			) }
-		</Fill>
-	);
-};
-
-// This fetches the ToolsPanelContext and passes it through `fillProps` so that
-// rendered fills can re-establish the `ToolsPanelContext.Provider`.
-const SlotContainer = ( { Slot: ToolsPanelSlot, ...props } ) => {
-	const toolsPanelContext = useContext( ToolsPanelContext );
-
-	return (
-		<ToolsPanelSlot
-			{ ...props }
-			fillProps={ toolsPanelContext }
-			bubblesVirtually
-		/>
-	);
-};
-
-// This wraps the slot with a `ToolsPanel` mimicking a real-world use case from
-// the block editor.
-ToolsPanelItems.Slot = ( { resetAll, ...props } ) => (
-	<ToolsPanel
-		label="Tools Panel with Item Group"
-		resetAll={ resetAll }
-		panelId={ panelId }
-		hasInnerWrapper={ true }
-		shouldRenderPlaceholderItems={ true }
-		__experimentalFirstVisibleItemClass="first"
-		__experimentalLastVisibleItemClass="last"
-	>
-		<SlotContainer { ...props } Slot={ Slot } />
-	</ToolsPanel>
-);
-
-export const ToolsPanelWithItemGroupSlot = () => {
-	const [ attributes, setAttributes ] = useState( {} );
-	const { text, background, link } = attributes;
-
-	const cx = useCx();
-	const slotWrapperClassName = cx( SlotWrapper );
-	const itemClassName = cx( ToolsPanelItemClass );
-
-	const resetAll = ( resetFilters = [] ) => {
-		let newAttributes = {};
-
-		resetFilters.forEach( ( resetFilter ) => {
-			newAttributes = {
-				...newAttributes,
-				...resetFilter( newAttributes ),
-			};
-		} );
-
-		setAttributes( newAttributes );
-	};
-
-	const updateAttribute = ( name, value ) => {
-		setAttributes( {
-			...attributes,
-			[ name ]: value,
-		} );
-	};
-
-	const ToolsPanelColorDropdown = ( { attribute, label, value } ) => {
-		return (
-			<ToolsPanelItem
-				className={ itemClassName }
-				hasValue={ () => !! value }
-				label={ label }
-				onDeselect={ () => updateAttribute( attribute, undefined ) }
-				resetAllFilter={ () => ( { [ attribute ]: undefined } ) }
-				panelId={ panelId }
-				as={ Item }
-			>
-				<Dropdown
-					renderToggle={ ( { onToggle } ) => (
-						<Button onClick={ onToggle }>
-							<HStack justify="flex-start">
-								<ColorIndicator colorValue={ value } />
-								<FlexItem>{ label }</FlexItem>
-							</HStack>
-						</Button>
-					) }
-					renderContent={ () => (
-						<ColorPalette
-							value={ value }
-							colors={ colors }
-							onChange={ ( newColor ) =>
-								updateAttribute( attribute, newColor )
-							}
-						/>
-					) }
-				/>
-			</ToolsPanelItem>
-		);
-	};
-
-	// ToolsPanelItems are rendered via two different fills to simulate
-	// injection from multiple locations.
-	return (
-		<SlotFillProvider>
-			<PanelWrapperView>
-				<Panel>
-					<ToolsPanelItems.Slot
-						as={ ItemGroup }
-						isBordered
-						isSeparated
-						isRounded={ false }
-						className={ slotWrapperClassName }
-						resetAll={ resetAll }
-					/>
-				</Panel>
-			</PanelWrapperView>
-			<ToolsPanelItems>
-				<ToolsPanelColorDropdown
-					attribute="text"
-					label="Text"
-					value={ text }
-				/>
-				<ToolsPanelColorDropdown
-					attribute="background"
-					label="Background"
-					value={ background }
-				/>
-			</ToolsPanelItems>
-			<ToolsPanelItems>
-				<ToolsPanelColorDropdown
-					attribute="link"
-					label="Link"
-					value={ link }
-				/>
-			</ToolsPanelItems>
-		</SlotFillProvider>
-	);
-};
-
-const PanelWrapperView = styled.div`
-	font-size: 13px;
-
-	.components-dropdown-menu__menu {
-		max-width: 220px;
-	}
-`;
-
-const SlotWrapper = css`
-	&&& {
-		row-gap: 0;
-		border-radius: 20px;
-	}
-
-	> div {
-		grid-column: span 2;
-		border-radius: inherit;
-	}
-`;
-
-const ToolsPanelItemClass = css`
-	padding: 0;
-
-	&&.first {
-		border-top-left-radius: inherit;
-		border-top-right-radius: inherit;
-	}
-
-	&.last {
-		border-bottom-left-radius: inherit;
-		border-bottom-right-radius: inherit;
-		border-bottom-color: transparent;
-	}
-	&& > div,
-	&& > div > button {
-		width: 100%;
-		border-radius: inherit;
-	}
-`;

package/src/tree-grid/cell.js

@@ -1,24 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import TreeGridItem from './item';
-
-export default forwardRef( function TreeGridCell(
-	{ children, withoutGridItem = false, ...props },
-	ref
-) {
-	return (
-		<td { ...props } role="gridcell">
-			{ withoutGridItem ? (
-				children
-			) : (
-				<TreeGridItem ref={ ref }>{ children }</TreeGridItem>
-			) }
-		</td>
-	);
-} );

package/src/tree-grid/item.js

@@ -1,20 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import RovingTabIndexItem from './roving-tab-index-item';
-
-export default forwardRef( function TreeGridItem(
-	{ children, ...props },
-	ref
-) {
-	return (
-		<RovingTabIndexItem ref={ ref } { ...props }>
-			{ children }
-		</RovingTabIndexItem>
-	);
-} );

package/src/tree-grid/roving-tab-index-item.js

@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRef, forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useRovingTabIndexContext } from './roving-tab-index-context';
-
-export default forwardRef( function RovingTabIndexItem(
-	{ children, as: Component, ...props },
-	forwardedRef
-) {
-	const localRef = useRef();
-	const ref = forwardedRef || localRef;
-	const { lastFocusedElement, setLastFocusedElement } =
-		useRovingTabIndexContext();
-	let tabIndex;
-
-	if ( lastFocusedElement ) {
-		tabIndex = lastFocusedElement === ref.current ? 0 : -1;
-	}
-
-	const onFocus = ( event ) => setLastFocusedElement( event.target );
-	const allProps = { ref, tabIndex, onFocus, ...props };
-
-	if ( typeof children === 'function' ) {
-		return children( allProps );
-	}
-
-	return <Component { ...allProps }>{ children }</Component>;
-} );

package/src/tree-grid/row.js

@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-function TreeGridRow(
-	{ children, level, positionInSet, setSize, isExpanded, ...props },
-	ref
-) {
-	return (
-		// Disable reason: Due to an error in the ARIA 1.1 specification, the
-		// aria-posinset and aria-setsize properties are not supported on row
-		// elements. This is being corrected in ARIA 1.2. Consequently, the
-		// linting rule fails when validating this markup.
-		//
-		// eslint-disable-next-line jsx-a11y/role-supports-aria-props
-		<tr
-			{ ...props }
-			ref={ ref }
-			role="row"
-			aria-level={ level }
-			aria-posinset={ positionInSet }
-			aria-setsize={ setSize }
-			aria-expanded={ isExpanded }
-		>
-			{ children }
-		</tr>
-	);
-}
-
-export default forwardRef( TreeGridRow );

package/src/tree-grid/stories/index.js

@@ -1,106 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Fragment } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import TreeGrid, { TreeGridRow, TreeGridCell } from '../';
-import { Button } from '../../';
-
-export default {
-	title: 'Components (Experimental)/TreeGrid',
-	component: TreeGrid,
-};
-
-const groceries = [
-	{
-		name: 'Fruit',
-		types: [
-			{
-				name: 'Apple',
-			},
-			{
-				name: 'Orange',
-			},
-			{
-				name: 'Pear',
-			},
-		],
-	},
-	{
-		name: 'Vegetable',
-		types: [
-			{
-				name: 'Cucumber',
-			},
-			{
-				name: 'Parsnip',
-			},
-			{
-				name: 'Pumpkin',
-			},
-		],
-	},
-];
-
-const Descender = ( { level } ) => {
-	if ( level === 1 ) {
-		return '';
-	}
-	const indentation = '\u00A0'.repeat( ( level - 1 ) * 4 );
-
-	return <span aria-hidden="true">{ indentation + '├ ' }</span>;
-};
-
-const Rows = ( { items, level = 1 } ) => {
-	return items.map( ( item, index ) => {
-		const hasChildren = !! item.types && !! item.types.length;
-		return (
-			<Fragment key={ item.name }>
-				<TreeGridRow
-					positionInSet={ index + 1 }
-					setSize={ items.length }
-					level={ level }
-				>
-					<TreeGridCell>
-						{ ( props ) => (
-							<>
-								<Descender level={ level } />
-								<Button variant="primary" { ...props }>
-									{ item.name }
-								</Button>
-							</>
-						) }
-					</TreeGridCell>
-					<TreeGridCell>
-						{ ( props ) => (
-							<Button variant="secondary" { ...props }>
-								Move Up
-							</Button>
-						) }
-					</TreeGridCell>
-					<TreeGridCell>
-						{ ( props ) => (
-							<Button variant="secondary" { ...props }>
-								Move Down
-							</Button>
-						) }
-					</TreeGridCell>
-				</TreeGridRow>
-				{ hasChildren && (
-					<Rows items={ item.types } level={ level + 1 } />
-				) }
-			</Fragment>
-		);
-	} );
-};
-
-export const _default = () => {
-	return (
-		<TreeGrid>
-			<Rows items={ groceries } />
-		</TreeGrid>
-	);
-};

package/src/tree-grid/test/__snapshots__/index.js.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<div role=\\"application\\"><table role=\\"treegrid\\"><tbody><tr role=\\"row\\" aria-level=\\"1\\" aria-posinset=\\"1\\" aria-setsize=\\"1\\"><td role=\\"gridcell\\">Test</td></tr></tbody></table></div>"`;