@wordpress/components 23.8.0 → 24.0.0

package/build/tab-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["TabButton","tabId","children","selected","rest","undefined","TabPanel","className","tabs","selectOnMove","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","activateTabAutomatically","_childIndex","child","click","selectedTab","find","name","selectedId","initialTab","tab","disabled","firstEnabledTab","map","icon","title"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseState,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseCallback,\n} from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? undefined : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\t__experimentalIsFocusable\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n *   console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n *   <TabPanel\n *     className=\"my-tab-panel\"\n *     activeClass=\"active-tab\"\n *     onSelect={ onSelect }\n *     tabs={ [\n *       {\n *         name: 'tab1',\n *         title: 'Tab 1',\n *         className: 'tab-one',\n *       },\n *       {\n *         name: 'tab2',\n *         title: 'Tab 2',\n *         className: 'tab-two',\n *       },\n *     ] }\n *   >\n *     { ( tab ) => <p>{ tab.title }</p> }\n *   </TabPanel>\n * );\n * ```\n */\nexport function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tselectOnMove = true,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect,\n}: WordPressComponentProps< TabPanelProps, 'div', false > ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = useCallback(\n\t\t( tabKey: string ) => {\n\t\t\tsetSelected( tabKey );\n\t\t\tonSelect?.( tabKey );\n\t\t},\n\t\t[ onSelect ]\n\t);\n\n\t// Simulate a click on the newly focused tab, which causes the component\n\t// to show the `tab-panel` associated with the clicked tab.\n\tconst activateTabAutomatically = (\n\t\t_childIndex: number,\n\t\tchild: HTMLButtonElement\n\t) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = tabs.find( ( { name } ) => name === selected );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\t// Handle selecting the initial tab.\n\tuseLayoutEffect( () => {\n\t\t// If there's a selected tab, don't override it.\n\t\tif ( selectedTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst initialTab = tabs.find( ( tab ) => tab.name === initialTabName );\n\n\t\t// Wait for the denoted initial tab to be declared before making a\n\t\t// selection. This ensures that if a tab is declared lazily it can\n\t\t// still receive initial selection.\n\t\tif ( initialTabName && ! initialTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( initialTab && ! initialTab.disabled ) {\n\t\t\t// Select the initial tab if it's not disabled.\n\t\t\thandleTabSelection( initialTab.name );\n\t\t} else {\n\t\t\t// Fallback to the first enabled tab when the initial is disabled.\n\t\t\tconst firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );\n\t\t\tif ( firstEnabledTab ) handleTabSelection( firstEnabledTab.name );\n\t\t}\n\t}, [ tabs, selectedTab, initialTabName, handleTabSelection ] );\n\n\t// Handle the currently selected tab becoming disabled.\n\tuseEffect( () => {\n\t\t// This effect only runs when the selected tab is defined and becomes disabled.\n\t\tif ( ! selectedTab?.disabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );\n\n\t\t// If the currently selected tab becomes disabled, select the first enabled tab.\n\t\t// (if there is one).\n\t\tif ( firstEnabledTab ) {\n\t\t\thandleTabSelection( firstEnabledTab.name );\n\t\t}\n\t}, [ tabs, selectedTab?.disabled, handleTabSelection ] );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={\n\t\t\t\t\tselectOnMove ? activateTabAutomatically : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t\tdisabled={ tab.disabled }\n\t\t\t\t\t\tlabel={ tab.icon && tab.title }\n\t\t\t\t\t\ticon={ tab.icon }\n\t\t\t\t\t\tshowTooltip={ !! tab.icon }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! tab.icon && tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default TabPanel;\n"]}
+{"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["TabButton","tabId","children","selected","rest","undefined","TabPanel","className","tabs","selectOnMove","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","activateTabAutomatically","_childIndex","child","click","selectedTab","find","name","selectedId","initialTab","tab","disabled","firstEnabledTab","map","icon","title"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseState,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseCallback,\n} from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? undefined : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\t__experimentalIsFocusable\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n *   console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n *   <TabPanel\n *     className=\"my-tab-panel\"\n *     activeClass=\"active-tab\"\n *     onSelect={ onSelect }\n *     tabs={ [\n *       {\n *         name: 'tab1',\n *         title: 'Tab 1',\n *         className: 'tab-one',\n *       },\n *       {\n *         name: 'tab2',\n *         title: 'Tab 2',\n *         className: 'tab-two',\n *       },\n *     ] }\n *   >\n *     { ( tab ) => <p>{ tab.title }</p> }\n *   </TabPanel>\n * );\n * ```\n */\nexport function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tselectOnMove = true,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect,\n}: WordPressComponentProps< TabPanelProps, 'div', false > ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = useCallback(\n\t\t( tabKey: string ) => {\n\t\t\tsetSelected( tabKey );\n\t\t\tonSelect?.( tabKey );\n\t\t},\n\t\t[ onSelect ]\n\t);\n\n\t// Simulate a click on the newly focused tab, which causes the component\n\t// to show the `tab-panel` associated with the clicked tab.\n\tconst activateTabAutomatically = (\n\t\t_childIndex: number,\n\t\tchild: HTMLElement\n\t) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = tabs.find( ( { name } ) => name === selected );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\t// Handle selecting the initial tab.\n\tuseLayoutEffect( () => {\n\t\t// If there's a selected tab, don't override it.\n\t\tif ( selectedTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst initialTab = tabs.find( ( tab ) => tab.name === initialTabName );\n\n\t\t// Wait for the denoted initial tab to be declared before making a\n\t\t// selection. This ensures that if a tab is declared lazily it can\n\t\t// still receive initial selection.\n\t\tif ( initialTabName && ! initialTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( initialTab && ! initialTab.disabled ) {\n\t\t\t// Select the initial tab if it's not disabled.\n\t\t\thandleTabSelection( initialTab.name );\n\t\t} else {\n\t\t\t// Fallback to the first enabled tab when the initial is disabled.\n\t\t\tconst firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );\n\t\t\tif ( firstEnabledTab ) handleTabSelection( firstEnabledTab.name );\n\t\t}\n\t}, [ tabs, selectedTab, initialTabName, handleTabSelection ] );\n\n\t// Handle the currently selected tab becoming disabled.\n\tuseEffect( () => {\n\t\t// This effect only runs when the selected tab is defined and becomes disabled.\n\t\tif ( ! selectedTab?.disabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );\n\n\t\t// If the currently selected tab becomes disabled, select the first enabled tab.\n\t\t// (if there is one).\n\t\tif ( firstEnabledTab ) {\n\t\t\thandleTabSelection( firstEnabledTab.name );\n\t\t}\n\t}, [ tabs, selectedTab?.disabled, handleTabSelection ] );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={\n\t\t\t\t\tselectOnMove ? activateTabAutomatically : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t\tdisabled={ tab.disabled }\n\t\t\t\t\t\tlabel={ tab.icon && tab.title }\n\t\t\t\t\t\ticon={ tab.icon }\n\t\t\t\t\t\tshowTooltip={ !! tab.icon }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! tab.icon && tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default TabPanel;\n"]}

package/build/theme/color-algorithms.js

