@wordpress/components 39.0.0 → 40.1.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", "../../../../style-runtime/src/index.ts", "../../../src/tools-panel/style.module.scss"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useCallback, useEffect, useMemo, useReducer, useRef } from '@wordpress/element';\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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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useCallback, useEffect, useMemo, useReducer, useState } from '@wordpress/element';\nimport styles from '../style.module.scss';\nimport { useContextSystem } from '../../context';\nfunction emptyState() {\n  return {\n    panelItems: [],\n    menuItemOrder: [],\n    menuItemValues: {}\n  };\n}\n\n// An item is always shown while it has a value. `defaultShown` only opts an\n// optional item in when it has none.\nconst getSeedValue = item => item.hasValue() || !item.isShownByDefault && !!item.defaultShown;\nconst getMenuGroup = item => item.isShownByDefault ? 'default' : 'optional';\nfunction panelItemsReducer(panelItems, action) {\n  switch (action.type) {\n    case 'REGISTER_PANEL':\n      {\n        // An existing registration is replaced rather than appended, so\n        // that an item moving between the default and optional groups\n        // doesn't end up in the list twice.\n        const existingIndex = panelItems.findIndex(item => item.label === action.item.label);\n        const newItems = [...panelItems];\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          return panelItems;\n        }\n        // A replacement may already hold this label, in which case this is\n        // a late cleanup for a registration that is no longer current.\n        if (action.item && panelItems[index] !== action.item) {\n          return panelItems;\n        }\n        const newItems = [...panelItems];\n        newItems.splice(index, 1);\n        return newItems;\n      }\n    default:\n      return panelItems;\n  }\n}\nfunction menuItemOrderReducer(menuItemOrder, action) {\n  switch (action.type) {\n    case 'REGISTER_PANEL':\n      {\n        // Append-only: an item that unregisters and comes back keeps its\n        // original place in the menu.\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 menuItemValuesReducer(state, action) {\n  const values = state.menuItemValues;\n  switch (action.type) {\n    case 'REGISTER_PANEL':\n      {\n        // A new registration starts from its own value rather than\n        // inheriting what an item it replaces recorded under the same\n        // label. Clearing here rather than on deregistration covers both\n        // orderings, since the two are not guaranteed to arrive in one.\n        // Relies on re-registering also re-reporting the value.\n        if (!values.hasOwnProperty(action.item.label)) {\n          return values;\n        }\n        const {\n          [action.item.label]: unusedValue,\n          ...rest\n        } = values;\n        return rest;\n      }\n    case 'UPDATE_VALUE':\n      {\n        if (values[action.label] === action.value) {\n          return values;\n        }\n        return {\n          ...values,\n          [action.label]: action.value\n        };\n      }\n    case 'TOGGLE_VALUE':\n      {\n        const item = state.panelItems.find(({\n          label\n        }) => label === action.label);\n        if (!item) {\n          return values;\n        }\n        const current = values[action.label] ?? getSeedValue(item);\n        return {\n          ...values,\n          [action.label]: !current\n        };\n      }\n    case 'RESET_ALL':\n      {\n        // Optional items are set to false so they hide right away.\n        // Default items are left alone: a reset can leave a value in\n        // place, since `onDeselect` and `resetAllFilter` are optional and\n        // `resetAll` need not cover every attribute. Each item reports its\n        // value again if the reset changed it.\n        const hidden = state.panelItems.filter(item => !item.isShownByDefault && values[item.label] !== false);\n        if (!hidden.length) {\n          return values;\n        }\n        const next = {\n          ...values\n        };\n        hidden.forEach(({\n          label\n        }) => {\n          next[label] = false;\n        });\n        return next;\n      }\n    default:\n      return values;\n  }\n}\nfunction panelReducer(state, action) {\n  const panelItems = panelItemsReducer(state.panelItems, action);\n  const menuItemOrder = menuItemOrderReducer(state.menuItemOrder, action);\n  const menuItemValues = menuItemValuesReducer({\n    ...state,\n    panelItems\n  }, action);\n\n  // Items dispatch far more often than they change anything. Holding onto\n  // the existing state lets React skip the render.\n  if (panelItems === state.panelItems && menuItemOrder === state.menuItemOrder && menuItemValues === state.menuItemValues) {\n    return state;\n  }\n  return {\n    panelItems,\n    menuItemOrder,\n    menuItemValues\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\n  // Marks the render that follows a reset so items can tell a reset apart\n  // from the user switching them off. Clearing it from an effect rather than\n  // as each control updates keeps the whole reset within one pass; otherwise\n  // later controls see it already cleared and reset themselves again from\n  // stale data.\n  const [isResetting, setIsResetting] = useState(false);\n  useEffect(() => {\n    if (isResetting) {\n      setIsResetting(false);\n    }\n  }, [isResetting]);\n  const [{\n    panelItems,\n    menuItemOrder,\n    menuItemValues\n  }, panelDispatch] = useReducer(panelReducer, undefined, emptyState);\n\n  // Reset all filters registered against the context directly, by consumers\n  // that aren't themselves a panel item. Items supply theirs when they\n  // register.\n  const [externalResetAllFilters, dispatchResetAllFilters] = useReducer(resetAllFiltersReducer, []);\n  const registerPanelItem = useCallback(item => {\n    panelDispatch({\n      type: 'REGISTER_PANEL',\n      item\n    });\n  }, []);\n  const deregisterPanelItem = useCallback((label, item) => {\n    panelDispatch({\n      type: 'UNREGISTER_PANEL',\n      label,\n      item\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  // Argument order is unchanged from before this hook derived the menu; only\n  // the group argument is gone, since it follows from `isShownByDefault`.\n  const flagItemCustomization = useCallback((value, label) => {\n    panelDispatch({\n      type: 'UPDATE_VALUE',\n      label,\n      value\n    });\n  }, []);\n\n  // Derived during render so the panel can never paint a half-built menu.\n  // See: https://github.com/WordPress/gutenberg/pull/65564\n  const menuItems = useMemo(() => {\n    const result = {\n      default: {},\n      optional: {}\n    };\n    const byLabel = new Map(panelItems.map(item => [item.label, item]));\n\n    // `menuItemOrder` holds every registered label, so it alone drives\n    // the menu.\n    menuItemOrder.forEach(label => {\n      const item = byLabel.get(label);\n      if (!item) {\n        return;\n      }\n      result[getMenuGroup(item)][label] = menuItemValues[label] ?? getSeedValue(item);\n    });\n    return result;\n  }, [panelItems, menuItemOrder, menuItemValues]);\n\n  // Drives the plus icon and the empty panel styling.\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  // `onShownChange` is invoked from here rather than in response to the\n  // resulting state change, so that it only ever reports an explicit menu\n  // action by the user.\n  const toggleItem = useCallback(label => {\n    const currentItem = panelItems.find(item => item.label === label);\n    if (!currentItem) {\n      return;\n    }\n    panelDispatch({\n      type: 'TOGGLE_VALUE',\n      label\n    });\n\n    // Default items stay visible when toggled off, which resets them\n    // instead of hiding them. Only optional items have a show or hide\n    // transition to report.\n    if (currentItem.isShownByDefault) {\n      return;\n    }\n    currentItem.onShownChange?.(!menuItems.optional[label]);\n  }, [menuItems, panelItems]);\n  const resetAllFilters = useMemo(() => {\n    const itemFilters = panelItems.map(item => item.resetAllFilter).filter(filter => !!filter);\n    return [...itemFilters, ...externalResetAllFilters];\n  }, [panelItems, externalResetAllFilters]);\n  const resetAllItems = useCallback(() => {\n    if (typeof resetAll === 'function') {\n      setIsResetting(true);\n      resetAll(resetAllFilters);\n    }\n    panelDispatch({\n      type: 'RESET_ALL'\n    });\n  }, [resetAllFilters, resetAll]);\n\n  // Lets `ItemGroup` style the visible ends of the panel when hidden\n  // placeholder items sit among the children.\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,\n    lastDisplayedItem,\n    menuItems,\n    panelId,\n    registerPanelItem,\n    registerResetAllFilter,\n    shouldRenderPlaceholderItems,\n    __experimentalFirstVisibleItemClass,\n    __experimentalLastVisibleItemClass\n  }), [areAllOptionalControlsHidden, deregisterPanelItem, deregisterResetAllFilter, firstDisplayedItem, flagItemCustomization, isResetting, 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-item/hook.mjs

