@wordpress/components 17.0.0 → 19.0.2

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

@@ -1,11 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement, Fragment } from "@wordpress/element";
 
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+
 /**
  * WordPress dependencies
  */
-import { check, moreVertical } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import { check, reset, moreVertical, plus } from '@wordpress/icons';
+import { __, _x, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
@@ -13,50 +18,129 @@ import { __ } 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 ToolsPanelHeader = (props, forwardedRef) => {
-  const {
-    hasMenuItems,
-    header,
-    menuItems,
-    menuLabel,
-    resetAll,
-    toggleItem,
-    ...headerProps
-  } = useToolsPanelHeader(props);
+const noop = () => {};
 
-  if (!header) {
+const DefaultControlsGroup = _ref => {
+  let {
+    items,
+    onClose,
+    toggleItem
+  } = _ref;
+
+  if (!items.length) {
     return null;
   }
 
-  return createElement("h2", _extends({}, headerProps, {
-    ref: forwardedRef
-  }), header, hasMenuItems && createElement(DropdownMenu, {
-    icon: moreVertical,
-    label: menuLabel
-  }, ({
-    onClose
-  }) => createElement(Fragment, null, createElement(MenuGroup, {
-    label: __('Display options')
-  }, Object.entries(menuItems).map(([label, isSelected]) => {
+  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;
+    return createElement(MenuItem, {
+      key: label,
+      icon: icon,
+      isSelected: true,
+      disabled: !hasValue,
+      label: itemLabel,
+      onClick: () => {
+        toggleItem(label);
+        onClose();
+      },
+      role: "menuitemcheckbox"
+    }, label);
+  }));
+};
+
+const OptionalControlsGroup = _ref3 => {
+  let {
+    items,
+    onClose,
+    toggleItem
+  } = _ref3;
+
+  if (!items.length) {
+    return null;
+  }
+
+  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);
     return createElement(MenuItem, {
       key: label,
       icon: isSelected && check,
       isSelected: isSelected,
+      label: itemLabel,
       onClick: () => {
         toggleItem(label);
         onClose();
       },
       role: "menuitemcheckbox"
     }, label);
-  })), createElement(MenuGroup, null, createElement(MenuItem, {
-    onClick: () => {
-      resetAll();
-      onClose();
+  }));
+};
+
+const ToolsPanelHeader = (props, forwardedRef) => {
+  const {
+    areAllOptionalControlsHidden,
+    dropdownMenuClassName,
+    hasMenuItems,
+    headingClassName,
+    label: labelText,
+    menuItems,
+    resetAll,
+    toggleItem,
+    ...headerProps
+  } = useToolsPanelHeader(props);
+
+  if (!labelText) {
+    return null;
+  }
+
+  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) || {});
+  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
+  }), createElement(Heading, {
+    level: 2,
+    className: headingClassName
+  }, labelText), hasMenuItems && createElement(DropdownMenu, {
+    icon: dropDownMenuIcon,
+    label: dropDownMenuLabelText,
+    menuProps: {
+      className: dropdownMenuClassName
+    },
+    toggleProps: {
+      isSmall: true
     }
-  }, __('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.js"],"names":["check","moreVertical","__","DropdownMenu","MenuGroup","MenuItem","useToolsPanelHeader","contextConnect","ToolsPanelHeader","props","forwardedRef","hasMenuItems","header","menuItems","menuLabel","resetAll","toggleItem","headerProps","onClose","Object","entries","map","label","isSelected","ConnectedToolsPanelHeader"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,KAAT,EAAgBC,YAAhB,QAAoC,kBAApC;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,qBAAzB;AACA,OAAOC,SAAP,MAAsB,kBAAtB;AACA,OAAOC,QAAP,MAAqB,iBAArB;AACA,SAASC,mBAAT,QAAoC,QAApC;AACA,SAASC,cAAT,QAA+B,kBAA/B;;AAEA,MAAMC,gBAAgB,GAAG,CAAEC,KAAF,EAASC,YAAT,KAA2B;AACnD,QAAM;AACLC,IAAAA,YADK;AAELC,IAAAA,MAFK;AAGLC,IAAAA,SAHK;AAILC,IAAAA,SAJK;AAKLC,IAAAA,QALK;AAMLC,IAAAA,UANK;AAOL,OAAGC;AAPE,MAQFX,mBAAmB,CAAEG,KAAF,CARvB;;AAUA,MAAK,CAAEG,MAAP,EAAgB;AACf,WAAO,IAAP;AACA;;AAED,SACC,iCAASK,WAAT;AAAuB,IAAA,GAAG,EAAGP;AAA7B,MACGE,MADH,EAEGD,YAAY,IACb,cAAC,YAAD;AAAc,IAAA,IAAI,EAAGV,YAArB;AAAoC,IAAA,KAAK,EAAGa;AAA5C,KACG,CAAE;AAAEI,IAAAA;AAAF,GAAF,KACD,8BACC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAGhB,EAAE,CAAE,iBAAF;AAArB,KACGiB,MAAM,CAACC,OAAP,CAAgBP,SAAhB,EAA4BQ,GAA5B,CACD,CAAE,CAAEC,KAAF,EAASC,UAAT,CAAF,KAA6B;AAC5B,WACC,cAAC,QAAD;AACC,MAAA,GAAG,EAAGD,KADP;AAEC,MAAA,IAAI,EAAGC,UAAU,IAAIvB,KAFtB;AAGC,MAAA,UAAU,EAAGuB,UAHd;AAIC,MAAA,OAAO,EAAG,MAAM;AACfP,QAAAA,UAAU,CAAEM,KAAF,CAAV;AACAJ,QAAAA,OAAO;AACP,OAPF;AAQC,MAAA,IAAI,EAAC;AARN,OAUGI,KAVH,CADD;AAcA,GAhBA,CADH,CADD,EAqBC,cAAC,SAAD,QACC,cAAC,QAAD;AACC,IAAA,OAAO,EAAG,MAAM;AACfP,MAAAA,QAAQ;AACRG,MAAAA,OAAO;AACP;AAJF,KAMGhB,EAAE,CAAE,WAAF,CANL,CADD,CArBD,CAFF,CAHF,CADD;AA2CA,CA1DD;;AA4DA,MAAMsB,yBAAyB,GAAGjB,cAAc,CAC/CC,gBAD+C,EAE/C,kBAF+C,CAAhD;AAKA,eAAegB,yBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { check, moreVertical } from '@wordpress/icons';\nimport { __ } 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 } from '../../ui/context';\n\nconst ToolsPanelHeader = ( props, forwardedRef ) => {\n\tconst {\n\t\thasMenuItems,\n\t\theader,\n\t\tmenuItems,\n\t\tmenuLabel,\n\t\tresetAll,\n\t\ttoggleItem,\n\t\t...headerProps\n\t} = useToolsPanelHeader( props );\n\n\tif ( ! header ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<h2 { ...headerProps } ref={ forwardedRef }>\n\t\t\t{ header }\n\t\t\t{ hasMenuItems && (\n\t\t\t\t<DropdownMenu icon={ moreVertical } label={ menuLabel }>\n\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<MenuGroup label={ __( 'Display options' ) }>\n\t\t\t\t\t\t\t\t{ Object.entries( menuItems ).map(\n\t\t\t\t\t\t\t\t\t( [ label, isSelected ] ) => {\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ label }\n\t\t\t\t\t\t\t\t\t\t\t\ticon={ isSelected && check }\n\t\t\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\ttoggleItem( label );\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t\t\t);\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</MenuGroup>\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\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

@@ -19,12 +19,22 @@ export function useToolsPanelHeader(props) {
   const classes = useMemo(() => {
     return cx(styles.ToolsPanelHeader, className);
   }, [className]);
+  const dropdownMenuClassName = useMemo(() => {
+    return cx(styles.DropdownMenu);
+  }, []);
+  const headingClassName = useMemo(() => {
+    return cx(styles.ToolsPanelHeading);
+  }, []);
   const {
-    menuItems
+    menuItems,
+    hasMenuItems,
+    areAllOptionalControlsHidden
   } = useToolsPanelContext();
-  const hasMenuItems = !!Object.entries(menuItems).length;
   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.js"],"names":["useMemo","styles","useToolsPanelContext","useContextSystem","useCx","useToolsPanelHeader","props","className","otherProps","cx","classes","ToolsPanelHeader","menuItems","hasMenuItems","Object","entries","length"],"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,QAAiC,kBAAjC;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAEA,OAAO,SAASC,mBAAT,CAA8BC,KAA9B,EAAsC;AAC5C,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,QAAM;AAAEK,IAAAA;AAAF,MAAgBV,oBAAoB,EAA1C;AACA,QAAMW,YAAY,GAAG,CAAC,CAAEC,MAAM,CAACC,OAAP,CAAgBH,SAAhB,EAA4BI,MAApD;AAEA,SAAO,EACN,GAAGR,UADG;AAENK,IAAAA,YAFM;AAGND,IAAAA,SAHM;AAINL,IAAAA,SAAS,EAAEG;AAJL,GAAP;AAMA","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 } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nexport function useToolsPanelHeader( props ) {\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 { menuItems } = useToolsPanelContext();\n\tconst hasMenuItems = !! Object.entries( menuItems ).length;\n\n\treturn {\n\t\t...otherProps,\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-header/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-header/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB","sourcesContent":["export { default } from './component';\n"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-header/index.ts"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB","sourcesContent":["export { default } from './component';\n"]}

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

@@ -1,23 +1,32 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+
 /**
  * Internal dependencies
  */
 import { useToolsPanelItem } from './hook';
 import { View } from '../../view';
-import { contextConnect } from '../../ui/context'; // This wraps controls to be conditionally displayed within a tools panel. It
-// prevents props being applied to HTML elements that would make them invalid.
+import { contextConnect } from '../../ui/context';
 
+// This wraps controls to be conditionally displayed within a tools panel. It
+// prevents props being applied to HTML elements that would make them invalid.
 const ToolsPanelItem = (props, forwardedRef) => {
   const {
     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.js"],"names":["useToolsPanelItem","View","contextConnect","ToolsPanelItem","props","forwardedRef","children","isShown","toolsPanelItemProps","ConnectedToolsPanelItem"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,iBAAT,QAAkC,QAAlC;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,cAAT,QAA+B,kBAA/B,C,CAEA;AACA;;AACA,MAAMC,cAAc,GAAG,CAAEC,KAAF,EAASC,YAAT,KAA2B;AACjD,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,CAdD;;AAgBA,MAAMG,uBAAuB,GAAGP,cAAc,CAC7CC,cAD6C,EAE7C,gBAF6C,CAA9C;AAKA,eAAeM,uBAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport { useToolsPanelItem } from './hook';\nimport { View } from '../../view';\nimport { contextConnect } from '../../ui/context';\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 = ( props, forwardedRef ) => {\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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { usePrevious } from '@wordpress/compose';
-import { useEffect, useMemo } from '@wordpress/element';
+import { useCallback, useEffect, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -12,52 +12,86 @@ import { useToolsPanelContext } from '../context';
 import { useContextSystem } from '../../ui/context';
 import { useCx } from '../../utils/hooks/use-cx';
 export function useToolsPanelItem(props) {
+  var _menuItems$menuGroup, _menuItems$menuGroup2;
+
   const {
     className,
     hasValue,
     isShownByDefault,
     label,
-    onDeselect = () => undefined,
-    onSelect = () => undefined,
+    panelId,
+    resetAllFilter,
+    onDeselect,
+    onSelect,
     ...otherProps
   } = useContextSystem(props, 'ToolsPanelItem');
-  const cx = useCx();
-  const classes = useMemo(() => {
-    return cx(styles.ToolsPanelItem, className);
-  });
   const {
+    panelId: currentPanelId,
     menuItems,
     registerPanelItem,
-    deregisterPanelItem
-  } = useToolsPanelContext(); // Registering the panel item allows the panel to include it in its
+    deregisterPanelItem,
+    flagItemCustomization,
+    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
   // automatically generated menu and determine its initial checked status.
 
   useEffect(() => {
-    registerPanelItem({
-      hasValue,
-      isShownByDefault,
-      label
-    });
+    if (currentPanelId === panelId) {
+      registerPanelItem({
+        hasValue: hasValueCallback,
+        isShownByDefault,
+        label,
+        resetAllFilter: resetAllFilterCallback,
+        panelId
+      });
+    }
+
     return () => deregisterPanelItem(label);
-  }, []);
-  const isValueSet = hasValue(); // Note: `label` is used as a key when building menu item state in
+  }, [currentPanelId, panelId, isShownByDefault, label, hasValueCallback, resetAllFilterCallback]);
+  const isValueSet = hasValue();
+  const wasValueSet = usePrevious(isValueSet); // If this item represents a default control it will need to notify the
+  // panel when a custom value has been set.
+
+  useEffect(() => {
+    if (isShownByDefault && isValueSet && !wasValueSet) {
+      flagItemCustomization(label);
+    }
+  }, [isValueSet, wasValueSet, isShownByDefault, label]); // Note: `label` is used as a key when building menu item state in
   // `ToolsPanel`.
 
-  const isMenuItemChecked = menuItems[label];
+  const menuGroup = isShownByDefault ? 'default' : 'optional';
+  const isMenuItemChecked = menuItems === null || menuItems === void 0 ? void 0 : (_menuItems$menuGroup = menuItems[menuGroup]) === null || _menuItems$menuGroup === void 0 ? void 0 : _menuItems$menuGroup[label];
   const wasMenuItemChecked = usePrevious(isMenuItemChecked); // Determine if the panel item's corresponding menu is being toggled and
   // trigger appropriate callback if it is.
 
   useEffect(() => {
+    if (isResetting || currentPanelId !== panelId) {
+      return;
+    }
+
     if (isMenuItemChecked && !isValueSet && !wasMenuItemChecked) {
-      onSelect();
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect();
     }
 
     if (!isMenuItemChecked && wasMenuItemChecked) {
-      onDeselect();
+      onDeselect === null || onDeselect === void 0 ? void 0 : onDeselect();
     }
-  }, [isMenuItemChecked, wasMenuItemChecked, isValueSet]);
+  }, [currentPanelId, isMenuItemChecked, isResetting, isValueSet, panelId, wasMenuItemChecked]); // The item is shown if it is a default control regardless of whether it
+  // has a value. Optional items are shown when they are checked or have
+  // 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: isMenuItemChecked,
+    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.js"],"names":["usePrevious","useEffect","useMemo","styles","useToolsPanelContext","useContextSystem","useCx","useToolsPanelItem","props","className","hasValue","isShownByDefault","label","onDeselect","undefined","onSelect","otherProps","cx","classes","ToolsPanelItem","menuItems","registerPanelItem","deregisterPanelItem","isValueSet","isMenuItemChecked","wasMenuItemChecked","isShown"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAT,QAA4B,oBAA5B;AACA,SAASC,SAAT,EAAoBC,OAApB,QAAmC,oBAAnC;AAEA;AACA;AACA;;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,oBAAT,QAAqC,YAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAEA,OAAO,SAASC,iBAAT,CAA4BC,KAA5B,EAAoC;AAC1C,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,QAFK;AAGLC,IAAAA,gBAHK;AAILC,IAAAA,KAJK;AAKLC,IAAAA,UAAU,GAAG,MAAMC,SALd;AAMLC,IAAAA,QAAQ,GAAG,MAAMD,SANZ;AAOL,OAAGE;AAPE,MAQFX,gBAAgB,CAAEG,KAAF,EAAS,gBAAT,CARpB;AAUA,QAAMS,EAAE,GAAGX,KAAK,EAAhB;AACA,QAAMY,OAAO,GAAGhB,OAAO,CAAE,MAAM;AAC9B,WAAOe,EAAE,CAAEd,MAAM,CAACgB,cAAT,EAAyBV,SAAzB,CAAT;AACA,GAFsB,CAAvB;AAIA,QAAM;AACLW,IAAAA,SADK;AAELC,IAAAA,iBAFK;AAGLC,IAAAA;AAHK,MAIFlB,oBAAoB,EAJxB,CAhB0C,CAsB1C;AACA;;AACAH,EAAAA,SAAS,CAAE,MAAM;AAChBoB,IAAAA,iBAAiB,CAAE;AAClBX,MAAAA,QADkB;AAElBC,MAAAA,gBAFkB;AAGlBC,MAAAA;AAHkB,KAAF,CAAjB;AAMA,WAAO,MAAMU,mBAAmB,CAAEV,KAAF,CAAhC;AACA,GARQ,EAQN,EARM,CAAT;AAUA,QAAMW,UAAU,GAAGb,QAAQ,EAA3B,CAlC0C,CAoC1C;AACA;;AACA,QAAMc,iBAAiB,GAAGJ,SAAS,CAAER,KAAF,CAAnC;AACA,QAAMa,kBAAkB,GAAGzB,WAAW,CAAEwB,iBAAF,CAAtC,CAvC0C,CAyC1C;AACA;;AACAvB,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKuB,iBAAiB,IAAI,CAAED,UAAvB,IAAqC,CAAEE,kBAA5C,EAAiE;AAChEV,MAAAA,QAAQ;AACR;;AAED,QAAK,CAAES,iBAAF,IAAuBC,kBAA5B,EAAiD;AAChDZ,MAAAA,UAAU;AACV;AACD,GARQ,EAQN,CAAEW,iBAAF,EAAqBC,kBAArB,EAAyCF,UAAzC,CARM,CAAT;AAUA,SAAO,EACN,GAAGP,UADG;AAENU,IAAAA,OAAO,EAAEF,iBAFH;AAGNf,IAAAA,SAAS,EAAES;AAHL,GAAP;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useEffect, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nexport function useToolsPanelItem( props ) {\n\tconst {\n\t\tclassName,\n\t\thasValue,\n\t\tisShownByDefault,\n\t\tlabel,\n\t\tonDeselect = () => undefined,\n\t\tonSelect = () => undefined,\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} );\n\n\tconst {\n\t\tmenuItems,\n\t\tregisterPanelItem,\n\t\tderegisterPanelItem,\n\t} = useToolsPanelContext();\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\tregisterPanelItem( {\n\t\t\thasValue,\n\t\t\tisShownByDefault,\n\t\t\tlabel,\n\t\t} );\n\n\t\treturn () => deregisterPanelItem( label );\n\t}, [] );\n\n\tconst isValueSet = hasValue();\n\n\t// Note: `label` is used as a key when building menu item state in\n\t// `ToolsPanel`.\n\tconst isMenuItemChecked = menuItems[ 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 ( 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}, [ isMenuItemChecked, wasMenuItemChecked, isValueSet ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tisShown: isMenuItemChecked,\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/tools-panel-item/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-item/index.js"],"names":["default","useToolsPanelItem"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB;AACA,SAASC,iBAAT,QAAkC,QAAlC","sourcesContent":["export { default } from './component';\nexport { useToolsPanelItem } from './hook';\n"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-item/index.ts"],"names":["default","useToolsPanelItem"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB;AACA,SAASC,iBAAT,QAAkC,QAAlC","sourcesContent":["export { default } from './component';\nexport { useToolsPanelItem } from './hook';\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build-module/tooltip/index.js

@@ -28,60 +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
-}) {
+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.
@@ -90,7 +106,7 @@ function Tooltip({
    */
   const [isMouseDown, setIsMouseDown] = useState(false);
   const [isOver, setIsOver] = useState(false);
-  const delayedSetIsOver = useDebounce(setIsOver, TOOLTIP_DELAY);
+  const delayedSetIsOver = useDebounce(setIsOver, delay);
 
   const createMouseDown = event => {
     // Preserve original child callback behavior