@wordpress/components 23.3.2 → 23.4.0

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>
-	);
-};