@salt-ds/lab 1.0.0-alpha.96 → 1.0.0-alpha.98

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 (195) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/css/salt-lab.css +1 -343
  3. package/dist-cjs/common-hooks/useSelection.js +6 -3
  4. package/dist-cjs/common-hooks/useSelection.js.map +1 -1
  5. package/dist-cjs/index.js +0 -28
  6. package/dist-cjs/index.js.map +1 -1
  7. package/dist-cjs/list/useList.js +7 -1
  8. package/dist-cjs/list/useList.js.map +1 -1
  9. package/dist-es/common-hooks/useSelection.js +6 -3
  10. package/dist-es/common-hooks/useSelection.js.map +1 -1
  11. package/dist-es/index.js +0 -14
  12. package/dist-es/index.js.map +1 -1
  13. package/dist-es/list/useList.js +7 -1
  14. package/dist-es/list/useList.js.map +1 -1
  15. package/dist-types/index.d.ts +0 -2
  16. package/package.json +2 -2
  17. package/dist-cjs/mega-menu/MegaMenu.js +0 -76
  18. package/dist-cjs/mega-menu/MegaMenu.js.map +0 -1
  19. package/dist-cjs/mega-menu/MegaMenuActions.css.js +0 -6
  20. package/dist-cjs/mega-menu/MegaMenuActions.css.js.map +0 -1
  21. package/dist-cjs/mega-menu/MegaMenuActions.js +0 -33
  22. package/dist-cjs/mega-menu/MegaMenuActions.js.map +0 -1
  23. package/dist-cjs/mega-menu/MegaMenuAside.css.js +0 -6
  24. package/dist-cjs/mega-menu/MegaMenuAside.css.js.map +0 -1
  25. package/dist-cjs/mega-menu/MegaMenuAside.js +0 -33
  26. package/dist-cjs/mega-menu/MegaMenuAside.js.map +0 -1
  27. package/dist-cjs/mega-menu/MegaMenuContent.css.js +0 -6
  28. package/dist-cjs/mega-menu/MegaMenuContent.css.js.map +0 -1
  29. package/dist-cjs/mega-menu/MegaMenuContent.js +0 -25
  30. package/dist-cjs/mega-menu/MegaMenuContent.js.map +0 -1
  31. package/dist-cjs/mega-menu/MegaMenuContext.js +0 -11
  32. package/dist-cjs/mega-menu/MegaMenuContext.js.map +0 -1
  33. package/dist-cjs/mega-menu/MegaMenuGroup.css.js +0 -6
  34. package/dist-cjs/mega-menu/MegaMenuGroup.css.js.map +0 -1
  35. package/dist-cjs/mega-menu/MegaMenuGroup.js +0 -40
  36. package/dist-cjs/mega-menu/MegaMenuGroup.js.map +0 -1
  37. package/dist-cjs/mega-menu/MegaMenuGroupContext.js +0 -17
  38. package/dist-cjs/mega-menu/MegaMenuGroupContext.js.map +0 -1
  39. package/dist-cjs/mega-menu/MegaMenuGroupHeading.css.js +0 -6
  40. package/dist-cjs/mega-menu/MegaMenuGroupHeading.css.js.map +0 -1
  41. package/dist-cjs/mega-menu/MegaMenuGroupHeading.js +0 -39
  42. package/dist-cjs/mega-menu/MegaMenuGroupHeading.js.map +0 -1
  43. package/dist-cjs/mega-menu/MegaMenuGroups.css.js +0 -6
  44. package/dist-cjs/mega-menu/MegaMenuGroups.css.js.map +0 -1
  45. package/dist-cjs/mega-menu/MegaMenuGroups.js +0 -25
  46. package/dist-cjs/mega-menu/MegaMenuGroups.js.map +0 -1
  47. package/dist-cjs/mega-menu/MegaMenuList.css.js +0 -6
  48. package/dist-cjs/mega-menu/MegaMenuList.css.js.map +0 -1
  49. package/dist-cjs/mega-menu/MegaMenuList.js +0 -43
  50. package/dist-cjs/mega-menu/MegaMenuList.js.map +0 -1
  51. package/dist-cjs/mega-menu/MegaMenuListItem.css.js +0 -6
  52. package/dist-cjs/mega-menu/MegaMenuListItem.css.js.map +0 -1
  53. package/dist-cjs/mega-menu/MegaMenuListItem.js +0 -45
  54. package/dist-cjs/mega-menu/MegaMenuListItem.js.map +0 -1
  55. package/dist-cjs/mega-menu/MegaMenuPanel.css.js +0 -6
  56. package/dist-cjs/mega-menu/MegaMenuPanel.css.js.map +0 -1
  57. package/dist-cjs/mega-menu/MegaMenuPanel.js +0 -88
  58. package/dist-cjs/mega-menu/MegaMenuPanel.js.map +0 -1
  59. package/dist-cjs/mega-menu/MegaMenuTrigger.js +0 -90
  60. package/dist-cjs/mega-menu/MegaMenuTrigger.js.map +0 -1
  61. package/dist-cjs/mega-menu/useMegaMenu.js +0 -15
  62. package/dist-cjs/mega-menu/useMegaMenu.js.map +0 -1
  63. package/dist-cjs/mega-menu/useMegaMenuNavigation.js +0 -282
  64. package/dist-cjs/mega-menu/useMegaMenuNavigation.js.map +0 -1
  65. package/dist-cjs/mega-menu/usePageMargin.js +0 -22
  66. package/dist-cjs/mega-menu/usePageMargin.js.map +0 -1
  67. package/dist-cjs/toolbar-next/ToolbarContentNext.css.js +0 -6
  68. package/dist-cjs/toolbar-next/ToolbarContentNext.css.js.map +0 -1
  69. package/dist-cjs/toolbar-next/ToolbarContentNext.js +0 -32
  70. package/dist-cjs/toolbar-next/ToolbarContentNext.js.map +0 -1
  71. package/dist-cjs/toolbar-next/ToolbarNext.css.js +0 -6
  72. package/dist-cjs/toolbar-next/ToolbarNext.css.js.map +0 -1
  73. package/dist-cjs/toolbar-next/ToolbarNext.js +0 -394
  74. package/dist-cjs/toolbar-next/ToolbarNext.js.map +0 -1
  75. package/dist-cjs/toolbar-next/ToolbarNextOverflow.css.js +0 -6
  76. package/dist-cjs/toolbar-next/ToolbarNextOverflow.css.js.map +0 -1
  77. package/dist-cjs/toolbar-next/ToolbarNextOverflow.js +0 -706
  78. package/dist-cjs/toolbar-next/ToolbarNextOverflow.js.map +0 -1
  79. package/dist-cjs/toolbar-next/ToolbarNextOverflowFloatingBoundary.js +0 -165
  80. package/dist-cjs/toolbar-next/ToolbarNextOverflowFloatingBoundary.js.map +0 -1
  81. package/dist-cjs/toolbar-next/TooltrayNext.css.js +0 -6
  82. package/dist-cjs/toolbar-next/TooltrayNext.css.js.map +0 -1
  83. package/dist-cjs/toolbar-next/TooltrayNext.js +0 -55
  84. package/dist-cjs/toolbar-next/TooltrayNext.js.map +0 -1
  85. package/dist-cjs/toolbar-next/toolbarNextKeyboardUtils.js +0 -409
  86. package/dist-cjs/toolbar-next/toolbarNextKeyboardUtils.js.map +0 -1
  87. package/dist-cjs/toolbar-next/toolbarNextUtils.js +0 -215
  88. package/dist-cjs/toolbar-next/toolbarNextUtils.js.map +0 -1
  89. package/dist-cjs/toolbar-next/useToolbarNextKeyboardNavigation.js +0 -312
  90. package/dist-cjs/toolbar-next/useToolbarNextKeyboardNavigation.js.map +0 -1
  91. package/dist-cjs/toolbar-next/useToolbarNextOverflow.js +0 -745
  92. package/dist-cjs/toolbar-next/useToolbarNextOverflow.js.map +0 -1
  93. package/dist-es/mega-menu/MegaMenu.js +0 -74
  94. package/dist-es/mega-menu/MegaMenu.js.map +0 -1
  95. package/dist-es/mega-menu/MegaMenuActions.css.js +0 -4
  96. package/dist-es/mega-menu/MegaMenuActions.css.js.map +0 -1
  97. package/dist-es/mega-menu/MegaMenuActions.js +0 -31
  98. package/dist-es/mega-menu/MegaMenuActions.js.map +0 -1
  99. package/dist-es/mega-menu/MegaMenuAside.css.js +0 -4
  100. package/dist-es/mega-menu/MegaMenuAside.css.js.map +0 -1
  101. package/dist-es/mega-menu/MegaMenuAside.js +0 -31
  102. package/dist-es/mega-menu/MegaMenuAside.js.map +0 -1
  103. package/dist-es/mega-menu/MegaMenuContent.css.js +0 -4
  104. package/dist-es/mega-menu/MegaMenuContent.css.js.map +0 -1
  105. package/dist-es/mega-menu/MegaMenuContent.js +0 -23
  106. package/dist-es/mega-menu/MegaMenuContent.js.map +0 -1
  107. package/dist-es/mega-menu/MegaMenuContext.js +0 -9
  108. package/dist-es/mega-menu/MegaMenuContext.js.map +0 -1
  109. package/dist-es/mega-menu/MegaMenuGroup.css.js +0 -4
  110. package/dist-es/mega-menu/MegaMenuGroup.css.js.map +0 -1
  111. package/dist-es/mega-menu/MegaMenuGroup.js +0 -38
  112. package/dist-es/mega-menu/MegaMenuGroup.js.map +0 -1
  113. package/dist-es/mega-menu/MegaMenuGroupContext.js +0 -14
  114. package/dist-es/mega-menu/MegaMenuGroupContext.js.map +0 -1
  115. package/dist-es/mega-menu/MegaMenuGroupHeading.css.js +0 -4
  116. package/dist-es/mega-menu/MegaMenuGroupHeading.css.js.map +0 -1
  117. package/dist-es/mega-menu/MegaMenuGroupHeading.js +0 -37
  118. package/dist-es/mega-menu/MegaMenuGroupHeading.js.map +0 -1
  119. package/dist-es/mega-menu/MegaMenuGroups.css.js +0 -4
  120. package/dist-es/mega-menu/MegaMenuGroups.css.js.map +0 -1
  121. package/dist-es/mega-menu/MegaMenuGroups.js +0 -23
  122. package/dist-es/mega-menu/MegaMenuGroups.js.map +0 -1
  123. package/dist-es/mega-menu/MegaMenuList.css.js +0 -4
  124. package/dist-es/mega-menu/MegaMenuList.css.js.map +0 -1
  125. package/dist-es/mega-menu/MegaMenuList.js +0 -41
  126. package/dist-es/mega-menu/MegaMenuList.js.map +0 -1
  127. package/dist-es/mega-menu/MegaMenuListItem.css.js +0 -4
  128. package/dist-es/mega-menu/MegaMenuListItem.css.js.map +0 -1
  129. package/dist-es/mega-menu/MegaMenuListItem.js +0 -43
  130. package/dist-es/mega-menu/MegaMenuListItem.js.map +0 -1
  131. package/dist-es/mega-menu/MegaMenuPanel.css.js +0 -4
  132. package/dist-es/mega-menu/MegaMenuPanel.css.js.map +0 -1
  133. package/dist-es/mega-menu/MegaMenuPanel.js +0 -86
  134. package/dist-es/mega-menu/MegaMenuPanel.js.map +0 -1
  135. package/dist-es/mega-menu/MegaMenuTrigger.js +0 -88
  136. package/dist-es/mega-menu/MegaMenuTrigger.js.map +0 -1
  137. package/dist-es/mega-menu/useMegaMenu.js +0 -13
  138. package/dist-es/mega-menu/useMegaMenu.js.map +0 -1
  139. package/dist-es/mega-menu/useMegaMenuNavigation.js +0 -278
  140. package/dist-es/mega-menu/useMegaMenuNavigation.js.map +0 -1
  141. package/dist-es/mega-menu/usePageMargin.js +0 -20
  142. package/dist-es/mega-menu/usePageMargin.js.map +0 -1
  143. package/dist-es/toolbar-next/ToolbarContentNext.css.js +0 -4
  144. package/dist-es/toolbar-next/ToolbarContentNext.css.js.map +0 -1
  145. package/dist-es/toolbar-next/ToolbarContentNext.js +0 -30
  146. package/dist-es/toolbar-next/ToolbarContentNext.js.map +0 -1
  147. package/dist-es/toolbar-next/ToolbarNext.css.js +0 -4
  148. package/dist-es/toolbar-next/ToolbarNext.css.js.map +0 -1
  149. package/dist-es/toolbar-next/ToolbarNext.js +0 -392
  150. package/dist-es/toolbar-next/ToolbarNext.js.map +0 -1
  151. package/dist-es/toolbar-next/ToolbarNextOverflow.css.js +0 -4
  152. package/dist-es/toolbar-next/ToolbarNextOverflow.css.js.map +0 -1
  153. package/dist-es/toolbar-next/ToolbarNextOverflow.js +0 -701
  154. package/dist-es/toolbar-next/ToolbarNextOverflow.js.map +0 -1
  155. package/dist-es/toolbar-next/ToolbarNextOverflowFloatingBoundary.js +0 -159
  156. package/dist-es/toolbar-next/ToolbarNextOverflowFloatingBoundary.js.map +0 -1
  157. package/dist-es/toolbar-next/TooltrayNext.css.js +0 -4
  158. package/dist-es/toolbar-next/TooltrayNext.css.js.map +0 -1
  159. package/dist-es/toolbar-next/TooltrayNext.js +0 -53
  160. package/dist-es/toolbar-next/TooltrayNext.js.map +0 -1
  161. package/dist-es/toolbar-next/toolbarNextKeyboardUtils.js +0 -390
  162. package/dist-es/toolbar-next/toolbarNextKeyboardUtils.js.map +0 -1
  163. package/dist-es/toolbar-next/toolbarNextUtils.js +0 -211
  164. package/dist-es/toolbar-next/toolbarNextUtils.js.map +0 -1
  165. package/dist-es/toolbar-next/useToolbarNextKeyboardNavigation.js +0 -310
  166. package/dist-es/toolbar-next/useToolbarNextKeyboardNavigation.js.map +0 -1
  167. package/dist-es/toolbar-next/useToolbarNextOverflow.js +0 -743
  168. package/dist-es/toolbar-next/useToolbarNextOverflow.js.map +0 -1
  169. package/dist-types/mega-menu/MegaMenu.d.ts +0 -36
  170. package/dist-types/mega-menu/MegaMenuActions.d.ts +0 -10
  171. package/dist-types/mega-menu/MegaMenuAside.d.ts +0 -9
  172. package/dist-types/mega-menu/MegaMenuContent.d.ts +0 -9
  173. package/dist-types/mega-menu/MegaMenuContext.d.ts +0 -28
  174. package/dist-types/mega-menu/MegaMenuGroup.d.ts +0 -9
  175. package/dist-types/mega-menu/MegaMenuGroupContext.d.ts +0 -12
  176. package/dist-types/mega-menu/MegaMenuGroupHeading.d.ts +0 -13
  177. package/dist-types/mega-menu/MegaMenuGroups.d.ts +0 -8
  178. package/dist-types/mega-menu/MegaMenuList.d.ts +0 -16
  179. package/dist-types/mega-menu/MegaMenuListItem.d.ts +0 -25
  180. package/dist-types/mega-menu/MegaMenuPanel.d.ts +0 -8
  181. package/dist-types/mega-menu/MegaMenuTrigger.d.ts +0 -9
  182. package/dist-types/mega-menu/index.d.ts +0 -11
  183. package/dist-types/mega-menu/useMegaMenu.d.ts +0 -6
  184. package/dist-types/mega-menu/useMegaMenuNavigation.d.ts +0 -16
  185. package/dist-types/mega-menu/usePageMargin.d.ts +0 -6
  186. package/dist-types/toolbar-next/ToolbarContentNext.d.ts +0 -11
  187. package/dist-types/toolbar-next/ToolbarNext.d.ts +0 -12
  188. package/dist-types/toolbar-next/ToolbarNextOverflow.d.ts +0 -34
  189. package/dist-types/toolbar-next/ToolbarNextOverflowFloatingBoundary.d.ts +0 -16
  190. package/dist-types/toolbar-next/TooltrayNext.d.ts +0 -37
  191. package/dist-types/toolbar-next/index.d.ts +0 -3
  192. package/dist-types/toolbar-next/toolbarNextKeyboardUtils.d.ts +0 -39
  193. package/dist-types/toolbar-next/toolbarNextUtils.d.ts +0 -42
  194. package/dist-types/toolbar-next/useToolbarNextKeyboardNavigation.d.ts +0 -42
  195. package/dist-types/toolbar-next/useToolbarNextOverflow.d.ts +0 -37
