@salt-ds/lab 1.0.0-alpha.95 → 1.0.0-alpha.97

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 (220) hide show
  1. package/CHANGELOG.md +63 -0
  2. package/css/salt-lab.css +70 -249
  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 +12 -14
  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-cjs/mega-menu/MegaMenu.js +8 -14
  10. package/dist-cjs/mega-menu/MegaMenu.js.map +1 -1
  11. package/dist-cjs/mega-menu/MegaMenuActions.css.js +6 -0
  12. package/dist-cjs/mega-menu/MegaMenuActions.css.js.map +1 -0
  13. package/dist-cjs/mega-menu/MegaMenuActions.js +33 -0
  14. package/dist-cjs/mega-menu/MegaMenuActions.js.map +1 -0
  15. package/dist-cjs/mega-menu/MegaMenuAside.css.js +6 -0
  16. package/dist-cjs/mega-menu/MegaMenuAside.css.js.map +1 -0
  17. package/dist-cjs/mega-menu/MegaMenuAside.js +33 -0
  18. package/dist-cjs/mega-menu/MegaMenuAside.js.map +1 -0
  19. package/dist-cjs/mega-menu/MegaMenuContent.css.js +6 -0
  20. package/dist-cjs/mega-menu/MegaMenuContent.css.js.map +1 -0
  21. package/dist-cjs/mega-menu/MegaMenuContent.js +25 -0
  22. package/dist-cjs/mega-menu/MegaMenuContent.js.map +1 -0
  23. package/dist-cjs/mega-menu/MegaMenuContext.js.map +1 -1
  24. package/dist-cjs/mega-menu/MegaMenuGroup.css.js +1 -1
  25. package/dist-cjs/mega-menu/MegaMenuGroup.js +10 -25
  26. package/dist-cjs/mega-menu/MegaMenuGroup.js.map +1 -1
  27. package/dist-cjs/mega-menu/MegaMenuGroupContext.js +17 -0
  28. package/dist-cjs/mega-menu/MegaMenuGroupContext.js.map +1 -0
  29. package/dist-cjs/mega-menu/MegaMenuGroupHeading.css.js +6 -0
  30. package/dist-cjs/mega-menu/MegaMenuGroupHeading.css.js.map +1 -0
  31. package/dist-cjs/mega-menu/MegaMenuGroupHeading.js +39 -0
  32. package/dist-cjs/mega-menu/MegaMenuGroupHeading.js.map +1 -0
  33. package/dist-cjs/mega-menu/MegaMenuGroups.css.js +1 -1
  34. package/dist-cjs/mega-menu/MegaMenuGroups.js.map +1 -1
  35. package/dist-cjs/mega-menu/MegaMenuList.css.js +6 -0
  36. package/dist-cjs/mega-menu/MegaMenuList.css.js.map +1 -0
  37. package/dist-cjs/mega-menu/MegaMenuList.js +43 -0
  38. package/dist-cjs/mega-menu/MegaMenuList.js.map +1 -0
  39. package/dist-cjs/mega-menu/MegaMenuListItem.css.js +6 -0
  40. package/dist-cjs/mega-menu/MegaMenuListItem.css.js.map +1 -0
  41. package/dist-cjs/mega-menu/MegaMenuListItem.js +45 -0
  42. package/dist-cjs/mega-menu/MegaMenuListItem.js.map +1 -0
  43. package/dist-cjs/mega-menu/MegaMenuPanel.css.js +1 -1
  44. package/dist-cjs/mega-menu/MegaMenuPanel.js +27 -47
  45. package/dist-cjs/mega-menu/MegaMenuPanel.js.map +1 -1
  46. package/dist-cjs/mega-menu/MegaMenuTrigger.js +16 -18
  47. package/dist-cjs/mega-menu/MegaMenuTrigger.js.map +1 -1
  48. package/dist-cjs/mega-menu/useMegaMenuNavigation.js +282 -0
  49. package/dist-cjs/mega-menu/useMegaMenuNavigation.js.map +1 -0
  50. package/dist-cjs/mega-menu/usePageMargin.js +22 -0
  51. package/dist-cjs/mega-menu/usePageMargin.js.map +1 -0
  52. package/dist-es/common-hooks/useSelection.js +6 -3
  53. package/dist-es/common-hooks/useSelection.js.map +1 -1
  54. package/dist-es/index.js +6 -7
  55. package/dist-es/index.js.map +1 -1
  56. package/dist-es/list/useList.js +7 -1
  57. package/dist-es/list/useList.js.map +1 -1
  58. package/dist-es/mega-menu/MegaMenu.js +9 -15
  59. package/dist-es/mega-menu/MegaMenu.js.map +1 -1
  60. package/dist-es/mega-menu/MegaMenuActions.css.js +4 -0
  61. package/dist-es/mega-menu/MegaMenuActions.css.js.map +1 -0
  62. package/dist-es/mega-menu/MegaMenuActions.js +31 -0
  63. package/dist-es/mega-menu/MegaMenuActions.js.map +1 -0
  64. package/dist-es/mega-menu/MegaMenuAside.css.js +4 -0
  65. package/dist-es/mega-menu/MegaMenuAside.css.js.map +1 -0
  66. package/dist-es/mega-menu/MegaMenuAside.js +31 -0
  67. package/dist-es/mega-menu/MegaMenuAside.js.map +1 -0
  68. package/dist-es/mega-menu/MegaMenuContent.css.js +4 -0
  69. package/dist-es/mega-menu/MegaMenuContent.css.js.map +1 -0
  70. package/dist-es/mega-menu/{MegaMenuHeader.js → MegaMenuContent.js} +8 -8
  71. package/dist-es/mega-menu/MegaMenuContent.js.map +1 -0
  72. package/dist-es/mega-menu/MegaMenuContext.js.map +1 -1
  73. package/dist-es/mega-menu/MegaMenuGroup.css.js +1 -1
  74. package/dist-es/mega-menu/MegaMenuGroup.js +13 -28
  75. package/dist-es/mega-menu/MegaMenuGroup.js.map +1 -1
  76. package/dist-es/mega-menu/MegaMenuGroupContext.js +14 -0
  77. package/dist-es/mega-menu/MegaMenuGroupContext.js.map +1 -0
  78. package/dist-es/mega-menu/MegaMenuGroupHeading.css.js +4 -0
  79. package/dist-es/mega-menu/MegaMenuGroupHeading.css.js.map +1 -0
  80. package/dist-es/mega-menu/MegaMenuGroupHeading.js +37 -0
  81. package/dist-es/mega-menu/MegaMenuGroupHeading.js.map +1 -0
  82. package/dist-es/mega-menu/MegaMenuGroups.css.js +1 -1
  83. package/dist-es/mega-menu/MegaMenuGroups.js.map +1 -1
  84. package/dist-es/mega-menu/MegaMenuList.css.js +4 -0
  85. package/dist-es/mega-menu/MegaMenuList.css.js.map +1 -0
  86. package/dist-es/mega-menu/MegaMenuList.js +41 -0
  87. package/dist-es/mega-menu/MegaMenuList.js.map +1 -0
  88. package/dist-es/mega-menu/MegaMenuListItem.css.js +4 -0
  89. package/dist-es/mega-menu/MegaMenuListItem.css.js.map +1 -0
  90. package/dist-es/mega-menu/MegaMenuListItem.js +43 -0
  91. package/dist-es/mega-menu/MegaMenuListItem.js.map +1 -0
  92. package/dist-es/mega-menu/MegaMenuPanel.css.js +1 -1
  93. package/dist-es/mega-menu/MegaMenuPanel.js +30 -50
  94. package/dist-es/mega-menu/MegaMenuPanel.js.map +1 -1
  95. package/dist-es/mega-menu/MegaMenuTrigger.js +14 -16
  96. package/dist-es/mega-menu/MegaMenuTrigger.js.map +1 -1
  97. package/dist-es/mega-menu/useMegaMenuNavigation.js +278 -0
  98. package/dist-es/mega-menu/useMegaMenuNavigation.js.map +1 -0
  99. package/dist-es/mega-menu/usePageMargin.js +20 -0
  100. package/dist-es/mega-menu/usePageMargin.js.map +1 -0
  101. package/dist-types/index.d.ts +0 -1
  102. package/dist-types/mega-menu/MegaMenu.d.ts +11 -2
  103. package/dist-types/mega-menu/MegaMenuActions.d.ts +10 -0
  104. package/dist-types/mega-menu/MegaMenuAside.d.ts +9 -0
  105. package/dist-types/mega-menu/MegaMenuContent.d.ts +9 -0
  106. package/dist-types/mega-menu/MegaMenuContext.d.ts +6 -7
  107. package/dist-types/mega-menu/MegaMenuGroup.d.ts +4 -3
  108. package/dist-types/mega-menu/MegaMenuGroupContext.d.ts +12 -0
  109. package/dist-types/mega-menu/MegaMenuGroupHeading.d.ts +13 -0
  110. package/dist-types/mega-menu/MegaMenuGroups.d.ts +3 -3
  111. package/dist-types/mega-menu/MegaMenuList.d.ts +16 -0
  112. package/dist-types/mega-menu/MegaMenuListItem.d.ts +25 -0
  113. package/dist-types/mega-menu/MegaMenuPanel.d.ts +2 -2
  114. package/dist-types/mega-menu/MegaMenuTrigger.d.ts +1 -0
  115. package/dist-types/mega-menu/index.d.ts +6 -4
  116. package/dist-types/mega-menu/useMegaMenuNavigation.d.ts +16 -0
  117. package/dist-types/mega-menu/usePageMargin.d.ts +6 -0
  118. package/package.json +2 -2
  119. package/dist-cjs/mega-menu/MegaMenuHeader.css.js +0 -6
  120. package/dist-cjs/mega-menu/MegaMenuHeader.css.js.map +0 -1
  121. package/dist-cjs/mega-menu/MegaMenuHeader.js +0 -25
  122. package/dist-cjs/mega-menu/MegaMenuHeader.js.map +0 -1
  123. package/dist-cjs/mega-menu/MegaMenuItem.css.js +0 -6
  124. package/dist-cjs/mega-menu/MegaMenuItem.css.js.map +0 -1
  125. package/dist-cjs/mega-menu/MegaMenuItem.js +0 -53
  126. package/dist-cjs/mega-menu/MegaMenuItem.js.map +0 -1
  127. package/dist-cjs/mega-menu/MegaMenuSupportingActions.css.js +0 -6
  128. package/dist-cjs/mega-menu/MegaMenuSupportingActions.css.js.map +0 -1
  129. package/dist-cjs/mega-menu/MegaMenuSupportingActions.js +0 -31
  130. package/dist-cjs/mega-menu/MegaMenuSupportingActions.js.map +0 -1
  131. package/dist-cjs/mega-menu/MegaMenuSupportingContent.css.js +0 -6
  132. package/dist-cjs/mega-menu/MegaMenuSupportingContent.css.js.map +0 -1
  133. package/dist-cjs/mega-menu/MegaMenuSupportingContent.js +0 -31
  134. package/dist-cjs/mega-menu/MegaMenuSupportingContent.js.map +0 -1
  135. package/dist-cjs/mega-menu/useMegaMenuKeyboard.js +0 -209
  136. package/dist-cjs/mega-menu/useMegaMenuKeyboard.js.map +0 -1
  137. package/dist-cjs/toolbar-next/ToolbarContentNext.css.js +0 -6
  138. package/dist-cjs/toolbar-next/ToolbarContentNext.css.js.map +0 -1
  139. package/dist-cjs/toolbar-next/ToolbarContentNext.js +0 -32
  140. package/dist-cjs/toolbar-next/ToolbarContentNext.js.map +0 -1
  141. package/dist-cjs/toolbar-next/ToolbarNext.css.js +0 -6
  142. package/dist-cjs/toolbar-next/ToolbarNext.css.js.map +0 -1
  143. package/dist-cjs/toolbar-next/ToolbarNext.js +0 -394
  144. package/dist-cjs/toolbar-next/ToolbarNext.js.map +0 -1
  145. package/dist-cjs/toolbar-next/ToolbarNextOverflow.css.js +0 -6
  146. package/dist-cjs/toolbar-next/ToolbarNextOverflow.css.js.map +0 -1
  147. package/dist-cjs/toolbar-next/ToolbarNextOverflow.js +0 -706
  148. package/dist-cjs/toolbar-next/ToolbarNextOverflow.js.map +0 -1
  149. package/dist-cjs/toolbar-next/ToolbarNextOverflowFloatingBoundary.js +0 -165
  150. package/dist-cjs/toolbar-next/ToolbarNextOverflowFloatingBoundary.js.map +0 -1
  151. package/dist-cjs/toolbar-next/TooltrayNext.css.js +0 -6
  152. package/dist-cjs/toolbar-next/TooltrayNext.css.js.map +0 -1
  153. package/dist-cjs/toolbar-next/TooltrayNext.js +0 -55
  154. package/dist-cjs/toolbar-next/TooltrayNext.js.map +0 -1
  155. package/dist-cjs/toolbar-next/toolbarNextKeyboardUtils.js +0 -409
  156. package/dist-cjs/toolbar-next/toolbarNextKeyboardUtils.js.map +0 -1
  157. package/dist-cjs/toolbar-next/toolbarNextUtils.js +0 -215
  158. package/dist-cjs/toolbar-next/toolbarNextUtils.js.map +0 -1
  159. package/dist-cjs/toolbar-next/useToolbarNextKeyboardNavigation.js +0 -312
  160. package/dist-cjs/toolbar-next/useToolbarNextKeyboardNavigation.js.map +0 -1
  161. package/dist-cjs/toolbar-next/useToolbarNextOverflow.js +0 -743
  162. package/dist-cjs/toolbar-next/useToolbarNextOverflow.js.map +0 -1
  163. package/dist-es/mega-menu/MegaMenuHeader.css.js +0 -4
  164. package/dist-es/mega-menu/MegaMenuHeader.css.js.map +0 -1
  165. package/dist-es/mega-menu/MegaMenuHeader.js.map +0 -1
  166. package/dist-es/mega-menu/MegaMenuItem.css.js +0 -4
  167. package/dist-es/mega-menu/MegaMenuItem.css.js.map +0 -1
  168. package/dist-es/mega-menu/MegaMenuItem.js +0 -51
  169. package/dist-es/mega-menu/MegaMenuItem.js.map +0 -1
  170. package/dist-es/mega-menu/MegaMenuSupportingActions.css.js +0 -4
  171. package/dist-es/mega-menu/MegaMenuSupportingActions.css.js.map +0 -1
  172. package/dist-es/mega-menu/MegaMenuSupportingActions.js +0 -29
  173. package/dist-es/mega-menu/MegaMenuSupportingActions.js.map +0 -1
  174. package/dist-es/mega-menu/MegaMenuSupportingContent.css.js +0 -4
  175. package/dist-es/mega-menu/MegaMenuSupportingContent.css.js.map +0 -1
  176. package/dist-es/mega-menu/MegaMenuSupportingContent.js +0 -29
  177. package/dist-es/mega-menu/MegaMenuSupportingContent.js.map +0 -1
  178. package/dist-es/mega-menu/useMegaMenuKeyboard.js +0 -205
  179. package/dist-es/mega-menu/useMegaMenuKeyboard.js.map +0 -1
  180. package/dist-es/toolbar-next/ToolbarContentNext.css.js +0 -4
  181. package/dist-es/toolbar-next/ToolbarContentNext.css.js.map +0 -1
  182. package/dist-es/toolbar-next/ToolbarContentNext.js +0 -30
  183. package/dist-es/toolbar-next/ToolbarContentNext.js.map +0 -1
  184. package/dist-es/toolbar-next/ToolbarNext.css.js +0 -4
  185. package/dist-es/toolbar-next/ToolbarNext.css.js.map +0 -1
  186. package/dist-es/toolbar-next/ToolbarNext.js +0 -392
  187. package/dist-es/toolbar-next/ToolbarNext.js.map +0 -1
  188. package/dist-es/toolbar-next/ToolbarNextOverflow.css.js +0 -4
  189. package/dist-es/toolbar-next/ToolbarNextOverflow.css.js.map +0 -1
  190. package/dist-es/toolbar-next/ToolbarNextOverflow.js +0 -701
  191. package/dist-es/toolbar-next/ToolbarNextOverflow.js.map +0 -1
  192. package/dist-es/toolbar-next/ToolbarNextOverflowFloatingBoundary.js +0 -159
  193. package/dist-es/toolbar-next/ToolbarNextOverflowFloatingBoundary.js.map +0 -1
  194. package/dist-es/toolbar-next/TooltrayNext.css.js +0 -4
  195. package/dist-es/toolbar-next/TooltrayNext.css.js.map +0 -1
  196. package/dist-es/toolbar-next/TooltrayNext.js +0 -53
  197. package/dist-es/toolbar-next/TooltrayNext.js.map +0 -1
  198. package/dist-es/toolbar-next/toolbarNextKeyboardUtils.js +0 -390
  199. package/dist-es/toolbar-next/toolbarNextKeyboardUtils.js.map +0 -1
  200. package/dist-es/toolbar-next/toolbarNextUtils.js +0 -211
  201. package/dist-es/toolbar-next/toolbarNextUtils.js.map +0 -1
  202. package/dist-es/toolbar-next/useToolbarNextKeyboardNavigation.js +0 -310
  203. package/dist-es/toolbar-next/useToolbarNextKeyboardNavigation.js.map +0 -1
  204. package/dist-es/toolbar-next/useToolbarNextOverflow.js +0 -741
  205. package/dist-es/toolbar-next/useToolbarNextOverflow.js.map +0 -1
  206. package/dist-types/mega-menu/MegaMenuHeader.d.ts +0 -8
  207. package/dist-types/mega-menu/MegaMenuItem.d.ts +0 -13
  208. package/dist-types/mega-menu/MegaMenuSupportingActions.d.ts +0 -8
  209. package/dist-types/mega-menu/MegaMenuSupportingContent.d.ts +0 -8
  210. package/dist-types/mega-menu/useMegaMenuKeyboard.d.ts +0 -30
  211. package/dist-types/toolbar-next/ToolbarContentNext.d.ts +0 -11
  212. package/dist-types/toolbar-next/ToolbarNext.d.ts +0 -12
  213. package/dist-types/toolbar-next/ToolbarNextOverflow.d.ts +0 -34
  214. package/dist-types/toolbar-next/ToolbarNextOverflowFloatingBoundary.d.ts +0 -16
  215. package/dist-types/toolbar-next/TooltrayNext.d.ts +0 -37
  216. package/dist-types/toolbar-next/index.d.ts +0 -3
  217. package/dist-types/toolbar-next/toolbarNextKeyboardUtils.d.ts +0 -39
  218. package/dist-types/toolbar-next/toolbarNextUtils.d.ts +0 -42
  219. package/dist-types/toolbar-next/useToolbarNextKeyboardNavigation.d.ts +0 -42
  220. package/dist-types/toolbar-next/useToolbarNextOverflow.d.ts +0 -37
