@wordpress/components 37.0.0 → 38.0.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/tools-panel/tools-panel/hook.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useMemo, useReducer, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nconst DEFAULT_COLUMNS = 2;\nfunction emptyMenuItems() {\n  return {\n    default: {},\n    optional: {}\n  };\n}\nfunction emptyState() {\n  return {\n    panelItems: [],\n    menuItemOrder: [],\n    menuItems: emptyMenuItems()\n  };\n}\nconst generateMenuItems = ({\n  panelItems,\n  shouldReset,\n  currentMenuItems,\n  menuItemOrder\n}) => {\n  const newMenuItems = emptyMenuItems();\n  const menuItems = emptyMenuItems();\n  panelItems.forEach(({\n    hasValue,\n    isShownByDefault,\n    label\n  }) => {\n    const group = isShownByDefault ? 'default' : 'optional';\n\n    // If a menu item for this label has already been flagged as customized\n    // (for default controls), or toggled on (for optional controls), do not\n    // overwrite its value as those controls would lose that state.\n    const existingItemValue = currentMenuItems?.[group]?.[label];\n    const value = existingItemValue ? existingItemValue : hasValue();\n    newMenuItems[group][label] = shouldReset ? false : value;\n  });\n\n  // Loop the known, previously registered items first to maintain menu order.\n  menuItemOrder.forEach(key => {\n    if (newMenuItems.default.hasOwnProperty(key)) {\n      menuItems.default[key] = newMenuItems.default[key];\n    }\n    if (newMenuItems.optional.hasOwnProperty(key)) {\n      menuItems.optional[key] = newMenuItems.optional[key];\n    }\n  });\n\n  // Loop newMenuItems object adding any that aren't in the known items order.\n  Object.keys(newMenuItems.default).forEach(key => {\n    if (!menuItems.default.hasOwnProperty(key)) {\n      menuItems.default[key] = newMenuItems.default[key];\n    }\n  });\n  Object.keys(newMenuItems.optional).forEach(key => {\n    if (!menuItems.optional.hasOwnProperty(key)) {\n      menuItems.optional[key] = newMenuItems.optional[key];\n    }\n  });\n  return menuItems;\n};\nfunction panelItemsReducer(panelItems, action) {\n  switch (action.type) {\n    case 'REGISTER_PANEL':\n      {\n        const newItems = [...panelItems];\n        // If an item with this label has already been registered, remove it\n        // first. This can happen when an item is moved between the default\n        // and optional groups.\n        const existingIndex = newItems.findIndex(oldItem => oldItem.label === action.item.label);\n        if (existingIndex !== -1) {\n          newItems.splice(existingIndex, 1);\n        }\n        newItems.push(action.item);\n        return newItems;\n      }\n    case 'UNREGISTER_PANEL':\n      {\n        const index = panelItems.findIndex(item => item.label === action.label);\n        if (index !== -1) {\n          const newItems = [...panelItems];\n          newItems.splice(index, 1);\n          return newItems;\n        }\n        return panelItems;\n      }\n    default:\n      return panelItems;\n  }\n}\nfunction menuItemOrderReducer(menuItemOrder, action) {\n  switch (action.type) {\n    case 'REGISTER_PANEL':\n      {\n        // Track the initial order of item registration. This is used for\n        // maintaining menu item order later.\n        if (menuItemOrder.includes(action.item.label)) {\n          return menuItemOrder;\n        }\n        return [...menuItemOrder, action.item.label];\n      }\n    default:\n      return menuItemOrder;\n  }\n}\nfunction menuItemsReducer(state, action) {\n  switch (action.type) {\n    case 'REGISTER_PANEL':\n    case 'UNREGISTER_PANEL':\n      // generate new menu items from original `menuItems` and updated `panelItems` and `menuItemOrder`\n      return generateMenuItems({\n        currentMenuItems: state.menuItems,\n        panelItems: state.panelItems,\n        menuItemOrder: state.menuItemOrder,\n        shouldReset: false\n      });\n    case 'RESET_ALL':\n      return generateMenuItems({\n        panelItems: state.panelItems,\n        menuItemOrder: state.menuItemOrder,\n        shouldReset: true\n      });\n    case 'UPDATE_VALUE':\n      {\n        const oldValue = state.menuItems[action.group][action.label];\n        if (action.value === oldValue) {\n          return state.menuItems;\n        }\n        return {\n          ...state.menuItems,\n          [action.group]: {\n            ...state.menuItems[action.group],\n            [action.label]: action.value\n          }\n        };\n      }\n    case 'TOGGLE_VALUE':\n      {\n        const currentItem = state.panelItems.find(item => item.label === action.label);\n        if (!currentItem) {\n          return state.menuItems;\n        }\n        const menuGroup = currentItem.isShownByDefault ? 'default' : 'optional';\n        const newMenuItems = {\n          ...state.menuItems,\n          [menuGroup]: {\n            ...state.menuItems[menuGroup],\n            [action.label]: !state.menuItems[menuGroup][action.label]\n          }\n        };\n        return newMenuItems;\n      }\n    default:\n      return state.menuItems;\n  }\n}\nfunction panelReducer(state, action) {\n  const panelItems = panelItemsReducer(state.panelItems, action);\n  const menuItemOrder = menuItemOrderReducer(state.menuItemOrder, action);\n  // `menuItemsReducer` is a bit unusual because it generates new state from original `menuItems`\n  // and the updated `panelItems` and `menuItemOrder`.\n  const menuItems = menuItemsReducer({\n    panelItems,\n    menuItemOrder,\n    menuItems: state.menuItems\n  }, action);\n  return {\n    panelItems,\n    menuItemOrder,\n    menuItems\n  };\n}\nfunction resetAllFiltersReducer(filters, action) {\n  switch (action.type) {\n    case 'REGISTER':\n      return [...filters, action.filter];\n    case 'UNREGISTER':\n      return filters.filter(f => f !== action.filter);\n    default:\n      return filters;\n  }\n}\nconst isMenuItemTypeEmpty = obj => Object.keys(obj).length === 0;\nexport function useToolsPanel(props) {\n  const {\n    className,\n    headingLevel = 2,\n    resetAll,\n    panelId,\n    hasInnerWrapper = false,\n    shouldRenderPlaceholderItems = false,\n    __experimentalFirstVisibleItemClass,\n    __experimentalLastVisibleItemClass,\n    ...otherProps\n  } = useContextSystem(props, 'ToolsPanel');\n  const isResettingRef = useRef(false);\n  const wasResetting = isResettingRef.current;\n\n  // `isResettingRef` is cleared via this hook to effectively batch together\n  // the resetAll task. Without this, the flag is cleared after the first\n  // control updates and forces a rerender with subsequent controls then\n  // believing they need to reset, unfortunately using stale data.\n  useEffect(() => {\n    if (wasResetting) {\n      isResettingRef.current = false;\n    }\n  }, [wasResetting]);\n\n  // Allow panel items to register themselves.\n  const [{\n    panelItems,\n    menuItems\n  }, panelDispatch] = useReducer(panelReducer, undefined, emptyState);\n  const [resetAllFilters, dispatchResetAllFilters] = useReducer(resetAllFiltersReducer, []);\n  const registerPanelItem = useCallback(item => {\n    // Add item to panel items.\n    panelDispatch({\n      type: 'REGISTER_PANEL',\n      item\n    });\n  }, []);\n\n  // Panels need to deregister on unmount to avoid orphans in menu state.\n  // This is an issue when panel items are being injected via SlotFills.\n  const deregisterPanelItem = useCallback(label => {\n    // When switching selections between components injecting matching\n    // controls, e.g. both panels have a \"padding\" control, the\n    // deregistration of the first panel doesn't occur until after the\n    // registration of the next.\n    panelDispatch({\n      type: 'UNREGISTER_PANEL',\n      label\n    });\n  }, []);\n  const registerResetAllFilter = useCallback(filter => {\n    dispatchResetAllFilters({\n      type: 'REGISTER',\n      filter\n    });\n  }, []);\n  const deregisterResetAllFilter = useCallback(filter => {\n    dispatchResetAllFilters({\n      type: 'UNREGISTER',\n      filter\n    });\n  }, []);\n\n  // Updates the status of the panel’s menu items. For default items the\n  // value represents whether it differs from the default and for optional\n  // items whether the item is shown.\n  const flagItemCustomization = useCallback((value, label, group = 'default') => {\n    panelDispatch({\n      type: 'UPDATE_VALUE',\n      group,\n      label,\n      value\n    });\n  }, []);\n\n  // Whether all optional menu items are hidden or not must be tracked\n  // in order to later determine if the panel display is empty and handle\n  // conditional display of a plus icon to indicate the presence of further\n  // menu items.\n  const areAllOptionalControlsHidden = useMemo(() => {\n    return isMenuItemTypeEmpty(menuItems.default) && !isMenuItemTypeEmpty(menuItems.optional) && Object.values(menuItems.optional).every(isSelected => !isSelected);\n  }, [menuItems]);\n  const cx = useCx();\n  const classes = useMemo(() => {\n    return cx(styles.getToolsPanelStyles({\n      columns: DEFAULT_COLUMNS,\n      hasInnerWrapper,\n      areAllOptionalControlsHidden\n    }), className);\n  }, [areAllOptionalControlsHidden, className, cx, hasInnerWrapper]);\n\n  // Toggle the checked state of a menu item which is then used to determine\n  // display of the item within the panel.\n  const toggleItem = useCallback(label => {\n    panelDispatch({\n      type: 'TOGGLE_VALUE',\n      label\n    });\n  }, []);\n\n  // Resets display of children and executes resetAll callback if available.\n  const resetAllItems = useCallback(() => {\n    if (typeof resetAll === 'function') {\n      isResettingRef.current = true;\n      resetAll(resetAllFilters);\n    }\n\n    // Turn off display of all non-default items.\n    panelDispatch({\n      type: 'RESET_ALL'\n    });\n  }, [resetAllFilters, resetAll]);\n\n  // Assist ItemGroup styling when there are potentially hidden placeholder\n  // items by identifying first & last items that are toggled on for display.\n  const getFirstVisibleItemLabel = items => {\n    const optionalItems = menuItems.optional || {};\n    const firstItem = items.find(item => item.isShownByDefault || optionalItems[item.label]);\n    return firstItem?.label;\n  };\n  const firstDisplayedItem = getFirstVisibleItemLabel(panelItems);\n  const lastDisplayedItem = getFirstVisibleItemLabel([...panelItems].reverse());\n  const hasMenuItems = panelItems.length > 0;\n  const panelContext = useMemo(() => ({\n    areAllOptionalControlsHidden,\n    deregisterPanelItem,\n    deregisterResetAllFilter,\n    firstDisplayedItem,\n    flagItemCustomization,\n    hasMenuItems,\n    isResetting: isResettingRef.current,\n    lastDisplayedItem,\n    menuItems,\n    panelId,\n    registerPanelItem,\n    registerResetAllFilter,\n    shouldRenderPlaceholderItems,\n    __experimentalFirstVisibleItemClass,\n    __experimentalLastVisibleItemClass\n  }), [areAllOptionalControlsHidden, deregisterPanelItem, deregisterResetAllFilter, firstDisplayedItem, flagItemCustomization, lastDisplayedItem, menuItems, panelId, hasMenuItems, registerResetAllFilter, registerPanelItem, shouldRenderPlaceholderItems, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass]);\n  return {\n    ...otherProps,\n    headingLevel,\n    panelContext,\n    resetAllItems,\n    toggleItem,\n    className: classes\n  };\n}"],
-  "mappings": "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",
+  "sources": ["../../../src/tools-panel/tools-panel/hook.ts", "../../../../style-runtime/src/index.ts", "../../../src/tools-panel/style.module.scss"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useMemo, useReducer, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from '../style.module.scss';\nimport { useContextSystem } from '../../context';\nfunction emptyMenuItems() {\n  return {\n    default: {},\n    optional: {}\n  };\n}\nfunction emptyState() {\n  return {\n    panelItems: [],\n    menuItemOrder: [],\n    menuItems: emptyMenuItems()\n  };\n}\nconst generateMenuItems = ({\n  panelItems,\n  shouldReset,\n  currentMenuItems,\n  menuItemOrder\n}) => {\n  const newMenuItems = emptyMenuItems();\n  const menuItems = emptyMenuItems();\n  panelItems.forEach(({\n    hasValue,\n    isShownByDefault,\n    label\n  }) => {\n    const group = isShownByDefault ? 'default' : 'optional';\n\n    // If a menu item for this label has already been flagged as customized\n    // (for default controls), or toggled on (for optional controls), do not\n    // overwrite its value as those controls would lose that state.\n    const existingItemValue = currentMenuItems?.[group]?.[label];\n    const value = existingItemValue ? existingItemValue : hasValue();\n    newMenuItems[group][label] = shouldReset ? false : value;\n  });\n\n  // Loop the known, previously registered items first to maintain menu order.\n  menuItemOrder.forEach(key => {\n    if (newMenuItems.default.hasOwnProperty(key)) {\n      menuItems.default[key] = newMenuItems.default[key];\n    }\n    if (newMenuItems.optional.hasOwnProperty(key)) {\n      menuItems.optional[key] = newMenuItems.optional[key];\n    }\n  });\n\n  // Loop newMenuItems object adding any that aren't in the known items order.\n  Object.keys(newMenuItems.default).forEach(key => {\n    if (!menuItems.default.hasOwnProperty(key)) {\n      menuItems.default[key] = newMenuItems.default[key];\n    }\n  });\n  Object.keys(newMenuItems.optional).forEach(key => {\n    if (!menuItems.optional.hasOwnProperty(key)) {\n      menuItems.optional[key] = newMenuItems.optional[key];\n    }\n  });\n  return menuItems;\n};\nfunction panelItemsReducer(panelItems, action) {\n  switch (action.type) {\n    case 'REGISTER_PANEL':\n      {\n        const newItems = [...panelItems];\n        // If an item with this label has already been registered, remove it\n        // first. This can happen when an item is moved between the default\n        // and optional groups.\n        const existingIndex = newItems.findIndex(oldItem => oldItem.label === action.item.label);\n        if (existingIndex !== -1) {\n          newItems.splice(existingIndex, 1);\n        }\n        newItems.push(action.item);\n        return newItems;\n      }\n    case 'UNREGISTER_PANEL':\n      {\n        const index = panelItems.findIndex(item => item.label === action.label);\n        if (index !== -1) {\n          const newItems = [...panelItems];\n          newItems.splice(index, 1);\n          return newItems;\n        }\n        return panelItems;\n      }\n    default:\n      return panelItems;\n  }\n}\nfunction menuItemOrderReducer(menuItemOrder, action) {\n  switch (action.type) {\n    case 'REGISTER_PANEL':\n      {\n        // Track the initial order of item registration. This is used for\n        // maintaining menu item order later.\n        if (menuItemOrder.includes(action.item.label)) {\n          return menuItemOrder;\n        }\n        return [...menuItemOrder, action.item.label];\n      }\n    default:\n      return menuItemOrder;\n  }\n}\nfunction menuItemsReducer(state, action) {\n  switch (action.type) {\n    case 'REGISTER_PANEL':\n    case 'UNREGISTER_PANEL':\n      // generate new menu items from original `menuItems` and updated `panelItems` and `menuItemOrder`\n      return generateMenuItems({\n        currentMenuItems: state.menuItems,\n        panelItems: state.panelItems,\n        menuItemOrder: state.menuItemOrder,\n        shouldReset: false\n      });\n    case 'RESET_ALL':\n      return generateMenuItems({\n        panelItems: state.panelItems,\n        menuItemOrder: state.menuItemOrder,\n        shouldReset: true\n      });\n    case 'UPDATE_VALUE':\n      {\n        const oldValue = state.menuItems[action.group][action.label];\n        if (action.value === oldValue) {\n          return state.menuItems;\n        }\n        return {\n          ...state.menuItems,\n          [action.group]: {\n            ...state.menuItems[action.group],\n            [action.label]: action.value\n          }\n        };\n      }\n    case 'TOGGLE_VALUE':\n      {\n        const currentItem = state.panelItems.find(item => item.label === action.label);\n        if (!currentItem) {\n          return state.menuItems;\n        }\n        const menuGroup = currentItem.isShownByDefault ? 'default' : 'optional';\n        const newMenuItems = {\n          ...state.menuItems,\n          [menuGroup]: {\n            ...state.menuItems[menuGroup],\n            [action.label]: !state.menuItems[menuGroup][action.label]\n          }\n        };\n        return newMenuItems;\n      }\n    default:\n      return state.menuItems;\n  }\n}\nfunction panelReducer(state, action) {\n  const panelItems = panelItemsReducer(state.panelItems, action);\n  const menuItemOrder = menuItemOrderReducer(state.menuItemOrder, action);\n  // `menuItemsReducer` is a bit unusual because it generates new state from original `menuItems`\n  // and the updated `panelItems` and `menuItemOrder`.\n  const menuItems = menuItemsReducer({\n    panelItems,\n    menuItemOrder,\n    menuItems: state.menuItems\n  }, action);\n  return {\n    panelItems,\n    menuItemOrder,\n    menuItems\n  };\n}\nfunction resetAllFiltersReducer(filters, action) {\n  switch (action.type) {\n    case 'REGISTER':\n      return [...filters, action.filter];\n    case 'UNREGISTER':\n      return filters.filter(f => f !== action.filter);\n    default:\n      return filters;\n  }\n}\nconst isMenuItemTypeEmpty = obj => Object.keys(obj).length === 0;\nexport function useToolsPanel(props) {\n  const {\n    className,\n    headingLevel = 2,\n    resetAll,\n    panelId,\n    hasInnerWrapper = false,\n    shouldRenderPlaceholderItems = false,\n    __experimentalFirstVisibleItemClass,\n    __experimentalLastVisibleItemClass,\n    ...otherProps\n  } = useContextSystem(props, 'ToolsPanel');\n  const isResettingRef = useRef(false);\n  const wasResetting = isResettingRef.current;\n\n  // `isResettingRef` is cleared via this hook to effectively batch together\n  // the resetAll task. Without this, the flag is cleared after the first\n  // control updates and forces a rerender with subsequent controls then\n  // believing they need to reset, unfortunately using stale data.\n  useEffect(() => {\n    if (wasResetting) {\n      isResettingRef.current = false;\n    }\n  }, [wasResetting]);\n\n  // Allow panel items to register themselves.\n  const [{\n    panelItems,\n    menuItems\n  }, panelDispatch] = useReducer(panelReducer, undefined, emptyState);\n  const [resetAllFilters, dispatchResetAllFilters] = useReducer(resetAllFiltersReducer, []);\n  const registerPanelItem = useCallback(item => {\n    // Add item to panel items.\n    panelDispatch({\n      type: 'REGISTER_PANEL',\n      item\n    });\n  }, []);\n\n  // Panels need to deregister on unmount to avoid orphans in menu state.\n  // This is an issue when panel items are being injected via SlotFills.\n  const deregisterPanelItem = useCallback(label => {\n    // When switching selections between components injecting matching\n    // controls, e.g. both panels have a \"padding\" control, the\n    // deregistration of the first panel doesn't occur until after the\n    // registration of the next.\n    panelDispatch({\n      type: 'UNREGISTER_PANEL',\n      label\n    });\n  }, []);\n  const registerResetAllFilter = useCallback(filter => {\n    dispatchResetAllFilters({\n      type: 'REGISTER',\n      filter\n    });\n  }, []);\n  const deregisterResetAllFilter = useCallback(filter => {\n    dispatchResetAllFilters({\n      type: 'UNREGISTER',\n      filter\n    });\n  }, []);\n\n  // Updates the status of the panel’s menu items. For default items the\n  // value represents whether it differs from the default and for optional\n  // items whether the item is shown.\n  const flagItemCustomization = useCallback((value, label, group = 'default') => {\n    panelDispatch({\n      type: 'UPDATE_VALUE',\n      group,\n      label,\n      value\n    });\n  }, []);\n\n  // Whether all optional menu items are hidden or not must be tracked\n  // in order to later determine if the panel display is empty and handle\n  // conditional display of a plus icon to indicate the presence of further\n  // menu items.\n  const areAllOptionalControlsHidden = useMemo(() => {\n    return isMenuItemTypeEmpty(menuItems.default) && !isMenuItemTypeEmpty(menuItems.optional) && Object.values(menuItems.optional).every(isSelected => !isSelected);\n  }, [menuItems]);\n  const classes = clsx(styles['tools-panel'], hasInnerWrapper && styles['tools-panel-with-inner-wrapper'], areAllOptionalControlsHidden && styles['tools-panel-hidden-inner-wrapper'], className);\n\n  // Toggle the checked state of a menu item which is then used to determine\n  // display of the item within the panel.\n  const toggleItem = useCallback(label => {\n    panelDispatch({\n      type: 'TOGGLE_VALUE',\n      label\n    });\n  }, []);\n\n  // Resets display of children and executes resetAll callback if available.\n  const resetAllItems = useCallback(() => {\n    if (typeof resetAll === 'function') {\n      isResettingRef.current = true;\n      resetAll(resetAllFilters);\n    }\n\n    // Turn off display of all non-default items.\n    panelDispatch({\n      type: 'RESET_ALL'\n    });\n  }, [resetAllFilters, resetAll]);\n\n  // Assist ItemGroup styling when there are potentially hidden placeholder\n  // items by identifying first & last items that are toggled on for display.\n  const getFirstVisibleItemLabel = items => {\n    const optionalItems = menuItems.optional || {};\n    const firstItem = items.find(item => item.isShownByDefault || optionalItems[item.label]);\n    return firstItem?.label;\n  };\n  const firstDisplayedItem = getFirstVisibleItemLabel(panelItems);\n  const lastDisplayedItem = getFirstVisibleItemLabel([...panelItems].reverse());\n  const hasMenuItems = panelItems.length > 0;\n  const panelContext = useMemo(() => ({\n    areAllOptionalControlsHidden,\n    deregisterPanelItem,\n    deregisterResetAllFilter,\n    firstDisplayedItem,\n    flagItemCustomization,\n    hasMenuItems,\n    isResetting: isResettingRef.current,\n    lastDisplayedItem,\n    menuItems,\n    panelId,\n    registerPanelItem,\n    registerResetAllFilter,\n    shouldRenderPlaceholderItems,\n    __experimentalFirstVisibleItemClass,\n    __experimentalLastVisibleItemClass\n  }), [areAllOptionalControlsHidden, deregisterPanelItem, deregisterResetAllFilter, firstDisplayedItem, flagItemCustomization, lastDisplayedItem, menuItems, panelId, hasMenuItems, registerResetAllFilter, registerPanelItem, shouldRenderPlaceholderItems, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass]);\n  return {\n    ...otherProps,\n    headingLevel,\n    panelContext,\n    resetAllItems,\n    toggleItem,\n    className: classes\n  };\n}", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"29b739f451\", \"._62d714739f4dc308__tools-panel{border-top:1px solid #ddd;margin-top:-1px;padding:16px}._40db7f4f897b683d__tools-panel-with-inner-wrapper>div:not(:first-of-type){column-gap:16px;display:grid;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}._95a15674966f30a3__tools-panel-hidden-inner-wrapper>div:not(:first-of-type){display:none}._322a049b9b7d8674__tools-panel-header{gap:8px;grid-column:1/-1}._322a049b9b7d8674__tools-panel-header .components-dropdown-menu{line-height:0;margin:-4px 0}._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header .components-dropdown-menu__toggle{min-width:24px;padding:0}.b92a382d3b30104d__tools-panel-heading.b92a382d3b30104d__tools-panel-heading{font-size:inherit;line-height:normal;margin:0}._8005d68fffa9db91__tools-panel-item{grid-column:1/-1}._8005d68fffa9db91__tools-panel-item>div,._8005d68fffa9db91__tools-panel-item>fieldset{margin-bottom:0;max-width:100%;padding-bottom:0}._8005d68fffa9db91__tools-panel-item .components-base-control__help,._8005d68fffa9db91__tools-panel-item._8005d68fffa9db91__tools-panel-item .components-base-control,._8005d68fffa9db91__tools-panel-item._8005d68fffa9db91__tools-panel-item .components-base-control .components-base-control__field:last-child{margin-bottom:0}._4f55e1a6e373746e__tools-panel-item-placeholder{display:none}.d40032517bff9e12__dropdown-menu{min-width:200px}.f135b96aa96ca6bb__reset-label{color:var(--wp-components-color-accent-darker-10,var(--wp-admin-theme-color-darker-10,#2145e6));font-size:var(--wpds-typography-font-size-xs,11px);font-weight:var(--wpds-typography-font-weight-emphasis,600);line-height:1.4;margin-inline-start:12px;text-transform:uppercase}._69b138dfa5570d9c__default-controls-item{color:#1e1e1e}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true]{color:#757575;opacity:1}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true]:hover{color:#757575}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true] .f135b96aa96ca6bb__reset-label{opacity:.3}\");\n}\nexport default {\"tools-panel\":\"_62d714739f4dc308__tools-panel\",\"tools-panel-with-inner-wrapper\":\"_40db7f4f897b683d__tools-panel-with-inner-wrapper\",\"tools-panel-hidden-inner-wrapper\":\"_95a15674966f30a3__tools-panel-hidden-inner-wrapper\",\"tools-panel-header\":\"_322a049b9b7d8674__tools-panel-header\",\"tools-panel-heading\":\"b92a382d3b30104d__tools-panel-heading\",\"tools-panel-item\":\"_8005d68fffa9db91__tools-panel-item\",\"tools-panel-item-placeholder\":\"_4f55e1a6e373746e__tools-panel-item-placeholder\",\"dropdown-menu\":\"d40032517bff9e12__dropdown-menu\",\"reset-label\":\"f135b96aa96ca6bb__reset-label\",\"default-controls-item\":\"_69b138dfa5570d9c__default-controls-item\"};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -8,8 +8,92 @@ import MenuItem from "../../menu-item/index.mjs";
 import { HStack } from "../../h-stack/index.mjs";
 import { Heading } from "../../heading/index.mjs";
 import { useToolsPanelHeader } from "./hook.mjs";
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/tools-panel/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("29b739f451", "._62d714739f4dc308__tools-panel{border-top:1px solid #ddd;margin-top:-1px;padding:16px}._40db7f4f897b683d__tools-panel-with-inner-wrapper>div:not(:first-of-type){column-gap:16px;display:grid;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}._95a15674966f30a3__tools-panel-hidden-inner-wrapper>div:not(:first-of-type){display:none}._322a049b9b7d8674__tools-panel-header{gap:8px;grid-column:1/-1}._322a049b9b7d8674__tools-panel-header .components-dropdown-menu{line-height:0;margin:-4px 0}._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header .components-dropdown-menu__toggle{min-width:24px;padding:0}.b92a382d3b30104d__tools-panel-heading.b92a382d3b30104d__tools-panel-heading{font-size:inherit;line-height:normal;margin:0}._8005d68fffa9db91__tools-panel-item{grid-column:1/-1}._8005d68fffa9db91__tools-panel-item>div,._8005d68fffa9db91__tools-panel-item>fieldset{margin-bottom:0;max-width:100%;padding-bottom:0}._8005d68fffa9db91__tools-panel-item .components-base-control__help,._8005d68fffa9db91__tools-panel-item._8005d68fffa9db91__tools-panel-item .components-base-control,._8005d68fffa9db91__tools-panel-item._8005d68fffa9db91__tools-panel-item .components-base-control .components-base-control__field:last-child{margin-bottom:0}._4f55e1a6e373746e__tools-panel-item-placeholder{display:none}.d40032517bff9e12__dropdown-menu{min-width:200px}.f135b96aa96ca6bb__reset-label{color:var(--wp-components-color-accent-darker-10,var(--wp-admin-theme-color-darker-10,#2145e6));font-size:var(--wpds-typography-font-size-xs,11px);font-weight:var(--wpds-typography-font-weight-emphasis,600);line-height:1.4;margin-inline-start:12px;text-transform:uppercase}._69b138dfa5570d9c__default-controls-item{color:#1e1e1e}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true]{color:#757575;opacity:1}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true]:hover{color:#757575}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true] .f135b96aa96ca6bb__reset-label{opacity:.3}");
+}
+var style_module_default = { "tools-panel": "_62d714739f4dc308__tools-panel", "tools-panel-with-inner-wrapper": "_40db7f4f897b683d__tools-panel-with-inner-wrapper", "tools-panel-hidden-inner-wrapper": "_95a15674966f30a3__tools-panel-hidden-inner-wrapper", "tools-panel-header": "_322a049b9b7d8674__tools-panel-header", "tools-panel-heading": "b92a382d3b30104d__tools-panel-heading", "tools-panel-item": "_8005d68fffa9db91__tools-panel-item", "tools-panel-item-placeholder": "_4f55e1a6e373746e__tools-panel-item-placeholder", "dropdown-menu": "d40032517bff9e12__dropdown-menu", "reset-label": "f135b96aa96ca6bb__reset-label", "default-controls-item": "_69b138dfa5570d9c__default-controls-item" };
+
+// packages/components/src/tools-panel/tools-panel-header/component.tsx
 import { contextConnect } from "../../context/index.mjs";
-import { ResetLabel } from "../styles.mjs";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var DefaultControlsGroup = ({
   itemClassName,
@@ -19,8 +103,9 @@ var DefaultControlsGroup = ({
   if (!items.length) {
     return null;
   }
-  const resetSuffix = /* @__PURE__ */ _jsx(ResetLabel, {
+  const resetSuffix = /* @__PURE__ */ _jsx("span", {
     "aria-hidden": true,
+    className: style_module_default["reset-label"],
     children: __("Reset")
   });
   return /* @__PURE__ */ _jsx(_Fragment, {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/tools-panel/tools-panel-header/component.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { check, 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 } from '../../context';\nimport { ResetLabel } from '../styles';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst DefaultControlsGroup = ({\n  itemClassName,\n  items,\n  toggleItem\n}) => {\n  if (!items.length) {\n    return null;\n  }\n  const resetSuffix = /*#__PURE__*/_jsx(ResetLabel, {\n    \"aria-hidden\": true,\n    children: __('Reset')\n  });\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: items.map(([label, hasValue]) => {\n      if (hasValue) {\n        return /*#__PURE__*/_jsx(MenuItem, {\n          className: itemClassName,\n          role: \"menuitem\",\n          label: sprintf(\n          // translators: %s: The name of the control being reset e.g. \"Padding\".\n          __('Reset %s'), label),\n          onClick: () => {\n            toggleItem(label);\n            speak(sprintf(\n            // translators: %s: The name of the control being reset e.g. \"Padding\".\n            __('%s reset to default'), label), 'assertive');\n          },\n          suffix: resetSuffix,\n          children: label\n        }, label);\n      }\n      return /*#__PURE__*/_jsx(MenuItem, {\n        icon: check,\n        className: itemClassName,\n        role: \"menuitemcheckbox\",\n        isSelected: true,\n        \"aria-disabled\": true,\n        children: label\n      }, label);\n    })\n  });\n};\nconst OptionalControlsGroup = ({\n  items,\n  toggleItem\n}) => {\n  if (!items.length) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: items.map(([label, isSelected]) => {\n      const itemLabel = isSelected ? sprintf(\n      // translators: %s: The name of the control being hidden and reset e.g. \"Padding\".\n      __('Hide and reset %s'), label) : sprintf(\n      // translators: %s: The name of the control to display e.g. \"Padding\".\n      _x('Show %s', 'input control'), label);\n      return /*#__PURE__*/_jsx(MenuItem, {\n        icon: isSelected ? check : null,\n        isSelected: isSelected,\n        label: itemLabel,\n        onClick: () => {\n          if (isSelected) {\n            speak(sprintf(\n            // translators: %s: The name of the control being reset e.g. \"Padding\".\n            __('%s hidden and reset to default'), label), 'assertive');\n          } else {\n            speak(sprintf(\n            // translators: %s: The name of the control being reset e.g. \"Padding\".\n            __('%s is now visible'), label), 'assertive');\n          }\n          toggleItem(label);\n        },\n        role: \"menuitemcheckbox\",\n        children: label\n      }, label);\n    })\n  });\n};\nconst ToolsPanelHeader = (props, forwardedRef) => {\n  const {\n    areAllOptionalControlsHidden,\n    defaultControlsItemClassName,\n    dropdownMenuClassName,\n    hasMenuItems,\n    headingClassName,\n    headingLevel = 2,\n    label: labelText,\n    menuItems,\n    resetAll,\n    toggleItem,\n    dropdownMenuProps,\n    ...headerProps\n  } = useToolsPanelHeader(props);\n  if (!labelText) {\n    return null;\n  }\n  const defaultItems = Object.entries(menuItems?.default || {});\n  const optionalItems = Object.entries(menuItems?.optional || {});\n  const dropDownMenuIcon = areAllOptionalControlsHidden ? plus : moreVertical;\n  const dropDownMenuLabelText = sprintf(\n  // translators: %s: The name of the tool e.g. \"Color\" or \"Typography\".\n  _x('%s options', 'Button label to reveal tool panel options'), labelText);\n  const dropdownMenuDescriptionText = areAllOptionalControlsHidden ? __('All options are currently hidden') : undefined;\n  const canResetAll = [...defaultItems, ...optionalItems].some(([, isSelected]) => isSelected);\n  return /*#__PURE__*/_jsxs(HStack, {\n    ...headerProps,\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(Heading, {\n      level: headingLevel,\n      className: headingClassName,\n      children: labelText\n    }), hasMenuItems && /*#__PURE__*/_jsx(DropdownMenu, {\n      ...dropdownMenuProps,\n      icon: dropDownMenuIcon,\n      label: dropDownMenuLabelText,\n      menuProps: {\n        className: dropdownMenuClassName\n      },\n      toggleProps: {\n        size: 'small',\n        description: dropdownMenuDescriptionText\n      },\n      children: () => /*#__PURE__*/_jsxs(_Fragment, {\n        children: [/*#__PURE__*/_jsxs(MenuGroup, {\n          label: labelText,\n          children: [/*#__PURE__*/_jsx(DefaultControlsGroup, {\n            items: defaultItems,\n            toggleItem: toggleItem,\n            itemClassName: defaultControlsItemClassName\n          }), /*#__PURE__*/_jsx(OptionalControlsGroup, {\n            items: optionalItems,\n            toggleItem: toggleItem\n          })]\n        }), /*#__PURE__*/_jsx(MenuGroup, {\n          children: /*#__PURE__*/_jsx(MenuItem, {\n            \"aria-disabled\": !canResetAll\n            // @ts-expect-error - TODO: If this \"tertiary\" style is something we really want to allow on MenuItem,\n            // we should rename it and explicitly allow it as an official API. All the other Button variants\n            // don't make sense in a MenuItem context, and should be disallowed.\n            ,\n            variant: \"tertiary\",\n            onClick: () => {\n              if (canResetAll) {\n                resetAll();\n                speak(__('All options reset'), 'assertive');\n              }\n            },\n            children: __('Reset all')\n          })\n        })]\n      })\n    })]\n  });\n};\nconst ConnectedToolsPanelHeader = contextConnect(ToolsPanelHeader, 'ToolsPanelHeader');\nexport default ConnectedToolsPanelHeader;"],
-  "mappings": "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",
+  "sources": ["../../../src/tools-panel/tools-panel-header/component.tsx", "../../../../style-runtime/src/index.ts", "../../../src/tools-panel/style.module.scss"],
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { check, 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 styles from '../style.module.scss';\nimport { contextConnect } from '../../context';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst DefaultControlsGroup = ({\n  itemClassName,\n  items,\n  toggleItem\n}) => {\n  if (!items.length) {\n    return null;\n  }\n  const resetSuffix = /*#__PURE__*/_jsx(\"span\", {\n    \"aria-hidden\": true,\n    className: styles['reset-label'],\n    children: __('Reset')\n  });\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: items.map(([label, hasValue]) => {\n      if (hasValue) {\n        return /*#__PURE__*/_jsx(MenuItem, {\n          className: itemClassName,\n          role: \"menuitem\",\n          label: sprintf(\n          // translators: %s: The name of the control being reset e.g. \"Padding\".\n          __('Reset %s'), label),\n          onClick: () => {\n            toggleItem(label);\n            speak(sprintf(\n            // translators: %s: The name of the control being reset e.g. \"Padding\".\n            __('%s reset to default'), label), 'assertive');\n          },\n          suffix: resetSuffix,\n          children: label\n        }, label);\n      }\n      return /*#__PURE__*/_jsx(MenuItem, {\n        icon: check,\n        className: itemClassName,\n        role: \"menuitemcheckbox\",\n        isSelected: true,\n        \"aria-disabled\": true,\n        children: label\n      }, label);\n    })\n  });\n};\nconst OptionalControlsGroup = ({\n  items,\n  toggleItem\n}) => {\n  if (!items.length) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: items.map(([label, isSelected]) => {\n      const itemLabel = isSelected ? sprintf(\n      // translators: %s: The name of the control being hidden and reset e.g. \"Padding\".\n      __('Hide and reset %s'), label) : sprintf(\n      // translators: %s: The name of the control to display e.g. \"Padding\".\n      _x('Show %s', 'input control'), label);\n      return /*#__PURE__*/_jsx(MenuItem, {\n        icon: isSelected ? check : null,\n        isSelected: isSelected,\n        label: itemLabel,\n        onClick: () => {\n          if (isSelected) {\n            speak(sprintf(\n            // translators: %s: The name of the control being reset e.g. \"Padding\".\n            __('%s hidden and reset to default'), label), 'assertive');\n          } else {\n            speak(sprintf(\n            // translators: %s: The name of the control being reset e.g. \"Padding\".\n            __('%s is now visible'), label), 'assertive');\n          }\n          toggleItem(label);\n        },\n        role: \"menuitemcheckbox\",\n        children: label\n      }, label);\n    })\n  });\n};\nconst ToolsPanelHeader = (props, forwardedRef) => {\n  const {\n    areAllOptionalControlsHidden,\n    defaultControlsItemClassName,\n    dropdownMenuClassName,\n    hasMenuItems,\n    headingClassName,\n    headingLevel = 2,\n    label: labelText,\n    menuItems,\n    resetAll,\n    toggleItem,\n    dropdownMenuProps,\n    ...headerProps\n  } = useToolsPanelHeader(props);\n  if (!labelText) {\n    return null;\n  }\n  const defaultItems = Object.entries(menuItems?.default || {});\n  const optionalItems = Object.entries(menuItems?.optional || {});\n  const dropDownMenuIcon = areAllOptionalControlsHidden ? plus : moreVertical;\n  const dropDownMenuLabelText = sprintf(\n  // translators: %s: The name of the tool e.g. \"Color\" or \"Typography\".\n  _x('%s options', 'Button label to reveal tool panel options'), labelText);\n  const dropdownMenuDescriptionText = areAllOptionalControlsHidden ? __('All options are currently hidden') : undefined;\n  const canResetAll = [...defaultItems, ...optionalItems].some(([, isSelected]) => isSelected);\n  return /*#__PURE__*/_jsxs(HStack, {\n    ...headerProps,\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(Heading, {\n      level: headingLevel,\n      className: headingClassName,\n      children: labelText\n    }), hasMenuItems && /*#__PURE__*/_jsx(DropdownMenu, {\n      ...dropdownMenuProps,\n      icon: dropDownMenuIcon,\n      label: dropDownMenuLabelText,\n      menuProps: {\n        className: dropdownMenuClassName\n      },\n      toggleProps: {\n        size: 'small',\n        description: dropdownMenuDescriptionText\n      },\n      children: () => /*#__PURE__*/_jsxs(_Fragment, {\n        children: [/*#__PURE__*/_jsxs(MenuGroup, {\n          label: labelText,\n          children: [/*#__PURE__*/_jsx(DefaultControlsGroup, {\n            items: defaultItems,\n            toggleItem: toggleItem,\n            itemClassName: defaultControlsItemClassName\n          }), /*#__PURE__*/_jsx(OptionalControlsGroup, {\n            items: optionalItems,\n            toggleItem: toggleItem\n          })]\n        }), /*#__PURE__*/_jsx(MenuGroup, {\n          children: /*#__PURE__*/_jsx(MenuItem, {\n            \"aria-disabled\": !canResetAll\n            // @ts-expect-error - TODO: If this \"tertiary\" style is something we really want to allow on MenuItem,\n            // we should rename it and explicitly allow it as an official API. All the other Button variants\n            // don't make sense in a MenuItem context, and should be disallowed.\n            ,\n            variant: \"tertiary\",\n            onClick: () => {\n              if (canResetAll) {\n                resetAll();\n                speak(__('All options reset'), 'assertive');\n              }\n            },\n            children: __('Reset all')\n          })\n        })]\n      })\n    })]\n  });\n};\nconst ConnectedToolsPanelHeader = contextConnect(ToolsPanelHeader, 'ToolsPanelHeader');\nexport default ConnectedToolsPanelHeader;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"29b739f451\", \"._62d714739f4dc308__tools-panel{border-top:1px solid #ddd;margin-top:-1px;padding:16px}._40db7f4f897b683d__tools-panel-with-inner-wrapper>div:not(:first-of-type){column-gap:16px;display:grid;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}._95a15674966f30a3__tools-panel-hidden-inner-wrapper>div:not(:first-of-type){display:none}._322a049b9b7d8674__tools-panel-header{gap:8px;grid-column:1/-1}._322a049b9b7d8674__tools-panel-header .components-dropdown-menu{line-height:0;margin:-4px 0}._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header .components-dropdown-menu__toggle{min-width:24px;padding:0}.b92a382d3b30104d__tools-panel-heading.b92a382d3b30104d__tools-panel-heading{font-size:inherit;line-height:normal;margin:0}._8005d68fffa9db91__tools-panel-item{grid-column:1/-1}._8005d68fffa9db91__tools-panel-item>div,._8005d68fffa9db91__tools-panel-item>fieldset{margin-bottom:0;max-width:100%;padding-bottom:0}._8005d68fffa9db91__tools-panel-item .components-base-control__help,._8005d68fffa9db91__tools-panel-item._8005d68fffa9db91__tools-panel-item .components-base-control,._8005d68fffa9db91__tools-panel-item._8005d68fffa9db91__tools-panel-item .components-base-control .components-base-control__field:last-child{margin-bottom:0}._4f55e1a6e373746e__tools-panel-item-placeholder{display:none}.d40032517bff9e12__dropdown-menu{min-width:200px}.f135b96aa96ca6bb__reset-label{color:var(--wp-components-color-accent-darker-10,var(--wp-admin-theme-color-darker-10,#2145e6));font-size:var(--wpds-typography-font-size-xs,11px);font-weight:var(--wpds-typography-font-weight-emphasis,600);line-height:1.4;margin-inline-start:12px;text-transform:uppercase}._69b138dfa5570d9c__default-controls-item{color:#1e1e1e}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true]{color:#757575;opacity:1}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true]:hover{color:#757575}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true] .f135b96aa96ca6bb__reset-label{opacity:.3}\");\n}\nexport default {\"tools-panel\":\"_62d714739f4dc308__tools-panel\",\"tools-panel-with-inner-wrapper\":\"_40db7f4f897b683d__tools-panel-with-inner-wrapper\",\"tools-panel-hidden-inner-wrapper\":\"_95a15674966f30a3__tools-panel-hidden-inner-wrapper\",\"tools-panel-header\":\"_322a049b9b7d8674__tools-panel-header\",\"tools-panel-heading\":\"b92a382d3b30104d__tools-panel-heading\",\"tools-panel-item\":\"_8005d68fffa9db91__tools-panel-item\",\"tools-panel-item-placeholder\":\"_4f55e1a6e373746e__tools-panel-item-placeholder\",\"dropdown-menu\":\"d40032517bff9e12__dropdown-menu\",\"reset-label\":\"f135b96aa96ca6bb__reset-label\",\"default-controls-item\":\"_69b138dfa5570d9c__default-controls-item\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/tools-panel/tools-panel-header/hook.mjs

@@ -1,28 +1,98 @@
 // packages/components/src/tools-panel/tools-panel-header/hook.ts
-import { useMemo } from "@wordpress/element";
-import * as styles from "../styles.mjs";
+import clsx from "clsx";
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/tools-panel/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("29b739f451", "._62d714739f4dc308__tools-panel{border-top:1px solid #ddd;margin-top:-1px;padding:16px}._40db7f4f897b683d__tools-panel-with-inner-wrapper>div:not(:first-of-type){column-gap:16px;display:grid;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}._95a15674966f30a3__tools-panel-hidden-inner-wrapper>div:not(:first-of-type){display:none}._322a049b9b7d8674__tools-panel-header{gap:8px;grid-column:1/-1}._322a049b9b7d8674__tools-panel-header .components-dropdown-menu{line-height:0;margin:-4px 0}._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header .components-dropdown-menu__toggle{min-width:24px;padding:0}.b92a382d3b30104d__tools-panel-heading.b92a382d3b30104d__tools-panel-heading{font-size:inherit;line-height:normal;margin:0}._8005d68fffa9db91__tools-panel-item{grid-column:1/-1}._8005d68fffa9db91__tools-panel-item>div,._8005d68fffa9db91__tools-panel-item>fieldset{margin-bottom:0;max-width:100%;padding-bottom:0}._8005d68fffa9db91__tools-panel-item .components-base-control__help,._8005d68fffa9db91__tools-panel-item._8005d68fffa9db91__tools-panel-item .components-base-control,._8005d68fffa9db91__tools-panel-item._8005d68fffa9db91__tools-panel-item .components-base-control .components-base-control__field:last-child{margin-bottom:0}._4f55e1a6e373746e__tools-panel-item-placeholder{display:none}.d40032517bff9e12__dropdown-menu{min-width:200px}.f135b96aa96ca6bb__reset-label{color:var(--wp-components-color-accent-darker-10,var(--wp-admin-theme-color-darker-10,#2145e6));font-size:var(--wpds-typography-font-size-xs,11px);font-weight:var(--wpds-typography-font-weight-emphasis,600);line-height:1.4;margin-inline-start:12px;text-transform:uppercase}._69b138dfa5570d9c__default-controls-item{color:#1e1e1e}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true]{color:#757575;opacity:1}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true]:hover{color:#757575}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true] .f135b96aa96ca6bb__reset-label{opacity:.3}");
+}
+var style_module_default = { "tools-panel": "_62d714739f4dc308__tools-panel", "tools-panel-with-inner-wrapper": "_40db7f4f897b683d__tools-panel-with-inner-wrapper", "tools-panel-hidden-inner-wrapper": "_95a15674966f30a3__tools-panel-hidden-inner-wrapper", "tools-panel-header": "_322a049b9b7d8674__tools-panel-header", "tools-panel-heading": "b92a382d3b30104d__tools-panel-heading", "tools-panel-item": "_8005d68fffa9db91__tools-panel-item", "tools-panel-item-placeholder": "_4f55e1a6e373746e__tools-panel-item-placeholder", "dropdown-menu": "d40032517bff9e12__dropdown-menu", "reset-label": "f135b96aa96ca6bb__reset-label", "default-controls-item": "_69b138dfa5570d9c__default-controls-item" };
+
+// packages/components/src/tools-panel/tools-panel-header/hook.ts
 import { useToolsPanelContext } from "../context.mjs";
 import { useContextSystem } from "../../context/index.mjs";
-import { useCx } from "../../utils/hooks/use-cx.mjs";
 function useToolsPanelHeader(props) {
   const {
     className,
     headingLevel = 2,
     ...otherProps
   } = useContextSystem(props, "ToolsPanelHeader");
-  const cx = useCx();
-  const classes = useMemo(() => {
-    return cx(styles.ToolsPanelHeader, className);
-  }, [className, cx]);
-  const dropdownMenuClassName = useMemo(() => {
-    return cx(styles.DropdownMenu);
-  }, [cx]);
-  const headingClassName = useMemo(() => {
-    return cx(styles.ToolsPanelHeading);
-  }, [cx]);
-  const defaultControlsItemClassName = useMemo(() => {
-    return cx(styles.DefaultControlsItem);
-  }, [cx]);
   const {
     menuItems,
     hasMenuItems,
@@ -31,13 +101,13 @@ function useToolsPanelHeader(props) {
   return {
     ...otherProps,
     areAllOptionalControlsHidden,
-    defaultControlsItemClassName,
-    dropdownMenuClassName,
+    defaultControlsItemClassName: style_module_default["default-controls-item"],
+    dropdownMenuClassName: style_module_default["dropdown-menu"],
     hasMenuItems,
-    headingClassName,
+    headingClassName: style_module_default["tools-panel-heading"],
     headingLevel,
     menuItems,
-    className: classes
+    className: clsx(style_module_default["tools-panel-header"], className)
   };
 }
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/tools-panel/tools-panel-header/hook.ts"],
-  "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 '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nexport function useToolsPanelHeader(props) {\n  const {\n    className,\n    headingLevel = 2,\n    ...otherProps\n  } = useContextSystem(props, 'ToolsPanelHeader');\n  const cx = useCx();\n  const classes = useMemo(() => {\n    return cx(styles.ToolsPanelHeader, className);\n  }, [className, cx]);\n  const dropdownMenuClassName = useMemo(() => {\n    return cx(styles.DropdownMenu);\n  }, [cx]);\n  const headingClassName = useMemo(() => {\n    return cx(styles.ToolsPanelHeading);\n  }, [cx]);\n  const defaultControlsItemClassName = useMemo(() => {\n    return cx(styles.DefaultControlsItem);\n  }, [cx]);\n  const {\n    menuItems,\n    hasMenuItems,\n    areAllOptionalControlsHidden\n  } = useToolsPanelContext();\n  return {\n    ...otherProps,\n    areAllOptionalControlsHidden,\n    defaultControlsItemClassName,\n    dropdownMenuClassName,\n    hasMenuItems,\n    headingClassName,\n    headingLevel,\n    menuItems,\n    className: classes\n  };\n}"],
-  "mappings": ";AAGA,SAAS,eAAe;AAKxB,YAAY,YAAY;AACxB,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,aAAa;AACf,SAAS,oBAAoB,OAAO;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,kBAAkB;AAC9C,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,QAAQ,MAAM;AAC5B,WAAO,GAAU,yBAAkB,SAAS;AAAA,EAC9C,GAAG,CAAC,WAAW,EAAE,CAAC;AAClB,QAAM,wBAAwB,QAAQ,MAAM;AAC1C,WAAO,GAAU,mBAAY;AAAA,EAC/B,GAAG,CAAC,EAAE,CAAC;AACP,QAAM,mBAAmB,QAAQ,MAAM;AACrC,WAAO,GAAU,wBAAiB;AAAA,EACpC,GAAG,CAAC,EAAE,CAAC;AACP,QAAM,+BAA+B,QAAQ,MAAM;AACjD,WAAO,GAAU,0BAAmB;AAAA,EACtC,GAAG,CAAC,EAAE,CAAC;AACP,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,qBAAqB;AACzB,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,EACb;AACF;",
+  "sources": ["../../../src/tools-panel/tools-panel-header/hook.ts", "../../../../style-runtime/src/index.ts", "../../../src/tools-panel/style.module.scss"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport styles from '../style.module.scss';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem } from '../../context';\nexport function useToolsPanelHeader(props) {\n  const {\n    className,\n    headingLevel = 2,\n    ...otherProps\n  } = useContextSystem(props, 'ToolsPanelHeader');\n  const {\n    menuItems,\n    hasMenuItems,\n    areAllOptionalControlsHidden\n  } = useToolsPanelContext();\n  return {\n    ...otherProps,\n    areAllOptionalControlsHidden,\n    defaultControlsItemClassName: styles['default-controls-item'],\n    dropdownMenuClassName: styles['dropdown-menu'],\n    hasMenuItems,\n    headingClassName: styles['tools-panel-heading'],\n    headingLevel,\n    menuItems,\n    className: clsx(styles['tools-panel-header'], className)\n  };\n}", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"29b739f451\", \"._62d714739f4dc308__tools-panel{border-top:1px solid #ddd;margin-top:-1px;padding:16px}._40db7f4f897b683d__tools-panel-with-inner-wrapper>div:not(:first-of-type){column-gap:16px;display:grid;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}._95a15674966f30a3__tools-panel-hidden-inner-wrapper>div:not(:first-of-type){display:none}._322a049b9b7d8674__tools-panel-header{gap:8px;grid-column:1/-1}._322a049b9b7d8674__tools-panel-header .components-dropdown-menu{line-height:0;margin:-4px 0}._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header .components-dropdown-menu__toggle{min-width:24px;padding:0}.b92a382d3b30104d__tools-panel-heading.b92a382d3b30104d__tools-panel-heading{font-size:inherit;line-height:normal;margin:0}._8005d68fffa9db91__tools-panel-item{grid-column:1/-1}._8005d68fffa9db91__tools-panel-item>div,._8005d68fffa9db91__tools-panel-item>fieldset{margin-bottom:0;max-width:100%;padding-bottom:0}._8005d68fffa9db91__tools-panel-item .components-base-control__help,._8005d68fffa9db91__tools-panel-item._8005d68fffa9db91__tools-panel-item .components-base-control,._8005d68fffa9db91__tools-panel-item._8005d68fffa9db91__tools-panel-item .components-base-control .components-base-control__field:last-child{margin-bottom:0}._4f55e1a6e373746e__tools-panel-item-placeholder{display:none}.d40032517bff9e12__dropdown-menu{min-width:200px}.f135b96aa96ca6bb__reset-label{color:var(--wp-components-color-accent-darker-10,var(--wp-admin-theme-color-darker-10,#2145e6));font-size:var(--wpds-typography-font-size-xs,11px);font-weight:var(--wpds-typography-font-weight-emphasis,600);line-height:1.4;margin-inline-start:12px;text-transform:uppercase}._69b138dfa5570d9c__default-controls-item{color:#1e1e1e}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true]{color:#757575;opacity:1}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true]:hover{color:#757575}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true] .f135b96aa96ca6bb__reset-label{opacity:.3}\");\n}\nexport default {\"tools-panel\":\"_62d714739f4dc308__tools-panel\",\"tools-panel-with-inner-wrapper\":\"_40db7f4f897b683d__tools-panel-with-inner-wrapper\",\"tools-panel-hidden-inner-wrapper\":\"_95a15674966f30a3__tools-panel-hidden-inner-wrapper\",\"tools-panel-header\":\"_322a049b9b7d8674__tools-panel-header\",\"tools-panel-heading\":\"b92a382d3b30104d__tools-panel-heading\",\"tools-panel-item\":\"_8005d68fffa9db91__tools-panel-item\",\"tools-panel-item-placeholder\":\"_4f55e1a6e373746e__tools-panel-item-placeholder\",\"dropdown-menu\":\"d40032517bff9e12__dropdown-menu\",\"reset-label\":\"f135b96aa96ca6bb__reset-label\",\"default-controls-item\":\"_69b138dfa5570d9c__default-controls-item\"};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,10 +1,94 @@
 // packages/components/src/tools-panel/tools-panel-item/hook.ts
+import clsx from "clsx";
 import { usePrevious } from "@wordpress/compose";
-import { useCallback, useEffect, useLayoutEffect, useMemo } from "@wordpress/element";
-import * as styles from "../styles.mjs";
+import { useCallback, useEffect, useLayoutEffect } from "@wordpress/element";
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/tools-panel/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("29b739f451", "._62d714739f4dc308__tools-panel{border-top:1px solid #ddd;margin-top:-1px;padding:16px}._40db7f4f897b683d__tools-panel-with-inner-wrapper>div:not(:first-of-type){column-gap:16px;display:grid;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}._95a15674966f30a3__tools-panel-hidden-inner-wrapper>div:not(:first-of-type){display:none}._322a049b9b7d8674__tools-panel-header{gap:8px;grid-column:1/-1}._322a049b9b7d8674__tools-panel-header .components-dropdown-menu{line-height:0;margin:-4px 0}._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header .components-dropdown-menu__toggle{min-width:24px;padding:0}.b92a382d3b30104d__tools-panel-heading.b92a382d3b30104d__tools-panel-heading{font-size:inherit;line-height:normal;margin:0}._8005d68fffa9db91__tools-panel-item{grid-column:1/-1}._8005d68fffa9db91__tools-panel-item>div,._8005d68fffa9db91__tools-panel-item>fieldset{margin-bottom:0;max-width:100%;padding-bottom:0}._8005d68fffa9db91__tools-panel-item .components-base-control__help,._8005d68fffa9db91__tools-panel-item._8005d68fffa9db91__tools-panel-item .components-base-control,._8005d68fffa9db91__tools-panel-item._8005d68fffa9db91__tools-panel-item .components-base-control .components-base-control__field:last-child{margin-bottom:0}._4f55e1a6e373746e__tools-panel-item-placeholder{display:none}.d40032517bff9e12__dropdown-menu{min-width:200px}.f135b96aa96ca6bb__reset-label{color:var(--wp-components-color-accent-darker-10,var(--wp-admin-theme-color-darker-10,#2145e6));font-size:var(--wpds-typography-font-size-xs,11px);font-weight:var(--wpds-typography-font-weight-emphasis,600);line-height:1.4;margin-inline-start:12px;text-transform:uppercase}._69b138dfa5570d9c__default-controls-item{color:#1e1e1e}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true]{color:#757575;opacity:1}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true]:hover{color:#757575}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true] .f135b96aa96ca6bb__reset-label{opacity:.3}");
+}
+var style_module_default = { "tools-panel": "_62d714739f4dc308__tools-panel", "tools-panel-with-inner-wrapper": "_40db7f4f897b683d__tools-panel-with-inner-wrapper", "tools-panel-hidden-inner-wrapper": "_95a15674966f30a3__tools-panel-hidden-inner-wrapper", "tools-panel-header": "_322a049b9b7d8674__tools-panel-header", "tools-panel-heading": "b92a382d3b30104d__tools-panel-heading", "tools-panel-item": "_8005d68fffa9db91__tools-panel-item", "tools-panel-item-placeholder": "_4f55e1a6e373746e__tools-panel-item-placeholder", "dropdown-menu": "d40032517bff9e12__dropdown-menu", "reset-label": "f135b96aa96ca6bb__reset-label", "default-controls-item": "_69b138dfa5570d9c__default-controls-item" };
+
+// packages/components/src/tools-panel/tools-panel-item/hook.ts
 import { useToolsPanelContext } from "../context.mjs";
 import { useContextSystem } from "../../context/index.mjs";
-import { useCx } from "../../utils/hooks/use-cx.mjs";
 var noop = () => {
 };
 function useToolsPanelItem(props) {
@@ -86,13 +170,8 @@ function useToolsPanelItem(props) {
     }
   }, [hasMatchingPanel, isMenuItemChecked, isRegistered, isResetting, isValueSet, wasMenuItemChecked, onSelect, onDeselect]);
   const isShown = isShownByDefault ? menuItems?.[menuGroup]?.[label] !== void 0 : isMenuItemChecked;
-  const cx = useCx();
-  const classes = useMemo(() => {
-    const shouldApplyPlaceholderStyles = shouldRenderPlaceholder && !isShown;
-    const firstItemStyle = firstDisplayedItem === label && __experimentalFirstVisibleItemClass;
-    const lastItemStyle = lastDisplayedItem === label && __experimentalLastVisibleItemClass;
-    return cx(styles.ToolsPanelItem, shouldApplyPlaceholderStyles && styles.ToolsPanelItemPlaceholder, !shouldApplyPlaceholderStyles && className, firstItemStyle, lastItemStyle);
-  }, [isShown, shouldRenderPlaceholder, className, cx, firstDisplayedItem, lastDisplayedItem, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass, label]);
+  const shouldApplyPlaceholderStyles = shouldRenderPlaceholder && !isShown;
+  const classes = clsx(style_module_default["tools-panel-item"], shouldApplyPlaceholderStyles && style_module_default["tools-panel-item-placeholder"], !shouldApplyPlaceholderStyles && className, firstDisplayedItem === label && __experimentalFirstVisibleItemClass, lastDisplayedItem === label && __experimentalLastVisibleItemClass);
   return {
     ...otherProps,
     isShown,