@@ -1 +0,0 @@
1
- {"version":3,"file":"MegaMenuGroupHeading.js","sources":["../src/mega-menu/MegaMenuGroupHeading.tsx"],"sourcesContent":["import { makePrefixer, useId, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { useMegaMenuGroup } from \"./MegaMenuGroupContext\";\nimport megaMenuGroupHeadingCss from \"./MegaMenuGroupHeading.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuGroupHeading\");\n\nexport interface MegaMenuGroupHeadingProps\n extends ComponentPropsWithoutRef<\"h2\"> {\n /**\n * The content of the mega menu group heading.\n */\n children?: ReactNode;\n /**\n * The heading element to render.\n * @default \"h3\"\n */\n as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nexport const MegaMenuGroupHeading = forwardRef<\n HTMLHeadingElement,\n MegaMenuGroupHeadingProps\n>(function MegaMenuGroupHeading(\n { children, className, id: idProp, as: Heading = \"h3\", ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-mega-menu-group-heading\",\n css: megaMenuGroupHeadingCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n const { setHeadingId } = useMegaMenuGroup();\n useIsomorphicLayoutEffect(() => {\n setHeadingId(id);\n return () => setHeadingId(undefined);\n }, [id, setHeadingId]);\n\n return (\n <Heading\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...rest}\n id={id}\n >\n {children}\n </Heading>\n );\n});\n"],"names":["makePrefixer","forwardRef","MegaMenuGroupHeading","useWindow","useComponentCssInjection","megaMenuGroupHeadingCss","useId","useMegaMenuGroup","useIsomorphicLayoutEffect","jsx","clsx"],"mappings":";;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA;AAerD,MAAM,oBAAA,GAAuBC,gBAAA,CAGlC,SAASC,qBAAAA,CACT,EAAE,QAAA,EAAU,SAAA,EAAW,EAAA,EAAI,MAAA,EAAQ,IAAI,OAAA,GAAU,IAAA,EAAM,GAAG,IAAA,IAC1D,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,8BAAA;AAAA,IACR,GAAA,EAAKC,sBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAA,GAAKC,WAAM,MAAM,CAAA;AACvB,EAAA,MAAM,EAAE,YAAA,EAAa,GAAIC,qCAAA,EAAiB;AAC1C,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,YAAA,CAAa,EAAE,CAAA;AACf,IAAA,OAAO,MAAM,aAAa,MAAS,CAAA;AAAA,EACrC,CAAA,EAAG,CAAC,EAAA,EAAI,YAAY,CAAC,CAAA;AAErB,EAAA,uBACEC,cAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,EAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = ".saltMegaMenuGroups {\n align-self: start;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(0, var(--saltMegaMenuGroups-columnWidth, 12rem)));\n gap: var(--salt-spacing-300);\n min-width: 0;\n max-inline-size: var(--saltMegaMenuPanel-availableWidth);\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=MegaMenuGroups.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MegaMenuGroups.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,25 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var core = require('@salt-ds/core');
5
- var styles = require('@salt-ds/styles');
6
- var window = require('@salt-ds/window');
7
- var clsx = require('clsx');
8
- var react = require('react');
9
- var MegaMenuGroups$1 = require('./MegaMenuGroups.css.js');
10
-
11
- const withBaseName = core.makePrefixer("saltMegaMenuGroups");
12
- const MegaMenuGroups = react.forwardRef(
13
- function MegaMenuGroups2({ children, className, ...rest }, ref) {
14
- const targetWindow = window.useWindow();
15
- styles.useComponentCssInjection({
16
- testId: "salt-mega-menu-groups",
17
- css: MegaMenuGroups$1,
18
- window: targetWindow
19
- });
20
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ref, ...rest, children });
21
- }
22
- );
23
-
24
- exports.MegaMenuGroups = MegaMenuGroups;
25
- //# sourceMappingURL=MegaMenuGroups.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MegaMenuGroups.js","sources":["../src/mega-menu/MegaMenuGroups.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport megaMenuGroupsCss from \"./MegaMenuGroups.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuGroups\");\n\nexport interface MegaMenuGroupsProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The `MegaMenuGroup` columns of the mega menu.\n */\n children?: ReactNode;\n}\n\nexport const MegaMenuGroups = forwardRef<HTMLDivElement, MegaMenuGroupsProps>(\n function MegaMenuGroups({ children, className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-mega-menu-groups\",\n css: megaMenuGroupsCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","MegaMenuGroups","useWindow","useComponentCssInjection","megaMenuGroupsCss","jsx","clsx"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAS/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,gBAAe,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC7D,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAC5D,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = ".saltMegaMenuList {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n gap: var(--salt-spacing-fixed-100);\n flex-direction: column;\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=MegaMenuList.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MegaMenuList.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,43 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var core = require('@salt-ds/core');
5
- var styles = require('@salt-ds/styles');
6
- var window = require('@salt-ds/window');
7
- var clsx = require('clsx');
8
- var react = require('react');
9
- var MegaMenuGroupContext = require('./MegaMenuGroupContext.js');
10
- var MegaMenuList$1 = require('./MegaMenuList.css.js');
11
-
12
- const withBaseName = core.makePrefixer("saltMegaMenuList");
13
- const MegaMenuList = react.forwardRef(
14
- function MegaMenuList2({
15
- as,
16
- children,
17
- className,
18
- "aria-labelledby": ariaLabelledBy,
19
- ...rest
20
- }, ref) {
21
- const targetWindow = window.useWindow();
22
- styles.useComponentCssInjection({
23
- testId: "salt-mega-menu-list",
24
- css: MegaMenuList$1,
25
- window: targetWindow
26
- });
27
- const { headingId } = MegaMenuGroupContext.useMegaMenuGroup();
28
- const Component = as || "ul";
29
- return /* @__PURE__ */ jsxRuntime.jsx(
30
- Component,
31
- {
32
- ref,
33
- className: clsx.clsx(withBaseName(), className),
34
- "aria-labelledby": clsx.clsx(headingId, ariaLabelledBy) || void 0,
35
- ...rest,
36
- children
37
- }
38
- );
39
- }
40
- );
41
-
42
- exports.MegaMenuList = MegaMenuList;
43
- //# sourceMappingURL=MegaMenuList.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MegaMenuList.js","sources":["../src/mega-menu/MegaMenuList.tsx"],"sourcesContent":["import {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type PolymorphicRef,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { useMegaMenuGroup } from \"./MegaMenuGroupContext\";\nimport megaMenuListCss from \"./MegaMenuList.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuList\");\n\nexport type MegaMenuListProps<T extends ElementType = \"ul\"> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * The items of the group, typically `MegaMenuListItem` components. Each\n * `MegaMenuListItem` renders its own `<li>`.\n */\n children?: ReactNode;\n }\n >;\n\ntype MegaMenuListComponent = <T extends ElementType = \"ul\">(\n props: MegaMenuListProps<T>,\n) => ReturnType<FunctionComponent>;\n\n/**\n * The list of a group's `MegaMenuListItem`s. Renders a `<ul>` by default; pass\n * `as=\"ol\"` for an ordered list.\n */\nexport const MegaMenuList: MegaMenuListComponent = forwardRef(\n function MegaMenuList<T extends ElementType = \"ul\">(\n {\n as,\n children,\n className,\n \"aria-labelledby\": ariaLabelledBy,\n ...rest\n }: MegaMenuListProps<T>,\n ref?: ForwardedRef<unknown>,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-mega-menu-list\",\n css: megaMenuListCss,\n window: targetWindow,\n });\n\n const { headingId } = useMegaMenuGroup();\n\n const Component = as || \"ul\";\n\n return (\n <Component\n ref={ref as PolymorphicRef<T>}\n className={clsx(withBaseName(), className)}\n aria-labelledby={clsx(headingId, ariaLabelledBy) || undefined}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","MegaMenuList","useWindow","useComponentCssInjection","megaMenuListCss","useMegaMenuGroup","jsx","clsx"],"mappings":";;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAsB7C,MAAM,YAAA,GAAsCC,gBAAA;AAAA,EACjD,SAASC,aAAAA,CACP;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA,EAAmB,cAAA;AAAA,IACnB,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,qCAAA,EAAiB;AAEvC,IAAA,MAAM,YAAY,EAAA,IAAM,IAAA;AAExB,IAAA,uBACEC,cAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,iBAAA,EAAiBA,SAAA,CAAK,SAAA,EAAW,cAAc,CAAA,IAAK,MAAA;AAAA,QACnD,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = ".saltMegaMenuListItem {\n list-style: none;\n display: flex;\n flex-direction: column;\n}\n\n.saltMegaMenuListItem-wrapper {\n display: flex;\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n align-items: flex-start;\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n cursor: var(--salt-cursor-hover);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n box-sizing: border-box;\n gap: var(--salt-spacing-100);\n position: relative;\n border-radius: var(--salt-palette-corner-weak, 0);\n text-decoration: none;\n border: none;\n font: inherit;\n text-align: start;\n}\n\n.saltMegaMenuListItem-wrapper > .saltIcon {\n display: flex;\n height: var(--salt-size-base);\n align-items: center;\n}\n\n.saltMegaMenuListItem-content {\n flex: 1 0;\n margin: var(--salt-spacing-75) 0;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltMegaMenuListItem-wrapper:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltMegaMenuListItem-wrapper:hover:not(:focus-visible) {\n outline: none;\n background: var(--salt-overlayable-background-hover);\n}\n\n.saltMegaMenuListItem-wrapper:active {\n background: var(--salt-navigable-accent-background-active);\n}\n\n.saltMegaMenuListItem-wrapper:active::before {\n content: \"\";\n position: absolute;\n inset: 0;\n box-sizing: border-box;\n border-radius: inherit;\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-navigable-accent-borderColor-active);\n pointer-events: none;\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=MegaMenuListItem.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MegaMenuListItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,45 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var core = require('@salt-ds/core');
5
- var styles = require('@salt-ds/styles');
6
- var window = require('@salt-ds/window');
7
- var clsx = require('clsx');
8
- var react = require('react');
9
- var MegaMenuListItem$1 = require('./MegaMenuListItem.css.js');
10
- var useMegaMenu = require('./useMegaMenu.js');
11
-
12
- const withBaseName = core.makePrefixer("saltMegaMenuListItem");
13
- function MegaMenuListItemAction(props) {
14
- return core.renderProps("a", props);
15
- }
16
- const MegaMenuListItem = react.forwardRef(function MegaMenuListItem2({ children, className, onClick, render, href, current, ...rest }, ref) {
17
- const targetWindow = window.useWindow();
18
- const megaMenu = useMegaMenu.useMegaMenu();
19
- styles.useComponentCssInjection({
20
- testId: "salt-mega-menu-list-item",
21
- css: MegaMenuListItem$1,
22
- window: targetWindow
23
- });
24
- const handleClick = (event) => {
25
- onClick == null ? void 0 : onClick(event);
26
- megaMenu.setOpen(false);
27
- };
28
- return /* @__PURE__ */ jsxRuntime.jsx("li", { ref, className: clsx.clsx(withBaseName(), className), ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
29
- MegaMenuListItemAction,
30
- {
31
- className: withBaseName("wrapper"),
32
- href,
33
- onClick: handleClick,
34
- "aria-current": current ? "page" : void 0,
35
- render,
36
- children: react.Children.map(
37
- children,
38
- (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("content"), children: child }) : child
39
- )
40
- }
41
- ) });
42
- });
43
-
44
- exports.MegaMenuListItem = MegaMenuListItem;
45
- //# sourceMappingURL=MegaMenuListItem.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MegaMenuListItem.js","sources":["../src/mega-menu/MegaMenuListItem.tsx"],"sourcesContent":["import { makePrefixer, type RenderPropsType, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEventHandler,\n type ReactNode,\n} from \"react\";\nimport megaMenuListItemCss from \"./MegaMenuListItem.css\";\nimport { useMegaMenu } from \"./useMegaMenu\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuListItem\");\n\n// biome-ignore lint/suspicious/noExplicitAny: We don't know the exact type here\nfunction MegaMenuListItemAction(props: ComponentPropsWithoutRef<any>) {\n return renderProps(\"a\", props);\n}\n\nexport interface MegaMenuListItemProps\n extends Omit<ComponentPropsWithoutRef<\"li\">, \"onClick\"> {\n /**\n * The content of the mega menu item.\n */\n children?: ReactNode;\n /**\n * Whether the item is the current page. Sets `aria-current=\"page\"`\n */\n current?: boolean;\n /**\n * Href passed to the link action element.\n */\n href?: string;\n /**\n * Called when the item's action is activated, before the menu closes.\n */\n onClick?: MouseEventHandler<HTMLAnchorElement>;\n /**\n * Render prop to enable customization of the underlying action element (e.g. a router `Link`).\n */\n render?: RenderPropsType[\"render\"];\n}\n\nexport const MegaMenuListItem = forwardRef<\n HTMLLIElement,\n MegaMenuListItemProps\n>(function MegaMenuListItem(\n { children, className, onClick, render, href, current, ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n const megaMenu = useMegaMenu();\n\n useComponentCssInjection({\n testId: \"salt-mega-menu-list-item\",\n css: megaMenuListItemCss,\n window: targetWindow,\n });\n\n const handleClick: MouseEventHandler<HTMLAnchorElement> = (event) => {\n onClick?.(event);\n megaMenu.setOpen(false);\n };\n\n return (\n <li ref={ref} className={clsx(withBaseName(), className)} {...rest}>\n <MegaMenuListItemAction\n className={withBaseName(\"wrapper\")}\n href={href}\n onClick={handleClick}\n aria-current={current ? \"page\" : undefined}\n render={render}\n >\n {Children.map(children, (child) =>\n typeof child === \"string\" || typeof child === \"number\" ? (\n <span className={withBaseName(\"content\")}>{child}</span>\n ) : (\n child\n ),\n )}\n </MegaMenuListItemAction>\n </li>\n );\n});\n"],"names":["makePrefixer","renderProps","forwardRef","MegaMenuListItem","useWindow","useMegaMenu","useComponentCssInjection","megaMenuListItemCss","jsx","clsx","Children"],"mappings":";;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA;AAGxD,SAAS,uBAAuB,KAAA,EAAsC;AACpE,EAAA,OAAOC,gBAAA,CAAY,KAAK,KAAK,CAAA;AAC/B;AA0BO,MAAM,gBAAA,GAAmBC,gBAAA,CAG9B,SAASC,iBAAAA,CACT,EAAE,QAAA,EAAU,SAAA,EAAW,OAAA,EAAS,MAAA,EAAQ,IAAA,EAAM,OAAA,EAAS,GAAG,IAAA,IAC1D,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAA,MAAM,WAAWC,uBAAA,EAAY;AAE7B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,0BAAA;AAAA,IACR,GAAA,EAAKC,kBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,WAAA,GAAoD,CAAC,KAAA,KAAU;AACnE,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,IAAA,QAAA,CAAS,QAAQ,KAAK,CAAA;AAAA,EACxB,CAAA;AAEA,EAAA,uBACEC,cAAA,CAAC,IAAA,EAAA,EAAG,GAAA,EAAU,SAAA,EAAWC,SAAA,CAAK,cAAa,EAAG,SAAS,CAAA,EAAI,GAAG,IAAA,EAC5D,QAAA,kBAAAD,cAAA;AAAA,IAAC,sBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACjC,IAAA;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MACT,cAAA,EAAc,UAAU,MAAA,GAAS,MAAA;AAAA,MACjC,MAAA;AAAA,MAEC,QAAA,EAAAE,cAAA,CAAS,GAAA;AAAA,QAAI,QAAA;AAAA,QAAU,CAAC,KAAA,KACvB,OAAO,KAAA,KAAU,YAAY,OAAO,KAAA,KAAU,QAAA,mBAC5CF,cAAA,CAAC,UAAK,SAAA,EAAW,YAAA,CAAa,SAAS,CAAA,EAAI,iBAAM,CAAA,GAEjD;AAAA;AAEJ;AAAA,GACF,EACF,CAAA;AAEJ,CAAC;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = ".saltMegaMenuPanel {\n /* Single horizontal row: optional side content, the center navigation area,\n optional side content. Position is derived from source order alone, so\n authors need no wrapper scaffolding. */\n --saltMegaMenuPanel-availableWidth: calc(100vw - var(--salt-spacing-600));\n display: flex;\n align-items: stretch;\n inline-size: var(--saltMegaMenuPanel-inlineSize, fit-content);\n max-inline-size: var(--saltMegaMenuPanel-maxInlineSize, var(--saltMegaMenuPanel-availableWidth));\n max-block-size: 90vh;\n overflow-x: hidden;\n overflow-y: auto;\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner, 0);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n background: var(--salt-container-primary-background);\n box-shadow: var(--salt-overlayable-shadow-modal);\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=MegaMenuPanel.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MegaMenuPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,88 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var react$1 = require('@floating-ui/react');
5
- var core = require('@salt-ds/core');
6
- var styles = require('@salt-ds/styles');
7
- var window = require('@salt-ds/window');
8
- var clsx = require('clsx');
9
- var react = require('react');
10
- var MegaMenuPanel$1 = require('./MegaMenuPanel.css.js');
11
- var useMegaMenu = require('./useMegaMenu.js');
12
- var useMegaMenuNavigation = require('./useMegaMenuNavigation.js');
13
- var usePageMargin = require('./usePageMargin.js');
14
-
15
- const withBaseName = core.makePrefixer("saltMegaMenuPanel");
16
- const MegaMenuPanel = react.forwardRef(
17
- function MegaMenuPanel2({ children, className, id: idProp, ...rest }, ref) {
18
- const targetWindow = window.useWindow();
19
- styles.useComponentCssInjection({
20
- testId: "salt-mega-menu-panel",
21
- css: MegaMenuPanel$1,
22
- window: targetWindow
23
- });
24
- const { Component: FloatingComponent } = core.useFloatingComponent();
25
- const {
26
- openState: isOpen,
27
- floatingRootContext,
28
- placement,
29
- getFloatingProps,
30
- setFloating,
31
- focusFirstItemOnOpenRef,
32
- setPanelId
33
- } = useMegaMenu.useMegaMenu();
34
- const id = core.useId(idProp);
35
- core.useIsomorphicLayoutEffect(() => {
36
- if (id) setPanelId(id);
37
- }, [id, setPanelId]);
38
- const { domReference } = floatingRootContext.elements;
39
- const referenceEl = domReference instanceof HTMLElement ? domReference : null;
40
- const pageMargin = usePageMargin.usePageMargin(referenceEl);
41
- const floatingUIResult = core.useFloatingUI({
42
- rootContext: floatingRootContext,
43
- open: isOpen,
44
- placement,
45
- middleware: [
46
- react$1.offset(1),
47
- react$1.flip({ padding: pageMargin }),
48
- react$1.shift({ padding: pageMargin, limiter: react$1.limitShift() })
49
- ]
50
- });
51
- const floatingEl = floatingRootContext.elements.floating;
52
- const { isPositioned } = floatingUIResult;
53
- react.useEffect(() => {
54
- if (focusFirstItemOnOpenRef.current && isPositioned && floatingEl) {
55
- useMegaMenuNavigation.focusFirstItem(floatingEl);
56
- focusFirstItemOnOpenRef.current = false;
57
- }
58
- }, [focusFirstItemOnOpenRef, isPositioned, floatingEl]);
59
- const floatingProps = getFloatingProps(rest);
60
- const handleRef = core.useForkRef(setFloating, ref);
61
- return /* @__PURE__ */ jsxRuntime.jsx(
62
- FloatingComponent,
63
- {
64
- open: isOpen,
65
- position: floatingUIResult.strategy,
66
- top: floatingUIResult.y ?? 0,
67
- left: floatingUIResult.x ?? 0,
68
- focusManagerProps: {
69
- context: floatingUIResult.context,
70
- modal: false,
71
- initialFocus: -1,
72
- returnFocus: true,
73
- closeOnFocusOut: false,
74
- guards: false
75
- },
76
- className: clsx.clsx(withBaseName(), className),
77
- id,
78
- role: "region",
79
- ...floatingProps,
80
- ref: handleRef,
81
- children
82
- }
83
- );
84
- }
85
- );
86
-
87
- exports.MegaMenuPanel = MegaMenuPanel;
88
- //# sourceMappingURL=MegaMenuPanel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MegaMenuPanel.js","sources":["../src/mega-menu/MegaMenuPanel.tsx"],"sourcesContent":["import { flip, limitShift, offset, shift } from \"@floating-ui/react\";\nimport {\n makePrefixer,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n useId,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n useEffect,\n} from \"react\";\nimport megaMenuPanelCss from \"./MegaMenuPanel.css\";\nimport { useMegaMenu } from \"./useMegaMenu\";\nimport { focusFirstItem } from \"./useMegaMenuNavigation\";\nimport { usePageMargin } from \"./usePageMargin\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuPanel\");\n\nexport interface MegaMenuPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of the mega menu panel.\n */\n children?: ReactNode;\n}\n\nexport const MegaMenuPanel = forwardRef<HTMLDivElement, MegaMenuPanelProps>(\n function MegaMenuPanel({ children, className, id: idProp, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-mega-menu-panel\",\n css: megaMenuPanelCss,\n window: targetWindow,\n });\n\n const { Component: FloatingComponent } = useFloatingComponent();\n const {\n openState: isOpen,\n floatingRootContext,\n placement,\n getFloatingProps,\n setFloating,\n focusFirstItemOnOpenRef,\n setPanelId,\n } = useMegaMenu();\n\n const id = useId(idProp);\n\n // Register the panel's id so the trigger's aria-controls stays in sync.\n useIsomorphicLayoutEffect(() => {\n if (id) setPanelId(id);\n }, [id, setPanelId]);\n\n const { domReference } = floatingRootContext.elements;\n const referenceEl =\n domReference instanceof HTMLElement ? domReference : null;\n const pageMargin = usePageMargin(referenceEl);\n\n const floatingUIResult = useFloatingUI({\n rootContext: floatingRootContext,\n open: isOpen,\n placement,\n middleware: [\n offset(1),\n flip({ padding: pageMargin }),\n shift({ padding: pageMargin, limiter: limitShift() }),\n ],\n });\n\n // Focus the first item on ArrowDown open, after floating-ui has positioned the panel\n const floatingEl = floatingRootContext.elements.floating;\n const { isPositioned } = floatingUIResult;\n useEffect(() => {\n if (focusFirstItemOnOpenRef.current && isPositioned && floatingEl) {\n focusFirstItem(floatingEl);\n focusFirstItemOnOpenRef.current = false;\n }\n }, [focusFirstItemOnOpenRef, isPositioned, floatingEl]);\n\n const floatingProps = getFloatingProps(rest);\n const handleRef = useForkRef<HTMLDivElement>(setFloating, ref);\n\n return (\n <FloatingComponent\n open={isOpen}\n position={floatingUIResult.strategy}\n top={floatingUIResult.y ?? 0}\n left={floatingUIResult.x ?? 0}\n focusManagerProps={{\n context: floatingUIResult.context,\n modal: false,\n initialFocus: -1,\n returnFocus: true,\n closeOnFocusOut: false,\n guards: false,\n }}\n className={clsx(withBaseName(), className)}\n id={id}\n role=\"region\"\n {...floatingProps}\n ref={handleRef}\n >\n {children}\n </FloatingComponent>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","MegaMenuPanel","useWindow","useComponentCssInjection","megaMenuPanelCss","useFloatingComponent","useMegaMenu","useId","useIsomorphicLayoutEffect","usePageMargin","useFloatingUI","offset","flip","shift","limitShift","useEffect","focusFirstItem","useForkRef","jsx","clsx"],"mappings":"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"}
@@ -1,90 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var core = require('@salt-ds/core');
5
- var react = require('react');
6
- var useMegaMenu = require('./useMegaMenu.js');
7
- var useMegaMenuNavigation = require('./useMegaMenuNavigation.js');
8
-
9
- function getAdjacentTrigger(currentTarget, direction) {
10
- const li = currentTarget.closest("li");
11
- if (!li) return null;
12
- const sibling = direction === "next" ? li.nextElementSibling : li.previousElementSibling;
13
- if (!(sibling instanceof HTMLElement)) return null;
14
- return sibling.querySelector(useMegaMenuNavigation.FOCUSABLE_SELECTOR);
15
- }
16
- const MegaMenuTrigger = react.forwardRef(
17
- function MegaMenuTrigger2(props, ref) {
18
- const { children } = props;
19
- const megaMenu = useMegaMenu.useMegaMenu();
20
- const {
21
- getReferenceProps,
22
- setReference,
23
- setOpen,
24
- openState,
25
- focusFirstItemOnOpenRef,
26
- floatingRootContext,
27
- panelId
28
- } = megaMenu;
29
- const handleKeyDown = react.useCallback(
30
- (event) => {
31
- const { key, shiftKey } = event;
32
- if (key === "ArrowRight" || key === "ArrowLeft") {
33
- event.preventDefault();
34
- const direction = key === "ArrowRight" ? "next" : "previous";
35
- const adjacent = getAdjacentTrigger(event.currentTarget, direction);
36
- if (adjacent) {
37
- if (openState) setOpen(false);
38
- focusFirstItemOnOpenRef.current = false;
39
- adjacent.focus();
40
- }
41
- return;
42
- }
43
- if (openState && (key === "ArrowDown" || key === "Tab" && !shiftKey)) {
44
- event.preventDefault();
45
- const floating = floatingRootContext.elements.floating;
46
- if (floating) useMegaMenuNavigation.focusFirstItem(floating);
47
- return;
48
- }
49
- if (openState && key === "Tab" && shiftKey) {
50
- focusFirstItemOnOpenRef.current = false;
51
- setOpen(false);
52
- return;
53
- }
54
- if (!openState && key === "ArrowDown") {
55
- event.preventDefault();
56
- focusFirstItemOnOpenRef.current = true;
57
- setOpen(true);
58
- return;
59
- }
60
- },
61
- [openState, setOpen, floatingRootContext.elements.floating]
62
- );
63
- const handleFloatingRef = core.useForkRef(
64
- core.getRefFromChildren(children),
65
- setReference
66
- );
67
- const handleRef = core.useForkRef(handleFloatingRef, ref);
68
- if (!children || !react.isValidElement(children)) {
69
- return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
70
- }
71
- const childProps = children.props;
72
- const isNavigationItemChild = children.type === core.NavigationItem;
73
- const shouldSyncExpanded = isNavigationItemChild || childProps.expanded !== void 0;
74
- return react.cloneElement(children, {
75
- ...core.mergeProps(
76
- getReferenceProps({
77
- // NavigationItem maps `expanded` to aria-expanded; others get it directly.
78
- ...shouldSyncExpanded ? { expanded: openState } : { "aria-expanded": openState },
79
- ...openState ? { "aria-controls": panelId } : null,
80
- onKeyDown: handleKeyDown
81
- }),
82
- children.props
83
- ),
84
- ref: handleRef
85
- });
86
- }
87
- );
88
-
89
- exports.MegaMenuTrigger = MegaMenuTrigger;
90
- //# sourceMappingURL=MegaMenuTrigger.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MegaMenuTrigger.js","sources":["../src/mega-menu/MegaMenuTrigger.tsx"],"sourcesContent":["import {\n getRefFromChildren,\n mergeProps,\n NavigationItem,\n useForkRef,\n} from \"@salt-ds/core\";\nimport {\n cloneElement,\n forwardRef,\n isValidElement,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n useCallback,\n} from \"react\";\nimport { useMegaMenu } from \"./useMegaMenu\";\nimport { FOCUSABLE_SELECTOR, focusFirstItem } from \"./useMegaMenuNavigation\";\n\nexport interface MegaMenuTriggerProps {\n /**\n * The trigger element for the mega menu, typically a `NavigationItem` or `Button`.\n * Wrap each mega menu in its own `<li>` — arrow-key navigation between triggers depends on it.\n */\n children?: ReactNode;\n}\n\nfunction getAdjacentTrigger(\n currentTarget: HTMLElement,\n direction: \"next\" | \"previous\",\n): HTMLElement | null {\n const li = currentTarget.closest(\"li\");\n if (!li) return null;\n const sibling =\n direction === \"next\" ? li.nextElementSibling : li.previousElementSibling;\n if (!(sibling instanceof HTMLElement)) return null;\n return sibling.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);\n}\n\nexport const MegaMenuTrigger = forwardRef<HTMLElement, MegaMenuTriggerProps>(\n function MegaMenuTrigger(props, ref) {\n const { children } = props;\n const megaMenu = useMegaMenu();\n\n const {\n getReferenceProps,\n setReference,\n setOpen,\n openState,\n focusFirstItemOnOpenRef,\n floatingRootContext,\n panelId,\n } = megaMenu;\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLElement>) => {\n const { key, shiftKey } = event;\n\n // ArrowLeft/Right: move to adjacent trigger in nav bar\n if (key === \"ArrowRight\" || key === \"ArrowLeft\") {\n event.preventDefault();\n const direction = key === \"ArrowRight\" ? \"next\" : \"previous\";\n const adjacent = getAdjacentTrigger(event.currentTarget, direction);\n if (adjacent) {\n if (openState) setOpen(false);\n focusFirstItemOnOpenRef.current = false;\n adjacent.focus();\n }\n return;\n }\n\n // When menu is open: ArrowDown or Tab moves focus into the menu\n if (\n openState &&\n (key === \"ArrowDown\" || (key === \"Tab\" && !shiftKey))\n ) {\n event.preventDefault();\n const floating = floatingRootContext.elements\n .floating as HTMLElement | null;\n if (floating) focusFirstItem(floating);\n return;\n }\n\n // When menu is open: Shift+Tab mirrors arrow left\n if (openState && key === \"Tab\" && shiftKey) {\n focusFirstItemOnOpenRef.current = false;\n setOpen(false);\n return;\n }\n\n // When menu is closed: ArrowDown opens and focuses first item\n if (!openState && key === \"ArrowDown\") {\n event.preventDefault();\n focusFirstItemOnOpenRef.current = true;\n setOpen(true);\n return;\n }\n },\n [openState, setOpen, floatingRootContext.elements.floating],\n );\n\n const handleFloatingRef = useForkRef(\n getRefFromChildren(children),\n setReference,\n );\n const handleRef = useForkRef(handleFloatingRef, ref);\n\n if (!children || !isValidElement<{ ref?: Ref<unknown> }>(children)) {\n return <>{children}</>;\n }\n\n const childProps = children.props as Record<string, unknown>;\n const isNavigationItemChild = children.type === NavigationItem;\n const shouldSyncExpanded =\n isNavigationItemChild || childProps.expanded !== undefined;\n\n return cloneElement(children, {\n ...mergeProps(\n getReferenceProps({\n // NavigationItem maps `expanded` to aria-expanded; others get it directly.\n ...(shouldSyncExpanded\n ? { expanded: openState }\n : { \"aria-expanded\": openState }),\n ...(openState ? { \"aria-controls\": panelId } : null),\n onKeyDown: handleKeyDown,\n }),\n children.props,\n ),\n ref: handleRef,\n });\n },\n);\n"],"names":["FOCUSABLE_SELECTOR","forwardRef","MegaMenuTrigger","useMegaMenu","useCallback","useForkRef","getRefFromChildren","isValidElement","NavigationItem","cloneElement","mergeProps"],"mappings":"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"}
@@ -1,15 +0,0 @@
1
- 'use strict';
2
-
3
- var react = require('react');
4
- var MegaMenuContext = require('./MegaMenuContext.js');
5
-
6
- function useMegaMenu() {
7
- const context = react.useContext(MegaMenuContext.MegaMenuContext);
8
- if (context === void 0) {
9
- throw new Error("useMegaMenu must be used within a MegaMenu");
10
- }
11
- return context;
12
- }
13
-
14
- exports.useMegaMenu = useMegaMenu;
15
- //# sourceMappingURL=useMegaMenu.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useMegaMenu.js","sources":["../src/mega-menu/useMegaMenu.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { MegaMenuContext, type MegaMenuContextValue } from \"./MegaMenuContext\";\n/**\n * Access the nearest MegaMenu context.\n * Must be used within a `MegaMenu` provider.\n */\nexport function useMegaMenu(): MegaMenuContextValue {\n const context = useContext(MegaMenuContext);\n if (context === undefined) {\n throw new Error(\"useMegaMenu must be used within a MegaMenu\");\n }\n return context;\n}\n"],"names":["useContext","MegaMenuContext"],"mappings":";;;;;AAMO,SAAS,WAAA,GAAoC;AAClD,EAAA,MAAM,OAAA,GAAUA,iBAAWC,+BAAe,CAAA;AAC1C,EAAA,IAAI,YAAY,MAAA,EAAW;AACzB,IAAA,MAAM,IAAI,MAAM,4CAA4C,CAAA;AAAA,EAC9D;AACA,EAAA,OAAO,OAAA;AACT;;;;"}