@wordpress/components 19.0.0 → 19.0.1

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -12,7 +11,7 @@ import { createElement } from "@wordpress/element";
 import ToolsPanelHeader from '../tools-panel-header';
 import { ToolsPanelContext } from '../context';
 import { useToolsPanel } from './hook';
-import { View } from '../../view';
+import { Grid } from '../../grid';
 import { contextConnect } from '../../ui/context';
 
 const ToolsPanel = (props, forwardedRef) => {
@@ -22,11 +21,16 @@ const ToolsPanel = (props, forwardedRef) => {
     panelContext,
     resetAllItems,
     toggleItem,
-    ...toolsPanelProps
-  } = useToolsPanel(props);
-  return createElement(View, _extends({}, toolsPanelProps, {
+    className
+  } = useToolsPanel(props); // Props are not directly passed through to avoid exposing Grid props
+  // until agreement has been reached on how ToolsPanel layout should be
+  // handled.
+
+  return createElement(Grid, {
+    columns: 2,
+    className: className,
     ref: forwardedRef
-  }), createElement(ToolsPanelContext.Provider, {
+  }, createElement(ToolsPanelContext.Provider, {
     value: panelContext
   }, createElement(ToolsPanelHeader, {
     label: label,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel/component.tsx"],"names":["ToolsPanelHeader","ToolsPanelContext","useToolsPanel","View","contextConnect","ToolsPanel","props","forwardedRef","children","label","panelContext","resetAllItems","toggleItem","toolsPanelProps","ConnectedToolsPanel"],"mappings":";;;AAAA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,gBAAP,MAA6B,uBAA7B;AACA,SAASC,iBAAT,QAAkC,YAAlC;AACA,SAASC,aAAT,QAA8B,QAA9B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,cAAT,QAAwD,kBAAxD;;AAGA,MAAMC,UAAU,GAAG,CAClBC,KADkB,EAElBC,YAFkB,KAGd;AACJ,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,KAFK;AAGLC,IAAAA,YAHK;AAILC,IAAAA,aAJK;AAKLC,IAAAA,UALK;AAML,OAAGC;AANE,MAOFX,aAAa,CAAEI,KAAF,CAPjB;AASA,SACC,cAAC,IAAD,eAAWO,eAAX;AAA6B,IAAA,GAAG,EAAGN;AAAnC,MACC,cAAC,iBAAD,CAAmB,QAAnB;AAA4B,IAAA,KAAK,EAAGG;AAApC,KACC,cAAC,gBAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,QAAQ,EAAGE,aAFZ;AAGC,IAAA,UAAU,EAAGC;AAHd,IADD,EAMGJ,QANH,CADD,CADD;AAYA,CAzBD;;AA2BA,MAAMM,mBAAmB,GAAGV,cAAc,CAAEC,UAAF,EAAc,YAAd,CAA1C;AAEA,eAAeS,mBAAf","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n\n/**\n * Internal dependencies\n */\nimport ToolsPanelHeader from '../tools-panel-header';\nimport { ToolsPanelContext } from '../context';\nimport { useToolsPanel } from './hook';\nimport { View } from '../../view';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport type { ToolsPanelProps } from '../types';\n\nconst ToolsPanel = (\n\tprops: WordPressComponentProps< ToolsPanelProps, 'div' >,\n\tforwardedRef: Ref< any >\n) => {\n\tconst {\n\t\tchildren,\n\t\tlabel,\n\t\tpanelContext,\n\t\tresetAllItems,\n\t\ttoggleItem,\n\t\t...toolsPanelProps\n\t} = useToolsPanel( props );\n\n\treturn (\n\t\t<View { ...toolsPanelProps } ref={ forwardedRef }>\n\t\t\t<ToolsPanelContext.Provider value={ panelContext }>\n\t\t\t\t<ToolsPanelHeader\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tresetAll={ resetAllItems }\n\t\t\t\t\ttoggleItem={ toggleItem }\n\t\t\t\t/>\n\t\t\t\t{ children }\n\t\t\t</ToolsPanelContext.Provider>\n\t\t</View>\n\t);\n};\n\nconst ConnectedToolsPanel = contextConnect( ToolsPanel, 'ToolsPanel' );\n\nexport default ConnectedToolsPanel;\n"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel/component.tsx"],"names":["ToolsPanelHeader","ToolsPanelContext","useToolsPanel","Grid","contextConnect","ToolsPanel","props","forwardedRef","children","label","panelContext","resetAllItems","toggleItem","className","ConnectedToolsPanel"],"mappings":";;AAAA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,gBAAP,MAA6B,uBAA7B;AACA,SAASC,iBAAT,QAAkC,YAAlC;AACA,SAASC,aAAT,QAA8B,QAA9B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,cAAT,QAAwD,kBAAxD;;AAGA,MAAMC,UAAU,GAAG,CAClBC,KADkB,EAElBC,YAFkB,KAGd;AACJ,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,KAFK;AAGLC,IAAAA,YAHK;AAILC,IAAAA,aAJK;AAKLC,IAAAA,UALK;AAMLC,IAAAA;AANK,MAOFX,aAAa,CAAEI,KAAF,CAPjB,CADI,CAUJ;AACA;AACA;;AACA,SACC,cAAC,IAAD;AAAM,IAAA,OAAO,EAAG,CAAhB;AAAoB,IAAA,SAAS,EAAGO,SAAhC;AAA4C,IAAA,GAAG,EAAGN;AAAlD,KACC,cAAC,iBAAD,CAAmB,QAAnB;AAA4B,IAAA,KAAK,EAAGG;AAApC,KACC,cAAC,gBAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,QAAQ,EAAGE,aAFZ;AAGC,IAAA,UAAU,EAAGC;AAHd,IADD,EAMGJ,QANH,CADD,CADD;AAYA,CA5BD;;AA8BA,MAAMM,mBAAmB,GAAGV,cAAc,CAAEC,UAAF,EAAc,YAAd,CAA1C;AAEA,eAAeS,mBAAf","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n\n/**\n * Internal dependencies\n */\nimport ToolsPanelHeader from '../tools-panel-header';\nimport { ToolsPanelContext } from '../context';\nimport { useToolsPanel } from './hook';\nimport { Grid } from '../../grid';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport type { ToolsPanelProps } from '../types';\n\nconst ToolsPanel = (\n\tprops: WordPressComponentProps< ToolsPanelProps, 'div' >,\n\tforwardedRef: Ref< any >\n) => {\n\tconst {\n\t\tchildren,\n\t\tlabel,\n\t\tpanelContext,\n\t\tresetAllItems,\n\t\ttoggleItem,\n\t\tclassName,\n\t} = useToolsPanel( props );\n\n\t// Props are not directly passed through to avoid exposing Grid props\n\t// until agreement has been reached on how ToolsPanel layout should be\n\t// handled.\n\treturn (\n\t\t<Grid columns={ 2 } className={ className } ref={ forwardedRef }>\n\t\t\t<ToolsPanelContext.Provider value={ panelContext }>\n\t\t\t\t<ToolsPanelHeader\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tresetAll={ resetAllItems }\n\t\t\t\t\ttoggleItem={ toggleItem }\n\t\t\t\t/>\n\t\t\t\t{ children }\n\t\t\t</ToolsPanelContext.Provider>\n\t\t</Grid>\n\t);\n};\n\nconst ConnectedToolsPanel = contextConnect( ToolsPanel, 'ToolsPanel' );\n\nexport default ConnectedToolsPanel;\n"]}

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

@@ -9,6 +9,7 @@ import { useEffect, useMemo, useRef, useState } from '@wordpress/element';
 import * as styles from '../styles';
 import { useContextSystem } from '../../ui/context';
 import { useCx } from '../../utils/hooks/use-cx';
+const DEFAULT_COLUMNS = 2;
 
 const generateMenuItems = ({
   panelItems,
@@ -110,7 +111,7 @@ export function useToolsPanel(props) {
   const cx = useCx();
   const classes = useMemo(() => {
     const hasDefaultMenuItems = (menuItems === null || menuItems === void 0 ? void 0 : menuItems.default) && !!Object.keys(menuItems === null || menuItems === void 0 ? void 0 : menuItems.default).length;
-    const wrapperStyle = hasInnerWrapper && styles.ToolsPanelWithInnerWrapper;
+    const wrapperStyle = hasInnerWrapper && styles.ToolsPanelWithInnerWrapper(DEFAULT_COLUMNS);
     const emptyStyle = !hasDefaultMenuItems && areAllOptionalControlsHidden && styles.ToolsPanelHiddenInnerWrapper;
     return cx(styles.ToolsPanel, wrapperStyle, emptyStyle, className);
   }, [className, hasInnerWrapper, menuItems, areAllOptionalControlsHidden]); // Toggle the checked state of a menu item which is then used to determine

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel/hook.ts"],"names":["useEffect","useMemo","useRef","useState","styles","useContextSystem","useCx","generateMenuItems","panelItems","shouldReset","menuItems","default","optional","forEach","hasValue","isShownByDefault","label","group","useToolsPanel","props","className","resetAll","panelId","hasInnerWrapper","shouldRenderPlaceholderItems","otherProps","isResetting","wasResetting","current","setPanelItems","registerPanelItem","item","items","deregisterPanelItem","index","findIndex","splice","setMenuItems","flagItemCustomization","areAllOptionalControlsHidden","setAreAllOptionalControlsHidden","optionalItems","Object","entries","allControlsHidden","length","some","isSelected","cx","classes","hasDefaultMenuItems","keys","wrapperStyle","ToolsPanelWithInnerWrapper","emptyStyle","ToolsPanelHiddenInnerWrapper","ToolsPanel","toggleItem","currentItem","find","menuGroup","newMenuItems","getResetAllFilters","filters","resetAllFilter","push","resetAllItems","resetMenuItems","panelContext","hasMenuItems"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useMemo, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type {\n\tToolsPanelItem,\n\tToolsPanelMenuItemKey,\n\tToolsPanelMenuItems,\n\tToolsPanelMenuItemsConfig,\n\tToolsPanelProps,\n} from '../types';\n\nconst generateMenuItems = ( {\n\tpanelItems,\n\tshouldReset,\n}: ToolsPanelMenuItemsConfig ) => {\n\tconst menuItems: ToolsPanelMenuItems = { default: {}, optional: {} };\n\n\tpanelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {\n\t\tconst group = isShownByDefault ? 'default' : 'optional';\n\t\tmenuItems[ group ][ label ] = shouldReset ? false : hasValue();\n\t} );\n\n\treturn menuItems;\n};\n\nexport function useToolsPanel(\n\tprops: WordPressComponentProps< ToolsPanelProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tresetAll,\n\t\tpanelId,\n\t\thasInnerWrapper,\n\t\tshouldRenderPlaceholderItems,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToolsPanel' );\n\n\tconst isResetting = useRef( false );\n\tconst wasResetting = isResetting.current;\n\n\t// `isResetting` is cleared via this hook to effectively batch together\n\t// the resetAll task. Without this, the flag is cleared after the first\n\t// control updates and forces a rerender with subsequent controls then\n\t// believing they need to reset, unfortunately using stale data.\n\tuseEffect( () => {\n\t\tif ( wasResetting ) {\n\t\t\tisResetting.current = false;\n\t\t}\n\t}, [ wasResetting ] );\n\n\t// Allow panel items to register themselves.\n\tconst [ panelItems, setPanelItems ] = useState< ToolsPanelItem[] >( [] );\n\n\tconst registerPanelItem = ( item: ToolsPanelItem ) => {\n\t\tsetPanelItems( ( items ) => [ ...items, item ] );\n\t};\n\n\t// Panels need to deregister on unmount to avoid orphans in menu state.\n\t// This is an issue when panel items are being injected via SlotFills.\n\tconst deregisterPanelItem = ( label: string ) => {\n\t\t// When switching selections between components injecting matching\n\t\t// controls, e.g. both panels have a \"padding\" control, the\n\t\t// deregistration of the first panel doesn't occur until after the\n\t\t// registration of the next.\n\t\tconst index = panelItems.findIndex( ( item ) => item.label === label );\n\n\t\tif ( index !== -1 ) {\n\t\t\tsetPanelItems( ( items ) => items.splice( index, 1 ) );\n\t\t}\n\t};\n\n\t// Manage and share display state of menu items representing child controls.\n\tconst [ menuItems, setMenuItems ] = useState< ToolsPanelMenuItems >( {\n\t\tdefault: {},\n\t\toptional: {},\n\t} );\n\n\t// Setup menuItems state as panel items register themselves.\n\tuseEffect( () => {\n\t\tconst items = generateMenuItems( {\n\t\t\tpanelItems,\n\t\t\tshouldReset: false,\n\t\t} );\n\t\tsetMenuItems( items );\n\t}, [ panelItems ] );\n\n\t// Force a menu item to be checked.\n\t// This is intended for use with default panel items. They are displayed\n\t// separately to optional items and have different display states,\n\t//.we need to update that when their value is customized.\n\tconst flagItemCustomization = (\n\t\tlabel: string,\n\t\tgroup: ToolsPanelMenuItemKey = 'default'\n\t) => {\n\t\tsetMenuItems( {\n\t\t\t...menuItems,\n\t\t\t[ group ]: {\n\t\t\t\t...menuItems[ group ],\n\t\t\t\t[ label ]: true,\n\t\t\t},\n\t\t} );\n\t};\n\n\t// Whether all optional menu items are hidden or not must be tracked\n\t// in order to later determine if the panel display is empty and handle\n\t// conditional display of a plus icon to indicate the presence of further\n\t// menu items.\n\tconst [\n\t\tareAllOptionalControlsHidden,\n\t\tsetAreAllOptionalControlsHidden,\n\t] = useState( false );\n\n\tuseEffect( () => {\n\t\tif ( menuItems.optional ) {\n\t\t\tconst optionalItems = Object.entries( menuItems.optional );\n\t\t\tconst allControlsHidden =\n\t\t\t\toptionalItems.length > 0 &&\n\t\t\t\t! optionalItems.some( ( [ , isSelected ] ) => isSelected );\n\t\t\tsetAreAllOptionalControlsHidden( allControlsHidden );\n\t\t}\n\t}, [ menuItems.optional ] );\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\tconst hasDefaultMenuItems =\n\t\t\tmenuItems?.default && !! Object.keys( menuItems?.default ).length;\n\t\tconst wrapperStyle =\n\t\t\thasInnerWrapper && styles.ToolsPanelWithInnerWrapper;\n\t\tconst emptyStyle =\n\t\t\t! hasDefaultMenuItems &&\n\t\t\tareAllOptionalControlsHidden &&\n\t\t\tstyles.ToolsPanelHiddenInnerWrapper;\n\n\t\treturn cx( styles.ToolsPanel, wrapperStyle, emptyStyle, className );\n\t}, [\n\t\tclassName,\n\t\thasInnerWrapper,\n\t\tmenuItems,\n\t\tareAllOptionalControlsHidden,\n\t] );\n\n\t// Toggle the checked state of a menu item which is then used to determine\n\t// display of the item within the panel.\n\tconst toggleItem = ( label: string ) => {\n\t\tconst currentItem = panelItems.find( ( item ) => item.label === label );\n\n\t\tif ( ! currentItem ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst menuGroup = currentItem.isShownByDefault ? 'default' : 'optional';\n\n\t\tconst newMenuItems = {\n\t\t\t...menuItems,\n\t\t\t[ menuGroup ]: {\n\t\t\t\t...menuItems[ menuGroup ],\n\t\t\t\t[ label ]: ! menuItems[ menuGroup ][ label ],\n\t\t\t},\n\t\t};\n\n\t\tsetMenuItems( newMenuItems );\n\t};\n\n\tconst getResetAllFilters = () => {\n\t\tconst filters: Array< () => void > = [];\n\n\t\tpanelItems.forEach( ( item ) => {\n\t\t\tif ( item.resetAllFilter ) {\n\t\t\t\tfilters.push( item.resetAllFilter );\n\t\t\t}\n\t\t} );\n\t\treturn filters;\n\t};\n\n\t// Resets display of children and executes resetAll callback if available.\n\tconst resetAllItems = () => {\n\t\tif ( typeof resetAll === 'function' ) {\n\t\t\tisResetting.current = true;\n\t\t\tresetAll( getResetAllFilters() );\n\t\t}\n\n\t\t// Turn off display of all non-default items.\n\t\tconst resetMenuItems = generateMenuItems( {\n\t\t\tpanelItems,\n\t\t\tshouldReset: true,\n\t\t} );\n\t\tsetMenuItems( resetMenuItems );\n\t};\n\n\tconst panelContext = {\n\t\tpanelId,\n\t\tmenuItems,\n\t\tregisterPanelItem,\n\t\tderegisterPanelItem,\n\t\tflagItemCustomization,\n\t\tareAllOptionalControlsHidden,\n\t\thasMenuItems: !! panelItems.length,\n\t\tisResetting: isResetting.current,\n\t\tshouldRenderPlaceholderItems,\n\t};\n\n\treturn {\n\t\t...otherProps,\n\t\tpanelContext,\n\t\tresetAllItems,\n\t\ttoggleItem,\n\t\tclassName: classes,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel/hook.ts"],"names":["useEffect","useMemo","useRef","useState","styles","useContextSystem","useCx","DEFAULT_COLUMNS","generateMenuItems","panelItems","shouldReset","menuItems","default","optional","forEach","hasValue","isShownByDefault","label","group","useToolsPanel","props","className","resetAll","panelId","hasInnerWrapper","shouldRenderPlaceholderItems","otherProps","isResetting","wasResetting","current","setPanelItems","registerPanelItem","item","items","deregisterPanelItem","index","findIndex","splice","setMenuItems","flagItemCustomization","areAllOptionalControlsHidden","setAreAllOptionalControlsHidden","optionalItems","Object","entries","allControlsHidden","length","some","isSelected","cx","classes","hasDefaultMenuItems","keys","wrapperStyle","ToolsPanelWithInnerWrapper","emptyStyle","ToolsPanelHiddenInnerWrapper","ToolsPanel","toggleItem","currentItem","find","menuGroup","newMenuItems","getResetAllFilters","filters","resetAllFilter","push","resetAllItems","resetMenuItems","panelContext","hasMenuItems"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useMemo, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type {\n\tToolsPanelItem,\n\tToolsPanelMenuItemKey,\n\tToolsPanelMenuItems,\n\tToolsPanelMenuItemsConfig,\n\tToolsPanelProps,\n} from '../types';\n\nconst DEFAULT_COLUMNS = 2;\n\nconst generateMenuItems = ( {\n\tpanelItems,\n\tshouldReset,\n}: ToolsPanelMenuItemsConfig ) => {\n\tconst menuItems: ToolsPanelMenuItems = { default: {}, optional: {} };\n\n\tpanelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {\n\t\tconst group = isShownByDefault ? 'default' : 'optional';\n\t\tmenuItems[ group ][ label ] = shouldReset ? false : hasValue();\n\t} );\n\n\treturn menuItems;\n};\n\nexport function useToolsPanel(\n\tprops: WordPressComponentProps< ToolsPanelProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tresetAll,\n\t\tpanelId,\n\t\thasInnerWrapper,\n\t\tshouldRenderPlaceholderItems,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToolsPanel' );\n\n\tconst isResetting = useRef( false );\n\tconst wasResetting = isResetting.current;\n\n\t// `isResetting` is cleared via this hook to effectively batch together\n\t// the resetAll task. Without this, the flag is cleared after the first\n\t// control updates and forces a rerender with subsequent controls then\n\t// believing they need to reset, unfortunately using stale data.\n\tuseEffect( () => {\n\t\tif ( wasResetting ) {\n\t\t\tisResetting.current = false;\n\t\t}\n\t}, [ wasResetting ] );\n\n\t// Allow panel items to register themselves.\n\tconst [ panelItems, setPanelItems ] = useState< ToolsPanelItem[] >( [] );\n\n\tconst registerPanelItem = ( item: ToolsPanelItem ) => {\n\t\tsetPanelItems( ( items ) => [ ...items, item ] );\n\t};\n\n\t// Panels need to deregister on unmount to avoid orphans in menu state.\n\t// This is an issue when panel items are being injected via SlotFills.\n\tconst deregisterPanelItem = ( label: string ) => {\n\t\t// When switching selections between components injecting matching\n\t\t// controls, e.g. both panels have a \"padding\" control, the\n\t\t// deregistration of the first panel doesn't occur until after the\n\t\t// registration of the next.\n\t\tconst index = panelItems.findIndex( ( item ) => item.label === label );\n\n\t\tif ( index !== -1 ) {\n\t\t\tsetPanelItems( ( items ) => items.splice( index, 1 ) );\n\t\t}\n\t};\n\n\t// Manage and share display state of menu items representing child controls.\n\tconst [ menuItems, setMenuItems ] = useState< ToolsPanelMenuItems >( {\n\t\tdefault: {},\n\t\toptional: {},\n\t} );\n\n\t// Setup menuItems state as panel items register themselves.\n\tuseEffect( () => {\n\t\tconst items = generateMenuItems( {\n\t\t\tpanelItems,\n\t\t\tshouldReset: false,\n\t\t} );\n\t\tsetMenuItems( items );\n\t}, [ panelItems ] );\n\n\t// Force a menu item to be checked.\n\t// This is intended for use with default panel items. They are displayed\n\t// separately to optional items and have different display states,\n\t//.we need to update that when their value is customized.\n\tconst flagItemCustomization = (\n\t\tlabel: string,\n\t\tgroup: ToolsPanelMenuItemKey = 'default'\n\t) => {\n\t\tsetMenuItems( {\n\t\t\t...menuItems,\n\t\t\t[ group ]: {\n\t\t\t\t...menuItems[ group ],\n\t\t\t\t[ label ]: true,\n\t\t\t},\n\t\t} );\n\t};\n\n\t// Whether all optional menu items are hidden or not must be tracked\n\t// in order to later determine if the panel display is empty and handle\n\t// conditional display of a plus icon to indicate the presence of further\n\t// menu items.\n\tconst [\n\t\tareAllOptionalControlsHidden,\n\t\tsetAreAllOptionalControlsHidden,\n\t] = useState( false );\n\n\tuseEffect( () => {\n\t\tif ( menuItems.optional ) {\n\t\t\tconst optionalItems = Object.entries( menuItems.optional );\n\t\t\tconst allControlsHidden =\n\t\t\t\toptionalItems.length > 0 &&\n\t\t\t\t! optionalItems.some( ( [ , isSelected ] ) => isSelected );\n\t\t\tsetAreAllOptionalControlsHidden( allControlsHidden );\n\t\t}\n\t}, [ menuItems.optional ] );\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\tconst hasDefaultMenuItems =\n\t\t\tmenuItems?.default && !! Object.keys( menuItems?.default ).length;\n\t\tconst wrapperStyle =\n\t\t\thasInnerWrapper &&\n\t\t\tstyles.ToolsPanelWithInnerWrapper( DEFAULT_COLUMNS );\n\t\tconst emptyStyle =\n\t\t\t! hasDefaultMenuItems &&\n\t\t\tareAllOptionalControlsHidden &&\n\t\t\tstyles.ToolsPanelHiddenInnerWrapper;\n\n\t\treturn cx( styles.ToolsPanel, wrapperStyle, emptyStyle, className );\n\t}, [\n\t\tclassName,\n\t\thasInnerWrapper,\n\t\tmenuItems,\n\t\tareAllOptionalControlsHidden,\n\t] );\n\n\t// Toggle the checked state of a menu item which is then used to determine\n\t// display of the item within the panel.\n\tconst toggleItem = ( label: string ) => {\n\t\tconst currentItem = panelItems.find( ( item ) => item.label === label );\n\n\t\tif ( ! currentItem ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst menuGroup = currentItem.isShownByDefault ? 'default' : 'optional';\n\n\t\tconst newMenuItems = {\n\t\t\t...menuItems,\n\t\t\t[ menuGroup ]: {\n\t\t\t\t...menuItems[ menuGroup ],\n\t\t\t\t[ label ]: ! menuItems[ menuGroup ][ label ],\n\t\t\t},\n\t\t};\n\n\t\tsetMenuItems( newMenuItems );\n\t};\n\n\tconst getResetAllFilters = () => {\n\t\tconst filters: Array< () => void > = [];\n\n\t\tpanelItems.forEach( ( item ) => {\n\t\t\tif ( item.resetAllFilter ) {\n\t\t\t\tfilters.push( item.resetAllFilter );\n\t\t\t}\n\t\t} );\n\t\treturn filters;\n\t};\n\n\t// Resets display of children and executes resetAll callback if available.\n\tconst resetAllItems = () => {\n\t\tif ( typeof resetAll === 'function' ) {\n\t\t\tisResetting.current = true;\n\t\t\tresetAll( getResetAllFilters() );\n\t\t}\n\n\t\t// Turn off display of all non-default items.\n\t\tconst resetMenuItems = generateMenuItems( {\n\t\t\tpanelItems,\n\t\t\tshouldReset: true,\n\t\t} );\n\t\tsetMenuItems( resetMenuItems );\n\t};\n\n\tconst panelContext = {\n\t\tpanelId,\n\t\tmenuItems,\n\t\tregisterPanelItem,\n\t\tderegisterPanelItem,\n\t\tflagItemCustomization,\n\t\tareAllOptionalControlsHidden,\n\t\thasMenuItems: !! panelItems.length,\n\t\tisResetting: isResetting.current,\n\t\tshouldRenderPlaceholderItems,\n\t};\n\n\treturn {\n\t\t...otherProps,\n\t\tpanelContext,\n\t\tresetAllItems,\n\t\ttoggleItem,\n\t\tclassName: classes,\n\t};\n}\n"]}

package/build-module/tools-panel/tools-panel-header/component.js

@@ -111,6 +111,9 @@ const ToolsPanelHeader = (props, forwardedRef) => {
     label: dropDownMenuLabelText,
     menuProps: {
       className: dropdownMenuClassName
+    },
+    toggleProps: {
+      isSmall: true
     }
   }, ({
     onClose = noop

package/build-module/tools-panel/tools-panel-header/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-header/component.tsx"],"names":["check","reset","moreVertical","plus","__","_x","sprintf","DropdownMenu","MenuGroup","MenuItem","HStack","Heading","useToolsPanelHeader","contextConnect","noop","DefaultControlsGroup","items","onClose","toggleItem","length","map","label","hasValue","icon","itemLabel","undefined","OptionalControlsGroup","isSelected","ToolsPanelHeader","props","forwardedRef","areAllOptionalControlsHidden","dropdownMenuClassName","hasMenuItems","headingClassName","labelText","menuItems","resetAll","headerProps","defaultItems","Object","entries","default","optionalItems","optional","dropDownMenuIcon","dropDownMenuLabelText","className","ConnectedToolsPanelHeader"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { check, reset, moreVertical, plus } from '@wordpress/icons';\nimport { __, _x, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DropdownMenu from '../../dropdown-menu';\nimport MenuGroup from '../../menu-group';\nimport MenuItem from '../../menu-item';\nimport { HStack } from '../../h-stack';\nimport { Heading } from '../../heading';\nimport { useToolsPanelHeader } from './hook';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport type {\n\tToolsPanelControlsGroupProps,\n\tToolsPanelHeaderProps,\n} from '../types';\n\nconst noop = () => {};\n\nconst DefaultControlsGroup = ( {\n\titems,\n\tonClose,\n\ttoggleItem,\n}: ToolsPanelControlsGroupProps ) => {\n\tif ( ! items.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<MenuGroup>\n\t\t\t{ items.map( ( [ label, hasValue ] ) => {\n\t\t\t\tconst icon = hasValue ? reset : check;\n\t\t\t\tconst itemLabel = hasValue\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// translators: %s: The name of the control being reset e.g. \"Padding\".\n\t\t\t\t\t\t\t__( 'Reset %s' ),\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t  )\n\t\t\t\t\t: undefined;\n\n\t\t\t\treturn (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tkey={ label }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tisSelected={ true }\n\t\t\t\t\t\tdisabled={ ! hasValue }\n\t\t\t\t\t\tlabel={ itemLabel }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\ttoggleItem( label );\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</MenuGroup>\n\t);\n};\n\nconst OptionalControlsGroup = ( {\n\titems,\n\tonClose,\n\ttoggleItem,\n}: ToolsPanelControlsGroupProps ) => {\n\tif ( ! items.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<MenuGroup>\n\t\t\t{ items.map( ( [ label, isSelected ] ) => {\n\t\t\t\tconst itemLabel = isSelected\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// translators: %s: The name of the control being hidden and reset e.g. \"Padding\".\n\t\t\t\t\t\t\t__( 'Hide and reset %s' ),\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t  )\n\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t// translators: %s: The name of the control to display e.g. \"Padding\".\n\t\t\t\t\t\t\t__( 'Show %s' ),\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t  );\n\n\t\t\t\treturn (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tkey={ label }\n\t\t\t\t\t\ticon={ isSelected && check }\n\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\tlabel={ itemLabel }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\ttoggleItem( label );\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</MenuGroup>\n\t);\n};\n\nconst ToolsPanelHeader = (\n\tprops: WordPressComponentProps< ToolsPanelHeaderProps, 'h2' >,\n\tforwardedRef: Ref< any >\n) => {\n\tconst {\n\t\tareAllOptionalControlsHidden,\n\t\tdropdownMenuClassName,\n\t\thasMenuItems,\n\t\theadingClassName,\n\t\tlabel: labelText,\n\t\tmenuItems,\n\t\tresetAll,\n\t\ttoggleItem,\n\t\t...headerProps\n\t} = useToolsPanelHeader( props );\n\n\tif ( ! labelText ) {\n\t\treturn null;\n\t}\n\n\tconst defaultItems = Object.entries( menuItems?.default || {} );\n\tconst optionalItems = Object.entries( menuItems?.optional || {} );\n\tconst dropDownMenuIcon = areAllOptionalControlsHidden ? plus : moreVertical;\n\tconst dropDownMenuLabelText = areAllOptionalControlsHidden\n\t\t? _x(\n\t\t\t\t'View and add options',\n\t\t\t\t'Button label to reveal tool panel options'\n\t\t  )\n\t\t: _x( 'View options', 'Button label to reveal tool panel options' );\n\n\treturn (\n\t\t<HStack { ...headerProps } ref={ forwardedRef }>\n\t\t\t<Heading level={ 2 } className={ headingClassName }>\n\t\t\t\t{ labelText }\n\t\t\t</Heading>\n\t\t\t{ hasMenuItems && (\n\t\t\t\t<DropdownMenu\n\t\t\t\t\ticon={ dropDownMenuIcon }\n\t\t\t\t\tlabel={ dropDownMenuLabelText }\n\t\t\t\t\tmenuProps={ { className: dropdownMenuClassName } }\n\t\t\t\t>\n\t\t\t\t\t{ ( { onClose = noop } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DefaultControlsGroup\n\t\t\t\t\t\t\t\titems={ defaultItems }\n\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\ttoggleItem={ toggleItem }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<OptionalControlsGroup\n\t\t\t\t\t\t\t\titems={ optionalItems }\n\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\ttoggleItem={ toggleItem }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\tvariant={ 'tertiary' }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tresetAll();\n\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Reset all' ) }\n\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</DropdownMenu>\n\t\t\t) }\n\t\t</HStack>\n\t);\n};\n\nconst ConnectedToolsPanelHeader = contextConnect(\n\tToolsPanelHeader,\n\t'ToolsPanelHeader'\n);\n\nexport default ConnectedToolsPanelHeader;\n"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-header/component.tsx"],"names":["check","reset","moreVertical","plus","__","_x","sprintf","DropdownMenu","MenuGroup","MenuItem","HStack","Heading","useToolsPanelHeader","contextConnect","noop","DefaultControlsGroup","items","onClose","toggleItem","length","map","label","hasValue","icon","itemLabel","undefined","OptionalControlsGroup","isSelected","ToolsPanelHeader","props","forwardedRef","areAllOptionalControlsHidden","dropdownMenuClassName","hasMenuItems","headingClassName","labelText","menuItems","resetAll","headerProps","defaultItems","Object","entries","default","optionalItems","optional","dropDownMenuIcon","dropDownMenuLabelText","className","isSmall","ConnectedToolsPanelHeader"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { check, reset, moreVertical, plus } from '@wordpress/icons';\nimport { __, _x, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DropdownMenu from '../../dropdown-menu';\nimport MenuGroup from '../../menu-group';\nimport MenuItem from '../../menu-item';\nimport { HStack } from '../../h-stack';\nimport { Heading } from '../../heading';\nimport { useToolsPanelHeader } from './hook';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport type {\n\tToolsPanelControlsGroupProps,\n\tToolsPanelHeaderProps,\n} from '../types';\n\nconst noop = () => {};\n\nconst DefaultControlsGroup = ( {\n\titems,\n\tonClose,\n\ttoggleItem,\n}: ToolsPanelControlsGroupProps ) => {\n\tif ( ! items.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<MenuGroup>\n\t\t\t{ items.map( ( [ label, hasValue ] ) => {\n\t\t\t\tconst icon = hasValue ? reset : check;\n\t\t\t\tconst itemLabel = hasValue\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// translators: %s: The name of the control being reset e.g. \"Padding\".\n\t\t\t\t\t\t\t__( 'Reset %s' ),\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t  )\n\t\t\t\t\t: undefined;\n\n\t\t\t\treturn (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tkey={ label }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tisSelected={ true }\n\t\t\t\t\t\tdisabled={ ! hasValue }\n\t\t\t\t\t\tlabel={ itemLabel }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\ttoggleItem( label );\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</MenuGroup>\n\t);\n};\n\nconst OptionalControlsGroup = ( {\n\titems,\n\tonClose,\n\ttoggleItem,\n}: ToolsPanelControlsGroupProps ) => {\n\tif ( ! items.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<MenuGroup>\n\t\t\t{ items.map( ( [ label, isSelected ] ) => {\n\t\t\t\tconst itemLabel = isSelected\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// translators: %s: The name of the control being hidden and reset e.g. \"Padding\".\n\t\t\t\t\t\t\t__( 'Hide and reset %s' ),\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t  )\n\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t// translators: %s: The name of the control to display e.g. \"Padding\".\n\t\t\t\t\t\t\t__( 'Show %s' ),\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t  );\n\n\t\t\t\treturn (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tkey={ label }\n\t\t\t\t\t\ticon={ isSelected && check }\n\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\tlabel={ itemLabel }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\ttoggleItem( label );\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</MenuGroup>\n\t);\n};\n\nconst ToolsPanelHeader = (\n\tprops: WordPressComponentProps< ToolsPanelHeaderProps, 'h2' >,\n\tforwardedRef: Ref< any >\n) => {\n\tconst {\n\t\tareAllOptionalControlsHidden,\n\t\tdropdownMenuClassName,\n\t\thasMenuItems,\n\t\theadingClassName,\n\t\tlabel: labelText,\n\t\tmenuItems,\n\t\tresetAll,\n\t\ttoggleItem,\n\t\t...headerProps\n\t} = useToolsPanelHeader( props );\n\n\tif ( ! labelText ) {\n\t\treturn null;\n\t}\n\n\tconst defaultItems = Object.entries( menuItems?.default || {} );\n\tconst optionalItems = Object.entries( menuItems?.optional || {} );\n\tconst dropDownMenuIcon = areAllOptionalControlsHidden ? plus : moreVertical;\n\tconst dropDownMenuLabelText = areAllOptionalControlsHidden\n\t\t? _x(\n\t\t\t\t'View and add options',\n\t\t\t\t'Button label to reveal tool panel options'\n\t\t  )\n\t\t: _x( 'View options', 'Button label to reveal tool panel options' );\n\n\treturn (\n\t\t<HStack { ...headerProps } ref={ forwardedRef }>\n\t\t\t<Heading level={ 2 } className={ headingClassName }>\n\t\t\t\t{ labelText }\n\t\t\t</Heading>\n\t\t\t{ hasMenuItems && (\n\t\t\t\t<DropdownMenu\n\t\t\t\t\ticon={ dropDownMenuIcon }\n\t\t\t\t\tlabel={ dropDownMenuLabelText }\n\t\t\t\t\tmenuProps={ { className: dropdownMenuClassName } }\n\t\t\t\t\ttoggleProps={ { isSmall: true } }\n\t\t\t\t>\n\t\t\t\t\t{ ( { onClose = noop } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DefaultControlsGroup\n\t\t\t\t\t\t\t\titems={ defaultItems }\n\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\ttoggleItem={ toggleItem }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<OptionalControlsGroup\n\t\t\t\t\t\t\t\titems={ optionalItems }\n\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\ttoggleItem={ toggleItem }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\tvariant={ 'tertiary' }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tresetAll();\n\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Reset all' ) }\n\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</DropdownMenu>\n\t\t\t) }\n\t\t</HStack>\n\t);\n};\n\nconst ConnectedToolsPanelHeader = contextConnect(\n\tToolsPanelHeader,\n\t'ToolsPanelHeader'\n);\n\nexport default ConnectedToolsPanelHeader;\n"]}

package/build-module/utils/hooks/index.js

@@ -1,5 +1,6 @@
 export { default as useControlledState } from './use-controlled-state';
 export { default as useUpdateEffect } from './use-update-effect';
+export { useCombinedRef } from './use-combined-ref';
 export { useControlledValue } from './use-controlled-value';
 export { useCx } from './use-cx';
 export { useLatestRef } from './use-latest-ref';

package/build-module/utils/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/utils/hooks/index.js"],"names":["default","useControlledState","useUpdateEffect","useControlledValue","useCx","useLatestRef"],"mappings":"AAAA,SAASA,OAAO,IAAIC,kBAApB,QAA8C,wBAA9C;AACA,SAASD,OAAO,IAAIE,eAApB,QAA2C,qBAA3C;AACA,SAASC,kBAAT,QAAmC,wBAAnC;AACA,SAASC,KAAT,QAAsB,UAAtB;AACA,SAASC,YAAT,QAA6B,kBAA7B","sourcesContent":["export { default as useControlledState } from './use-controlled-state';\nexport { default as useUpdateEffect } from './use-update-effect';\nexport { useControlledValue } from './use-controlled-value';\nexport { useCx } from './use-cx';\nexport { useLatestRef } from './use-latest-ref';\n"]}
+{"version":3,"sources":["@wordpress/components/src/utils/hooks/index.js"],"names":["default","useControlledState","useUpdateEffect","useCombinedRef","useControlledValue","useCx","useLatestRef"],"mappings":"AAAA,SAASA,OAAO,IAAIC,kBAApB,QAA8C,wBAA9C;AACA,SAASD,OAAO,IAAIE,eAApB,QAA2C,qBAA3C;AACA,SAASC,cAAT,QAA+B,oBAA/B;AACA,SAASC,kBAAT,QAAmC,wBAAnC;AACA,SAASC,KAAT,QAAsB,UAAtB;AACA,SAASC,YAAT,QAA6B,kBAA7B","sourcesContent":["export { default as useControlledState } from './use-controlled-state';\nexport { default as useUpdateEffect } from './use-update-effect';\nexport { useCombinedRef } from './use-combined-ref';\nexport { useControlledValue } from './use-controlled-value';\nexport { useCx } from './use-cx';\nexport { useLatestRef } from './use-latest-ref';\n"]}

package/build-module/utils/hooks/use-combined-ref.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect } from '@wordpress/element';
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+
+export function useCombinedRef(...refs) {
+  const targetRef = useRef(null);
+  useEffect(() => {
+    refs.forEach(ref => {
+      if (!ref) return;
+
+      if (typeof ref === 'function') {
+        ref(targetRef.current);
+      } else {
+        ref.current = targetRef.current;
+      }
+    });
+  }, [refs]);
+  return targetRef;
+}
+//# sourceMappingURL=use-combined-ref.js.map

package/build-module/utils/hooks/use-combined-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/utils/hooks/use-combined-ref.ts"],"names":["useRef","useEffect","useCombinedRef","refs","targetRef","forEach","ref","current"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,SAAjB,QAAkC,oBAAlC;AACA;AACA;AACA;AACA;;AAKA,OAAO,SAASC,cAAT,CAAkD,GAAGC,IAArD,EAAwE;AAC9E,QAAMC,SAAS,GAAGJ,MAAM,CAAE,IAAF,CAAxB;AAEAC,EAAAA,SAAS,CAAE,MAAM;AAChBE,IAAAA,IAAI,CAACE,OAAL,CAAgBC,GAAF,IAAW;AACxB,UAAK,CAAEA,GAAP,EAAa;;AAEb,UAAK,OAAOA,GAAP,KAAe,UAApB,EAAiC;AAChCA,QAAAA,GAAG,CAAEF,SAAS,CAACG,OAAZ,CAAH;AACA,OAFD,MAEO;AACND,QAAAA,GAAG,CAACC,OAAJ,GAAcH,SAAS,CAACG,OAAxB;AACA;AACD,KARD;AASA,GAVQ,EAUN,CAAEJ,IAAF,CAVM,CAAT;AAYA,SAAOC,SAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\n/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { MutableRefObject, RefCallback } from 'react';\n\ntype Ref< T > = MutableRefObject< T | null > | RefCallback< T | null >;\n\nexport function useCombinedRef< T extends HTMLElement >( ...refs: Ref< T >[] ) {\n\tconst targetRef = useRef( null );\n\n\tuseEffect( () => {\n\t\trefs.forEach( ( ref ) => {\n\t\t\tif ( ! ref ) return;\n\n\t\t\tif ( typeof ref === 'function' ) {\n\t\t\t\tref( targetRef.current );\n\t\t\t} else {\n\t\t\t\tref.current = targetRef.current;\n\t\t\t}\n\t\t} );\n\t}, [ refs ] );\n\n\treturn targetRef;\n}\n"]}

package/build-style/style-rtl.css

@@ -638,15 +638,15 @@ svg.components-checkbox-control__checked {
   justify-content: flex-end;
 }
 .components-circular-option-picker .components-circular-option-picker__swatches {
-  margin-left: -12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
 }
 
 .components-circular-option-picker__option-wrapper {
   display: inline-block;
   height: 28px;
   width: 28px;
-  margin-left: 12px;
-  margin-bottom: 12px;
   vertical-align: top;
   transform: scale(1);
   transition: 100ms transform ease;
@@ -753,55 +753,12 @@ svg.components-checkbox-control__checked {
   line-height: 22px;
 }
 
-.components-color-edit__color-option-main-area {
-  display: flex;
-  align-items: center;
-}
-.components-color-edit__color-option-main-area div.components-circular-option-picker__option-wrapper {
-  display: block;
-  margin: 8px;
-}
-
-.components-color-edit__color-option.is-hover {
-  background: #e0e0e0;
-}
-
-.components-color-edit__cancel-button {
-  float: left;
-}
-
-.components-color-edit__color-option-color-name {
-  width: 100%;
-}
-
-.components-color-edit__label-and-insert-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.components-color-edit__insert-button {
-  margin-top: -8px;
-}
-
-.components-color-edit__hidden-control {
-  position: relative;
-  right: -9999px;
-}
-
-.components-color-edit__color-option-color-name-input .components-base-control__field {
-  margin-bottom: 0;
-  margin-left: 8px;
-}
-
-.components-color-edit__slug-input {
-  margin-right: 8px;
-}
-
-.components-color-edit__reset-button {
-  float: left;
+@media (min-width: 782px) {
+  .components-color-edit__color-popover.components-popover .components-popover__content.components-popover__content.components-popover__content {
+    margin-left: 156px;
+    margin-top: -49px;
+  }
 }
-
 .component-color-indicator {
   width: 25px;
   height: 16px;
@@ -901,6 +858,27 @@ input.components-combobox-control__input[type=text]:focus {
   width: 100%;
 }
 
+.components-color-list-picker__color-picker {
+  margin: 8px 0;
+}
+
+.components-color-palette__custom-color {
+  border: none;
+  background: none;
+  outline: 0;
+  display: block;
+  border-radius: 2px;
+  height: 48px;
+  text-align: left;
+  width: 100%;
+  background-image: repeating-linear-gradient(-45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(-45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
+  background-position: 100% 0, 25px 25px;
+  background-size: calc(2 * 25px) calc(2 * 25px);
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+}
+
 .components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
   opacity: 0.4;
 }
@@ -3153,6 +3131,12 @@ body.is-dragging-components-draggable {
     animation-delay: 0s;
   }
 }
+@media (min-width: 600px) {
+  .components-modal__frame.is-full-screen {
+    width: 90vw;
+    min-height: 90vh;
+  }
+}
 @media (min-width: 960px) {
   .components-modal__frame {
     max-height: 70%;
@@ -3912,6 +3896,10 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   display: block;
 }
 
+.components-resizable-box__container > img {
+  width: inherit;
+}
+
 .components-resizable-box__handle::after {
   display: block;
   content: "";

package/build-style/style.css

@@ -638,15 +638,15 @@ svg.components-checkbox-control__checked {
   justify-content: flex-end;
 }
 .components-circular-option-picker .components-circular-option-picker__swatches {
-  margin-right: -12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
 }
 
 .components-circular-option-picker__option-wrapper {
   display: inline-block;
   height: 28px;
   width: 28px;
-  margin-right: 12px;
-  margin-bottom: 12px;
   vertical-align: top;
   transform: scale(1);
   transition: 100ms transform ease;
@@ -753,55 +753,12 @@ svg.components-checkbox-control__checked {
   line-height: 22px;
 }
 
-.components-color-edit__color-option-main-area {
-  display: flex;
-  align-items: center;
-}
-.components-color-edit__color-option-main-area div.components-circular-option-picker__option-wrapper {
-  display: block;
-  margin: 8px;
-}
-
-.components-color-edit__color-option.is-hover {
-  background: #e0e0e0;
-}
-
-.components-color-edit__cancel-button {
-  float: right;
-}
-
-.components-color-edit__color-option-color-name {
-  width: 100%;
-}
-
-.components-color-edit__label-and-insert-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.components-color-edit__insert-button {
-  margin-top: -8px;
-}
-
-.components-color-edit__hidden-control {
-  position: relative;
-  left: -9999px;
-}
-
-.components-color-edit__color-option-color-name-input .components-base-control__field {
-  margin-bottom: 0;
-  margin-right: 8px;
-}
-
-.components-color-edit__slug-input {
-  margin-left: 8px;
-}
-
-.components-color-edit__reset-button {
-  float: right;
+@media (min-width: 782px) {
+  .components-color-edit__color-popover.components-popover .components-popover__content.components-popover__content.components-popover__content {
+    margin-right: 156px;
+    margin-top: -49px;
+  }
 }
-
 .component-color-indicator {
   width: 25px;
   height: 16px;
@@ -901,6 +858,27 @@ input.components-combobox-control__input[type=text]:focus {
   width: 100%;
 }
 
+.components-color-list-picker__color-picker {
+  margin: 8px 0;
+}
+
+.components-color-palette__custom-color {
+  border: none;
+  background: none;
+  outline: 0;
+  display: block;
+  border-radius: 2px;
+  height: 48px;
+  text-align: right;
+  width: 100%;
+  background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
+  background-position: 0 0, 25px 25px;
+  background-size: calc(2 * 25px) calc(2 * 25px);
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+}
+
 .components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
   opacity: 0.4;
 }
@@ -3161,6 +3139,12 @@ body.is-dragging-components-draggable {
     animation-delay: 0s;
   }
 }
+@media (min-width: 600px) {
+  .components-modal__frame.is-full-screen {
+    width: 90vw;
+    min-height: 90vh;
+  }
+}
 @media (min-width: 960px) {
   .components-modal__frame {
     max-height: 70%;
@@ -3926,6 +3910,10 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   display: block;
 }
 
+.components-resizable-box__container > img {
+  width: inherit;
+}
+
 .components-resizable-box__handle::after {
   display: block;
   content: "";

package/build-types/range-control/styles/range-control-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range-control-styles.d.ts","sourceRoot":"","sources":["../../../src/range-control/styles/range-control-styles.js"],"names":[],"mappings":"AAoBA;;;0GAUE;AAQF;;;;;0GAWE;AAEF;;;4GAIE;AAEF;;;4GAIE;AAcF;;;;;;4GAcE;AAcF;;;;;;4GAYE;AAEF;;;4GAOE;AAcF;;;;;;4GASE;AAQF;;;;;4GAWE;AAWF;;;;;4GAkBE;AAoBF;;;;;4GAYE;AAEF;;;mHAaE;AAsBF;;;;;4GAwBE;AAIF;;;;;;;;;;;;;;;;;;WAYE;AAEF;;;4GAYE"}
+{"version":3,"file":"range-control-styles.d.ts","sourceRoot":"","sources":["../../../src/range-control/styles/range-control-styles.js"],"names":[],"mappings":"AAoBA;;;0GAUE;AAQF;;;;;0GAWE;AAEF;;;4GAIE;AAEF;;;4GAIE;AAcF;;;;;;4GAcE;AAcF;;;;;;4GAYE;AAEF;;;4GAOE;AAcF;;;;;;4GASE;AAQF;;;;;4GAWE;AAWF;;;;;4GAqBE;AAoBF;;;;;4GAYE;AAEF;;;mHAaE;AAsBF;;;;;4GAwBE;AAIF;;;;;;;;;;;;;;;;;;WAYE;AAEF;;;4GAYE"}

package/build-types/tools-panel/styles.d.ts

@@ -4,7 +4,7 @@ export declare const ToolsPanel: import("@emotion/utils").SerializedStyles;
  * an inner dom element to be injected. The following rule allows for the
  * CSS grid display to be re-established.
  */
-export declare const ToolsPanelWithInnerWrapper: import("@emotion/utils").SerializedStyles;
+export declare const ToolsPanelWithInnerWrapper: (columns: number) => import("@emotion/utils").SerializedStyles;
 export declare const ToolsPanelHiddenInnerWrapper: import("@emotion/utils").SerializedStyles;
 export declare const ToolsPanelHeader: import("@emotion/utils").SerializedStyles;
 export declare const ToolsPanelHeading: import("@emotion/utils").SerializedStyles;

package/build-types/tools-panel/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/tools-panel/styles.ts"],"names":[],"mappings":"AAgCA,eAAO,MAAM,UAAU,2CAMtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,2CAKtC,CAAC;AAEF,eAAO,MAAM,4BAA4B,2CAIxC,CAAC;AAEF,eAAO,MAAM,gBAAgB,2CAsB5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,2CAS7B,CAAC;AAEF,eAAO,MAAM,cAAc,2CAwB1B,CAAC;AAEF,eAAO,MAAM,yBAAyB,2CAErC,CAAC;AAEF,eAAO,MAAM,YAAY,2CAExB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/tools-panel/styles.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,UAAU,2CAMtB,CAAC;AAEF;;;;GAIG;AAEH,eAAO,MAAM,0BAA0B,YAAc,MAAM,8CAS1D,CAAC;AAEF,eAAO,MAAM,4BAA4B,2CAIxC,CAAC;AAEF,eAAO,MAAM,gBAAgB,2CAkB5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,2CAS7B,CAAC;AAEF,eAAO,MAAM,cAAc,2CAoB1B,CAAC;AAEF,eAAO,MAAM,yBAAyB,2CAErC,CAAC;AAEF,eAAO,MAAM,YAAY,2CAExB,CAAC"}

package/build-types/tools-panel/tools-panel/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel/component.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AA6BhD,QAAA,MAAM,mBAAmB,6EAA6C,CAAC;AAEvE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel/component.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAgChD,QAAA,MAAM,mBAAmB,6EAA6C,CAAC;AAEvE,eAAe,mBAAmB,CAAC"}

package/build-types/tools-panel/tools-panel/hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel/hook.ts"],"names":[],"mappings":";AASA,OAAO,EAAoB,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAE7E,OAAO,KAAK,EACX,cAAc,EACd,qBAAqB,EACrB,mBAAmB,EAEnB,eAAe,EACf,MAAM,UAAU,CAAC;AAgBlB,wBAAgB,aAAa,CAC5B,KAAK,EAAE,uBAAuB,CAAE,eAAe,EAAE,KAAK,CAAE;;;;kCA2BtB,cAAc;qCAMX,MAAM;uCAgCnC,MAAM,UACN,qBAAqB;;;;;;;wBAmDD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiElC"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel/hook.ts"],"names":[],"mappings":";AASA,OAAO,EAAoB,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAE7E,OAAO,KAAK,EACX,cAAc,EACd,qBAAqB,EACrB,mBAAmB,EAEnB,eAAe,EACf,MAAM,UAAU,CAAC;AAkBlB,wBAAgB,aAAa,CAC5B,KAAK,EAAE,uBAAuB,CAAE,eAAe,EAAE,KAAK,CAAE;;;;kCA2BtB,cAAc;qCAMX,MAAM;uCAgCnC,MAAM,UACN,qBAAqB;;;;;;;wBAoDD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiElC"}

package/build-types/tools-panel/tools-panel-header/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel-header/component.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAEX,qBAAqB,EACrB,MAAM,UAAU,CAAC;AAkKlB,QAAA,MAAM,yBAAyB,kFAG9B,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel-header/component.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAEX,qBAAqB,EACrB,MAAM,UAAU,CAAC;AAmKlB,QAAA,MAAM,yBAAyB,kFAG9B,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/build-types/utils/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export { default as useControlledState } from "./use-controlled-state";
 export { default as useUpdateEffect } from "./use-update-effect";
+export { useCombinedRef } from "./use-combined-ref";
 export { useControlledValue } from "./use-controlled-value";
 export { useCx } from "./use-cx";
 export { useLatestRef } from "./use-latest-ref";

package/build-types/utils/hooks/use-combined-ref.d.ts

@@ -0,0 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { MutableRefObject, RefCallback } from 'react';
+declare type Ref<T> = MutableRefObject<T | null> | RefCallback<T | null>;
+export declare function useCombinedRef<T extends HTMLElement>(...refs: Ref<T>[]): MutableRefObject<null>;
+export {};
+//# sourceMappingURL=use-combined-ref.d.ts.map

package/build-types/utils/hooks/use-combined-ref.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-combined-ref.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-combined-ref.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3D,aAAK,GAAG,CAAE,CAAC,IAAK,gBAAgB,CAAE,CAAC,GAAG,IAAI,CAAE,GAAG,WAAW,CAAE,CAAC,GAAG,IAAI,CAAE,CAAC;AAEvE,wBAAgB,cAAc,CAAE,CAAC,SAAS,WAAW,EAAI,GAAG,IAAI,EAAE,GAAG,CAAE,CAAC,CAAE,EAAE,0BAgB3E"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.0.0",
+	"version": "19.0.1",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,18 +36,18 @@
 		"@emotion/styled": "^11.3.0",
 		"@emotion/utils": "1.0.0",
 		"@wordpress/a11y": "^3.2.3",
-		"@wordpress/compose": "^5.0.4",
+		"@wordpress/compose": "^5.0.5",
 		"@wordpress/date": "^4.2.2",
 		"@wordpress/deprecated": "^3.2.2",
-		"@wordpress/dom": "^3.2.5",
+		"@wordpress/dom": "^3.2.6",
 		"@wordpress/element": "^4.0.3",
 		"@wordpress/hooks": "^3.2.1",
 		"@wordpress/i18n": "^4.2.3",
-		"@wordpress/icons": "^6.0.1",
+		"@wordpress/icons": "^6.1.0",
 		"@wordpress/is-shallow-equal": "^4.2.0",
 		"@wordpress/keycodes": "^3.2.3",
 		"@wordpress/primitives": "^3.0.3",
-		"@wordpress/rich-text": "^5.0.4",
+		"@wordpress/rich-text": "^5.0.5",
 		"@wordpress/warning": "^2.2.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -74,5 +74,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "157f4ae53ab98e574af01f72213ae5a9613159ff"
+	"gitHead": "393c2b5533837fd637e998d23f0124c081a10df0"
 }

package/src/angle-picker-control/index.js

@@ -49,7 +49,9 @@ export default function AnglePickerControl( {
 						<Spacer
 							as={ Text }
 							marginRight={ space( 3 ) }
-							color="blue"
+							style={ {
+								color: 'var( --wp-admin-theme-color )',
+							} }
 						>
 							°
 						</Spacer>

package/src/angle-picker-control/styles/angle-picker-control-styles.js

@@ -36,9 +36,9 @@ export const CircleIndicatorWrapper = styled.div`
 `;
 
 export const CircleIndicator = styled.div`
-	background: #3858e9;
+	background: ${ COLORS.admin.theme };
 	border-radius: 50%;
-	border: ${ INNER_CIRCLE_SIZE }px solid #3858e9;
+	border: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.admin.theme };
 	bottom: 0;
 	box-sizing: border-box;
 	display: block;

package/src/base-control/index.js

@@ -74,7 +74,7 @@ function BaseControl( {
 			</StyledField>
 			{ !! help && (
 				<StyledHelp
-					id={ id + '__help' }
+					id={ id ? id + '__help' : undefined }
 					className="components-base-control__help"
 				>
 					{ help }