@wordpress/components 32.0.1-next.ba3aee3a2.0 → 32.0.1-next.v.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (121) hide show
  1. package/CHANGELOG.md +3 -1
  2. package/build/context/context-system-provider.cjs +1 -1
  3. package/build/context/context-system-provider.cjs.map +2 -2
  4. package/build/duotone-picker/duotone-picker.cjs +1 -1
  5. package/build/duotone-picker/duotone-picker.cjs.map +1 -1
  6. package/build/higher-order/with-fallback-styles/index.cjs +1 -1
  7. package/build/higher-order/with-fallback-styles/index.cjs.map +1 -1
  8. package/build/menu/popover.cjs +1 -0
  9. package/build/menu/popover.cjs.map +2 -2
  10. package/build/menu/styles.cjs +15 -15
  11. package/build/menu/styles.cjs.map +2 -2
  12. package/build-module/context/context-system-provider.mjs +1 -1
  13. package/build-module/context/context-system-provider.mjs.map +2 -2
  14. package/build-module/duotone-picker/duotone-picker.mjs +1 -1
  15. package/build-module/duotone-picker/duotone-picker.mjs.map +1 -1
  16. package/build-module/higher-order/with-fallback-styles/index.mjs +1 -1
  17. package/build-module/higher-order/with-fallback-styles/index.mjs.map +1 -1
  18. package/build-module/menu/popover.mjs +1 -0
  19. package/build-module/menu/popover.mjs.map +2 -2
  20. package/build-module/menu/styles.mjs +15 -15
  21. package/build-module/menu/styles.mjs.map +2 -2
  22. package/build-types/alignment-matrix-control/stories/index.story.d.ts +1 -1
  23. package/build-types/alignment-matrix-control/stories/index.story.d.ts.map +1 -1
  24. package/build-types/angle-picker-control/stories/index.story.d.ts +1 -1
  25. package/build-types/animate/stories/index.story.d.ts +7 -7
  26. package/build-types/animate/stories/index.story.d.ts.map +1 -1
  27. package/build-types/base-control/stories/index.story.d.ts +1 -1
  28. package/build-types/border-box-control/stories/index.story.d.ts +1 -1
  29. package/build-types/border-control/stories/index.story.d.ts +5 -5
  30. package/build-types/box-control/stories/index.story.d.ts +7 -7
  31. package/build-types/box-control/stories/index.story.d.ts.map +1 -1
  32. package/build-types/button/stories/e2e/index.story.d.ts +1 -1
  33. package/build-types/button/stories/e2e/index.story.d.ts.map +1 -1
  34. package/build-types/button/stories/index.story.d.ts +7 -7
  35. package/build-types/button/stories/index.story.d.ts.map +1 -1
  36. package/build-types/card/card-divider/hook.d.ts +1 -1
  37. package/build-types/circular-option-picker/stories/index.story.d.ts +5 -5
  38. package/build-types/circular-option-picker/stories/index.story.d.ts.map +1 -1
  39. package/build-types/color-palette/stories/index.story.d.ts +3 -3
  40. package/build-types/color-palette/stories/index.story.d.ts.map +1 -1
  41. package/build-types/combobox-control/stories/index.story.d.ts +4 -4
  42. package/build-types/confirm-dialog/stories/index.story.d.ts +2 -2
  43. package/build-types/confirm-dialog/stories/index.story.d.ts.map +1 -1
  44. package/build-types/context/context-system-provider.d.ts.map +1 -1
  45. package/build-types/custom-gradient-picker/stories/index.story.d.ts +1 -1
  46. package/build-types/custom-gradient-picker/stories/index.story.d.ts.map +1 -1
  47. package/build-types/custom-select-control/stories/index.story.d.ts +3 -3
  48. package/build-types/custom-select-control/stories/index.story.d.ts.map +1 -1
  49. package/build-types/custom-select-control-v2/stories/index.story.d.ts +3 -3
  50. package/build-types/date-time/stories/time.story.d.ts +1 -1
  51. package/build-types/date-time/stories/time.story.d.ts.map +1 -1
  52. package/build-types/drop-zone/stories/index.story.d.ts +1 -1
  53. package/build-types/drop-zone/stories/index.story.d.ts.map +1 -1
  54. package/build-types/duotone-picker/stories/duotone-picker.story.d.ts +1 -1
  55. package/build-types/duotone-picker/stories/duotone-picker.story.d.ts.map +1 -1
  56. package/build-types/duotone-picker/stories/duotone-swatch.story.d.ts +3 -3
  57. package/build-types/duotone-picker/stories/duotone-swatch.story.d.ts.map +1 -1
  58. package/build-types/focal-point-picker/stories/index.story.d.ts +4 -4
  59. package/build-types/form-file-upload/stories/index.story.d.ts +5 -5
  60. package/build-types/form-file-upload/stories/index.story.d.ts.map +1 -1
  61. package/build-types/gradient-picker/stories/index.story.d.ts +3 -3
  62. package/build-types/gradient-picker/stories/index.story.d.ts.map +1 -1
  63. package/build-types/guide/stories/index.story.d.ts +1 -1
  64. package/build-types/guide/stories/index.story.d.ts.map +1 -1
  65. package/build-types/icon/stories/index.story.d.ts +4 -4
  66. package/build-types/icon/stories/index.story.d.ts.map +1 -1
  67. package/build-types/index.d.ts +1 -0
  68. package/build-types/index.d.ts.map +1 -1
  69. package/build-types/input-control/stories/index.story.d.ts +7 -7
  70. package/build-types/input-control/stories/index.story.d.ts.map +1 -1
  71. package/build-types/keyboard-shortcuts/stories/index.story.d.ts +1 -1
  72. package/build-types/keyboard-shortcuts/stories/index.story.d.ts.map +1 -1
  73. package/build-types/menu/popover.d.ts.map +1 -1
  74. package/build-types/menu/styles.d.ts.map +1 -1
  75. package/build-types/menu-group/stories/index.story.d.ts +1 -1
  76. package/build-types/menu-group/stories/index.story.d.ts.map +1 -1
  77. package/build-types/menu-item/stories/index.story.d.ts +4 -4
  78. package/build-types/navigation/stories/index.story.d.ts +6 -6
  79. package/build-types/navigation/stories/index.story.d.ts.map +1 -1
  80. package/build-types/notice/stories/index.story.d.ts +5 -5
  81. package/build-types/notice/stories/index.story.d.ts.map +1 -1
  82. package/build-types/number-control/stories/index.story.d.ts +1 -1
  83. package/build-types/palette-edit/stories/index.story.d.ts +2 -2
  84. package/build-types/palette-edit/stories/index.story.d.ts.map +1 -1
  85. package/build-types/progress-bar/stories/index.story.d.ts +1 -1
  86. package/build-types/progress-bar/stories/index.story.d.ts.map +1 -1
  87. package/build-types/query-controls/stories/index.story.d.ts +1 -1
  88. package/build-types/query-controls/stories/index.story.d.ts.map +1 -1
  89. package/build-types/range-control/index.d.ts +2 -2
  90. package/build-types/resizable-box/stories/index.story.d.ts +2 -2
  91. package/build-types/responsive-wrapper/stories/index.story.d.ts +1 -1
  92. package/build-types/responsive-wrapper/stories/index.story.d.ts.map +1 -1
  93. package/build-types/sandbox/stories/index.story.d.ts +1 -1
  94. package/build-types/sandbox/stories/index.story.d.ts.map +1 -1
  95. package/build-types/search-control/stories/index.story.d.ts +1 -1
  96. package/build-types/select-control/stories/index.story.d.ts +5 -5
  97. package/build-types/shortcut/stories/index.story.d.ts +1 -1
  98. package/build-types/shortcut/stories/index.story.d.ts.map +1 -1
  99. package/build-types/tab-panel/stories/index.story.d.ts +4 -4
  100. package/build-types/tab-panel/stories/index.story.d.ts.map +1 -1
  101. package/build-types/tabs/stories/index.story.d.ts +7 -7
  102. package/build-types/tabs/stories/index.story.d.ts.map +1 -1
  103. package/build-types/text/stories/index.story.d.ts +3 -3
  104. package/build-types/theme/stories/index.story.d.ts +1 -1
  105. package/build-types/toggle-control/stories/index.story.d.ts +2 -2
  106. package/build-types/toolbar/stories/index.story.d.ts +3 -3
  107. package/build-types/toolbar/stories/index.story.d.ts.map +1 -1
  108. package/build-types/tooltip/stories/index.story.d.ts +1 -1
  109. package/build-types/tooltip/stories/index.story.d.ts.map +1 -1
  110. package/build-types/tree-grid/stories/index.story.d.ts +1 -1
  111. package/build-types/tree-grid/stories/index.story.d.ts.map +1 -1
  112. package/build-types/tree-select/stories/index.story.d.ts +1 -1
  113. package/build-types/tree-select/stories/index.story.d.ts.map +1 -1
  114. package/build-types/v-stack/stories/index.story.d.ts +1 -1
  115. package/package.json +22 -22
  116. package/src/context/context-system-provider.js +2 -1
  117. package/src/duotone-picker/duotone-picker.tsx +1 -1
  118. package/src/higher-order/with-fallback-styles/index.tsx +1 -1
  119. package/src/index.ts +6 -0
  120. package/src/menu/popover.tsx +1 -0
  121. package/src/menu/styles.ts +36 -26
