@wordpress/components 23.3.2 → 23.4.0

package/build/tools-panel/tools-panel-item/component.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ToolsPanelItem = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -26,7 +26,7 @@ var _context = require("../../ui/context");
  */
 // This wraps controls to be conditionally displayed within a tools panel. It
 // prevents props being applied to HTML elements that would make them invalid.
-const ToolsPanelItem = (props, forwardedRef) => {
+const UnconnectedToolsPanelItem = (props, forwardedRef) => {
   const {
     children,
     isShown,
@@ -45,7 +45,8 @@ const ToolsPanelItem = (props, forwardedRef) => {
   }), children);
 };
 
-const ConnectedToolsPanelItem = (0, _context.contextConnect)(ToolsPanelItem, 'ToolsPanelItem');
-var _default = ConnectedToolsPanelItem;
+const ToolsPanelItem = (0, _context.contextConnect)(UnconnectedToolsPanelItem, 'ToolsPanelItem');
+exports.ToolsPanelItem = ToolsPanelItem;
+var _default = ToolsPanelItem;
 exports.default = _default;
 //# sourceMappingURL=component.js.map

package/build/tools-panel/tools-panel-item/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-item/component.tsx"],"names":["ToolsPanelItem","props","forwardedRef","children","isShown","shouldRenderPlaceholder","toolsPanelItemProps","ConnectedToolsPanelItem"],"mappings":";;;;;;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMA;AACA;AACA,MAAMA,cAAc,GAAG,CACtBC,KADsB,EAEtBC,YAFsB,KAGlB;AACJ,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,OAFK;AAGLC,IAAAA,uBAHK;AAIL,OAAGC;AAJE,MAKF,6BAAmBL,KAAnB,CALJ;;AAOA,MAAK,CAAEG,OAAP,EAAiB;AAChB,WAAOC,uBAAuB,GAC7B,4BAAC,UAAD,6BAAWC,mBAAX;AAAiC,MAAA,GAAG,EAAGJ;AAAvC,OAD6B,GAE1B,IAFJ;AAGA;;AAED,SACC,4BAAC,UAAD,6BAAWI,mBAAX;AAAiC,IAAA,GAAG,EAAGJ;AAAvC,MACGC,QADH,CADD;AAKA,CAtBD;;AAwBA,MAAMI,uBAAuB,GAAG,6BAC/BP,cAD+B,EAE/B,gBAF+B,CAAhC;eAKeO,uB","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { useToolsPanelItem } from './hook';\nimport { View } from '../../view';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport type { ToolsPanelItemProps } from '../types';\n\n// This wraps controls to be conditionally displayed within a tools panel. It\n// prevents props being applied to HTML elements that would make them invalid.\nconst ToolsPanelItem = (\n\tprops: WordPressComponentProps< ToolsPanelItemProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tchildren,\n\t\tisShown,\n\t\tshouldRenderPlaceholder,\n\t\t...toolsPanelItemProps\n\t} = useToolsPanelItem( props );\n\n\tif ( ! isShown ) {\n\t\treturn shouldRenderPlaceholder ? (\n\t\t\t<View { ...toolsPanelItemProps } ref={ forwardedRef } />\n\t\t) : null;\n\t}\n\n\treturn (\n\t\t<View { ...toolsPanelItemProps } ref={ forwardedRef }>\n\t\t\t{ children }\n\t\t</View>\n\t);\n};\n\nconst ConnectedToolsPanelItem = contextConnect(\n\tToolsPanelItem,\n\t'ToolsPanelItem'\n);\n\nexport default ConnectedToolsPanelItem;\n"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-item/component.tsx"],"names":["UnconnectedToolsPanelItem","props","forwardedRef","children","isShown","shouldRenderPlaceholder","toolsPanelItemProps","ToolsPanelItem"],"mappings":";;;;;;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMA;AACA;AACA,MAAMA,yBAAyB,GAAG,CACjCC,KADiC,EAEjCC,YAFiC,KAG7B;AACJ,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,OAFK;AAGLC,IAAAA,uBAHK;AAIL,OAAGC;AAJE,MAKF,6BAAmBL,KAAnB,CALJ;;AAOA,MAAK,CAAEG,OAAP,EAAiB;AAChB,WAAOC,uBAAuB,GAC7B,4BAAC,UAAD,6BAAWC,mBAAX;AAAiC,MAAA,GAAG,EAAGJ;AAAvC,OAD6B,GAE1B,IAFJ;AAGA;;AAED,SACC,4BAAC,UAAD,6BAAWI,mBAAX;AAAiC,IAAA,GAAG,EAAGJ;AAAvC,MACGC,QADH,CADD;AAKA,CAtBD;;AAwBO,MAAMI,cAAc,GAAG,6BAC7BP,yBAD6B,EAE7B,gBAF6B,CAAvB;;eAKQO,c","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { useToolsPanelItem } from './hook';\nimport { View } from '../../view';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport type { ToolsPanelItemProps } from '../types';\n\n// This wraps controls to be conditionally displayed within a tools panel. It\n// prevents props being applied to HTML elements that would make them invalid.\nconst UnconnectedToolsPanelItem = (\n\tprops: WordPressComponentProps< ToolsPanelItemProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tchildren,\n\t\tisShown,\n\t\tshouldRenderPlaceholder,\n\t\t...toolsPanelItemProps\n\t} = useToolsPanelItem( props );\n\n\tif ( ! isShown ) {\n\t\treturn shouldRenderPlaceholder ? (\n\t\t\t<View { ...toolsPanelItemProps } ref={ forwardedRef } />\n\t\t) : null;\n\t}\n\n\treturn (\n\t\t<View { ...toolsPanelItemProps } ref={ forwardedRef }>\n\t\t\t{ children }\n\t\t</View>\n\t);\n};\n\nexport const ToolsPanelItem = contextConnect(\n\tUnconnectedToolsPanelItem,\n\t'ToolsPanelItem'\n);\n\nexport default ToolsPanelItem;\n"]}

package/build/tools-panel/tools-panel-item/hook.js

@@ -28,16 +28,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Internal dependencies
  */
