@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.
- package/CHANGELOG.md +116 -0
- package/css/salt-lab.css +166 -249
- package/dist-cjs/index.js +6 -24
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/toolbar-next/ToolbarContentNext.css.js +6 -0
- package/dist-cjs/toolbar-next/ToolbarContentNext.css.js.map +1 -0
- package/dist-cjs/toolbar-next/ToolbarContentNext.js +32 -0
- package/dist-cjs/toolbar-next/ToolbarContentNext.js.map +1 -0
- package/dist-cjs/toolbar-next/ToolbarNext.css.js +6 -0
- package/dist-cjs/toolbar-next/ToolbarNext.css.js.map +1 -0
- package/dist-cjs/toolbar-next/ToolbarNext.js +394 -0
- package/dist-cjs/toolbar-next/ToolbarNext.js.map +1 -0
- package/dist-cjs/toolbar-next/ToolbarNextOverflow.css.js +6 -0
- package/dist-cjs/toolbar-next/ToolbarNextOverflow.css.js.map +1 -0
- package/dist-cjs/toolbar-next/ToolbarNextOverflow.js +705 -0
- package/dist-cjs/toolbar-next/ToolbarNextOverflow.js.map +1 -0
- package/dist-cjs/toolbar-next/ToolbarNextOverflowFloatingBoundary.js +165 -0
- package/dist-cjs/toolbar-next/ToolbarNextOverflowFloatingBoundary.js.map +1 -0
- package/dist-cjs/toolbar-next/TooltrayNext.css.js +6 -0
- package/dist-cjs/toolbar-next/TooltrayNext.css.js.map +1 -0
- package/dist-cjs/toolbar-next/TooltrayNext.js +55 -0
- package/dist-cjs/toolbar-next/TooltrayNext.js.map +1 -0
- package/dist-cjs/toolbar-next/toolbarNextKeyboardUtils.js +391 -0
- package/dist-cjs/toolbar-next/toolbarNextKeyboardUtils.js.map +1 -0
- package/dist-cjs/toolbar-next/toolbarNextUtils.js +215 -0
- package/dist-cjs/toolbar-next/toolbarNextUtils.js.map +1 -0
- package/dist-cjs/toolbar-next/useToolbarNextKeyboardNavigation.js +334 -0
- package/dist-cjs/toolbar-next/useToolbarNextKeyboardNavigation.js.map +1 -0
- package/dist-cjs/toolbar-next/useToolbarNextOverflow.js +743 -0
- package/dist-cjs/toolbar-next/useToolbarNextOverflow.js.map +1 -0
- package/dist-es/index.js +3 -12
- package/dist-es/index.js.map +1 -1
- package/dist-es/toolbar-next/ToolbarContentNext.css.js +4 -0
- package/dist-es/toolbar-next/ToolbarContentNext.css.js.map +1 -0
- package/dist-es/toolbar-next/ToolbarContentNext.js +30 -0
- package/dist-es/toolbar-next/ToolbarContentNext.js.map +1 -0
- package/dist-es/toolbar-next/ToolbarNext.css.js +4 -0
- package/dist-es/toolbar-next/ToolbarNext.css.js.map +1 -0
- package/dist-es/toolbar-next/ToolbarNext.js +392 -0
- package/dist-es/toolbar-next/ToolbarNext.js.map +1 -0
- package/dist-es/toolbar-next/ToolbarNextOverflow.css.js +4 -0
- package/dist-es/toolbar-next/ToolbarNextOverflow.css.js.map +1 -0
- package/dist-es/toolbar-next/ToolbarNextOverflow.js +700 -0
- package/dist-es/toolbar-next/ToolbarNextOverflow.js.map +1 -0
- package/dist-es/toolbar-next/ToolbarNextOverflowFloatingBoundary.js +159 -0
- package/dist-es/toolbar-next/ToolbarNextOverflowFloatingBoundary.js.map +1 -0
- package/dist-es/toolbar-next/TooltrayNext.css.js +4 -0
- package/dist-es/toolbar-next/TooltrayNext.css.js.map +1 -0
- package/dist-es/toolbar-next/TooltrayNext.js +53 -0
- package/dist-es/toolbar-next/TooltrayNext.js.map +1 -0
- package/dist-es/toolbar-next/toolbarNextKeyboardUtils.js +372 -0
- package/dist-es/toolbar-next/toolbarNextKeyboardUtils.js.map +1 -0
- package/dist-es/toolbar-next/toolbarNextUtils.js +211 -0
- package/dist-es/toolbar-next/toolbarNextUtils.js.map +1 -0
- package/dist-es/toolbar-next/useToolbarNextKeyboardNavigation.js +332 -0
- package/dist-es/toolbar-next/useToolbarNextKeyboardNavigation.js.map +1 -0
- package/dist-es/toolbar-next/useToolbarNextOverflow.js +741 -0
- package/dist-es/toolbar-next/useToolbarNextOverflow.js.map +1 -0
- package/dist-types/index.d.ts +1 -2
- package/dist-types/toolbar-next/ToolbarContentNext.d.ts +11 -0
- package/dist-types/toolbar-next/ToolbarNext.d.ts +12 -0
- package/dist-types/toolbar-next/ToolbarNextOverflow.d.ts +34 -0
- package/dist-types/toolbar-next/ToolbarNextOverflowFloatingBoundary.d.ts +16 -0
- package/dist-types/toolbar-next/TooltrayNext.d.ts +37 -0
- package/dist-types/toolbar-next/index.d.ts +3 -0
- package/dist-types/toolbar-next/toolbarNextKeyboardUtils.d.ts +39 -0
- package/dist-types/toolbar-next/toolbarNextUtils.d.ts +42 -0
- package/dist-types/toolbar-next/useToolbarNextKeyboardNavigation.d.ts +41 -0
- package/dist-types/toolbar-next/useToolbarNextOverflow.d.ts +37 -0
- package/package.json +2 -2
- package/dist-cjs/side-panel/SidePanel.css.js +0 -6
- package/dist-cjs/side-panel/SidePanel.css.js.map +0 -1
- package/dist-cjs/side-panel/SidePanel.js +0 -197
- package/dist-cjs/side-panel/SidePanel.js.map +0 -1
- package/dist-cjs/side-panel/SidePanelCloseButton.js +0 -38
- package/dist-cjs/side-panel/SidePanelCloseButton.js.map +0 -1
- package/dist-cjs/side-panel/SidePanelContent.css.js +0 -6
- package/dist-cjs/side-panel/SidePanelContent.css.js.map +0 -1
- package/dist-cjs/side-panel/SidePanelContent.js +0 -66
- package/dist-cjs/side-panel/SidePanelContent.js.map +0 -1
- package/dist-cjs/side-panel/SidePanelHeader.css.js +0 -6
- package/dist-cjs/side-panel/SidePanelHeader.css.js.map +0 -1
- package/dist-cjs/side-panel/SidePanelHeader.js +0 -26
- package/dist-cjs/side-panel/SidePanelHeader.js.map +0 -1
- package/dist-cjs/side-panel/SidePanelProvider.js +0 -78
- package/dist-cjs/side-panel/SidePanelProvider.js.map +0 -1
- package/dist-cjs/side-panel/SidePanelTitle.css.js +0 -6
- package/dist-cjs/side-panel/SidePanelTitle.css.js.map +0 -1
- package/dist-cjs/side-panel/SidePanelTitle.js +0 -48
- package/dist-cjs/side-panel/SidePanelTitle.js.map +0 -1
- package/dist-cjs/side-panel/SidePanelTrigger.js +0 -37
- package/dist-cjs/side-panel/SidePanelTrigger.js.map +0 -1
- package/dist-cjs/side-panel/internal/SidePanelContext.js +0 -32
- package/dist-cjs/side-panel/internal/SidePanelContext.js.map +0 -1
- package/dist-cjs/side-panel/internal/useIsScrollable.js +0 -50
- package/dist-cjs/side-panel/internal/useIsScrollable.js.map +0 -1
- package/dist-cjs/side-panel/internal/useSidePanelTabOrder.js +0 -214
- package/dist-cjs/side-panel/internal/useSidePanelTabOrder.js.map +0 -1
- package/dist-cjs/side-panel/useSidePanel.js +0 -43
- package/dist-cjs/side-panel/useSidePanel.js.map +0 -1
- package/dist-cjs/tree/Tree.css.js +0 -6
- package/dist-cjs/tree/Tree.css.js.map +0 -1
- package/dist-cjs/tree/Tree.js +0 -300
- package/dist-cjs/tree/Tree.js.map +0 -1
- package/dist-cjs/tree/TreeContext.js +0 -31
- package/dist-cjs/tree/TreeContext.js.map +0 -1
- package/dist-cjs/tree/TreeNode.css.js +0 -6
- package/dist-cjs/tree/TreeNode.css.js.map +0 -1
- package/dist-cjs/tree/TreeNode.js +0 -103
- package/dist-cjs/tree/TreeNode.js.map +0 -1
- package/dist-cjs/tree/TreeNodeExpansionIcon.css.js +0 -6
- package/dist-cjs/tree/TreeNodeExpansionIcon.css.js.map +0 -1
- package/dist-cjs/tree/TreeNodeExpansionIcon.js +0 -62
- package/dist-cjs/tree/TreeNodeExpansionIcon.js.map +0 -1
- package/dist-cjs/tree/TreeNodeLabel.css.js +0 -6
- package/dist-cjs/tree/TreeNodeLabel.css.js.map +0 -1
- package/dist-cjs/tree/TreeNodeLabel.js +0 -26
- package/dist-cjs/tree/TreeNodeLabel.js.map +0 -1
- package/dist-cjs/tree/TreeNodeTrigger.css.js +0 -6
- package/dist-cjs/tree/TreeNodeTrigger.css.js.map +0 -1
- package/dist-cjs/tree/TreeNodeTrigger.js +0 -153
- package/dist-cjs/tree/TreeNodeTrigger.js.map +0 -1
- package/dist-cjs/tree/treeModel.js +0 -61
- package/dist-cjs/tree/treeModel.js.map +0 -1
- package/dist-cjs/tree/useTree.js +0 -337
- package/dist-cjs/tree/useTree.js.map +0 -1
- package/dist-es/side-panel/SidePanel.css.js +0 -4
- package/dist-es/side-panel/SidePanel.css.js.map +0 -1
- package/dist-es/side-panel/SidePanel.js +0 -195
- package/dist-es/side-panel/SidePanel.js.map +0 -1
- package/dist-es/side-panel/SidePanelCloseButton.js +0 -36
- package/dist-es/side-panel/SidePanelCloseButton.js.map +0 -1
- package/dist-es/side-panel/SidePanelContent.css.js +0 -4
- package/dist-es/side-panel/SidePanelContent.css.js.map +0 -1
- package/dist-es/side-panel/SidePanelContent.js +0 -64
- package/dist-es/side-panel/SidePanelContent.js.map +0 -1
- package/dist-es/side-panel/SidePanelHeader.css.js +0 -4
- package/dist-es/side-panel/SidePanelHeader.css.js.map +0 -1
- package/dist-es/side-panel/SidePanelHeader.js +0 -24
- package/dist-es/side-panel/SidePanelHeader.js.map +0 -1
- package/dist-es/side-panel/SidePanelProvider.js +0 -76
- package/dist-es/side-panel/SidePanelProvider.js.map +0 -1
- package/dist-es/side-panel/SidePanelTitle.css.js +0 -4
- package/dist-es/side-panel/SidePanelTitle.css.js.map +0 -1
- package/dist-es/side-panel/SidePanelTitle.js +0 -46
- package/dist-es/side-panel/SidePanelTitle.js.map +0 -1
- package/dist-es/side-panel/SidePanelTrigger.js +0 -35
- package/dist-es/side-panel/SidePanelTrigger.js.map +0 -1
- package/dist-es/side-panel/internal/SidePanelContext.js +0 -29
- package/dist-es/side-panel/internal/SidePanelContext.js.map +0 -1
- package/dist-es/side-panel/internal/useIsScrollable.js +0 -48
- package/dist-es/side-panel/internal/useIsScrollable.js.map +0 -1
- package/dist-es/side-panel/internal/useSidePanelTabOrder.js +0 -212
- package/dist-es/side-panel/internal/useSidePanelTabOrder.js.map +0 -1
- package/dist-es/side-panel/useSidePanel.js +0 -41
- package/dist-es/side-panel/useSidePanel.js.map +0 -1
- package/dist-es/tree/Tree.css.js +0 -4
- package/dist-es/tree/Tree.css.js.map +0 -1
- package/dist-es/tree/Tree.js +0 -298
- package/dist-es/tree/Tree.js.map +0 -1
- package/dist-es/tree/TreeContext.js +0 -26
- package/dist-es/tree/TreeContext.js.map +0 -1
- package/dist-es/tree/TreeNode.css.js +0 -4
- package/dist-es/tree/TreeNode.css.js.map +0 -1
- package/dist-es/tree/TreeNode.js +0 -101
- package/dist-es/tree/TreeNode.js.map +0 -1
- package/dist-es/tree/TreeNodeExpansionIcon.css.js +0 -4
- package/dist-es/tree/TreeNodeExpansionIcon.css.js.map +0 -1
- package/dist-es/tree/TreeNodeExpansionIcon.js +0 -60
- package/dist-es/tree/TreeNodeExpansionIcon.js.map +0 -1
- package/dist-es/tree/TreeNodeLabel.css.js +0 -4
- package/dist-es/tree/TreeNodeLabel.css.js.map +0 -1
- package/dist-es/tree/TreeNodeLabel.js +0 -24
- package/dist-es/tree/TreeNodeLabel.js.map +0 -1
- package/dist-es/tree/TreeNodeTrigger.css.js +0 -4
- package/dist-es/tree/TreeNodeTrigger.css.js.map +0 -1
- package/dist-es/tree/TreeNodeTrigger.js +0 -151
- package/dist-es/tree/TreeNodeTrigger.js.map +0 -1
- package/dist-es/tree/treeModel.js +0 -57
- package/dist-es/tree/treeModel.js.map +0 -1
- package/dist-es/tree/useTree.js +0 -335
- package/dist-es/tree/useTree.js.map +0 -1
- package/dist-types/side-panel/SidePanel.d.ts +0 -26
- package/dist-types/side-panel/SidePanelCloseButton.d.ts +0 -2
- package/dist-types/side-panel/SidePanelContent.d.ts +0 -5
- package/dist-types/side-panel/SidePanelHeader.d.ts +0 -5
- package/dist-types/side-panel/SidePanelProvider.d.ts +0 -20
- package/dist-types/side-panel/SidePanelTitle.d.ts +0 -3
- package/dist-types/side-panel/SidePanelTrigger.d.ts +0 -3
- package/dist-types/side-panel/index.d.ts +0 -8
- package/dist-types/side-panel/internal/SidePanelContext.d.ts +0 -52
- package/dist-types/side-panel/internal/index.d.ts +0 -3
- package/dist-types/side-panel/internal/useIsScrollable.d.ts +0 -2
- package/dist-types/side-panel/internal/useSidePanelTabOrder.d.ts +0 -7
- package/dist-types/side-panel/useSidePanel.d.ts +0 -58
- package/dist-types/tree/Tree.d.ts +0 -36
- package/dist-types/tree/TreeContext.d.ts +0 -77
- package/dist-types/tree/TreeNode.d.ts +0 -25
- package/dist-types/tree/TreeNodeExpansionIcon.d.ts +0 -4
- package/dist-types/tree/TreeNodeLabel.d.ts +0 -4
- package/dist-types/tree/TreeNodeTrigger.d.ts +0 -8
- package/dist-types/tree/index.d.ts +0 -4
- package/dist-types/tree/treeModel.d.ts +0 -24
- package/dist-types/tree/useTree.d.ts +0 -68
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,195 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer, useId, useEventCallback, useForkRef, useIsomorphicLayoutEffect, usePrevious } from '@salt-ds/core';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import { clsx } from 'clsx';
|
|
6
|
-
import { forwardRef, useMemo, useState, useRef, useEffect } from 'react';
|
|
7
|
-
import { tabbable } from 'tabbable';
|
|
8
|
-
import { useSidePanelContext, SidePanelContext } from './internal/SidePanelContext.js';
|
|
9
|
-
import css_248z from './SidePanel.css.js';
|
|
10
|
-
|
|
11
|
-
const withBaseName = makePrefixer("saltSidePanel");
|
|
12
|
-
const SidePanel = forwardRef(
|
|
13
|
-
function SidePanel2(props, ref) {
|
|
14
|
-
const {
|
|
15
|
-
disableAnimation = false,
|
|
16
|
-
position = "right",
|
|
17
|
-
initialFocus,
|
|
18
|
-
variant = "primary",
|
|
19
|
-
children,
|
|
20
|
-
id: idProp,
|
|
21
|
-
className,
|
|
22
|
-
"aria-labelledby": ariaLabelledBy,
|
|
23
|
-
onAnimationEnd,
|
|
24
|
-
...rest
|
|
25
|
-
} = props;
|
|
26
|
-
const sidePanelContext = useSidePanelContext();
|
|
27
|
-
const { openState, setFloating, setPanelId, titleId } = sidePanelContext;
|
|
28
|
-
const positionedContext = useMemo(
|
|
29
|
-
() => ({ ...sidePanelContext, position }),
|
|
30
|
-
[sidePanelContext, position]
|
|
31
|
-
);
|
|
32
|
-
const id = useId(idProp);
|
|
33
|
-
const [showComponent, setShowComponent] = useState(openState);
|
|
34
|
-
const [animating, setAnimating] = useState(false);
|
|
35
|
-
const shouldAnimateOpen = useRef(!openState);
|
|
36
|
-
const initialMountRef = useRef(true);
|
|
37
|
-
const panelRef = useRef(null);
|
|
38
|
-
const targetWindow = useWindow();
|
|
39
|
-
useComponentCssInjection({
|
|
40
|
-
testId: "salt-side-panel",
|
|
41
|
-
css: css_248z,
|
|
42
|
-
window: targetWindow
|
|
43
|
-
});
|
|
44
|
-
const initialFocusDoneRef = useRef(false);
|
|
45
|
-
useEffect(() => {
|
|
46
|
-
if (!openState) {
|
|
47
|
-
initialFocusDoneRef.current = false;
|
|
48
|
-
}
|
|
49
|
-
}, [openState]);
|
|
50
|
-
const handleInitialFocus = useEventCallback((el) => {
|
|
51
|
-
var _a, _b;
|
|
52
|
-
if (!el || !openState || initialFocusDoneRef.current) {
|
|
53
|
-
return;
|
|
54
|
-
}
|
|
55
|
-
if (initialMountRef.current) {
|
|
56
|
-
const reference2 = sidePanelContext.floatingRootContext.elements.reference;
|
|
57
|
-
const activeElement = reference2 instanceof Element ? (_a = reference2.ownerDocument) == null ? void 0 : _a.activeElement : null;
|
|
58
|
-
const focusCameFromTrigger = reference2 instanceof Element && activeElement instanceof Node && reference2.contains(activeElement);
|
|
59
|
-
if (!focusCameFromTrigger) {
|
|
60
|
-
return;
|
|
61
|
-
}
|
|
62
|
-
initialMountRef.current = false;
|
|
63
|
-
}
|
|
64
|
-
initialFocusDoneRef.current = true;
|
|
65
|
-
const raf = ((_b = el.ownerDocument.defaultView) == null ? void 0 : _b.requestAnimationFrame) ?? (targetWindow == null ? void 0 : targetWindow.requestAnimationFrame) ?? requestAnimationFrame;
|
|
66
|
-
raf(() => {
|
|
67
|
-
if (!el.isConnected) return;
|
|
68
|
-
const focusTarget = resolveInitialFocusTarget(el, initialFocus);
|
|
69
|
-
focusTarget == null ? void 0 : focusTarget.focus();
|
|
70
|
-
});
|
|
71
|
-
});
|
|
72
|
-
const setPanelEl = useEventCallback((el) => {
|
|
73
|
-
panelRef.current = el;
|
|
74
|
-
setFloating(el);
|
|
75
|
-
handleInitialFocus(el);
|
|
76
|
-
});
|
|
77
|
-
const handleRef = useForkRef(setPanelEl, ref);
|
|
78
|
-
useIsomorphicLayoutEffect(() => {
|
|
79
|
-
if (!animating || disableAnimation) return;
|
|
80
|
-
const panel = panelRef.current;
|
|
81
|
-
if (!panel) return;
|
|
82
|
-
const previousAnimation = panel.style.animation;
|
|
83
|
-
panel.style.animation = "none";
|
|
84
|
-
const widthPx = panel.getBoundingClientRect().width;
|
|
85
|
-
panel.style.animation = previousAnimation;
|
|
86
|
-
panel.style.setProperty(
|
|
87
|
-
"--saltSidePanel-animation-width",
|
|
88
|
-
`${widthPx}px`
|
|
89
|
-
);
|
|
90
|
-
return () => {
|
|
91
|
-
panel.style.removeProperty("--saltSidePanel-animation-width");
|
|
92
|
-
};
|
|
93
|
-
}, [animating, disableAnimation]);
|
|
94
|
-
const handleAnimationEnd = useEventCallback(
|
|
95
|
-
(event) => {
|
|
96
|
-
onAnimationEnd == null ? void 0 : onAnimationEnd(event);
|
|
97
|
-
if (event.currentTarget !== event.target || disableAnimation) return;
|
|
98
|
-
setAnimating(false);
|
|
99
|
-
if (!openState) {
|
|
100
|
-
setShowComponent(false);
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
);
|
|
104
|
-
useEffect(() => {
|
|
105
|
-
setPanelId(id);
|
|
106
|
-
return () => {
|
|
107
|
-
setPanelId(void 0);
|
|
108
|
-
};
|
|
109
|
-
}, [id, setPanelId]);
|
|
110
|
-
const reference = sidePanelContext.floatingRootContext.elements.reference;
|
|
111
|
-
const previousOpenState = usePrevious(openState, [openState], false);
|
|
112
|
-
useEffect(() => {
|
|
113
|
-
if (!previousOpenState || openState) return;
|
|
114
|
-
const panel = panelRef.current;
|
|
115
|
-
if (!(reference instanceof HTMLElement)) return;
|
|
116
|
-
const doc = reference.ownerDocument;
|
|
117
|
-
const active = doc == null ? void 0 : doc.activeElement;
|
|
118
|
-
const focusInsidePanel = panel && active instanceof Node && panel.contains(active);
|
|
119
|
-
const focusOnBody = active === (doc == null ? void 0 : doc.body) || active == null;
|
|
120
|
-
if (focusInsidePanel || focusOnBody) {
|
|
121
|
-
reference.focus();
|
|
122
|
-
}
|
|
123
|
-
}, [openState, previousOpenState, reference]);
|
|
124
|
-
useIsomorphicLayoutEffect(() => {
|
|
125
|
-
var _a, _b;
|
|
126
|
-
if (disableAnimation) {
|
|
127
|
-
setShowComponent(openState);
|
|
128
|
-
setAnimating(false);
|
|
129
|
-
if (!openState) shouldAnimateOpen.current = true;
|
|
130
|
-
return;
|
|
131
|
-
}
|
|
132
|
-
if (!openState) {
|
|
133
|
-
shouldAnimateOpen.current = true;
|
|
134
|
-
}
|
|
135
|
-
if (openState && !shouldAnimateOpen.current) {
|
|
136
|
-
setShowComponent(true);
|
|
137
|
-
setAnimating(false);
|
|
138
|
-
return;
|
|
139
|
-
}
|
|
140
|
-
const prefersReducedMotion = (_b = (_a = targetWindow == null ? void 0 : targetWindow.matchMedia) == null ? void 0 : _a.call(
|
|
141
|
-
targetWindow,
|
|
142
|
-
"(prefers-reduced-motion: reduce)"
|
|
143
|
-
)) == null ? void 0 : _b.matches;
|
|
144
|
-
if (openState) {
|
|
145
|
-
setShowComponent(true);
|
|
146
|
-
}
|
|
147
|
-
if (prefersReducedMotion) {
|
|
148
|
-
setAnimating(false);
|
|
149
|
-
if (!openState) {
|
|
150
|
-
setShowComponent(false);
|
|
151
|
-
}
|
|
152
|
-
} else {
|
|
153
|
-
setAnimating(true);
|
|
154
|
-
}
|
|
155
|
-
}, [openState, targetWindow, disableAnimation]);
|
|
156
|
-
if (!showComponent) return null;
|
|
157
|
-
return /* @__PURE__ */ jsx(
|
|
158
|
-
"div",
|
|
159
|
-
{
|
|
160
|
-
role: "region",
|
|
161
|
-
"aria-labelledby": clsx(ariaLabelledBy, titleId) || void 0,
|
|
162
|
-
ref: handleRef,
|
|
163
|
-
className: clsx(
|
|
164
|
-
withBaseName(),
|
|
165
|
-
{
|
|
166
|
-
[withBaseName(position)]: position,
|
|
167
|
-
[withBaseName(variant)]: variant,
|
|
168
|
-
[withBaseName("enterAnimation")]: !disableAnimation && openState && animating,
|
|
169
|
-
[withBaseName("exitAnimation")]: !disableAnimation && !openState && animating
|
|
170
|
-
},
|
|
171
|
-
className
|
|
172
|
-
),
|
|
173
|
-
onAnimationEnd: handleAnimationEnd,
|
|
174
|
-
tabIndex: -1,
|
|
175
|
-
...rest,
|
|
176
|
-
id,
|
|
177
|
-
children: /* @__PURE__ */ jsx(SidePanelContext.Provider, { value: positionedContext, children: /* @__PURE__ */ jsx("div", { className: withBaseName("inner"), children }) })
|
|
178
|
-
}
|
|
179
|
-
);
|
|
180
|
-
}
|
|
181
|
-
);
|
|
182
|
-
function resolveInitialFocusTarget(panel, initialFocus) {
|
|
183
|
-
if (initialFocus && typeof initialFocus === "object") {
|
|
184
|
-
return initialFocus.current ?? null;
|
|
185
|
-
}
|
|
186
|
-
const managed = Array.from(
|
|
187
|
-
panel.querySelectorAll("[data-salt-original-tabindex]")
|
|
188
|
-
);
|
|
189
|
-
const candidates = managed.length ? managed : tabbable(panel, { displayCheck: "none" });
|
|
190
|
-
const index = typeof initialFocus === "number" ? initialFocus : 0;
|
|
191
|
-
return candidates[index] ?? candidates[0] ?? panel;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
export { SidePanel };
|
|
195
|
-
//# 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":["SidePanel","sidePanelCss","reference"],"mappings":"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"}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer, useIcon, useId, Button } from '@salt-ds/core';
|
|
3
|
-
import { clsx } from 'clsx';
|
|
4
|
-
import { forwardRef } from 'react';
|
|
5
|
-
import { useSidePanelContext } from './internal/SidePanelContext.js';
|
|
6
|
-
import 'tabbable';
|
|
7
|
-
|
|
8
|
-
const withBaseName = makePrefixer("saltSidePanelCloseButton");
|
|
9
|
-
const SidePanelCloseButton = forwardRef(
|
|
10
|
-
function SidePanelCloseButton2({ className, onClick, id: idProp, ...rest }, ref) {
|
|
11
|
-
const { CollapseLeftIcon, CollapseRightIcon } = useIcon();
|
|
12
|
-
const { setOpen, titleId, position } = useSidePanelContext();
|
|
13
|
-
const closeButtonId = useId(idProp);
|
|
14
|
-
const handleClick = (event) => {
|
|
15
|
-
onClick == null ? void 0 : onClick(event);
|
|
16
|
-
setOpen(false);
|
|
17
|
-
};
|
|
18
|
-
return /* @__PURE__ */ jsx(
|
|
19
|
-
Button,
|
|
20
|
-
{
|
|
21
|
-
ref,
|
|
22
|
-
id: closeButtonId,
|
|
23
|
-
"aria-label": "Close",
|
|
24
|
-
"aria-labelledby": titleId ? clsx(closeButtonId, titleId) : void 0,
|
|
25
|
-
appearance: "transparent",
|
|
26
|
-
className: clsx(withBaseName(), className),
|
|
27
|
-
onClick: handleClick,
|
|
28
|
-
...rest,
|
|
29
|
-
children: position === "left" ? /* @__PURE__ */ jsx(CollapseLeftIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsx(CollapseRightIcon, { "aria-hidden": true })
|
|
30
|
-
}
|
|
31
|
-
);
|
|
32
|
-
}
|
|
33
|
-
);
|
|
34
|
-
|
|
35
|
-
export { SidePanelCloseButton };
|
|
36
|
-
//# 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":["SidePanelCloseButton"],"mappings":";;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA;AAErD,MAAM,oBAAA,GAAuB,UAAA;AAAA,EAClC,SAASA,qBAAAA,CACP,EAAE,SAAA,EAAW,OAAA,EAAS,IAAI,MAAA,EAAQ,GAAG,IAAA,EAAK,EAC1C,GAAA,EACA;AACA,IAAA,MAAM,EAAE,gBAAA,EAAkB,iBAAA,EAAkB,GAAI,OAAA,EAAQ;AACxD,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAS,QAAA,KAAa,mBAAA,EAAoB;AAC3D,IAAA,MAAM,aAAA,GAAgB,MAAM,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,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA,EAAI,aAAA;AAAA,QACJ,YAAA,EAAW,OAAA;AAAA,QACX,iBAAA,EAAiB,OAAA,GAAU,IAAA,CAAK,aAAA,EAAe,OAAO,CAAA,GAAI,MAAA;AAAA,QAC1D,UAAA,EAAW,aAAA;AAAA,QACX,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,OAAA,EAAS,WAAA;AAAA,QACR,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,QAAA,KAAa,MAAA,mBACZ,GAAA,CAAC,gBAAA,EAAA,EAAiB,aAAA,EAAW,MAAC,CAAA,mBAE9B,GAAA,CAAC,iBAAA,EAAA,EAAkB,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,KAEnC;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
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";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=SidePanelContent.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelContent.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer, useId } from '@salt-ds/core';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import { clsx } from 'clsx';
|
|
6
|
-
import { forwardRef, useRef } from 'react';
|
|
7
|
-
import { useSidePanelContext } from './internal/SidePanelContext.js';
|
|
8
|
-
import { useIsScrollable } from './internal/useIsScrollable.js';
|
|
9
|
-
import 'tabbable';
|
|
10
|
-
import css_248z from './SidePanelContent.css.js';
|
|
11
|
-
|
|
12
|
-
const withBaseName = makePrefixer("saltSidePanelContent");
|
|
13
|
-
const SidePanelContent = forwardRef(function SidePanelContent2(props, ref) {
|
|
14
|
-
const {
|
|
15
|
-
children,
|
|
16
|
-
className,
|
|
17
|
-
"aria-labelledby": ariaLabelledBy,
|
|
18
|
-
"aria-label": ariaLabel,
|
|
19
|
-
...rest
|
|
20
|
-
} = props;
|
|
21
|
-
const { titleId } = useSidePanelContext();
|
|
22
|
-
const targetWindow = useWindow();
|
|
23
|
-
const contentSuffixId = useId();
|
|
24
|
-
const bodyRef = useRef(null);
|
|
25
|
-
const isScrollable = useIsScrollable(bodyRef);
|
|
26
|
-
useComponentCssInjection({
|
|
27
|
-
testId: "salt-side-panel-content",
|
|
28
|
-
css: css_248z,
|
|
29
|
-
window: targetWindow
|
|
30
|
-
});
|
|
31
|
-
const explicitLabelledBy = ariaLabelledBy;
|
|
32
|
-
const explicitLabel = ariaLabel;
|
|
33
|
-
let bodyAriaLabelledBy;
|
|
34
|
-
let bodyAriaLabel;
|
|
35
|
-
if (isScrollable) {
|
|
36
|
-
if (explicitLabelledBy) {
|
|
37
|
-
bodyAriaLabelledBy = explicitLabelledBy;
|
|
38
|
-
} else if (titleId) {
|
|
39
|
-
bodyAriaLabelledBy = clsx(titleId, contentSuffixId) || void 0;
|
|
40
|
-
} else {
|
|
41
|
-
bodyAriaLabel = explicitLabel ?? "Content";
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
return /* @__PURE__ */ jsxs("div", { ref, className: clsx(withBaseName(), className), ...rest, children: [
|
|
45
|
-
isScrollable ? /* @__PURE__ */ jsx("span", { id: contentSuffixId, hidden: true, children: "content" }) : null,
|
|
46
|
-
/* @__PURE__ */ jsx(
|
|
47
|
-
"div",
|
|
48
|
-
{
|
|
49
|
-
ref: bodyRef,
|
|
50
|
-
className: withBaseName("body"),
|
|
51
|
-
...isScrollable && {
|
|
52
|
-
role: "region",
|
|
53
|
-
tabIndex: 0,
|
|
54
|
-
"aria-labelledby": bodyAriaLabelledBy,
|
|
55
|
-
"aria-label": bodyAriaLabel
|
|
56
|
-
},
|
|
57
|
-
children
|
|
58
|
-
}
|
|
59
|
-
)
|
|
60
|
-
] });
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
export { SidePanelContent };
|
|
64
|
-
//# 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":["SidePanelContent","sidePanelContentCss"],"mappings":";;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA;AAIjD,MAAM,gBAAA,GAAmB,UAAA,CAG9B,SAASA,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,GAAI,mBAAA,EAAoB;AACxC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,MAAM,kBAAkB,KAAA,EAAM;AAC9B,EAAA,MAAM,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,YAAA,GAAe,gBAAgB,OAAO,CAAA;AAE5C,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,yBAAA;AAAA,IACR,GAAA,EAAKC,QAAA;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,GAAqB,IAAA,CAAK,OAAA,EAAS,eAAe,CAAA,IAAK,MAAA;AAAA,IACzD,CAAA,MAAO;AACL,MAAA,aAAA,GAAgB,aAAA,IAAiB,SAAA;AAAA,IACnC;AAAA,EACF;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAW,IAAA,CAAK,cAAa,EAAG,SAAS,CAAA,EAAI,GAAG,IAAA,EAC5D,QAAA,EAAA;AAAA,IAAA,YAAA,uBACE,MAAA,EAAA,EAAK,EAAA,EAAI,iBAAiB,MAAA,EAAM,IAAA,EAAC,qBAElC,CAAA,GACE,IAAA;AAAA,oBACJ,GAAA;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 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelHeader.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer } from '@salt-ds/core';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import { clsx } from 'clsx';
|
|
6
|
-
import { forwardRef } from 'react';
|
|
7
|
-
import css_248z from './SidePanelHeader.css.js';
|
|
8
|
-
|
|
9
|
-
const withBaseName = makePrefixer("saltSidePanelHeader");
|
|
10
|
-
const SidePanelHeader = forwardRef(
|
|
11
|
-
function SidePanelHeader2(props, ref) {
|
|
12
|
-
const { children, className, ...rest } = props;
|
|
13
|
-
const targetWindow = useWindow();
|
|
14
|
-
useComponentCssInjection({
|
|
15
|
-
testId: "salt-side-panel-header",
|
|
16
|
-
css: css_248z,
|
|
17
|
-
window: targetWindow
|
|
18
|
-
});
|
|
19
|
-
return /* @__PURE__ */ jsx("div", { ref, className: clsx(withBaseName(), className), ...rest, children });
|
|
20
|
-
}
|
|
21
|
-
);
|
|
22
|
-
|
|
23
|
-
export { SidePanelHeader };
|
|
24
|
-
//# 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":["SidePanelHeader","sidePanelHeaderCss"],"mappings":";;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA;AAIhD,MAAM,eAAA,GAAkB,UAAA;AAAA,EAC7B,SAASA,gBAAAA,CAAgB,KAAA,EAAO,GAAA,EAAK;AACnC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAEzC,IAAA,MAAM,eAAe,SAAA,EAAU;AAE/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,wBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAI,GAAG,IAAA,EAC5D,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useFloatingRootContext } from '@floating-ui/react';
|
|
3
|
-
import { useControlled } from '@salt-ds/core';
|
|
4
|
-
import { useCallback, useState, useMemo, useEffect } from 'react';
|
|
5
|
-
import { SidePanelContext } from './internal/SidePanelContext.js';
|
|
6
|
-
import { useSidePanelTabOrder } from './internal/useSidePanelTabOrder.js';
|
|
7
|
-
|
|
8
|
-
function SidePanelProvider(props) {
|
|
9
|
-
const { children, open: openProp, defaultOpen, onOpenChange } = props;
|
|
10
|
-
const [openState, setOpenState] = useControlled({
|
|
11
|
-
default: Boolean(defaultOpen),
|
|
12
|
-
controlled: openProp,
|
|
13
|
-
name: "SidePanelProvider",
|
|
14
|
-
state: "open"
|
|
15
|
-
});
|
|
16
|
-
const handleOpenChange = useCallback(
|
|
17
|
-
(newOpen) => {
|
|
18
|
-
setOpenState(newOpen);
|
|
19
|
-
onOpenChange == null ? void 0 : onOpenChange(newOpen);
|
|
20
|
-
},
|
|
21
|
-
[onOpenChange]
|
|
22
|
-
);
|
|
23
|
-
const [reference, setReference] = useState(null);
|
|
24
|
-
const [floating, setFloating] = useState(null);
|
|
25
|
-
const [panelId, setPanelId] = useState(void 0);
|
|
26
|
-
const [titleId, setTitleId] = useState(void 0);
|
|
27
|
-
const elements = useMemo(
|
|
28
|
-
() => ({ reference, floating }),
|
|
29
|
-
[reference, floating]
|
|
30
|
-
);
|
|
31
|
-
const floatingRootContext = useFloatingRootContext({
|
|
32
|
-
open: openState,
|
|
33
|
-
onOpenChange: handleOpenChange,
|
|
34
|
-
elements
|
|
35
|
-
});
|
|
36
|
-
useEffect(() => {
|
|
37
|
-
if (!openState || !floating) {
|
|
38
|
-
return;
|
|
39
|
-
}
|
|
40
|
-
const onKeyDown = (event) => {
|
|
41
|
-
if (event.key !== "Escape") {
|
|
42
|
-
return;
|
|
43
|
-
}
|
|
44
|
-
event.preventDefault();
|
|
45
|
-
event.stopPropagation();
|
|
46
|
-
handleOpenChange(false);
|
|
47
|
-
};
|
|
48
|
-
floating.addEventListener("keydown", onKeyDown);
|
|
49
|
-
return () => {
|
|
50
|
-
floating.removeEventListener("keydown", onKeyDown);
|
|
51
|
-
};
|
|
52
|
-
}, [floating, openState, handleOpenChange]);
|
|
53
|
-
useSidePanelTabOrder({
|
|
54
|
-
floating,
|
|
55
|
-
open: openState,
|
|
56
|
-
reference
|
|
57
|
-
});
|
|
58
|
-
const context = useMemo(
|
|
59
|
-
() => ({
|
|
60
|
-
openState,
|
|
61
|
-
floatingRootContext,
|
|
62
|
-
setFloating,
|
|
63
|
-
setReference,
|
|
64
|
-
setOpen: handleOpenChange,
|
|
65
|
-
panelId,
|
|
66
|
-
setPanelId,
|
|
67
|
-
titleId,
|
|
68
|
-
setTitleId
|
|
69
|
-
}),
|
|
70
|
-
[openState, floatingRootContext, handleOpenChange, panelId, titleId]
|
|
71
|
-
);
|
|
72
|
-
return /* @__PURE__ */ jsx(SidePanelContext.Provider, { value: context, children });
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
export { SidePanelProvider };
|
|
76
|
-
//# 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":[],"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,GAAI,aAAA,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,GAAmB,WAAA;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,GAAI,SAA6B,IAAI,CAAA;AACnE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAgC,IAAI,CAAA;AACpE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAA6B,MAAS,CAAA;AACpE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAA6B,MAAS,CAAA;AAGpE,EAAA,MAAM,QAAA,GAAW,OAAA;AAAA,IACf,OAAO,EAAE,SAAA,EAAW,QAAA,EAAS,CAAA;AAAA,IAC7B,CAAC,WAAW,QAAQ;AAAA,GACtB;AAEA,EAAA,MAAM,sBAAsB,sBAAA,CAAuB;AAAA,IACjD,IAAA,EAAM,SAAA;AAAA,IACN,YAAA,EAAc,gBAAA;AAAA,IACd;AAAA,GACD,CAAA;AAED,EAAA,SAAA,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,EAAA,oBAAA,CAAqB;AAAA,IACnB,QAAA;AAAA,IACA,IAAA,EAAM,SAAA;AAAA,IACN;AAAA,GACD,CAAA;AAED,EAAA,MAAM,OAAA,GAAU,OAAA;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,2BACG,gBAAA,CAAiB,QAAA,EAAjB,EAA0B,KAAA,EAAO,SAC/B,QAAA,EACH,CAAA;AAEJ;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelTitle.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer, useId, useIsomorphicLayoutEffect, Text } from '@salt-ds/core';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import { clsx } from 'clsx';
|
|
6
|
-
import { forwardRef } from 'react';
|
|
7
|
-
import { useSidePanelContext } from './internal/SidePanelContext.js';
|
|
8
|
-
import 'tabbable';
|
|
9
|
-
import css_248z from './SidePanelTitle.css.js';
|
|
10
|
-
|
|
11
|
-
const withBaseName = makePrefixer("saltSidePanelTitle");
|
|
12
|
-
const SidePanelTitle = forwardRef(
|
|
13
|
-
function SidePanelTitle2(props, ref) {
|
|
14
|
-
const { children, className, id, styleAs = "h2", ...rest } = props;
|
|
15
|
-
const { setTitleId } = useSidePanelContext();
|
|
16
|
-
const targetWindow = useWindow();
|
|
17
|
-
useComponentCssInjection({
|
|
18
|
-
testId: "salt-side-panel-title",
|
|
19
|
-
css: css_248z,
|
|
20
|
-
window: targetWindow
|
|
21
|
-
});
|
|
22
|
-
const titleId = useId(id);
|
|
23
|
-
useIsomorphicLayoutEffect(() => {
|
|
24
|
-
if (titleId) {
|
|
25
|
-
setTitleId(titleId);
|
|
26
|
-
}
|
|
27
|
-
return () => {
|
|
28
|
-
setTitleId(void 0);
|
|
29
|
-
};
|
|
30
|
-
}, [titleId, setTitleId]);
|
|
31
|
-
return /* @__PURE__ */ jsx(
|
|
32
|
-
Text,
|
|
33
|
-
{
|
|
34
|
-
ref,
|
|
35
|
-
id: titleId,
|
|
36
|
-
styleAs,
|
|
37
|
-
className: clsx(withBaseName(), className),
|
|
38
|
-
...rest,
|
|
39
|
-
children
|
|
40
|
-
}
|
|
41
|
-
);
|
|
42
|
-
}
|
|
43
|
-
);
|
|
44
|
-
|
|
45
|
-
export { SidePanelTitle };
|
|
46
|
-
//# 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":["SidePanelTitle","sidePanelTitleCss"],"mappings":";;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAI/C,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,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,GAAI,mBAAA,EAAoB;AAC3C,IAAA,MAAM,eAAe,SAAA,EAAU;AAE/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OAAA,GAAU,MAAM,EAAE,CAAA;AAExB,IAAA,yBAAA,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,uBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA,EAAI,OAAA;AAAA,QACJ,OAAA;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { useForkRef, getRefFromChildren, mergeProps } from '@salt-ds/core';
|
|
3
|
-
import { forwardRef, isValidElement, cloneElement } from 'react';
|
|
4
|
-
import { useSidePanelContext } from './internal/SidePanelContext.js';
|
|
5
|
-
import 'tabbable';
|
|
6
|
-
|
|
7
|
-
const SidePanelTrigger = forwardRef(function SidePanelTrigger2(props, ref) {
|
|
8
|
-
const { children, onClick, ...rest } = props;
|
|
9
|
-
const { setReference, openState, setOpen, panelId } = useSidePanelContext();
|
|
10
|
-
const combinedRef = useForkRef(setReference, ref);
|
|
11
|
-
const handleRef = useForkRef(combinedRef, getRefFromChildren(children));
|
|
12
|
-
const handleClick = (event) => {
|
|
13
|
-
onClick == null ? void 0 : onClick(event);
|
|
14
|
-
setOpen(!openState);
|
|
15
|
-
};
|
|
16
|
-
if (!children || !isValidElement(children)) {
|
|
17
|
-
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
18
|
-
}
|
|
19
|
-
const mergedProps = mergeProps(
|
|
20
|
-
{
|
|
21
|
-
"aria-expanded": openState,
|
|
22
|
-
"aria-controls": openState ? panelId : void 0,
|
|
23
|
-
onClick: handleClick,
|
|
24
|
-
...rest
|
|
25
|
-
},
|
|
26
|
-
children.props
|
|
27
|
-
);
|
|
28
|
-
return cloneElement(children, {
|
|
29
|
-
...mergedProps,
|
|
30
|
-
ref: handleRef
|
|
31
|
-
});
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
export { SidePanelTrigger };
|
|
35
|
-
//# 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":["SidePanelTrigger"],"mappings":";;;;;;AAYO,MAAM,gBAAA,GAAmB,UAAA,CAG9B,SAASA,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,KAAY,mBAAA,EAAoB;AAE1E,EAAA,MAAM,WAAA,GAAc,UAAA,CAAW,YAAA,EAAc,GAAG,CAAA;AAChD,EAAA,MAAM,SAAA,GAAY,UAAA,CAAW,WAAA,EAAa,kBAAA,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,CAAC,cAAA,CAAe,QAAQ,CAAA,EAAG;AAC1C,IAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAEA,EAAA,MAAM,WAAA,GAAc,UAAA;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,OAAO,aAAa,QAAA,EAAU;AAAA,IAC5B,GAAG,WAAA;AAAA,IACH,GAAA,EAAK;AAAA,GACN,CAAA;AACH,CAAC;;;;"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { createContext } from '@salt-ds/core';
|
|
2
|
-
import { useContext } from 'react';
|
|
3
|
-
|
|
4
|
-
const SidePanelContext = createContext(
|
|
5
|
-
"SidePanelContext",
|
|
6
|
-
{
|
|
7
|
-
openState: false,
|
|
8
|
-
floatingRootContext: {},
|
|
9
|
-
setFloating: () => {
|
|
10
|
-
},
|
|
11
|
-
setReference: () => {
|
|
12
|
-
},
|
|
13
|
-
setOpen: () => {
|
|
14
|
-
},
|
|
15
|
-
panelId: void 0,
|
|
16
|
-
setPanelId: () => {
|
|
17
|
-
},
|
|
18
|
-
titleId: void 0,
|
|
19
|
-
setTitleId: () => {
|
|
20
|
-
},
|
|
21
|
-
position: void 0
|
|
22
|
-
}
|
|
23
|
-
);
|
|
24
|
-
function useSidePanelContext() {
|
|
25
|
-
return useContext(SidePanelContext);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
export { SidePanelContext, useSidePanelContext };
|
|
29
|
-
//# sourceMappingURL=SidePanelContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelContext.js","sources":["../src/side-panel/internal/SidePanelContext.ts"],"sourcesContent":["import type { FloatingRootContext } from \"@floating-ui/react\";\nimport { createContext } from \"@salt-ds/core\";\nimport { type Dispatch, type SetStateAction, useContext } from \"react\";\n\nexport interface SidePanelContextValue {\n /**\n * Whether the side panel is currently open.\n */\n openState: boolean;\n /**\n * The floating-ui root context shared between the trigger and the panel.\n * Coordinates interactions (click, dismiss, role) across both elements.\n */\n floatingRootContext: FloatingRootContext;\n /**\n * Ref setter for the panel element.\n * Registers the panel DOM node with floating-ui.\n */\n setFloating: Dispatch<SetStateAction<HTMLDivElement | null>>;\n /**\n * Ref setter for the reference (trigger) element.\n * Registers the trigger DOM node with floating-ui for focus return.\n */\n setReference: Dispatch<SetStateAction<HTMLElement | null>>;\n /**\n * Sets the open state of the panel.\n * Called by the close button in SidePanelHeader, or any consumer that needs to close the panel.\n */\n setOpen: (open: boolean) => void;\n /**\n * Side panel id used for aria-controls on the trigger.\n */\n panelId?: string;\n /**\n * Registers or clears the side panel id used for aria-controls/id linkage.\n */\n setPanelId: Dispatch<SetStateAction<string | undefined>>;\n /**\n * The auto-generated id placed on SidePanelTitle.\n * Used for aria-labelledby on the panel region and the scrollable body.\n */\n titleId?: string;\n /**\n * Registers the title id from SidePanelTitle back to the context\n * so that SidePanel and SidePanelContent can use it for aria-labelledby.\n */\n setTitleId: Dispatch<SetStateAction<string | undefined>>;\n /**\n * Edge the panel is anchored to. Set by SidePanel for its own subtree.\n */\n position?: \"right\" | \"left\";\n}\n\nexport const SidePanelContext = createContext<SidePanelContextValue>(\n \"SidePanelContext\",\n {\n openState: false,\n floatingRootContext: {} as FloatingRootContext,\n setFloating: () => {},\n setReference: () => {},\n setOpen: () => {},\n panelId: undefined,\n setPanelId: () => {},\n titleId: undefined,\n setTitleId: () => {},\n position: undefined,\n },\n);\n\nexport function useSidePanelContext() {\n return useContext(SidePanelContext);\n}\n"],"names":[],"mappings":";;;AAqDO,MAAM,gBAAA,GAAmB,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,SAAA,EAAW,KAAA;AAAA,IACX,qBAAqB,EAAC;AAAA,IACtB,aAAa,MAAM;AAAA,IAAC,CAAA;AAAA,IACpB,cAAc,MAAM;AAAA,IAAC,CAAA;AAAA,IACrB,SAAS,MAAM;AAAA,IAAC,CAAA;AAAA,IAChB,OAAA,EAAS,MAAA;AAAA,IACT,YAAY,MAAM;AAAA,IAAC,CAAA;AAAA,IACnB,OAAA,EAAS,MAAA;AAAA,IACT,YAAY,MAAM;AAAA,IAAC,CAAA;AAAA,IACnB,QAAA,EAAU;AAAA;AAEd;AAEO,SAAS,mBAAA,GAAsB;AACpC,EAAA,OAAO,WAAW,gBAAgB,CAAA;AACpC;;;;"}
|