@wordpress/components 19.2.1-next.33ec3857e2.0 → 19.4.0

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

@@ -55,6 +55,8 @@ const generateMenuItems = _ref => {
   return menuItems;
 };
 
+const isMenuItemTypeEmpty = obj => obj && Object.keys(obj).length === 0;
+
 function useToolsPanel(props) {
   const {
     className,
@@ -62,6 +64,8 @@ function useToolsPanel(props) {
     panelId,
     hasInnerWrapper,
     shouldRenderPlaceholderItems,
+    __experimentalFirstVisibleItemClass,
+    __experimentalLastVisibleItemClass,
     ...otherProps
   } = (0, _context.useContextSystem)(props, 'ToolsPanel');
   const isResetting = (0, _element.useRef)(false);
@@ -77,12 +81,11 @@ function useToolsPanel(props) {
   }, [wasResetting]); // Allow panel items to register themselves.
 
   const [panelItems, setPanelItems] = (0, _element.useState)([]);
-
-  const registerPanelItem = item => {
+  const registerPanelItem = (0, _element.useCallback)(item => {
     setPanelItems(items => {
-      const newItems = [...items]; // If an item with this label is already registered, remove it first.
-      // This can happen when an item is moved between the default and optional
-      // groups.
+      const newItems = [...items]; // If an item with this label has already been registered, remove it
+      // first. This can happen when an item is moved between the default
+      // and optional groups.
 
       const existingIndex = newItems.findIndex(oldItem => oldItem.label === item.label);
 
@@ -92,11 +95,10 @@ function useToolsPanel(props) {
 
       return [...newItems, item];
     });
-  }; // Panels need to deregister on unmount to avoid orphans in menu state.
+  }, [setPanelItems]); // Panels need to deregister on unmount to avoid orphans in menu state.
   // This is an issue when panel items are being injected via SlotFills.
 
-
-  const deregisterPanelItem = label => {
+  const deregisterPanelItem = (0, _element.useCallback)(label => {
     // When switching selections between components injecting matching
     // controls, e.g. both panels have a "padding" control, the
     // deregistration of the first panel doesn't occur until after the
@@ -111,8 +113,7 @@ function useToolsPanel(props) {
 
       return newItems;
     });
-  }; // Manage and share display state of menu items representing child controls.
-
+  }, [setPanelItems]); // Manage and share display state of menu items representing child controls.
 
   const [menuItems, setMenuItems] = (0, _element.useState)({
     default: {},
@@ -128,12 +129,12 @@ function useToolsPanel(props) {
       });
       return items;
     });
-  }, [panelItems]); // Force a menu item to be checked.
+  }, [generateMenuItems, panelItems, setMenuItems]); // Force a menu item to be checked.
   // This is intended for use with default panel items. They are displayed
   // separately to optional items and have different display states,
   // we need to update that when their value is customized.
 
-  const flagItemCustomization = function (label) {
+  const flagItemCustomization = (0, _element.useCallback)(function (label) {
     let group = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
     setMenuItems(items => {
       const newState = { ...items,
@@ -143,33 +144,30 @@ function useToolsPanel(props) {
       };
       return newState;
     });
-  }; // Whether all optional menu items are hidden or not must be tracked
+  }, [setMenuItems]); // Whether all optional menu items are hidden or not must be tracked
   // in order to later determine if the panel display is empty and handle
   // conditional display of a plus icon to indicate the presence of further
   // menu items.
 
-
   const [areAllOptionalControlsHidden, setAreAllOptionalControlsHidden] = (0, _element.useState)(false);
   (0, _element.useEffect)(() => {
-    if (menuItems.optional) {
-      const optionalItems = Object.entries(menuItems.optional);
-      const allControlsHidden = optionalItems.length > 0 && !optionalItems.some(_ref3 => {
+    if (isMenuItemTypeEmpty(menuItems === null || menuItems === void 0 ? void 0 : menuItems.default) && !isMenuItemTypeEmpty(menuItems === null || menuItems === void 0 ? void 0 : menuItems.optional)) {
+      const allControlsHidden = !Object.entries(menuItems.optional).some(_ref3 => {
         let [, isSelected] = _ref3;
         return isSelected;
       });
       setAreAllOptionalControlsHidden(allControlsHidden);
     }
-  }, [menuItems.optional]);
+  }, [menuItems, setAreAllOptionalControlsHidden]);
   const cx = (0, _useCx.useCx)();
   const classes = (0, _element.useMemo)(() => {
-    const hasDefaultMenuItems = (menuItems === null || menuItems === void 0 ? void 0 : menuItems.default) && !!Object.keys(menuItems === null || menuItems === void 0 ? void 0 : menuItems.default).length;
     const wrapperStyle = hasInnerWrapper && styles.ToolsPanelWithInnerWrapper(DEFAULT_COLUMNS);
-    const emptyStyle = !hasDefaultMenuItems && areAllOptionalControlsHidden && styles.ToolsPanelHiddenInnerWrapper;
+    const emptyStyle = isMenuItemTypeEmpty(menuItems === null || menuItems === void 0 ? void 0 : menuItems.default) && areAllOptionalControlsHidden && styles.ToolsPanelHiddenInnerWrapper;
     return cx(styles.ToolsPanel, wrapperStyle, emptyStyle, className);
-  }, [className, hasInnerWrapper, menuItems, areAllOptionalControlsHidden]); // Toggle the checked state of a menu item which is then used to determine
+  }, [areAllOptionalControlsHidden, className, cx, hasInnerWrapper, menuItems]); // Toggle the checked state of a menu item which is then used to determine
   // display of the item within the panel.
 
-  const toggleItem = label => {
+  const toggleItem = (0, _element.useCallback)(label => {
     const currentItem = panelItems.find(item => item.label === label);
 
     if (!currentItem) {
@@ -183,23 +181,19 @@ function useToolsPanel(props) {
       }
     };
     setMenuItems(newMenuItems);
-  };
+  }, [menuItems, panelItems, setMenuItems]); // Resets display of children and executes resetAll callback if available.
 
-  const getResetAllFilters = () => {
-    const filters = [];
-    panelItems.forEach(item => {
-      if (item.resetAllFilter) {
-        filters.push(item.resetAllFilter);
-      }
-    });
-    return filters;
-  }; // Resets display of children and executes resetAll callback if available.
-
-
-  const resetAllItems = () => {
+  const resetAllItems = (0, _element.useCallback)(() => {
     if (typeof resetAll === 'function') {
-      isResetting.current = true;
-      resetAll(getResetAllFilters());
+      isResetting.current = true; // Collect available reset filters from panel items.
+
+      const filters = [];
+      panelItems.forEach(item => {
+        if (item.resetAllFilter) {
+          filters.push(item.resetAllFilter);
+        }
+      });
+      resetAll(filters);
     } // Turn off display of all non-default items.
 
 
@@ -208,19 +202,32 @@ function useToolsPanel(props) {
       shouldReset: true
     });
     setMenuItems(resetMenuItems);
+  }, [generateMenuItems, isResetting.current, panelItems, resetAll, setMenuItems]); // Assist ItemGroup styling when there are potentially hidden placeholder
+  // items by identifying first & last items that are toggled on for display.
+
+  const getFirstVisibleItemLabel = items => {
+    const optionalItems = menuItems.optional || {};
+    const firstItem = items.find(item => item.isShownByDefault || !!optionalItems[item.label]);
+    return firstItem === null || firstItem === void 0 ? void 0 : firstItem.label;
   };
 
