@salt-ds/lab 1.0.0-alpha.92 → 1.0.0-alpha.94

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 (204) hide show
  1. package/CHANGELOG.md +116 -0
  2. package/css/salt-lab.css +166 -249
  3. package/dist-cjs/index.js +6 -24
  4. package/dist-cjs/index.js.map +1 -1
  5. package/dist-cjs/toolbar-next/ToolbarContentNext.css.js +6 -0
  6. package/dist-cjs/toolbar-next/ToolbarContentNext.css.js.map +1 -0
  7. package/dist-cjs/toolbar-next/ToolbarContentNext.js +32 -0
  8. package/dist-cjs/toolbar-next/ToolbarContentNext.js.map +1 -0
  9. package/dist-cjs/toolbar-next/ToolbarNext.css.js +6 -0
  10. package/dist-cjs/toolbar-next/ToolbarNext.css.js.map +1 -0
  11. package/dist-cjs/toolbar-next/ToolbarNext.js +394 -0
  12. package/dist-cjs/toolbar-next/ToolbarNext.js.map +1 -0
  13. package/dist-cjs/toolbar-next/ToolbarNextOverflow.css.js +6 -0
  14. package/dist-cjs/toolbar-next/ToolbarNextOverflow.css.js.map +1 -0
  15. package/dist-cjs/toolbar-next/ToolbarNextOverflow.js +705 -0
  16. package/dist-cjs/toolbar-next/ToolbarNextOverflow.js.map +1 -0
  17. package/dist-cjs/toolbar-next/ToolbarNextOverflowFloatingBoundary.js +165 -0
  18. package/dist-cjs/toolbar-next/ToolbarNextOverflowFloatingBoundary.js.map +1 -0
  19. package/dist-cjs/toolbar-next/TooltrayNext.css.js +6 -0
  20. package/dist-cjs/toolbar-next/TooltrayNext.css.js.map +1 -0
  21. package/dist-cjs/toolbar-next/TooltrayNext.js +55 -0
  22. package/dist-cjs/toolbar-next/TooltrayNext.js.map +1 -0
  23. package/dist-cjs/toolbar-next/toolbarNextKeyboardUtils.js +391 -0
  24. package/dist-cjs/toolbar-next/toolbarNextKeyboardUtils.js.map +1 -0
  25. package/dist-cjs/toolbar-next/toolbarNextUtils.js +215 -0
  26. package/dist-cjs/toolbar-next/toolbarNextUtils.js.map +1 -0
  27. package/dist-cjs/toolbar-next/useToolbarNextKeyboardNavigation.js +334 -0
  28. package/dist-cjs/toolbar-next/useToolbarNextKeyboardNavigation.js.map +1 -0
  29. package/dist-cjs/toolbar-next/useToolbarNextOverflow.js +743 -0
  30. package/dist-cjs/toolbar-next/useToolbarNextOverflow.js.map +1 -0
  31. package/dist-es/index.js +3 -12
  32. package/dist-es/index.js.map +1 -1
  33. package/dist-es/toolbar-next/ToolbarContentNext.css.js +4 -0
  34. package/dist-es/toolbar-next/ToolbarContentNext.css.js.map +1 -0
  35. package/dist-es/toolbar-next/ToolbarContentNext.js +30 -0
  36. package/dist-es/toolbar-next/ToolbarContentNext.js.map +1 -0
  37. package/dist-es/toolbar-next/ToolbarNext.css.js +4 -0
  38. package/dist-es/toolbar-next/ToolbarNext.css.js.map +1 -0
  39. package/dist-es/toolbar-next/ToolbarNext.js +392 -0
  40. package/dist-es/toolbar-next/ToolbarNext.js.map +1 -0
  41. package/dist-es/toolbar-next/ToolbarNextOverflow.css.js +4 -0
  42. package/dist-es/toolbar-next/ToolbarNextOverflow.css.js.map +1 -0
  43. package/dist-es/toolbar-next/ToolbarNextOverflow.js +700 -0
  44. package/dist-es/toolbar-next/ToolbarNextOverflow.js.map +1 -0
  45. package/dist-es/toolbar-next/ToolbarNextOverflowFloatingBoundary.js +159 -0
  46. package/dist-es/toolbar-next/ToolbarNextOverflowFloatingBoundary.js.map +1 -0
  47. package/dist-es/toolbar-next/TooltrayNext.css.js +4 -0
  48. package/dist-es/toolbar-next/TooltrayNext.css.js.map +1 -0
  49. package/dist-es/toolbar-next/TooltrayNext.js +53 -0
  50. package/dist-es/toolbar-next/TooltrayNext.js.map +1 -0
  51. package/dist-es/toolbar-next/toolbarNextKeyboardUtils.js +372 -0
  52. package/dist-es/toolbar-next/toolbarNextKeyboardUtils.js.map +1 -0
  53. package/dist-es/toolbar-next/toolbarNextUtils.js +211 -0
  54. package/dist-es/toolbar-next/toolbarNextUtils.js.map +1 -0
  55. package/dist-es/toolbar-next/useToolbarNextKeyboardNavigation.js +332 -0
  56. package/dist-es/toolbar-next/useToolbarNextKeyboardNavigation.js.map +1 -0
  57. package/dist-es/toolbar-next/useToolbarNextOverflow.js +741 -0
  58. package/dist-es/toolbar-next/useToolbarNextOverflow.js.map +1 -0
  59. package/dist-types/index.d.ts +1 -2
  60. package/dist-types/toolbar-next/ToolbarContentNext.d.ts +11 -0
  61. package/dist-types/toolbar-next/ToolbarNext.d.ts +12 -0
  62. package/dist-types/toolbar-next/ToolbarNextOverflow.d.ts +34 -0
  63. package/dist-types/toolbar-next/ToolbarNextOverflowFloatingBoundary.d.ts +16 -0
  64. package/dist-types/toolbar-next/TooltrayNext.d.ts +37 -0
  65. package/dist-types/toolbar-next/index.d.ts +3 -0
  66. package/dist-types/toolbar-next/toolbarNextKeyboardUtils.d.ts +39 -0
  67. package/dist-types/toolbar-next/toolbarNextUtils.d.ts +42 -0
  68. package/dist-types/toolbar-next/useToolbarNextKeyboardNavigation.d.ts +41 -0
  69. package/dist-types/toolbar-next/useToolbarNextOverflow.d.ts +37 -0
  70. package/package.json +2 -2
  71. package/dist-cjs/side-panel/SidePanel.css.js +0 -6
  72. package/dist-cjs/side-panel/SidePanel.css.js.map +0 -1
  73. package/dist-cjs/side-panel/SidePanel.js +0 -197
  74. package/dist-cjs/side-panel/SidePanel.js.map +0 -1
  75. package/dist-cjs/side-panel/SidePanelCloseButton.js +0 -38
  76. package/dist-cjs/side-panel/SidePanelCloseButton.js.map +0 -1
  77. package/dist-cjs/side-panel/SidePanelContent.css.js +0 -6
  78. package/dist-cjs/side-panel/SidePanelContent.css.js.map +0 -1
  79. package/dist-cjs/side-panel/SidePanelContent.js +0 -66
  80. package/dist-cjs/side-panel/SidePanelContent.js.map +0 -1
  81. package/dist-cjs/side-panel/SidePanelHeader.css.js +0 -6
  82. package/dist-cjs/side-panel/SidePanelHeader.css.js.map +0 -1
  83. package/dist-cjs/side-panel/SidePanelHeader.js +0 -26
  84. package/dist-cjs/side-panel/SidePanelHeader.js.map +0 -1
  85. package/dist-cjs/side-panel/SidePanelProvider.js +0 -78
  86. package/dist-cjs/side-panel/SidePanelProvider.js.map +0 -1
  87. package/dist-cjs/side-panel/SidePanelTitle.css.js +0 -6
  88. package/dist-cjs/side-panel/SidePanelTitle.css.js.map +0 -1
  89. package/dist-cjs/side-panel/SidePanelTitle.js +0 -48
  90. package/dist-cjs/side-panel/SidePanelTitle.js.map +0 -1
  91. package/dist-cjs/side-panel/SidePanelTrigger.js +0 -37
  92. package/dist-cjs/side-panel/SidePanelTrigger.js.map +0 -1
  93. package/dist-cjs/side-panel/internal/SidePanelContext.js +0 -32
  94. package/dist-cjs/side-panel/internal/SidePanelContext.js.map +0 -1
  95. package/dist-cjs/side-panel/internal/useIsScrollable.js +0 -50
  96. package/dist-cjs/side-panel/internal/useIsScrollable.js.map +0 -1
  97. package/dist-cjs/side-panel/internal/useSidePanelTabOrder.js +0 -214
  98. package/dist-cjs/side-panel/internal/useSidePanelTabOrder.js.map +0 -1
  99. package/dist-cjs/side-panel/useSidePanel.js +0 -43
  100. package/dist-cjs/side-panel/useSidePanel.js.map +0 -1
  101. package/dist-cjs/tree/Tree.css.js +0 -6
  102. package/dist-cjs/tree/Tree.css.js.map +0 -1
  103. package/dist-cjs/tree/Tree.js +0 -300
  104. package/dist-cjs/tree/Tree.js.map +0 -1
  105. package/dist-cjs/tree/TreeContext.js +0 -31
  106. package/dist-cjs/tree/TreeContext.js.map +0 -1
  107. package/dist-cjs/tree/TreeNode.css.js +0 -6
  108. package/dist-cjs/tree/TreeNode.css.js.map +0 -1
  109. package/dist-cjs/tree/TreeNode.js +0 -103
  110. package/dist-cjs/tree/TreeNode.js.map +0 -1
  111. package/dist-cjs/tree/TreeNodeExpansionIcon.css.js +0 -6
  112. package/dist-cjs/tree/TreeNodeExpansionIcon.css.js.map +0 -1
  113. package/dist-cjs/tree/TreeNodeExpansionIcon.js +0 -62
  114. package/dist-cjs/tree/TreeNodeExpansionIcon.js.map +0 -1
  115. package/dist-cjs/tree/TreeNodeLabel.css.js +0 -6
  116. package/dist-cjs/tree/TreeNodeLabel.css.js.map +0 -1
  117. package/dist-cjs/tree/TreeNodeLabel.js +0 -26
  118. package/dist-cjs/tree/TreeNodeLabel.js.map +0 -1
  119. package/dist-cjs/tree/TreeNodeTrigger.css.js +0 -6
  120. package/dist-cjs/tree/TreeNodeTrigger.css.js.map +0 -1
  121. package/dist-cjs/tree/TreeNodeTrigger.js +0 -153
  122. package/dist-cjs/tree/TreeNodeTrigger.js.map +0 -1
  123. package/dist-cjs/tree/treeModel.js +0 -61
  124. package/dist-cjs/tree/treeModel.js.map +0 -1
  125. package/dist-cjs/tree/useTree.js +0 -337
  126. package/dist-cjs/tree/useTree.js.map +0 -1
  127. package/dist-es/side-panel/SidePanel.css.js +0 -4
  128. package/dist-es/side-panel/SidePanel.css.js.map +0 -1
  129. package/dist-es/side-panel/SidePanel.js +0 -195
  130. package/dist-es/side-panel/SidePanel.js.map +0 -1
  131. package/dist-es/side-panel/SidePanelCloseButton.js +0 -36
  132. package/dist-es/side-panel/SidePanelCloseButton.js.map +0 -1
  133. package/dist-es/side-panel/SidePanelContent.css.js +0 -4
  134. package/dist-es/side-panel/SidePanelContent.css.js.map +0 -1
  135. package/dist-es/side-panel/SidePanelContent.js +0 -64
  136. package/dist-es/side-panel/SidePanelContent.js.map +0 -1
  137. package/dist-es/side-panel/SidePanelHeader.css.js +0 -4
  138. package/dist-es/side-panel/SidePanelHeader.css.js.map +0 -1
  139. package/dist-es/side-panel/SidePanelHeader.js +0 -24
  140. package/dist-es/side-panel/SidePanelHeader.js.map +0 -1
  141. package/dist-es/side-panel/SidePanelProvider.js +0 -76
  142. package/dist-es/side-panel/SidePanelProvider.js.map +0 -1
  143. package/dist-es/side-panel/SidePanelTitle.css.js +0 -4
  144. package/dist-es/side-panel/SidePanelTitle.css.js.map +0 -1
  145. package/dist-es/side-panel/SidePanelTitle.js +0 -46
  146. package/dist-es/side-panel/SidePanelTitle.js.map +0 -1
  147. package/dist-es/side-panel/SidePanelTrigger.js +0 -35
  148. package/dist-es/side-panel/SidePanelTrigger.js.map +0 -1
  149. package/dist-es/side-panel/internal/SidePanelContext.js +0 -29
  150. package/dist-es/side-panel/internal/SidePanelContext.js.map +0 -1
  151. package/dist-es/side-panel/internal/useIsScrollable.js +0 -48
  152. package/dist-es/side-panel/internal/useIsScrollable.js.map +0 -1
  153. package/dist-es/side-panel/internal/useSidePanelTabOrder.js +0 -212
  154. package/dist-es/side-panel/internal/useSidePanelTabOrder.js.map +0 -1
  155. package/dist-es/side-panel/useSidePanel.js +0 -41
  156. package/dist-es/side-panel/useSidePanel.js.map +0 -1
  157. package/dist-es/tree/Tree.css.js +0 -4
  158. package/dist-es/tree/Tree.css.js.map +0 -1
  159. package/dist-es/tree/Tree.js +0 -298
  160. package/dist-es/tree/Tree.js.map +0 -1
  161. package/dist-es/tree/TreeContext.js +0 -26
  162. package/dist-es/tree/TreeContext.js.map +0 -1
  163. package/dist-es/tree/TreeNode.css.js +0 -4
  164. package/dist-es/tree/TreeNode.css.js.map +0 -1
  165. package/dist-es/tree/TreeNode.js +0 -101
  166. package/dist-es/tree/TreeNode.js.map +0 -1
  167. package/dist-es/tree/TreeNodeExpansionIcon.css.js +0 -4
  168. package/dist-es/tree/TreeNodeExpansionIcon.css.js.map +0 -1
  169. package/dist-es/tree/TreeNodeExpansionIcon.js +0 -60
  170. package/dist-es/tree/TreeNodeExpansionIcon.js.map +0 -1
  171. package/dist-es/tree/TreeNodeLabel.css.js +0 -4
  172. package/dist-es/tree/TreeNodeLabel.css.js.map +0 -1
  173. package/dist-es/tree/TreeNodeLabel.js +0 -24
  174. package/dist-es/tree/TreeNodeLabel.js.map +0 -1
  175. package/dist-es/tree/TreeNodeTrigger.css.js +0 -4
  176. package/dist-es/tree/TreeNodeTrigger.css.js.map +0 -1
  177. package/dist-es/tree/TreeNodeTrigger.js +0 -151
  178. package/dist-es/tree/TreeNodeTrigger.js.map +0 -1
  179. package/dist-es/tree/treeModel.js +0 -57
  180. package/dist-es/tree/treeModel.js.map +0 -1
  181. package/dist-es/tree/useTree.js +0 -335
  182. package/dist-es/tree/useTree.js.map +0 -1
  183. package/dist-types/side-panel/SidePanel.d.ts +0 -26
  184. package/dist-types/side-panel/SidePanelCloseButton.d.ts +0 -2
  185. package/dist-types/side-panel/SidePanelContent.d.ts +0 -5
  186. package/dist-types/side-panel/SidePanelHeader.d.ts +0 -5
  187. package/dist-types/side-panel/SidePanelProvider.d.ts +0 -20
  188. package/dist-types/side-panel/SidePanelTitle.d.ts +0 -3
  189. package/dist-types/side-panel/SidePanelTrigger.d.ts +0 -3
  190. package/dist-types/side-panel/index.d.ts +0 -8
  191. package/dist-types/side-panel/internal/SidePanelContext.d.ts +0 -52
  192. package/dist-types/side-panel/internal/index.d.ts +0 -3
  193. package/dist-types/side-panel/internal/useIsScrollable.d.ts +0 -2
  194. package/dist-types/side-panel/internal/useSidePanelTabOrder.d.ts +0 -7
  195. package/dist-types/side-panel/useSidePanel.d.ts +0 -58
  196. package/dist-types/tree/Tree.d.ts +0 -36
  197. package/dist-types/tree/TreeContext.d.ts +0 -77
  198. package/dist-types/tree/TreeNode.d.ts +0 -25
  199. package/dist-types/tree/TreeNodeExpansionIcon.d.ts +0 -4
  200. package/dist-types/tree/TreeNodeLabel.d.ts +0 -4
  201. package/dist-types/tree/TreeNodeTrigger.d.ts +0 -8
  202. package/dist-types/tree/index.d.ts +0 -4
  203. package/dist-types/tree/treeModel.d.ts +0 -24
  204. package/dist-types/tree/useTree.d.ts +0 -68