@@ -1,701 +0,0 @@
1
- import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
2
- import { offset, size, flip, shift, useInteractions, useClick, useDismiss } from '@floating-ui/react';
3
- import { makePrefixer, useIcon, useForkRef, useId, useFloatingUI, useFloatingComponent, useIsomorphicLayoutEffect, Button } from '@salt-ds/core';
4
- import { useComponentCssInjection } from '@salt-ds/styles';
5
- import { useWindow } from '@salt-ds/window';
6
- import { clsx } from 'clsx';
7
- import { compute } from 'compute-scroll-into-view';
8
- import { useState, useRef, useCallback, useEffect, cloneElement, Children, isValidElement } from 'react';
9
- import { createPortal } from 'react-dom';
10
- import { ToolbarContentNext } from './ToolbarContentNext.js';
11
- import css_248z from './ToolbarNextOverflow.css.js';
12
- import { useToolbarNextOverflowFloatingBoundary, isTargetInsideOverflowBoundary, getToolbarNextOverflowBoundaryKey, ToolbarNextOverflowFloatingComponentProvider } from './ToolbarNextOverflowFloatingBoundary.js';
13
- import { scheduleToolbarNextFocus, shouldToolbarNextPreserveNativeTab, getDocumentFocusableElements, TOOLBAR_NEXT_SCOPE_ROOT_ATTR, getToolbarNextTabMoveTarget, getToolbarNextFocusMemory, TOOLBAR_NEXT_OVERFLOW_TRIGGER_ATTR, TOOLBAR_NEXT_GROUP_KEY_ATTR, toolbarNextFocusableSelector, TOOLBAR_NEXT_ITEM_ATTR, getToolbarNextScopeFocusableElements } from './toolbarNextKeyboardUtils.js';
14
- import { buildContentOverflowRenderSlots } from './toolbarNextUtils.js';
15
- import { useToolbarNextKeyboardNavigation } from './useToolbarNextKeyboardNavigation.js';
16
-
17
- const withBaseName = makePrefixer("saltToolbarNextOverflow");
18
- const toolbarNextStatefulFocusRootSelector = [
19
- ".saltComboBox-focused",
20
- ".saltDateInput-focused",
21
- ".saltInput-focused"
22
- ].join(", ");
23
- const toolbarNextOverflowFocusScrollRootSelector = [
24
- ".saltComboBox",
25
- ".saltDateInput",
26
- ".saltDropdown",
27
- ".saltInput",
28
- ".saltSwitch"
29
- ].join(", ");
30
- function createToolbarNextFocusEvent(eventName, target, relatedTarget) {
31
- var _a;
32
- const FocusEventCtor = (_a = target.ownerDocument.defaultView) == null ? void 0 : _a.FocusEvent;
33
- const eventInit = {
34
- bubbles: eventName === "focusout",
35
- relatedTarget
36
- };
37
- return FocusEventCtor ? new FocusEventCtor(eventName, eventInit) : new Event(eventName, eventInit);
38
- }
39
- function notifyToolbarNextReparentedFocusLoss(mountNode) {
40
- const activeElement = mountNode.ownerDocument.activeElement;
41
- if (mountNode.contains(activeElement)) {
42
- return;
43
- }
44
- const staleFocusTargets = Array.from(
45
- mountNode.querySelectorAll(
46
- toolbarNextStatefulFocusRootSelector
47
- )
48
- ).map(
49
- (root) => root.querySelector("input") ?? root.querySelector(toolbarNextFocusableSelector)
50
- ).filter((target) => target != null);
51
- for (const target of staleFocusTargets) {
52
- const relatedTarget = activeElement instanceof Element ? activeElement : null;
53
- target.dispatchEvent(
54
- createToolbarNextFocusEvent("blur", target, relatedTarget)
55
- );
56
- target.dispatchEvent(
57
- createToolbarNextFocusEvent("focusout", target, relatedTarget)
58
- );
59
- }
60
- }
61
- function getToolbarNextOverflowFocusScrollTarget(target) {
62
- const itemRoot = target.closest(`[${TOOLBAR_NEXT_ITEM_ATTR}]`);
63
- const controlRoot = target.closest(
64
- toolbarNextOverflowFocusScrollRootSelector
65
- );
66
- return controlRoot && (itemRoot == null ? void 0 : itemRoot.contains(controlRoot)) ? controlRoot : target;
67
- }
68
- function getToolbarNextOverflowPanelInlinePadding(target) {
69
- var _a;
70
- const panelContent = target.closest(
71
- `[${TOOLBAR_NEXT_SCOPE_ROOT_ATTR}]`
72
- );
73
- const styles = (_a = panelContent == null ? void 0 : panelContent.ownerDocument.defaultView) == null ? void 0 : _a.getComputedStyle(panelContent);
74
- return {
75
- left: Number.parseFloat((styles == null ? void 0 : styles.paddingLeft) ?? "0") || 0,
76
- right: Number.parseFloat((styles == null ? void 0 : styles.paddingRight) ?? "0") || 0
77
- };
78
- }
79
- function scrollToolbarNextOverflowTargetIntoView(panel, target) {
80
- if (!panel || !panel.contains(target)) {
81
- return;
82
- }
83
- const scrollTarget = getToolbarNextOverflowFocusScrollTarget(target);
84
- const actions = compute(scrollTarget, {
85
- block: "nearest",
86
- boundary: panel,
87
- inline: "nearest",
88
- scrollMode: "if-needed"
89
- });
90
- for (const { el, left, top } of actions) {
91
- if (el === panel) {
92
- const targetRect = scrollTarget.getBoundingClientRect();
93
- const panelRect = panel.getBoundingClientRect();
94
- const viewportLeft = panelRect.left + panel.clientLeft;
95
- const viewportRight = viewportLeft + panel.clientWidth;
96
- const padding = getToolbarNextOverflowPanelInlinePadding(scrollTarget);
97
- const nextLeft = targetRect.left < viewportLeft + padding.left ? left - padding.left : targetRect.right > viewportRight - padding.right ? left + padding.right : left;
98
- el.scrollLeft = Math.max(0, nextLeft);
99
- } else {
100
- el.scrollLeft = left;
101
- }
102
- el.scrollTop = top;
103
- }
104
- }
105
- function canSeedOverflowFocusMemory(focusMemory, group) {
106
- return (focusMemory == null ? void 0 : focusMemory.type) === "item" && group.items.some((item) => item.id === focusMemory.itemId);
107
- }
108
- function ToolbarNextOverflowItemOwner({
109
- host,
110
- item
111
- }) {
112
- const targetWindow = useWindow();
113
- const [mountNode, setMountNode] = useState(null);
114
- const mainToolbarTabIndexMemoryRef = useRef(
115
- /* @__PURE__ */ new WeakMap()
116
- );
117
- const lastOverflowBoundaryKeyRef = useRef(null);
118
- const currentOverflowBoundaryKey = getToolbarNextOverflowBoundaryKey(host);
119
- if (host) {
120
- lastOverflowBoundaryKeyRef.current = currentOverflowBoundaryKey;
121
- }
122
- const boundaryKey = host ? currentOverflowBoundaryKey : lastOverflowBoundaryKeyRef.current;
123
- useIsomorphicLayoutEffect(() => {
124
- const nextMountNode = targetWindow == null ? void 0 : targetWindow.document.createElement("div");
125
- if (!nextMountNode) {
126
- return;
127
- }
128
- nextMountNode.className = withBaseName("contentHost");
129
- setMountNode(nextMountNode);
130
- return () => {
131
- var _a;
132
- (_a = nextMountNode.parentElement) == null ? void 0 : _a.removeChild(nextMountNode);
133
- };
134
- }, [targetWindow]);
135
- useIsomorphicLayoutEffect(() => {
136
- var _a, _b;
137
- if (!mountNode) {
138
- return;
139
- }
140
- if (host) {
141
- if (mountNode.parentElement !== host) {
142
- host.appendChild(mountNode);
143
- notifyToolbarNextReparentedFocusLoss(mountNode);
144
- }
145
- const isMainToolbarHost = ((_a = host.closest(`[${TOOLBAR_NEXT_SCOPE_ROOT_ATTR}]`)) == null ? void 0 : _a.getAttribute(TOOLBAR_NEXT_SCOPE_ROOT_ATTR)) === "main";
146
- if (isMainToolbarHost) {
147
- const focusableElements = Array.from(
148
- mountNode.querySelectorAll(toolbarNextFocusableSelector)
149
- );
150
- for (const element of focusableElements) {
151
- const rememberedTabIndex = mainToolbarTabIndexMemoryRef.current.get(element);
152
- if (rememberedTabIndex !== void 0) {
153
- if (rememberedTabIndex == null) {
154
- element.removeAttribute("tabindex");
155
- } else {
156
- element.setAttribute("tabindex", rememberedTabIndex);
157
- }
158
- }
159
- }
160
- for (const element of focusableElements) {
161
- mainToolbarTabIndexMemoryRef.current.set(
162
- element,
163
- element.getAttribute("tabindex")
164
- );
165
- }
166
- }
167
- return;
168
- }
169
- notifyToolbarNextReparentedFocusLoss(mountNode);
170
- (_b = mountNode.parentElement) == null ? void 0 : _b.removeChild(mountNode);
171
- }, [host, mountNode]);
172
- if (!mountNode) {
173
- return null;
174
- }
175
- const clonedItem = cloneElement(
176
- item.element,
177
- {
178
- [TOOLBAR_NEXT_GROUP_KEY_ATTR]: item.overflowGroupKey,
179
- [TOOLBAR_NEXT_ITEM_ATTR]: item.id
180
- }
181
- );
182
- const itemContent = /* @__PURE__ */ jsx(ToolbarNextOverflowFloatingComponentProvider, { boundaryKey, children: clonedItem });
183
- return createPortal(itemContent, mountNode);
184
- }
185
- function ToolbarNextOverflowOwners({
186
- hostNodes,
187
- items
188
- }) {
189
- return /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => /* @__PURE__ */ jsx(
190
- ToolbarNextOverflowItemOwner,
191
- {
192
- host: hostNodes[item.id] ?? null,
193
- item
194
- },
195
- item.id
196
- )) });
197
- }
198
- function cloneDecorations(itemId, decorations, slot) {
199
- return Children.toArray(decorations).flatMap((decoration) => {
200
- if (!isValidElement(decoration)) {
201
- return [];
202
- }
203
- return [
204
- cloneElement(decoration, {
205
- key: `${itemId}-${slot}-${String(
206
- decoration.key ?? (typeof decoration.type === "string" ? decoration.type : "decoration")
207
- )}`
208
- })
209
- ];
210
- });
211
- }
212
- function ToolbarNextOverflowTriggerContent({
213
- label,
214
- named
215
- }) {
216
- const { OverflowIcon } = useIcon();
217
- if (named) {
218
- return /* @__PURE__ */ jsx(Fragment, { children: label });
219
- }
220
- return /* @__PURE__ */ jsx(OverflowIcon, { "aria-hidden": true });
221
- }
222
- function getOverflowTriggerLabel(group) {
223
- return group.named ? `${group.label} overflow. Hidden controls.` : "Overflow. Hidden controls.";
224
- }
225
- function ToolbarNextOverflowMenu({
226
- focusMemoryRef,
227
- getItemHostRef,
228
- group,
229
- onItemFocus
230
- }) {
231
- var _a, _b;
232
- const panelId = useId();
233
- const [open, setOpen] = useState(false);
234
- const triggerRef = useRef(null);
235
- const panelRef = useRef(null);
236
- const panelContentRef = useRef(null);
237
- const [panelContentNode, setPanelContentNode] = useState(null);
238
- const wasOpenRef = useRef(false);
239
- const focusedOpenPanelRef = useRef(false);
240
- const openModalityRef = useRef(null);
241
- const floatingBoundary = useToolbarNextOverflowFloatingBoundary();
242
- const {
243
- focusEntryTarget,
244
- handleScopeBlur,
245
- handleScopeFocus,
246
- handleScopeKeyDown,
247
- handleScopePointerDown,
248
- rememberedFocusRef
249
- } = useToolbarNextKeyboardNavigation({
250
- includeTabIndexMinusOne: true,
251
- items: group.items,
252
- scopeRef: panelContentRef
253
- });
254
- const { refs, x, y, strategy, context, elements } = useFloatingUI({
255
- open,
256
- onOpenChange(nextOpen, _, reason) {
257
- setOpen(nextOpen);
258
- if (!nextOpen) {
259
- openModalityRef.current = null;
260
- }
261
- if (!nextOpen && reason === "escape-key") {
262
- scheduleToolbarNextFocus(triggerRef.current);
263
- }
264
- },
265
- placement: "bottom-end",
266
- middleware: [
267
- offset(1),
268
- size({
269
- apply({ elements: elements2, availableHeight }) {
270
- Object.assign(elements2.floating.style, {
271
- maxHeight: `${availableHeight}px`
272
- });
273
- }
274
- }),
275
- flip(),
276
- shift({
277
- padding: 8
278
- })
279
- ]
280
- });
281
- const { getFloatingProps, getReferenceProps } = useInteractions([
282
- useClick(context),
283
- useDismiss(context, {
284
- escapeKey: false,
285
- outsidePress(event) {
286
- return !isTargetInsideOverflowBoundary(
287
- panelContentRef.current,
288
- floatingBoundary,
289
- group.key,
290
- event.target
291
- );
292
- }
293
- })
294
- ]);
295
- const handleTriggerKeyDown = useCallback(
296
- (event) => {
297
- if (!open && ["Enter", " "].includes(event.key)) {
298
- event.preventDefault();
299
- openModalityRef.current = "keyboard";
300
- setOpen(true);
301
- return;
302
- }
303
- if (open && event.key === "Escape") {
304
- event.preventDefault();
305
- setOpen(false);
306
- scheduleToolbarNextFocus(triggerRef.current);
307
- }
308
- },
309
- [open]
310
- );
311
- const handleTriggerPointerDown = useCallback(
312
- (event) => {
313
- if (!open && event.button === 0) {
314
- openModalityRef.current = "pointer";
315
- }
316
- },
317
- [open]
318
- );
319
- const handleTriggerMouseDown = useCallback(
320
- (event) => {
321
- if (!open && event.button === 0) {
322
- openModalityRef.current = "pointer";
323
- }
324
- },
325
- [open]
326
- );
327
- const handlePanelKeyDown = useCallback((event) => {
328
- var _a2;
329
- if (event.key === "Tab") {
330
- const panelContent = panelContentRef.current;
331
- const target = event.target;
332
- if (panelContent && target instanceof HTMLElement && shouldToolbarNextPreserveNativeTab(target)) {
333
- const focusableElements = getDocumentFocusableElements(
334
- panelContent.ownerDocument
335
- );
336
- const currentIndex = focusableElements.indexOf(target);
337
- const nextFocusTarget = focusableElements[currentIndex + (event.shiftKey ? -1 : 1)];
338
- if (currentIndex !== -1 && nextFocusTarget && panelContent.contains(nextFocusTarget)) {
339
- return;
340
- }
341
- }
342
- }
343
- if (event.key === "Tab" && !event.shiftKey) {
344
- const toolbarRoot = (_a2 = triggerRef.current) == null ? void 0 : _a2.closest(
345
- `[${TOOLBAR_NEXT_SCOPE_ROOT_ATTR}]`
346
- );
347
- const nextFocusTarget = toolbarRoot ? getToolbarNextTabMoveTarget(toolbarRoot, false) : null;
348
- if (nextFocusTarget) {
349
- event.preventDefault();
350
- event.stopPropagation();
351
- setOpen(false);
352
- scheduleToolbarNextFocus(nextFocusTarget);
353
- }
354
- return;
355
- }
356
- if (event.key === "Tab" && event.shiftKey) {
357
- event.preventDefault();
358
- event.stopPropagation();
359
- setOpen(false);
360
- scheduleToolbarNextFocus(triggerRef.current);
361
- return;
362
- }
363
- if (event.key === "Escape") {
364
- event.preventDefault();
365
- event.stopPropagation();
366
- setOpen(false);
367
- scheduleToolbarNextFocus(triggerRef.current);
368
- }
369
- }, []);
370
- const handleTriggerRef = useForkRef(
371
- triggerRef,
372
- refs.setReference
373
- );
374
- const handlePanelRef = useForkRef(panelRef, refs.setFloating);
375
- const handlePanelContentRef = useForkRef(
376
- panelContentRef,
377
- setPanelContentNode
378
- );
379
- const handlePanelFocus = useCallback(
380
- (event) => {
381
- handleScopeFocus(event);
382
- const panelContent = panelContentRef.current;
383
- const target = event.target;
384
- if (!panelContent || !(target instanceof HTMLElement)) {
385
- return;
386
- }
387
- const focusMemory = getToolbarNextFocusMemory(panelContent, target, {
388
- includeTabIndexMinusOne: true
389
- });
390
- if ((focusMemory == null ? void 0 : focusMemory.type) !== "item") {
391
- return;
392
- }
393
- scrollToolbarNextOverflowTargetIntoView(panelRef.current, target);
394
- onItemFocus == null ? void 0 : onItemFocus(focusMemory.itemId, focusMemory.controlIndex);
395
- },
396
- [handleScopeFocus, onItemFocus]
397
- );
398
- const { Component: FloatingComponent } = useFloatingComponent();
399
- useEffect(() => {
400
- if (open && !wasOpenRef.current) {
401
- const externalFocusMemory = focusMemoryRef == null ? void 0 : focusMemoryRef.current;
402
- if (canSeedOverflowFocusMemory(externalFocusMemory, group)) {
403
- rememberedFocusRef.current = externalFocusMemory;
404
- }
405
- if (openModalityRef.current !== "pointer") {
406
- focusEntryTarget();
407
- }
408
- }
409
- wasOpenRef.current = open;
410
- }, [focusEntryTarget, focusMemoryRef, group, open, rememberedFocusRef]);
411
- useEffect(() => {
412
- if (!open || !panelContentNode) {
413
- return;
414
- }
415
- const handleFocusIn = (event) => {
416
- handlePanelFocus(event);
417
- };
418
- const handleFocusOut = (event) => {
419
- if (isTargetInsideOverflowBoundary(
420
- panelContentRef.current,
421
- floatingBoundary,
422
- group.key,
423
- event.relatedTarget
424
- )) {
425
- return;
426
- }
427
- handleScopeBlur(event);
428
- };
429
- const handleKeyDownCapture = (event) => {
430
- handleScopeKeyDown(event);
431
- };
432
- const handlePointerDownCapture = (event) => {
433
- handleScopePointerDown(event);
434
- };
435
- const handleKeyDown = (event) => {
436
- if (!event.defaultPrevented) {
437
- handlePanelKeyDown(event);
438
- }
439
- };
440
- panelContentNode.addEventListener("focusin", handleFocusIn);
441
- panelContentNode.addEventListener("focusout", handleFocusOut);
442
- panelContentNode.addEventListener("keydown", handleKeyDownCapture, true);
443
- panelContentNode.addEventListener(
444
- "pointerdown",
445
- handlePointerDownCapture,
446
- true
447
- );
448
- panelContentNode.addEventListener("keydown", handleKeyDown);
449
- return () => {
450
- panelContentNode.removeEventListener("focusin", handleFocusIn);
451
- panelContentNode.removeEventListener("focusout", handleFocusOut);
452
- panelContentNode.removeEventListener(
453
- "keydown",
454
- handleKeyDownCapture,
455
- true
456
- );
457
- panelContentNode.removeEventListener(
458
- "pointerdown",
459
- handlePointerDownCapture,
460
- true
461
- );
462
- panelContentNode.removeEventListener("keydown", handleKeyDown);
463
- };
464
- }, [
465
- handlePanelFocus,
466
- handlePanelKeyDown,
467
- handleScopeBlur,
468
- handleScopeKeyDown,
469
- handleScopePointerDown,
470
- floatingBoundary,
471
- group.key,
472
- open,
473
- panelContentNode
474
- ]);
475
- useIsomorphicLayoutEffect(() => {
476
- if (!open) {
477
- focusedOpenPanelRef.current = false;
478
- return;
479
- }
480
- if (!panelContentNode || focusedOpenPanelRef.current || openModalityRef.current === "pointer") {
481
- return;
482
- }
483
- const getPanelFocusables = () => getToolbarNextScopeFocusableElements(panelContentNode, {
484
- includeTabIndexMinusOne: true
485
- });
486
- const focusEntryWhenReady = () => {
487
- const panelFocusables = getPanelFocusables();
488
- if (panelFocusables.length === 0) {
489
- return false;
490
- }
491
- focusedOpenPanelRef.current = true;
492
- focusEntryTarget();
493
- return true;
494
- };
495
- if (focusEntryWhenReady()) {
496
- return;
497
- }
498
- const panelWindow = panelContentNode.ownerDocument.defaultView;
499
- const mutationObserverCtor = panelWindow == null ? void 0 : panelWindow.MutationObserver;
500
- const resizeObserverCtor = panelWindow == null ? void 0 : panelWindow.ResizeObserver;
501
- let mutationObserver = null;
502
- let resizeObserver = null;
503
- mutationObserver = mutationObserverCtor != null ? new mutationObserverCtor(() => {
504
- if (focusEntryWhenReady()) {
505
- mutationObserver == null ? void 0 : mutationObserver.disconnect();
506
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
507
- }
508
- }) : null;
509
- resizeObserver = resizeObserverCtor != null ? new resizeObserverCtor(() => {
510
- if (focusEntryWhenReady()) {
511
- mutationObserver == null ? void 0 : mutationObserver.disconnect();
512
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
513
- }
514
- }) : null;
515
- mutationObserver == null ? void 0 : mutationObserver.observe(panelContentNode, {
516
- childList: true,
517
- subtree: true
518
- });
519
- resizeObserver == null ? void 0 : resizeObserver.observe(panelContentNode);
520
- return () => {
521
- mutationObserver == null ? void 0 : mutationObserver.disconnect();
522
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
523
- };
524
- }, [focusEntryTarget, open, panelContentNode]);
525
- return /* @__PURE__ */ jsxs(
526
- "div",
527
- {
528
- className: withBaseName("menu"),
529
- "data-overflowgroup": group.overflowGroup,
530
- children: [
531
- /* @__PURE__ */ jsx(
532
- Button,
533
- {
534
- appearance: "transparent",
535
- "aria-controls": panelId,
536
- "aria-expanded": open,
537
- "aria-label": getOverflowTriggerLabel(group),
538
- className: withBaseName("trigger"),
539
- ...{
540
- [TOOLBAR_NEXT_GROUP_KEY_ATTR]: group.key,
541
- [TOOLBAR_NEXT_OVERFLOW_TRIGGER_ATTR]: ""
542
- },
543
- ...getReferenceProps({
544
- onKeyDown: handleTriggerKeyDown,
545
- onMouseDown: handleTriggerMouseDown,
546
- onPointerDown: handleTriggerPointerDown
547
- }),
548
- ref: handleTriggerRef,
549
- sentiment: "neutral",
550
- children: /* @__PURE__ */ jsx(
551
- ToolbarNextOverflowTriggerContent,
552
- {
553
- label: group.label,
554
- named: group.named
555
- }
556
- )
557
- }
558
- ),
559
- /* @__PURE__ */ jsx(
560
- FloatingComponent,
561
- {
562
- ...getFloatingProps({
563
- role: "presentation"
564
- }),
565
- className: withBaseName("panel"),
566
- focusManagerProps: context ? {
567
- context,
568
- initialFocus: -1,
569
- returnFocus: false,
570
- modal: false,
571
- closeOnFocusOut: false
572
- } : void 0,
573
- id: panelId,
574
- left: x ?? 0,
575
- open,
576
- position: strategy,
577
- ref: handlePanelRef,
578
- top: y ?? 0,
579
- width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
580
- height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
581
- children: /* @__PURE__ */ jsx(
582
- "div",
583
- {
584
- "aria-label": `${group.label} overflow`,
585
- "aria-orientation": "horizontal",
586
- className: withBaseName("panelContent"),
587
- ...{ [TOOLBAR_NEXT_SCOPE_ROOT_ATTR]: group.key },
588
- role: "toolbar",
589
- ref: handlePanelContentRef,
590
- children: group.items.map((item, index) => /* @__PURE__ */ jsxs(
591
- "div",
592
- {
593
- className: withBaseName("panelItem"),
594
- children: [
595
- index > 0 && item.leadingDecorations.length > 0 && cloneDecorations(item.id, item.leadingDecorations, "leading"),
596
- /* @__PURE__ */ jsx(
597
- "div",
598
- {
599
- className: withBaseName("itemHost"),
600
- ref: open ? getItemHostRef(item.id, "overflow") : null
601
- }
602
- ),
603
- cloneDecorations(item.id, item.trailingDecorations, "trailing")
604
- ]
605
- },
606
- `${group.id}-${item.id}`
607
- ))
608
- }
609
- )
610
- }
611
- )
612
- ]
613
- }
614
- );
615
- }
616
- function ToolbarNextOverflowContent({
617
- content,
618
- focusMemoryRef,
619
- getItemHostRef,
620
- getItemRef,
621
- getNamedTriggerRef,
622
- getContentRef,
623
- onItemFocus,
624
- overflowGroups,
625
- overflowedIds
626
- }) {
627
- const targetWindow = useWindow();
628
- useComponentCssInjection({
629
- testId: "salt-toolbar-next-overflow",
630
- css: css_248z,
631
- window: targetWindow
632
- });
633
- const { className, ...contentProps } = content.props;
634
- const handleContentRef = useForkRef(content.ref, getContentRef(content.key));
635
- const overflowGroupByKey = new Map(
636
- overflowGroups.map((group) => [group.key, group])
637
- );
638
- const renderSlots = buildContentOverflowRenderSlots(
639
- content.items,
640
- overflowedIds,
641
- new Set(overflowGroups.map((group) => group.key))
642
- );
643
- return /* @__PURE__ */ jsx(
644
- ToolbarContentNext,
645
- {
646
- ...contentProps,
647
- "data-implicit": content.implicit || void 0,
648
- className: clsx(className, withBaseName("content")),
649
- position: content.position,
650
- ref: handleContentRef,
651
- children: renderSlots.map(
652
- ({
653
- item,
654
- overflowed,
655
- showLeadingDecorations,
656
- showTrailingDecorations,
657
- triggerGroupKey
658
- }) => {
659
- const triggerGroup = triggerGroupKey != null ? overflowGroupByKey.get(triggerGroupKey) : void 0;
660
- return /* @__PURE__ */ jsxs(
661
- "div",
662
- {
663
- className: withBaseName("slot"),
664
- "data-align": item.align,
665
- "data-priority": item.overflowPriority,
666
- ref: triggerGroup ? getNamedTriggerRef(item.id) : getItemRef(item.id),
667
- children: [
668
- showLeadingDecorations ? cloneDecorations(item.id, item.leadingDecorations, "leading") : null,
669
- !overflowed ? /* @__PURE__ */ jsx("div", { className: withBaseName("item"), children: /* @__PURE__ */ jsx(
670
- "div",
671
- {
672
- className: withBaseName("itemHost"),
673
- ref: getItemHostRef(item.id, "main")
674
- }
675
- ) }) : null,
676
- triggerGroup ? /* @__PURE__ */ jsx("div", { className: withBaseName("item"), children: /* @__PURE__ */ jsx(
677
- ToolbarNextOverflowMenu,
678
- {
679
- focusMemoryRef,
680
- getItemHostRef,
681
- group: triggerGroup,
682
- onItemFocus
683
- }
684
- ) }) : null,
685
- showTrailingDecorations ? cloneDecorations(
686
- item.id,
687
- item.trailingDecorations,
688
- "trailing"
689
- ) : null
690
- ]
691
- },
692
- triggerGroup ? `${content.key}-${triggerGroup.id}-anchor-${item.id}` : item.id
693
- );
694
- }
695
- )
696
- }
697
- );
698
- }
699
-
700
- export { ToolbarNextOverflowContent, ToolbarNextOverflowMenu, ToolbarNextOverflowOwners, ToolbarNextOverflowTriggerContent };
701
- //# sourceMappingURL=ToolbarNextOverflow.js.map