-  const panelContext = {
-    panelId,
-    menuItems,
-    registerPanelItem,
+  const firstDisplayedItem = getFirstVisibleItemLabel(panelItems);
+  const lastDisplayedItem = getFirstVisibleItemLabel([...panelItems].reverse());
+  const panelContext = (0, _element.useMemo)(() => ({
+    areAllOptionalControlsHidden,
     deregisterPanelItem,
+    firstDisplayedItem,
     flagItemCustomization,
-    areAllOptionalControlsHidden,
     hasMenuItems: !!panelItems.length,
     isResetting: isResetting.current,
-    shouldRenderPlaceholderItems
-  };
+    lastDisplayedItem,
+    menuItems,
+    panelId,
+    registerPanelItem,
+    shouldRenderPlaceholderItems,
+    __experimentalFirstVisibleItemClass,
+    __experimentalLastVisibleItemClass
+  }), [areAllOptionalControlsHidden, deregisterPanelItem, firstDisplayedItem, flagItemCustomization, isResetting.current, lastDisplayedItem, menuItems, panelId, panelItems, registerPanelItem, shouldRenderPlaceholderItems, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass]);
   return { ...otherProps,
     panelContext,
     resetAllItems,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel/hook.ts"],"names":["DEFAULT_COLUMNS","generateMenuItems","panelItems","shouldReset","currentMenuItems","menuItems","default","optional","forEach","hasValue","isShownByDefault","label","group","existingItemValue","value","undefined","useToolsPanel","props","className","resetAll","panelId","hasInnerWrapper","shouldRenderPlaceholderItems","otherProps","isResetting","wasResetting","current","setPanelItems","registerPanelItem","item","items","newItems","existingIndex","findIndex","oldItem","splice","deregisterPanelItem","index","setMenuItems","prevState","flagItemCustomization","newState","areAllOptionalControlsHidden","setAreAllOptionalControlsHidden","optionalItems","Object","entries","allControlsHidden","length","some","isSelected","cx","classes","hasDefaultMenuItems","keys","wrapperStyle","styles","ToolsPanelWithInnerWrapper","emptyStyle","ToolsPanelHiddenInnerWrapper","ToolsPanel","toggleItem","currentItem","find","menuGroup","newMenuItems","getResetAllFilters","filters","resetAllFilter","push","resetAllItems","resetMenuItems","panelContext","hasMenuItems"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;;;;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAYA,MAAMA,eAAe,GAAG,CAAxB;;AAEA,MAAMC,iBAAiB,GAAG,QAIQ;AAAA,MAJN;AAC3BC,IAAAA,UAD2B;AAE3BC,IAAAA,WAF2B;AAG3BC,IAAAA;AAH2B,GAIM;AACjC,QAAMC,SAA8B,GAAG;AAAEC,IAAAA,OAAO,EAAE,EAAX;AAAeC,IAAAA,QAAQ,EAAE;AAAzB,GAAvC;AAEAL,EAAAA,UAAU,CAACM,OAAX,CAAoB,SAA6C;AAAA;;AAAA,QAA3C;AAAEC,MAAAA,QAAF;AAAYC,MAAAA,gBAAZ;AAA8BC,MAAAA;AAA9B,KAA2C;AAChE,UAAMC,KAAK,GAAGF,gBAAgB,GAAG,SAAH,GAAe,UAA7C,CADgE,CAGhE;AACA;AACA;;AACA,UAAMG,iBAAiB,GAAGT,gBAAH,aAAGA,gBAAH,gDAAGA,gBAAgB,CAAIQ,KAAJ,CAAnB,0DAAG,sBAA+BD,KAA/B,CAA1B;AACA,UAAMG,KAAK,GACVD,iBAAiB,KAAKE,SAAtB,GAAkCF,iBAAlC,GAAsDJ,QAAQ,EAD/D;AAGAJ,IAAAA,SAAS,CAAEO,KAAF,CAAT,CAAoBD,KAApB,IAA8BR,WAAW,GAAG,KAAH,GAAWW,KAApD;AACA,GAXD;AAaA,SAAOT,SAAP;AACA,CArBD;;AAuBO,SAASW,aAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,QAFK;AAGLC,IAAAA,OAHK;AAILC,IAAAA,eAJK;AAKLC,IAAAA,4BALK;AAML,OAAGC;AANE,MAOF,+BAAkBN,KAAlB,EAAyB,YAAzB,CAPJ;AASA,QAAMO,WAAW,GAAG,qBAAQ,KAAR,CAApB;AACA,QAAMC,YAAY,GAAGD,WAAW,CAACE,OAAjC,CAXC,CAaD;AACA;AACA;AACA;;AACA,0BAAW,MAAM;AAChB,QAAKD,YAAL,EAAoB;AACnBD,MAAAA,WAAW,CAACE,OAAZ,GAAsB,KAAtB;AACA;AACD,GAJD,EAIG,CAAED,YAAF,CAJH,EAjBC,CAuBD;;AACA,QAAM,CAAEvB,UAAF,EAAcyB,aAAd,IAAgC,uBAA8B,EAA9B,CAAtC;;AAEA,QAAMC,iBAAiB,GAAKC,IAAF,IAA4B;AACrDF,IAAAA,aAAa,CAAIG,KAAF,IAAa;AAC3B,YAAMC,QAAQ,GAAG,CAAE,GAAGD,KAAL,CAAjB,CAD2B,CAE3B;AACA;AACA;;AACA,YAAME,aAAa,GAAGD,QAAQ,CAACE,SAAT,CACnBC,OAAF,IAAeA,OAAO,CAACvB,KAAR,KAAkBkB,IAAI,CAAClB,KADjB,CAAtB;;AAGA,UAAKqB,aAAa,KAAK,CAAC,CAAxB,EAA4B;AAC3BD,QAAAA,QAAQ,CAACI,MAAT,CAAiBH,aAAjB,EAAgC,CAAhC;AACA;;AACD,aAAO,CAAE,GAAGD,QAAL,EAAeF,IAAf,CAAP;AACA,KAZY,CAAb;AAaA,GAdD,CA1BC,CA0CD;AACA;;;AACA,QAAMO,mBAAmB,GAAKzB,KAAF,IAAqB;AAChD;AACA;AACA;AACA;AACAgB,IAAAA,aAAa,CAAIG,KAAF,IAAa;AAC3B,YAAMC,QAAQ,GAAG,CAAE,GAAGD,KAAL,CAAjB;AACA,YAAMO,KAAK,GAAGN,QAAQ,CAACE,SAAT,CACXJ,IAAF,IAAYA,IAAI,CAAClB,KAAL,KAAeA,KADd,CAAd;;AAGA,UAAK0B,KAAK,KAAK,CAAC,CAAhB,EAAoB;AACnBN,QAAAA,QAAQ,CAACI,MAAT,CAAiBE,KAAjB,EAAwB,CAAxB;AACA;;AACD,aAAON,QAAP;AACA,KATY,CAAb;AAUA,GAfD,CA5CC,CA6DD;;;AACA,QAAM,CAAE1B,SAAF,EAAaiC,YAAb,IAA8B,uBAAiC;AACpEhC,IAAAA,OAAO,EAAE,EAD2D;AAEpEC,IAAAA,QAAQ,EAAE;AAF0D,GAAjC,CAApC,CA9DC,CAmED;;AACA,0BAAW,MAAM;AAChB+B,IAAAA,YAAY,CAAIC,SAAF,IAAiB;AAC9B,YAAMT,KAAK,GAAG7B,iBAAiB,CAAE;AAChCC,QAAAA,UADgC;AAEhCC,QAAAA,WAAW,EAAE,KAFmB;AAGhCC,QAAAA,gBAAgB,EAAEmC;AAHc,OAAF,CAA/B;AAKA,aAAOT,KAAP;AACA,KAPW,CAAZ;AAQA,GATD,EASG,CAAE5B,UAAF,CATH,EApEC,CA+ED;AACA;AACA;AACA;;AACA,QAAMsC,qBAAqB,GAAG,UAC7B7B,KAD6B,EAGzB;AAAA,QADJC,KACI,uEAD2B,SAC3B;AACJ0B,IAAAA,YAAY,CAAIR,KAAF,IAAa;AAC1B,YAAMW,QAAQ,GAAG,EAChB,GAAGX,KADa;AAEhB,SAAElB,KAAF,GAAW,EACV,GAAGkB,KAAK,CAAElB,KAAF,CADE;AAEV,WAAED,KAAF,GAAW;AAFD;AAFK,OAAjB;AAOA,aAAO8B,QAAP;AACA,KATW,CAAZ;AAUA,GAdD,CAnFC,CAmGD;AACA;AACA;AACA;;;AACA,QAAM,CACLC,4BADK,EAELC,+BAFK,IAGF,uBAAU,KAAV,CAHJ;AAKA,0BAAW,MAAM;AAChB,QAAKtC,SAAS,CAACE,QAAf,EAA0B;AACzB,YAAMqC,aAAa,GAAGC,MAAM,CAACC,OAAP,CAAgBzC,SAAS,CAACE,QAA1B,CAAtB;AACA,YAAMwC,iBAAiB,GACtBH,aAAa,CAACI,MAAd,GAAuB,CAAvB,IACA,CAAEJ,aAAa,CAACK,IAAd,CAAoB;AAAA,YAAE,GAAIC,UAAJ,CAAF;AAAA,eAAwBA,UAAxB;AAAA,OAApB,CAFH;AAGAP,MAAAA,+BAA+B,CAAEI,iBAAF,CAA/B;AACA;AACD,GARD,EAQG,CAAE1C,SAAS,CAACE,QAAZ,CARH;AAUA,QAAM4C,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,UAAMC,mBAAmB,GACxB,CAAAhD,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEC,OAAX,KAAsB,CAAC,CAAEuC,MAAM,CAACS,IAAP,CAAajD,SAAb,aAAaA,SAAb,uBAAaA,SAAS,CAAEC,OAAxB,EAAkC0C,MAD5D;AAEA,UAAMO,YAAY,GACjBlC,eAAe,IACfmC,MAAM,CAACC,0BAAP,CAAmCzD,eAAnC,CAFD;AAGA,UAAM0D,UAAU,GACf,CAAEL,mBAAF,IACAX,4BADA,IAEAc,MAAM,CAACG,4BAHR;AAKA,WAAOR,EAAE,CAAEK,MAAM,CAACI,UAAT,EAAqBL,YAArB,EAAmCG,UAAnC,EAA+CxC,SAA/C,CAAT;AACA,GAZe,EAYb,CACFA,SADE,EAEFG,eAFE,EAGFhB,SAHE,EAIFqC,4BAJE,CAZa,CAAhB,CAvHC,CA0ID;AACA;;AACA,QAAMmB,UAAU,GAAKlD,KAAF,IAAqB;AACvC,UAAMmD,WAAW,GAAG5D,UAAU,CAAC6D,IAAX,CAAmBlC,IAAF,IAAYA,IAAI,CAAClB,KAAL,KAAeA,KAA5C,CAApB;;AAEA,QAAK,CAAEmD,WAAP,EAAqB;AACpB;AACA;;AAED,UAAME,SAAS,GAAGF,WAAW,CAACpD,gBAAZ,GAA+B,SAA/B,GAA2C,UAA7D;AAEA,UAAMuD,YAAY,GAAG,EACpB,GAAG5D,SADiB;AAEpB,OAAE2D,SAAF,GAAe,EACd,GAAG3D,SAAS,CAAE2D,SAAF,CADE;AAEd,SAAErD,KAAF,GAAW,CAAEN,SAAS,CAAE2D,SAAF,CAAT,CAAwBrD,KAAxB;AAFC;AAFK,KAArB;AAQA2B,IAAAA,YAAY,CAAE2B,YAAF,CAAZ;AACA,GAlBD;;AAoBA,QAAMC,kBAAkB,GAAG,MAAM;AAChC,UAAMC,OAA4B,GAAG,EAArC;AAEAjE,IAAAA,UAAU,CAACM,OAAX,CAAsBqB,IAAF,IAAY;AAC/B,UAAKA,IAAI,CAACuC,cAAV,EAA2B;AAC1BD,QAAAA,OAAO,CAACE,IAAR,CAAcxC,IAAI,CAACuC,cAAnB;AACA;AACD,KAJD;AAKA,WAAOD,OAAP;AACA,GATD,CAhKC,CA2KD;;;AACA,QAAMG,aAAa,GAAG,MAAM;AAC3B,QAAK,OAAOnD,QAAP,KAAoB,UAAzB,EAAsC;AACrCK,MAAAA,WAAW,CAACE,OAAZ,GAAsB,IAAtB;AACAP,MAAAA,QAAQ,CAAE+C,kBAAkB,EAApB,CAAR;AACA,KAJ0B,CAM3B;;;AACA,UAAMK,cAAc,GAAGtE,iBAAiB,CAAE;AACzCC,MAAAA,UADyC;AAEzCC,MAAAA,WAAW,EAAE;AAF4B,KAAF,CAAxC;AAIAmC,IAAAA,YAAY,CAAEiC,cAAF,CAAZ;AACA,GAZD;;AAcA,QAAMC,YAAY,GAAG;AACpBpD,IAAAA,OADoB;AAEpBf,IAAAA,SAFoB;AAGpBuB,IAAAA,iBAHoB;AAIpBQ,IAAAA,mBAJoB;AAKpBI,IAAAA,qBALoB;AAMpBE,IAAAA,4BANoB;AAOpB+B,IAAAA,YAAY,EAAE,CAAC,CAAEvE,UAAU,CAAC8C,MAPR;AAQpBxB,IAAAA,WAAW,EAAEA,WAAW,CAACE,OARL;AASpBJ,IAAAA;AAToB,GAArB;AAYA,SAAO,EACN,GAAGC,UADG;AAENiD,IAAAA,YAFM;AAGNF,IAAAA,aAHM;AAINT,IAAAA,UAJM;AAKN3C,IAAAA,SAAS,EAAEkC;AALL,GAAP;AAOA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useMemo, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type {\n\tToolsPanelItem,\n\tToolsPanelMenuItemKey,\n\tToolsPanelMenuItems,\n\tToolsPanelMenuItemsConfig,\n\tToolsPanelProps,\n} from '../types';\n\nconst DEFAULT_COLUMNS = 2;\n\nconst generateMenuItems = ( {\n\tpanelItems,\n\tshouldReset,\n\tcurrentMenuItems,\n}: ToolsPanelMenuItemsConfig ) => {\n\tconst menuItems: ToolsPanelMenuItems = { default: {}, optional: {} };\n\n\tpanelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {\n\t\tconst group = isShownByDefault ? 'default' : 'optional';\n\n\t\t// If a menu item for this label already exists, do not overwrite its value.\n\t\t// This can cause default controls that have been flagged as customized to\n\t\t// lose their value.\n\t\tconst existingItemValue = currentMenuItems?.[ group ]?.[ label ];\n\t\tconst value =\n\t\t\texistingItemValue !== undefined ? existingItemValue : hasValue();\n\n\t\tmenuItems[ group ][ label ] = shouldReset ? false : value;\n\t} );\n\n\treturn menuItems;\n};\n\nexport function useToolsPanel(\n\tprops: WordPressComponentProps< ToolsPanelProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tresetAll,\n\t\tpanelId,\n\t\thasInnerWrapper,\n\t\tshouldRenderPlaceholderItems,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToolsPanel' );\n\n\tconst isResetting = useRef( false );\n\tconst wasResetting = isResetting.current;\n\n\t// `isResetting` is cleared via this hook to effectively batch together\n\t// the resetAll task. Without this, the flag is cleared after the first\n\t// control updates and forces a rerender with subsequent controls then\n\t// believing they need to reset, unfortunately using stale data.\n\tuseEffect( () => {\n\t\tif ( wasResetting ) {\n\t\t\tisResetting.current = false;\n\t\t}\n\t}, [ wasResetting ] );\n\n\t// Allow panel items to register themselves.\n\tconst [ panelItems, setPanelItems ] = useState< ToolsPanelItem[] >( [] );\n\n\tconst registerPanelItem = ( item: ToolsPanelItem ) => {\n\t\tsetPanelItems( ( items ) => {\n\t\t\tconst newItems = [ ...items ];\n\t\t\t// If an item with this label is already registered, remove it first.\n\t\t\t// This can happen when an item is moved between the default and optional\n\t\t\t// groups.\n\t\t\tconst existingIndex = newItems.findIndex(\n\t\t\t\t( oldItem ) => oldItem.label === item.label\n\t\t\t);\n\t\t\tif ( existingIndex !== -1 ) {\n\t\t\t\tnewItems.splice( existingIndex, 1 );\n\t\t\t}\n\t\t\treturn [ ...newItems, item ];\n\t\t} );\n\t};\n\n\t// Panels need to deregister on unmount to avoid orphans in menu state.\n\t// This is an issue when panel items are being injected via SlotFills.\n\tconst deregisterPanelItem = ( label: string ) => {\n\t\t// When switching selections between components injecting matching\n\t\t// controls, e.g. both panels have a \"padding\" control, the\n\t\t// deregistration of the first panel doesn't occur until after the\n\t\t// registration of the next.\n\t\tsetPanelItems( ( items ) => {\n\t\t\tconst newItems = [ ...items ];\n\t\t\tconst index = newItems.findIndex(\n\t\t\t\t( item ) => item.label === label\n\t\t\t);\n\t\t\tif ( index !== -1 ) {\n\t\t\t\tnewItems.splice( index, 1 );\n\t\t\t}\n\t\t\treturn newItems;\n\t\t} );\n\t};\n\n\t// Manage and share display state of menu items representing child controls.\n\tconst [ menuItems, setMenuItems ] = useState< ToolsPanelMenuItems >( {\n\t\tdefault: {},\n\t\toptional: {},\n\t} );\n\n\t// Setup menuItems state as panel items register themselves.\n\tuseEffect( () => {\n\t\tsetMenuItems( ( prevState ) => {\n\t\t\tconst items = generateMenuItems( {\n\t\t\t\tpanelItems,\n\t\t\t\tshouldReset: false,\n\t\t\t\tcurrentMenuItems: prevState,\n\t\t\t} );\n\t\t\treturn items;\n\t\t} );\n\t}, [ panelItems ] );\n\n\t// Force a menu item to be checked.\n\t// This is intended for use with default panel items. They are displayed\n\t// separately to optional items and have different display states,\n\t// we need to update that when their value is customized.\n\tconst flagItemCustomization = (\n\t\tlabel: string,\n\t\tgroup: ToolsPanelMenuItemKey = 'default'\n\t) => {\n\t\tsetMenuItems( ( items ) => {\n\t\t\tconst newState = {\n\t\t\t\t...items,\n\t\t\t\t[ group ]: {\n\t\t\t\t\t...items[ group ],\n\t\t\t\t\t[ label ]: true,\n\t\t\t\t},\n\t\t\t};\n\t\t\treturn newState;\n\t\t} );\n\t};\n\n\t// Whether all optional menu items are hidden or not must be tracked\n\t// in order to later determine if the panel display is empty and handle\n\t// conditional display of a plus icon to indicate the presence of further\n\t// menu items.\n\tconst [\n\t\tareAllOptionalControlsHidden,\n\t\tsetAreAllOptionalControlsHidden,\n\t] = useState( false );\n\n\tuseEffect( () => {\n\t\tif ( menuItems.optional ) {\n\t\t\tconst optionalItems = Object.entries( menuItems.optional );\n\t\t\tconst allControlsHidden =\n\t\t\t\toptionalItems.length > 0 &&\n\t\t\t\t! optionalItems.some( ( [ , isSelected ] ) => isSelected );\n\t\t\tsetAreAllOptionalControlsHidden( allControlsHidden );\n\t\t}\n\t}, [ menuItems.optional ] );\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\tconst hasDefaultMenuItems =\n\t\t\tmenuItems?.default && !! Object.keys( menuItems?.default ).length;\n\t\tconst wrapperStyle =\n\t\t\thasInnerWrapper &&\n\t\t\tstyles.ToolsPanelWithInnerWrapper( DEFAULT_COLUMNS );\n\t\tconst emptyStyle =\n\t\t\t! hasDefaultMenuItems &&\n\t\t\tareAllOptionalControlsHidden &&\n\t\t\tstyles.ToolsPanelHiddenInnerWrapper;\n\n\t\treturn cx( styles.ToolsPanel, wrapperStyle, emptyStyle, className );\n\t}, [\n\t\tclassName,\n\t\thasInnerWrapper,\n\t\tmenuItems,\n\t\tareAllOptionalControlsHidden,\n\t] );\n\n\t// Toggle the checked state of a menu item which is then used to determine\n\t// display of the item within the panel.\n\tconst toggleItem = ( label: string ) => {\n\t\tconst currentItem = panelItems.find( ( item ) => item.label === label );\n\n\t\tif ( ! currentItem ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst menuGroup = currentItem.isShownByDefault ? 'default' : 'optional';\n\n\t\tconst newMenuItems = {\n\t\t\t...menuItems,\n\t\t\t[ menuGroup ]: {\n\t\t\t\t...menuItems[ menuGroup ],\n\t\t\t\t[ label ]: ! menuItems[ menuGroup ][ label ],\n\t\t\t},\n\t\t};\n\n\t\tsetMenuItems( newMenuItems );\n\t};\n\n\tconst getResetAllFilters = () => {\n\t\tconst filters: Array< () => void > = [];\n\n\t\tpanelItems.forEach( ( item ) => {\n\t\t\tif ( item.resetAllFilter ) {\n\t\t\t\tfilters.push( item.resetAllFilter );\n\t\t\t}\n\t\t} );\n\t\treturn filters;\n\t};\n\n\t// Resets display of children and executes resetAll callback if available.\n\tconst resetAllItems = () => {\n\t\tif ( typeof resetAll === 'function' ) {\n\t\t\tisResetting.current = true;\n\t\t\tresetAll( getResetAllFilters() );\n\t\t}\n\n\t\t// Turn off display of all non-default items.\n\t\tconst resetMenuItems = generateMenuItems( {\n\t\t\tpanelItems,\n\t\t\tshouldReset: true,\n\t\t} );\n\t\tsetMenuItems( resetMenuItems );\n\t};\n\n\tconst panelContext = {\n\t\tpanelId,\n\t\tmenuItems,\n\t\tregisterPanelItem,\n\t\tderegisterPanelItem,\n\t\tflagItemCustomization,\n\t\tareAllOptionalControlsHidden,\n\t\thasMenuItems: !! panelItems.length,\n\t\tisResetting: isResetting.current,\n\t\tshouldRenderPlaceholderItems,\n\t};\n\n\treturn {\n\t\t...otherProps,\n\t\tpanelContext,\n\t\tresetAllItems,\n\t\ttoggleItem,\n\t\tclassName: classes,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel/hook.ts"],"names":["DEFAULT_COLUMNS","generateMenuItems","panelItems","shouldReset","currentMenuItems","menuItems","default","optional","forEach","hasValue","isShownByDefault","label","group","existingItemValue","value","undefined","isMenuItemTypeEmpty","obj","Object","keys","length","useToolsPanel","props","className","resetAll","panelId","hasInnerWrapper","shouldRenderPlaceholderItems","__experimentalFirstVisibleItemClass","__experimentalLastVisibleItemClass","otherProps","isResetting","wasResetting","current","setPanelItems","registerPanelItem","item","items","newItems","existingIndex","findIndex","oldItem","splice","deregisterPanelItem","index","setMenuItems","prevState","flagItemCustomization","newState","areAllOptionalControlsHidden","setAreAllOptionalControlsHidden","allControlsHidden","entries","some","isSelected","cx","classes","wrapperStyle","styles","ToolsPanelWithInnerWrapper","emptyStyle","ToolsPanelHiddenInnerWrapper","ToolsPanel","toggleItem","currentItem","find","menuGroup","newMenuItems","resetAllItems","filters","resetAllFilter","push","resetMenuItems","getFirstVisibleItemLabel","optionalItems","firstItem","firstDisplayedItem","lastDisplayedItem","reverse","panelContext","hasMenuItems"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type {\n\tToolsPanelItem,\n\tToolsPanelMenuItemKey,\n\tToolsPanelMenuItems,\n\tToolsPanelMenuItemsConfig,\n\tToolsPanelProps,\n} from '../types';\n\nconst DEFAULT_COLUMNS = 2;\n\nconst generateMenuItems = ( {\n\tpanelItems,\n\tshouldReset,\n\tcurrentMenuItems,\n}: ToolsPanelMenuItemsConfig ) => {\n\tconst menuItems: ToolsPanelMenuItems = { default: {}, optional: {} };\n\n\tpanelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {\n\t\tconst group = isShownByDefault ? 'default' : 'optional';\n\n\t\t// If a menu item for this label already exists, do not overwrite its value.\n\t\t// This can cause default controls that have been flagged as customized to\n\t\t// lose their value.\n\t\tconst existingItemValue = currentMenuItems?.[ group ]?.[ label ];\n\t\tconst value =\n\t\t\texistingItemValue !== undefined ? existingItemValue : hasValue();\n\n\t\tmenuItems[ group ][ label ] = shouldReset ? false : value;\n\t} );\n\n\treturn menuItems;\n};\n\nconst isMenuItemTypeEmpty = (\n\tobj?: ToolsPanelMenuItems[ ToolsPanelMenuItemKey ]\n) => obj && Object.keys( obj ).length === 0;\n\nexport function useToolsPanel(\n\tprops: WordPressComponentProps< ToolsPanelProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tresetAll,\n\t\tpanelId,\n\t\thasInnerWrapper,\n\t\tshouldRenderPlaceholderItems,\n\t\t__experimentalFirstVisibleItemClass,\n\t\t__experimentalLastVisibleItemClass,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToolsPanel' );\n\n\tconst isResetting = useRef( false );\n\tconst wasResetting = isResetting.current;\n\n\t// `isResetting` is cleared via this hook to effectively batch together\n\t// the resetAll task. Without this, the flag is cleared after the first\n\t// control updates and forces a rerender with subsequent controls then\n\t// believing they need to reset, unfortunately using stale data.\n\tuseEffect( () => {\n\t\tif ( wasResetting ) {\n\t\t\tisResetting.current = false;\n\t\t}\n\t}, [ wasResetting ] );\n\n\t// Allow panel items to register themselves.\n\tconst [ panelItems, setPanelItems ] = useState< ToolsPanelItem[] >( [] );\n\n\tconst registerPanelItem = useCallback(\n\t\t( item: ToolsPanelItem ) => {\n\t\t\tsetPanelItems( ( items ) => {\n\t\t\t\tconst newItems = [ ...items ];\n\t\t\t\t// If an item with this label has already been registered, remove it\n\t\t\t\t// first. This can happen when an item is moved between the default\n\t\t\t\t// and optional groups.\n\t\t\t\tconst existingIndex = newItems.findIndex(\n\t\t\t\t\t( oldItem ) => oldItem.label === item.label\n\t\t\t\t);\n\t\t\t\tif ( existingIndex !== -1 ) {\n\t\t\t\t\tnewItems.splice( existingIndex, 1 );\n\t\t\t\t}\n\t\t\t\treturn [ ...newItems, item ];\n\t\t\t} );\n\t\t},\n\t\t[ setPanelItems ]\n\t);\n\n\t// Panels need to deregister on unmount to avoid orphans in menu state.\n\t// This is an issue when panel items are being injected via SlotFills.\n\tconst deregisterPanelItem = useCallback(\n\t\t( label: string ) => {\n\t\t\t// When switching selections between components injecting matching\n\t\t\t// controls, e.g. both panels have a \"padding\" control, the\n\t\t\t// deregistration of the first panel doesn't occur until after the\n\t\t\t// registration of the next.\n\t\t\tsetPanelItems( ( items ) => {\n\t\t\t\tconst newItems = [ ...items ];\n\t\t\t\tconst index = newItems.findIndex(\n\t\t\t\t\t( item ) => item.label === label\n\t\t\t\t);\n\t\t\t\tif ( index !== -1 ) {\n\t\t\t\t\tnewItems.splice( index, 1 );\n\t\t\t\t}\n\t\t\t\treturn newItems;\n\t\t\t} );\n\t\t},\n\t\t[ setPanelItems ]\n\t);\n\n\t// Manage and share display state of menu items representing child controls.\n\tconst [ menuItems, setMenuItems ] = useState< ToolsPanelMenuItems >( {\n\t\tdefault: {},\n\t\toptional: {},\n\t} );\n\n\t// Setup menuItems state as panel items register themselves.\n\tuseEffect( () => {\n\t\tsetMenuItems( ( prevState ) => {\n\t\t\tconst items = generateMenuItems( {\n\t\t\t\tpanelItems,\n\t\t\t\tshouldReset: false,\n\t\t\t\tcurrentMenuItems: prevState,\n\t\t\t} );\n\t\t\treturn items;\n\t\t} );\n\t}, [ generateMenuItems, panelItems, setMenuItems ] );\n\n\t// Force a menu item to be checked.\n\t// This is intended for use with default panel items. They are displayed\n\t// separately to optional items and have different display states,\n\t// we need to update that when their value is customized.\n\tconst flagItemCustomization = useCallback(\n\t\t( label: string, group: ToolsPanelMenuItemKey = 'default' ) => {\n\t\t\tsetMenuItems( ( items ) => {\n\t\t\t\tconst newState = {\n\t\t\t\t\t...items,\n\t\t\t\t\t[ group ]: {\n\t\t\t\t\t\t...items[ group ],\n\t\t\t\t\t\t[ label ]: true,\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t\treturn newState;\n\t\t\t} );\n\t\t},\n\t\t[ setMenuItems ]\n\t);\n\n\t// Whether all optional menu items are hidden or not must be tracked\n\t// in order to later determine if the panel display is empty and handle\n\t// conditional display of a plus icon to indicate the presence of further\n\t// menu items.\n\tconst [\n\t\tareAllOptionalControlsHidden,\n\t\tsetAreAllOptionalControlsHidden,\n\t] = useState( false );\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\tisMenuItemTypeEmpty( menuItems?.default ) &&\n\t\t\t! isMenuItemTypeEmpty( menuItems?.optional )\n\t\t) {\n\t\t\tconst allControlsHidden = ! Object.entries(\n\t\t\t\tmenuItems.optional\n\t\t\t).some( ( [ , isSelected ] ) => isSelected );\n\t\t\tsetAreAllOptionalControlsHidden( allControlsHidden );\n\t\t}\n\t}, [ menuItems, setAreAllOptionalControlsHidden ] );\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\tconst wrapperStyle =\n\t\t\thasInnerWrapper &&\n\t\t\tstyles.ToolsPanelWithInnerWrapper( DEFAULT_COLUMNS );\n\t\tconst emptyStyle =\n\t\t\tisMenuItemTypeEmpty( menuItems?.default ) &&\n\t\t\tareAllOptionalControlsHidden &&\n\t\t\tstyles.ToolsPanelHiddenInnerWrapper;\n\n\t\treturn cx( styles.ToolsPanel, wrapperStyle, emptyStyle, className );\n\t}, [\n\t\tareAllOptionalControlsHidden,\n\t\tclassName,\n\t\tcx,\n\t\thasInnerWrapper,\n\t\tmenuItems,\n\t] );\n\n\t// Toggle the checked state of a menu item which is then used to determine\n\t// display of the item within the panel.\n\tconst toggleItem = useCallback(\n\t\t( label: string ) => {\n\t\t\tconst currentItem = panelItems.find(\n\t\t\t\t( item ) => item.label === label\n\t\t\t);\n\n\t\t\tif ( ! currentItem ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst menuGroup = currentItem.isShownByDefault\n\t\t\t\t? 'default'\n\t\t\t\t: 'optional';\n\n\t\t\tconst newMenuItems = {\n\t\t\t\t...menuItems,\n\t\t\t\t[ menuGroup ]: {\n\t\t\t\t\t...menuItems[ menuGroup ],\n\t\t\t\t\t[ label ]: ! menuItems[ menuGroup ][ label ],\n\t\t\t\t},\n\t\t\t};\n\n\t\t\tsetMenuItems( newMenuItems );\n\t\t},\n\t\t[ menuItems, panelItems, setMenuItems ]\n\t);\n\n\t// Resets display of children and executes resetAll callback if available.\n\tconst resetAllItems = useCallback( () => {\n\t\tif ( typeof resetAll === 'function' ) {\n\t\t\tisResetting.current = true;\n\n\t\t\t// Collect available reset filters from panel items.\n\t\t\tconst filters: Array< () => void > = [];\n\t\t\tpanelItems.forEach( ( item ) => {\n\t\t\t\tif ( item.resetAllFilter ) {\n\t\t\t\t\tfilters.push( item.resetAllFilter );\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\tresetAll( filters );\n\t\t}\n\n\t\t// Turn off display of all non-default items.\n\t\tconst resetMenuItems = generateMenuItems( {\n\t\t\tpanelItems,\n\t\t\tshouldReset: true,\n\t\t} );\n\t\tsetMenuItems( resetMenuItems );\n\t}, [\n\t\tgenerateMenuItems,\n\t\tisResetting.current,\n\t\tpanelItems,\n\t\tresetAll,\n\t\tsetMenuItems,\n\t] );\n\n\t// Assist ItemGroup styling when there are potentially hidden placeholder\n\t// items by identifying first & last items that are toggled on for display.\n\tconst getFirstVisibleItemLabel = ( items: ToolsPanelItem[] ) => {\n\t\tconst optionalItems = menuItems.optional || {};\n\t\tconst firstItem = items.find(\n\t\t\t( item ) => item.isShownByDefault || !! optionalItems[ item.label ]\n\t\t);\n\n\t\treturn firstItem?.label;\n\t};\n\n\tconst firstDisplayedItem = getFirstVisibleItemLabel( panelItems );\n\tconst lastDisplayedItem = getFirstVisibleItemLabel(\n\t\t[ ...panelItems ].reverse()\n\t);\n\n\tconst panelContext = useMemo(\n\t\t() => ( {\n\t\t\tareAllOptionalControlsHidden,\n\t\t\tderegisterPanelItem,\n\t\t\tfirstDisplayedItem,\n\t\t\tflagItemCustomization,\n\t\t\thasMenuItems: !! panelItems.length,\n\t\t\tisResetting: isResetting.current,\n\t\t\tlastDisplayedItem,\n\t\t\tmenuItems,\n\t\t\tpanelId,\n\t\t\tregisterPanelItem,\n\t\t\tshouldRenderPlaceholderItems,\n\t\t\t__experimentalFirstVisibleItemClass,\n\t\t\t__experimentalLastVisibleItemClass,\n\t\t} ),\n\t\t[\n\t\t\tareAllOptionalControlsHidden,\n\t\t\tderegisterPanelItem,\n\t\t\tfirstDisplayedItem,\n\t\t\tflagItemCustomization,\n\t\t\tisResetting.current,\n\t\t\tlastDisplayedItem,\n\t\t\tmenuItems,\n\t\t\tpanelId,\n\t\t\tpanelItems,\n\t\t\tregisterPanelItem,\n\t\t\tshouldRenderPlaceholderItems,\n\t\t\t__experimentalFirstVisibleItemClass,\n\t\t\t__experimentalLastVisibleItemClass,\n\t\t]\n\t);\n\n\treturn {\n\t\t...otherProps,\n\t\tpanelContext,\n\t\tresetAllItems,\n\t\ttoggleItem,\n\t\tclassName: classes,\n\t};\n}\n"]}

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

@@ -32,7 +32,6 @@ var _context = require("../../ui/context");
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 
 /**
  * WordPress dependencies

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-header/component.tsx"],"names":["noop","DefaultControlsGroup","items","onClose","toggleItem","length","map","label","hasValue","icon","reset","check","itemLabel","undefined","OptionalControlsGroup","isSelected","ToolsPanelHeader","props","forwardedRef","areAllOptionalControlsHidden","dropdownMenuClassName","hasMenuItems","headingClassName","labelText","menuItems","resetAll","headerProps","defaultItems","Object","entries","default","optionalItems","optional","dropDownMenuIcon","plus","moreVertical","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"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-header/component.tsx"],"names":["noop","DefaultControlsGroup","items","onClose","toggleItem","length","map","label","hasValue","icon","reset","check","itemLabel","undefined","OptionalControlsGroup","isSelected","ToolsPanelHeader","props","forwardedRef","areAllOptionalControlsHidden","dropdownMenuClassName","hasMenuItems","headingClassName","labelText","menuItems","resetAll","headerProps","defaultItems","Object","entries","default","optionalItems","optional","dropDownMenuIcon","plus","moreVertical","dropDownMenuLabelText","className","isSmall","ConnectedToolsPanelHeader"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\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/tools-panel/tools-panel-header/hook.js

@@ -34,13 +34,13 @@ function useToolsPanelHeader(props) {
   const cx = (0, _useCx.useCx)();
   const classes = (0, _element.useMemo)(() => {
     return cx(styles.ToolsPanelHeader, className);
-  }, [className]);
+  }, [className, cx]);
   const dropdownMenuClassName = (0, _element.useMemo)(() => {
     return cx(styles.DropdownMenu);
-  }, []);
+  }, [cx]);
   const headingClassName = (0, _element.useMemo)(() => {
     return cx(styles.ToolsPanelHeading);
-  }, []);
+  }, [cx]);
   const {
     menuItems,
     hasMenuItems,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-header/hook.ts"],"names":["useToolsPanelHeader","props","className","otherProps","cx","classes","styles","ToolsPanelHeader","dropdownMenuClassName","DropdownMenu","headingClassName","ToolsPanelHeading","menuItems","hasMenuItems","areAllOptionalControlsHidden"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;;;;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAOO,SAASA,mBAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+B,gCACpCF,KADoC,EAEpC,kBAFoC,CAArC;AAKA,QAAMG,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,WAAOD,EAAE,CAAEE,MAAM,CAACC,gBAAT,EAA2BL,SAA3B,CAAT;AACA,GAFe,EAEb,CAAEA,SAAF,CAFa,CAAhB;AAIA,QAAMM,qBAAqB,GAAG,sBAAS,MAAM;AAC5C,WAAOJ,EAAE,CAAEE,MAAM,CAACG,YAAT,CAAT;AACA,GAF6B,EAE3B,EAF2B,CAA9B;AAIA,QAAMC,gBAAgB,GAAG,sBAAS,MAAM;AACvC,WAAON,EAAE,CAAEE,MAAM,CAACK,iBAAT,CAAT;AACA,GAFwB,EAEtB,EAFsB,CAAzB;AAIA,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,YAFK;AAGLC,IAAAA;AAHK,MAIF,oCAJJ;AAMA,SAAO,EACN,GAAGX,UADG;AAENW,IAAAA,4BAFM;AAGNN,IAAAA,qBAHM;AAINK,IAAAA,YAJM;AAKNH,IAAAA,gBALM;AAMNE,IAAAA,SANM;AAONV,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"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-header/hook.ts"],"names":["useToolsPanelHeader","props","className","otherProps","cx","classes","styles","ToolsPanelHeader","dropdownMenuClassName","DropdownMenu","headingClassName","ToolsPanelHeading","menuItems","hasMenuItems","areAllOptionalControlsHidden"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;;;;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAOO,SAASA,mBAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+B,gCACpCF,KADoC,EAEpC,kBAFoC,CAArC;AAKA,QAAMG,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,WAAOD,EAAE,CAAEE,MAAM,CAACC,gBAAT,EAA2BL,SAA3B,CAAT;AACA,GAFe,EAEb,CAAEA,SAAF,EAAaE,EAAb,CAFa,CAAhB;AAIA,QAAMI,qBAAqB,GAAG,sBAAS,MAAM;AAC5C,WAAOJ,EAAE,CAAEE,MAAM,CAACG,YAAT,CAAT;AACA,GAF6B,EAE3B,CAAEL,EAAF,CAF2B,CAA9B;AAIA,QAAMM,gBAAgB,GAAG,sBAAS,MAAM;AACvC,WAAON,EAAE,CAAEE,MAAM,CAACK,iBAAT,CAAT;AACA,GAFwB,EAEtB,CAAEP,EAAF,CAFsB,CAAzB;AAIA,QAAM;AACLQ,IAAAA,SADK;AAELC,IAAAA,YAFK;AAGLC,IAAAA;AAHK,MAIF,oCAJJ;AAMA,SAAO,EACN,GAAGX,UADG;AAENW,IAAAA,4BAFM;AAGNN,IAAAA,qBAHM;AAINK,IAAAA,YAJM;AAKNH,IAAAA,gBALM;AAMNE,IAAAA,SANM;AAONV,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, cx ] );\n\n\tconst dropdownMenuClassName = useMemo( () => {\n\t\treturn cx( styles.DropdownMenu );\n\t}, [ cx ] );\n\n\tconst headingClassName = useMemo( () => {\n\t\treturn cx( styles.ToolsPanelHeading );\n\t}, [ cx ] );\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/tools-panel/tools-panel-item/component.js

@@ -20,7 +20,6 @@ var _context = require("../../ui/context");
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 
 /**
  * Internal dependencies

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-item/component.tsx"],"names":["ToolsPanelItem","props","forwardedRef","children","isShown","shouldRenderPlaceholder","toolsPanelItemProps","ConnectedToolsPanelItem"],"mappings":";;;;;;;;;;;;;AASA;;AACA;;AACA;;AAXA;AACA;AACA;AACA;;AAGA;AACA;AACA;AAMA;AACA;AACA,MAAMA,cAAc,GAAG,CACtBC,KADsB,EAEtBC,YAFsB,KAGlB;AACJ,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,OAFK;AAGLC,IAAAA,uBAHK;AAIL,OAAGC;AAJE,MAKF,6BAAmBL,KAAnB,CALJ;;AAOA,MAAK,CAAEG,OAAP,EAAiB;AAChB,WAAOC,uBAAuB,GAC7B,4BAAC,UAAD,6BAAWC,mBAAX;AAAiC,MAAA,GAAG,EAAGJ;AAAvC,OAD6B,GAE1B,IAFJ;AAGA;;AAED,SACC,4BAAC,UAAD,6BAAWI,mBAAX;AAAiC,IAAA,GAAG,EAAGJ;AAAvC,MACGC,QADH,CADD;AAKA,CAtBD;;AAwBA,MAAMI,uBAAuB,GAAG,6BAC/BP,cAD+B,EAE/B,gBAF+B,CAAhC;eAKeO,uB","sourcesContent":["/**\n * External dependencies\n */\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"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-item/component.tsx"],"names":["ToolsPanelItem","props","forwardedRef","children","isShown","shouldRenderPlaceholder","toolsPanelItemProps","ConnectedToolsPanelItem"],"mappings":";;;;;;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMA;AACA;AACA,MAAMA,cAAc,GAAG,CACtBC,KADsB,EAEtBC,YAFsB,KAGlB;AACJ,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,OAFK;AAGLC,IAAAA,uBAHK;AAIL,OAAGC;AAJE,MAKF,6BAAmBL,KAAnB,CALJ;;AAOA,MAAK,CAAEG,OAAP,EAAiB;AAChB,WAAOC,uBAAuB,GAC7B,4BAAC,UAAD,6BAAWC,mBAAX;AAAiC,MAAA,GAAG,EAAGJ;AAAvC,OAD6B,GAE1B,IAFJ;AAGA;;AAED,SACC,4BAAC,UAAD,6BAAWI,mBAAX;AAAiC,IAAA,GAAG,EAAGJ;AAAvC,MACGC,QADH,CADD;AAKA,CAtBD;;AAwBA,MAAMI,uBAAuB,GAAG,6BAC/BP,cAD+B,EAE/B,gBAF+B,CAAhC;eAKeO,uB","sourcesContent":["/**\n * External dependencies\n */\nimport type { 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/tools-panel/tools-panel-item/hook.js

@@ -49,14 +49,20 @@ function useToolsPanelItem(props) {
     deregisterPanelItem,
     flagItemCustomization,
     isResetting,
-    shouldRenderPlaceholderItems: shouldRenderPlaceholder
+    shouldRenderPlaceholderItems: shouldRenderPlaceholder,
+    firstDisplayedItem,
+    lastDisplayedItem,
+    __experimentalFirstVisibleItemClass,
+    __experimentalLastVisibleItemClass
   } = (0, _context.useToolsPanelContext)();
   const hasValueCallback = (0, _element.useCallback)(hasValue, [panelId]);
-  const resetAllFilterCallback = (0, _element.useCallback)(resetAllFilter, [panelId]); // Registering the panel item allows the panel to include it in its
+  const resetAllFilterCallback = (0, _element.useCallback)(resetAllFilter, [panelId]);
+  const previousPanelId = (0, _compose.usePrevious)(currentPanelId);
+  const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null; // Registering the panel item allows the panel to include it in its
   // automatically generated menu and determine its initial checked status.
 
   (0, _element.useEffect)(() => {
-    if (currentPanelId === panelId) {
+    if (hasMatchingPanel && previousPanelId !== null) {
       registerPanelItem({
         hasValue: hasValueCallback,
         isShownByDefault,
@@ -67,11 +73,11 @@ function useToolsPanelItem(props) {
     }
 
     return () => {
-      if (currentPanelId === panelId) {
+      if (previousPanelId === null && !!currentPanelId || currentPanelId === panelId) {
         deregisterPanelItem(label);
       }
     };
-  }, [currentPanelId, panelId, isShownByDefault, label, hasValueCallback, resetAllFilterCallback]);
+  }, [currentPanelId, hasMatchingPanel, isShownByDefault, label, hasValueCallback, panelId, previousPanelId, resetAllFilterCallback]);
   const isValueSet = hasValue();
   const wasValueSet = (0, _compose.usePrevious)(isValueSet); // If this item represents a default control it will need to notify the
   // panel when a custom value has been set.
@@ -89,7 +95,7 @@ function useToolsPanelItem(props) {
   // trigger appropriate callback if it is.
 
   (0, _element.useEffect)(() => {
-    if (isResetting || currentPanelId !== panelId) {
+    if (isResetting || !hasMatchingPanel) {
       return;
     }
 
@@ -100,7 +106,7 @@ function useToolsPanelItem(props) {
     if (!isMenuItemChecked && wasMenuItemChecked) {
       onDeselect === null || onDeselect === void 0 ? void 0 : onDeselect();
     }
-  }, [currentPanelId, isMenuItemChecked, isResetting, isValueSet, panelId, wasMenuItemChecked]); // The item is shown if it is a default control regardless of whether it
+  }, [hasMatchingPanel, isMenuItemChecked, isResetting, isValueSet, 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.
 
@@ -108,8 +114,10 @@ function useToolsPanelItem(props) {
   const cx = (0, _useCx.useCx)();
   const classes = (0, _element.useMemo)(() => {
     const placeholderStyle = shouldRenderPlaceholder && !isShown && styles.ToolsPanelItemPlaceholder;
-    return cx(styles.ToolsPanelItem, placeholderStyle, className);
-  }, [isShown, shouldRenderPlaceholder, className]);
+    const firstItemStyle = firstDisplayedItem === label && __experimentalFirstVisibleItemClass;
+    const lastItemStyle = lastDisplayedItem === label && __experimentalLastVisibleItemClass;
+    return cx(styles.ToolsPanelItem, placeholderStyle, className, firstItemStyle, lastItemStyle);
+  }, [isShown, shouldRenderPlaceholder, className, cx, firstDisplayedItem, lastDisplayedItem, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass]);
   return { ...otherProps,
     isShown,
     shouldRenderPlaceholder,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-item/hook.ts"],"names":["useToolsPanelItem","props","className","hasValue","isShownByDefault","label","panelId","resetAllFilter","onDeselect","onSelect","otherProps","currentPanelId","menuItems","registerPanelItem","deregisterPanelItem","flagItemCustomization","isResetting","shouldRenderPlaceholderItems","shouldRenderPlaceholder","hasValueCallback","resetAllFilterCallback","isValueSet","wasValueSet","menuGroup","isMenuItemChecked","wasMenuItemChecked","isShown","undefined","cx","classes","placeholderStyle","styles","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 () => {\n\t\t\tif ( currentPanelId === panelId ) {\n\t\t\t\tderegisterPanelItem( label );\n\t\t\t}\n\t\t};\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"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-item/hook.ts"],"names":["useToolsPanelItem","props","className","hasValue","isShownByDefault","label","panelId","resetAllFilter","onDeselect","onSelect","otherProps","currentPanelId","menuItems","registerPanelItem","deregisterPanelItem","flagItemCustomization","isResetting","shouldRenderPlaceholderItems","shouldRenderPlaceholder","firstDisplayedItem","lastDisplayedItem","__experimentalFirstVisibleItemClass","__experimentalLastVisibleItemClass","hasValueCallback","resetAllFilterCallback","previousPanelId","hasMatchingPanel","isValueSet","wasValueSet","menuGroup","isMenuItemChecked","wasMenuItemChecked","isShown","undefined","cx","classes","placeholderStyle","styles","ToolsPanelItemPlaceholder","firstItemStyle","lastItemStyle","ToolsPanelItem"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useCallback, useEffect, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { ToolsPanelItemProps } from '../types';\n\nexport function useToolsPanelItem(\n\tprops: WordPressComponentProps< ToolsPanelItemProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\thasValue,\n\t\tisShownByDefault,\n\t\tlabel,\n\t\tpanelId,\n\t\tresetAllFilter,\n\t\tonDeselect,\n\t\tonSelect,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToolsPanelItem' );\n\n\tconst {\n\t\tpanelId: currentPanelId,\n\t\tmenuItems,\n\t\tregisterPanelItem,\n\t\tderegisterPanelItem,\n\t\tflagItemCustomization,\n\t\tisResetting,\n\t\tshouldRenderPlaceholderItems: shouldRenderPlaceholder,\n\t\tfirstDisplayedItem,\n\t\tlastDisplayedItem,\n\t\t__experimentalFirstVisibleItemClass,\n\t\t__experimentalLastVisibleItemClass,\n\t} = useToolsPanelContext();\n\n\tconst hasValueCallback = useCallback( hasValue, [ panelId ] );\n\tconst resetAllFilterCallback = useCallback( resetAllFilter, [ panelId ] );\n\tconst previousPanelId = usePrevious( currentPanelId );\n\n\tconst hasMatchingPanel =\n\t\tcurrentPanelId === panelId || currentPanelId === null;\n\n\t// Registering the panel item allows the panel to include it in its\n\t// automatically generated menu and determine its initial checked status.\n\tuseEffect( () => {\n\t\tif ( hasMatchingPanel && previousPanelId !== null ) {\n\t\t\tregisterPanelItem( {\n\t\t\t\thasValue: hasValueCallback,\n\t\t\t\tisShownByDefault,\n\t\t\t\tlabel,\n\t\t\t\tresetAllFilter: resetAllFilterCallback,\n\t\t\t\tpanelId,\n\t\t\t} );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (\n\t\t\t\t( previousPanelId === null && !! currentPanelId ) ||\n\t\t\t\tcurrentPanelId === panelId\n\t\t\t) {\n\t\t\t\tderegisterPanelItem( label );\n\t\t\t}\n\t\t};\n\t}, [\n\t\tcurrentPanelId,\n\t\thasMatchingPanel,\n\t\tisShownByDefault,\n\t\tlabel,\n\t\thasValueCallback,\n\t\tpanelId,\n\t\tpreviousPanelId,\n\t\tresetAllFilterCallback,\n\t] );\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 || ! hasMatchingPanel ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isMenuItemChecked && ! isValueSet && ! wasMenuItemChecked ) {\n\t\t\tonSelect?.();\n\t\t}\n\n\t\tif ( ! isMenuItemChecked && wasMenuItemChecked ) {\n\t\t\tonDeselect?.();\n\t\t}\n\t}, [\n\t\thasMatchingPanel,\n\t\tisMenuItemChecked,\n\t\tisResetting,\n\t\tisValueSet,\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\tconst firstItemStyle =\n\t\t\tfirstDisplayedItem === label && __experimentalFirstVisibleItemClass;\n\t\tconst lastItemStyle =\n\t\t\tlastDisplayedItem === label && __experimentalLastVisibleItemClass;\n\t\treturn cx(\n\t\t\tstyles.ToolsPanelItem,\n\t\t\tplaceholderStyle,\n\t\t\tclassName,\n\t\t\tfirstItemStyle,\n\t\t\tlastItemStyle\n\t\t);\n\t}, [\n\t\tisShown,\n\t\tshouldRenderPlaceholder,\n\t\tclassName,\n\t\tcx,\n\t\tfirstDisplayedItem,\n\t\tlastDisplayedItem,\n\t\t__experimentalFirstVisibleItemClass,\n\t\t__experimentalLastVisibleItemClass,\n\t] );\n\n\treturn {\n\t\t...otherProps,\n\t\tisShown,\n\t\tshouldRenderPlaceholder,\n\t\tclassName: classes,\n\t};\n}\n"]}

package/build/tree-grid/index.js

@@ -126,6 +126,9 @@ function TreeGrid(_ref, ref) {
     const activeRow = activeElement.closest('[role="row"]');
     const focusablesInRow = getRowFocusables(activeRow);
     const currentColumnIndex = focusablesInRow.indexOf(activeElement);
+    const canExpandCollapse = 0 === currentColumnIndex;
+
+    const cannotFocusNextColumn = canExpandCollapse && activeRow.getAttribute('aria-expanded') === 'false' && keyCode === _keycodes.RIGHT;
 
     if ((0, _lodash.includes)([_keycodes.LEFT, _keycodes.RIGHT], keyCode)) {
       // Calculate to the next element.
@@ -135,39 +138,41 @@ function TreeGrid(_ref, ref) {
         nextIndex = Math.max(0, currentColumnIndex - 1);
       } else {
         nextIndex = Math.min(currentColumnIndex + 1, focusablesInRow.length - 1);
-      } // Focus is either at the left or right edge of the grid.
+      } // Focus is at the left most column.
 
 
-      if (nextIndex === currentColumnIndex) {
+      if (canExpandCollapse) {
         if (keyCode === _keycodes.LEFT) {
-          var _activeRow$ariaLevel, _getRowFocusables, _getRowFocusables$;
+          var _activeRow$getAttribu, _getRowFocusables, _getRowFocusables$;
 
           // Left:
           // If a row is focused, and it is expanded, collapses the current row.
-          if ((activeRow === null || activeRow === void 0 ? void 0 : activeRow.ariaExpanded) === 'true') {
+          if (activeRow.getAttribute('aria-expanded') === 'true') {
             onCollapseRow(activeRow);
             event.preventDefault();
             return;
           } // If a row is focused, and it is collapsed, moves to the parent row (if there is one).
 
 
-          const level = Math.max(parseInt((_activeRow$ariaLevel = activeRow === null || activeRow === void 0 ? void 0 : activeRow.ariaLevel) !== null && _activeRow$ariaLevel !== void 0 ? _activeRow$ariaLevel : 1, 10) - 1, 1);
+          const level = Math.max(parseInt((_activeRow$getAttribu = activeRow === null || activeRow === void 0 ? void 0 : activeRow.getAttribute('aria-level')) !== null && _activeRow$getAttribu !== void 0 ? _activeRow$getAttribu : 1, 10) - 1, 1);
           const rows = Array.from(treeGridElement.querySelectorAll('[role="row"]'));
           let parentRow = activeRow;
           const currentRowIndex = rows.indexOf(activeRow);
 
           for (let i = currentRowIndex; i >= 0; i--) {
-            if (parseInt(rows[i].ariaLevel, 10) === level) {
+            if (parseInt(rows[i].getAttribute('aria-level'), 10) === level) {
               parentRow = rows[i];
               break;
             }
           }
 
           (_getRowFocusables = getRowFocusables(parentRow)) === null || _getRowFocusables === void 0 ? void 0 : (_getRowFocusables$ = _getRowFocusables[0]) === null || _getRowFocusables$ === void 0 ? void 0 : _getRowFocusables$.focus();
-        } else {
+        }
+
+        if (keyCode === _keycodes.RIGHT) {
           // Right:
           // If a row is focused, and it is collapsed, expands the current row.
-          if ((activeRow === null || activeRow === void 0 ? void 0 : activeRow.ariaExpanded) === 'false') {
+          if (activeRow.getAttribute('aria-expanded') === 'false') {
             onExpandRow(activeRow);
             event.preventDefault();
             return;
@@ -188,9 +193,13 @@ function TreeGrid(_ref, ref) {
 
         event.preventDefault();
         return;
-      } // Focus the next element.
+      } // Focus the next element. If at most left column and row is collapsed, moving right is not allowed as this will expand. However, if row is collapsed, moving left is allowed.
 
 
+      if (cannotFocusNextColumn) {
+        return;
+      }
+
       focusablesInRow[nextIndex].focus(); // Prevent key use for anything else. This ensures Voiceover
       // doesn't try to handle key navigation.
 
@@ -234,7 +243,7 @@ function TreeGrid(_ref, ref) {
 
       event.preventDefault();
     }
-  }, []);
+  }, [onExpandRow, onCollapseRow]);
   /* Disable reason: A treegrid is implemented using a table element. */
 
   /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */