@wordpress/components 18.0.0 → 19.0.3

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

@@ -9,8 +9,8 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { check, reset, moreVertical } from '@wordpress/icons';
-import { __, sprintf } from '@wordpress/i18n';
+import { check, reset, moreVertical, plus } from '@wordpress/icons';
+import { __, _x, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
@@ -18,21 +18,26 @@ import { __, sprintf } from '@wordpress/i18n';
 import DropdownMenu from '../../dropdown-menu';
 import MenuGroup from '../../menu-group';
 import MenuItem from '../../menu-item';
+import { HStack } from '../../h-stack';
+import { Heading } from '../../heading';
 import { useToolsPanelHeader } from './hook';
 import { contextConnect } from '../../ui/context';
 
 const noop = () => {};
 
-const DefaultControlsGroup = ({
-  items,
-  onClose,
-  toggleItem
-}) => {
+const DefaultControlsGroup = _ref => {
+  let {
+    items,
+    onClose,
+    toggleItem
+  } = _ref;
+
   if (!items.length) {
     return null;
   }
 
-  return createElement(MenuGroup, null, items.map(([label, hasValue]) => {
+  return createElement(MenuGroup, null, items.map(_ref2 => {
+    let [label, hasValue] = _ref2;
     const icon = hasValue ? reset : check;
     const itemLabel = hasValue ? sprintf( // translators: %s: The name of the control being reset e.g. "Padding".
     __('Reset %s'), label) : undefined;
@@ -51,16 +56,19 @@ const DefaultControlsGroup = ({
   }));
 };
 
-const OptionalControlsGroup = ({
-  items,
-  onClose,
-  toggleItem
-}) => {
+const OptionalControlsGroup = _ref3 => {
+  let {
+    items,
+    onClose,
+    toggleItem
+  } = _ref3;
+
   if (!items.length) {
     return null;
   }
 
-  return createElement(MenuGroup, null, items.map(([label, isSelected]) => {
+  return createElement(MenuGroup, null, items.map(_ref4 => {
+    let [label, isSelected] = _ref4;
     const itemLabel = isSelected ? sprintf( // translators: %s: The name of the control being hidden and reset e.g. "Padding".
     __('Hide and reset %s'), label) : sprintf( // translators: %s: The name of the control to display e.g. "Padding".
     __('Show %s'), label);
@@ -80,8 +88,10 @@ const OptionalControlsGroup = ({
 
 const ToolsPanelHeader = (props, forwardedRef) => {
   const {
+    areAllOptionalControlsHidden,
     dropdownMenuClassName,
     hasMenuItems,
+    headingClassName,
     label: labelText,
     menuItems,
     resetAll,
@@ -95,31 +105,42 @@ const ToolsPanelHeader = (props, forwardedRef) => {
 
   const defaultItems = Object.entries((menuItems === null || menuItems === void 0 ? void 0 : menuItems.default) || {});
   const optionalItems = Object.entries((menuItems === null || menuItems === void 0 ? void 0 : menuItems.optional) || {});
-  return createElement("h2", _extends({}, headerProps, {
+  const dropDownMenuIcon = areAllOptionalControlsHidden ? plus : moreVertical;
+  const dropDownMenuLabelText = areAllOptionalControlsHidden ? _x('View and add options', 'Button label to reveal tool panel options') : _x('View options', 'Button label to reveal tool panel options');
+  return createElement(HStack, _extends({}, headerProps, {
     ref: forwardedRef
-  }), labelText, hasMenuItems && createElement(DropdownMenu, {
-    icon: moreVertical,
-    label: labelText,
+  }), createElement(Heading, {
+    level: 2,
+    className: headingClassName
+  }, labelText), hasMenuItems && createElement(DropdownMenu, {
+    icon: dropDownMenuIcon,
+    label: dropDownMenuLabelText,
     menuProps: {
       className: dropdownMenuClassName
+    },
+    toggleProps: {
+      isSmall: true
     }
-  }, ({
-    onClose = noop
-  }) => createElement(Fragment, null, createElement(DefaultControlsGroup, {
-    items: defaultItems,
-    onClose: onClose,
-    toggleItem: toggleItem
-  }), createElement(OptionalControlsGroup, {
-    items: optionalItems,
-    onClose: onClose,
-    toggleItem: toggleItem
-  }), createElement(MenuGroup, null, createElement(MenuItem, {
-    variant: 'tertiary',
-    onClick: () => {
-      resetAll();
-      onClose();
-    }
-  }, __('Reset all'))))));
+  }, _ref5 => {
+    let {
+      onClose = noop
+    } = _ref5;
+    return createElement(Fragment, null, createElement(DefaultControlsGroup, {
+      items: defaultItems,
+      onClose: onClose,
+      toggleItem: toggleItem
+    }), createElement(OptionalControlsGroup, {
+      items: optionalItems,
+      onClose: onClose,
+      toggleItem: toggleItem
+    }), createElement(MenuGroup, null, createElement(MenuItem, {
+      variant: 'tertiary',
+      onClick: () => {
+        resetAll();
+        onClose();
+      }
+    }, __('Reset all'))));
+  }));
 };
 
 const ConnectedToolsPanelHeader = contextConnect(ToolsPanelHeader, 'ToolsPanelHeader');

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","__","sprintf","DropdownMenu","MenuGroup","MenuItem","useToolsPanelHeader","contextConnect","noop","DefaultControlsGroup","items","onClose","toggleItem","length","map","label","hasValue","icon","itemLabel","undefined","OptionalControlsGroup","isSelected","ToolsPanelHeader","props","forwardedRef","dropdownMenuClassName","hasMenuItems","labelText","menuItems","resetAll","headerProps","defaultItems","Object","entries","default","optionalItems","optional","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 } from '@wordpress/icons';\nimport { __, 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 { 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\tdropdownMenuClassName,\n\t\thasMenuItems,\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\n\treturn (\n\t\t<h2 { ...headerProps } ref={ forwardedRef }>\n\t\t\t{ labelText }\n\t\t\t{ hasMenuItems && (\n\t\t\t\t<DropdownMenu\n\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\tlabel={ labelText }\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</h2>\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/tools-panel/tools-panel-header/hook.js

@@ -22,13 +22,19 @@ export function useToolsPanelHeader(props) {
   const dropdownMenuClassName = useMemo(() => {
     return cx(styles.DropdownMenu);
   }, []);
+  const headingClassName = useMemo(() => {
+    return cx(styles.ToolsPanelHeading);
+  }, []);
   const {
     menuItems,
-    hasMenuItems
+    hasMenuItems,
+    areAllOptionalControlsHidden
   } = useToolsPanelContext();
   return { ...otherProps,
+    areAllOptionalControlsHidden,
     dropdownMenuClassName,
     hasMenuItems,
+    headingClassName,
     menuItems,
     className: classes
   };

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-header/hook.ts"],"names":["useMemo","styles","useToolsPanelContext","useContextSystem","useCx","useToolsPanelHeader","props","className","otherProps","cx","classes","ToolsPanelHeader","dropdownMenuClassName","DropdownMenu","menuItems","hasMenuItems"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,oBAAT,QAAqC,YAArC;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAGA,OAAO,SAASC,mBAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+BL,gBAAgB,CACpDG,KADoD,EAEpD,kBAFoD,CAArD;AAKA,QAAMG,EAAE,GAAGL,KAAK,EAAhB;AACA,QAAMM,OAAO,GAAGV,OAAO,CAAE,MAAM;AAC9B,WAAOS,EAAE,CAAER,MAAM,CAACU,gBAAT,EAA2BJ,SAA3B,CAAT;AACA,GAFsB,EAEpB,CAAEA,SAAF,CAFoB,CAAvB;AAIA,QAAMK,qBAAqB,GAAGZ,OAAO,CAAE,MAAM;AAC5C,WAAOS,EAAE,CAAER,MAAM,CAACY,YAAT,CAAT;AACA,GAFoC,EAElC,EAFkC,CAArC;AAIA,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA;AAAb,MAA8Bb,oBAAoB,EAAxD;AAEA,SAAO,EACN,GAAGM,UADG;AAENI,IAAAA,qBAFM;AAGNG,IAAAA,YAHM;AAIND,IAAAA,SAJM;AAKNP,IAAAA,SAAS,EAAEG;AALL,GAAP;AAOA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { ToolsPanelHeaderProps } from '../types';\n\nexport function useToolsPanelHeader(\n\tprops: WordPressComponentProps< ToolsPanelHeaderProps, 'h2' >\n) {\n\tconst { className, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'ToolsPanelHeader'\n\t);\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.ToolsPanelHeader, className );\n\t}, [ className ] );\n\n\tconst dropdownMenuClassName = useMemo( () => {\n\t\treturn cx( styles.DropdownMenu );\n\t}, [] );\n\n\tconst { menuItems, hasMenuItems } = useToolsPanelContext();\n\n\treturn {\n\t\t...otherProps,\n\t\tdropdownMenuClassName,\n\t\thasMenuItems,\n\t\tmenuItems,\n\t\tclassName: classes,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-header/hook.ts"],"names":["useMemo","styles","useToolsPanelContext","useContextSystem","useCx","useToolsPanelHeader","props","className","otherProps","cx","classes","ToolsPanelHeader","dropdownMenuClassName","DropdownMenu","headingClassName","ToolsPanelHeading","menuItems","hasMenuItems","areAllOptionalControlsHidden"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,oBAAT,QAAqC,YAArC;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAGA,OAAO,SAASC,mBAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+BL,gBAAgB,CACpDG,KADoD,EAEpD,kBAFoD,CAArD;AAKA,QAAMG,EAAE,GAAGL,KAAK,EAAhB;AACA,QAAMM,OAAO,GAAGV,OAAO,CAAE,MAAM;AAC9B,WAAOS,EAAE,CAAER,MAAM,CAACU,gBAAT,EAA2BJ,SAA3B,CAAT;AACA,GAFsB,EAEpB,CAAEA,SAAF,CAFoB,CAAvB;AAIA,QAAMK,qBAAqB,GAAGZ,OAAO,CAAE,MAAM;AAC5C,WAAOS,EAAE,CAAER,MAAM,CAACY,YAAT,CAAT;AACA,GAFoC,EAElC,EAFkC,CAArC;AAIA,QAAMC,gBAAgB,GAAGd,OAAO,CAAE,MAAM;AACvC,WAAOS,EAAE,CAAER,MAAM,CAACc,iBAAT,CAAT;AACA,GAF+B,EAE7B,EAF6B,CAAhC;AAIA,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,YAFK;AAGLC,IAAAA;AAHK,MAIFhB,oBAAoB,EAJxB;AAMA,SAAO,EACN,GAAGM,UADG;AAENU,IAAAA,4BAFM;AAGNN,IAAAA,qBAHM;AAINK,IAAAA,YAJM;AAKNH,IAAAA,gBALM;AAMNE,IAAAA,SANM;AAONT,IAAAA,SAAS,EAAEG;AAPL,GAAP;AASA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { ToolsPanelHeaderProps } from '../types';\n\nexport function useToolsPanelHeader(\n\tprops: WordPressComponentProps< ToolsPanelHeaderProps, 'h2' >\n) {\n\tconst { className, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'ToolsPanelHeader'\n\t);\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.ToolsPanelHeader, className );\n\t}, [ className ] );\n\n\tconst dropdownMenuClassName = useMemo( () => {\n\t\treturn cx( styles.DropdownMenu );\n\t}, [] );\n\n\tconst headingClassName = useMemo( () => {\n\t\treturn cx( styles.ToolsPanelHeading );\n\t}, [] );\n\n\tconst {\n\t\tmenuItems,\n\t\thasMenuItems,\n\t\tareAllOptionalControlsHidden,\n\t} = useToolsPanelContext();\n\n\treturn {\n\t\t...otherProps,\n\t\tareAllOptionalControlsHidden,\n\t\tdropdownMenuClassName,\n\t\thasMenuItems,\n\t\theadingClassName,\n\t\tmenuItems,\n\t\tclassName: classes,\n\t};\n}\n"]}

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

@@ -19,11 +19,14 @@ const ToolsPanelItem = (props, forwardedRef) => {
   const {
     children,
     isShown,
+    shouldRenderPlaceholder,
     ...toolsPanelItemProps
   } = useToolsPanelItem(props);
 
   if (!isShown) {
-    return null;
+    return shouldRenderPlaceholder ? createElement(View, _extends({}, toolsPanelItemProps, {
+      ref: forwardedRef
+    })) : null;
   }
 
   return createElement(View, _extends({}, toolsPanelItemProps, {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-item/component.tsx"],"names":["useToolsPanelItem","View","contextConnect","ToolsPanelItem","props","forwardedRef","children","isShown","toolsPanelItemProps","ConnectedToolsPanelItem"],"mappings":";;;AAAA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,iBAAT,QAAkC,QAAlC;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,cAAT,QAAwD,kBAAxD;;AAGA;AACA;AACA,MAAMC,cAAc,GAAG,CACtBC,KADsB,EAEtBC,YAFsB,KAGlB;AACJ,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,OAAZ;AAAqB,OAAGC;AAAxB,MAAgDR,iBAAiB,CACtEI,KADsE,CAAvE;;AAIA,MAAK,CAAEG,OAAP,EAAiB;AAChB,WAAO,IAAP;AACA;;AAED,SACC,cAAC,IAAD,eAAWC,mBAAX;AAAiC,IAAA,GAAG,EAAGH;AAAvC,MACGC,QADH,CADD;AAKA,CAjBD;;AAmBA,MAAMG,uBAAuB,GAAGP,cAAc,CAC7CC,cAD6C,EAE7C,gBAF6C,CAA9C;AAKA,eAAeM,uBAAf","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 { useToolsPanelItem } from './hook';\nimport { View } from '../../view';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport type { ToolsPanelItemProps } from '../types';\n\n// This wraps controls to be conditionally displayed within a tools panel. It\n// prevents props being applied to HTML elements that would make them invalid.\nconst ToolsPanelItem = (\n\tprops: WordPressComponentProps< ToolsPanelItemProps, 'div' >,\n\tforwardedRef: Ref< any >\n) => {\n\tconst { children, isShown, ...toolsPanelItemProps } = useToolsPanelItem(\n\t\tprops\n\t);\n\n\tif ( ! isShown ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<View { ...toolsPanelItemProps } ref={ forwardedRef }>\n\t\t\t{ children }\n\t\t</View>\n\t);\n};\n\nconst ConnectedToolsPanelItem = contextConnect(\n\tToolsPanelItem,\n\t'ToolsPanelItem'\n);\n\nexport default ConnectedToolsPanelItem;\n"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-item/component.tsx"],"names":["useToolsPanelItem","View","contextConnect","ToolsPanelItem","props","forwardedRef","children","isShown","shouldRenderPlaceholder","toolsPanelItemProps","ConnectedToolsPanelItem"],"mappings":";;;AAAA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,iBAAT,QAAkC,QAAlC;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,cAAT,QAAwD,kBAAxD;;AAGA;AACA;AACA,MAAMC,cAAc,GAAG,CACtBC,KADsB,EAEtBC,YAFsB,KAGlB;AACJ,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,OAFK;AAGLC,IAAAA,uBAHK;AAIL,OAAGC;AAJE,MAKFT,iBAAiB,CAAEI,KAAF,CALrB;;AAOA,MAAK,CAAEG,OAAP,EAAiB;AAChB,WAAOC,uBAAuB,GAC7B,cAAC,IAAD,eAAWC,mBAAX;AAAiC,MAAA,GAAG,EAAGJ;AAAvC,OAD6B,GAE1B,IAFJ;AAGA;;AAED,SACC,cAAC,IAAD,eAAWI,mBAAX;AAAiC,IAAA,GAAG,EAAGJ;AAAvC,MACGC,QADH,CADD;AAKA,CAtBD;;AAwBA,MAAMI,uBAAuB,GAAGR,cAAc,CAC7CC,cAD6C,EAE7C,gBAF6C,CAA9C;AAKA,eAAeO,uBAAf","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 { useToolsPanelItem } from './hook';\nimport { View } from '../../view';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport type { ToolsPanelItemProps } from '../types';\n\n// This wraps controls to be conditionally displayed within a tools panel. It\n// prevents props being applied to HTML elements that would make them invalid.\nconst ToolsPanelItem = (\n\tprops: WordPressComponentProps< ToolsPanelItemProps, 'div' >,\n\tforwardedRef: Ref< any >\n) => {\n\tconst {\n\t\tchildren,\n\t\tisShown,\n\t\tshouldRenderPlaceholder,\n\t\t...toolsPanelItemProps\n\t} = useToolsPanelItem( props );\n\n\tif ( ! isShown ) {\n\t\treturn shouldRenderPlaceholder ? (\n\t\t\t<View { ...toolsPanelItemProps } ref={ forwardedRef } />\n\t\t) : null;\n\t}\n\n\treturn (\n\t\t<View { ...toolsPanelItemProps } ref={ forwardedRef }>\n\t\t\t{ children }\n\t\t</View>\n\t);\n};\n\nconst ConnectedToolsPanelItem = contextConnect(\n\tToolsPanelItem,\n\t'ToolsPanelItem'\n);\n\nexport default ConnectedToolsPanelItem;\n"]}

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

@@ -25,17 +25,14 @@ export function useToolsPanelItem(props) {
     onSelect,
     ...otherProps
   } = useContextSystem(props, 'ToolsPanelItem');
-  const cx = useCx();
-  const classes = useMemo(() => {
-    return cx(styles.ToolsPanelItem, className);
-  }, [className]);
   const {
     panelId: currentPanelId,
     menuItems,
     registerPanelItem,
     deregisterPanelItem,
     flagItemCustomization,
-    isResetting
+    isResetting,
+    shouldRenderPlaceholderItems: shouldRenderPlaceholder
   } = useToolsPanelContext();
   const hasValueCallback = useCallback(hasValue, [panelId]);
   const resetAllFilterCallback = useCallback(resetAllFilter, [panelId]); // Registering the panel item allows the panel to include it in its
@@ -87,8 +84,14 @@ export function useToolsPanelItem(props) {
   // a value.
 
   const isShown = isShownByDefault ? (menuItems === null || menuItems === void 0 ? void 0 : (_menuItems$menuGroup2 = menuItems[menuGroup]) === null || _menuItems$menuGroup2 === void 0 ? void 0 : _menuItems$menuGroup2[label]) !== undefined : isMenuItemChecked;
+  const cx = useCx();
+  const classes = useMemo(() => {
+    const placeholderStyle = shouldRenderPlaceholder && !isShown && styles.ToolsPanelItemPlaceholder;
+    return cx(styles.ToolsPanelItem, placeholderStyle, className);
+  }, [isShown, shouldRenderPlaceholder, className]);
   return { ...otherProps,
     isShown,
+    shouldRenderPlaceholder,
     className: classes
   };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-item/hook.ts"],"names":["usePrevious","useCallback","useEffect","useMemo","styles","useToolsPanelContext","useContextSystem","useCx","useToolsPanelItem","props","className","hasValue","isShownByDefault","label","panelId","resetAllFilter","onDeselect","onSelect","otherProps","cx","classes","ToolsPanelItem","currentPanelId","menuItems","registerPanelItem","deregisterPanelItem","flagItemCustomization","isResetting","hasValueCallback","resetAllFilterCallback","isValueSet","wasValueSet","menuGroup","isMenuItemChecked","wasMenuItemChecked","isShown","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useCallback, useEffect, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { ToolsPanelItemProps } from '../types';\n\nexport function useToolsPanelItem(\n\tprops: WordPressComponentProps< ToolsPanelItemProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\thasValue,\n\t\tisShownByDefault,\n\t\tlabel,\n\t\tpanelId,\n\t\tresetAllFilter,\n\t\tonDeselect,\n\t\tonSelect,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToolsPanelItem' );\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.ToolsPanelItem, className );\n\t}, [ className ] );\n\n\tconst {\n\t\tpanelId: currentPanelId,\n\t\tmenuItems,\n\t\tregisterPanelItem,\n\t\tderegisterPanelItem,\n\t\tflagItemCustomization,\n\t\tisResetting,\n\t} = useToolsPanelContext();\n\n\tconst hasValueCallback = useCallback( hasValue, [ panelId ] );\n\tconst resetAllFilterCallback = useCallback( resetAllFilter, [ panelId ] );\n\n\t// Registering the panel item allows the panel to include it in its\n\t// automatically generated menu and determine its initial checked status.\n\tuseEffect( () => {\n\t\tif ( currentPanelId === panelId ) {\n\t\t\tregisterPanelItem( {\n\t\t\t\thasValue: hasValueCallback,\n\t\t\t\tisShownByDefault,\n\t\t\t\tlabel,\n\t\t\t\tresetAllFilter: resetAllFilterCallback,\n\t\t\t\tpanelId,\n\t\t\t} );\n\t\t}\n\n\t\treturn () => deregisterPanelItem( label );\n\t}, [\n\t\tcurrentPanelId,\n\t\tpanelId,\n\t\tisShownByDefault,\n\t\tlabel,\n\t\thasValueCallback,\n\t\tresetAllFilterCallback,\n\t] );\n\n\tconst isValueSet = hasValue();\n\tconst wasValueSet = usePrevious( isValueSet );\n\n\t// If this item represents a default control it will need to notify the\n\t// panel when a custom value has been set.\n\tuseEffect( () => {\n\t\tif ( isShownByDefault && isValueSet && ! wasValueSet ) {\n\t\t\tflagItemCustomization( label );\n\t\t}\n\t}, [ isValueSet, wasValueSet, isShownByDefault, label ] );\n\n\t// Note: `label` is used as a key when building menu item state in\n\t// `ToolsPanel`.\n\tconst menuGroup = isShownByDefault ? 'default' : 'optional';\n\tconst isMenuItemChecked = menuItems?.[ menuGroup ]?.[ label ];\n\tconst wasMenuItemChecked = usePrevious( isMenuItemChecked );\n\n\t// Determine if the panel item's corresponding menu is being toggled and\n\t// trigger appropriate callback if it is.\n\tuseEffect( () => {\n\t\tif ( isResetting || currentPanelId !== panelId ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isMenuItemChecked && ! isValueSet && ! wasMenuItemChecked ) {\n\t\t\tonSelect?.();\n\t\t}\n\n\t\tif ( ! isMenuItemChecked && wasMenuItemChecked ) {\n\t\t\tonDeselect?.();\n\t\t}\n\t}, [\n\t\tcurrentPanelId,\n\t\tisMenuItemChecked,\n\t\tisResetting,\n\t\tisValueSet,\n\t\tpanelId,\n\t\twasMenuItemChecked,\n\t] );\n\n\t// The item is shown if it is a default control regardless of whether it\n\t// has a value. Optional items are shown when they are checked or have\n\t// a value.\n\tconst isShown = isShownByDefault\n\t\t? menuItems?.[ menuGroup ]?.[ label ] !== undefined\n\t\t: isMenuItemChecked;\n\n\treturn {\n\t\t...otherProps,\n\t\tisShown,\n\t\tclassName: classes,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-item/hook.ts"],"names":["usePrevious","useCallback","useEffect","useMemo","styles","useToolsPanelContext","useContextSystem","useCx","useToolsPanelItem","props","className","hasValue","isShownByDefault","label","panelId","resetAllFilter","onDeselect","onSelect","otherProps","currentPanelId","menuItems","registerPanelItem","deregisterPanelItem","flagItemCustomization","isResetting","shouldRenderPlaceholderItems","shouldRenderPlaceholder","hasValueCallback","resetAllFilterCallback","isValueSet","wasValueSet","menuGroup","isMenuItemChecked","wasMenuItemChecked","isShown","undefined","cx","classes","placeholderStyle","ToolsPanelItemPlaceholder","ToolsPanelItem"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useCallback, useEffect, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { ToolsPanelItemProps } from '../types';\n\nexport function useToolsPanelItem(\n\tprops: WordPressComponentProps< ToolsPanelItemProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\thasValue,\n\t\tisShownByDefault,\n\t\tlabel,\n\t\tpanelId,\n\t\tresetAllFilter,\n\t\tonDeselect,\n\t\tonSelect,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToolsPanelItem' );\n\n\tconst {\n\t\tpanelId: currentPanelId,\n\t\tmenuItems,\n\t\tregisterPanelItem,\n\t\tderegisterPanelItem,\n\t\tflagItemCustomization,\n\t\tisResetting,\n\t\tshouldRenderPlaceholderItems: shouldRenderPlaceholder,\n\t} = useToolsPanelContext();\n\n\tconst hasValueCallback = useCallback( hasValue, [ panelId ] );\n\tconst resetAllFilterCallback = useCallback( resetAllFilter, [ panelId ] );\n\n\t// Registering the panel item allows the panel to include it in its\n\t// automatically generated menu and determine its initial checked status.\n\tuseEffect( () => {\n\t\tif ( currentPanelId === panelId ) {\n\t\t\tregisterPanelItem( {\n\t\t\t\thasValue: hasValueCallback,\n\t\t\t\tisShownByDefault,\n\t\t\t\tlabel,\n\t\t\t\tresetAllFilter: resetAllFilterCallback,\n\t\t\t\tpanelId,\n\t\t\t} );\n\t\t}\n\n\t\treturn () => deregisterPanelItem( label );\n\t}, [\n\t\tcurrentPanelId,\n\t\tpanelId,\n\t\tisShownByDefault,\n\t\tlabel,\n\t\thasValueCallback,\n\t\tresetAllFilterCallback,\n\t] );\n\n\tconst isValueSet = hasValue();\n\tconst wasValueSet = usePrevious( isValueSet );\n\n\t// If this item represents a default control it will need to notify the\n\t// panel when a custom value has been set.\n\tuseEffect( () => {\n\t\tif ( isShownByDefault && isValueSet && ! wasValueSet ) {\n\t\t\tflagItemCustomization( label );\n\t\t}\n\t}, [ isValueSet, wasValueSet, isShownByDefault, label ] );\n\n\t// Note: `label` is used as a key when building menu item state in\n\t// `ToolsPanel`.\n\tconst menuGroup = isShownByDefault ? 'default' : 'optional';\n\tconst isMenuItemChecked = menuItems?.[ menuGroup ]?.[ label ];\n\tconst wasMenuItemChecked = usePrevious( isMenuItemChecked );\n\n\t// Determine if the panel item's corresponding menu is being toggled and\n\t// trigger appropriate callback if it is.\n\tuseEffect( () => {\n\t\tif ( isResetting || currentPanelId !== panelId ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isMenuItemChecked && ! isValueSet && ! wasMenuItemChecked ) {\n\t\t\tonSelect?.();\n\t\t}\n\n\t\tif ( ! isMenuItemChecked && wasMenuItemChecked ) {\n\t\t\tonDeselect?.();\n\t\t}\n\t}, [\n\t\tcurrentPanelId,\n\t\tisMenuItemChecked,\n\t\tisResetting,\n\t\tisValueSet,\n\t\tpanelId,\n\t\twasMenuItemChecked,\n\t] );\n\n\t// The item is shown if it is a default control regardless of whether it\n\t// has a value. Optional items are shown when they are checked or have\n\t// a value.\n\tconst isShown = isShownByDefault\n\t\t? menuItems?.[ menuGroup ]?.[ label ] !== undefined\n\t\t: isMenuItemChecked;\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\tconst placeholderStyle =\n\t\t\tshouldRenderPlaceholder &&\n\t\t\t! isShown &&\n\t\t\tstyles.ToolsPanelItemPlaceholder;\n\t\treturn cx( styles.ToolsPanelItem, placeholderStyle, className );\n\t}, [ isShown, shouldRenderPlaceholder, className ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tisShown,\n\t\tshouldRenderPlaceholder,\n\t\tclassName: classes,\n\t};\n}\n"]}

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

@@ -1,2 +1,2 @@
-
+export {};
 //# sourceMappingURL=types.js.map

package/build-module/tooltip/index.js

@@ -28,61 +28,76 @@ const eventCatcher = createElement("div", {
   className: "event-catcher"
 });
 
-const getDisabledElement = ({
-  eventHandlers,
-  child,
-  childrenWithPopover
-}) => cloneElement(createElement("span", {
-  className: "disabled-element-wrapper"
-}, cloneElement(eventCatcher, eventHandlers), cloneElement(child, {
-  children: childrenWithPopover
-}), ","), eventHandlers);
-
-const getRegularElement = ({
-  child,
-  eventHandlers,
-  childrenWithPopover
-}) => cloneElement(child, { ...eventHandlers,
-  children: childrenWithPopover
-});
+const getDisabledElement = _ref => {
+  let {
+    eventHandlers,
+    child,
+    childrenWithPopover
+  } = _ref;
+  return cloneElement(createElement("span", {
+    className: "disabled-element-wrapper"
+  }, cloneElement(eventCatcher, eventHandlers), cloneElement(child, {
+    children: childrenWithPopover
+  })), eventHandlers);
+};
+
+const getRegularElement = _ref2 => {
+  let {
+    child,
+    eventHandlers,
+    childrenWithPopover
+  } = _ref2;
+  return cloneElement(child, { ...eventHandlers,
+    children: childrenWithPopover
+  });
+};
 
-const addPopoverToGrandchildren = ({
-  grandchildren,
-  isOver,
-  position,
-  text,
-  shortcut
-}) => concatChildren(grandchildren, isOver && createElement(Popover, {
-  focusOnMount: false,
-  position: position,
-  className: "components-tooltip",
-  "aria-hidden": "true",
-  animate: false,
-  noArrow: true
-}, text, createElement(Shortcut, {
-  className: "components-tooltip__shortcut",
-  shortcut: shortcut
-})));
+const addPopoverToGrandchildren = _ref3 => {
+  let {
+    grandchildren,
+    isOver,
+    position,
+    text,
+    shortcut
+  } = _ref3;
+  return concatChildren(grandchildren, isOver && createElement(Popover, {
+    focusOnMount: false,
+    position: position,
+    className: "components-tooltip",
+    "aria-hidden": "true",
+    animate: false,
+    noArrow: true
+  }, text, createElement(Shortcut, {
+    className: "components-tooltip__shortcut",
+    shortcut: shortcut
+  })));
+};
 
 const emitToChild = (children, eventName, event) => {
   if (Children.count(children) !== 1) {
     return;
   }
 
-  const child = Children.only(children);
+  const child = Children.only(children); // If the underlying element is disabled, do not emit the event.
+
+  if (child.props.disabled) {
+    return;
+  }
 
   if (typeof child.props[eventName] === 'function') {
     child.props[eventName](event);
   }
 };
 
-function Tooltip({
-  children,
-  position,
-  text,
-  shortcut,
-  delay = TOOLTIP_DELAY
-}) {
+function Tooltip(_ref4) {
+  let {
+    children,
+    position,
+    text,
+    shortcut,
+    delay = TOOLTIP_DELAY
+  } = _ref4;
+
   /**
    * Whether a mouse is currently pressed, used in determining whether
    * to handle a focus event as displaying the tooltip immediately.

package/build-module/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tooltip/index.js"],"names":["includes","Children","cloneElement","concatChildren","useEffect","useState","useDebounce","Popover","Shortcut","TOOLTIP_DELAY","eventCatcher","getDisabledElement","eventHandlers","child","childrenWithPopover","children","getRegularElement","addPopoverToGrandchildren","grandchildren","isOver","position","text","shortcut","emitToChild","eventName","event","count","only","props","Tooltip","delay","isMouseDown","setIsMouseDown","setIsOver","delayedSetIsOver","createMouseDown","document","addEventListener","cancelIsMouseDown","createMouseUp","removeEventListener","createMouseEvent","type","createToggleIsOver","isDelayed","currentTarget","disabled","cancel","_isOver","clearOnUnmount","process","env","NODE_ENV","console","error","onMouseEnter","onMouseLeave","onClick","onFocus","onBlur","onMouseDown","getElementWithPopover","popoverData"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { includes } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tChildren,\n\tcloneElement,\n\tconcatChildren,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Popover from '../popover';\nimport Shortcut from '../shortcut';\n\n/**\n * Time over children to wait before showing tooltip\n *\n * @type {number}\n */\nexport const TOOLTIP_DELAY = 700;\n\nconst eventCatcher = <div className=\"event-catcher\" />;\n\nconst getDisabledElement = ( { eventHandlers, child, childrenWithPopover } ) =>\n\tcloneElement(\n\t\t<span className=\"disabled-element-wrapper\">\n\t\t\t{ cloneElement( eventCatcher, eventHandlers ) }\n\t\t\t{ cloneElement( child, {\n\t\t\t\tchildren: childrenWithPopover,\n\t\t\t} ) }\n\t\t\t,\n\t\t</span>,\n\t\teventHandlers\n\t);\n\nconst getRegularElement = ( { child, eventHandlers, childrenWithPopover } ) =>\n\tcloneElement( child, {\n\t\t...eventHandlers,\n\t\tchildren: childrenWithPopover,\n\t} );\n\nconst addPopoverToGrandchildren = ( {\n\tgrandchildren,\n\tisOver,\n\tposition,\n\ttext,\n\tshortcut,\n} ) =>\n\tconcatChildren(\n\t\tgrandchildren,\n\t\tisOver && (\n\t\t\t<Popover\n\t\t\t\tfocusOnMount={ false }\n\t\t\t\tposition={ position }\n\t\t\t\tclassName=\"components-tooltip\"\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tanimate={ false }\n\t\t\t\tnoArrow={ true }\n\t\t\t>\n\t\t\t\t{ text }\n\t\t\t\t<Shortcut\n\t\t\t\t\tclassName=\"components-tooltip__shortcut\"\n\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t/>\n\t\t\t</Popover>\n\t\t)\n\t);\n\nconst emitToChild = ( children, eventName, event ) => {\n\tif ( Children.count( children ) !== 1 ) {\n\t\treturn;\n\t}\n\n\tconst child = Children.only( children );\n\tif ( typeof child.props[ eventName ] === 'function' ) {\n\t\tchild.props[ eventName ]( event );\n\t}\n};\n\nfunction Tooltip( {\n\tchildren,\n\tposition,\n\ttext,\n\tshortcut,\n\tdelay = TOOLTIP_DELAY,\n} ) {\n\t/**\n\t * Whether a mouse is currently pressed, used in determining whether\n\t * to handle a focus event as displaying the tooltip immediately.\n\t *\n\t * @type {boolean}\n\t */\n\tconst [ isMouseDown, setIsMouseDown ] = useState( false );\n\tconst [ isOver, setIsOver ] = useState( false );\n\tconst delayedSetIsOver = useDebounce( setIsOver, delay );\n\n\tconst createMouseDown = ( event ) => {\n\t\t// Preserve original child callback behavior\n\t\temitToChild( children, 'onMouseDown', event );\n\n\t\t// On mouse down, the next `mouseup` should revert the value of the\n\t\t// instance property and remove its own event handler. The bind is\n\t\t// made on the document since the `mouseup` might not occur within\n\t\t// the bounds of the element.\n\t\tdocument.addEventListener( 'mouseup', cancelIsMouseDown );\n\t\tsetIsMouseDown( true );\n\t};\n\n\tconst createMouseUp = ( event ) => {\n\t\temitToChild( children, 'onMouseUp', event );\n\t\tdocument.removeEventListener( 'mouseup', cancelIsMouseDown );\n\t\tsetIsMouseDown( false );\n\t};\n\n\tconst createMouseEvent = ( type ) => {\n\t\tif ( type === 'mouseUp' ) return createMouseUp;\n\t\tif ( type === 'mouseDown' ) return createMouseDown;\n\t};\n\n\t/**\n\t * Prebound `isInMouseDown` handler, created as a constant reference to\n\t * assure ability to remove in component unmount.\n\t *\n\t * @type {Function}\n\t */\n\tconst cancelIsMouseDown = createMouseEvent( 'mouseUp' );\n\n\tconst createToggleIsOver = ( eventName, isDelayed ) => {\n\t\treturn ( event ) => {\n\t\t\t// Preserve original child callback behavior\n\t\t\temitToChild( children, eventName, event );\n\n\t\t\t// Mouse events behave unreliably in React for disabled elements,\n\t\t\t// firing on mouseenter but not mouseleave.  Further, the default\n\t\t\t// behavior for disabled elements in some browsers is to ignore\n\t\t\t// mouse events. Don't bother trying to to handle them.\n\t\t\t//\n\t\t\t// See: https://github.com/facebook/react/issues/4251\n\t\t\tif ( event.currentTarget.disabled ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// A focus event will occur as a result of a mouse click, but it\n\t\t\t// should be disambiguated between interacting with the button and\n\t\t\t// using an explicit focus shift as a cue to display the tooltip.\n\t\t\tif ( 'focus' === event.type && isMouseDown ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Needed in case unsetting is over while delayed set pending, i.e.\n\t\t\t// quickly blur/mouseleave before delayedSetIsOver is called\n\t\t\tdelayedSetIsOver.cancel();\n\n\t\t\tconst _isOver = includes( [ 'focus', 'mouseenter' ], event.type );\n\t\t\tif ( _isOver === isOver ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( isDelayed ) {\n\t\t\t\tdelayedSetIsOver( _isOver );\n\t\t\t} else {\n\t\t\t\tsetIsOver( _isOver );\n\t\t\t}\n\t\t};\n\t};\n\tconst clearOnUnmount = () => {\n\t\tdelayedSetIsOver.cancel();\n\t\tdocument.removeEventListener( 'mouseup', cancelIsMouseDown );\n\t};\n\n\tuseEffect( () => clearOnUnmount, [] );\n\n\tif ( Children.count( children ) !== 1 ) {\n\t\tif ( 'development' === process.env.NODE_ENV ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error(\n\t\t\t\t'Tooltip should be called with only a single child element.'\n\t\t\t);\n\t\t}\n\n\t\treturn children;\n\t}\n\n\tconst eventHandlers = {\n\t\tonMouseEnter: createToggleIsOver( 'onMouseEnter', true ),\n\t\tonMouseLeave: createToggleIsOver( 'onMouseLeave' ),\n\t\tonClick: createToggleIsOver( 'onClick' ),\n\t\tonFocus: createToggleIsOver( 'onFocus' ),\n\t\tonBlur: createToggleIsOver( 'onBlur' ),\n\t\tonMouseDown: createMouseEvent( 'mouseDown' ),\n\t};\n\n\tconst child = Children.only( children );\n\tconst { children: grandchildren, disabled } = child.props;\n\tconst getElementWithPopover = disabled\n\t\t? getDisabledElement\n\t\t: getRegularElement;\n\n\tconst popoverData = {\n\t\tisOver,\n\t\tposition,\n\t\ttext,\n\t\tshortcut,\n\t};\n\tconst childrenWithPopover = addPopoverToGrandchildren( {\n\t\tgrandchildren,\n\t\t...popoverData,\n\t} );\n\n\treturn getElementWithPopover( {\n\t\tchild,\n\t\teventHandlers,\n\t\tchildrenWithPopover,\n\t} );\n}\n\nexport default Tooltip;\n"]}
+{"version":3,"sources":["@wordpress/components/src/tooltip/index.js"],"names":["includes","Children","cloneElement","concatChildren","useEffect","useState","useDebounce","Popover","Shortcut","TOOLTIP_DELAY","eventCatcher","getDisabledElement","eventHandlers","child","childrenWithPopover","children","getRegularElement","addPopoverToGrandchildren","grandchildren","isOver","position","text","shortcut","emitToChild","eventName","event","count","only","props","disabled","Tooltip","delay","isMouseDown","setIsMouseDown","setIsOver","delayedSetIsOver","createMouseDown","document","addEventListener","cancelIsMouseDown","createMouseUp","removeEventListener","createMouseEvent","type","createToggleIsOver","isDelayed","currentTarget","cancel","_isOver","clearOnUnmount","process","env","NODE_ENV","console","error","onMouseEnter","onMouseLeave","onClick","onFocus","onBlur","onMouseDown","getElementWithPopover","popoverData"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { includes } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tChildren,\n\tcloneElement,\n\tconcatChildren,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Popover from '../popover';\nimport Shortcut from '../shortcut';\n\n/**\n * Time over children to wait before showing tooltip\n *\n * @type {number}\n */\nexport const TOOLTIP_DELAY = 700;\n\nconst eventCatcher = <div className=\"event-catcher\" />;\n\nconst getDisabledElement = ( { eventHandlers, child, childrenWithPopover } ) =>\n\tcloneElement(\n\t\t<span className=\"disabled-element-wrapper\">\n\t\t\t{ cloneElement( eventCatcher, eventHandlers ) }\n\t\t\t{ cloneElement( child, {\n\t\t\t\tchildren: childrenWithPopover,\n\t\t\t} ) }\n\t\t</span>,\n\t\teventHandlers\n\t);\n\nconst getRegularElement = ( { child, eventHandlers, childrenWithPopover } ) =>\n\tcloneElement( child, {\n\t\t...eventHandlers,\n\t\tchildren: childrenWithPopover,\n\t} );\n\nconst addPopoverToGrandchildren = ( {\n\tgrandchildren,\n\tisOver,\n\tposition,\n\ttext,\n\tshortcut,\n} ) =>\n\tconcatChildren(\n\t\tgrandchildren,\n\t\tisOver && (\n\t\t\t<Popover\n\t\t\t\tfocusOnMount={ false }\n\t\t\t\tposition={ position }\n\t\t\t\tclassName=\"components-tooltip\"\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tanimate={ false }\n\t\t\t\tnoArrow={ true }\n\t\t\t>\n\t\t\t\t{ text }\n\t\t\t\t<Shortcut\n\t\t\t\t\tclassName=\"components-tooltip__shortcut\"\n\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t/>\n\t\t\t</Popover>\n\t\t)\n\t);\n\nconst emitToChild = ( children, eventName, event ) => {\n\tif ( Children.count( children ) !== 1 ) {\n\t\treturn;\n\t}\n\n\tconst child = Children.only( children );\n\n\t// If the underlying element is disabled, do not emit the event.\n\tif ( child.props.disabled ) {\n\t\treturn;\n\t}\n\n\tif ( typeof child.props[ eventName ] === 'function' ) {\n\t\tchild.props[ eventName ]( event );\n\t}\n};\n\nfunction Tooltip( {\n\tchildren,\n\tposition,\n\ttext,\n\tshortcut,\n\tdelay = TOOLTIP_DELAY,\n} ) {\n\t/**\n\t * Whether a mouse is currently pressed, used in determining whether\n\t * to handle a focus event as displaying the tooltip immediately.\n\t *\n\t * @type {boolean}\n\t */\n\tconst [ isMouseDown, setIsMouseDown ] = useState( false );\n\tconst [ isOver, setIsOver ] = useState( false );\n\tconst delayedSetIsOver = useDebounce( setIsOver, delay );\n\n\tconst createMouseDown = ( event ) => {\n\t\t// Preserve original child callback behavior\n\t\temitToChild( children, 'onMouseDown', event );\n\n\t\t// On mouse down, the next `mouseup` should revert the value of the\n\t\t// instance property and remove its own event handler. The bind is\n\t\t// made on the document since the `mouseup` might not occur within\n\t\t// the bounds of the element.\n\t\tdocument.addEventListener( 'mouseup', cancelIsMouseDown );\n\t\tsetIsMouseDown( true );\n\t};\n\n\tconst createMouseUp = ( event ) => {\n\t\temitToChild( children, 'onMouseUp', event );\n\t\tdocument.removeEventListener( 'mouseup', cancelIsMouseDown );\n\t\tsetIsMouseDown( false );\n\t};\n\n\tconst createMouseEvent = ( type ) => {\n\t\tif ( type === 'mouseUp' ) return createMouseUp;\n\t\tif ( type === 'mouseDown' ) return createMouseDown;\n\t};\n\n\t/**\n\t * Prebound `isInMouseDown` handler, created as a constant reference to\n\t * assure ability to remove in component unmount.\n\t *\n\t * @type {Function}\n\t */\n\tconst cancelIsMouseDown = createMouseEvent( 'mouseUp' );\n\n\tconst createToggleIsOver = ( eventName, isDelayed ) => {\n\t\treturn ( event ) => {\n\t\t\t// Preserve original child callback behavior\n\t\t\temitToChild( children, eventName, event );\n\n\t\t\t// Mouse events behave unreliably in React for disabled elements,\n\t\t\t// firing on mouseenter but not mouseleave.  Further, the default\n\t\t\t// behavior for disabled elements in some browsers is to ignore\n\t\t\t// mouse events. Don't bother trying to to handle them.\n\t\t\t//\n\t\t\t// See: https://github.com/facebook/react/issues/4251\n\t\t\tif ( event.currentTarget.disabled ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// A focus event will occur as a result of a mouse click, but it\n\t\t\t// should be disambiguated between interacting with the button and\n\t\t\t// using an explicit focus shift as a cue to display the tooltip.\n\t\t\tif ( 'focus' === event.type && isMouseDown ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Needed in case unsetting is over while delayed set pending, i.e.\n\t\t\t// quickly blur/mouseleave before delayedSetIsOver is called\n\t\t\tdelayedSetIsOver.cancel();\n\n\t\t\tconst _isOver = includes( [ 'focus', 'mouseenter' ], event.type );\n\t\t\tif ( _isOver === isOver ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( isDelayed ) {\n\t\t\t\tdelayedSetIsOver( _isOver );\n\t\t\t} else {\n\t\t\t\tsetIsOver( _isOver );\n\t\t\t}\n\t\t};\n\t};\n\tconst clearOnUnmount = () => {\n\t\tdelayedSetIsOver.cancel();\n\t\tdocument.removeEventListener( 'mouseup', cancelIsMouseDown );\n\t};\n\n\tuseEffect( () => clearOnUnmount, [] );\n\n\tif ( Children.count( children ) !== 1 ) {\n\t\tif ( 'development' === process.env.NODE_ENV ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error(\n\t\t\t\t'Tooltip should be called with only a single child element.'\n\t\t\t);\n\t\t}\n\n\t\treturn children;\n\t}\n\n\tconst eventHandlers = {\n\t\tonMouseEnter: createToggleIsOver( 'onMouseEnter', true ),\n\t\tonMouseLeave: createToggleIsOver( 'onMouseLeave' ),\n\t\tonClick: createToggleIsOver( 'onClick' ),\n\t\tonFocus: createToggleIsOver( 'onFocus' ),\n\t\tonBlur: createToggleIsOver( 'onBlur' ),\n\t\tonMouseDown: createMouseEvent( 'mouseDown' ),\n\t};\n\n\tconst child = Children.only( children );\n\tconst { children: grandchildren, disabled } = child.props;\n\tconst getElementWithPopover = disabled\n\t\t? getDisabledElement\n\t\t: getRegularElement;\n\n\tconst popoverData = {\n\t\tisOver,\n\t\tposition,\n\t\ttext,\n\t\tshortcut,\n\t};\n\tconst childrenWithPopover = addPopoverToGrandchildren( {\n\t\tgrandchildren,\n\t\t...popoverData,\n\t} );\n\n\treturn getElementWithPopover( {\n\t\tchild,\n\t\teventHandlers,\n\t\tchildrenWithPopover,\n\t} );\n}\n\nexport default Tooltip;\n"]}

package/build-module/tooltip/index.native.js

@@ -52,14 +52,15 @@ const useKeyboardVisibility = () => {
   return keyboardVisible;
 };
 
-const Tooltip = ({
-  children,
-  position = 'top',
-  text,
-  visible: initialVisible = false
-}) => {
+const Tooltip = _ref => {
   var _styles$tooltip__shad;
 
+  let {
+    children,
+    position = 'top',
+    text,
+    visible: initialVisible = false
+  } = _ref;
   const referenceElementRef = useRef(null);
   const animationValue = useRef(new Animated.Value(0)).current;
   const [, horizontalPosition = 'center'] = position.split(' ');
@@ -184,9 +185,10 @@ const Tooltip = ({
     });
   };
 
-  const getTooltipLayout = ({
-    nativeEvent
-  }) => {
+  const getTooltipLayout = _ref2 => {
+    let {
+      nativeEvent
+    } = _ref2;
     const {
       height,
       width
@@ -216,10 +218,11 @@ const Tooltip = ({
   })))));
 };
 
-const TooltipSlot = ({
-  children,
-  ...rest
-}) => {
+const TooltipSlot = _ref3 => {
+  let {
+    children,
+    ...rest
+  } = _ref3;
   const [handleScreenTouch, setHandleScreenTouch] = useState(null);
 
   const onHandleScreenTouch = callback => {