@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,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