@@ -49,7 +49,7 @@ function validateInputs(inputs) {
 
 function checkContrasts(inputs, outputs) {
   const background = inputs.background || _utils.COLORS.white;
-  const accent = inputs.accent || '#007cba';
+  const accent = inputs.accent || '#3858e9';
   const foreground = outputs.foreground || _utils.COLORS.gray[900];
   const gray = outputs.gray || _utils.COLORS.gray;
   return {

package/build/theme/color-algorithms.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/theme/color-algorithms.ts"],"names":["namesPlugin","a11yPlugin","generateThemeVariables","inputs","validateInputs","generatedColors","generateAccentDependentColors","accent","generateBackgroundDependentColors","background","warnContrastIssues","checkContrasts","colors","key","value","Object","entries","isValid","outputs","COLORS","white","foreground","gray","isReadable","undefined","grays","contrast","issues","error","values","accentDarker10","darken","toHex","accentDarker20","accentInverted","getForegroundForColor","foregroundInverted","generateShades","color","isDark","SHADES","limit","direction","range","Math","abs","toHsl","l","result","forEach","parseInt"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport type { ThemeInputValues, ThemeOutputValues } from './types';\nimport { COLORS } from '../utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nexport function generateThemeVariables(\n\tinputs: ThemeInputValues\n): ThemeOutputValues {\n\tvalidateInputs( inputs );\n\n\tconst generatedColors = {\n\t\t...generateAccentDependentColors( inputs.accent ),\n\t\t...generateBackgroundDependentColors( inputs.background ),\n\t};\n\n\twarnContrastIssues( checkContrasts( inputs, generatedColors ) );\n\n\treturn { colors: generatedColors };\n}\n\nfunction validateInputs( inputs: ThemeInputValues ) {\n\tfor ( const [ key, value ] of Object.entries( inputs ) ) {\n\t\tif ( typeof value !== 'undefined' && ! colord( value ).isValid() ) {\n\t\t\twarning(\n\t\t\t\t`wp.components.Theme: \"${ value }\" is not a valid color value for the '${ key }' prop.`\n\t\t\t);\n\t\t}\n\t}\n}\n\nexport function checkContrasts(\n\tinputs: ThemeInputValues,\n\toutputs: ThemeOutputValues[ 'colors' ]\n) {\n\tconst background = inputs.background || COLORS.white;\n\tconst accent = inputs.accent || '#007cba';\n\tconst foreground = outputs.foreground || COLORS.gray[ 900 ];\n\tconst gray = outputs.gray || COLORS.gray;\n\n\treturn {\n\t\taccent: colord( background ).isReadable( accent )\n\t\t\t? undefined\n\t\t\t: `The background color (\"${ background }\") does not have sufficient contrast against the accent color (\"${ accent }\").`,\n\t\tforeground: colord( background ).isReadable( foreground )\n\t\t\t? undefined\n\t\t\t: `The background color provided (\"${ background }\") does not have sufficient contrast against the standard foreground colors.`,\n\t\tgrays:\n\t\t\tcolord( background ).contrast( gray[ 600 ] ) >= 3 &&\n\t\t\tcolord( background ).contrast( gray[ 700 ] ) >= 4.5\n\t\t\t\t? undefined\n\t\t\t\t: `The background color provided (\"${ background }\") cannot generate a set of grayscale foreground colors with sufficient contrast. Try adjusting the color to be lighter or darker.`,\n\t};\n}\n\nfunction warnContrastIssues( issues: ReturnType< typeof checkContrasts > ) {\n\tfor ( const error of Object.values( issues ) ) {\n\t\tif ( error ) {\n\t\t\twarning( 'wp.components.Theme: ' + error );\n\t\t}\n\t}\n}\n\nfunction generateAccentDependentColors( accent?: string ) {\n\tif ( ! accent ) return {};\n\n\treturn {\n\t\taccent,\n\t\taccentDarker10: colord( accent ).darken( 0.1 ).toHex(),\n\t\taccentDarker20: colord( accent ).darken( 0.2 ).toHex(),\n\t\taccentInverted: getForegroundForColor( accent ),\n\t};\n}\n\nfunction generateBackgroundDependentColors( background?: string ) {\n\tif ( ! background ) return {};\n\n\tconst foreground = getForegroundForColor( background );\n\n\treturn {\n\t\tbackground,\n\t\tforeground,\n\t\tforegroundInverted: getForegroundForColor( foreground ),\n\t\tgray: generateShades( background, foreground ),\n\t};\n}\n\nfunction getForegroundForColor( color: string ) {\n\treturn colord( color ).isDark() ? COLORS.white : COLORS.gray[ 900 ];\n}\n\nexport function generateShades( background: string, foreground: string ) {\n\t// How much darkness you need to add to #fff to get the COLORS.gray[n] color\n\tconst SHADES = {\n\t\t100: 0.06,\n\t\t200: 0.121,\n\t\t300: 0.132,\n\t\t400: 0.2,\n\t\t600: 0.42,\n\t\t700: 0.543,\n\t\t800: 0.821,\n\t};\n\n\t// Darkness of COLORS.gray[ 900 ], relative to #fff\n\tconst limit = 0.884;\n\n\tconst direction = colord( background ).isDark() ? 'lighten' : 'darken';\n\n\t// Lightness delta between the background and foreground colors\n\tconst range =\n\t\tMath.abs(\n\t\t\tcolord( background ).toHsl().l - colord( foreground ).toHsl().l\n\t\t) / 100;\n\n\tconst result: Record< number, string > = {};\n\n\tObject.entries( SHADES ).forEach( ( [ key, value ] ) => {\n\t\tresult[ parseInt( key ) ] = colord( background )\n\t\t\t[ direction ]( ( value / limit ) * range )\n\t\t\t.toHex();\n\t} );\n\n\treturn result as NonNullable< ThemeOutputValues[ 'colors' ][ 'gray' ] >;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/theme/color-algorithms.ts"],"names":["namesPlugin","a11yPlugin","generateThemeVariables","inputs","validateInputs","generatedColors","generateAccentDependentColors","accent","generateBackgroundDependentColors","background","warnContrastIssues","checkContrasts","colors","key","value","Object","entries","isValid","outputs","COLORS","white","foreground","gray","isReadable","undefined","grays","contrast","issues","error","values","accentDarker10","darken","toHex","accentDarker20","accentInverted","getForegroundForColor","foregroundInverted","generateShades","color","isDark","SHADES","limit","direction","range","Math","abs","toHsl","l","result","forEach","parseInt"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport type { ThemeInputValues, ThemeOutputValues } from './types';\nimport { COLORS } from '../utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nexport function generateThemeVariables(\n\tinputs: ThemeInputValues\n): ThemeOutputValues {\n\tvalidateInputs( inputs );\n\n\tconst generatedColors = {\n\t\t...generateAccentDependentColors( inputs.accent ),\n\t\t...generateBackgroundDependentColors( inputs.background ),\n\t};\n\n\twarnContrastIssues( checkContrasts( inputs, generatedColors ) );\n\n\treturn { colors: generatedColors };\n}\n\nfunction validateInputs( inputs: ThemeInputValues ) {\n\tfor ( const [ key, value ] of Object.entries( inputs ) ) {\n\t\tif ( typeof value !== 'undefined' && ! colord( value ).isValid() ) {\n\t\t\twarning(\n\t\t\t\t`wp.components.Theme: \"${ value }\" is not a valid color value for the '${ key }' prop.`\n\t\t\t);\n\t\t}\n\t}\n}\n\nexport function checkContrasts(\n\tinputs: ThemeInputValues,\n\toutputs: ThemeOutputValues[ 'colors' ]\n) {\n\tconst background = inputs.background || COLORS.white;\n\tconst accent = inputs.accent || '#3858e9';\n\tconst foreground = outputs.foreground || COLORS.gray[ 900 ];\n\tconst gray = outputs.gray || COLORS.gray;\n\n\treturn {\n\t\taccent: colord( background ).isReadable( accent )\n\t\t\t? undefined\n\t\t\t: `The background color (\"${ background }\") does not have sufficient contrast against the accent color (\"${ accent }\").`,\n\t\tforeground: colord( background ).isReadable( foreground )\n\t\t\t? undefined\n\t\t\t: `The background color provided (\"${ background }\") does not have sufficient contrast against the standard foreground colors.`,\n\t\tgrays:\n\t\t\tcolord( background ).contrast( gray[ 600 ] ) >= 3 &&\n\t\t\tcolord( background ).contrast( gray[ 700 ] ) >= 4.5\n\t\t\t\t? undefined\n\t\t\t\t: `The background color provided (\"${ background }\") cannot generate a set of grayscale foreground colors with sufficient contrast. Try adjusting the color to be lighter or darker.`,\n\t};\n}\n\nfunction warnContrastIssues( issues: ReturnType< typeof checkContrasts > ) {\n\tfor ( const error of Object.values( issues ) ) {\n\t\tif ( error ) {\n\t\t\twarning( 'wp.components.Theme: ' + error );\n\t\t}\n\t}\n}\n\nfunction generateAccentDependentColors( accent?: string ) {\n\tif ( ! accent ) return {};\n\n\treturn {\n\t\taccent,\n\t\taccentDarker10: colord( accent ).darken( 0.1 ).toHex(),\n\t\taccentDarker20: colord( accent ).darken( 0.2 ).toHex(),\n\t\taccentInverted: getForegroundForColor( accent ),\n\t};\n}\n\nfunction generateBackgroundDependentColors( background?: string ) {\n\tif ( ! background ) return {};\n\n\tconst foreground = getForegroundForColor( background );\n\n\treturn {\n\t\tbackground,\n\t\tforeground,\n\t\tforegroundInverted: getForegroundForColor( foreground ),\n\t\tgray: generateShades( background, foreground ),\n\t};\n}\n\nfunction getForegroundForColor( color: string ) {\n\treturn colord( color ).isDark() ? COLORS.white : COLORS.gray[ 900 ];\n}\n\nexport function generateShades( background: string, foreground: string ) {\n\t// How much darkness you need to add to #fff to get the COLORS.gray[n] color\n\tconst SHADES = {\n\t\t100: 0.06,\n\t\t200: 0.121,\n\t\t300: 0.132,\n\t\t400: 0.2,\n\t\t600: 0.42,\n\t\t700: 0.543,\n\t\t800: 0.821,\n\t};\n\n\t// Darkness of COLORS.gray[ 900 ], relative to #fff\n\tconst limit = 0.884;\n\n\tconst direction = colord( background ).isDark() ? 'lighten' : 'darken';\n\n\t// Lightness delta between the background and foreground colors\n\tconst range =\n\t\tMath.abs(\n\t\t\tcolord( background ).toHsl().l - colord( foreground ).toHsl().l\n\t\t) / 100;\n\n\tconst result: Record< number, string > = {};\n\n\tObject.entries( SHADES ).forEach( ( [ key, value ] ) => {\n\t\tresult[ parseInt( key ) ] = colord( background )\n\t\t\t[ direction ]( ( value / limit ) * range )\n\t\t\t.toHex();\n\t} );\n\n\treturn result as NonNullable< ThemeOutputValues[ 'colors' ][ 'gray' ] >;\n}\n"]}

package/build/toolbar/toolbar-button/index.js

@@ -75,8 +75,7 @@ function UnforwardedToolbarButton(_ref, ref) {
     className: (0, _classnames.default)('components-toolbar-button', className)
   }, extraProps, props, {
     ref: ref
-  }), // @ts-expect-error
-  toolbarItemProps => (0, _element.createElement)(_button.default, (0, _extends2.default)({
+  }), toolbarItemProps => (0, _element.createElement)(_button.default, (0, _extends2.default)({
     label: title,
     isPressed: isActive,
     disabled: isDisabled

package/build/toolbar/toolbar-button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/toolbar/toolbar-button/index.tsx"],"names":["UnforwardedToolbarButton","ref","children","className","containerClassName","extraProps","isActive","isDisabled","title","props","accessibleToolbarState","ToolbarContext","icon","shortcut","subscript","event","stopPropagation","onClick","toolbarItemProps","ToolbarButton"],"mappings":";;;;;;;;;AASA;;;;AANA;;AAWA;;AACA;;AACA;;AACA;;AAjBA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AASA,SAASA,wBAAT,OAWCC,GAXD,EAYE;AAAA,MAXD;AACCC,IAAAA,QADD;AAECC,IAAAA,SAFD;AAGCC,IAAAA,kBAHD;AAICC,IAAAA,UAJD;AAKCC,IAAAA,QALD;AAMCC,IAAAA,UAND;AAOCC,IAAAA,KAPD;AAQC,OAAGC;AARJ,GAWC;AACD,QAAMC,sBAAsB,GAAG,yBAAYC,uBAAZ,CAA/B;;AAEA,MAAK,CAAED,sBAAP,EAAgC;AAC/B,WACC,4BAAC,+BAAD;AAAwB,MAAA,SAAS,EAAGN;AAApC,OACC,4BAAC,eAAD;AACC,MAAA,GAAG,EAAGH,GADP;AAEC,MAAA,IAAI,EAAGQ,KAAK,CAACG,IAFd;AAGC,MAAA,KAAK,EAAGJ,KAHT;AAIC,MAAA,QAAQ,EAAGC,KAAK,CAACI,QAJlB;AAKC,wBAAiBJ,KAAK,CAACK,SALxB;AAMC,MAAA,OAAO,EACNC,KADS,IAKL;AACJA,QAAAA,KAAK,CAACC,eAAN,GADI,CAEJ;;AACA,YAAKP,KAAK,CAACQ,OAAX,EAAqB;AACpBR,UAAAA,KAAK,CAACQ,OAAN,CAAeF,KAAf;AACA;AACD,OAjBF;AAkBC,MAAA,SAAS,EAAG,yBACX,6BADW,EAEXZ,SAFW,CAlBb;AAsBC,MAAA,SAAS,EAAGG,QAtBb;AAuBC,MAAA,QAAQ,EAAGC,UAvBZ;AAwBC;AAxBD,OAyBMF,UAzBN,EA0BMI,KA1BN,GA4BGP,QA5BH,CADD,CADD;AAkCA,GAtCA,CAwCD;AACA;AACA;;;AACA,SACC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAG,yBAAY,2BAAZ,EAAyCC,SAAzC;AADb,KAEME,UAFN,EAGMI,KAHN;AAIC,IAAA,GAAG,EAAGR;AAJP,MAOE;AACEiB,EAAAA,gBAAF,IACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAGV,KADT;AAEC,IAAA,SAAS,EAAGF,QAFb;AAGC,IAAA,QAAQ,EAAGC;AAHZ,KAIMW,gBAJN,GAMGhB,QANH,CATH,CADD;AAsBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMiB,aAAa,GAAG,yBAAYnB,wBAAZ,CAAtB;;eACQmB,a","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport ToolbarItem from '../toolbar-item';\nimport ToolbarContext from '../toolbar-context';\nimport ToolbarButtonContainer from './toolbar-button-container';\nimport type { ToolbarButtonProps } from './types';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type React from 'react';\n\nfunction UnforwardedToolbarButton(\n\t{\n\t\tchildren,\n\t\tclassName,\n\t\tcontainerClassName,\n\t\textraProps,\n\t\tisActive,\n\t\tisDisabled,\n\t\ttitle,\n\t\t...props\n\t}: WordPressComponentProps< ToolbarButtonProps, typeof Button, false >,\n\tref: ForwardedRef< any >\n) {\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tif ( ! accessibleToolbarState ) {\n\t\treturn (\n\t\t\t<ToolbarButtonContainer className={ containerClassName }>\n\t\t\t\t<Button\n\t\t\t\t\tref={ ref }\n\t\t\t\t\ticon={ props.icon }\n\t\t\t\t\tlabel={ title }\n\t\t\t\t\tshortcut={ props.shortcut }\n\t\t\t\t\tdata-subscript={ props.subscript }\n\t\t\t\t\tonClick={ (\n\t\t\t\t\t\tevent: React.MouseEvent<\n\t\t\t\t\t\t\tHTMLButtonElement & HTMLAnchorElement,\n\t\t\t\t\t\t\tMouseEvent\n\t\t\t\t\t\t>\n\t\t\t\t\t) => {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t// TODO: Possible bug; maybe use onClick instead of props.onClick.\n\t\t\t\t\t\tif ( props.onClick ) {\n\t\t\t\t\t\t\tprops.onClick( event );\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'components-toolbar__control',\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tisPressed={ isActive }\n\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\tdata-toolbar-item\n\t\t\t\t\t{ ...extraProps }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</Button>\n\t\t\t</ToolbarButtonContainer>\n\t\t);\n\t}\n\n\t// ToobarItem will pass all props to the render prop child, which will pass\n\t// all props to Button. This means that ToolbarButton has the same API as\n\t// Button.\n\treturn (\n\t\t<ToolbarItem\n\t\t\tclassName={ classnames( 'components-toolbar-button', className ) }\n\t\t\t{ ...extraProps }\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{\n\t\t\t\t// @ts-expect-error\n\t\t\t\t( toolbarItemProps ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tlabel={ title }\n\t\t\t\t\t\tisPressed={ isActive }\n\t\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\t\t{ ...toolbarItemProps }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</Button>\n\t\t\t\t)\n\t\t\t}\n\t\t</ToolbarItem>\n\t);\n}\n\n/**\n * ToolbarButton can be used to add actions to a toolbar, usually inside a Toolbar\n * or ToolbarGroup when used to create general interfaces.\n *\n * ```jsx\n * import { Toolbar, ToolbarButton } from '@wordpress/components';\n * import { edit } from '@wordpress/icons';\n *\n * function MyToolbar() {\n *   return (\n *\t\t<Toolbar label=\"Options\">\n *\t\t\t<ToolbarButton\n *\t\t\t\ticon={ edit }\n *\t\t\t\tlabel=\"Edit\"\n *\t\t\t\tonClick={ () => alert( 'Editing' ) }\n *\t\t\t/>\n *\t\t</Toolbar>\n *   );\n * }\n * ```\n */\nexport const ToolbarButton = forwardRef( UnforwardedToolbarButton );\nexport default ToolbarButton;\n"]}
+{"version":3,"sources":["@wordpress/components/src/toolbar/toolbar-button/index.tsx"],"names":["UnforwardedToolbarButton","ref","children","className","containerClassName","extraProps","isActive","isDisabled","title","props","accessibleToolbarState","ToolbarContext","icon","shortcut","subscript","event","stopPropagation","onClick","toolbarItemProps","ToolbarButton"],"mappings":";;;;;;;;;AASA;;;;AANA;;AAWA;;AACA;;AACA;;AACA;;AAjBA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AASA,SAASA,wBAAT,OAWCC,GAXD,EAYE;AAAA,MAXD;AACCC,IAAAA,QADD;AAECC,IAAAA,SAFD;AAGCC,IAAAA,kBAHD;AAICC,IAAAA,UAJD;AAKCC,IAAAA,QALD;AAMCC,IAAAA,UAND;AAOCC,IAAAA,KAPD;AAQC,OAAGC;AARJ,GAWC;AACD,QAAMC,sBAAsB,GAAG,yBAAYC,uBAAZ,CAA/B;;AAEA,MAAK,CAAED,sBAAP,EAAgC;AAC/B,WACC,4BAAC,+BAAD;AAAwB,MAAA,SAAS,EAAGN;AAApC,OACC,4BAAC,eAAD;AACC,MAAA,GAAG,EAAGH,GADP;AAEC,MAAA,IAAI,EAAGQ,KAAK,CAACG,IAFd;AAGC,MAAA,KAAK,EAAGJ,KAHT;AAIC,MAAA,QAAQ,EAAGC,KAAK,CAACI,QAJlB;AAKC,wBAAiBJ,KAAK,CAACK,SALxB;AAMC,MAAA,OAAO,EACNC,KADS,IAKL;AACJA,QAAAA,KAAK,CAACC,eAAN,GADI,CAEJ;;AACA,YAAKP,KAAK,CAACQ,OAAX,EAAqB;AACpBR,UAAAA,KAAK,CAACQ,OAAN,CAAeF,KAAf;AACA;AACD,OAjBF;AAkBC,MAAA,SAAS,EAAG,yBACX,6BADW,EAEXZ,SAFW,CAlBb;AAsBC,MAAA,SAAS,EAAGG,QAtBb;AAuBC,MAAA,QAAQ,EAAGC,UAvBZ;AAwBC;AAxBD,OAyBMF,UAzBN,EA0BMI,KA1BN,GA4BGP,QA5BH,CADD,CADD;AAkCA,GAtCA,CAwCD;AACA;AACA;;;AACA,SACC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAG,yBAAY,2BAAZ,EAAyCC,SAAzC;AADb,KAEME,UAFN,EAGMI,KAHN;AAIC,IAAA,GAAG,EAAGR;AAJP,MAMKiB,gBAAF,IACD,4BAAC,eAAD;AACC,IAAA,KAAK,EAAGV,KADT;AAEC,IAAA,SAAS,EAAGF,QAFb;AAGC,IAAA,QAAQ,EAAGC;AAHZ,KAIMW,gBAJN,GAMGhB,QANH,CAPF,CADD;AAmBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMiB,aAAa,GAAG,yBAAYnB,wBAAZ,CAAtB;;eACQmB,a","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport ToolbarItem from '../toolbar-item';\nimport ToolbarContext from '../toolbar-context';\nimport ToolbarButtonContainer from './toolbar-button-container';\nimport type { ToolbarButtonProps } from './types';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type React from 'react';\n\nfunction UnforwardedToolbarButton(\n\t{\n\t\tchildren,\n\t\tclassName,\n\t\tcontainerClassName,\n\t\textraProps,\n\t\tisActive,\n\t\tisDisabled,\n\t\ttitle,\n\t\t...props\n\t}: WordPressComponentProps< ToolbarButtonProps, typeof Button, false >,\n\tref: ForwardedRef< any >\n) {\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tif ( ! accessibleToolbarState ) {\n\t\treturn (\n\t\t\t<ToolbarButtonContainer className={ containerClassName }>\n\t\t\t\t<Button\n\t\t\t\t\tref={ ref }\n\t\t\t\t\ticon={ props.icon }\n\t\t\t\t\tlabel={ title }\n\t\t\t\t\tshortcut={ props.shortcut }\n\t\t\t\t\tdata-subscript={ props.subscript }\n\t\t\t\t\tonClick={ (\n\t\t\t\t\t\tevent: React.MouseEvent<\n\t\t\t\t\t\t\tHTMLButtonElement & HTMLAnchorElement,\n\t\t\t\t\t\t\tMouseEvent\n\t\t\t\t\t\t>\n\t\t\t\t\t) => {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t// TODO: Possible bug; maybe use onClick instead of props.onClick.\n\t\t\t\t\t\tif ( props.onClick ) {\n\t\t\t\t\t\t\tprops.onClick( event );\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'components-toolbar__control',\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tisPressed={ isActive }\n\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\tdata-toolbar-item\n\t\t\t\t\t{ ...extraProps }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</Button>\n\t\t\t</ToolbarButtonContainer>\n\t\t);\n\t}\n\n\t// ToobarItem will pass all props to the render prop child, which will pass\n\t// all props to Button. This means that ToolbarButton has the same API as\n\t// Button.\n\treturn (\n\t\t<ToolbarItem\n\t\t\tclassName={ classnames( 'components-toolbar-button', className ) }\n\t\t\t{ ...extraProps }\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ ( toolbarItemProps ) => (\n\t\t\t\t<Button\n\t\t\t\t\tlabel={ title }\n\t\t\t\t\tisPressed={ isActive }\n\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\t{ ...toolbarItemProps }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t</ToolbarItem>\n\t);\n}\n\n/**\n * ToolbarButton can be used to add actions to a toolbar, usually inside a Toolbar\n * or ToolbarGroup when used to create general interfaces.\n *\n * ```jsx\n * import { Toolbar, ToolbarButton } from '@wordpress/components';\n * import { edit } from '@wordpress/icons';\n *\n * function MyToolbar() {\n *   return (\n *\t\t<Toolbar label=\"Options\">\n *\t\t\t<ToolbarButton\n *\t\t\t\ticon={ edit }\n *\t\t\t\tlabel=\"Edit\"\n *\t\t\t\tonClick={ () => alert( 'Editing' ) }\n *\t\t\t/>\n *\t\t</Toolbar>\n *   );\n * }\n * ```\n */\nexport const ToolbarButton = forwardRef( UnforwardedToolbarButton );\nexport default ToolbarButton;\n"]}

package/build/toolbar/toolbar-item/index.js

@@ -17,8 +17,6 @@ var _warning = _interopRequireDefault(require("@wordpress/warning"));
 
 var _toolbarContext = _interopRequireDefault(require("../toolbar-context"));
 
-// @ts-nocheck
-
 /**
  * External dependencies
  */
@@ -53,6 +51,10 @@ function ToolbarItem(_ref, ref) {
       return (0, _element.createElement)(Component, allProps, children);
     }
 
+    if (typeof children !== 'function') {
+      return null;
+    }
+
     return children(allProps);
   }
 

package/build/toolbar/toolbar-item/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/toolbar/toolbar-item/index.js"],"names":["ToolbarItem","ref","children","as","Component","props","accessibleToolbarState","ToolbarContext","allProps"],"mappings":";;;;;;;;;AAUA;;;;AALA;;AAMA;;AAKA;;AAhBA;;AAEA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAGA,SAASA,WAAT,OAA6DC,GAA7D,EAAmE;AAAA,MAA7C;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,EAAE,EAAEC,SAAhB;AAA2B,OAAGC;AAA9B,GAA6C;AAClE,QAAMC,sBAAsB,GAAG,yBAAYC,uBAAZ,CAA/B;;AAEA,MAAK,OAAOL,QAAP,KAAoB,UAApB,IAAkC,CAAEE,SAAzC,EAAqD;AACpD,mHACC,yIACC,2EAFF;AAIA,WAAO,IAAP;AACA;;AAED,QAAMI,QAAQ,GAAG,EAAE,GAAGH,KAAL;AAAYJ,IAAAA,GAAZ;AAAiB,yBAAqB;AAAtC,GAAjB;;AAEA,MAAK,CAAEK,sBAAP,EAAgC;AAC/B,QAAKF,SAAL,EAAiB;AAChB,aAAO,4BAAC,SAAD,EAAgBI,QAAhB,EAA6BN,QAA7B,CAAP;AACA;;AACD,WAAOA,QAAQ,CAAEM,QAAF,CAAf;AACA;;AAED,SACC,4BAAC,oBAAD,6BACMF,sBADN,EAEME,QAFN;AAGC,IAAA,EAAE,EAAGJ;AAHN,MAKGF,QALH,CADD;AASA;;eAEc,yBAAYF,WAAZ,C","sourcesContent":["// @ts-nocheck\n\n/**\n * External dependencies\n */\nimport { ToolbarItem as BaseToolbarItem } from 'reakit/Toolbar';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport ToolbarContext from '../toolbar-context';\n\nfunction ToolbarItem( { children, as: Component, ...props }, ref ) {\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tif ( typeof children !== 'function' && ! Component ) {\n\t\twarning(\n\t\t\t'`ToolbarItem` is a generic headless component. You must pass either a `children` prop as a function or an `as` prop as a component. ' +\n\t\t\t\t'See https://developer.wordpress.org/block-editor/components/toolbar-item/'\n\t\t);\n\t\treturn null;\n\t}\n\n\tconst allProps = { ...props, ref, 'data-toolbar-item': true };\n\n\tif ( ! accessibleToolbarState ) {\n\t\tif ( Component ) {\n\t\t\treturn <Component { ...allProps }>{ children }</Component>;\n\t\t}\n\t\treturn children( allProps );\n\t}\n\n\treturn (\n\t\t<BaseToolbarItem\n\t\t\t{ ...accessibleToolbarState }\n\t\t\t{ ...allProps }\n\t\t\tas={ Component }\n\t\t>\n\t\t\t{ children }\n\t\t</BaseToolbarItem>\n\t);\n}\n\nexport default forwardRef( ToolbarItem );\n"]}
+{"version":3,"sources":["@wordpress/components/src/toolbar/toolbar-item/index.tsx"],"names":["ToolbarItem","ref","children","as","Component","props","accessibleToolbarState","ToolbarContext","allProps"],"mappings":";;;;;;;;;AASA;;;;AANA;;AAOA;;AAKA;;AAfA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AAGA,SAASA,WAAT,OAMCC,GAND,EAOE;AAAA,MAND;AACCC,IAAAA,QADD;AAECC,IAAAA,EAAE,EAAEC,SAFL;AAGC,OAAGC;AAHJ,GAMC;AACD,QAAMC,sBAAsB,GAAG,yBAAYC,uBAAZ,CAA/B;;AAEA,MAAK,OAAOL,QAAP,KAAoB,UAApB,IAAkC,CAAEE,SAAzC,EAAqD;AACpD,mHACC,yIACC,2EAFF;AAIA,WAAO,IAAP;AACA;;AAED,QAAMI,QAAQ,GAAG,EAAE,GAAGH,KAAL;AAAYJ,IAAAA,GAAZ;AAAiB,yBAAqB;AAAtC,GAAjB;;AAEA,MAAK,CAAEK,sBAAP,EAAgC;AAC/B,QAAKF,SAAL,EAAiB;AAChB,aAAO,4BAAC,SAAD,EAAgBI,QAAhB,EAA6BN,QAA7B,CAAP;AACA;;AACD,QAAK,OAAOA,QAAP,KAAoB,UAAzB,EAAsC;AACrC,aAAO,IAAP;AACA;;AACD,WAAOA,QAAQ,CAAEM,QAAF,CAAf;AACA;;AAED,SACC,4BAAC,oBAAD,6BACMF,sBADN,EAEME,QAFN;AAGC,IAAA,EAAE,EAAGJ;AAHN,MAKGF,QALH,CADD;AASA;;eAEc,yBAAYF,WAAZ,C","sourcesContent":["/**\n * External dependencies\n */\nimport { ToolbarItem as BaseToolbarItem } from 'reakit/Toolbar';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport ToolbarContext from '../toolbar-context';\n\nfunction ToolbarItem(\n\t{\n\t\tchildren,\n\t\tas: Component,\n\t\t...props\n\t}: React.ComponentPropsWithoutRef< typeof BaseToolbarItem >,\n\tref: ForwardedRef< any >\n) {\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tif ( typeof children !== 'function' && ! Component ) {\n\t\twarning(\n\t\t\t'`ToolbarItem` is a generic headless component. You must pass either a `children` prop as a function or an `as` prop as a component. ' +\n\t\t\t\t'See https://developer.wordpress.org/block-editor/components/toolbar-item/'\n\t\t);\n\t\treturn null;\n\t}\n\n\tconst allProps = { ...props, ref, 'data-toolbar-item': true };\n\n\tif ( ! accessibleToolbarState ) {\n\t\tif ( Component ) {\n\t\t\treturn <Component { ...allProps }>{ children }</Component>;\n\t\t}\n\t\tif ( typeof children !== 'function' ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn children( allProps );\n\t}\n\n\treturn (\n\t\t<BaseToolbarItem\n\t\t\t{ ...accessibleToolbarState }\n\t\t\t{ ...allProps }\n\t\t\tas={ Component }\n\t\t>\n\t\t\t{ children }\n\t\t</BaseToolbarItem>\n\t);\n}\n\nexport default forwardRef( ToolbarItem );\n"]}

package/build/tree-grid/index.js

@@ -123,7 +123,7 @@ ref) {
     const currentColumnIndex = focusablesInRow.indexOf(activeElement);
     const canExpandCollapse = 0 === currentColumnIndex;
 
-    const cannotFocusNextColumn = canExpandCollapse && activeRow.getAttribute('aria-expanded') === 'false' && keyCode === _keycodes.RIGHT;
+    const cannotFocusNextColumn = canExpandCollapse && (activeRow.getAttribute('data-expanded') === 'false' || activeRow.getAttribute('aria-expanded') === 'false') && keyCode === _keycodes.RIGHT;
 
     if ([_keycodes.LEFT, _keycodes.RIGHT].includes(keyCode)) {
       // Calculate to the next element.
@@ -142,7 +142,7 @@ ref) {
 
           // Left:
           // If a row is focused, and it is expanded, collapses the current row.
-          if (activeRow.getAttribute('aria-expanded') === 'true') {
+          if (activeRow.getAttribute('data-expanded') === 'true' || activeRow.getAttribute('aria-expanded') === 'true') {
             onCollapseRow(activeRow);
             event.preventDefault();
             return;
@@ -169,7 +169,7 @@ ref) {
         if (keyCode === _keycodes.RIGHT) {
           // Right:
           // If a row is focused, and it is collapsed, expands the current row.
-          if (activeRow.getAttribute('aria-expanded') === 'false') {
+          if (activeRow.getAttribute('data-expanded') === 'false' || activeRow.getAttribute('aria-expanded') === 'false') {
             onExpandRow(activeRow);
             event.preventDefault();
             return;

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

@@ -1 +1 @@
-{"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"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;AADA;;AAEA;;AAKA;;AA4XA;;AACA;;AACA;;AAxYA;AACA;AACA;;AAKA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,gBAAT,CAA2BC,UAA3B,EAAqD;AACpD,QAAMC,eAAe,GAAGC,WAAMC,SAAN,CAAgBC,IAAhB,CAAsBJ,UAAtB,EAAkC;AACzDK,IAAAA,UAAU,EAAE;AAD6C,GAAlC,CAAxB;;AAIA,SAAOJ,eAAe,CAACK,MAAhB,CAA0BH,SAAF,IAAiB;AAC/C,WAAOA,SAAS,CAACI,OAAV,CAAmB,cAAnB,MAAwCP,UAA/C;AACA,GAFM,CAAP;AAGA;AAED;AACA;AACA;AACA;;;AACA,SAASQ,mBAAT;AASC;AACAC,GAVD,EAWE;AAAA,MAVD;AACCC,IAAAA,QADD;AAECC,IAAAA,WAAW,GAAG,MAAM,CAAE,CAFvB;AAGCC,IAAAA,aAAa,GAAG,MAAM,CAAE,CAHzB;AAICC,IAAAA,UAAU,GAAG,MAAM,CAAE,CAJtB;AAKCC,IAAAA,oBALD;AAMC,OAAGC;AANJ,GAUC;AACD,QAAMC,SAAS,GAAG,0BACfC,KAAF,IAAsD;AACrD,UAAM;AAAEC,MAAAA,OAAF;AAAWC,MAAAA,OAAX;AAAoBC,MAAAA,OAApB;AAA6BC,MAAAA;AAA7B,QAAwCJ,KAA9C,CADqD,CAGrD;AACA;;AACA,UAAMK,qBAAqB,GAAGH,OAAO,IAAIC,OAAX,IAAsBC,MAApD;;AAEA,QACCC,qBAAqB,IACrB,CAAI,CAAEC,YAAF,EAAMC,cAAN,EAAYC,cAAZ,EAAkBC,eAAlB,EAAyBC,cAAzB,EAA+BC,aAA/B,CAAF,CAAqDC,QAArD,CACDX,OADC,CAFH,EAKE;AACD;AACA,KAdoD,CAgBrD;;;AACAD,IAAAA,KAAK,CAACa,eAAN;AAEA,UAAM;AAAEC,MAAAA;AAAF,QAAoBC,QAA1B;AACA,UAAM;AAAEC,MAAAA,aAAa,EAAEC;AAAjB,QAAqCjB,KAA3C;;AAEA,QACC,CAAEc,aAAF,IACA,CAAEG,eAAe,CAACC,QAAhB,CAA0BJ,aAA1B,CAFH,EAGE;AACD;AACA,KA3BoD,CA6BrD;;;AACA,UAAMK,SAAS,GACdL,aAAa,CAACxB,OAAd,CAAsC,cAAtC,CADD;;AAGA,QAAK,CAAE6B,SAAP,EAAmB;AAClB;AACA;;AAED,UAAMnC,eAAe,GAAGF,gBAAgB,CAAEqC,SAAF,CAAxC;AACA,UAAMC,kBAAkB,GAAGpC,eAAe,CAACqC,OAAhB,CAC1BP,aAD0B,CAA3B;AAGA,UAAMQ,iBAAiB,GAAG,MAAMF,kBAAhC;;AACA,UAAMG,qBAAqB,GAC1BD,iBAAiB,KACfH,SAAS,CAACK,YAAV,CAAwB,eAAxB,MAA8C,OAA9C,IACDL,SAAS,CAACK,YAAV,CAAwB,eAAxB,MAA8C,OAF9B,CAAjB,IAGAvB,OAAO,KAAKQ,eAJb;;AAMA,QAAO,CAAED,cAAF,EAAQC,eAAR,CAAF,CAAgCG,QAAhC,CAA0CX,OAA1C,CAAL,EAA2D;AAC1D;AACA,UAAIwB,SAAJ;;AACA,UAAKxB,OAAO,KAAKO,cAAjB,EAAwB;AACvBiB,QAAAA,SAAS,GAAGC,IAAI,CAACC,GAAL,CAAU,CAAV,EAAaP,kBAAkB,GAAG,CAAlC,CAAZ;AACA,OAFD,MAEO;AACNK,QAAAA,SAAS,GAAGC,IAAI,CAACE,GAAL,CACXR,kBAAkB,GAAG,CADV,EAEXpC,eAAe,CAAC6C,MAAhB,GAAyB,CAFd,CAAZ;AAIA,OAVyD,CAY1D;;;AACA,UAAKP,iBAAL,EAAyB;AACxB,YAAKrB,OAAO,KAAKO,cAAjB,EAAwB;AAAA;;AACvB;AACA;AACA,cACCW,SAAS,CAACK,YAAV,CAAwB,eAAxB,MACC,MADD,IAEAL,SAAS,CAACK,YAAV,CAAwB,eAAxB,MAA8C,MAH/C,EAIE;AACD7B,YAAAA,aAAa,CAAEwB,SAAF,CAAb;AACAnB,YAAAA,KAAK,CAAC8B,cAAN;AACA;AACA,WAXsB,CAYvB;;;AACA,gBAAMC,KAAK,GAAGL,IAAI,CAACC,GAAL,CACbK,QAAQ,0BACPb,SADO,aACPA,SADO,uBACPA,SAAS,CAAEK,YAAX,CAAyB,YAAzB,CADO,yEACoC,GADpC,EAEP,EAFO,CAAR,GAGI,CAJS,EAKb,CALa,CAAd;AAOA,gBAAMS,IAAI,GAAGC,KAAK,CAACC,IAAN,CACZlB,eAAe,CAACmB,gBAAhB,CACC,cADD,CADY,CAAb;AAKA,cAAIC,SAAS,GAAGlB,SAAhB;AACA,gBAAMmB,eAAe,GAAGL,IAAI,CAACZ,OAAL,CAAcF,SAAd,CAAxB;;AACA,eAAM,IAAIoB,CAAC,GAAGD,eAAd,EAA+BC,CAAC,IAAI,CAApC,EAAuCA,CAAC,EAAxC,EAA6C;AAC5C,kBAAMC,SAAS,GACdP,IAAI,CAAEM,CAAF,CAAJ,CAAUf,YAAV,CAAwB,YAAxB,CADD;;AAGA,gBACCgB,SAAS,KAAK,IAAd,IACAR,QAAQ,CAAEQ,SAAF,EAAa,EAAb,CAAR,KAA8BT,KAF/B,EAGE;AACDM,cAAAA,SAAS,GAAGJ,IAAI,CAAEM,CAAF,CAAhB;AACA;AACA;AACD;;AACD,+BAAAzD,gBAAgB,CAAEuD,SAAF,CAAhB,8FAAiC,CAAjC,2EAAsCpD,KAAtC;AACA;;AACD,YAAKgB,OAAO,KAAKQ,eAAjB,EAAyB;AACxB;AACA;AACA,cACCU,SAAS,CAACK,YAAV,CAAwB,eAAxB,MACC,OADD,IAEAL,SAAS,CAACK,YAAV,CAAwB,eAAxB,MACC,OAJF,EAKE;AACD9B,YAAAA,WAAW,CAAEyB,SAAF,CAAX;AACAnB,YAAAA,KAAK,CAAC8B,cAAN;AACA;AACA,WAZuB,CAaxB;;;AACA,gBAAMW,cAAc,GAAG3D,gBAAgB,CAAEqC,SAAF,CAAvC;;AACA,cAAKsB,cAAc,CAACZ,MAAf,GAAwB,CAA7B,EAAiC;AAAA;;AAChC,qCAAAY,cAAc,CAAEhB,SAAF,CAAd,gFAA6BxC,KAA7B;AACA;AACD,SA5DuB,CA6DxB;AACA;AACA;;;AACAe,QAAAA,KAAK,CAAC8B,cAAN;AACA;AACA,OA/EyD,CAiF1D;;;AACA,UAAKP,qBAAL,EAA6B;AAC5B;AACA;;AACDvC,MAAAA,eAAe,CAAEyC,SAAF,CAAf,CAA6BxC,KAA7B,GArF0D,CAuF1D;AACA;;AACAe,MAAAA,KAAK,CAAC8B,cAAN;AACA,KA1FD,MA0FO,IAAO,CAAExB,YAAF,EAAMC,cAAN,CAAF,CAA6BK,QAA7B,CAAuCX,OAAvC,CAAL,EAAwD;AAC9D;AACA,YAAMgC,IAAI,GAAGC,KAAK,CAACC,IAAN,CACZlB,eAAe,CAACmB,gBAAhB,CACC,cADD,CADY,CAAb;AAKA,YAAME,eAAe,GAAGL,IAAI,CAACZ,OAAL,CAAcF,SAAd,CAAxB;AACA,UAAIuB,YAAJ;;AAEA,UAAKzC,OAAO,KAAKK,YAAjB,EAAsB;AACrBoC,QAAAA,YAAY,GAAGhB,IAAI,CAACC,GAAL,CAAU,CAAV,EAAaW,eAAe,GAAG,CAA/B,CAAf;AACA,OAFD,MAEO;AACNI,QAAAA,YAAY,GAAGhB,IAAI,CAACE,GAAL,CACdU,eAAe,GAAG,CADJ,EAEdL,IAAI,CAACJ,MAAL,GAAc,CAFA,CAAf;AAIA,OAjB6D,CAmB9D;;;AACA,UAAKa,YAAY,KAAKJ,eAAtB,EAAwC;AACvC;AACA;AACA;AACAtC,QAAAA,KAAK,CAAC8B,cAAN;AACA;AACA,OA1B6D,CA4B9D;;;AACA,YAAMa,mBAAmB,GAAG7D,gBAAgB,CAC3CmD,IAAI,CAAES,YAAF,CADuC,CAA5C,CA7B8D,CAiC9D;;AACA,UAAK,CAAEC,mBAAF,IAAyB,CAAEA,mBAAmB,CAACd,MAApD,EAA6D;AAC5D;AACA;AACA;AACA7B,QAAAA,KAAK,CAAC8B,cAAN;AACA;AACA,OAxC6D,CA0C9D;;;AACA,YAAML,SAAS,GAAGC,IAAI,CAACE,GAAL,CACjBR,kBADiB,EAEjBuB,mBAAmB,CAACd,MAApB,GAA6B,CAFZ,CAAlB;AAIAc,MAAAA,mBAAmB,CAAElB,SAAF,CAAnB,CAAiCxC,KAAjC,GA/C8D,CAiD9D;AACA;;AACAW,MAAAA,UAAU,CAAEI,KAAF,EAASmB,SAAT,EAAoBc,IAAI,CAAES,YAAF,CAAxB,CAAV,CAnD8D,CAqD9D;AACA;;AACA1C,MAAAA,KAAK,CAAC8B,cAAN;AACA,KAxDM,MAwDA,IAAO,CAAEpB,cAAF,EAAQC,aAAR,CAAF,CAA8BC,QAA9B,CAAwCX,OAAxC,CAAL,EAAyD;AAC/D;AACA,YAAMgC,IAAI,GAAGC,KAAK,CAACC,IAAN,CACZlB,eAAe,CAACmB,gBAAhB,CACC,cADD,CADY,CAAb;AAKA,YAAME,eAAe,GAAGL,IAAI,CAACZ,OAAL,CAAcF,SAAd,CAAxB;AACA,UAAIuB,YAAJ;;AAEA,UAAKzC,OAAO,KAAKS,cAAjB,EAAwB;AACvBgC,QAAAA,YAAY,GAAG,CAAf;AACA,OAFD,MAEO;AACNA,QAAAA,YAAY,GAAGT,IAAI,CAACJ,MAAL,GAAc,CAA7B;AACA,OAd8D,CAgB/D;;;AACA,UAAKa,YAAY,KAAKJ,eAAtB,EAAwC;AACvC;AACA;AACA;AACAtC,QAAAA,KAAK,CAAC8B,cAAN;AACA;AACA,OAvB8D,CAyB/D;;;AACA,YAAMa,mBAAmB,GAAG7D,gBAAgB,CAC3CmD,IAAI,CAAES,YAAF,CADuC,CAA5C,CA1B+D,CA8B/D;;AACA,UAAK,CAAEC,mBAAF,IAAyB,CAAEA,mBAAmB,CAACd,MAApD,EAA6D;AAC5D;AACA;AACA;AACA7B,QAAAA,KAAK,CAAC8B,cAAN;AACA;AACA,OArC8D,CAuC/D;;;AACA,YAAML,SAAS,GAAGC,IAAI,CAACE,GAAL,CACjBR,kBADiB,EAEjBuB,mBAAmB,CAACd,MAApB,GAA6B,CAFZ,CAAlB;AAIAc,MAAAA,mBAAmB,CAAElB,SAAF,CAAnB,CAAiCxC,KAAjC,GA5C+D,CA8C/D;AACA;;AACAW,MAAAA,UAAU,CAAEI,KAAF,EAASmB,SAAT,EAAoBc,IAAI,CAAES,YAAF,CAAxB,CAAV,CAhD+D,CAkD/D;AACA;;AACA1C,MAAAA,KAAK,CAAC8B,cAAN;AACA;AACD,GAzPgB,EA0PjB,CAAEpC,WAAF,EAAeC,aAAf,EAA8BC,UAA9B,CA1PiB,CAAlB;AA6PA;;AACA;;AACA,SACC,4BAAC,uBAAD,QAMC;AAAK,IAAA,IAAI,EAAC,aAAV;AAAwB,kBAAaC;AAArC,KACC,gEACMC,KADN;AAEC,IAAA,IAAI,EAAC,UAFN;AAGC,IAAA,SAAS,EAAGC,SAHb;AAIC,IAAA,GAAG,EAAGP;AAJP,MAMC,2CAASC,QAAT,CAND,CADD,CAND,CADD;AAmBA;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMmD,QAAQ,GAAG,yBAAYrD,mBAAZ,CAAjB;;eAEQqD,Q","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\t( activeRow.getAttribute( 'data-expanded' ) === 'false' ||\n\t\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( 'data-expanded' ) ===\n\t\t\t\t\t\t\t\t'true' ||\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( 'data-expanded' ) ===\n\t\t\t\t\t\t\t\t'false' ||\n\t\t\t\t\t\t\tactiveRow.getAttribute( 'aria-expanded' ) ===\n\t\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/utils/colors-values.js

@@ -37,11 +37,11 @@ const ALERT = {
   yellow: '#f0b849',
   red: '#d94f4f',
   green: '#4ab866'
-}; // Matches @wordpress/base-styles
+}; // Matches the Modern admin scheme in @wordpress/base-styles
 
 const ADMIN = {
-  theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba))',
-  themeDark10: 'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1))'
+  theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))',
+  themeDark10: 'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))'
 };
 const UI = {
   theme: ADMIN.theme,

package/build/utils/colors-values.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/utils/colors-values.js"],"names":["white","GRAY","ALERT","yellow","red","green","ADMIN","theme","themeDark10","UI","background","backgroundDisabled","border","borderHover","borderFocus","borderDisabled","textDisabled","textDark","darkGrayPlaceholder","lightGrayPlaceholder","COLORS","Object","freeze","gray","alert","ui"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,KAAK,GAAG,MAAd,C,CAEA;;AACA,MAAMC,IAAI,GAAG;AACZ,OAAK,SADO;AAEZ,OAAK,SAFO;;AAGZ;AACA,OAAK,SAJO;;AAKZ;AACA,OAAK,SANO;AAOZ,OAAK,MAPO;;AAQZ;AACA,OAAK,MATO;;AAUZ;AACA,OAAK,SAXO;;AAYZ;AACA,OAAK;AAbO,CAAb,C,CAgBA;;AACA,MAAMC,KAAK,GAAG;AACbC,EAAAA,MAAM,EAAE,SADK;AAEbC,EAAAA,GAAG,EAAE,SAFQ;AAGbC,EAAAA,KAAK,EAAE;AAHM,CAAd,C,CAMA;;AACA,MAAMC,KAAK,GAAG;AACbC,EAAAA,KAAK,EAAE,yEADM;AAEbC,EAAAA,WAAW,EACV;AAHY,CAAd;AAMA,MAAMC,EAAE,GAAG;AACVF,EAAAA,KAAK,EAAED,KAAK,CAACC,KADH;AAEVC,EAAAA,WAAW,EAAEF,KAAK,CAACE,WAFT;AAGVE,EAAAA,UAAU,EAAEV,KAHF;AAIVW,EAAAA,kBAAkB,EAAEV,IAAI,CAAE,GAAF,CAJd;AAKVW,EAAAA,MAAM,EAAEX,IAAI,CAAE,GAAF,CALF;AAMVY,EAAAA,WAAW,EAAEZ,IAAI,CAAE,GAAF,CANP;AAOVa,EAAAA,WAAW,EAAER,KAAK,CAACE,WAPT;AAQVO,EAAAA,cAAc,EAAEd,IAAI,CAAE,GAAF,CARV;AASVe,EAAAA,YAAY,EAAEf,IAAI,CAAE,GAAF,CATR;AAUVgB,EAAAA,QAAQ,EAAEjB,KAVA;AAYV;AACAkB,EAAAA,mBAAmB,EAAE,kBAAMjB,IAAI,CAAE,GAAF,CAAV,EAAmB,IAAnB,CAbX;AAcVkB,EAAAA,oBAAoB,EAAE,kBAAMnB,KAAN,EAAa,IAAb;AAdZ,CAAX;AAiBO,MAAMoB,MAAM,GAAGC,MAAM,CAACC,MAAP,CAAe;AACpC;AACD;AACA;AACCC,EAAAA,IAAI,EAAEtB,IAJ8B;AAKpCD,EAAAA,KALoC;AAMpCwB,EAAAA,KAAK,EAAEtB,KAN6B;AAOpCuB,EAAAA,EAAE,EAAEhB;AAPgC,CAAf,CAAf;;eAUQW,M","sourcesContent":["/**\n * Internal dependencies\n */\nimport { rgba } from './colors';\n\nconst white = '#fff';\n\n// Matches the grays in @wordpress/base-styles\nconst GRAY = {\n\t900: '#1e1e1e',\n\t800: '#2f2f2f',\n\t/** Meets 4.6:1 text contrast against white. */\n\t700: '#757575',\n\t/** Meets 3:1 UI or large text contrast against white. */\n\t600: '#949494',\n\t400: '#ccc',\n\t/** Used for most borders. */\n\t300: '#ddd',\n\t/** Used sparingly for light borders. */\n\t200: '#e0e0e0',\n\t/** Used for light gray backgrounds. */\n\t100: '#f0f0f0',\n};\n\n// Matches @wordpress/base-styles\nconst ALERT = {\n\tyellow: '#f0b849',\n\tred: '#d94f4f',\n\tgreen: '#4ab866',\n};\n\n// Matches @wordpress/base-styles\nconst ADMIN = {\n\ttheme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba))',\n\tthemeDark10:\n\t\t'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1))',\n};\n\nconst UI = {\n\ttheme: ADMIN.theme,\n\tthemeDark10: ADMIN.themeDark10,\n\tbackground: white,\n\tbackgroundDisabled: GRAY[ 100 ],\n\tborder: GRAY[ 600 ],\n\tborderHover: GRAY[ 700 ],\n\tborderFocus: ADMIN.themeDark10,\n\tborderDisabled: GRAY[ 400 ],\n\ttextDisabled: GRAY[ 600 ],\n\ttextDark: white,\n\n\t// Matches @wordpress/base-styles\n\tdarkGrayPlaceholder: rgba( GRAY[ 900 ], 0.62 ),\n\tlightGrayPlaceholder: rgba( white, 0.65 ),\n};\n\nexport const COLORS = Object.freeze( {\n\t/**\n\t * The main gray color object.\n\t */\n\tgray: GRAY,\n\twhite,\n\talert: ALERT,\n\tui: UI,\n} );\n\nexport default COLORS;\n"]}
+{"version":3,"sources":["@wordpress/components/src/utils/colors-values.js"],"names":["white","GRAY","ALERT","yellow","red","green","ADMIN","theme","themeDark10","UI","background","backgroundDisabled","border","borderHover","borderFocus","borderDisabled","textDisabled","textDark","darkGrayPlaceholder","lightGrayPlaceholder","COLORS","Object","freeze","gray","alert","ui"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,KAAK,GAAG,MAAd,C,CAEA;;AACA,MAAMC,IAAI,GAAG;AACZ,OAAK,SADO;AAEZ,OAAK,SAFO;;AAGZ;AACA,OAAK,SAJO;;AAKZ;AACA,OAAK,SANO;AAOZ,OAAK,MAPO;;AAQZ;AACA,OAAK,MATO;;AAUZ;AACA,OAAK,SAXO;;AAYZ;AACA,OAAK;AAbO,CAAb,C,CAgBA;;AACA,MAAMC,KAAK,GAAG;AACbC,EAAAA,MAAM,EAAE,SADK;AAEbC,EAAAA,GAAG,EAAE,SAFQ;AAGbC,EAAAA,KAAK,EAAE;AAHM,CAAd,C,CAMA;;AACA,MAAMC,KAAK,GAAG;AACbC,EAAAA,KAAK,EAAE,yEADM;AAEbC,EAAAA,WAAW,EACV;AAHY,CAAd;AAMA,MAAMC,EAAE,GAAG;AACVF,EAAAA,KAAK,EAAED,KAAK,CAACC,KADH;AAEVC,EAAAA,WAAW,EAAEF,KAAK,CAACE,WAFT;AAGVE,EAAAA,UAAU,EAAEV,KAHF;AAIVW,EAAAA,kBAAkB,EAAEV,IAAI,CAAE,GAAF,CAJd;AAKVW,EAAAA,MAAM,EAAEX,IAAI,CAAE,GAAF,CALF;AAMVY,EAAAA,WAAW,EAAEZ,IAAI,CAAE,GAAF,CANP;AAOVa,EAAAA,WAAW,EAAER,KAAK,CAACE,WAPT;AAQVO,EAAAA,cAAc,EAAEd,IAAI,CAAE,GAAF,CARV;AASVe,EAAAA,YAAY,EAAEf,IAAI,CAAE,GAAF,CATR;AAUVgB,EAAAA,QAAQ,EAAEjB,KAVA;AAYV;AACAkB,EAAAA,mBAAmB,EAAE,kBAAMjB,IAAI,CAAE,GAAF,CAAV,EAAmB,IAAnB,CAbX;AAcVkB,EAAAA,oBAAoB,EAAE,kBAAMnB,KAAN,EAAa,IAAb;AAdZ,CAAX;AAiBO,MAAMoB,MAAM,GAAGC,MAAM,CAACC,MAAP,CAAe;AACpC;AACD;AACA;AACCC,EAAAA,IAAI,EAAEtB,IAJ8B;AAKpCD,EAAAA,KALoC;AAMpCwB,EAAAA,KAAK,EAAEtB,KAN6B;AAOpCuB,EAAAA,EAAE,EAAEhB;AAPgC,CAAf,CAAf;;eAUQW,M","sourcesContent":["/**\n * Internal dependencies\n */\nimport { rgba } from './colors';\n\nconst white = '#fff';\n\n// Matches the grays in @wordpress/base-styles\nconst GRAY = {\n\t900: '#1e1e1e',\n\t800: '#2f2f2f',\n\t/** Meets 4.6:1 text contrast against white. */\n\t700: '#757575',\n\t/** Meets 3:1 UI or large text contrast against white. */\n\t600: '#949494',\n\t400: '#ccc',\n\t/** Used for most borders. */\n\t300: '#ddd',\n\t/** Used sparingly for light borders. */\n\t200: '#e0e0e0',\n\t/** Used for light gray backgrounds. */\n\t100: '#f0f0f0',\n};\n\n// Matches @wordpress/base-styles\nconst ALERT = {\n\tyellow: '#f0b849',\n\tred: '#d94f4f',\n\tgreen: '#4ab866',\n};\n\n// Matches the Modern admin scheme in @wordpress/base-styles\nconst ADMIN = {\n\ttheme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))',\n\tthemeDark10:\n\t\t'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))',\n};\n\nconst UI = {\n\ttheme: ADMIN.theme,\n\tthemeDark10: ADMIN.themeDark10,\n\tbackground: white,\n\tbackgroundDisabled: GRAY[ 100 ],\n\tborder: GRAY[ 600 ],\n\tborderHover: GRAY[ 700 ],\n\tborderFocus: ADMIN.themeDark10,\n\tborderDisabled: GRAY[ 400 ],\n\ttextDisabled: GRAY[ 600 ],\n\ttextDark: white,\n\n\t// Matches @wordpress/base-styles\n\tdarkGrayPlaceholder: rgba( GRAY[ 900 ], 0.62 ),\n\tlightGrayPlaceholder: rgba( white, 0.65 ),\n};\n\nexport const COLORS = Object.freeze( {\n\t/**\n\t * The main gray color object.\n\t */\n\tgray: GRAY,\n\twhite,\n\talert: ALERT,\n\tui: UI,\n} );\n\nexport default COLORS;\n"]}

package/build/utils/use-deprecated-props.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDeprecated36pxDefaultSizeProp = useDeprecated36pxDefaultSizeProp;
+
+var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
+
+/**
+ * WordPress dependencies
+ */
+function useDeprecated36pxDefaultSizeProp(props,
+/** The component identifier in dot notation, e.g. `wp.components.ComponentName`. */
+componentIdentifier) {
+  const {
+    __next36pxDefaultSize,
+    __next40pxDefaultSize,
+    ...otherProps
+  } = props;
+
+  if (typeof __next36pxDefaultSize !== 'undefined') {
+    (0, _deprecated.default)('`__next36pxDefaultSize` prop in ' + componentIdentifier, {
+      alternative: '`__next40pxDefaultSize`',
+      since: '6.3'
+    });
+  }
+
+  return { ...otherProps,
+    __next40pxDefaultSize: __next40pxDefaultSize !== null && __next40pxDefaultSize !== void 0 ? __next40pxDefaultSize : __next36pxDefaultSize
+  };
+}
+//# sourceMappingURL=use-deprecated-props.js.map

package/build/utils/use-deprecated-props.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/utils/use-deprecated-props.ts"],"names":["useDeprecated36pxDefaultSizeProp","props","componentIdentifier","__next36pxDefaultSize","__next40pxDefaultSize","otherProps","alternative","since"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,SAASA,gCAAT,CAMNC,KANM;AAON;AACAC,mBARM,EASL;AACD,QAAM;AAAEC,IAAAA,qBAAF;AAAyBC,IAAAA,qBAAzB;AAAgD,OAAGC;AAAnD,MACLJ,KADD;;AAEA,MAAK,OAAOE,qBAAP,KAAiC,WAAtC,EAAoD;AACnD,6BAAY,qCAAqCD,mBAAjD,EAAsE;AACrEI,MAAAA,WAAW,EAAE,yBADwD;AAErEC,MAAAA,KAAK,EAAE;AAF8D,KAAtE;AAIA;;AAED,SAAO,EACN,GAAGF,UADG;AAEND,IAAAA,qBAAqB,EAAEA,qBAAF,aAAEA,qBAAF,cAAEA,qBAAF,GAA2BD;AAF1C,GAAP;AAIA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\nexport function useDeprecated36pxDefaultSizeProp<\n\tP extends Record< string, any > & {\n\t\t__next36pxDefaultSize?: boolean;\n\t\t__next40pxDefaultSize?: boolean;\n\t}\n>(\n\tprops: P,\n\t/** The component identifier in dot notation, e.g. `wp.components.ComponentName`. */\n\tcomponentIdentifier: string\n) {\n\tconst { __next36pxDefaultSize, __next40pxDefaultSize, ...otherProps } =\n\t\tprops;\n\tif ( typeof __next36pxDefaultSize !== 'undefined' ) {\n\t\tdeprecated( '`__next36pxDefaultSize` prop in ' + componentIdentifier, {\n\t\t\talternative: '`__next40pxDefaultSize`',\n\t\t\tsince: '6.3',\n\t\t} );\n\t}\n\n\treturn {\n\t\t...otherProps,\n\t\t__next40pxDefaultSize: __next40pxDefaultSize ?? __next36pxDefaultSize,\n\t};\n}\n"]}

package/build/view/component.js

@@ -30,13 +30,12 @@ var _base = _interopRequireDefault(require("@emotion/styled/base"));
  * }
  * ```
  */
-// @ts-expect-error
 const View = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
   target: "e19lxcc00"
 } : {
   target: "e19lxcc00",
   label: "View"
-})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdmlldy9jb21wb25lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlDYyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3ZpZXcvY29tcG9uZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB0eXBlIHsgUmVmQXR0cmlidXRlcyB9IGZyb20gJ3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBXb3JkUHJlc3NDb21wb25lbnQgfSBmcm9tICcuLi91aS9jb250ZXh0L3dvcmRwcmVzcy1jb21wb25lbnQnO1xuaW1wb3J0IHR5cGUgeyBWaWV3UHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuLyoqXG4gKiBgVmlld2AgaXMgYSBjb3JlIGNvbXBvbmVudCB0aGF0IHJlbmRlcnMgZXZlcnl0aGluZyBpbiB0aGUgbGlicmFyeS5cbiAqIEl0IGlzIHRoZSBwcmluY2lwbGUgY29tcG9uZW50IGluIHRoZSBlbnRpcmUgbGlicmFyeS5cbiAqXG4gKiBAZXhhbXBsZVxuICogYGBganN4XG4gKiBpbXBvcnQgeyBWaWV3IH0gZnJvbSBgQHdvcmRwcmVzcy9jb21wb25lbnRzYDtcbiAqXG4gKiBmdW5jdGlvbiBFeGFtcGxlKCkge1xuICogXHRyZXR1cm4gKFxuICogXHRcdDxWaWV3PlxuICogXHRcdFx0IENvZGUgaXMgUG9ldHJ5XG4gKiBcdFx0PC9WaWV3PlxuICogXHQpO1xuICogfVxuICogYGBgXG4gKi9cbi8vIEB0cy1leHBlY3QtZXJyb3JcbmV4cG9ydCBjb25zdCBWaWV3OiBXb3JkUHJlc3NDb21wb25lbnQ8XG5cdCdkaXYnLFxuXHRWaWV3UHJvcHMgJiBSZWZBdHRyaWJ1dGVzPCBhbnkgPlxuPiA9IHN0eWxlZC5kaXZgYDtcblxuVmlldy5zZWxlY3RvciA9ICcuY29tcG9uZW50cy12aWV3JztcblZpZXcuZGlzcGxheU5hbWUgPSAnVmlldyc7XG5cbmV4cG9ydCBkZWZhdWx0IFZpZXc7XG4iXX0= */");
+})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdmlldy9jb21wb25lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlDYyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3ZpZXcvY29tcG9uZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB0eXBlIHsgUmVmQXR0cmlidXRlcyB9IGZyb20gJ3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBXb3JkUHJlc3NDb21wb25lbnQgfSBmcm9tICcuLi91aS9jb250ZXh0L3dvcmRwcmVzcy1jb21wb25lbnQnO1xuaW1wb3J0IHR5cGUgeyBWaWV3UHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuLyoqXG4gKiBgVmlld2AgaXMgYSBjb3JlIGNvbXBvbmVudCB0aGF0IHJlbmRlcnMgZXZlcnl0aGluZyBpbiB0aGUgbGlicmFyeS5cbiAqIEl0IGlzIHRoZSBwcmluY2lwbGUgY29tcG9uZW50IGluIHRoZSBlbnRpcmUgbGlicmFyeS5cbiAqXG4gKiBAZXhhbXBsZVxuICogYGBganN4XG4gKiBpbXBvcnQgeyBWaWV3IH0gZnJvbSBgQHdvcmRwcmVzcy9jb21wb25lbnRzYDtcbiAqXG4gKiBmdW5jdGlvbiBFeGFtcGxlKCkge1xuICogXHRyZXR1cm4gKFxuICogXHRcdDxWaWV3PlxuICogXHRcdFx0IENvZGUgaXMgUG9ldHJ5XG4gKiBcdFx0PC9WaWV3PlxuICogXHQpO1xuICogfVxuICogYGBgXG4gKi9cbmV4cG9ydCBjb25zdCBWaWV3OiBXb3JkUHJlc3NDb21wb25lbnQ8XG5cdCdkaXYnLFxuXHRWaWV3UHJvcHMgJiBSZWZBdHRyaWJ1dGVzPCBhbnkgPixcblx0dHJ1ZVxuPiA9IHN0eWxlZC5kaXZgYDtcblxuVmlldy5zZWxlY3RvciA9ICcuY29tcG9uZW50cy12aWV3JztcblZpZXcuZGlzcGxheU5hbWUgPSAnVmlldyc7XG5cbmV4cG9ydCBkZWZhdWx0IFZpZXc7XG4iXX0= */");
 exports.View = View;
 View.selector = '.components-view';
 View.displayName = 'View';

package/build/view/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/view/component.tsx"],"names":["View","selector","displayName"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,IAGZ;AAAA;AAAA;AAAA;AAAA;AAAA,k8CAHM;;AAKPA,IAAI,CAACC,QAAL,GAAgB,kBAAhB;AACAD,IAAI,CAACE,WAAL,GAAmB,MAAnB;eAEeF,I","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport type { RefAttributes } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponent } from '../ui/context/wordpress-component';\nimport type { ViewProps } from './types';\n\n/**\n * `View` is a core component that renders everything in the library.\n * It is the principle component in the entire library.\n *\n * @example\n * ```jsx\n * import { View } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<View>\n * \t\t\t Code is Poetry\n * \t\t</View>\n * \t);\n * }\n * ```\n */\n// @ts-expect-error\nexport const View: WordPressComponent<\n\t'div',\n\tViewProps & RefAttributes< any >\n> = styled.div``;\n\nView.selector = '.components-view';\nView.displayName = 'View';\n\nexport default View;\n"]}
+{"version":3,"sources":["@wordpress/components/src/view/component.tsx"],"names":["View","selector","displayName"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,IAIZ;AAAA;AAAA;AAAA;AAAA;AAAA,k7CAJM;;AAMPA,IAAI,CAACC,QAAL,GAAgB,kBAAhB;AACAD,IAAI,CAACE,WAAL,GAAmB,MAAnB;eAEeF,I","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport type { RefAttributes } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponent } from '../ui/context/wordpress-component';\nimport type { ViewProps } from './types';\n\n/**\n * `View` is a core component that renders everything in the library.\n * It is the principle component in the entire library.\n *\n * @example\n * ```jsx\n * import { View } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<View>\n * \t\t\t Code is Poetry\n * \t\t</View>\n * \t);\n * }\n * ```\n */\nexport const View: WordPressComponent<\n\t'div',\n\tViewProps & RefAttributes< any >,\n\ttrue\n> = styled.div``;\n\nView.selector = '.components-view';\nView.displayName = 'View';\n\nexport default View;\n"]}

package/build-module/autocomplete/autocompleter-ui.js

@@ -8,9 +8,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 
-import { useLayoutEffect, useRef, useEffect, useState } from '@wordpress/element'; // Error expected because `@wordpress/rich-text` is not yet fully typed.
-// @ts-expect-error
-
+import { useLayoutEffect, useRef, useEffect, useState } from '@wordpress/element';
 import { useAnchor } from '@wordpress/rich-text';
 import { useMergeRefs, useRefEffect } from '@wordpress/compose';
 /**

package/build-module/autocomplete/autocompleter-ui.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/autocomplete/autocompleter-ui.tsx"],"names":["classnames","useLayoutEffect","useRef","useEffect","useState","useAnchor","useMergeRefs","useRefEffect","getDefaultUseItems","Button","Popover","VisuallyHidden","createPortal","getAutoCompleterUI","autocompleter","useItems","AutocompleterUI","filterValue","instanceId","listBoxId","className","selectedIndex","onChangeOptions","onSelect","onReset","reset","contentRef","items","popoverAnchor","editableContentElement","current","needsA11yCompat","setNeedsA11yCompat","popoverRef","popoverRefs","node","ownerDocument","useOnClickOutside","length","ListBox","Component","map","option","index","key","isDisabled","label","body","ref","handler","listener","event","contains","target","document","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseLayoutEffect,\n\tuseRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\n// Error expected because `@wordpress/rich-text` is not yet fully typed.\n// @ts-expect-error\nimport { useAnchor } from '@wordpress/rich-text';\nimport { useMergeRefs, useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport getDefaultUseItems from './get-default-use-items';\nimport Button from '../button';\nimport Popover from '../popover';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { createPortal } from 'react-dom';\nimport type { AutocompleterUIProps, WPCompleter } from './types';\n\nexport function getAutoCompleterUI( autocompleter: WPCompleter ) {\n\tconst useItems = autocompleter.useItems\n\t\t? autocompleter.useItems\n\t\t: getDefaultUseItems( autocompleter );\n\n\tfunction AutocompleterUI( {\n\t\tfilterValue,\n\t\tinstanceId,\n\t\tlistBoxId,\n\t\tclassName,\n\t\tselectedIndex,\n\t\tonChangeOptions,\n\t\tonSelect,\n\t\tonReset,\n\t\treset,\n\t\tcontentRef,\n\t}: AutocompleterUIProps ) {\n\t\tconst [ items ] = useItems( filterValue );\n\t\tconst popoverAnchor = useAnchor( {\n\t\t\teditableContentElement: contentRef.current,\n\t\t} );\n\n\t\tconst [ needsA11yCompat, setNeedsA11yCompat ] = useState( false );\n\t\tconst popoverRef = useRef< HTMLElement >( null );\n\t\tconst popoverRefs = useMergeRefs( [\n\t\t\tpopoverRef,\n\t\t\tuseRefEffect(\n\t\t\t\t( node ) => {\n\t\t\t\t\tif ( ! contentRef.current ) return;\n\n\t\t\t\t\t// If the popover is rendered in a different document than\n\t\t\t\t\t// the content, we need to duplicate the options list in the\n\t\t\t\t\t// content document so that it's available to the screen\n\t\t\t\t\t// readers, which check the DOM ID based aira-* attributes.\n\t\t\t\t\tsetNeedsA11yCompat(\n\t\t\t\t\t\tnode.ownerDocument !== contentRef.current.ownerDocument\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t[ contentRef ]\n\t\t\t),\n\t\t] );\n\n\t\tuseOnClickOutside( popoverRef, reset );\n\n\t\tuseLayoutEffect( () => {\n\t\t\tonChangeOptions( items );\n\t\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, [ items ] );\n\n\t\tif ( items.length === 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst ListBox = ( {\n\t\t\tComponent = 'div',\n\t\t}: {\n\t\t\tComponent?: React.ElementType;\n\t\t} ) => (\n\t\t\t<Component\n\t\t\t\tid={ listBoxId }\n\t\t\t\trole=\"listbox\"\n\t\t\t\tclassName=\"components-autocomplete__results\"\n\t\t\t>\n\t\t\t\t{ items.map( ( option, index ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ option.key }\n\t\t\t\t\t\tid={ `components-autocomplete-item-${ instanceId }-${ option.key }` }\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\taria-selected={ index === selectedIndex }\n\t\t\t\t\t\tdisabled={ option.isDisabled }\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-autocomplete__result',\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-selected': index === selectedIndex,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => onSelect( option ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t</Button>\n\t\t\t\t) ) }\n\t\t\t</Component>\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Popover\n\t\t\t\t\tfocusOnMount={ false }\n\t\t\t\t\tonClose={ onReset }\n\t\t\t\t\tplacement=\"top-start\"\n\t\t\t\t\tclassName=\"components-autocomplete__popover\"\n\t\t\t\t\tanchor={ popoverAnchor }\n\t\t\t\t\tref={ popoverRefs }\n\t\t\t\t>\n\t\t\t\t\t<ListBox />\n\t\t\t\t</Popover>\n\t\t\t\t{ contentRef.current &&\n\t\t\t\t\tneedsA11yCompat &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t<ListBox Component={ VisuallyHidden } />,\n\t\t\t\t\t\tcontentRef.current.ownerDocument.body\n\t\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn AutocompleterUI;\n}\n\nfunction useOnClickOutside(\n\tref: React.RefObject< HTMLElement >,\n\thandler: AutocompleterUIProps[ 'reset' ]\n) {\n\tuseEffect( () => {\n\t\tconst listener = ( event: MouseEvent | TouchEvent ) => {\n\t\t\t// Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element\n\t\t\tif (\n\t\t\t\t! ref.current ||\n\t\t\t\tref.current.contains( event.target as Node )\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\thandler( event );\n\t\t};\n\t\tdocument.addEventListener( 'mousedown', listener );\n\t\tdocument.addEventListener( 'touchstart', listener );\n\t\treturn () => {\n\t\t\tdocument.removeEventListener( 'mousedown', listener );\n\t\t\tdocument.removeEventListener( 'touchstart', listener );\n\t\t};\n\t\t// Disable reason: `ref` is a ref object and should not be included in a\n\t\t// hook's dependency list.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ handler ] );\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/autocomplete/autocompleter-ui.tsx"],"names":["classnames","useLayoutEffect","useRef","useEffect","useState","useAnchor","useMergeRefs","useRefEffect","getDefaultUseItems","Button","Popover","VisuallyHidden","createPortal","getAutoCompleterUI","autocompleter","useItems","AutocompleterUI","filterValue","instanceId","listBoxId","className","selectedIndex","onChangeOptions","onSelect","onReset","reset","contentRef","items","popoverAnchor","editableContentElement","current","needsA11yCompat","setNeedsA11yCompat","popoverRef","popoverRefs","node","ownerDocument","useOnClickOutside","length","ListBox","Component","map","option","index","key","isDisabled","label","body","ref","handler","listener","event","contains","target","document","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseLayoutEffect,\n\tuseRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\nimport { useAnchor } from '@wordpress/rich-text';\nimport { useMergeRefs, useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport getDefaultUseItems from './get-default-use-items';\nimport Button from '../button';\nimport Popover from '../popover';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { createPortal } from 'react-dom';\nimport type { AutocompleterUIProps, WPCompleter } from './types';\n\nexport function getAutoCompleterUI( autocompleter: WPCompleter ) {\n\tconst useItems = autocompleter.useItems\n\t\t? autocompleter.useItems\n\t\t: getDefaultUseItems( autocompleter );\n\n\tfunction AutocompleterUI( {\n\t\tfilterValue,\n\t\tinstanceId,\n\t\tlistBoxId,\n\t\tclassName,\n\t\tselectedIndex,\n\t\tonChangeOptions,\n\t\tonSelect,\n\t\tonReset,\n\t\treset,\n\t\tcontentRef,\n\t}: AutocompleterUIProps ) {\n\t\tconst [ items ] = useItems( filterValue );\n\t\tconst popoverAnchor = useAnchor( {\n\t\t\teditableContentElement: contentRef.current,\n\t\t} );\n\n\t\tconst [ needsA11yCompat, setNeedsA11yCompat ] = useState( false );\n\t\tconst popoverRef = useRef< HTMLElement >( null );\n\t\tconst popoverRefs = useMergeRefs( [\n\t\t\tpopoverRef,\n\t\t\tuseRefEffect(\n\t\t\t\t( node ) => {\n\t\t\t\t\tif ( ! contentRef.current ) return;\n\n\t\t\t\t\t// If the popover is rendered in a different document than\n\t\t\t\t\t// the content, we need to duplicate the options list in the\n\t\t\t\t\t// content document so that it's available to the screen\n\t\t\t\t\t// readers, which check the DOM ID based aira-* attributes.\n\t\t\t\t\tsetNeedsA11yCompat(\n\t\t\t\t\t\tnode.ownerDocument !== contentRef.current.ownerDocument\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t[ contentRef ]\n\t\t\t),\n\t\t] );\n\n\t\tuseOnClickOutside( popoverRef, reset );\n\n\t\tuseLayoutEffect( () => {\n\t\t\tonChangeOptions( items );\n\t\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, [ items ] );\n\n\t\tif ( items.length === 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst ListBox = ( {\n\t\t\tComponent = 'div',\n\t\t}: {\n\t\t\tComponent?: React.ElementType;\n\t\t} ) => (\n\t\t\t<Component\n\t\t\t\tid={ listBoxId }\n\t\t\t\trole=\"listbox\"\n\t\t\t\tclassName=\"components-autocomplete__results\"\n\t\t\t>\n\t\t\t\t{ items.map( ( option, index ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ option.key }\n\t\t\t\t\t\tid={ `components-autocomplete-item-${ instanceId }-${ option.key }` }\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\taria-selected={ index === selectedIndex }\n\t\t\t\t\t\tdisabled={ option.isDisabled }\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-autocomplete__result',\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-selected': index === selectedIndex,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => onSelect( option ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t</Button>\n\t\t\t\t) ) }\n\t\t\t</Component>\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Popover\n\t\t\t\t\tfocusOnMount={ false }\n\t\t\t\t\tonClose={ onReset }\n\t\t\t\t\tplacement=\"top-start\"\n\t\t\t\t\tclassName=\"components-autocomplete__popover\"\n\t\t\t\t\tanchor={ popoverAnchor }\n\t\t\t\t\tref={ popoverRefs }\n\t\t\t\t>\n\t\t\t\t\t<ListBox />\n\t\t\t\t</Popover>\n\t\t\t\t{ contentRef.current &&\n\t\t\t\t\tneedsA11yCompat &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t<ListBox Component={ VisuallyHidden } />,\n\t\t\t\t\t\tcontentRef.current.ownerDocument.body\n\t\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn AutocompleterUI;\n}\n\nfunction useOnClickOutside(\n\tref: React.RefObject< HTMLElement >,\n\thandler: AutocompleterUIProps[ 'reset' ]\n) {\n\tuseEffect( () => {\n\t\tconst listener = ( event: MouseEvent | TouchEvent ) => {\n\t\t\t// Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element\n\t\t\tif (\n\t\t\t\t! ref.current ||\n\t\t\t\tref.current.contains( event.target as Node )\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\thandler( event );\n\t\t};\n\t\tdocument.addEventListener( 'mousedown', listener );\n\t\tdocument.addEventListener( 'touchstart', listener );\n\t\treturn () => {\n\t\t\tdocument.removeEventListener( 'mousedown', listener );\n\t\t\tdocument.removeEventListener( 'touchstart', listener );\n\t\t};\n\t\t// Disable reason: `ref` is a ref object and should not be included in a\n\t\t// hook's dependency list.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ handler ] );\n}\n"]}

package/build-module/autocomplete/index.js

@@ -11,9 +11,7 @@ import removeAccents from 'remove-accents';
 import { renderToString, useEffect, useState, useRef, useMemo } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useInstanceId, useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';
-import { create, slice, insert, isCollapsed, getTextContent // Error expected because `@wordpress/rich-text` is not yet fully typed.
-// @ts-expect-error
-} from '@wordpress/rich-text';
+import { create, slice, insert, isCollapsed, getTextContent } from '@wordpress/rich-text';
 import { speak } from '@wordpress/a11y';
 /**
  * Internal dependencies
@@ -181,6 +179,8 @@ export function useAutocomplete(_ref) {
     if (isCollapsed(record)) {
       return getTextContent(slice(record, 0));
     }
+
+    return '';
   }, [record]);
   useEffect(() => {
     if (!textContent) {