@@ -1,7 +1,7 @@
 // packages/components/src/tools-panel/tools-panel-item/hook.ts
 import clsx from "clsx";
-import { usePrevious } from "@wordpress/compose";
-import { useCallback, useEffect, useLayoutEffect } from "@wordpress/element";
+import { useEvent } from "@wordpress/compose";
+import { useCallback, useEffect, useLayoutEffect, useRef } from "@wordpress/element";
 
 // packages/style-runtime/src/index.ts
 var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
@@ -94,6 +94,7 @@ var noop = () => {
 function useToolsPanelItem(props) {
   const {
     className,
+    defaultShown,
     hasValue,
     isShownByDefault = false,
     label,
@@ -101,13 +102,12 @@ function useToolsPanelItem(props) {
     resetAllFilter = noop,
     onDeselect,
     onSelect,
+    onShownChange,
     ...otherProps
   } = useContextSystem(props, "ToolsPanelItem");
   const {
     panelId: currentPanelId,
     menuItems,
-    registerResetAllFilter,
-    deregisterResetAllFilter,
     registerPanelItem,
     deregisterPanelItem,
     flagItemCustomization,
@@ -119,47 +119,47 @@ function useToolsPanelItem(props) {
     __experimentalLastVisibleItemClass
   } = useToolsPanelContext();
   const hasValueCallback = useCallback(hasValue, [panelId]);
-  const resetAllFilterCallback = useCallback(resetAllFilter, [panelId]);
-  const previousPanelId = usePrevious(currentPanelId);
+  const resetAllFilterCallback = useEvent(resetAllFilter);
+  const defaultShownRef = useRef(defaultShown);
+  useLayoutEffect(() => {
+    defaultShownRef.current = defaultShown;
+  });
+  const onShownChangeCallback = useEvent(onShownChange);
   const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null;
   useLayoutEffect(() => {
-    if (hasMatchingPanel && previousPanelId !== null) {
-      registerPanelItem({
-        hasValue: hasValueCallback,
-        isShownByDefault,
-        label,
-        panelId
-      });
+    if (!hasMatchingPanel) {
+      return;
     }
-    return () => {
-      if (previousPanelId === null && !!currentPanelId || currentPanelId === panelId) {
-        deregisterPanelItem(label);
-      }
+    const item = {
+      defaultShown: defaultShownRef.current,
+      hasValue: hasValueCallback,
+      isShownByDefault,
+      label,
+      onShownChange: onShownChangeCallback,
+      panelId,
+      resetAllFilter: resetAllFilterCallback
     };
-  }, [currentPanelId, hasMatchingPanel, isShownByDefault, label, hasValueCallback, panelId, previousPanelId, registerPanelItem, deregisterPanelItem]);
-  useEffect(() => {
-    if (hasMatchingPanel) {
-      registerResetAllFilter(resetAllFilterCallback);
-    }
+    registerPanelItem(item);
     return () => {
-      if (hasMatchingPanel) {
-        deregisterResetAllFilter(resetAllFilterCallback);
-      }
+      deregisterPanelItem(label, item);
     };
-  }, [registerResetAllFilter, deregisterResetAllFilter, resetAllFilterCallback, hasMatchingPanel]);
+  }, [deregisterPanelItem, hasMatchingPanel, hasValueCallback, isShownByDefault, label, onShownChangeCallback, panelId, registerPanelItem, resetAllFilterCallback]);
   const menuGroup = isShownByDefault ? "default" : "optional";
   const isMenuItemChecked = menuItems?.[menuGroup]?.[label];
-  const wasMenuItemChecked = usePrevious(isMenuItemChecked);
-  const isRegistered = menuItems?.[menuGroup]?.[label] !== void 0;
+  const isRegistered = isMenuItemChecked !== void 0;
+  const wasMenuItemCheckedRef = useRef(void 0);
   const isValueSet = hasValue();
-  useEffect(() => {
-    if (!isShownByDefault && !isValueSet) {
+  useLayoutEffect(() => {
+    if (!hasMatchingPanel || !isShownByDefault && !isValueSet) {
       return;
     }
-    flagItemCustomization(isValueSet, label, menuGroup);
-  }, [isValueSet, menuGroup, label, flagItemCustomization, isShownByDefault]);
+    flagItemCustomization(isValueSet, label);
+  }, [hasMatchingPanel, isValueSet, label, flagItemCustomization, isShownByDefault]);
   useEffect(() => {
-    if (!isRegistered || isResetting || !hasMatchingPanel) {
+    const wasMenuItemChecked = wasMenuItemCheckedRef.current;
+    wasMenuItemCheckedRef.current = isMenuItemChecked;
+    const wasRegistered = wasMenuItemChecked !== void 0;
+    if (!isRegistered || !wasRegistered || isResetting || !hasMatchingPanel) {
       return;
     }
     if (isMenuItemChecked && !isValueSet && !wasMenuItemChecked) {
@@ -168,8 +168,8 @@ function useToolsPanelItem(props) {
     if (!isMenuItemChecked && isValueSet && wasMenuItemChecked) {
       onDeselect?.();
     }
-  }, [hasMatchingPanel, isMenuItemChecked, isRegistered, isResetting, isValueSet, wasMenuItemChecked, onSelect, onDeselect]);
-  const isShown = isShownByDefault ? menuItems?.[menuGroup]?.[label] !== void 0 : isMenuItemChecked;
+  }, [hasMatchingPanel, isMenuItemChecked, isRegistered, isResetting, isValueSet, onSelect, onDeselect]);
+  const isShown = isShownByDefault ? isRegistered : isMenuItemChecked;
   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 {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/tools-panel/tools-panel-item/hook.ts", "../../../../style-runtime/src/index.ts", "../../../src/tools-panel/style.module.scss"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { usePrevious } from '@wordpress/compose';\nimport { useCallback, useEffect, useLayoutEffect } from '@wordpress/element';\nimport styles from '../style.module.scss';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem } from '../../context';\nconst noop = () => {};\nexport function useToolsPanelItem(props) {\n  const {\n    className,\n    hasValue,\n    isShownByDefault = false,\n    label,\n    panelId,\n    resetAllFilter = noop,\n    onDeselect,\n    onSelect,\n    ...otherProps\n  } = useContextSystem(props, 'ToolsPanelItem');\n  const {\n    panelId: currentPanelId,\n    menuItems,\n    registerResetAllFilter,\n    deregisterResetAllFilter,\n    registerPanelItem,\n    deregisterPanelItem,\n    flagItemCustomization,\n    isResetting,\n    shouldRenderPlaceholderItems: shouldRenderPlaceholder,\n    firstDisplayedItem,\n    lastDisplayedItem,\n    __experimentalFirstVisibleItemClass,\n    __experimentalLastVisibleItemClass\n  } = useToolsPanelContext();\n\n  // hasValue is a new function on every render, so do not add it as a\n  // dependency to the useCallback hook! If needed, we should use a ref.\n  const hasValueCallback = useCallback(hasValue, [panelId]);\n  // resetAllFilter is a new function on every render, so do not add it as a\n  // dependency to the useCallback hook! If needed, we should use a ref.\n  const resetAllFilterCallback = useCallback(resetAllFilter, [panelId]);\n  const previousPanelId = usePrevious(currentPanelId);\n  const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null;\n\n  // Registering the panel item allows the panel to include it in its\n  // automatically generated menu and determine its initial checked status.\n  //\n  // This is performed in a layout effect to ensure that the panel item\n  // is registered before it is rendered preventing a rendering glitch.\n  // See: https://github.com/WordPress/gutenberg/issues/56470\n  useLayoutEffect(() => {\n    if (hasMatchingPanel && previousPanelId !== null) {\n      registerPanelItem({\n        hasValue: hasValueCallback,\n        isShownByDefault,\n        label,\n        panelId\n      });\n    }\n    return () => {\n      if (previousPanelId === null && !!currentPanelId || currentPanelId === panelId) {\n        deregisterPanelItem(label);\n      }\n    };\n  }, [currentPanelId, hasMatchingPanel, isShownByDefault, label, hasValueCallback, panelId, previousPanelId, registerPanelItem, deregisterPanelItem]);\n  useEffect(() => {\n    if (hasMatchingPanel) {\n      registerResetAllFilter(resetAllFilterCallback);\n    }\n    return () => {\n      if (hasMatchingPanel) {\n        deregisterResetAllFilter(resetAllFilterCallback);\n      }\n    };\n  }, [registerResetAllFilter, deregisterResetAllFilter, resetAllFilterCallback, hasMatchingPanel]);\n\n  // Note: `label` is used as a key when building menu item state in\n  // `ToolsPanel`.\n  const menuGroup = isShownByDefault ? 'default' : 'optional';\n  const isMenuItemChecked = menuItems?.[menuGroup]?.[label];\n  const wasMenuItemChecked = usePrevious(isMenuItemChecked);\n  const isRegistered = menuItems?.[menuGroup]?.[label] !== undefined;\n  const isValueSet = hasValue();\n  // Notify the panel when an item's value has changed except for optional\n  // items without value because the item should not cause itself to hide.\n  useEffect(() => {\n    if (!isShownByDefault && !isValueSet) {\n      return;\n    }\n    flagItemCustomization(isValueSet, label, menuGroup);\n  }, [isValueSet, menuGroup, label, flagItemCustomization, isShownByDefault]);\n\n  // Determine if the panel item's corresponding menu is being toggled and\n  // trigger appropriate callback if it is.\n  useEffect(() => {\n    // We check whether this item is currently registered as items rendered\n    // via fills can persist through the parent panel being remounted.\n    // See: https://github.com/WordPress/gutenberg/pull/45673\n    if (!isRegistered || isResetting || !hasMatchingPanel) {\n      return;\n    }\n    if (isMenuItemChecked && !isValueSet && !wasMenuItemChecked) {\n      onSelect?.();\n    }\n    if (!isMenuItemChecked && isValueSet && wasMenuItemChecked) {\n      onDeselect?.();\n    }\n  }, [hasMatchingPanel, isMenuItemChecked, isRegistered, isResetting, isValueSet, wasMenuItemChecked, onSelect, onDeselect]);\n\n  // The item is shown if it is a default control regardless of whether it\n  // has a value. Optional items are shown when they are checked or have\n  // a value.\n  const isShown = isShownByDefault ? menuItems?.[menuGroup]?.[label] !== undefined : isMenuItemChecked;\n  const shouldApplyPlaceholderStyles = shouldRenderPlaceholder && !isShown;\n  const classes = clsx(styles['tools-panel-item'], shouldApplyPlaceholderStyles && styles['tools-panel-item-placeholder'], !shouldApplyPlaceholderStyles && className, firstDisplayedItem === label && __experimentalFirstVisibleItemClass, lastDisplayedItem === label && __experimentalLastVisibleItemClass);\n  return {\n    ...otherProps,\n    isShown,\n    shouldRenderPlaceholder,\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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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useEvent } from '@wordpress/compose';\nimport { useCallback, useEffect, useLayoutEffect, useRef } from '@wordpress/element';\nimport styles from '../style.module.scss';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem } from '../../context';\nconst noop = () => {};\nexport function useToolsPanelItem(props) {\n  const {\n    className,\n    defaultShown,\n    hasValue,\n    isShownByDefault = false,\n    label,\n    panelId,\n    resetAllFilter = noop,\n    onDeselect,\n    onSelect,\n    onShownChange,\n    ...otherProps\n  } = useContextSystem(props, 'ToolsPanelItem');\n  const {\n    panelId: currentPanelId,\n    menuItems,\n    registerPanelItem,\n    deregisterPanelItem,\n    flagItemCustomization,\n    isResetting,\n    shouldRenderPlaceholderItems: shouldRenderPlaceholder,\n    firstDisplayedItem,\n    lastDisplayedItem,\n    __experimentalFirstVisibleItemClass,\n    __experimentalLastVisibleItemClass\n  } = useToolsPanelContext();\n\n  // `hasValue` is a new function every render. It can't use `useEvent`\n  // because the panel calls it while deriving the menu during render, which\n  // `useEvent` forbids, so it stays keyed on the panel it was captured for.\n  const hasValueCallback = useCallback(hasValue, [panelId]);\n  // `resetAllFilter` only runs from the reset handler, so a stable identity\n  // that always sees the latest props is both safe and more correct than\n  // freezing it per panel.\n  const resetAllFilterCallback = useEvent(resetAllFilter);\n\n  // `defaultShown` seeds an item's visibility when it registers, and is\n  // deliberately not reactive. Holding it in a ref keeps it out of the\n  // registration effect below, so a change on its own cannot deregister and\n  // re-register the item, which would discard the visibility the user chose\n  // from the menu.\n  //\n  // The ref still tracks the latest value, so that a re-registration caused\n  // by something else, such as `panelId` changing, seeds from the current\n  // preference rather than a stale one.\n  const defaultShownRef = useRef(defaultShown);\n  // Declared before the registration effect below so that it has already\n  // run by the time that effect reads the ref in the same commit.\n  useLayoutEffect(() => {\n    defaultShownRef.current = defaultShown;\n  });\n\n  // `onShownChange` is a new function every render. `useEvent` gives the item\n  // a stable callback to register, while the panel still invokes the latest.\n  const onShownChangeCallback = useEvent(onShownChange);\n\n  // A panel spanning a multi-selection has no id of its own, so every item\n  // belongs to it.\n  const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null;\n\n  // A layout effect so the item is registered before it renders, avoiding a\n  // glitch, and so a whole panel's worth of registrations land in one commit\n  // for React to batch.\n  // See: https://github.com/WordPress/gutenberg/issues/56470\n  useLayoutEffect(() => {\n    if (!hasMatchingPanel) {\n      return;\n    }\n    const item = {\n      defaultShown: defaultShownRef.current,\n      hasValue: hasValueCallback,\n      isShownByDefault,\n      label,\n      onShownChange: onShownChangeCallback,\n      panelId,\n      resetAllFilter: resetAllFilterCallback\n    };\n    registerPanelItem(item);\n\n    // Passing the registration back lets the panel ignore this cleanup if\n    // a replacement has already claimed the label, which happens when a\n    // panel switches while its items arrive through a Slot.\n    return () => {\n      deregisterPanelItem(label, item);\n    };\n  }, [deregisterPanelItem, hasMatchingPanel, hasValueCallback, isShownByDefault, label, onShownChangeCallback, panelId, registerPanelItem, resetAllFilterCallback]);\n  const menuGroup = isShownByDefault ? 'default' : 'optional';\n  const isMenuItemChecked = menuItems?.[menuGroup]?.[label];\n  const isRegistered = isMenuItemChecked !== undefined;\n  // Tracks the effect below rather than the render, so renders that leave\n  // the checked state alone can't desync it.\n  const wasMenuItemCheckedRef = useRef(undefined);\n  const isValueSet = hasValue();\n\n  // An optional item losing its value must not hide itself, so only default\n  // items report a value going away. Items belonging to another panel stay\n  // silent or they would leave an orphaned entry in this panel's menu.\n  //\n  // Shares the layout phase with registration above so it runs against an\n  // already registered item and batches with it.\n  useLayoutEffect(() => {\n    if (!hasMatchingPanel || !isShownByDefault && !isValueSet) {\n      return;\n    }\n    flagItemCustomization(isValueSet, label);\n  }, [hasMatchingPanel, isValueSet, label, flagItemCustomization, isShownByDefault]);\n\n  // Passive so consumer callbacks don't run before the browser has painted.\n  useEffect(() => {\n    const wasMenuItemChecked = wasMenuItemCheckedRef.current;\n    wasMenuItemCheckedRef.current = isMenuItemChecked;\n\n    // An item has no menu entry until it registers, so the first time\n    // through there is no previous checked state. Items that register\n    // already shown, because they have a value or `defaultShown` was set,\n    // must not look as though the user just selected them.\n    const wasRegistered = wasMenuItemChecked !== undefined;\n\n    // Items rendered via fills can outlive a remount of the panel they\n    // belong to, leaving them unregistered.\n    // See: https://github.com/WordPress/gutenberg/pull/45673\n    if (!isRegistered || !wasRegistered || isResetting || !hasMatchingPanel) {\n      return;\n    }\n    if (isMenuItemChecked && !isValueSet && !wasMenuItemChecked) {\n      onSelect?.();\n    }\n    if (!isMenuItemChecked && isValueSet && wasMenuItemChecked) {\n      onDeselect?.();\n    }\n  }, [hasMatchingPanel, isMenuItemChecked, isRegistered, isResetting, isValueSet, onSelect, onDeselect]);\n\n  // A default control shows whether or not it has a value; an optional one\n  // shows once checked.\n  const isShown = isShownByDefault ? isRegistered : isMenuItemChecked;\n  const shouldApplyPlaceholderStyles = shouldRenderPlaceholder && !isShown;\n  const classes = clsx(styles['tools-panel-item'], shouldApplyPlaceholderStyles && styles['tools-panel-item-placeholder'], !shouldApplyPlaceholderStyles && className, firstDisplayedItem === label && __experimentalFirstVisibleItemClass, lastDisplayedItem === label && __experimentalLastVisibleItemClass);\n  return {\n    ...otherProps,\n    isShown,\n    shouldRenderPlaceholder,\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/tree-grid/cell.mjs

@@ -1,13 +1,17 @@
 // packages/components/src/tree-grid/cell.tsx
-import { forwardRef } from "@wordpress/element";
+import { forwardRef, useRef } from "@wordpress/element";
 import TreeGridItem from "./item.mjs";
+import { useValidateTreeGridStructure } from "./use-validate-tree-grid-structure.mjs";
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 function UnforwardedTreeGridCell({
   children,
   withoutGridItem = false,
   ...props
 }, ref) {
+  const cellRef = useRef(null);
+  useValidateTreeGridStructure("TreeGridCell", cellRef);
   return /* @__PURE__ */ _jsx("td", {
+    ref: cellRef,
     ...props,
     role: "gridcell",
     children: withoutGridItem ? /* @__PURE__ */ _jsx(_Fragment, {

package/build-module/tree-grid/cell.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tree-grid/cell.tsx"],
-  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport TreeGridItem from './item';\nimport { Fragment as _Fragment, jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedTreeGridCell({\n  children,\n  withoutGridItem = false,\n  ...props\n}, ref) {\n  return /*#__PURE__*/_jsx(\"td\", {\n    ...props,\n    role: \"gridcell\",\n    children: withoutGridItem ? /*#__PURE__*/_jsx(_Fragment, {\n      children: typeof children === 'function' ? children({\n        ...props,\n        ref\n      }) : children\n    }) : /*#__PURE__*/_jsx(TreeGridItem, {\n      ref: ref,\n      children: children\n    })\n  });\n}\n\n/**\n * `TreeGridCell` is used to create a tree hierarchy.\n * It is not a visually styled component, but instead helps with adding\n * keyboard navigation and roving tab index behaviors to tree grid structures.\n *\n * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}\n */\nexport const TreeGridCell = forwardRef(UnforwardedTreeGridCell);\nTreeGridCell.displayName = 'TreeGridCell';\nexport default TreeGridCell;"],
-  "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,OAAO,kBAAkB;AACzB,SAAS,YAAY,WAAW,OAAO,YAAY;AACnD,SAAS,wBAAwB;AAAA,EAC/B;AAAA,EACA,kBAAkB;AAAA,EAClB,GAAG;AACL,GAAG,KAAK;AACN,SAAoB,qBAAK,MAAM;AAAA,IAC7B,GAAG;AAAA,IACH,MAAM;AAAA,IACN,UAAU,kBAA+B,qBAAK,WAAW;AAAA,MACvD,UAAU,OAAO,aAAa,aAAa,SAAS;AAAA,QAClD,GAAG;AAAA,QACH;AAAA,MACF,CAAC,IAAI;AAAA,IACP,CAAC,IAAiB,qBAAK,cAAc;AAAA,MACnC;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AASO,IAAM,eAAe,WAAW,uBAAuB;AAC9D,aAAa,cAAc;AAC3B,IAAO,eAAQ;",
+  "sourcesContent": ["import { forwardRef, useRef } from '@wordpress/element';\nimport TreeGridItem from './item';\nimport { useValidateTreeGridStructure } from './use-validate-tree-grid-structure';\nimport { Fragment as _Fragment, jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedTreeGridCell({\n  children,\n  withoutGridItem = false,\n  ...props\n}, ref) {\n  const cellRef = useRef(null);\n  useValidateTreeGridStructure('TreeGridCell', cellRef);\n  return /*#__PURE__*/_jsx(\"td\", {\n    ref: cellRef,\n    ...props,\n    role: \"gridcell\",\n    children: withoutGridItem ? /*#__PURE__*/_jsx(_Fragment, {\n      children: typeof children === 'function' ? children({\n        ...props,\n        ref\n      }) : children\n    }) : /*#__PURE__*/_jsx(TreeGridItem, {\n      ref: ref,\n      children: children\n    })\n  });\n}\n\n/**\n * `TreeGridCell` is used to create a tree hierarchy.\n * It is not a visually styled component, but instead helps with adding\n * keyboard navigation and roving tab index behaviors to tree grid structures.\n *\n * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}\n */\nexport const TreeGridCell = forwardRef(UnforwardedTreeGridCell);\nTreeGridCell.displayName = 'TreeGridCell';\nexport default TreeGridCell;"],
+  "mappings": ";AAAA,SAAS,YAAY,cAAc;AACnC,OAAO,kBAAkB;AACzB,SAAS,oCAAoC;AAC7C,SAAS,YAAY,WAAW,OAAO,YAAY;AACnD,SAAS,wBAAwB;AAAA,EAC/B;AAAA,EACA,kBAAkB;AAAA,EAClB,GAAG;AACL,GAAG,KAAK;AACN,QAAM,UAAU,OAAO,IAAI;AAC3B,+BAA6B,gBAAgB,OAAO;AACpD,SAAoB,qBAAK,MAAM;AAAA,IAC7B,KAAK;AAAA,IACL,GAAG;AAAA,IACH,MAAM;AAAA,IACN,UAAU,kBAA+B,qBAAK,WAAW;AAAA,MACvD,UAAU,OAAO,aAAa,aAAa,SAAS;AAAA,QAClD,GAAG;AAAA,QACH;AAAA,MACF,CAAC,IAAI;AAAA,IACP,CAAC,IAAiB,qBAAK,cAAc;AAAA,MACnC;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AASO,IAAM,eAAe,WAAW,uBAAuB;AAC9D,aAAa,cAAc;AAC3B,IAAO,eAAQ;",
   "names": []
 }

package/build-module/tree-grid/roving-tab-index-item.mjs

@@ -9,10 +9,14 @@ var RovingTabIndexItem = forwardRef(function UnforwardedRovingTabIndexItem({
 }, forwardedRef) {
   const localRef = useRef(null);
   const ref = forwardedRef || localRef;
+  const context = useRovingTabIndexContext();
+  if (!context) {
+    throw new Error("TreeGridItem can only be rendered inside a TreeGrid component.");
+  }
   const {
     lastFocusedElement,
     setLastFocusedElement
-  } = useRovingTabIndexContext();
+  } = context;
   let tabIndex;
   if (lastFocusedElement) {
     tabIndex = lastFocusedElement === // TODO: The original implementation simply used `ref.current` here, assuming

package/build-module/tree-grid/roving-tab-index-item.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tree-grid/roving-tab-index-item.tsx"],
-  "sourcesContent": ["import { useRef, forwardRef } from '@wordpress/element';\nimport { useRovingTabIndexContext } from './roving-tab-index-context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const RovingTabIndexItem = forwardRef(function UnforwardedRovingTabIndexItem({\n  children,\n  as: Component,\n  ...props\n}, forwardedRef) {\n  const localRef = useRef(null);\n  const ref = forwardedRef || localRef;\n  // @ts-expect-error - We actually want to throw an error if this is undefined.\n  const {\n    lastFocusedElement,\n    setLastFocusedElement\n  } = useRovingTabIndexContext();\n  let tabIndex;\n  if (lastFocusedElement) {\n    tabIndex = lastFocusedElement === (\n    // TODO: The original implementation simply used `ref.current` here, assuming\n    // that a forwarded ref would always be an object, which is not necessarily true.\n    // This workaround maintains the original runtime behavior in a type-safe way,\n    // but should be revisited.\n    'current' in ref ? ref.current : undefined) ? 0 : -1;\n  }\n  const onFocus = event => setLastFocusedElement?.(event.target);\n  const allProps = {\n    ref,\n    tabIndex,\n    onFocus,\n    ...props\n  };\n  if (typeof children === 'function') {\n    return children(allProps);\n  }\n  if (!Component) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(Component, {\n    ...allProps,\n    children: children\n  });\n});\nRovingTabIndexItem.displayName = 'RovingTabIndexItem';\nexport default RovingTabIndexItem;"],
-  "mappings": ";AAAA,SAAS,QAAQ,kBAAkB;AACnC,SAAS,gCAAgC;AACzC,SAAS,OAAO,YAAY;AACrB,IAAM,qBAAqB,WAAW,SAAS,8BAA8B;AAAA,EAClF;AAAA,EACA,IAAI;AAAA,EACJ,GAAG;AACL,GAAG,cAAc;AACf,QAAM,WAAW,OAAO,IAAI;AAC5B,QAAM,MAAM,gBAAgB;AAE5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,yBAAyB;AAC7B,MAAI;AACJ,MAAI,oBAAoB;AACtB,eAAW;AAAA;AAAA;AAAA;AAAA,KAKX,aAAa,MAAM,IAAI,UAAU,UAAa,IAAI;AAAA,EACpD;AACA,QAAM,UAAU,WAAS,wBAAwB,MAAM,MAAM;AAC7D,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL;AACA,MAAI,OAAO,aAAa,YAAY;AAClC,WAAO,SAAS,QAAQ;AAAA,EAC1B;AACA,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AACA,SAAoB,qBAAK,WAAW;AAAA,IAClC,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;AACD,mBAAmB,cAAc;AACjC,IAAO,gCAAQ;",
+  "sourcesContent": ["import { useRef, forwardRef } from '@wordpress/element';\nimport { useRovingTabIndexContext } from './roving-tab-index-context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const RovingTabIndexItem = forwardRef(function UnforwardedRovingTabIndexItem({\n  children,\n  as: Component,\n  ...props\n}, forwardedRef) {\n  const localRef = useRef(null);\n  const ref = forwardedRef || localRef;\n  const context = useRovingTabIndexContext();\n  if (!context) {\n    throw new Error('TreeGridItem can only be rendered inside a TreeGrid component.');\n  }\n  const {\n    lastFocusedElement,\n    setLastFocusedElement\n  } = context;\n  let tabIndex;\n  if (lastFocusedElement) {\n    tabIndex = lastFocusedElement === (\n    // TODO: The original implementation simply used `ref.current` here, assuming\n    // that a forwarded ref would always be an object, which is not necessarily true.\n    // This workaround maintains the original runtime behavior in a type-safe way,\n    // but should be revisited.\n    'current' in ref ? ref.current : undefined) ? 0 : -1;\n  }\n  const onFocus = event => setLastFocusedElement?.(event.target);\n  const allProps = {\n    ref,\n    tabIndex,\n    onFocus,\n    ...props\n  };\n  if (typeof children === 'function') {\n    return children(allProps);\n  }\n  if (!Component) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(Component, {\n    ...allProps,\n    children: children\n  });\n});\nRovingTabIndexItem.displayName = 'RovingTabIndexItem';\nexport default RovingTabIndexItem;"],
+  "mappings": ";AAAA,SAAS,QAAQ,kBAAkB;AACnC,SAAS,gCAAgC;AACzC,SAAS,OAAO,YAAY;AACrB,IAAM,qBAAqB,WAAW,SAAS,8BAA8B;AAAA,EAClF;AAAA,EACA,IAAI;AAAA,EACJ,GAAG;AACL,GAAG,cAAc;AACf,QAAM,WAAW,OAAO,IAAI;AAC5B,QAAM,MAAM,gBAAgB;AAC5B,QAAM,UAAU,yBAAyB;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,gEAAgE;AAAA,EAClF;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,MAAI;AACJ,MAAI,oBAAoB;AACtB,eAAW;AAAA;AAAA;AAAA;AAAA,KAKX,aAAa,MAAM,IAAI,UAAU,UAAa,IAAI;AAAA,EACpD;AACA,QAAM,UAAU,WAAS,wBAAwB,MAAM,MAAM;AAC7D,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL;AACA,MAAI,OAAO,aAAa,YAAY;AAClC,WAAO,SAAS,QAAQ;AAAA,EAC1B;AACA,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AACA,SAAoB,qBAAK,WAAW;AAAA,IAClC,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;AACD,mBAAmB,cAAc;AACjC,IAAO,gCAAQ;",
   "names": []
 }

package/build-module/tree-grid/row.mjs

@@ -1,5 +1,7 @@
 // packages/components/src/tree-grid/row.tsx
-import { forwardRef } from "@wordpress/element";
+import { useMergeRefs } from "@wordpress/compose";
+import { forwardRef, useRef } from "@wordpress/element";
+import { useValidateTreeGridStructure } from "./use-validate-tree-grid-structure.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnforwardedTreeGridRow({
   children,
@@ -9,9 +11,12 @@ function UnforwardedTreeGridRow({
   isExpanded,
   ...props
 }, ref) {
+  const rowRef = useRef(null);
+  const refs = useMergeRefs([rowRef, ref]);
+  useValidateTreeGridStructure("TreeGridRow", rowRef);
   return /* @__PURE__ */ _jsx("tr", {
     ...props,
-    ref,
+    ref: refs,
     role: "row",
     "aria-level": level,
     "aria-posinset": positionInSet,

package/build-module/tree-grid/row.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tree-grid/row.tsx"],
-  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedTreeGridRow({\n  children,\n  level,\n  positionInSet,\n  setSize,\n  isExpanded,\n  ...props\n}, ref) {\n  return /*#__PURE__*/_jsx(\"tr\", {\n    ...props,\n    ref: ref,\n    role: \"row\",\n    \"aria-level\": level,\n    \"aria-posinset\": positionInSet,\n    \"aria-setsize\": setSize,\n    \"aria-expanded\": isExpanded,\n    children: children\n  });\n}\n\n/**\n * `TreeGridRow` is used to create a tree hierarchy.\n * It is not a visually styled component, but instead helps with adding\n * keyboard navigation and roving tab index behaviors to tree grid structures.\n *\n * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}\n */\nexport const TreeGridRow = forwardRef(UnforwardedTreeGridRow);\nTreeGridRow.displayName = 'TreeGridRow';\nexport default TreeGridRow;"],
-  "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,SAAS,OAAO,YAAY;AAC5B,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,SAAoB,qBAAK,MAAM;AAAA,IAC7B,GAAG;AAAA,IACH;AAAA,IACA,MAAM;AAAA,IACN,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,EACF,CAAC;AACH;AASO,IAAM,cAAc,WAAW,sBAAsB;AAC5D,YAAY,cAAc;AAC1B,IAAO,cAAQ;",
+  "sourcesContent": ["import { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useValidateTreeGridStructure } from './use-validate-tree-grid-structure';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedTreeGridRow({\n  children,\n  level,\n  positionInSet,\n  setSize,\n  isExpanded,\n  ...props\n}, ref) {\n  const rowRef = useRef(null);\n  const refs = useMergeRefs([rowRef, ref]);\n  useValidateTreeGridStructure('TreeGridRow', rowRef);\n  return /*#__PURE__*/_jsx(\"tr\", {\n    ...props,\n    ref: refs,\n    role: \"row\",\n    \"aria-level\": level,\n    \"aria-posinset\": positionInSet,\n    \"aria-setsize\": setSize,\n    \"aria-expanded\": isExpanded,\n    children: children\n  });\n}\n\n/**\n * `TreeGridRow` is used to create a tree hierarchy.\n * It is not a visually styled component, but instead helps with adding\n * keyboard navigation and roving tab index behaviors to tree grid structures.\n *\n * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}\n */\nexport const TreeGridRow = forwardRef(UnforwardedTreeGridRow);\nTreeGridRow.displayName = 'TreeGridRow';\nexport default TreeGridRow;"],
+  "mappings": ";AAAA,SAAS,oBAAoB;AAC7B,SAAS,YAAY,cAAc;AACnC,SAAS,oCAAoC;AAC7C,SAAS,OAAO,YAAY;AAC5B,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM,SAAS,OAAO,IAAI;AAC1B,QAAM,OAAO,aAAa,CAAC,QAAQ,GAAG,CAAC;AACvC,+BAA6B,eAAe,MAAM;AAClD,SAAoB,qBAAK,MAAM;AAAA,IAC7B,GAAG;AAAA,IACH,KAAK;AAAA,IACL,MAAM;AAAA,IACN,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,EACF,CAAC;AACH;AASO,IAAM,cAAc,WAAW,sBAAsB;AAC5D,YAAY,cAAc;AAC1B,IAAO,cAAQ;",
   "names": []
 }

package/build-module/tree-grid/use-validate-tree-grid-structure.mjs

@@ -0,0 +1,56 @@
+// packages/components/src/tree-grid/use-validate-tree-grid-structure.ts
+import { useEffect } from "@wordpress/element";
+var ROW_SELECTOR = 'tr:not([role]), [role="row"]';
+var TREE_GRID_SELECTOR = '[role="treegrid"]';
+function getAriaOwners(element) {
+  if (!element.id) {
+    return [];
+  }
+  const escapedId = element.id.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
+  return Array.from(element.ownerDocument.querySelectorAll(`[aria-owns~="${escapedId}"]`));
+}
+function isContainedInOrOwnedBy(element, selector, visited = /* @__PURE__ */ new Set()) {
+  if (visited.has(element)) {
+    return false;
+  }
+  visited.add(element);
+  if (element.parentElement?.closest(selector)) {
+    return true;
+  }
+  const hasValidOwner = getAriaOwners(element).some((owner) => owner.matches(selector) || isContainedInOrOwnedBy(owner, selector, visited));
+  if (hasValidOwner) {
+    return true;
+  }
+  return element.parentElement ? isContainedInOrOwnedBy(element.parentElement, selector, visited) : false;
+}
+function isOwnedByRowInTreeGrid(element, visited = /* @__PURE__ */ new Set()) {
+  if (visited.has(element)) {
+    return false;
+  }
+  visited.add(element);
+  const hasValidOwner = getAriaOwners(element).some((owner) => {
+    const row = owner.matches(ROW_SELECTOR) ? owner : owner.closest(ROW_SELECTOR);
+    return row ? isContainedInOrOwnedBy(row, TREE_GRID_SELECTOR) : isOwnedByRowInTreeGrid(owner, visited);
+  });
+  if (hasValidOwner) {
+    return true;
+  }
+  return element.parentElement ? isOwnedByRowInTreeGrid(element.parentElement, visited) : false;
+}
+function useValidateTreeGridStructure(componentName, elementRef) {
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) {
+      return;
+    }
+    const row = element.parentElement?.closest(ROW_SELECTOR);
+    const hasValidStructure = componentName === "TreeGridRow" ? isContainedInOrOwnedBy(element, TREE_GRID_SELECTOR) : row && isContainedInOrOwnedBy(row, TREE_GRID_SELECTOR) || isOwnedByRowInTreeGrid(element);
+    if (!hasValidStructure) {
+      throw new Error(componentName === "TreeGridRow" ? 'TreeGridRow must be rendered inside an element with role="treegrid".' : 'TreeGridCell must be rendered as a cell in a row that belongs to an element with role="treegrid".');
+    }
+  }, [componentName, elementRef]);
+}
+export {
+  useValidateTreeGridStructure
+};
+//# sourceMappingURL=use-validate-tree-grid-structure.mjs.map

package/build-module/tree-grid/use-validate-tree-grid-structure.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tree-grid/use-validate-tree-grid-structure.ts"],
+  "sourcesContent": ["import { useEffect } from '@wordpress/element';\nconst ROW_SELECTOR = 'tr:not([role]), [role=\"row\"]';\nconst TREE_GRID_SELECTOR = '[role=\"treegrid\"]';\nfunction getAriaOwners(element) {\n  if (!element.id) {\n    return [];\n  }\n  const escapedId = element.id.replaceAll('\\\\', '\\\\\\\\').replaceAll('\"', '\\\\\"');\n  return Array.from(element.ownerDocument.querySelectorAll(`[aria-owns~=\"${escapedId}\"]`));\n}\nfunction isContainedInOrOwnedBy(element, selector, visited = new Set()) {\n  if (visited.has(element)) {\n    return false;\n  }\n  visited.add(element);\n  if (element.parentElement?.closest(selector)) {\n    return true;\n  }\n  const hasValidOwner = getAriaOwners(element).some(owner => owner.matches(selector) || isContainedInOrOwnedBy(owner, selector, visited));\n  if (hasValidOwner) {\n    return true;\n  }\n  return element.parentElement ? isContainedInOrOwnedBy(element.parentElement, selector, visited) : false;\n}\nfunction isOwnedByRowInTreeGrid(element, visited = new Set()) {\n  if (visited.has(element)) {\n    return false;\n  }\n  visited.add(element);\n  const hasValidOwner = getAriaOwners(element).some(owner => {\n    const row = owner.matches(ROW_SELECTOR) ? owner : owner.closest(ROW_SELECTOR);\n    return row ? isContainedInOrOwnedBy(row, TREE_GRID_SELECTOR) : isOwnedByRowInTreeGrid(owner, visited);\n  });\n  if (hasValidOwner) {\n    return true;\n  }\n  return element.parentElement ? isOwnedByRowInTreeGrid(element.parentElement, visited) : false;\n}\nexport function useValidateTreeGridStructure(componentName, elementRef) {\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) {\n      return;\n    }\n    const row = element.parentElement?.closest(ROW_SELECTOR);\n    const hasValidStructure = componentName === 'TreeGridRow' ? isContainedInOrOwnedBy(element, TREE_GRID_SELECTOR) : row && isContainedInOrOwnedBy(row, TREE_GRID_SELECTOR) || isOwnedByRowInTreeGrid(element);\n    if (!hasValidStructure) {\n      throw new Error(componentName === 'TreeGridRow' ? 'TreeGridRow must be rendered inside an element with role=\"treegrid\".' : 'TreeGridCell must be rendered as a cell in a row that belongs to an element with role=\"treegrid\".');\n    }\n  }, [componentName, elementRef]);\n}"],
+  "mappings": ";AAAA,SAAS,iBAAiB;AAC1B,IAAM,eAAe;AACrB,IAAM,qBAAqB;AAC3B,SAAS,cAAc,SAAS;AAC9B,MAAI,CAAC,QAAQ,IAAI;AACf,WAAO,CAAC;AAAA,EACV;AACA,QAAM,YAAY,QAAQ,GAAG,WAAW,MAAM,MAAM,EAAE,WAAW,KAAK,KAAK;AAC3E,SAAO,MAAM,KAAK,QAAQ,cAAc,iBAAiB,gBAAgB,SAAS,IAAI,CAAC;AACzF;AACA,SAAS,uBAAuB,SAAS,UAAU,UAAU,oBAAI,IAAI,GAAG;AACtE,MAAI,QAAQ,IAAI,OAAO,GAAG;AACxB,WAAO;AAAA,EACT;AACA,UAAQ,IAAI,OAAO;AACnB,MAAI,QAAQ,eAAe,QAAQ,QAAQ,GAAG;AAC5C,WAAO;AAAA,EACT;AACA,QAAM,gBAAgB,cAAc,OAAO,EAAE,KAAK,WAAS,MAAM,QAAQ,QAAQ,KAAK,uBAAuB,OAAO,UAAU,OAAO,CAAC;AACtI,MAAI,eAAe;AACjB,WAAO;AAAA,EACT;AACA,SAAO,QAAQ,gBAAgB,uBAAuB,QAAQ,eAAe,UAAU,OAAO,IAAI;AACpG;AACA,SAAS,uBAAuB,SAAS,UAAU,oBAAI,IAAI,GAAG;AAC5D,MAAI,QAAQ,IAAI,OAAO,GAAG;AACxB,WAAO;AAAA,EACT;AACA,UAAQ,IAAI,OAAO;AACnB,QAAM,gBAAgB,cAAc,OAAO,EAAE,KAAK,WAAS;AACzD,UAAM,MAAM,MAAM,QAAQ,YAAY,IAAI,QAAQ,MAAM,QAAQ,YAAY;AAC5E,WAAO,MAAM,uBAAuB,KAAK,kBAAkB,IAAI,uBAAuB,OAAO,OAAO;AAAA,EACtG,CAAC;AACD,MAAI,eAAe;AACjB,WAAO;AAAA,EACT;AACA,SAAO,QAAQ,gBAAgB,uBAAuB,QAAQ,eAAe,OAAO,IAAI;AAC1F;AACO,SAAS,6BAA6B,eAAe,YAAY;AACtE,YAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AACA,UAAM,MAAM,QAAQ,eAAe,QAAQ,YAAY;AACvD,UAAM,oBAAoB,kBAAkB,gBAAgB,uBAAuB,SAAS,kBAAkB,IAAI,OAAO,uBAAuB,KAAK,kBAAkB,KAAK,uBAAuB,OAAO;AAC1M,QAAI,CAAC,mBAAmB;AACtB,YAAM,IAAI,MAAM,kBAAkB,gBAAgB,yEAAyE,mGAAmG;AAAA,IAChO;AAAA,EACF,GAAG,CAAC,eAAe,UAAU,CAAC;AAChC;",
+  "names": []
+}

package/build-module/utils/colors-values.mjs

@@ -48,8 +48,9 @@ var UI = {
   border: THEME.gray[600],
   borderHover: THEME.gray[700],
   borderFocus: THEME.accent,
-  borderDisabled: THEME.gray[400],
-  textDisabled: THEME.gray[600],
+  // The gray ramp above has no disabled step to map these through.
+  borderDisabled: `var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb)`,
+  textDisabled: `var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d)`,
   // Matches @wordpress/base-styles
   darkGrayPlaceholder: `color-mix(in srgb, ${THEME.foreground}, transparent 38%)`,
   lightGrayPlaceholder: `color-mix(in srgb, ${THEME.background}, transparent 35%)`

package/build-module/utils/colors-values.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/colors-values.js"],
-  "sourcesContent": ["/* eslint-disable @wordpress/no-ds-tokens -- This file is the JS counterpart of\n   theme-variables.scss and the package's single mapping to the design system.\n   The rule guards against bare `--wpds-*` references, which the build can't\n   inject fallbacks into for Emotion/JS files; here every reference carries an\n   explicit fallback, so that concern doesn't apply.\n\n   IMPORTANT: because this file's source contains `--wpds-` text, the\n   design-system fallback build plugin claims it (it matches any file whose\n   source includes `--wpds-`, comments included) and, in doing so, displaces\n   the Emotion transform for this file. That is harmless ONLY because this file\n   holds plain value constants and no Emotion `css`/styled component selectors.\n   Do not add any here: a co-located component selector would silently fail to\n   compile and break the build, with no lint signal (see #79245). Keep this\n   file selector-free — define styles elsewhere and consume these constants. */\n\nconst white = '#fff';\n\n// Matches the grays in @wordpress/base-styles\nconst GRAY = {\n\t900: '#1e1e1e',\n\t800: '#2f2f2f',\n\t/** Meets 4.6:1 text contrast against white. */\n\t700: '#757575',\n\t/** Meets 3:1 UI or large text contrast against white. */\n\t600: '#949494',\n\t400: '#ccc',\n\t/** Used for most borders. */\n\t300: '#ddd',\n\t/** Used sparingly for light borders. */\n\t200: '#e0e0e0',\n\t/** Used for light gray backgrounds. */\n\t100: '#f0f0f0',\n};\n\n// Matches @wordpress/base-styles\nconst ALERT = {\n\tyellow: '#f0b849',\n\tred: '#d94f4f',\n\tgreen: '#4ab866',\n};\n\n// Should match packages/components/src/utils/theme-variables.scss.\n//\n// Mirrors the Sass structure: each non-accent value resolves through a design\n// system (`--wpds-*`) token, then a hardcoded fallback. The hardcoded values\n// match what the design-system fallback plugin injects into the Sass version,\n// so JS behaves consistently with the Sass variables. Keep both the token\n// references and the fallbacks in sync with the Sass version.\nconst THEME = {\n\taccent: `var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))`,\n\taccentDarker10: `var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))`,\n\taccentDarker20: `var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6))`,\n\t/** Used when placing text on the accent color. */\n\taccentInverted: `var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff))`,\n\n\tbackground: `var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))`,\n\n\tforeground: `var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,\n\t/** Used when placing text on the foreground color. */\n\tforegroundInverted: `var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc))`,\n\n\tgray: {\n\t\t/** @deprecated Use `COLORS.theme.foreground` instead. */\n\t\t900: `var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,\n\t\t800: `var(--wp-components-color-gray-800, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,\n\t\t700: `var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070))`,\n\t\t600: `var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d))`,\n\t\t400: `var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d))`,\n\t\t300: `var(--wp-components-color-gray-300, var(--wpds-color-stroke-surface-neutral, #dbdbdb))`,\n\t\t200: `var(--wp-components-color-gray-200, var(--wpds-color-stroke-surface-neutral, #dbdbdb))`,\n\t\t100: `var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc))`,\n\t},\n};\n\n/* eslint-enable @wordpress/no-ds-tokens */\n\nconst UI = {\n\tbackground: THEME.background,\n\tbackgroundDisabled: THEME.gray[ 100 ],\n\tborder: THEME.gray[ 600 ],\n\tborderHover: THEME.gray[ 700 ],\n\tborderFocus: THEME.accent,\n\tborderDisabled: THEME.gray[ 400 ],\n\ttextDisabled: THEME.gray[ 600 ],\n\n\t// Matches @wordpress/base-styles\n\tdarkGrayPlaceholder: `color-mix(in srgb, ${ THEME.foreground }, transparent 38%)`,\n\tlightGrayPlaceholder: `color-mix(in srgb, ${ THEME.background }, transparent 35%)`,\n};\n\nexport const COLORS = Object.freeze( {\n\t/**\n\t * The main gray color object.\n\t *\n\t * @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`.\n\t */\n\tgray: GRAY, // TODO: Stop exporting this when everything is migrated to `theme` or `ui`\n\t/**\n\t * @deprecated Prefer theme-ready variables in `COLORS.theme`.\n\t */\n\twhite,\n\talert: ALERT,\n\t/**\n\t * Theme-ready variables with fallbacks.\n\t *\n\t * Prefer semantic aliases in `COLORS.ui` when applicable.\n\t */\n\ttheme: THEME,\n\t/**\n\t * Semantic aliases (prefer these over raw variables when applicable).\n\t */\n\tui: UI,\n} );\n\nexport default COLORS;\n"],
-  "mappings": ";AAeA,IAAM,QAAQ;AAGd,IAAM,OAAO;AAAA,EACZ,KAAK;AAAA,EACL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA,EACL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA;AAAA,EAEL,KAAK;AACN;AAGA,IAAM,QAAQ;AAAA,EACb,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AACR;AASA,IAAM,QAAQ;AAAA,EACb,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,gBAAgB;AAAA;AAAA,EAEhB,gBAAgB;AAAA,EAEhB,YAAY;AAAA,EAEZ,YAAY;AAAA;AAAA,EAEZ,oBAAoB;AAAA,EAEpB,MAAM;AAAA;AAAA,IAEL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACN;AACD;AAIA,IAAM,KAAK;AAAA,EACV,YAAY,MAAM;AAAA,EAClB,oBAAoB,MAAM,KAAM,GAAI;AAAA,EACpC,QAAQ,MAAM,KAAM,GAAI;AAAA,EACxB,aAAa,MAAM,KAAM,GAAI;AAAA,EAC7B,aAAa,MAAM;AAAA,EACnB,gBAAgB,MAAM,KAAM,GAAI;AAAA,EAChC,cAAc,MAAM,KAAM,GAAI;AAAA;AAAA,EAG9B,qBAAqB,sBAAuB,MAAM,UAAW;AAAA,EAC7D,sBAAsB,sBAAuB,MAAM,UAAW;AAC/D;AAEO,IAAM,SAAS,OAAO,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMpC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAIN;AAAA,EACA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMP,OAAO;AAAA;AAAA;AAAA;AAAA,EAIP,IAAI;AACL,CAAE;AAEF,IAAO,wBAAQ;",
+  "sourcesContent": ["/* eslint-disable @wordpress/no-ds-tokens -- This file is the JS counterpart of\n   theme-variables.scss and the package's single mapping to the design system.\n   The rule guards against bare `--wpds-*` references, which the build can't\n   inject fallbacks into for Emotion/JS files; here every reference carries an\n   explicit fallback, so that concern doesn't apply.\n\n   IMPORTANT: because this file's source contains `--wpds-` text, the\n   design-system fallback build plugin claims it (it matches any file whose\n   source includes `--wpds-`, comments included) and, in doing so, displaces\n   the Emotion transform for this file. That is harmless ONLY because this file\n   holds plain value constants and no Emotion `css`/styled component selectors.\n   Do not add any here: a co-located component selector would silently fail to\n   compile and break the build, with no lint signal (see #79245). Keep this\n   file selector-free — define styles elsewhere and consume these constants. */\n\nconst white = '#fff';\n\n// Matches the grays in @wordpress/base-styles\nconst GRAY = {\n\t900: '#1e1e1e',\n\t800: '#2f2f2f',\n\t/** Meets 4.6:1 text contrast against white. */\n\t700: '#757575',\n\t/** Meets 3:1 UI or large text contrast against white. */\n\t600: '#949494',\n\t400: '#ccc',\n\t/** Used for most borders. */\n\t300: '#ddd',\n\t/** Used sparingly for light borders. */\n\t200: '#e0e0e0',\n\t/** Used for light gray backgrounds. */\n\t100: '#f0f0f0',\n};\n\n// Matches @wordpress/base-styles\nconst ALERT = {\n\tyellow: '#f0b849',\n\tred: '#d94f4f',\n\tgreen: '#4ab866',\n};\n\n// Should match packages/components/src/utils/theme-variables.scss.\n//\n// Mirrors the Sass structure: each non-accent value resolves through a design\n// system (`--wpds-*`) token, then a hardcoded fallback. The hardcoded values\n// match what the design-system fallback plugin injects into the Sass version,\n// so JS behaves consistently with the Sass variables. Keep both the token\n// references and the fallbacks in sync with the Sass version.\nconst THEME = {\n\taccent: `var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))`,\n\taccentDarker10: `var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))`,\n\taccentDarker20: `var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6))`,\n\t/** Used when placing text on the accent color. */\n\taccentInverted: `var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff))`,\n\n\tbackground: `var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))`,\n\n\tforeground: `var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,\n\t/** Used when placing text on the foreground color. */\n\tforegroundInverted: `var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc))`,\n\n\tgray: {\n\t\t/** @deprecated Use `COLORS.theme.foreground` instead. */\n\t\t900: `var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,\n\t\t800: `var(--wp-components-color-gray-800, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,\n\t\t700: `var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070))`,\n\t\t600: `var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d))`,\n\t\t400: `var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d))`,\n\t\t300: `var(--wp-components-color-gray-300, var(--wpds-color-stroke-surface-neutral, #dbdbdb))`,\n\t\t200: `var(--wp-components-color-gray-200, var(--wpds-color-stroke-surface-neutral, #dbdbdb))`,\n\t\t100: `var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc))`,\n\t},\n};\n\nconst UI = {\n\tbackground: THEME.background,\n\tbackgroundDisabled: THEME.gray[ 100 ],\n\tborder: THEME.gray[ 600 ],\n\tborderHover: THEME.gray[ 700 ],\n\tborderFocus: THEME.accent,\n\t// The gray ramp above has no disabled step to map these through.\n\tborderDisabled: `var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb)`,\n\ttextDisabled: `var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d)`,\n\n\t// Matches @wordpress/base-styles\n\tdarkGrayPlaceholder: `color-mix(in srgb, ${ THEME.foreground }, transparent 38%)`,\n\tlightGrayPlaceholder: `color-mix(in srgb, ${ THEME.background }, transparent 35%)`,\n};\n\n/* eslint-enable @wordpress/no-ds-tokens */\n\nexport const COLORS = Object.freeze( {\n\t/**\n\t * The main gray color object.\n\t *\n\t * @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`.\n\t */\n\tgray: GRAY, // TODO: Stop exporting this when everything is migrated to `theme` or `ui`\n\t/**\n\t * @deprecated Prefer theme-ready variables in `COLORS.theme`.\n\t */\n\twhite,\n\talert: ALERT,\n\t/**\n\t * Theme-ready variables with fallbacks.\n\t *\n\t * Prefer semantic aliases in `COLORS.ui` when applicable.\n\t */\n\ttheme: THEME,\n\t/**\n\t * Semantic aliases (prefer these over raw variables when applicable).\n\t */\n\tui: UI,\n} );\n\nexport default COLORS;\n"],
+  "mappings": ";AAeA,IAAM,QAAQ;AAGd,IAAM,OAAO;AAAA,EACZ,KAAK;AAAA,EACL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA,EACL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA;AAAA,EAEL,KAAK;AACN;AAGA,IAAM,QAAQ;AAAA,EACb,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AACR;AASA,IAAM,QAAQ;AAAA,EACb,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,gBAAgB;AAAA;AAAA,EAEhB,gBAAgB;AAAA,EAEhB,YAAY;AAAA,EAEZ,YAAY;AAAA;AAAA,EAEZ,oBAAoB;AAAA,EAEpB,MAAM;AAAA;AAAA,IAEL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACN;AACD;AAEA,IAAM,KAAK;AAAA,EACV,YAAY,MAAM;AAAA,EAClB,oBAAoB,MAAM,KAAM,GAAI;AAAA,EACpC,QAAQ,MAAM,KAAM,GAAI;AAAA,EACxB,aAAa,MAAM,KAAM,GAAI;AAAA,EAC7B,aAAa,MAAM;AAAA;AAAA,EAEnB,gBAAgB;AAAA,EAChB,cAAc;AAAA;AAAA,EAGd,qBAAqB,sBAAuB,MAAM,UAAW;AAAA,EAC7D,sBAAsB,sBAAuB,MAAM,UAAW;AAC/D;AAIO,IAAM,SAAS,OAAO,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMpC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAIN;AAAA,EACA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMP,OAAO;AAAA;AAAA;AAAA;AAAA,EAIP,IAAI;AACL,CAAE;AAEF,IAAO,wBAAQ;",
   "names": []
 }

package/build-module/utils/config-values.mjs

@@ -16,9 +16,6 @@ var CONTROL_PROPS = {
 };
 var config_values_default = Object.assign({}, CONTROL_PROPS, {
   colorDivider: "rgba(0, 0, 0, 0.1)",
-  colorScrollbarThumb: "rgba(0, 0, 0, 0.2)",
-  colorScrollbarThumbHover: "rgba(0, 0, 0, 0.5)",
-  colorScrollbarTrack: "rgba(0, 0, 0, 0.04)",
   elevationIntensity: 1,
   radiusXSmall: "1px",
   radiusSmall: "2px",