@@ -1,197 +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 tabbable = require('tabbable');
10
- var SidePanelContext = require('./internal/SidePanelContext.js');
11
- var SidePanel$1 = require('./SidePanel.css.js');
12
-
13
- const withBaseName = core.makePrefixer("saltSidePanel");
14
- const SidePanel = react.forwardRef(
15
- function SidePanel2(props, ref) {
16
- const {
17
- disableAnimation = false,
18
- position = "right",
19
- initialFocus,
20
- variant = "primary",
21
- children,
22
- id: idProp,
23
- className,
24
- "aria-labelledby": ariaLabelledBy,
25
- onAnimationEnd,
26
- ...rest
27
- } = props;
28
- const sidePanelContext = SidePanelContext.useSidePanelContext();
29
- const { openState, setFloating, setPanelId, titleId } = sidePanelContext;
30
- const positionedContext = react.useMemo(
31
- () => ({ ...sidePanelContext, position }),
32
- [sidePanelContext, position]
33
- );
34
- const id = core.useId(idProp);
35
- const [showComponent, setShowComponent] = react.useState(openState);
36
- const [animating, setAnimating] = react.useState(false);
37
- const shouldAnimateOpen = react.useRef(!openState);
38
- const initialMountRef = react.useRef(true);
39
- const panelRef = react.useRef(null);
40
- const targetWindow = window.useWindow();
41
- styles.useComponentCssInjection({
42
- testId: "salt-side-panel",
43
- css: SidePanel$1,
44
- window: targetWindow
45
- });
46
- const initialFocusDoneRef = react.useRef(false);
47
- react.useEffect(() => {
48
- if (!openState) {
49
- initialFocusDoneRef.current = false;
50
- }
51
- }, [openState]);
52
- const handleInitialFocus = core.useEventCallback((el) => {
53
- var _a, _b;
54
- if (!el || !openState || initialFocusDoneRef.current) {
55
- return;
56
- }
57
- if (initialMountRef.current) {
58
- const reference2 = sidePanelContext.floatingRootContext.elements.reference;
59
- const activeElement = reference2 instanceof Element ? (_a = reference2.ownerDocument) == null ? void 0 : _a.activeElement : null;
60
- const focusCameFromTrigger = reference2 instanceof Element && activeElement instanceof Node && reference2.contains(activeElement);
61
- if (!focusCameFromTrigger) {
62
- return;
63
- }
64
- initialMountRef.current = false;
65
- }
66
- initialFocusDoneRef.current = true;
67
- const raf = ((_b = el.ownerDocument.defaultView) == null ? void 0 : _b.requestAnimationFrame) ?? (targetWindow == null ? void 0 : targetWindow.requestAnimationFrame) ?? requestAnimationFrame;
68
- raf(() => {
69
- if (!el.isConnected) return;
70
- const focusTarget = resolveInitialFocusTarget(el, initialFocus);
71
- focusTarget == null ? void 0 : focusTarget.focus();
72
- });
73
- });
74
- const setPanelEl = core.useEventCallback((el) => {
75
- panelRef.current = el;
76
- setFloating(el);
77
- handleInitialFocus(el);
78
- });
79
- const handleRef = core.useForkRef(setPanelEl, ref);
80
- core.useIsomorphicLayoutEffect(() => {
81
- if (!animating || disableAnimation) return;
82
- const panel = panelRef.current;
83
- if (!panel) return;
84
- const previousAnimation = panel.style.animation;
85
- panel.style.animation = "none";
86
- const widthPx = panel.getBoundingClientRect().width;
87
- panel.style.animation = previousAnimation;
88
- panel.style.setProperty(
89
- "--saltSidePanel-animation-width",
90
- `${widthPx}px`
91
- );
92
- return () => {
93
- panel.style.removeProperty("--saltSidePanel-animation-width");
94
- };
95
- }, [animating, disableAnimation]);
96
- const handleAnimationEnd = core.useEventCallback(
97
- (event) => {
98
- onAnimationEnd == null ? void 0 : onAnimationEnd(event);
99
- if (event.currentTarget !== event.target || disableAnimation) return;
100
- setAnimating(false);
101
- if (!openState) {
102
- setShowComponent(false);
103
- }
104
- }
105
- );
106
- react.useEffect(() => {
107
- setPanelId(id);
108
- return () => {
109
- setPanelId(void 0);
110
- };
111
- }, [id, setPanelId]);
112
- const reference = sidePanelContext.floatingRootContext.elements.reference;
113
- const previousOpenState = core.usePrevious(openState, [openState], false);
114
- react.useEffect(() => {
115
- if (!previousOpenState || openState) return;
116
- const panel = panelRef.current;
117
- if (!(reference instanceof HTMLElement)) return;
118
- const doc = reference.ownerDocument;
119
- const active = doc == null ? void 0 : doc.activeElement;
120
- const focusInsidePanel = panel && active instanceof Node && panel.contains(active);
121
- const focusOnBody = active === (doc == null ? void 0 : doc.body) || active == null;
122
- if (focusInsidePanel || focusOnBody) {
123
- reference.focus();
124
- }
125
- }, [openState, previousOpenState, reference]);
126
- core.useIsomorphicLayoutEffect(() => {
127
- var _a, _b;
128
- if (disableAnimation) {
129
- setShowComponent(openState);
130
- setAnimating(false);
131
- if (!openState) shouldAnimateOpen.current = true;
132
- return;
133
- }
134
- if (!openState) {
135
- shouldAnimateOpen.current = true;
136
- }
137
- if (openState && !shouldAnimateOpen.current) {
138
- setShowComponent(true);
139
- setAnimating(false);
140
- return;
141
- }
142
- const prefersReducedMotion = (_b = (_a = targetWindow == null ? void 0 : targetWindow.matchMedia) == null ? void 0 : _a.call(
143
- targetWindow,
144
- "(prefers-reduced-motion: reduce)"
145
- )) == null ? void 0 : _b.matches;
146
- if (openState) {
147
- setShowComponent(true);
148
- }
149
- if (prefersReducedMotion) {
150
- setAnimating(false);
151
- if (!openState) {
152
- setShowComponent(false);
153
- }
154
- } else {
155
- setAnimating(true);
156
- }
157
- }, [openState, targetWindow, disableAnimation]);
158
- if (!showComponent) return null;
159
- return /* @__PURE__ */ jsxRuntime.jsx(
160
- "div",
161
- {
162
- role: "region",
163
- "aria-labelledby": clsx.clsx(ariaLabelledBy, titleId) || void 0,
164
- ref: handleRef,
165
- className: clsx.clsx(
166
- withBaseName(),
167
- {
168
- [withBaseName(position)]: position,
169
- [withBaseName(variant)]: variant,
170
- [withBaseName("enterAnimation")]: !disableAnimation && openState && animating,
171
- [withBaseName("exitAnimation")]: !disableAnimation && !openState && animating
172
- },
173
- className
174
- ),
175
- onAnimationEnd: handleAnimationEnd,
176
- tabIndex: -1,
177
- ...rest,
178
- id,
179
- children: /* @__PURE__ */ jsxRuntime.jsx(SidePanelContext.SidePanelContext.Provider, { value: positionedContext, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("inner"), children }) })
180
- }
181
- );
182
- }
183
- );
184
- function resolveInitialFocusTarget(panel, initialFocus) {
185
- if (initialFocus && typeof initialFocus === "object") {
186
- return initialFocus.current ?? null;
187
- }
188
- const managed = Array.from(
189
- panel.querySelectorAll("[data-salt-original-tabindex]")
190
- );
191
- const candidates = managed.length ? managed : tabbable.tabbable(panel, { displayCheck: "none" });
192
- const index = typeof initialFocus === "number" ? initialFocus : 0;
193
- return candidates[index] ?? candidates[0] ?? panel;
194
- }
195
-
196
- exports.SidePanel = SidePanel;
197
- //# sourceMappingURL=SidePanel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SidePanel.js","sources":["../src/side-panel/SidePanel.tsx"],"sourcesContent":["import {\n makePrefixer,\n useEventCallback,\n useForkRef,\n useId,\n useIsomorphicLayoutEffect,\n usePrevious,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type AnimationEvent,\n type ComponentPropsWithRef,\n forwardRef,\n type RefObject,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { tabbable } from \"tabbable\";\nimport { SidePanelContext, useSidePanelContext } from \"./internal\";\nimport sidePanelCss from \"./SidePanel.css\";\n\nconst withBaseName = makePrefixer(\"saltSidePanel\");\n\nexport interface SidePanelProps extends ComponentPropsWithRef<\"div\"> {\n /**\n * Disable the panel's own open/close animation.\n * Set to `true` when the parent controls sizing and animation (e.g. inside a splitter).\n * @default false\n */\n disableAnimation?: boolean;\n /**\n * Edge the panel is anchored to; controls animation direction and divider side.\n * @default \"right\"\n */\n position?: \"right\" | \"left\";\n /**\n * Which element receives focus when the panel opens.\n * Pass a number for the tabbable element index (0 = first), or a ref to a specific element.\n * Defaults to the first tabbable element inside the panel (close button if present).\n */\n initialFocus?: number | RefObject<HTMLElement | null>;\n /**\n * The background color palette. Options are 'primary', 'secondary', 'tertiary' and 'none'.\n * @default \"primary\"\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\" | \"none\";\n}\n\nexport const SidePanel = forwardRef<HTMLDivElement, SidePanelProps>(\n function SidePanel(props, ref) {\n const {\n disableAnimation = false,\n position = \"right\",\n initialFocus,\n variant = \"primary\",\n children,\n id: idProp,\n className,\n \"aria-labelledby\": ariaLabelledBy,\n onAnimationEnd,\n ...rest\n } = props;\n\n const sidePanelContext = useSidePanelContext();\n const { openState, setFloating, setPanelId, titleId } = sidePanelContext;\n const positionedContext = useMemo(\n () => ({ ...sidePanelContext, position }),\n [sidePanelContext, position],\n );\n\n const id = useId(idProp);\n\n const [showComponent, setShowComponent] = useState(openState);\n const [animating, setAnimating] = useState(false);\n const shouldAnimateOpen = useRef(!openState);\n // Stays true until a ref-callback invocation observes focus already\n // inside the trigger (a user-driven open). Flipping this from a mount\n // effect would break under React 18 strict-mode double-mounting.\n const initialMountRef = useRef(true);\n const panelRef = useRef<HTMLDivElement | null>(null);\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-side-panel\",\n css: sidePanelCss,\n window: targetWindow,\n });\n\n // Guards against re-focusing the panel multiple times per open session.\n const initialFocusDoneRef = useRef(false);\n useEffect(() => {\n if (!openState) {\n initialFocusDoneRef.current = false;\n }\n }, [openState]);\n\n // useEventCallback keeps a stable identity while always reading the\n // latest closure, so React doesn't tear down and re-invoke the ref\n // callback per render.\n const handleInitialFocus = useEventCallback((el: HTMLDivElement | null) => {\n if (!el || !openState || initialFocusDoneRef.current) {\n return;\n }\n\n // On first mount, only auto-focus if focus is already in the trigger\n // (the common click path). For defaultOpen without user interaction\n // we leave focus alone.\n if (initialMountRef.current) {\n const reference =\n sidePanelContext.floatingRootContext.elements.reference;\n const activeElement =\n reference instanceof Element\n ? reference.ownerDocument?.activeElement\n : null;\n const focusCameFromTrigger =\n reference instanceof Element &&\n activeElement instanceof Node &&\n reference.contains(activeElement);\n if (!focusCameFromTrigger) {\n return;\n }\n initialMountRef.current = false;\n }\n\n initialFocusDoneRef.current = true;\n // Defer one frame so useSidePanelTabOrder has marked descendants\n // with data-salt-original-tabindex and any child layout effects\n // (e.g. SidePanelContent's scrollable-body tabIndex toggle) have\n // settled. Scoped to the panel's owner window for iframe/shadow-root\n // hosts.\n const raf =\n el.ownerDocument.defaultView?.requestAnimationFrame ??\n targetWindow?.requestAnimationFrame ??\n requestAnimationFrame;\n raf(() => {\n if (!el.isConnected) return;\n const focusTarget = resolveInitialFocusTarget(el, initialFocus);\n focusTarget?.focus();\n });\n });\n\n const setPanelEl = useEventCallback((el: HTMLDivElement | null) => {\n panelRef.current = el;\n setFloating(el);\n handleInitialFocus(el);\n });\n\n const handleRef = useForkRef<HTMLDivElement>(setPanelEl, ref);\n\n // Snapshot the panel's natural width (in px) into a CSS variable so the\n // inner can keep its full size while the outer animates between 0 and\n // its target width. This makes percentage values for\n // --saltSidePanel-width work, since the inner no longer resolves a\n // percentage against the outer's animating width.\n useIsomorphicLayoutEffect(() => {\n if (!animating || disableAnimation) return;\n const panel = panelRef.current;\n if (!panel) return;\n\n // Read the natural width with the animation suspended so we see the\n // resting size rather than the in-flight interpolated value.\n // getBoundingClientRect() flushes style/layout, so the inline\n // `animation: none` takes effect for this read.\n const previousAnimation = panel.style.animation;\n panel.style.animation = \"none\";\n const widthPx = panel.getBoundingClientRect().width;\n panel.style.animation = previousAnimation;\n\n panel.style.setProperty(\n \"--saltSidePanel-animation-width\",\n `${widthPx}px`,\n );\n\n return () => {\n panel.style.removeProperty(\"--saltSidePanel-animation-width\");\n };\n }, [animating, disableAnimation]);\n\n const handleAnimationEnd = useEventCallback(\n (event: AnimationEvent<HTMLDivElement>) => {\n onAnimationEnd?.(event);\n\n if (event.currentTarget !== event.target || disableAnimation) return;\n setAnimating(false);\n if (!openState) {\n setShowComponent(false);\n }\n },\n );\n\n useEffect(() => {\n setPanelId(id);\n return () => {\n setPanelId(undefined);\n };\n }, [id, setPanelId]);\n\n // Return focus to the trigger on close (mirrors floating-ui's\n // returnFocus). Initial previousOpenState of `false` ensures we never\n // restore on mount — only on a real true→false transition.\n const reference = sidePanelContext.floatingRootContext.elements.reference;\n const previousOpenState = usePrevious(openState, [openState], false);\n useEffect(() => {\n if (!previousOpenState || openState) return;\n const panel = panelRef.current;\n if (!(reference instanceof HTMLElement)) return;\n const doc = reference.ownerDocument;\n const active = doc?.activeElement;\n const focusInsidePanel =\n panel && active instanceof Node && panel.contains(active);\n const focusOnBody = active === doc?.body || active == null;\n if (focusInsidePanel || focusOnBody) {\n reference.focus();\n }\n }, [openState, previousOpenState, reference]);\n\n useIsomorphicLayoutEffect(() => {\n if (disableAnimation) {\n setShowComponent(openState);\n setAnimating(false);\n if (!openState) shouldAnimateOpen.current = true;\n return;\n }\n\n if (!openState) {\n shouldAnimateOpen.current = true;\n }\n\n // Skip enter animation when the panel was open from the start.\n if (openState && !shouldAnimateOpen.current) {\n setShowComponent(true);\n setAnimating(false);\n return;\n }\n\n const prefersReducedMotion = targetWindow?.matchMedia?.(\n \"(prefers-reduced-motion: reduce)\",\n )?.matches;\n\n if (openState) {\n setShowComponent(true);\n }\n\n if (prefersReducedMotion) {\n setAnimating(false);\n if (!openState) {\n setShowComponent(false);\n }\n } else {\n setAnimating(true);\n }\n }, [openState, targetWindow, disableAnimation]);\n\n if (!showComponent) return null;\n\n return (\n <div\n role=\"region\"\n aria-labelledby={clsx(ariaLabelledBy, titleId) || undefined}\n ref={handleRef}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(position)]: position,\n [withBaseName(variant)]: variant,\n [withBaseName(\"enterAnimation\")]:\n !disableAnimation && openState && animating,\n [withBaseName(\"exitAnimation\")]:\n !disableAnimation && !openState && animating,\n },\n className,\n )}\n onAnimationEnd={handleAnimationEnd}\n tabIndex={-1}\n {...rest}\n id={id}\n >\n <SidePanelContext.Provider value={positionedContext}>\n <div className={withBaseName(\"inner\")}>{children}</div>\n </SidePanelContext.Provider>\n </div>\n );\n },\n);\n\nfunction resolveInitialFocusTarget(\n panel: HTMLElement,\n initialFocus: SidePanelProps[\"initialFocus\"],\n): HTMLElement | null {\n if (initialFocus && typeof initialFocus === \"object\") {\n return initialFocus.current ?? null;\n }\n\n // Prefer the panel's \"managed\" sequence (elements detached from the\n // natural tab order by useSidePanelTabOrder), falling back to a fresh\n // tabbable() scan when detachment hasn't run yet.\n const managed = Array.from(\n panel.querySelectorAll<HTMLElement>(\"[data-salt-original-tabindex]\"),\n );\n\n const candidates = managed.length\n ? managed\n : (tabbable(panel, { displayCheck: \"none\" }) as HTMLElement[]);\n\n const index = typeof initialFocus === \"number\" ? initialFocus : 0;\n return candidates[index] ?? candidates[0] ?? panel;\n}\n"],"names":["makePrefixer","forwardRef","SidePanel","useSidePanelContext","useMemo","useId","useState","useRef","useWindow","useComponentCssInjection","sidePanelCss","useEffect","useEventCallback","reference","useForkRef","useIsomorphicLayoutEffect","usePrevious","jsx","clsx","SidePanelContext","tabbable"],"mappings":"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"}
@@ -1,38 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var core = require('@salt-ds/core');
5
- var clsx = require('clsx');
6
- var react = require('react');
7
- var SidePanelContext = require('./internal/SidePanelContext.js');
8
- require('tabbable');
9
-
10
- const withBaseName = core.makePrefixer("saltSidePanelCloseButton");
11
- const SidePanelCloseButton = react.forwardRef(
12
- function SidePanelCloseButton2({ className, onClick, id: idProp, ...rest }, ref) {
13
- const { CollapseLeftIcon, CollapseRightIcon } = core.useIcon();
14
- const { setOpen, titleId, position } = SidePanelContext.useSidePanelContext();
15
- const closeButtonId = core.useId(idProp);
16
- const handleClick = (event) => {
17
- onClick == null ? void 0 : onClick(event);
18
- setOpen(false);
19
- };
20
- return /* @__PURE__ */ jsxRuntime.jsx(
21
- core.Button,
22
- {
23
- ref,
24
- id: closeButtonId,
25
- "aria-label": "Close",
26
- "aria-labelledby": titleId ? clsx.clsx(closeButtonId, titleId) : void 0,
27
- appearance: "transparent",
28
- className: clsx.clsx(withBaseName(), className),
29
- onClick: handleClick,
30
- ...rest,
31
- children: position === "left" ? /* @__PURE__ */ jsxRuntime.jsx(CollapseLeftIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(CollapseRightIcon, { "aria-hidden": true })
32
- }
33
- );
34
- }
35
- );
36
-
37
- exports.SidePanelCloseButton = SidePanelCloseButton;
38
- //# sourceMappingURL=SidePanelCloseButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SidePanelCloseButton.js","sources":["../src/side-panel/SidePanelCloseButton.tsx"],"sourcesContent":["import {\n Button,\n type ButtonProps,\n makePrefixer,\n useIcon,\n useId,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type MouseEvent } from \"react\";\nimport { useSidePanelContext } from \"./internal\";\n\nconst withBaseName = makePrefixer(\"saltSidePanelCloseButton\");\n\nexport const SidePanelCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n function SidePanelCloseButton(\n { className, onClick, id: idProp, ...rest },\n ref,\n ) {\n const { CollapseLeftIcon, CollapseRightIcon } = useIcon();\n const { setOpen, titleId, position } = useSidePanelContext();\n const closeButtonId = useId(idProp);\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n onClick?.(event);\n setOpen(false);\n };\n\n return (\n <Button\n ref={ref}\n id={closeButtonId}\n aria-label=\"Close\"\n aria-labelledby={titleId ? clsx(closeButtonId, titleId) : undefined}\n appearance=\"transparent\"\n className={clsx(withBaseName(), className)}\n onClick={handleClick}\n {...rest}\n >\n {position === \"left\" ? (\n <CollapseLeftIcon aria-hidden />\n ) : (\n <CollapseRightIcon aria-hidden />\n )}\n </Button>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","SidePanelCloseButton","useIcon","useSidePanelContext","useId","jsx","Button","clsx"],"mappings":";;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA;AAErD,MAAM,oBAAA,GAAuBC,gBAAA;AAAA,EAClC,SAASC,qBAAAA,CACP,EAAE,SAAA,EAAW,OAAA,EAAS,IAAI,MAAA,EAAQ,GAAG,IAAA,EAAK,EAC1C,GAAA,EACA;AACA,IAAA,MAAM,EAAE,gBAAA,EAAkB,iBAAA,EAAkB,GAAIC,YAAA,EAAQ;AACxD,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAS,QAAA,KAAaC,oCAAA,EAAoB;AAC3D,IAAA,MAAM,aAAA,GAAgBC,WAAM,MAAM,CAAA;AAElC,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,MAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,IACf,CAAA;AAEA,IAAA,uBACEC,cAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA,EAAI,aAAA;AAAA,QACJ,YAAA,EAAW,OAAA;AAAA,QACX,iBAAA,EAAiB,OAAA,GAAUC,SAAA,CAAK,aAAA,EAAe,OAAO,CAAA,GAAI,MAAA;AAAA,QAC1D,UAAA,EAAW,aAAA;AAAA,QACX,SAAA,EAAWA,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,OAAA,EAAS,WAAA;AAAA,QACR,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,QAAA,KAAa,MAAA,mBACZF,cAAA,CAAC,gBAAA,EAAA,EAAiB,aAAA,EAAW,MAAC,CAAA,mBAE9BA,cAAA,CAAC,iBAAA,EAAA,EAAkB,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,KAEnC;AAAA,EAEJ;AACF;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = ".saltSidePanelContent {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n}\n\n.saltSidePanelContent-body {\n flex: 1;\n min-height: 0;\n overflow: auto;\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=SidePanelContent.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SidePanelContent.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,66 +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 SidePanelContext = require('./internal/SidePanelContext.js');
10
- var useIsScrollable = require('./internal/useIsScrollable.js');
11
- require('tabbable');
12
- var SidePanelContent$1 = require('./SidePanelContent.css.js');
13
-
14
- const withBaseName = core.makePrefixer("saltSidePanelContent");
15
- const SidePanelContent = react.forwardRef(function SidePanelContent2(props, ref) {
16
- const {
17
- children,
18
- className,
19
- "aria-labelledby": ariaLabelledBy,
20
- "aria-label": ariaLabel,
21
- ...rest
22
- } = props;
23
- const { titleId } = SidePanelContext.useSidePanelContext();
24
- const targetWindow = window.useWindow();
25
- const contentSuffixId = core.useId();
26
- const bodyRef = react.useRef(null);
27
- const isScrollable = useIsScrollable.useIsScrollable(bodyRef);
28
- styles.useComponentCssInjection({
29
- testId: "salt-side-panel-content",
30
- css: SidePanelContent$1,
31
- window: targetWindow
32
- });
33
- const explicitLabelledBy = ariaLabelledBy;
34
- const explicitLabel = ariaLabel;
35
- let bodyAriaLabelledBy;
36
- let bodyAriaLabel;
37
- if (isScrollable) {
38
- if (explicitLabelledBy) {
39
- bodyAriaLabelledBy = explicitLabelledBy;
40
- } else if (titleId) {
41
- bodyAriaLabelledBy = clsx.clsx(titleId, contentSuffixId) || void 0;
42
- } else {
43
- bodyAriaLabel = explicitLabel ?? "Content";
44
- }
45
- }
46
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx.clsx(withBaseName(), className), ...rest, children: [
47
- isScrollable ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: contentSuffixId, hidden: true, children: "content" }) : null,
48
- /* @__PURE__ */ jsxRuntime.jsx(
49
- "div",
50
- {
51
- ref: bodyRef,
52
- className: withBaseName("body"),
53
- ...isScrollable && {
54
- role: "region",
55
- tabIndex: 0,
56
- "aria-labelledby": bodyAriaLabelledBy,
57
- "aria-label": bodyAriaLabel
58
- },
59
- children
60
- }
61
- )
62
- ] });
63
- });
64
-
65
- exports.SidePanelContent = SidePanelContent;
66
- //# sourceMappingURL=SidePanelContent.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SidePanelContent.js","sources":["../src/side-panel/SidePanelContent.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithRef, forwardRef, useRef } from \"react\";\nimport { useIsScrollable, useSidePanelContext } from \"./internal\";\nimport sidePanelContentCss from \"./SidePanelContent.css\";\n\nconst withBaseName = makePrefixer(\"saltSidePanelContent\");\n\nexport type SidePanelContentProps = ComponentPropsWithRef<\"div\">;\n\nexport const SidePanelContent = forwardRef<\n HTMLDivElement,\n SidePanelContentProps\n>(function SidePanelContent(props, ref) {\n const {\n children,\n className,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n ...rest\n } = props;\n\n const { titleId } = useSidePanelContext();\n const targetWindow = useWindow();\n const contentSuffixId = useId();\n const bodyRef = useRef<HTMLDivElement>(null);\n const isScrollable = useIsScrollable(bodyRef);\n\n useComponentCssInjection({\n testId: \"salt-side-panel-content\",\n css: sidePanelContentCss,\n window: targetWindow,\n });\n\n const explicitLabelledBy = ariaLabelledBy;\n const explicitLabel = ariaLabel;\n\n let bodyAriaLabelledBy: string | undefined;\n let bodyAriaLabel: string | undefined;\n\n if (isScrollable) {\n if (explicitLabelledBy) {\n bodyAriaLabelledBy = explicitLabelledBy;\n } else if (titleId) {\n bodyAriaLabelledBy = clsx(titleId, contentSuffixId) || undefined;\n } else {\n bodyAriaLabel = explicitLabel ?? \"Content\";\n }\n }\n\n return (\n <div ref={ref} className={clsx(withBaseName(), className)} {...rest}>\n {isScrollable ? (\n <span id={contentSuffixId} hidden>\n content\n </span>\n ) : null}\n <div\n ref={bodyRef}\n className={withBaseName(\"body\")}\n {...(isScrollable && {\n role: \"region\",\n tabIndex: 0,\n \"aria-labelledby\": bodyAriaLabelledBy,\n \"aria-label\": bodyAriaLabel,\n })}\n >\n {children}\n </div>\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","SidePanelContent","useSidePanelContext","useWindow","useId","useRef","useIsScrollable","useComponentCssInjection","sidePanelContentCss","clsx","jsxs","jsx"],"mappings":";;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA;AAIjD,MAAM,gBAAA,GAAmBC,gBAAA,CAG9B,SAASC,iBAAAA,CAAiB,OAAO,GAAA,EAAK;AACtC,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA,EAAmB,cAAA;AAAA,IACnB,YAAA,EAAc,SAAA;AAAA,IACd,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAIC,oCAAA,EAAoB;AACxC,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAA,MAAM,kBAAkBC,UAAA,EAAM;AAC9B,EAAA,MAAM,OAAA,GAAUC,aAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,YAAA,GAAeC,gCAAgB,OAAO,CAAA;AAE5C,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,yBAAA;AAAA,IACR,GAAA,EAAKC,kBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,kBAAA,GAAqB,cAAA;AAC3B,EAAA,MAAM,aAAA,GAAgB,SAAA;AAEtB,EAAA,IAAI,kBAAA;AACJ,EAAA,IAAI,aAAA;AAEJ,EAAA,IAAI,YAAA,EAAc;AAChB,IAAA,IAAI,kBAAA,EAAoB;AACtB,MAAA,kBAAA,GAAqB,kBAAA;AAAA,IACvB,WAAW,OAAA,EAAS;AAClB,MAAA,kBAAA,GAAqBC,SAAA,CAAK,OAAA,EAAS,eAAe,CAAA,IAAK,MAAA;AAAA,IACzD,CAAA,MAAO;AACL,MAAA,aAAA,GAAgB,aAAA,IAAiB,SAAA;AAAA,IACnC;AAAA,EACF;AAEA,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAWD,SAAA,CAAK,cAAa,EAAG,SAAS,CAAA,EAAI,GAAG,IAAA,EAC5D,QAAA,EAAA;AAAA,IAAA,YAAA,kCACE,MAAA,EAAA,EAAK,EAAA,EAAI,iBAAiB,MAAA,EAAM,IAAA,EAAC,qBAElC,CAAA,GACE,IAAA;AAAA,oBACJE,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,OAAA;AAAA,QACL,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAC7B,GAAI,YAAA,IAAgB;AAAA,UACnB,IAAA,EAAM,QAAA;AAAA,UACN,QAAA,EAAU,CAAA;AAAA,UACV,iBAAA,EAAmB,kBAAA;AAAA,UACnB,YAAA,EAAc;AAAA,SAChB;AAAA,QAEC;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = ".saltSidePanelHeader {\n display: flex;\n align-items: flex-start;\n flex-shrink: 0;\n gap: var(--salt-spacing-100);\n padding: 0 0 var(--salt-spacing-300);\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=SidePanelHeader.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SidePanelHeader.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,26 +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 SidePanelHeader$1 = require('./SidePanelHeader.css.js');
10
-
11
- const withBaseName = core.makePrefixer("saltSidePanelHeader");
12
- const SidePanelHeader = react.forwardRef(
13
- function SidePanelHeader2(props, ref) {
14
- const { children, className, ...rest } = props;
15
- const targetWindow = window.useWindow();
16
- styles.useComponentCssInjection({
17
- testId: "salt-side-panel-header",
18
- css: SidePanelHeader$1,
19
- window: targetWindow
20
- });
21
- return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx.clsx(withBaseName(), className), ...rest, children });
22
- }
23
- );
24
-
25
- exports.SidePanelHeader = SidePanelHeader;
26
- //# sourceMappingURL=SidePanelHeader.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SidePanelHeader.js","sources":["../src/side-panel/SidePanelHeader.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 { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport sidePanelHeaderCss from \"./SidePanelHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltSidePanelHeader\");\n\nexport type SidePanelHeaderProps = ComponentPropsWithRef<\"div\">;\n\nexport const SidePanelHeader = forwardRef<HTMLDivElement, SidePanelHeaderProps>(\n function SidePanelHeader(props, ref) {\n const { children, className, ...rest } = props;\n\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-side-panel-header\",\n css: sidePanelHeaderCss,\n window: targetWindow,\n });\n\n return (\n <div ref={ref} className={clsx(withBaseName(), className)} {...rest}>\n {children}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","SidePanelHeader","useWindow","useComponentCssInjection","sidePanelHeaderCss","jsx","clsx"],"mappings":";;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA;AAIhD,MAAM,eAAA,GAAkBC,gBAAA;AAAA,EAC7B,SAASC,gBAAAA,CAAgB,KAAA,EAAO,GAAA,EAAK;AACnC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAEzC,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAE/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,wBAAA;AAAA,MACR,GAAA,EAAKC,iBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAI,GAAG,IAAA,EAC5D,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}
@@ -1,78 +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 react = require('react');
7
- var SidePanelContext = require('./internal/SidePanelContext.js');
8
- var useSidePanelTabOrder = require('./internal/useSidePanelTabOrder.js');
9
-
10
- function SidePanelProvider(props) {
11
- const { children, open: openProp, defaultOpen, onOpenChange } = props;
12
- const [openState, setOpenState] = core.useControlled({
13
- default: Boolean(defaultOpen),
14
- controlled: openProp,
15
- name: "SidePanelProvider",
16
- state: "open"
17
- });
18
- const handleOpenChange = react.useCallback(
19
- (newOpen) => {
20
- setOpenState(newOpen);
21
- onOpenChange == null ? void 0 : onOpenChange(newOpen);
22
- },
23
- [onOpenChange]
24
- );
25
- const [reference, setReference] = react.useState(null);
26
- const [floating, setFloating] = react.useState(null);
27
- const [panelId, setPanelId] = react.useState(void 0);
28
- const [titleId, setTitleId] = react.useState(void 0);
29
- const elements = react.useMemo(
30
- () => ({ reference, floating }),
31
- [reference, floating]
32
- );
33
- const floatingRootContext = react$1.useFloatingRootContext({
34
- open: openState,
35
- onOpenChange: handleOpenChange,
36
- elements
37
- });
38
- react.useEffect(() => {
39
- if (!openState || !floating) {
40
- return;
41
- }
42
- const onKeyDown = (event) => {
43
- if (event.key !== "Escape") {
44
- return;
45
- }
46
- event.preventDefault();
47
- event.stopPropagation();
48
- handleOpenChange(false);
49
- };
50
- floating.addEventListener("keydown", onKeyDown);
51
- return () => {
52
- floating.removeEventListener("keydown", onKeyDown);
53
- };
54
- }, [floating, openState, handleOpenChange]);
55
- useSidePanelTabOrder.useSidePanelTabOrder({
56
- floating,
57
- open: openState,
58
- reference
59
- });
60
- const context = react.useMemo(
61
- () => ({
62
- openState,
63
- floatingRootContext,
64
- setFloating,
65
- setReference,
66
- setOpen: handleOpenChange,
67
- panelId,
68
- setPanelId,
69
- titleId,
70
- setTitleId
71
- }),
72
- [openState, floatingRootContext, handleOpenChange, panelId, titleId]
73
- );
74
- return /* @__PURE__ */ jsxRuntime.jsx(SidePanelContext.SidePanelContext.Provider, { value: context, children });
75
- }
76
-
77
- exports.SidePanelProvider = SidePanelProvider;
78
- //# sourceMappingURL=SidePanelProvider.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SidePanelProvider.js","sources":["../src/side-panel/SidePanelProvider.tsx"],"sourcesContent":["import { useFloatingRootContext } from \"@floating-ui/react\";\nimport { useControlled } from \"@salt-ds/core\";\nimport {\n type ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { SidePanelContext, useSidePanelTabOrder } from \"./internal\";\n\nexport interface SidePanelProviderProps {\n /**\n * Whether the panel is open.\n */\n open?: boolean;\n /**\n * Default open state when initially rendered.\n */\n defaultOpen?: boolean;\n /**\n * Callback when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * SidePanelProvider children, should include SidePanel and SidePanelTrigger.\n */\n children: ReactNode;\n}\n\nexport function SidePanelProvider(props: SidePanelProviderProps) {\n const { children, open: openProp, defaultOpen, onOpenChange } = props;\n\n const [openState, setOpenState] = useControlled({\n default: Boolean(defaultOpen),\n controlled: openProp,\n name: \"SidePanelProvider\",\n state: \"open\",\n });\n\n const handleOpenChange = useCallback(\n (newOpen: boolean) => {\n setOpenState(newOpen);\n onOpenChange?.(newOpen);\n },\n [onOpenChange],\n );\n\n const [reference, setReference] = useState<HTMLElement | null>(null);\n const [floating, setFloating] = useState<HTMLDivElement | null>(null);\n const [panelId, setPanelId] = useState<string | undefined>(undefined);\n const [titleId, setTitleId] = useState<string | undefined>(undefined);\n\n // Memoise so floating-ui's root context isn't recreated every render.\n const elements = useMemo(\n () => ({ reference, floating }),\n [reference, floating],\n );\n\n const floatingRootContext = useFloatingRootContext({\n open: openState,\n onOpenChange: handleOpenChange,\n elements,\n });\n\n useEffect(() => {\n if (!openState || !floating) {\n return;\n }\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key !== \"Escape\") {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n handleOpenChange(false);\n };\n\n floating.addEventListener(\"keydown\", onKeyDown);\n return () => {\n floating.removeEventListener(\"keydown\", onKeyDown);\n };\n }, [floating, openState, handleOpenChange]);\n\n useSidePanelTabOrder({\n floating,\n open: openState,\n reference,\n });\n\n const context = useMemo(\n () => ({\n openState,\n floatingRootContext,\n setFloating,\n setReference,\n setOpen: handleOpenChange,\n panelId,\n setPanelId,\n titleId,\n setTitleId,\n }),\n [openState, floatingRootContext, handleOpenChange, panelId, titleId],\n );\n\n return (\n <SidePanelContext.Provider value={context}>\n {children}\n </SidePanelContext.Provider>\n );\n}\n"],"names":["useControlled","useCallback","useState","useMemo","useFloatingRootContext","useEffect","useSidePanelTabOrder","SidePanelContext"],"mappings":";;;;;;;;;AA8BO,SAAS,kBAAkB,KAAA,EAA+B;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAU,IAAA,EAAM,QAAA,EAAU,WAAA,EAAa,cAAa,GAAI,KAAA;AAEhE,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,kBAAA,CAAc;AAAA,IAC9C,OAAA,EAAS,QAAQ,WAAW,CAAA;AAAA,IAC5B,UAAA,EAAY,QAAA;AAAA,IACZ,IAAA,EAAM,mBAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,gBAAA,GAAmBC,iBAAA;AAAA,IACvB,CAAC,OAAA,KAAqB;AACpB,MAAA,YAAA,CAAa,OAAO,CAAA;AACpB,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,OAAA,CAAA;AAAA,IACjB,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAA6B,IAAI,CAAA;AACnE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,eAAgC,IAAI,CAAA;AACpE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAA6B,MAAS,CAAA;AACpE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAA6B,MAAS,CAAA;AAGpE,EAAA,MAAM,QAAA,GAAWC,aAAA;AAAA,IACf,OAAO,EAAE,SAAA,EAAW,QAAA,EAAS,CAAA;AAAA,IAC7B,CAAC,WAAW,QAAQ;AAAA,GACtB;AAEA,EAAA,MAAM,sBAAsBC,8BAAA,CAAuB;AAAA,IACjD,IAAA,EAAM,SAAA;AAAA,IACN,YAAA,EAAc,gBAAA;AAAA,IACd;AAAA,GACD,CAAA;AAED,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,SAAA,IAAa,CAAC,QAAA,EAAU;AAC3B,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,MAAA,IAAI,KAAA,CAAM,QAAQ,QAAA,EAAU;AAC1B,QAAA;AAAA,MACF;AAEA,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,MAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA,IACxB,CAAA;AAEA,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,SAAS,CAAA;AAC9C,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,SAAS,CAAA;AAAA,IACnD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,QAAA,EAAU,SAAA,EAAW,gBAAgB,CAAC,CAAA;AAE1C,EAAAC,yCAAA,CAAqB;AAAA,IACnB,QAAA;AAAA,IACA,IAAA,EAAM,SAAA;AAAA,IACN;AAAA,GACD,CAAA;AAED,EAAA,MAAM,OAAA,GAAUH,aAAA;AAAA,IACd,OAAO;AAAA,MACL,SAAA;AAAA,MACA,mBAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA,EAAS,gBAAA;AAAA,MACT,OAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAA,EAAW,mBAAA,EAAqB,gBAAA,EAAkB,SAAS,OAAO;AAAA,GACrE;AAEA,EAAA,sCACGI,iCAAA,CAAiB,QAAA,EAAjB,EAA0B,KAAA,EAAO,SAC/B,QAAA,EACH,CAAA;AAEJ;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = ".saltSidePanelTitle {\n flex: 1;\n min-width: 0;\n min-height: var(--salt-size-base);\n display: flex;\n align-items: center;\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=SidePanelTitle.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SidePanelTitle.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,48 +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 SidePanelContext = require('./internal/SidePanelContext.js');
10
- require('tabbable');
11
- var SidePanelTitle$1 = require('./SidePanelTitle.css.js');
12
-
13
- const withBaseName = core.makePrefixer("saltSidePanelTitle");
14
- const SidePanelTitle = react.forwardRef(
15
- function SidePanelTitle2(props, ref) {
16
- const { children, className, id, styleAs = "h2", ...rest } = props;
17
- const { setTitleId } = SidePanelContext.useSidePanelContext();
18
- const targetWindow = window.useWindow();
19
- styles.useComponentCssInjection({
20
- testId: "salt-side-panel-title",
21
- css: SidePanelTitle$1,
22
- window: targetWindow
23
- });
24
- const titleId = core.useId(id);
25
- core.useIsomorphicLayoutEffect(() => {
26
- if (titleId) {
27
- setTitleId(titleId);
28
- }
29
- return () => {
30
- setTitleId(void 0);
31
- };
32
- }, [titleId, setTitleId]);
33
- return /* @__PURE__ */ jsxRuntime.jsx(
34
- core.Text,
35
- {
36
- ref,
37
- id: titleId,
38
- styleAs,
39
- className: clsx.clsx(withBaseName(), className),
40
- ...rest,
41
- children
42
- }
43
- );
44
- }
45
- );
46
-
47
- exports.SidePanelTitle = SidePanelTitle;
48
- //# sourceMappingURL=SidePanelTitle.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SidePanelTitle.js","sources":["../src/side-panel/SidePanelTitle.tsx"],"sourcesContent":["import {\n makePrefixer,\n Text,\n type TextProps,\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 { forwardRef } from \"react\";\nimport { useSidePanelContext } from \"./internal\";\nimport sidePanelTitleCss from \"./SidePanelTitle.css\";\n\nconst withBaseName = makePrefixer(\"saltSidePanelTitle\");\n\nexport type SidePanelTitleProps = TextProps<\"div\">;\n\nexport const SidePanelTitle = forwardRef<HTMLDivElement, SidePanelTitleProps>(\n function SidePanelTitle(props, ref) {\n const { children, className, id, styleAs = \"h2\", ...rest } = props;\n\n const { setTitleId } = useSidePanelContext();\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-side-panel-title\",\n css: sidePanelTitleCss,\n window: targetWindow,\n });\n\n const titleId = useId(id);\n\n useIsomorphicLayoutEffect(() => {\n if (titleId) {\n setTitleId(titleId);\n }\n\n return () => {\n setTitleId(undefined);\n };\n }, [titleId, setTitleId]);\n\n return (\n <Text\n ref={ref}\n id={titleId}\n styleAs={styleAs}\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n {children}\n </Text>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","SidePanelTitle","useSidePanelContext","useWindow","useComponentCssInjection","sidePanelTitleCss","useId","useIsomorphicLayoutEffect","jsx","Text","clsx"],"mappings":";;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAI/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,EAAA,EAAI,UAAU,IAAA,EAAM,GAAG,MAAK,GAAI,KAAA;AAE7D,IAAA,MAAM,EAAE,UAAA,EAAW,GAAIC,oCAAA,EAAoB;AAC3C,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAE/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OAAA,GAAUC,WAAM,EAAE,CAAA;AAExB,IAAAC,8BAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,OAAA,EAAS;AACX,QAAA,UAAA,CAAW,OAAO,CAAA;AAAA,MACpB;AAEA,MAAA,OAAO,MAAM;AACX,QAAA,UAAA,CAAW,MAAS,CAAA;AAAA,MACtB,CAAA;AAAA,IACF,CAAA,EAAG,CAAC,OAAA,EAAS,UAAU,CAAC,CAAA;AAExB,IAAA,uBACEC,cAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA,EAAI,OAAA;AAAA,QACJ,OAAA;AAAA,QACA,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
@@ -1,37 +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 SidePanelContext = require('./internal/SidePanelContext.js');
7
- require('tabbable');
8
-
9
- const SidePanelTrigger = react.forwardRef(function SidePanelTrigger2(props, ref) {
10
- const { children, onClick, ...rest } = props;
11
- const { setReference, openState, setOpen, panelId } = SidePanelContext.useSidePanelContext();
12
- const combinedRef = core.useForkRef(setReference, ref);
13
- const handleRef = core.useForkRef(combinedRef, core.getRefFromChildren(children));
14
- const handleClick = (event) => {
15
- onClick == null ? void 0 : onClick(event);
16
- setOpen(!openState);
17
- };
18
- if (!children || !react.isValidElement(children)) {
19
- return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
20
- }
21
- const mergedProps = core.mergeProps(
22
- {
23
- "aria-expanded": openState,
24
- "aria-controls": openState ? panelId : void 0,
25
- onClick: handleClick,
26
- ...rest
27
- },
28
- children.props
29
- );
30
- return react.cloneElement(children, {
31
- ...mergedProps,
32
- ref: handleRef
33
- });
34
- });
35
-
36
- exports.SidePanelTrigger = SidePanelTrigger;
37
- //# sourceMappingURL=SidePanelTrigger.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SidePanelTrigger.js","sources":["../src/side-panel/SidePanelTrigger.tsx"],"sourcesContent":["import { getRefFromChildren, mergeProps, useForkRef } from \"@salt-ds/core\";\nimport {\n type ComponentPropsWithoutRef,\n cloneElement,\n forwardRef,\n isValidElement,\n type MouseEvent,\n} from \"react\";\nimport { useSidePanelContext } from \"./internal\";\n\nexport type SidePanelTriggerProps = ComponentPropsWithoutRef<\"button\">;\n\nexport const SidePanelTrigger = forwardRef<\n HTMLButtonElement,\n SidePanelTriggerProps\n>(function SidePanelTrigger(props, ref) {\n const { children, onClick, ...rest } = props;\n const { setReference, openState, setOpen, panelId } = useSidePanelContext();\n\n const combinedRef = useForkRef(setReference, ref);\n const handleRef = useForkRef(combinedRef, getRefFromChildren(children));\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n onClick?.(event);\n setOpen(!openState);\n };\n\n if (!children || !isValidElement(children)) {\n return <>{children}</>;\n }\n\n const mergedProps = mergeProps(\n {\n \"aria-expanded\": openState,\n \"aria-controls\": openState ? panelId : undefined,\n onClick: handleClick,\n ...rest,\n },\n children.props,\n );\n\n return cloneElement(children, {\n ...mergedProps,\n ref: handleRef,\n });\n});\n"],"names":["forwardRef","SidePanelTrigger","useSidePanelContext","useForkRef","getRefFromChildren","isValidElement","mergeProps","cloneElement"],"mappings":";;;;;;;;AAYO,MAAM,gBAAA,GAAmBA,gBAAA,CAG9B,SAASC,iBAAAA,CAAiB,OAAO,GAAA,EAAK;AACtC,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,GAAG,MAAK,GAAI,KAAA;AACvC,EAAA,MAAM,EAAE,YAAA,EAAc,SAAA,EAAW,OAAA,EAAS,OAAA,KAAYC,oCAAA,EAAoB;AAE1E,EAAA,MAAM,WAAA,GAAcC,eAAA,CAAW,YAAA,EAAc,GAAG,CAAA;AAChD,EAAA,MAAM,SAAA,GAAYA,eAAA,CAAW,WAAA,EAAaC,uBAAA,CAAmB,QAAQ,CAAC,CAAA;AAEtE,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,IAAA,OAAA,CAAQ,CAAC,SAAS,CAAA;AAAA,EACpB,CAAA;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAACC,oBAAA,CAAe,QAAQ,CAAA,EAAG;AAC1C,IAAA,6DAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAEA,EAAA,MAAM,WAAA,GAAcC,eAAA;AAAA,IAClB;AAAA,MACE,eAAA,EAAiB,SAAA;AAAA,MACjB,eAAA,EAAiB,YAAY,OAAA,GAAU,MAAA;AAAA,MACvC,OAAA,EAAS,WAAA;AAAA,MACT,GAAG;AAAA,KACL;AAAA,IACA,QAAA,CAAS;AAAA,GACX;AAEA,EAAA,OAAOC,mBAAa,QAAA,EAAU;AAAA,IAC5B,GAAG,WAAA;AAAA,IACH,GAAA,EAAK;AAAA,GACN,CAAA;AACH,CAAC;;;;"}