package/CHANGELOG.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
- ## 32.0.0-next.0 (2026-01-09)
5
+ ## 32.0.0-next.0 (2026-01-14)
6
6
 
7
7
  ### Code Quality
8
8
 
@@ -41,6 +41,7 @@
41
41
  - Converted package to a compliant dual CJS/ESM module ([#73822](https://github.com/WordPress/gutenberg/pull/73822) and [#74348](https://github.com/WordPress/gutenberg/pull/74348)).
42
42
  - `ToggleGroupControl`: Update visual design ([#74036](https://github.com/WordPress/gutenberg/pull/74036)).
43
43
  - `Notice`: Add `disabled` prop to action buttons. Also allow `onClick` to work alongside `url` ([#74094](https://github.com/WordPress/gutenberg/pull/74094)).
44
+ - `Menu`: Remove animation on submenus ([#74548](https://github.com/WordPress/gutenberg/pull/74548)).
44
45
 
45
46
  ### Bug Fixes
46
47
 
@@ -56,6 +57,7 @@
56
57
  - `AnglePickerControl`: Migrate styles from Emotion to a CSS module ([#73786](https://github.com/WordPress/gutenberg/pull/73786)).
57
58
  - `Menu`: Clean up popover wrappers ([#74207](https://github.com/WordPress/gutenberg/pull/74207)).
58
59
  - `Button`, `DateCalendar`, `DateRangeCalendar`, `CheckboxControl`, `Panel`, `Placeholder`: Remove outdated vendor prefix properties in CSS ([#74213](https://github.com/WordPress/gutenberg/pull/74213)).
60
+ - Updated `fast-deep-equal` imports for compatibility with strict Node.js resolution ([#74530](https://github.com/WordPress/gutenberg/pull/74530)).
59
61
 
60
62
  ## 30.9.0 (2025-11-26)
61
63
 
@@ -36,7 +36,7 @@ __export(context_system_provider_exports, {
36
36
  });
37
37
  module.exports = __toCommonJS(context_system_provider_exports);
38
38
  var import_deepmerge = __toESM(require("deepmerge"));
39
- var import_es6 = __toESM(require("fast-deep-equal/es6"));
39
+ var import_es6 = __toESM(require("fast-deep-equal/es6/index.js"));
40
40
  var import_is_plain_object = require("is-plain-object");
41
41
  var import_element = require("@wordpress/element");
42
42
  var import_warning = __toESM(require("@wordpress/warning"));
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/context/context-system-provider.js"],
4
- "sourcesContent": ["/**\n * External dependencies\n */\nimport deepmerge from 'deepmerge';\nimport fastDeepEqual from 'fast-deep-equal/es6';\nimport { isPlainObject } from 'is-plain-object';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useContext, useRef, useMemo, memo } from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useUpdateEffect } from '../utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ComponentsContext = createContext(/** @type {Record<string, any>} */{});\nComponentsContext.displayName = 'ComponentsContext';\nexport const useComponentsContext = () => useContext(ComponentsContext);\n\n/**\n * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.\n *\n * Note: This function will warn if it detects an un-memoized `value`\n *\n * @param {Object} props\n * @param {Record<string, any>} props.value\n * @return {Record<string, any>} The consolidated value.\n */\nfunction useContextSystemBridge({\n value\n}) {\n const parentContext = useComponentsContext();\n const valueRef = useRef(value);\n useUpdateEffect(() => {\n if (\n // Objects are equivalent.\n fastDeepEqual(valueRef.current, value) &&\n // But not the same reference.\n valueRef.current !== value) {\n globalThis.SCRIPT_DEBUG === true ? warn(`Please memoize your context: ${JSON.stringify(value)}`) : void 0;\n }\n }, [value]);\n\n // `parentContext` will always be memoized (i.e., the result of this hook itself)\n // or the default value from when the `ComponentsContext` was originally\n // initialized (which will never change, it's a static variable)\n // so this memoization will prevent `deepmerge()` from rerunning unless\n // the references to `value` change OR the `parentContext` has an actual material change\n // (because again, it's guaranteed to be memoized or a static reference to the empty object\n // so we know that the only changes for `parentContext` are material ones... i.e., why we\n // don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only\n // need to bother with the `value`). The `useUpdateEffect` above will ensure that we are\n // correctly warning when the `value` isn't being properly memoized. All of that to say\n // that this should be super safe to assume that `useMemo` will only run on actual\n // changes to the two dependencies, therefore saving us calls to `deepmerge()`!\n const config = useMemo(() => {\n // Deep clone `parentContext` to avoid mutating it later.\n return deepmerge(parentContext !== null && parentContext !== void 0 ? parentContext : {}, value !== null && value !== void 0 ? value : {}, {\n isMergeableObject: isPlainObject\n });\n }, [parentContext, value]);\n return config;\n}\n\n/**\n * A Provider component that can modify props for connected components within\n * the Context system.\n *\n * @example\n * ```jsx\n * <ContextSystemProvider value={{ Button: { size: 'small' }}}>\n * <Button>...</Button>\n * </ContextSystemProvider>\n * ```\n *\n * @template {Record<string, any>} T\n * @param {Object} options\n * @param {import('react').ReactNode} options.children Children to render.\n * @param {T} options.value Props to render into connected components.\n * @return {JSX.Element} A Provider wrapped component.\n */\nconst BaseContextSystemProvider = ({\n children,\n value\n}) => {\n const contextValue = useContextSystemBridge({\n value\n });\n return /*#__PURE__*/_jsx(ComponentsContext.Provider, {\n value: contextValue,\n children: children\n });\n};\nexport const ContextSystemProvider = memo(BaseContextSystemProvider);"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAsB;AACtB,iBAA0B;AAC1B,6BAA8B;AAK9B,qBAAiE;AACjE,qBAAiB;AAKjB,mBAAgC;AAChC,yBAA4B;AACrB,IAAM,wBAAoB;AAAA;AAAA,EAAgD,CAAC;AAAC;AACnF,kBAAkB,cAAc;AACzB,IAAM,uBAAuB,UAAM,2BAAW,iBAAiB;AAWtE,SAAS,uBAAuB;AAAA,EAC9B;AACF,GAAG;AACD,QAAM,gBAAgB,qBAAqB;AAC3C,QAAM,eAAW,uBAAO,KAAK;AAC7B,oCAAgB,MAAM;AACpB;AAAA;AAAA,UAEA,WAAAA,SAAc,SAAS,SAAS,KAAK;AAAA,MAErC,SAAS,YAAY;AAAA,MAAO;AAC1B,iBAAW,iBAAiB,WAAO,eAAAC,SAAK,gCAAgC,KAAK,UAAU,KAAK,CAAC,EAAE,IAAI;AAAA,IACrG;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAcV,QAAM,aAAS,wBAAQ,MAAM;AAE3B,eAAO,iBAAAC,SAAU,kBAAkB,QAAQ,kBAAkB,SAAS,gBAAgB,CAAC,GAAG,UAAU,QAAQ,UAAU,SAAS,QAAQ,CAAC,GAAG;AAAA,MACzI,mBAAmB;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,eAAe,KAAK,CAAC;AACzB,SAAO;AACT;AAmBA,IAAM,4BAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,uBAAuB;AAAA,IAC1C;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAC,KAAK,kBAAkB,UAAU;AAAA,IACnD,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACH;AACO,IAAM,4BAAwB,qBAAK,yBAAyB;",
4
+ "sourcesContent": ["/**\n * External dependencies\n */\nimport deepmerge from 'deepmerge';\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n// @ts-expect-error https://github.com/jonschlinkert/is-plain-object/pull/47\nimport { isPlainObject } from 'is-plain-object';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useContext, useRef, useMemo, memo } from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useUpdateEffect } from '../utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ComponentsContext = createContext(/** @type {Record<string, any>} */{});\nComponentsContext.displayName = 'ComponentsContext';\nexport const useComponentsContext = () => useContext(ComponentsContext);\n\n/**\n * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.\n *\n * Note: This function will warn if it detects an un-memoized `value`\n *\n * @param {Object} props\n * @param {Record<string, any>} props.value\n * @return {Record<string, any>} The consolidated value.\n */\nfunction useContextSystemBridge({\n value\n}) {\n const parentContext = useComponentsContext();\n const valueRef = useRef(value);\n useUpdateEffect(() => {\n if (\n // Objects are equivalent.\n fastDeepEqual(valueRef.current, value) &&\n // But not the same reference.\n valueRef.current !== value) {\n globalThis.SCRIPT_DEBUG === true ? warn(`Please memoize your context: ${JSON.stringify(value)}`) : void 0;\n }\n }, [value]);\n\n // `parentContext` will always be memoized (i.e., the result of this hook itself)\n // or the default value from when the `ComponentsContext` was originally\n // initialized (which will never change, it's a static variable)\n // so this memoization will prevent `deepmerge()` from rerunning unless\n // the references to `value` change OR the `parentContext` has an actual material change\n // (because again, it's guaranteed to be memoized or a static reference to the empty object\n // so we know that the only changes for `parentContext` are material ones... i.e., why we\n // don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only\n // need to bother with the `value`). The `useUpdateEffect` above will ensure that we are\n // correctly warning when the `value` isn't being properly memoized. All of that to say\n // that this should be super safe to assume that `useMemo` will only run on actual\n // changes to the two dependencies, therefore saving us calls to `deepmerge()`!\n const config = useMemo(() => {\n // Deep clone `parentContext` to avoid mutating it later.\n return deepmerge(parentContext !== null && parentContext !== void 0 ? parentContext : {}, value !== null && value !== void 0 ? value : {}, {\n isMergeableObject: isPlainObject\n });\n }, [parentContext, value]);\n return config;\n}\n\n/**\n * A Provider component that can modify props for connected components within\n * the Context system.\n *\n * @example\n * ```jsx\n * <ContextSystemProvider value={{ Button: { size: 'small' }}}>\n * <Button>...</Button>\n * </ContextSystemProvider>\n * ```\n *\n * @template {Record<string, any>} T\n * @param {Object} options\n * @param {import('react').ReactNode} options.children Children to render.\n * @param {T} options.value Props to render into connected components.\n * @return {JSX.Element} A Provider wrapped component.\n */\nconst BaseContextSystemProvider = ({\n children,\n value\n}) => {\n const contextValue = useContextSystemBridge({\n value\n });\n return /*#__PURE__*/_jsx(ComponentsContext.Provider, {\n value: contextValue,\n children: children\n });\n};\nexport const ContextSystemProvider = memo(BaseContextSystemProvider);"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAsB;AACtB,iBAA0B;AAE1B,6BAA8B;AAK9B,qBAAiE;AACjE,qBAAiB;AAKjB,mBAAgC;AAChC,yBAA4B;AACrB,IAAM,wBAAoB;AAAA;AAAA,EAAgD,CAAC;AAAC;AACnF,kBAAkB,cAAc;AACzB,IAAM,uBAAuB,UAAM,2BAAW,iBAAiB;AAWtE,SAAS,uBAAuB;AAAA,EAC9B;AACF,GAAG;AACD,QAAM,gBAAgB,qBAAqB;AAC3C,QAAM,eAAW,uBAAO,KAAK;AAC7B,oCAAgB,MAAM;AACpB;AAAA;AAAA,UAEA,WAAAA,SAAc,SAAS,SAAS,KAAK;AAAA,MAErC,SAAS,YAAY;AAAA,MAAO;AAC1B,iBAAW,iBAAiB,WAAO,eAAAC,SAAK,gCAAgC,KAAK,UAAU,KAAK,CAAC,EAAE,IAAI;AAAA,IACrG;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAcV,QAAM,aAAS,wBAAQ,MAAM;AAE3B,eAAO,iBAAAC,SAAU,kBAAkB,QAAQ,kBAAkB,SAAS,gBAAgB,CAAC,GAAG,UAAU,QAAQ,UAAU,SAAS,QAAQ,CAAC,GAAG;AAAA,MACzI,mBAAmB;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,eAAe,KAAK,CAAC;AACzB,SAAO;AACT;AAmBA,IAAM,4BAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,uBAAuB;AAAA,IAC1C;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAC,KAAK,kBAAkB,UAAU;AAAA,IACnD,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACH;AACO,IAAM,4BAAwB,qBAAK,yBAAyB;",
6
6
  "names": ["fastDeepEqual", "warn", "deepmerge", "_jsx"]
7
7
  }
@@ -33,7 +33,7 @@ __export(duotone_picker_exports, {
33
33
  default: () => duotone_picker_default
34
34
  });
35
35
  module.exports = __toCommonJS(duotone_picker_exports);
36
- var import_es6 = __toESM(require("fast-deep-equal/es6"));
36
+ var import_es6 = __toESM(require("fast-deep-equal/es6/index.js"));
37
37
  var import_element = require("@wordpress/element");
38
38
  var import_i18n = require("@wordpress/i18n");
39
39
  var import_color_list_picker = __toESM(require("./color-list-picker/index.cjs"));
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/duotone-picker/duotone-picker.tsx"],
4
- "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker({\n asButtons,\n loop,\n clearable = true,\n unsetable = true,\n colorPalette,\n duotonePalette,\n disableCustomColors,\n disableCustomDuotone,\n value,\n onChange,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n ...otherProps\n}) {\n const [defaultDark, defaultLight] = useMemo(() => getDefaultColors(colorPalette), [colorPalette]);\n const isUnset = value === 'unset';\n const unsetOptionLabel = __('Unset');\n const unsetOption = /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n value: \"unset\",\n isSelected: isUnset,\n tooltipText: unsetOptionLabel,\n \"aria-label\": unsetOptionLabel,\n className: \"components-duotone-picker__color-indicator\",\n onClick: () => {\n onChange(isUnset ? undefined : 'unset');\n }\n }, \"unset\");\n const duotoneOptions = duotonePalette.map(({\n colors,\n slug,\n name\n }) => {\n const style = {\n background: getGradientFromCSSColors(colors, '135deg'),\n color: 'transparent'\n };\n const tooltipText = name !== null && name !== void 0 ? name : sprintf(\n // translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n __('Duotone code: %s'), slug);\n const label = name ? sprintf(\n // translators: %s: The name of the option e.g: \"Dark grayscale\".\n __('Duotone: %s'), name) : tooltipText;\n const isSelected = fastDeepEqual(colors, value);\n return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n value: colors,\n isSelected: isSelected,\n \"aria-label\": label,\n tooltipText: tooltipText,\n style: style,\n onClick: () => {\n onChange(isSelected ? undefined : colors);\n }\n }, slug);\n });\n const {\n metaProps,\n labelProps\n } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;\n return /*#__PURE__*/_jsx(CircularOptionPicker, {\n ...otherProps,\n ...metaProps,\n ...labelProps,\n options: options,\n actions: !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n onClick: () => onChange(undefined),\n accessibleWhenDisabled: true,\n disabled: !value,\n children: __('Clear')\n }),\n children: /*#__PURE__*/_jsx(Spacer, {\n paddingTop: options.length === 0 ? 0 : 4,\n children: /*#__PURE__*/_jsxs(VStack, {\n spacing: 3,\n children: [!disableCustomColors && !disableCustomDuotone && /*#__PURE__*/_jsx(CustomDuotoneBar, {\n value: isUnset ? undefined : value,\n onChange: onChange\n }), !disableCustomDuotone && /*#__PURE__*/_jsx(ColorListPicker, {\n labels: [__('Shadows'), __('Highlights')],\n colors: colorPalette,\n value: isUnset ? undefined : value,\n disableCustomColors: disableCustomColors,\n enableAlpha: true,\n onChange: newColors => {\n if (!newColors[0]) {\n newColors[0] = defaultDark;\n }\n if (!newColors[1]) {\n newColors[1] = defaultLight;\n }\n const newValue = newColors.length >= 2 ? newColors : undefined;\n // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n // but it's currently typed as a string[].\n // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n onChange(newValue);\n }\n })]\n })\n })\n });\n}\nexport default DuotonePicker;"],
4
+ "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker({\n asButtons,\n loop,\n clearable = true,\n unsetable = true,\n colorPalette,\n duotonePalette,\n disableCustomColors,\n disableCustomDuotone,\n value,\n onChange,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n ...otherProps\n}) {\n const [defaultDark, defaultLight] = useMemo(() => getDefaultColors(colorPalette), [colorPalette]);\n const isUnset = value === 'unset';\n const unsetOptionLabel = __('Unset');\n const unsetOption = /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n value: \"unset\",\n isSelected: isUnset,\n tooltipText: unsetOptionLabel,\n \"aria-label\": unsetOptionLabel,\n className: \"components-duotone-picker__color-indicator\",\n onClick: () => {\n onChange(isUnset ? undefined : 'unset');\n }\n }, \"unset\");\n const duotoneOptions = duotonePalette.map(({\n colors,\n slug,\n name\n }) => {\n const style = {\n background: getGradientFromCSSColors(colors, '135deg'),\n color: 'transparent'\n };\n const tooltipText = name !== null && name !== void 0 ? name : sprintf(\n // translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n __('Duotone code: %s'), slug);\n const label = name ? sprintf(\n // translators: %s: The name of the option e.g: \"Dark grayscale\".\n __('Duotone: %s'), name) : tooltipText;\n const isSelected = fastDeepEqual(colors, value);\n return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n value: colors,\n isSelected: isSelected,\n \"aria-label\": label,\n tooltipText: tooltipText,\n style: style,\n onClick: () => {\n onChange(isSelected ? undefined : colors);\n }\n }, slug);\n });\n const {\n metaProps,\n labelProps\n } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;\n return /*#__PURE__*/_jsx(CircularOptionPicker, {\n ...otherProps,\n ...metaProps,\n ...labelProps,\n options: options,\n actions: !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n onClick: () => onChange(undefined),\n accessibleWhenDisabled: true,\n disabled: !value,\n children: __('Clear')\n }),\n children: /*#__PURE__*/_jsx(Spacer, {\n paddingTop: options.length === 0 ? 0 : 4,\n children: /*#__PURE__*/_jsxs(VStack, {\n spacing: 3,\n children: [!disableCustomColors && !disableCustomDuotone && /*#__PURE__*/_jsx(CustomDuotoneBar, {\n value: isUnset ? undefined : value,\n onChange: onChange\n }), !disableCustomDuotone && /*#__PURE__*/_jsx(ColorListPicker, {\n labels: [__('Shadows'), __('Highlights')],\n colors: colorPalette,\n value: isUnset ? undefined : value,\n disableCustomColors: disableCustomColors,\n enableAlpha: true,\n onChange: newColors => {\n if (!newColors[0]) {\n newColors[0] = defaultDark;\n }\n if (!newColors[1]) {\n newColors[1] = defaultLight;\n }\n const newValue = newColors.length >= 2 ? newColors : undefined;\n // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n // but it's currently typed as a string[].\n // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n onChange(newValue);\n }\n })]\n })\n })\n });\n}\nexport default DuotonePicker;"],
5
5
  "mappings": "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",
6
6
  "names": ["_jsx", "CircularOptionPicker", "fastDeepEqual", "_jsxs", "CustomDuotoneBar", "ColorListPicker"]
7
7
  }
@@ -33,7 +33,7 @@ __export(with_fallback_styles_exports, {
33
33
  default: () => with_fallback_styles_default
34
34
  });
35
35
  module.exports = __toCommonJS(with_fallback_styles_exports);
36
- var import_es6 = __toESM(require("fast-deep-equal/es6"));
36
+ var import_es6 = __toESM(require("fast-deep-equal/es6/index.js"));
37
37
  var import_element = require("@wordpress/element");
38
38
  var import_compose = require("@wordpress/compose");
39
39
  var import_jsx_runtime = require("react/jsx-runtime");
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/higher-order/with-fallback-styles/index.tsx"],
4
- "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default mapNodeToProps => createHigherOrderComponent(WrappedComponent => {\n return class extends Component {\n constructor(props) {\n super(props);\n this.nodeRef = this.props.node;\n this.state = {\n fallbackStyles: undefined,\n grabStylesCompleted: false\n };\n this.bindRef = this.bindRef.bind(this);\n }\n bindRef(node) {\n if (!node) {\n return;\n }\n this.nodeRef = node;\n }\n componentDidMount() {\n this.grabFallbackStyles();\n }\n componentDidUpdate() {\n this.grabFallbackStyles();\n }\n grabFallbackStyles() {\n const {\n grabStylesCompleted,\n fallbackStyles\n } = this.state;\n if (this.nodeRef && !grabStylesCompleted) {\n const newFallbackStyles = mapNodeToProps(this.nodeRef, this.props);\n if (!fastDeepEqual(newFallbackStyles, fallbackStyles)) {\n this.setState({\n fallbackStyles: newFallbackStyles,\n grabStylesCompleted: Object.values(newFallbackStyles).every(Boolean)\n });\n }\n }\n }\n render() {\n const wrappedComponent = /*#__PURE__*/_jsx(WrappedComponent, {\n ...this.props,\n ...this.state.fallbackStyles\n });\n return this.props.node ? wrappedComponent : /*#__PURE__*/_jsxs(\"div\", {\n ref: this.bindRef,\n children: [\" \", wrappedComponent, \" \"]\n });\n }\n };\n}, 'withFallbackStyles');"],
4
+ "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default mapNodeToProps => createHigherOrderComponent(WrappedComponent => {\n return class extends Component {\n constructor(props) {\n super(props);\n this.nodeRef = this.props.node;\n this.state = {\n fallbackStyles: undefined,\n grabStylesCompleted: false\n };\n this.bindRef = this.bindRef.bind(this);\n }\n bindRef(node) {\n if (!node) {\n return;\n }\n this.nodeRef = node;\n }\n componentDidMount() {\n this.grabFallbackStyles();\n }\n componentDidUpdate() {\n this.grabFallbackStyles();\n }\n grabFallbackStyles() {\n const {\n grabStylesCompleted,\n fallbackStyles\n } = this.state;\n if (this.nodeRef && !grabStylesCompleted) {\n const newFallbackStyles = mapNodeToProps(this.nodeRef, this.props);\n if (!fastDeepEqual(newFallbackStyles, fallbackStyles)) {\n this.setState({\n fallbackStyles: newFallbackStyles,\n grabStylesCompleted: Object.values(newFallbackStyles).every(Boolean)\n });\n }\n }\n }\n render() {\n const wrappedComponent = /*#__PURE__*/_jsx(WrappedComponent, {\n ...this.props,\n ...this.state.fallbackStyles\n });\n return this.props.node ? wrappedComponent : /*#__PURE__*/_jsxs(\"div\", {\n ref: this.bindRef,\n children: [\" \", wrappedComponent, \" \"]\n });\n }\n };\n}, 'withFallbackStyles');"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,iBAA0B;AAK1B,qBAA0B;AAC1B,qBAA2C;AAC3C,yBAA2C;AAC3C,IAAO,+BAAQ,wBAAkB,2CAA2B,sBAAoB;AAC9E,SAAO,cAAc,yBAAU;AAAA,IAC7B,YAAY,OAAO;AACjB,YAAM,KAAK;AACX,WAAK,UAAU,KAAK,MAAM;AAC1B,WAAK,QAAQ;AAAA,QACX,gBAAgB;AAAA,QAChB,qBAAqB;AAAA,MACvB;AACA,WAAK,UAAU,KAAK,QAAQ,KAAK,IAAI;AAAA,IACvC;AAAA,IACA,QAAQ,MAAM;AACZ,UAAI,CAAC,MAAM;AACT;AAAA,MACF;AACA,WAAK,UAAU;AAAA,IACjB;AAAA,IACA,oBAAoB;AAClB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IACA,qBAAqB;AACnB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IACA,qBAAqB;AACnB,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,MACF,IAAI,KAAK;AACT,UAAI,KAAK,WAAW,CAAC,qBAAqB;AACxC,cAAM,oBAAoB,eAAe,KAAK,SAAS,KAAK,KAAK;AACjE,YAAI,KAAC,WAAAA,SAAc,mBAAmB,cAAc,GAAG;AACrD,eAAK,SAAS;AAAA,YACZ,gBAAgB;AAAA,YAChB,qBAAqB,OAAO,OAAO,iBAAiB,EAAE,MAAM,OAAO;AAAA,UACrE,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS;AACP,YAAM,mBAAgC,uCAAAC,KAAK,kBAAkB;AAAA,QAC3D,GAAG,KAAK;AAAA,QACR,GAAG,KAAK,MAAM;AAAA,MAChB,CAAC;AACD,aAAO,KAAK,MAAM,OAAO,mBAAgC,uCAAAC,MAAM,OAAO;AAAA,QACpE,KAAK,KAAK;AAAA,QACV,UAAU,CAAC,KAAK,kBAAkB,GAAG;AAAA,MACvC,CAAC;AAAA,IACH;AAAA,EACF;AACF,GAAG,oBAAoB;",
6
6
  "names": ["fastDeepEqual", "_jsx", "_jsxs"]
7
7
  }
@@ -70,6 +70,7 @@ var Popover = (0, import_element.forwardRef)(function Popover2({
70
70
  shift: shift !== null && shift !== void 0 ? shift : menuContext.store.parent ? -4 : 0,
71
71
  hideOnHoverOutside: false,
72
72
  "data-side": appliedPlacementSide,
73
+ "data-submenu": !!menuContext.store.parent || void 0,
73
74
  wrapperProps,
74
75
  hideOnEscape,
75
76
  unmountOnHide: true,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/menu/popover.tsx"],
4
- "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, useMemo, forwardRef, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport * as Styled from './styles';\nimport { Context } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const Popover = forwardRef(function Popover({\n gutter,\n children,\n shift,\n modal = true,\n ...otherProps\n}, ref) {\n const menuContext = useContext(Context);\n\n // Extract the side from the applied placement \u2014 useful for animations.\n // Using `currentPlacement` instead of `placement` to make sure that we\n // use the final computed placement (including \"flips\" etc).\n const appliedPlacementSide = Ariakit.useStoreState(menuContext?.store, 'currentPlacement')?.split('-')[0];\n const hideOnEscape = useCallback(event => {\n // Pressing Escape can cause unexpected consequences (ie. exiting\n // full screen mode on MacOs, close parent modals...).\n event.preventDefault();\n // Returning `true` causes the menu to hide.\n return true;\n }, []);\n const computedDirection = Ariakit.useStoreState(menuContext?.store, 'rtl') ? 'rtl' : 'ltr';\n const wrapperProps = useMemo(() => ({\n dir: computedDirection,\n style: {\n direction: computedDirection\n }\n }), [computedDirection]);\n if (!menuContext?.store) {\n throw new Error('Menu.Popover can only be rendered inside a Menu component');\n }\n return /*#__PURE__*/_jsx(Styled.Menu, {\n ...otherProps,\n ref: ref,\n modal: modal,\n store: menuContext.store\n // Root menu has an 8px distance from its trigger,\n // otherwise 0 (which causes the submenu to slightly overlap)\n ,\n gutter: gutter !== null && gutter !== void 0 ? gutter : menuContext.store.parent ? 0 : 8\n // Align nested menu by the same (but opposite) amount\n // as the menu container's padding.\n ,\n shift: shift !== null && shift !== void 0 ? shift : menuContext.store.parent ? -4 : 0,\n hideOnHoverOutside: false,\n \"data-side\": appliedPlacementSide,\n wrapperProps: wrapperProps,\n hideOnEscape: hideOnEscape,\n unmountOnHide: true,\n variant: menuContext.variant,\n children: children\n });\n});"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAA6D;AAM7D,aAAwB;AACxB,qBAAwB;AACxB,yBAA4B;AACrB,IAAM,cAAU,2BAAW,SAASA,SAAQ;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAG,KAAK;AACN,QAAM,kBAAc,2BAAW,sBAAO;AAKtC,QAAM,uBAA+B,sBAAc,aAAa,OAAO,kBAAkB,GAAG,MAAM,GAAG,EAAE,CAAC;AACxG,QAAM,mBAAe,4BAAY,WAAS;AAGxC,UAAM,eAAe;AAErB,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AACL,QAAM,oBAA4B,sBAAc,aAAa,OAAO,KAAK,IAAI,QAAQ;AACrF,QAAM,mBAAe,wBAAQ,OAAO;AAAA,IAClC,KAAK;AAAA,IACL,OAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,EACF,IAAI,CAAC,iBAAiB,CAAC;AACvB,MAAI,CAAC,aAAa,OAAO;AACvB,UAAM,IAAI,MAAM,2DAA2D;AAAA,EAC7E;AACA,SAAoB,uCAAAC,KAAY,aAAM;AAAA,IACpC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA,OAAO,YAAY;AAAA,IAInB,QAAQ,WAAW,QAAQ,WAAW,SAAS,SAAS,YAAY,MAAM,SAAS,IAAI;AAAA,IAIvF,OAAO,UAAU,QAAQ,UAAU,SAAS,QAAQ,YAAY,MAAM,SAAS,KAAK;AAAA,IACpF,oBAAoB;AAAA,IACpB,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,SAAS,YAAY;AAAA,IACrB;AAAA,EACF,CAAC;AACH,CAAC;",
4
+ "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, useMemo, forwardRef, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport * as Styled from './styles';\nimport { Context } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const Popover = forwardRef(function Popover({\n gutter,\n children,\n shift,\n modal = true,\n ...otherProps\n}, ref) {\n const menuContext = useContext(Context);\n\n // Extract the side from the applied placement \u2014 useful for animations.\n // Using `currentPlacement` instead of `placement` to make sure that we\n // use the final computed placement (including \"flips\" etc).\n const appliedPlacementSide = Ariakit.useStoreState(menuContext?.store, 'currentPlacement')?.split('-')[0];\n const hideOnEscape = useCallback(event => {\n // Pressing Escape can cause unexpected consequences (ie. exiting\n // full screen mode on MacOs, close parent modals...).\n event.preventDefault();\n // Returning `true` causes the menu to hide.\n return true;\n }, []);\n const computedDirection = Ariakit.useStoreState(menuContext?.store, 'rtl') ? 'rtl' : 'ltr';\n const wrapperProps = useMemo(() => ({\n dir: computedDirection,\n style: {\n direction: computedDirection\n }\n }), [computedDirection]);\n if (!menuContext?.store) {\n throw new Error('Menu.Popover can only be rendered inside a Menu component');\n }\n return /*#__PURE__*/_jsx(Styled.Menu, {\n ...otherProps,\n ref: ref,\n modal: modal,\n store: menuContext.store\n // Root menu has an 8px distance from its trigger,\n // otherwise 0 (which causes the submenu to slightly overlap)\n ,\n gutter: gutter !== null && gutter !== void 0 ? gutter : menuContext.store.parent ? 0 : 8\n // Align nested menu by the same (but opposite) amount\n // as the menu container's padding.\n ,\n shift: shift !== null && shift !== void 0 ? shift : menuContext.store.parent ? -4 : 0,\n hideOnHoverOutside: false,\n \"data-side\": appliedPlacementSide,\n \"data-submenu\": !!menuContext.store.parent || undefined,\n wrapperProps: wrapperProps,\n hideOnEscape: hideOnEscape,\n unmountOnHide: true,\n variant: menuContext.variant,\n children: children\n });\n});"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAA6D;AAM7D,aAAwB;AACxB,qBAAwB;AACxB,yBAA4B;AACrB,IAAM,cAAU,2BAAW,SAASA,SAAQ;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAG,KAAK;AACN,QAAM,kBAAc,2BAAW,sBAAO;AAKtC,QAAM,uBAA+B,sBAAc,aAAa,OAAO,kBAAkB,GAAG,MAAM,GAAG,EAAE,CAAC;AACxG,QAAM,mBAAe,4BAAY,WAAS;AAGxC,UAAM,eAAe;AAErB,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AACL,QAAM,oBAA4B,sBAAc,aAAa,OAAO,KAAK,IAAI,QAAQ;AACrF,QAAM,mBAAe,wBAAQ,OAAO;AAAA,IAClC,KAAK;AAAA,IACL,OAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,EACF,IAAI,CAAC,iBAAiB,CAAC;AACvB,MAAI,CAAC,aAAa,OAAO;AACvB,UAAM,IAAI,MAAM,2DAA2D;AAAA,EAC7E;AACA,SAAoB,uCAAAC,KAAY,aAAM;AAAA,IACpC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA,OAAO,YAAY;AAAA,IAInB,QAAQ,WAAW,QAAQ,WAAW,SAAS,SAAS,YAAY,MAAM,SAAS,IAAI;AAAA,IAIvF,OAAO,UAAU,QAAQ,UAAU,SAAS,QAAQ,YAAY,MAAM,SAAS,KAAK;AAAA,IACpF,oBAAoB;AAAA,IACpB,aAAa;AAAA,IACb,gBAAgB,CAAC,CAAC,YAAY,MAAM,UAAU;AAAA,IAC9C;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,SAAS,YAAY;AAAA,IACrB;AAAA,EACF,CAAC;AACH,CAAC;",
6
6
  "names": ["Popover", "_jsx"]
7
7
  }