+const noop = () => {};
+
 function useToolsPanelItem(props) {
   var _menuItems$menuGroup, _menuItems$menuGroup2, _menuItems$menuGroup3;
 
   const {
     className,
     hasValue,
-    isShownByDefault,
+    isShownByDefault = false,
     label,
     panelId,
-    resetAllFilter,
+    resetAllFilter = noop,
     onDeselect,
     onSelect,
     ...otherProps

package/build/tools-panel/tools-panel-item/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-item/hook.ts"],"names":["useToolsPanelItem","props","className","hasValue","isShownByDefault","label","panelId","resetAllFilter","onDeselect","onSelect","otherProps","currentPanelId","menuItems","registerPanelItem","deregisterPanelItem","flagItemCustomization","isResetting","shouldRenderPlaceholderItems","shouldRenderPlaceholder","firstDisplayedItem","lastDisplayedItem","__experimentalFirstVisibleItemClass","__experimentalLastVisibleItemClass","hasValueCallback","resetAllFilterCallback","previousPanelId","hasMatchingPanel","menuGroup","isMenuItemChecked","wasMenuItemChecked","isRegistered","undefined","isValueSet","wasValueSet","newValueSet","isShown","cx","classes","placeholderStyle","styles","ToolsPanelItemPlaceholder","firstItemStyle","lastItemStyle","ToolsPanelItem"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useCallback, useEffect, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { ToolsPanelItemProps } from '../types';\n\nexport function useToolsPanelItem(\n\tprops: WordPressComponentProps< ToolsPanelItemProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\thasValue,\n\t\tisShownByDefault,\n\t\tlabel,\n\t\tpanelId,\n\t\tresetAllFilter,\n\t\tonDeselect,\n\t\tonSelect,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToolsPanelItem' );\n\n\tconst {\n\t\tpanelId: currentPanelId,\n\t\tmenuItems,\n\t\tregisterPanelItem,\n\t\tderegisterPanelItem,\n\t\tflagItemCustomization,\n\t\tisResetting,\n\t\tshouldRenderPlaceholderItems: shouldRenderPlaceholder,\n\t\tfirstDisplayedItem,\n\t\tlastDisplayedItem,\n\t\t__experimentalFirstVisibleItemClass,\n\t\t__experimentalLastVisibleItemClass,\n\t} = useToolsPanelContext();\n\n\tconst hasValueCallback = useCallback( hasValue, [ panelId, hasValue ] );\n\tconst resetAllFilterCallback = useCallback( resetAllFilter, [\n\t\tpanelId,\n\t\tresetAllFilter,\n\t] );\n\tconst previousPanelId = usePrevious( currentPanelId );\n\n\tconst hasMatchingPanel =\n\t\tcurrentPanelId === panelId || currentPanelId === null;\n\n\t// Registering the panel item allows the panel to include it in its\n\t// automatically generated menu and determine its initial checked status.\n\tuseEffect( () => {\n\t\tif ( hasMatchingPanel && previousPanelId !== null ) {\n\t\t\tregisterPanelItem( {\n\t\t\t\thasValue: hasValueCallback,\n\t\t\t\tisShownByDefault,\n\t\t\t\tlabel,\n\t\t\t\tresetAllFilter: resetAllFilterCallback,\n\t\t\t\tpanelId,\n\t\t\t} );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (\n\t\t\t\t( previousPanelId === null && !! currentPanelId ) ||\n\t\t\t\tcurrentPanelId === panelId\n\t\t\t) {\n\t\t\t\tderegisterPanelItem( label );\n\t\t\t}\n\t\t};\n\t}, [\n\t\tcurrentPanelId,\n\t\thasMatchingPanel,\n\t\tisShownByDefault,\n\t\tlabel,\n\t\thasValueCallback,\n\t\tpanelId,\n\t\tpreviousPanelId,\n\t\tresetAllFilterCallback,\n\t\tregisterPanelItem,\n\t\tderegisterPanelItem,\n\t] );\n\n\t// Note: `label` is used as a key when building menu item state in\n\t// `ToolsPanel`.\n\tconst menuGroup = isShownByDefault ? 'default' : 'optional';\n\tconst isMenuItemChecked = menuItems?.[ menuGroup ]?.[ label ];\n\tconst wasMenuItemChecked = usePrevious( isMenuItemChecked );\n\tconst isRegistered = menuItems?.[ menuGroup ]?.[ label ] !== undefined;\n\n\tconst isValueSet = hasValue();\n\tconst wasValueSet = usePrevious( isValueSet );\n\tconst newValueSet = isValueSet && ! wasValueSet;\n\n\t// Notify the panel when an item's value has been set.\n\t//\n\t// 1. For default controls, this is so \"reset\" appears beside its menu item.\n\t// 2. For optional controls, when the panel ID is `null`, it allows the\n\t// panel to ensure the item is toggled on for display in the menu, given the\n\t// value has been set external to the control.\n\tuseEffect( () => {\n\t\tif ( ! newValueSet ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isShownByDefault || currentPanelId === null ) {\n\t\t\tflagItemCustomization( label, menuGroup );\n\t\t}\n\t}, [\n\t\tcurrentPanelId,\n\t\tnewValueSet,\n\t\tisShownByDefault,\n\t\tmenuGroup,\n\t\tlabel,\n\t\tflagItemCustomization,\n\t] );\n\n\t// Determine if the panel item's corresponding menu is being toggled and\n\t// trigger appropriate callback if it is.\n\tuseEffect( () => {\n\t\t// We check whether this item is currently registered as items rendered\n\t\t// via fills can persist through the parent panel being remounted.\n\t\t// See: https://github.com/WordPress/gutenberg/pull/45673\n\t\tif ( ! isRegistered || isResetting || ! hasMatchingPanel ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isMenuItemChecked && ! isValueSet && ! wasMenuItemChecked ) {\n\t\t\tonSelect?.();\n\t\t}\n\n\t\tif ( ! isMenuItemChecked && wasMenuItemChecked ) {\n\t\t\tonDeselect?.();\n\t\t}\n\t}, [\n\t\thasMatchingPanel,\n\t\tisMenuItemChecked,\n\t\tisRegistered,\n\t\tisResetting,\n\t\tisValueSet,\n\t\twasMenuItemChecked,\n\t\tonSelect,\n\t\tonDeselect,\n\t] );\n\n\t// The item is shown if it is a default control regardless of whether it\n\t// has a value. Optional items are shown when they are checked or have\n\t// a value.\n\tconst isShown = isShownByDefault\n\t\t? menuItems?.[ menuGroup ]?.[ label ] !== undefined\n\t\t: isMenuItemChecked;\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\tconst placeholderStyle =\n\t\t\tshouldRenderPlaceholder &&\n\t\t\t! isShown &&\n\t\t\tstyles.ToolsPanelItemPlaceholder;\n\t\tconst firstItemStyle =\n\t\t\tfirstDisplayedItem === label && __experimentalFirstVisibleItemClass;\n\t\tconst lastItemStyle =\n\t\t\tlastDisplayedItem === label && __experimentalLastVisibleItemClass;\n\t\treturn cx(\n\t\t\tstyles.ToolsPanelItem,\n\t\t\tplaceholderStyle,\n\t\t\tclassName,\n\t\t\tfirstItemStyle,\n\t\t\tlastItemStyle\n\t\t);\n\t}, [\n\t\tisShown,\n\t\tshouldRenderPlaceholder,\n\t\tclassName,\n\t\tcx,\n\t\tfirstDisplayedItem,\n\t\tlastDisplayedItem,\n\t\t__experimentalFirstVisibleItemClass,\n\t\t__experimentalLastVisibleItemClass,\n\t\tlabel,\n\t] );\n\n\treturn {\n\t\t...otherProps,\n\t\tisShown,\n\t\tshouldRenderPlaceholder,\n\t\tclassName: classes,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-item/hook.ts"],"names":["noop","useToolsPanelItem","props","className","hasValue","isShownByDefault","label","panelId","resetAllFilter","onDeselect","onSelect","otherProps","currentPanelId","menuItems","registerPanelItem","deregisterPanelItem","flagItemCustomization","isResetting","shouldRenderPlaceholderItems","shouldRenderPlaceholder","firstDisplayedItem","lastDisplayedItem","__experimentalFirstVisibleItemClass","__experimentalLastVisibleItemClass","hasValueCallback","resetAllFilterCallback","previousPanelId","hasMatchingPanel","menuGroup","isMenuItemChecked","wasMenuItemChecked","isRegistered","undefined","isValueSet","wasValueSet","newValueSet","isShown","cx","classes","placeholderStyle","styles","ToolsPanelItemPlaceholder","firstItemStyle","lastItemStyle","ToolsPanelItem"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useCallback, useEffect, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { ToolsPanelItemProps } from '../types';\n\nconst noop = () => {};\n\nexport function useToolsPanelItem(\n\tprops: WordPressComponentProps< ToolsPanelItemProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\thasValue,\n\t\tisShownByDefault = false,\n\t\tlabel,\n\t\tpanelId,\n\t\tresetAllFilter = noop,\n\t\tonDeselect,\n\t\tonSelect,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToolsPanelItem' );\n\n\tconst {\n\t\tpanelId: currentPanelId,\n\t\tmenuItems,\n\t\tregisterPanelItem,\n\t\tderegisterPanelItem,\n\t\tflagItemCustomization,\n\t\tisResetting,\n\t\tshouldRenderPlaceholderItems: shouldRenderPlaceholder,\n\t\tfirstDisplayedItem,\n\t\tlastDisplayedItem,\n\t\t__experimentalFirstVisibleItemClass,\n\t\t__experimentalLastVisibleItemClass,\n\t} = useToolsPanelContext();\n\n\tconst hasValueCallback = useCallback( hasValue, [ panelId, hasValue ] );\n\tconst resetAllFilterCallback = useCallback( resetAllFilter, [\n\t\tpanelId,\n\t\tresetAllFilter,\n\t] );\n\tconst previousPanelId = usePrevious( currentPanelId );\n\n\tconst hasMatchingPanel =\n\t\tcurrentPanelId === panelId || currentPanelId === null;\n\n\t// Registering the panel item allows the panel to include it in its\n\t// automatically generated menu and determine its initial checked status.\n\tuseEffect( () => {\n\t\tif ( hasMatchingPanel && previousPanelId !== null ) {\n\t\t\tregisterPanelItem( {\n\t\t\t\thasValue: hasValueCallback,\n\t\t\t\tisShownByDefault,\n\t\t\t\tlabel,\n\t\t\t\tresetAllFilter: resetAllFilterCallback,\n\t\t\t\tpanelId,\n\t\t\t} );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (\n\t\t\t\t( previousPanelId === null && !! currentPanelId ) ||\n\t\t\t\tcurrentPanelId === panelId\n\t\t\t) {\n\t\t\t\tderegisterPanelItem( label );\n\t\t\t}\n\t\t};\n\t}, [\n\t\tcurrentPanelId,\n\t\thasMatchingPanel,\n\t\tisShownByDefault,\n\t\tlabel,\n\t\thasValueCallback,\n\t\tpanelId,\n\t\tpreviousPanelId,\n\t\tresetAllFilterCallback,\n\t\tregisterPanelItem,\n\t\tderegisterPanelItem,\n\t] );\n\n\t// Note: `label` is used as a key when building menu item state in\n\t// `ToolsPanel`.\n\tconst menuGroup = isShownByDefault ? 'default' : 'optional';\n\tconst isMenuItemChecked = menuItems?.[ menuGroup ]?.[ label ];\n\tconst wasMenuItemChecked = usePrevious( isMenuItemChecked );\n\tconst isRegistered = menuItems?.[ menuGroup ]?.[ label ] !== undefined;\n\n\tconst isValueSet = hasValue();\n\tconst wasValueSet = usePrevious( isValueSet );\n\tconst newValueSet = isValueSet && ! wasValueSet;\n\n\t// Notify the panel when an item's value has been set.\n\t//\n\t// 1. For default controls, this is so \"reset\" appears beside its menu item.\n\t// 2. For optional controls, when the panel ID is `null`, it allows the\n\t// panel to ensure the item is toggled on for display in the menu, given the\n\t// value has been set external to the control.\n\tuseEffect( () => {\n\t\tif ( ! newValueSet ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isShownByDefault || currentPanelId === null ) {\n\t\t\tflagItemCustomization( label, menuGroup );\n\t\t}\n\t}, [\n\t\tcurrentPanelId,\n\t\tnewValueSet,\n\t\tisShownByDefault,\n\t\tmenuGroup,\n\t\tlabel,\n\t\tflagItemCustomization,\n\t] );\n\n\t// Determine if the panel item's corresponding menu is being toggled and\n\t// trigger appropriate callback if it is.\n\tuseEffect( () => {\n\t\t// We check whether this item is currently registered as items rendered\n\t\t// via fills can persist through the parent panel being remounted.\n\t\t// See: https://github.com/WordPress/gutenberg/pull/45673\n\t\tif ( ! isRegistered || isResetting || ! hasMatchingPanel ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isMenuItemChecked && ! isValueSet && ! wasMenuItemChecked ) {\n\t\t\tonSelect?.();\n\t\t}\n\n\t\tif ( ! isMenuItemChecked && wasMenuItemChecked ) {\n\t\t\tonDeselect?.();\n\t\t}\n\t}, [\n\t\thasMatchingPanel,\n\t\tisMenuItemChecked,\n\t\tisRegistered,\n\t\tisResetting,\n\t\tisValueSet,\n\t\twasMenuItemChecked,\n\t\tonSelect,\n\t\tonDeselect,\n\t] );\n\n\t// The item is shown if it is a default control regardless of whether it\n\t// has a value. Optional items are shown when they are checked or have\n\t// a value.\n\tconst isShown = isShownByDefault\n\t\t? menuItems?.[ menuGroup ]?.[ label ] !== undefined\n\t\t: isMenuItemChecked;\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\tconst placeholderStyle =\n\t\t\tshouldRenderPlaceholder &&\n\t\t\t! isShown &&\n\t\t\tstyles.ToolsPanelItemPlaceholder;\n\t\tconst firstItemStyle =\n\t\t\tfirstDisplayedItem === label && __experimentalFirstVisibleItemClass;\n\t\tconst lastItemStyle =\n\t\t\tlastDisplayedItem === label && __experimentalLastVisibleItemClass;\n\t\treturn cx(\n\t\t\tstyles.ToolsPanelItem,\n\t\t\tplaceholderStyle,\n\t\t\tclassName,\n\t\t\tfirstItemStyle,\n\t\t\tlastItemStyle\n\t\t);\n\t}, [\n\t\tisShown,\n\t\tshouldRenderPlaceholder,\n\t\tclassName,\n\t\tcx,\n\t\tfirstDisplayedItem,\n\t\tlastDisplayedItem,\n\t\t__experimentalFirstVisibleItemClass,\n\t\t__experimentalLastVisibleItemClass,\n\t\tlabel,\n\t] );\n\n\treturn {\n\t\t...otherProps,\n\t\tisShown,\n\t\tshouldRenderPlaceholder,\n\t\tclassName: classes,\n\t};\n}\n"]}

package/build/tree-grid/cell.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.TreeGridCell = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -20,7 +20,7 @@ var _item = _interopRequireDefault(require("./item"));
 /**
  * Internal dependencies
  */
-var _default = (0, _element.forwardRef)(function TreeGridCell(_ref, ref) {
+function UnforwardedTreeGridCell(_ref, ref) {
   let {
     children,
     withoutGridItem = false,
@@ -28,10 +28,21 @@ var _default = (0, _element.forwardRef)(function TreeGridCell(_ref, ref) {
   } = _ref;
   return (0, _element.createElement)("td", (0, _extends2.default)({}, props, {
     role: "gridcell"
-  }), withoutGridItem ? children : (0, _element.createElement)(_item.default, {
+  }), withoutGridItem ? (0, _element.createElement)(_element.Fragment, null, children) : (0, _element.createElement)(_item.default, {
     ref: ref
   }, children));
-});
+}
+/**
+ * `TreeGridCell` is used to create a tree hierarchy.
+ * It is not a visually styled component, but instead helps with adding
+ * keyboard navigation and roving tab index behaviors to tree grid structures.
+ *
+ * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
+ */
+
 
+const TreeGridCell = (0, _element.forwardRef)(UnforwardedTreeGridCell);
+exports.TreeGridCell = TreeGridCell;
+var _default = TreeGridCell;
 exports.default = _default;
 //# sourceMappingURL=cell.js.map

package/build/tree-grid/cell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tree-grid/cell.js"],"names":["TreeGridCell","ref","children","withoutGridItem","props"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;eAGe,yBAAY,SAASA,YAAT,OAE1BC,GAF0B,EAGzB;AAAA,MAFD;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,eAAe,GAAG,KAA9B;AAAqC,OAAGC;AAAxC,GAEC;AACD,SACC,6DAASA,KAAT;AAAiB,IAAA,IAAI,EAAC;AAAtB,MACGD,eAAe,GAChBD,QADgB,GAGhB,4BAAC,aAAD;AAAc,IAAA,GAAG,EAAGD;AAApB,KAA4BC,QAA5B,CAJF,CADD;AASA,CAbc,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport TreeGridItem from './item';\n\nexport default forwardRef( function TreeGridCell(\n\t{ children, withoutGridItem = false, ...props },\n\tref\n) {\n\treturn (\n\t\t<td { ...props } role=\"gridcell\">\n\t\t\t{ withoutGridItem ? (\n\t\t\t\tchildren\n\t\t\t) : (\n\t\t\t\t<TreeGridItem ref={ ref }>{ children }</TreeGridItem>\n\t\t\t) }\n\t\t</td>\n\t);\n} );\n"]}
+{"version":3,"sources":["@wordpress/components/src/tree-grid/cell.tsx"],"names":["UnforwardedTreeGridCell","ref","children","withoutGridItem","props","TreeGridCell"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,uBAAT,OAMCC,GAND,EAOE;AAAA,MAND;AACCC,IAAAA,QADD;AAECC,IAAAA,eAAe,GAAG,KAFnB;AAGC,OAAGC;AAHJ,GAMC;AACD,SACC,6DAASA,KAAT;AAAiB,IAAA,IAAI,EAAC;AAAtB,MACGD,eAAe,GAChB,qDAAID,QAAJ,CADgB,GAGhB,4BAAC,aAAD;AAAc,IAAA,GAAG,EAAGD;AAApB,KAA4BC,QAA5B,CAJF,CADD;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMG,YAAY,GAAG,yBAAYL,uBAAZ,CAArB;;eAEQK,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport TreeGridItem from './item';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { TreeGridCellProps } from './types';\n\nfunction UnforwardedTreeGridCell(\n\t{\n\t\tchildren,\n\t\twithoutGridItem = false,\n\t\t...props\n\t}: WordPressComponentProps< TreeGridCellProps, 'td', false >,\n\tref: React.ForwardedRef< any >\n) {\n\treturn (\n\t\t<td { ...props } role=\"gridcell\">\n\t\t\t{ withoutGridItem ? (\n\t\t\t\t<>{ children }</>\n\t\t\t) : (\n\t\t\t\t<TreeGridItem ref={ ref }>{ children }</TreeGridItem>\n\t\t\t) }\n\t\t</td>\n\t);\n}\n\n/**\n * `TreeGridCell` is used to create a tree hierarchy.\n * It is not a visually styled component, but instead helps with adding\n * keyboard navigation and roving tab index behaviors to tree grid structures.\n *\n * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}\n */\nexport const TreeGridCell = forwardRef( UnforwardedTreeGridCell );\n\nexport default TreeGridCell;\n"]}

package/build/tree-grid/index.js

@@ -5,6 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.TreeGrid = void 0;
 Object.defineProperty(exports, "TreeGridCell", {
   enumerable: true,
   get: function () {
@@ -53,19 +54,15 @@ var _item = _interopRequireDefault(require("./item"));
  * Return focusables in a row element, excluding those from other branches
  * nested within the row.
  *
- * @param {Element} rowElement The DOM element representing the row.
+ * @param rowElement The DOM element representing the row.
  *
- * @return {Array | undefined} The array of focusables in the row.
+ * @return The array of focusables in the row.
  */
 function getRowFocusables(rowElement) {
   const focusablesInRow = _dom.focus.focusable.find(rowElement, {
     sequential: true
   });
 
-  if (!focusablesInRow || !focusablesInRow.length) {
-    return;
-  }
-
   return focusablesInRow.filter(focusable => {
     return focusable.closest('[role="row"]') === rowElement;
   });
@@ -73,18 +70,12 @@ function getRowFocusables(rowElement) {
 /**
  * Renders both a table and tbody element, used to create a tree hierarchy.
  *
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md
- * @param {Object}    props                      Component props.
- * @param {WPElement} props.children             Children to be rendered.
- * @param {Function}  props.onExpandRow          Callback to fire when row is expanded.
- * @param {Function}  props.onCollapseRow        Callback to fire when row is collapsed.
- * @param {Function}  props.onFocusRow           Callback to fire when moving focus to a different row.
- * @param {string}    props.applicationAriaLabel Label to use for the application role.
- * @param {Object}    ref                        A ref to the underlying DOM table element.
  */
 
 
-function TreeGrid(_ref, ref) {
+function UnforwardedTreeGrid(_ref,
+/** A ref to the underlying DOM table element. */
+ref) {
   let {
     children,
     onExpandRow = () => {},
@@ -117,12 +108,17 @@ function TreeGrid(_ref, ref) {
       currentTarget: treeGridElement
     } = event;
 
-    if (!treeGridElement.contains(activeElement)) {
+    if (!activeElement || !treeGridElement.contains(activeElement)) {
       return;
     } // Calculate the columnIndex of the active element.
 
 
     const activeRow = activeElement.closest('[role="row"]');
+
+    if (!activeRow) {
+      return;
+    }
+
     const focusablesInRow = getRowFocusables(activeRow);
     const currentColumnIndex = focusablesInRow.indexOf(activeElement);
     const canExpandCollapse = 0 === currentColumnIndex;
@@ -153,13 +149,15 @@ function TreeGrid(_ref, ref) {
           } // If a row is focused, and it is collapsed, moves to the parent row (if there is one).
 
 
-          const level = Math.max(parseInt((_activeRow$getAttribu = activeRow === null || activeRow === void 0 ? void 0 : activeRow.getAttribute('aria-level')) !== null && _activeRow$getAttribu !== void 0 ? _activeRow$getAttribu : 1, 10) - 1, 1);
+          const level = Math.max(parseInt((_activeRow$getAttribu = activeRow === null || activeRow === void 0 ? void 0 : activeRow.getAttribute('aria-level')) !== null && _activeRow$getAttribu !== void 0 ? _activeRow$getAttribu : '1', 10) - 1, 1);
           const rows = Array.from(treeGridElement.querySelectorAll('[role="row"]'));
           let parentRow = activeRow;
           const currentRowIndex = rows.indexOf(activeRow);
 
           for (let i = currentRowIndex; i >= 0; i--) {
-            if (parseInt(rows[i].getAttribute('aria-level'), 10) === level) {
+            const ariaLevel = rows[i].getAttribute('aria-level');
+
+            if (ariaLevel !== null && parseInt(ariaLevel, 10) === level) {
               parentRow = rows[i];
               break;
             }
@@ -301,8 +299,72 @@ function TreeGrid(_ref, ref) {
   }), (0, _element.createElement)("tbody", null, children))));
   /* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */
 }
+/**
+ * `TreeGrid` is used to create a tree hierarchy.
+ * It is not a visually styled component, but instead helps with adding
+ * keyboard navigation and roving tab index behaviors to tree grid structures.
+ *
+ * A tree grid is a hierarchical 2 dimensional UI component, for example it could be
+ * used to implement a file system browser.
+ *
+ * A tree grid allows the user to navigate using arrow keys.
+ * Up/down to navigate vertically across rows, and left/right to navigate horizontally
+ * between focusables in a row.
+ *
+ * The `TreeGrid` renders both a `table` and `tbody` element, and is intended to be used
+ * with `TreeGridRow` (`tr`) and `TreeGridCell` (`td`) to build out a grid.
+ *
+ * ```jsx
+ * function TreeMenu() {
+ * 	return (
+ * 		<TreeGrid>
+ * 			<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 2 }>
+ * 				<TreeGridCell>
+ * 					{ ( props ) => (
+ * 						<Button onClick={ onSelect } { ...props }>Select</Button>
+ * 					) }
+ * 				</TreeGridCell>
+ * 				<TreeGridCell>
+ * 					{ ( props ) => (
+ * 						<Button onClick={ onMove } { ...props }>Move</Button>
+ * 					) }
+ * 				</TreeGridCell>
+ * 			</TreeGridRow>
+ * 			<TreeGridRow level={ 1 } positionInSet={ 2 } setSize={ 2 }>
+ * 				<TreeGridCell>
+ * 					{ ( props ) => (
+ * 						<Button onClick={ onSelect } { ...props }>Select</Button>
+ * 					) }
+ * 				</TreeGridCell>
+ * 				<TreeGridCell>
+ * 					{ ( props ) => (
+ * 						<Button onClick={ onMove } { ...props }>Move</Button>
+ * 					) }
+ * 				</TreeGridCell>
+ * 			</TreeGridRow>
+ * 			<TreeGridRow level={ 2 } positionInSet={ 1 } setSize={ 1 }>
+ * 				<TreeGridCell>
+ * 					{ ( props ) => (
+ * 						<Button onClick={ onSelect } { ...props }>Select</Button>
+ * 					) }
+ * 				</TreeGridCell>
+ * 				<TreeGridCell>
+ * 					{ ( props ) => (
+ * 						<Button onClick={ onMove } { ...props }>Move</Button>
+ * 					) }
+ * 				</TreeGridCell>
+ * 			</TreeGridRow>
+ * 		</TreeGrid>
+ * 	);
+ * }
+ * ```
+ *
+ * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
+ */
 
-var _default = (0, _element.forwardRef)(TreeGrid);
 
+const TreeGrid = (0, _element.forwardRef)(UnforwardedTreeGrid);
+exports.TreeGrid = TreeGrid;
+var _default = TreeGrid;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

package/build/tree-grid/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tree-grid/index.js"],"names":["getRowFocusables","rowElement","focusablesInRow","focus","focusable","find","sequential","length","filter","closest","TreeGrid","ref","children","onExpandRow","onCollapseRow","onFocusRow","applicationAriaLabel","props","onKeyDown","event","keyCode","metaKey","ctrlKey","altKey","hasModifierKeyPressed","UP","DOWN","LEFT","RIGHT","HOME","END","includes","stopPropagation","activeElement","document","currentTarget","treeGridElement","contains","activeRow","currentColumnIndex","indexOf","canExpandCollapse","cannotFocusNextColumn","getAttribute","nextIndex","Math","max","min","preventDefault","level","parseInt","rows","Array","from","querySelectorAll","parentRow","currentRowIndex","i","focusableItems","nextRowIndex","focusablesInNextRow"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\nimport { forwardRef, useCallback } from '@wordpress/element';\nimport { UP, DOWN, LEFT, RIGHT, HOME, END } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport RovingTabIndexContainer from './roving-tab-index';\n\n/**\n * Return focusables in a row element, excluding those from other branches\n * nested within the row.\n *\n * @param {Element} rowElement The DOM element representing the row.\n *\n * @return {Array | undefined} The array of focusables in the row.\n */\nfunction getRowFocusables( rowElement ) {\n\tconst focusablesInRow = focus.focusable.find( rowElement, {\n\t\tsequential: true,\n\t} );\n\n\tif ( ! focusablesInRow || ! focusablesInRow.length ) {\n\t\treturn;\n\t}\n\n\treturn focusablesInRow.filter( ( focusable ) => {\n\t\treturn focusable.closest( '[role=\"row\"]' ) === rowElement;\n\t} );\n}\n\n/**\n * Renders both a table and tbody element, used to create a tree hierarchy.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md\n * @param {Object}    props                      Component props.\n * @param {WPElement} props.children             Children to be rendered.\n * @param {Function}  props.onExpandRow          Callback to fire when row is expanded.\n * @param {Function}  props.onCollapseRow        Callback to fire when row is collapsed.\n * @param {Function}  props.onFocusRow           Callback to fire when moving focus to a different row.\n * @param {string}    props.applicationAriaLabel Label to use for the application role.\n * @param {Object}    ref                        A ref to the underlying DOM table element.\n */\nfunction TreeGrid(\n\t{\n\t\tchildren,\n\t\tonExpandRow = () => {},\n\t\tonCollapseRow = () => {},\n\t\tonFocusRow = () => {},\n\t\tapplicationAriaLabel,\n\t\t...props\n\t},\n\tref\n) {\n\tconst onKeyDown = useCallback(\n\t\t( event ) => {\n\t\t\tconst { keyCode, metaKey, ctrlKey, altKey } = event;\n\n\t\t\t// The shift key is intentionally absent from the following list,\n\t\t\t// to enable shift + up/down to select items from the list.\n\t\t\tconst hasModifierKeyPressed = metaKey || ctrlKey || altKey;\n\n\t\t\tif (\n\t\t\t\thasModifierKeyPressed ||\n\t\t\t\t! [ UP, DOWN, LEFT, RIGHT, HOME, END ].includes( keyCode )\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// The event will be handled, stop propagation.\n\t\t\tevent.stopPropagation();\n\n\t\t\tconst { activeElement } = document;\n\t\t\tconst { currentTarget: treeGridElement } = event;\n\t\t\tif ( ! treeGridElement.contains( activeElement ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Calculate the columnIndex of the active element.\n\t\t\tconst activeRow = activeElement.closest( '[role=\"row\"]' );\n\t\t\tconst focusablesInRow = getRowFocusables( activeRow );\n\t\t\tconst currentColumnIndex = focusablesInRow.indexOf( activeElement );\n\t\t\tconst canExpandCollapse = 0 === currentColumnIndex;\n\t\t\tconst cannotFocusNextColumn =\n\t\t\t\tcanExpandCollapse &&\n\t\t\t\tactiveRow.getAttribute( 'aria-expanded' ) === 'false' &&\n\t\t\t\tkeyCode === RIGHT;\n\n\t\t\tif ( [ LEFT, RIGHT ].includes( keyCode ) ) {\n\t\t\t\t// Calculate to the next element.\n\t\t\t\tlet nextIndex;\n\t\t\t\tif ( keyCode === LEFT ) {\n\t\t\t\t\tnextIndex = Math.max( 0, currentColumnIndex - 1 );\n\t\t\t\t} else {\n\t\t\t\t\tnextIndex = Math.min(\n\t\t\t\t\t\tcurrentColumnIndex + 1,\n\t\t\t\t\t\tfocusablesInRow.length - 1\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Focus is at the left most column.\n\t\t\t\tif ( canExpandCollapse ) {\n\t\t\t\t\tif ( keyCode === LEFT ) {\n\t\t\t\t\t\t// Left:\n\t\t\t\t\t\t// If a row is focused, and it is expanded, collapses the current row.\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tactiveRow.getAttribute( 'aria-expanded' ) === 'true'\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tonCollapseRow( activeRow );\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// If a row is focused, and it is collapsed, moves to the parent row (if there is one).\n\t\t\t\t\t\tconst level = Math.max(\n\t\t\t\t\t\t\tparseInt(\n\t\t\t\t\t\t\t\tactiveRow?.getAttribute( 'aria-level' ) ?? 1,\n\t\t\t\t\t\t\t\t10\n\t\t\t\t\t\t\t) - 1,\n\t\t\t\t\t\t\t1\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst rows = Array.from(\n\t\t\t\t\t\t\ttreeGridElement.querySelectorAll( '[role=\"row\"]' )\n\t\t\t\t\t\t);\n\t\t\t\t\t\tlet parentRow = activeRow;\n\t\t\t\t\t\tconst currentRowIndex = rows.indexOf( activeRow );\n\t\t\t\t\t\tfor ( let i = currentRowIndex; i >= 0; i-- ) {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tparseInt(\n\t\t\t\t\t\t\t\t\trows[ i ].getAttribute( 'aria-level' ),\n\t\t\t\t\t\t\t\t\t10\n\t\t\t\t\t\t\t\t) === level\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tparentRow = rows[ i ];\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tgetRowFocusables( parentRow )?.[ 0 ]?.focus();\n\t\t\t\t\t}\n\t\t\t\t\tif ( keyCode === RIGHT ) {\n\t\t\t\t\t\t// Right:\n\t\t\t\t\t\t// If a row is focused, and it is collapsed, expands the current row.\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tactiveRow.getAttribute( 'aria-expanded' ) ===\n\t\t\t\t\t\t\t'false'\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tonExpandRow( activeRow );\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// If a row is focused, and it is expanded, focuses the next cell in the row.\n\t\t\t\t\t\tconst focusableItems = getRowFocusables( activeRow );\n\t\t\t\t\t\tif ( focusableItems.length > 0 ) {\n\t\t\t\t\t\t\tfocusableItems[ nextIndex ]?.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will start reading text on continued use of left/right arrow\n\t\t\t\t\t// keys.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Focus the next element. If at most left column and row is collapsed, moving right is not allowed as this will expand. However, if row is collapsed, moving left is allowed.\n\t\t\t\tif ( cannotFocusNextColumn ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tfocusablesInRow[ nextIndex ].focus();\n\n\t\t\t\t// Prevent key use for anything else. This ensures Voiceover\n\t\t\t\t// doesn't try to handle key navigation.\n\t\t\t\tevent.preventDefault();\n\t\t\t} else if ( [ UP, DOWN ].includes( keyCode ) ) {\n\t\t\t\t// Calculate the rowIndex of the next row.\n\t\t\t\tconst rows = Array.from(\n\t\t\t\t\ttreeGridElement.querySelectorAll( '[role=\"row\"]' )\n\t\t\t\t);\n\t\t\t\tconst currentRowIndex = rows.indexOf( activeRow );\n\t\t\t\tlet nextRowIndex;\n\n\t\t\t\tif ( keyCode === UP ) {\n\t\t\t\t\tnextRowIndex = Math.max( 0, currentRowIndex - 1 );\n\t\t\t\t} else {\n\t\t\t\t\tnextRowIndex = Math.min(\n\t\t\t\t\t\tcurrentRowIndex + 1,\n\t\t\t\t\t\trows.length - 1\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Focus is either at the top or bottom edge of the grid. Do nothing.\n\t\t\t\tif ( nextRowIndex === currentRowIndex ) {\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will start navigating horizontally when reaching the vertical\n\t\t\t\t\t// bounds of a table.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Get the focusables in the next row.\n\t\t\t\tconst focusablesInNextRow = getRowFocusables(\n\t\t\t\t\trows[ nextRowIndex ]\n\t\t\t\t);\n\n\t\t\t\t// If for some reason there are no focusables in the next row, do nothing.\n\t\t\t\tif ( ! focusablesInNextRow || ! focusablesInNextRow.length ) {\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will still focus text when using arrow keys, while this\n\t\t\t\t\t// component should limit navigation to focusables.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Try to focus the element in the next row that's at a similar column to the activeElement.\n\t\t\t\tconst nextIndex = Math.min(\n\t\t\t\t\tcurrentColumnIndex,\n\t\t\t\t\tfocusablesInNextRow.length - 1\n\t\t\t\t);\n\t\t\t\tfocusablesInNextRow[ nextIndex ].focus();\n\n\t\t\t\t// Let consumers know the row that was originally focused,\n\t\t\t\t// and the row that is now in focus.\n\t\t\t\tonFocusRow( event, activeRow, rows[ nextRowIndex ] );\n\n\t\t\t\t// Prevent key use for anything else. This ensures Voiceover\n\t\t\t\t// doesn't try to handle key navigation.\n\t\t\t\tevent.preventDefault();\n\t\t\t} else if ( [ HOME, END ].includes( keyCode ) ) {\n\t\t\t\t// Calculate the rowIndex of the next row.\n\t\t\t\tconst rows = Array.from(\n\t\t\t\t\ttreeGridElement.querySelectorAll( '[role=\"row\"]' )\n\t\t\t\t);\n\t\t\t\tconst currentRowIndex = rows.indexOf( activeRow );\n\t\t\t\tlet nextRowIndex;\n\n\t\t\t\tif ( keyCode === HOME ) {\n\t\t\t\t\tnextRowIndex = 0;\n\t\t\t\t} else {\n\t\t\t\t\tnextRowIndex = rows.length - 1;\n\t\t\t\t}\n\n\t\t\t\t// Focus is either at the top or bottom edge of the grid. Do nothing.\n\t\t\t\tif ( nextRowIndex === currentRowIndex ) {\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will start navigating horizontally when reaching the vertical\n\t\t\t\t\t// bounds of a table.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Get the focusables in the next row.\n\t\t\t\tconst focusablesInNextRow = getRowFocusables(\n\t\t\t\t\trows[ nextRowIndex ]\n\t\t\t\t);\n\n\t\t\t\t// If for some reason there are no focusables in the next row, do nothing.\n\t\t\t\tif ( ! focusablesInNextRow || ! focusablesInNextRow.length ) {\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will still focus text when using arrow keys, while this\n\t\t\t\t\t// component should limit navigation to focusables.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Try to focus the element in the next row that's at a similar column to the activeElement.\n\t\t\t\tconst nextIndex = Math.min(\n\t\t\t\t\tcurrentColumnIndex,\n\t\t\t\t\tfocusablesInNextRow.length - 1\n\t\t\t\t);\n\t\t\t\tfocusablesInNextRow[ nextIndex ].focus();\n\n\t\t\t\t// Let consumers know the row that was originally focused,\n\t\t\t\t// and the row that is now in focus.\n\t\t\t\tonFocusRow( event, activeRow, rows[ nextRowIndex ] );\n\n\t\t\t\t// Prevent key use for anything else. This ensures Voiceover\n\t\t\t\t// doesn't try to handle key navigation.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t},\n\t\t[ onExpandRow, onCollapseRow, onFocusRow ]\n\t);\n\n\t/* Disable reason: A treegrid is implemented using a table element. */\n\t/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */\n\treturn (\n\t\t<RovingTabIndexContainer>\n\t\t\t{\n\t\t\t\t// Prevent browser mode from triggering in NVDA by wrapping List View\n\t\t\t\t// in a role=application wrapper.\n\t\t\t\t// see: https://github.com/WordPress/gutenberg/issues/43729\n\t\t\t }\n\t\t\t<div role=\"application\" aria-label={ applicationAriaLabel }>\n\t\t\t\t<table\n\t\t\t\t\t{ ...props }\n\t\t\t\t\trole=\"treegrid\"\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t\tref={ ref }\n\t\t\t\t>\n\t\t\t\t\t<tbody>{ children }</tbody>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t</RovingTabIndexContainer>\n\t);\n\t/* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */\n}\n\nexport default forwardRef( TreeGrid );\nexport { default as TreeGridRow } from './row';\nexport { default as TreeGridCell } from './cell';\nexport { default as TreeGridItem } from './item';\n"]}
+{"version":3,"sources":["@wordpress/components/src/tree-grid/index.tsx"],"names":["getRowFocusables","rowElement","focusablesInRow","focus","focusable","find","sequential","filter","closest","UnforwardedTreeGrid","ref","children","onExpandRow","onCollapseRow","onFocusRow","applicationAriaLabel","props","onKeyDown","event","keyCode","metaKey","ctrlKey","altKey","hasModifierKeyPressed","UP","DOWN","LEFT","RIGHT","HOME","END","includes","stopPropagation","activeElement","document","currentTarget","treeGridElement","contains","activeRow","currentColumnIndex","indexOf","canExpandCollapse","cannotFocusNextColumn","getAttribute","nextIndex","Math","max","min","length","preventDefault","level","parseInt","rows","Array","from","querySelectorAll","parentRow","currentRowIndex","i","ariaLevel","focusableItems","nextRowIndex","focusablesInNextRow","TreeGrid"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\nimport { forwardRef, useCallback } from '@wordpress/element';\nimport { UP, DOWN, LEFT, RIGHT, HOME, END } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport RovingTabIndexContainer from './roving-tab-index';\nimport type { TreeGridProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\n/**\n * Return focusables in a row element, excluding those from other branches\n * nested within the row.\n *\n * @param rowElement The DOM element representing the row.\n *\n * @return The array of focusables in the row.\n */\nfunction getRowFocusables( rowElement: HTMLElement ) {\n\tconst focusablesInRow = focus.focusable.find( rowElement, {\n\t\tsequential: true,\n\t} );\n\n\treturn focusablesInRow.filter( ( focusable ) => {\n\t\treturn focusable.closest( '[role=\"row\"]' ) === rowElement;\n\t} );\n}\n\n/**\n * Renders both a table and tbody element, used to create a tree hierarchy.\n *\n */\nfunction UnforwardedTreeGrid(\n\t{\n\t\tchildren,\n\t\tonExpandRow = () => {},\n\t\tonCollapseRow = () => {},\n\t\tonFocusRow = () => {},\n\t\tapplicationAriaLabel,\n\t\t...props\n\t}: WordPressComponentProps< TreeGridProps, 'table', false >,\n\t/** A ref to the underlying DOM table element. */\n\tref: React.ForwardedRef< HTMLTableElement >\n) {\n\tconst onKeyDown = useCallback(\n\t\t( event: React.KeyboardEvent< HTMLTableElement > ) => {\n\t\t\tconst { keyCode, metaKey, ctrlKey, altKey } = event;\n\n\t\t\t// The shift key is intentionally absent from the following list,\n\t\t\t// to enable shift + up/down to select items from the list.\n\t\t\tconst hasModifierKeyPressed = metaKey || ctrlKey || altKey;\n\n\t\t\tif (\n\t\t\t\thasModifierKeyPressed ||\n\t\t\t\t! ( [ UP, DOWN, LEFT, RIGHT, HOME, END ] as number[] ).includes(\n\t\t\t\t\tkeyCode\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// The event will be handled, stop propagation.\n\t\t\tevent.stopPropagation();\n\n\t\t\tconst { activeElement } = document;\n\t\t\tconst { currentTarget: treeGridElement } = event;\n\n\t\t\tif (\n\t\t\t\t! activeElement ||\n\t\t\t\t! treeGridElement.contains( activeElement )\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Calculate the columnIndex of the active element.\n\t\t\tconst activeRow =\n\t\t\t\tactiveElement.closest< HTMLElement >( '[role=\"row\"]' );\n\n\t\t\tif ( ! activeRow ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst focusablesInRow = getRowFocusables( activeRow );\n\t\t\tconst currentColumnIndex = focusablesInRow.indexOf(\n\t\t\t\tactiveElement as HTMLElement\n\t\t\t);\n\t\t\tconst canExpandCollapse = 0 === currentColumnIndex;\n\t\t\tconst cannotFocusNextColumn =\n\t\t\t\tcanExpandCollapse &&\n\t\t\t\tactiveRow.getAttribute( 'aria-expanded' ) === 'false' &&\n\t\t\t\tkeyCode === RIGHT;\n\n\t\t\tif ( ( [ LEFT, RIGHT ] as number[] ).includes( keyCode ) ) {\n\t\t\t\t// Calculate to the next element.\n\t\t\t\tlet nextIndex;\n\t\t\t\tif ( keyCode === LEFT ) {\n\t\t\t\t\tnextIndex = Math.max( 0, currentColumnIndex - 1 );\n\t\t\t\t} else {\n\t\t\t\t\tnextIndex = Math.min(\n\t\t\t\t\t\tcurrentColumnIndex + 1,\n\t\t\t\t\t\tfocusablesInRow.length - 1\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Focus is at the left most column.\n\t\t\t\tif ( canExpandCollapse ) {\n\t\t\t\t\tif ( keyCode === LEFT ) {\n\t\t\t\t\t\t// Left:\n\t\t\t\t\t\t// If a row is focused, and it is expanded, collapses the current row.\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tactiveRow.getAttribute( 'aria-expanded' ) === 'true'\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tonCollapseRow( activeRow );\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// If a row is focused, and it is collapsed, moves to the parent row (if there is one).\n\t\t\t\t\t\tconst level = Math.max(\n\t\t\t\t\t\t\tparseInt(\n\t\t\t\t\t\t\t\tactiveRow?.getAttribute( 'aria-level' ) ?? '1',\n\t\t\t\t\t\t\t\t10\n\t\t\t\t\t\t\t) - 1,\n\t\t\t\t\t\t\t1\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst rows = Array.from(\n\t\t\t\t\t\t\ttreeGridElement.querySelectorAll< HTMLElement >(\n\t\t\t\t\t\t\t\t'[role=\"row\"]'\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t);\n\t\t\t\t\t\tlet parentRow = activeRow;\n\t\t\t\t\t\tconst currentRowIndex = rows.indexOf( activeRow );\n\t\t\t\t\t\tfor ( let i = currentRowIndex; i >= 0; i-- ) {\n\t\t\t\t\t\t\tconst ariaLevel =\n\t\t\t\t\t\t\t\trows[ i ].getAttribute( 'aria-level' );\n\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tariaLevel !== null &&\n\t\t\t\t\t\t\t\tparseInt( ariaLevel, 10 ) === level\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tparentRow = rows[ i ];\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tgetRowFocusables( parentRow )?.[ 0 ]?.focus();\n\t\t\t\t\t}\n\t\t\t\t\tif ( keyCode === RIGHT ) {\n\t\t\t\t\t\t// Right:\n\t\t\t\t\t\t// If a row is focused, and it is collapsed, expands the current row.\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tactiveRow.getAttribute( 'aria-expanded' ) ===\n\t\t\t\t\t\t\t'false'\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tonExpandRow( activeRow );\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// If a row is focused, and it is expanded, focuses the next cell in the row.\n\t\t\t\t\t\tconst focusableItems = getRowFocusables( activeRow );\n\t\t\t\t\t\tif ( focusableItems.length > 0 ) {\n\t\t\t\t\t\t\tfocusableItems[ nextIndex ]?.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will start reading text on continued use of left/right arrow\n\t\t\t\t\t// keys.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Focus the next element. If at most left column and row is collapsed, moving right is not allowed as this will expand. However, if row is collapsed, moving left is allowed.\n\t\t\t\tif ( cannotFocusNextColumn ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tfocusablesInRow[ nextIndex ].focus();\n\n\t\t\t\t// Prevent key use for anything else. This ensures Voiceover\n\t\t\t\t// doesn't try to handle key navigation.\n\t\t\t\tevent.preventDefault();\n\t\t\t} else if ( ( [ UP, DOWN ] as number[] ).includes( keyCode ) ) {\n\t\t\t\t// Calculate the rowIndex of the next row.\n\t\t\t\tconst rows = Array.from(\n\t\t\t\t\ttreeGridElement.querySelectorAll< HTMLElement >(\n\t\t\t\t\t\t'[role=\"row\"]'\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t\tconst currentRowIndex = rows.indexOf( activeRow );\n\t\t\t\tlet nextRowIndex;\n\n\t\t\t\tif ( keyCode === UP ) {\n\t\t\t\t\tnextRowIndex = Math.max( 0, currentRowIndex - 1 );\n\t\t\t\t} else {\n\t\t\t\t\tnextRowIndex = Math.min(\n\t\t\t\t\t\tcurrentRowIndex + 1,\n\t\t\t\t\t\trows.length - 1\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Focus is either at the top or bottom edge of the grid. Do nothing.\n\t\t\t\tif ( nextRowIndex === currentRowIndex ) {\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will start navigating horizontally when reaching the vertical\n\t\t\t\t\t// bounds of a table.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Get the focusables in the next row.\n\t\t\t\tconst focusablesInNextRow = getRowFocusables(\n\t\t\t\t\trows[ nextRowIndex ]\n\t\t\t\t);\n\n\t\t\t\t// If for some reason there are no focusables in the next row, do nothing.\n\t\t\t\tif ( ! focusablesInNextRow || ! focusablesInNextRow.length ) {\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will still focus text when using arrow keys, while this\n\t\t\t\t\t// component should limit navigation to focusables.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Try to focus the element in the next row that's at a similar column to the activeElement.\n\t\t\t\tconst nextIndex = Math.min(\n\t\t\t\t\tcurrentColumnIndex,\n\t\t\t\t\tfocusablesInNextRow.length - 1\n\t\t\t\t);\n\t\t\t\tfocusablesInNextRow[ nextIndex ].focus();\n\n\t\t\t\t// Let consumers know the row that was originally focused,\n\t\t\t\t// and the row that is now in focus.\n\t\t\t\tonFocusRow( event, activeRow, rows[ nextRowIndex ] );\n\n\t\t\t\t// Prevent key use for anything else. This ensures Voiceover\n\t\t\t\t// doesn't try to handle key navigation.\n\t\t\t\tevent.preventDefault();\n\t\t\t} else if ( ( [ HOME, END ] as number[] ).includes( keyCode ) ) {\n\t\t\t\t// Calculate the rowIndex of the next row.\n\t\t\t\tconst rows = Array.from(\n\t\t\t\t\ttreeGridElement.querySelectorAll< HTMLElement >(\n\t\t\t\t\t\t'[role=\"row\"]'\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t\tconst currentRowIndex = rows.indexOf( activeRow );\n\t\t\t\tlet nextRowIndex;\n\n\t\t\t\tif ( keyCode === HOME ) {\n\t\t\t\t\tnextRowIndex = 0;\n\t\t\t\t} else {\n\t\t\t\t\tnextRowIndex = rows.length - 1;\n\t\t\t\t}\n\n\t\t\t\t// Focus is either at the top or bottom edge of the grid. Do nothing.\n\t\t\t\tif ( nextRowIndex === currentRowIndex ) {\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will start navigating horizontally when reaching the vertical\n\t\t\t\t\t// bounds of a table.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Get the focusables in the next row.\n\t\t\t\tconst focusablesInNextRow = getRowFocusables(\n\t\t\t\t\trows[ nextRowIndex ]\n\t\t\t\t);\n\n\t\t\t\t// If for some reason there are no focusables in the next row, do nothing.\n\t\t\t\tif ( ! focusablesInNextRow || ! focusablesInNextRow.length ) {\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will still focus text when using arrow keys, while this\n\t\t\t\t\t// component should limit navigation to focusables.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Try to focus the element in the next row that's at a similar column to the activeElement.\n\t\t\t\tconst nextIndex = Math.min(\n\t\t\t\t\tcurrentColumnIndex,\n\t\t\t\t\tfocusablesInNextRow.length - 1\n\t\t\t\t);\n\t\t\t\tfocusablesInNextRow[ nextIndex ].focus();\n\n\t\t\t\t// Let consumers know the row that was originally focused,\n\t\t\t\t// and the row that is now in focus.\n\t\t\t\tonFocusRow( event, activeRow, rows[ nextRowIndex ] );\n\n\t\t\t\t// Prevent key use for anything else. This ensures Voiceover\n\t\t\t\t// doesn't try to handle key navigation.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t},\n\t\t[ onExpandRow, onCollapseRow, onFocusRow ]\n\t);\n\n\t/* Disable reason: A treegrid is implemented using a table element. */\n\t/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */\n\treturn (\n\t\t<RovingTabIndexContainer>\n\t\t\t{\n\t\t\t\t// Prevent browser mode from triggering in NVDA by wrapping List View\n\t\t\t\t// in a role=application wrapper.\n\t\t\t\t// see: https://github.com/WordPress/gutenberg/issues/43729\n\t\t\t }\n\t\t\t<div role=\"application\" aria-label={ applicationAriaLabel }>\n\t\t\t\t<table\n\t\t\t\t\t{ ...props }\n\t\t\t\t\trole=\"treegrid\"\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t\tref={ ref }\n\t\t\t\t>\n\t\t\t\t\t<tbody>{ children }</tbody>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t</RovingTabIndexContainer>\n\t);\n\t/* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */\n}\n\n/**\n * `TreeGrid` is used to create a tree hierarchy.\n * It is not a visually styled component, but instead helps with adding\n * keyboard navigation and roving tab index behaviors to tree grid structures.\n *\n * A tree grid is a hierarchical 2 dimensional UI component, for example it could be\n * used to implement a file system browser.\n *\n * A tree grid allows the user to navigate using arrow keys.\n * Up/down to navigate vertically across rows, and left/right to navigate horizontally\n * between focusables in a row.\n *\n * The `TreeGrid` renders both a `table` and `tbody` element, and is intended to be used\n * with `TreeGridRow` (`tr`) and `TreeGridCell` (`td`) to build out a grid.\n *\n * ```jsx\n * function TreeMenu() {\n * \treturn (\n * \t\t<TreeGrid>\n * \t\t\t<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 2 }>\n * \t\t\t\t<TreeGridCell>\n * \t\t\t\t\t{ ( props ) => (\n * \t\t\t\t\t\t<Button onClick={ onSelect } { ...props }>Select</Button>\n * \t\t\t\t\t) }\n * \t\t\t\t</TreeGridCell>\n * \t\t\t\t<TreeGridCell>\n * \t\t\t\t\t{ ( props ) => (\n * \t\t\t\t\t\t<Button onClick={ onMove } { ...props }>Move</Button>\n * \t\t\t\t\t) }\n * \t\t\t\t</TreeGridCell>\n * \t\t\t</TreeGridRow>\n * \t\t\t<TreeGridRow level={ 1 } positionInSet={ 2 } setSize={ 2 }>\n * \t\t\t\t<TreeGridCell>\n * \t\t\t\t\t{ ( props ) => (\n * \t\t\t\t\t\t<Button onClick={ onSelect } { ...props }>Select</Button>\n * \t\t\t\t\t) }\n * \t\t\t\t</TreeGridCell>\n * \t\t\t\t<TreeGridCell>\n * \t\t\t\t\t{ ( props ) => (\n * \t\t\t\t\t\t<Button onClick={ onMove } { ...props }>Move</Button>\n * \t\t\t\t\t) }\n * \t\t\t\t</TreeGridCell>\n * \t\t\t</TreeGridRow>\n * \t\t\t<TreeGridRow level={ 2 } positionInSet={ 1 } setSize={ 1 }>\n * \t\t\t\t<TreeGridCell>\n * \t\t\t\t\t{ ( props ) => (\n * \t\t\t\t\t\t<Button onClick={ onSelect } { ...props }>Select</Button>\n * \t\t\t\t\t) }\n * \t\t\t\t</TreeGridCell>\n * \t\t\t\t<TreeGridCell>\n * \t\t\t\t\t{ ( props ) => (\n * \t\t\t\t\t\t<Button onClick={ onMove } { ...props }>Move</Button>\n * \t\t\t\t\t) }\n * \t\t\t\t</TreeGridCell>\n * \t\t\t</TreeGridRow>\n * \t\t</TreeGrid>\n * \t);\n * }\n * ```\n *\n * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}\n */\nexport const TreeGrid = forwardRef( UnforwardedTreeGrid );\n\nexport default TreeGrid;\nexport { default as TreeGridRow } from './row';\nexport { default as TreeGridCell } from './cell';\nexport { default as TreeGridItem } from './item';\n"]}

package/build/tree-grid/item.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.TreeGridItem = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -20,7 +20,7 @@ var _rovingTabIndexItem = _interopRequireDefault(require("./roving-tab-index-ite
 /**
  * Internal dependencies
  */
-var _default = (0, _element.forwardRef)(function TreeGridItem(_ref, ref) {
+function UnforwardedTreeGridItem(_ref, ref) {
   let {
     children,
     ...props
@@ -28,7 +28,18 @@ var _default = (0, _element.forwardRef)(function TreeGridItem(_ref, ref) {
   return (0, _element.createElement)(_rovingTabIndexItem.default, (0, _extends2.default)({
     ref: ref
   }, props), children);
-});
+}
+/**
+ * `TreeGridItem` is used to create a tree hierarchy.
+ * It is not a visually styled component, but instead helps with adding
+ * keyboard navigation and roving tab index behaviors to tree grid structures.
+ *
+ * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
+ */
+
 
+const TreeGridItem = (0, _element.forwardRef)(UnforwardedTreeGridItem);
+exports.TreeGridItem = TreeGridItem;
+var _default = TreeGridItem;
 exports.default = _default;
 //# sourceMappingURL=item.js.map

package/build/tree-grid/item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tree-grid/item.js"],"names":["TreeGridItem","ref","children","props"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;eAGe,yBAAY,SAASA,YAAT,OAE1BC,GAF0B,EAGzB;AAAA,MAFD;AAAEC,IAAAA,QAAF;AAAY,OAAGC;AAAf,GAEC;AACD,SACC,4BAAC,2BAAD;AAAoB,IAAA,GAAG,EAAGF;AAA1B,KAAqCE,KAArC,GACGD,QADH,CADD;AAKA,CATc,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport RovingTabIndexItem from './roving-tab-index-item';\n\nexport default forwardRef( function TreeGridItem(\n\t{ children, ...props },\n\tref\n) {\n\treturn (\n\t\t<RovingTabIndexItem ref={ ref } { ...props }>\n\t\t\t{ children }\n\t\t</RovingTabIndexItem>\n\t);\n} );\n"]}
+{"version":3,"sources":["@wordpress/components/src/tree-grid/item.tsx"],"names":["UnforwardedTreeGridItem","ref","children","props","TreeGridItem"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAIA,SAASA,uBAAT,OAECC,GAFD,EAGE;AAAA,MAFD;AAAEC,IAAAA,QAAF;AAAY,OAAGC;AAAf,GAEC;AACD,SACC,4BAAC,2BAAD;AAAoB,IAAA,GAAG,EAAGF;AAA1B,KAAqCE,KAArC,GACGD,QADH,CADD;AAKA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,YAAY,GAAG,yBAAYJ,uBAAZ,CAArB;;eAEQI,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport RovingTabIndexItem from './roving-tab-index-item';\nimport type { RovingTabIndexItemProps } from './types';\n\nfunction UnforwardedTreeGridItem(\n\t{ children, ...props }: RovingTabIndexItemProps,\n\tref: React.ForwardedRef< any >\n) {\n\treturn (\n\t\t<RovingTabIndexItem ref={ ref } { ...props }>\n\t\t\t{ children }\n\t\t</RovingTabIndexItem>\n\t);\n}\n\n/**\n * `TreeGridItem` is used to create a tree hierarchy.\n * It is not a visually styled component, but instead helps with adding\n * keyboard navigation and roving tab index behaviors to tree grid structures.\n *\n * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}\n */\nexport const TreeGridItem = forwardRef( UnforwardedTreeGridItem );\n\nexport default TreeGridItem;\n"]}

package/build/tree-grid/roving-tab-index-context.js

@@ -10,7 +10,7 @@ var _element = require("@wordpress/element");
 /**
  * WordPress dependencies
  */
-const RovingTabIndexContext = (0, _element.createContext)();
+const RovingTabIndexContext = (0, _element.createContext)(undefined);
 
 const useRovingTabIndexContext = () => (0, _element.useContext)(RovingTabIndexContext);
 

package/build/tree-grid/roving-tab-index-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tree-grid/roving-tab-index-context.js"],"names":["RovingTabIndexContext","useRovingTabIndexContext","RovingTabIndexProvider","Provider"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,qBAAqB,GAAG,6BAA9B;;AACO,MAAMC,wBAAwB,GAAG,MACvC,yBAAYD,qBAAZ,CADM;;;AAEA,MAAME,sBAAsB,GAAGF,qBAAqB,CAACG,QAArD","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\nconst RovingTabIndexContext = createContext();\nexport const useRovingTabIndexContext = () =>\n\tuseContext( RovingTabIndexContext );\nexport const RovingTabIndexProvider = RovingTabIndexContext.Provider;\n"]}
+{"version":3,"sources":["@wordpress/components/src/tree-grid/roving-tab-index-context.ts"],"names":["RovingTabIndexContext","undefined","useRovingTabIndexContext","RovingTabIndexProvider","Provider"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,qBAAqB,GAAG,4BAQ3BC,SAR2B,CAA9B;;AASO,MAAMC,wBAAwB,GAAG,MACvC,yBAAYF,qBAAZ,CADM;;;AAEA,MAAMG,sBAAsB,GAAGH,qBAAqB,CAACI,QAArD","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\nconst RovingTabIndexContext = createContext<\n\t| {\n\t\t\tlastFocusedElement: HTMLElement | undefined;\n\t\t\tsetLastFocusedElement: React.Dispatch<\n\t\t\t\tReact.SetStateAction< HTMLElement | undefined >\n\t\t\t>;\n\t  }\n\t| undefined\n>( undefined );\nexport const useRovingTabIndexContext = () =>\n\tuseContext( RovingTabIndexContext );\nexport const RovingTabIndexProvider = RovingTabIndexContext.Provider;\n"]}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.RovingTabIndexItem = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -16,14 +16,15 @@ var _rovingTabIndexContext = require("./roving-tab-index-context");
 /**
  * Internal dependencies
  */
-var _default = (0, _element.forwardRef)(function RovingTabIndexItem(_ref, forwardedRef) {
+const RovingTabIndexItem = (0, _element.forwardRef)(function UnforwardedRovingTabIndexItem(_ref, forwardedRef) {
   let {
     children,
     as: Component,
     ...props
   } = _ref;
   const localRef = (0, _element.useRef)();
-  const ref = forwardedRef || localRef;
+  const ref = forwardedRef || localRef; // @ts-expect-error - We actually want to throw an error if this is undefined.
+
   const {
     lastFocusedElement,
     setLastFocusedElement
@@ -31,10 +32,14 @@ var _default = (0, _element.forwardRef)(function RovingTabIndexItem(_ref, forwar
   let tabIndex;
 
   if (lastFocusedElement) {
-    tabIndex = lastFocusedElement === ref.current ? 0 : -1;
+    tabIndex = lastFocusedElement === ( // TODO: The original implementation simply used `ref.current` here, assuming
+    // that a forwarded ref would always be an object, which is not necessarily true.
+    // This workaround maintains the original runtime behavior in a type-safe way,
+    // but should be revisited.
+    'current' in ref ? ref.current : undefined) ? 0 : -1;
   }
 
-  const onFocus = event => setLastFocusedElement(event.target);
+  const onFocus = event => setLastFocusedElement === null || setLastFocusedElement === void 0 ? void 0 : setLastFocusedElement(event.target);
 
   const allProps = {
     ref,
@@ -47,8 +52,10 @@ var _default = (0, _element.forwardRef)(function RovingTabIndexItem(_ref, forwar
     return children(allProps);
   }
 
+  if (!Component) return null;
   return (0, _element.createElement)(Component, allProps, children);
 });
-
+exports.RovingTabIndexItem = RovingTabIndexItem;
+var _default = RovingTabIndexItem;
 exports.default = _default;
 //# sourceMappingURL=roving-tab-index-item.js.map

package/build/tree-grid/roving-tab-index-item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tree-grid/roving-tab-index-item.js"],"names":["RovingTabIndexItem","forwardedRef","children","as","Component","props","localRef","ref","lastFocusedElement","setLastFocusedElement","tabIndex","current","onFocus","event","target","allProps"],"mappings":";;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;eAGe,yBAAY,SAASA,kBAAT,OAE1BC,YAF0B,EAGzB;AAAA,MAFD;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,EAAE,EAAEC,SAAhB;AAA2B,OAAGC;AAA9B,GAEC;AACD,QAAMC,QAAQ,GAAG,sBAAjB;AACA,QAAMC,GAAG,GAAGN,YAAY,IAAIK,QAA5B;AACA,QAAM;AAAEE,IAAAA,kBAAF;AAAsBC,IAAAA;AAAtB,MACL,sDADD;AAEA,MAAIC,QAAJ;;AAEA,MAAKF,kBAAL,EAA0B;AACzBE,IAAAA,QAAQ,GAAGF,kBAAkB,KAAKD,GAAG,CAACI,OAA3B,GAAqC,CAArC,GAAyC,CAAC,CAArD;AACA;;AAED,QAAMC,OAAO,GAAKC,KAAF,IAAaJ,qBAAqB,CAAEI,KAAK,CAACC,MAAR,CAAlD;;AACA,QAAMC,QAAQ,GAAG;AAAER,IAAAA,GAAF;AAAOG,IAAAA,QAAP;AAAiBE,IAAAA,OAAjB;AAA0B,OAAGP;AAA7B,GAAjB;;AAEA,MAAK,OAAOH,QAAP,KAAoB,UAAzB,EAAsC;AACrC,WAAOA,QAAQ,CAAEa,QAAF,CAAf;AACA;;AAED,SAAO,4BAAC,SAAD,EAAgBA,QAAhB,EAA6Bb,QAA7B,CAAP;AACA,CAtBc,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useRovingTabIndexContext } from './roving-tab-index-context';\n\nexport default forwardRef( function RovingTabIndexItem(\n\t{ children, as: Component, ...props },\n\tforwardedRef\n) {\n\tconst localRef = useRef();\n\tconst ref = forwardedRef || localRef;\n\tconst { lastFocusedElement, setLastFocusedElement } =\n\t\tuseRovingTabIndexContext();\n\tlet tabIndex;\n\n\tif ( lastFocusedElement ) {\n\t\ttabIndex = lastFocusedElement === ref.current ? 0 : -1;\n\t}\n\n\tconst onFocus = ( event ) => setLastFocusedElement( event.target );\n\tconst allProps = { ref, tabIndex, onFocus, ...props };\n\n\tif ( typeof children === 'function' ) {\n\t\treturn children( allProps );\n\t}\n\n\treturn <Component { ...allProps }>{ children }</Component>;\n} );\n"]}
+{"version":3,"sources":["@wordpress/components/src/tree-grid/roving-tab-index-item.tsx"],"names":["RovingTabIndexItem","UnforwardedRovingTabIndexItem","forwardedRef","children","as","Component","props","localRef","ref","lastFocusedElement","setLastFocusedElement","tabIndex","current","undefined","onFocus","event","target","allProps"],"mappings":";;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAIO,MAAMA,kBAAkB,GAAG,yBACjC,SAASC,6BAAT,OAECC,YAFD,EAGE;AAAA,MAFD;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,EAAE,EAAEC,SAAhB;AAA2B,OAAGC;AAA9B,GAEC;AACD,QAAMC,QAAQ,GAAG,sBAAjB;AACA,QAAMC,GAAG,GAAGN,YAAY,IAAIK,QAA5B,CAFC,CAGD;;AACA,QAAM;AAAEE,IAAAA,kBAAF;AAAsBC,IAAAA;AAAtB,MACL,sDADD;AAEA,MAAIC,QAAJ;;AAEA,MAAKF,kBAAL,EAA0B;AACzBE,IAAAA,QAAQ,GACPF,kBAAkB,OAClB;AACA;AACA;AACA;AACE,iBAAaD,GAAb,GAAmBA,GAAG,CAACI,OAAvB,GAAiCC,SALjB,CAAlB,GAMG,CANH,GAOG,CAAC,CARL;AASA;;AAED,QAAMC,OAA+C,GAAKC,KAAF,IACvDL,qBADuD,aACvDA,qBADuD,uBACvDA,qBAAqB,CAAIK,KAAK,CAACC,MAAV,CADtB;;AAEA,QAAMC,QAAQ,GAAG;AAAET,IAAAA,GAAF;AAAOG,IAAAA,QAAP;AAAiBG,IAAAA,OAAjB;AAA0B,OAAGR;AAA7B,GAAjB;;AAEA,MAAK,OAAOH,QAAP,KAAoB,UAAzB,EAAsC;AACrC,WAAOA,QAAQ,CAAEc,QAAF,CAAf;AACA;;AAED,MAAK,CAAEZ,SAAP,EAAmB,OAAO,IAAP;AAEnB,SAAO,4BAAC,SAAD,EAAgBY,QAAhB,EAA6Bd,QAA7B,CAAP;AACA,CAnCgC,CAA3B;;eAsCQH,kB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useRovingTabIndexContext } from './roving-tab-index-context';\nimport type { RovingTabIndexItemProps } from './types';\n\nexport const RovingTabIndexItem = forwardRef(\n\tfunction UnforwardedRovingTabIndexItem(\n\t\t{ children, as: Component, ...props }: RovingTabIndexItemProps,\n\t\tforwardedRef: React.ForwardedRef< any >\n\t) {\n\t\tconst localRef = useRef< any >();\n\t\tconst ref = forwardedRef || localRef;\n\t\t// @ts-expect-error - We actually want to throw an error if this is undefined.\n\t\tconst { lastFocusedElement, setLastFocusedElement } =\n\t\t\tuseRovingTabIndexContext();\n\t\tlet tabIndex;\n\n\t\tif ( lastFocusedElement ) {\n\t\t\ttabIndex =\n\t\t\t\tlastFocusedElement ===\n\t\t\t\t// TODO: The original implementation simply used `ref.current` here, assuming\n\t\t\t\t// that a forwarded ref would always be an object, which is not necessarily true.\n\t\t\t\t// This workaround maintains the original runtime behavior in a type-safe way,\n\t\t\t\t// but should be revisited.\n\t\t\t\t( 'current' in ref ? ref.current : undefined )\n\t\t\t\t\t? 0\n\t\t\t\t\t: -1;\n\t\t}\n\n\t\tconst onFocus: React.FocusEventHandler< HTMLElement > = ( event ) =>\n\t\t\tsetLastFocusedElement?.( event.target );\n\t\tconst allProps = { ref, tabIndex, onFocus, ...props };\n\n\t\tif ( typeof children === 'function' ) {\n\t\t\treturn children( allProps );\n\t\t}\n\n\t\tif ( ! Component ) return null;\n\n\t\treturn <Component { ...allProps }>{ children }</Component>;\n\t}\n);\n\nexport default RovingTabIndexItem;\n"]}

package/build/tree-grid/roving-tab-index.js

@@ -21,9 +21,6 @@ var _rovingTabIndexContext = require("./roving-tab-index-context");
  * Provider for adding roving tab index behaviors to tree grid structures.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md
- *
- * @param {Object}    props          Component props.
- * @param {WPElement} props.children Children to be rendered
  */
 function RovingTabIndex(_ref) {
   let {

package/build/tree-grid/roving-tab-index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tree-grid/roving-tab-index.js"],"names":["RovingTabIndex","children","lastFocusedElement","setLastFocusedElement","providerValue"],"mappings":";;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,cAAT,OAAwC;AAAA,MAAf;AAAEC,IAAAA;AAAF,GAAe;AACtD,QAAM,CAAEC,kBAAF,EAAsBC,qBAAtB,IAAgD,wBAAtD,CADsD,CAGtD;AACA;AACA;;AACA,QAAMC,aAAa,GAAG,sBACrB,OAAQ;AAAEF,IAAAA,kBAAF;AAAsBC,IAAAA;AAAtB,GAAR,CADqB,EAErB,CAAED,kBAAF,CAFqB,CAAtB;AAKA,SACC,4BAAC,6CAAD;AAAwB,IAAA,KAAK,EAAGE;AAAhC,KACGH,QADH,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { RovingTabIndexProvider } from './roving-tab-index-context';\n\n/**\n * Provider for adding roving tab index behaviors to tree grid structures.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md\n *\n * @param {Object}    props          Component props.\n * @param {WPElement} props.children Children to be rendered\n */\nexport default function RovingTabIndex( { children } ) {\n\tconst [ lastFocusedElement, setLastFocusedElement ] = useState();\n\n\t// Use `useMemo` to avoid creation of a new object for the providerValue\n\t// on every render. Only create a new object when the `lastFocusedElement`\n\t// value changes.\n\tconst providerValue = useMemo(\n\t\t() => ( { lastFocusedElement, setLastFocusedElement } ),\n\t\t[ lastFocusedElement ]\n\t);\n\n\treturn (\n\t\t<RovingTabIndexProvider value={ providerValue }>\n\t\t\t{ children }\n\t\t</RovingTabIndexProvider>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/tree-grid/roving-tab-index.tsx"],"names":["RovingTabIndex","children","lastFocusedElement","setLastFocusedElement","providerValue"],"mappings":";;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACe,SAASA,cAAT,OAIX;AAAA,MAJoC;AACvCC,IAAAA;AADuC,GAIpC;AACH,QAAM,CAAEC,kBAAF,EAAsBC,qBAAtB,IACL,wBADD,CADG,CAIH;AACA;AACA;;AACA,QAAMC,aAAa,GAAG,sBACrB,OAAQ;AAAEF,IAAAA,kBAAF;AAAsBC,IAAAA;AAAtB,GAAR,CADqB,EAErB,CAAED,kBAAF,CAFqB,CAAtB;AAKA,SACC,4BAAC,6CAAD;AAAwB,IAAA,KAAK,EAAGE;AAAhC,KACGH,QADH,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { RovingTabIndexProvider } from './roving-tab-index-context';\n\n/**\n * Provider for adding roving tab index behaviors to tree grid structures.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md\n */\nexport default function RovingTabIndex( {\n\tchildren,\n}: {\n\tchildren: React.ReactNode;\n} ) {\n\tconst [ lastFocusedElement, setLastFocusedElement ] =\n\t\tuseState< HTMLElement >();\n\n\t// Use `useMemo` to avoid creation of a new object for the providerValue\n\t// on every render. Only create a new object when the `lastFocusedElement`\n\t// value changes.\n\tconst providerValue = useMemo(\n\t\t() => ( { lastFocusedElement, setLastFocusedElement } ),\n\t\t[ lastFocusedElement ]\n\t);\n\n\treturn (\n\t\t<RovingTabIndexProvider value={ providerValue }>\n\t\t\t{ children }\n\t\t</RovingTabIndexProvider>\n\t);\n}\n"]}