@smwb/ui-react 2.8.0 → 2.10.0
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/AI_LESS_OVERRIDES.md +84 -21
- package/AI_THEMING.md +72 -28
- package/README.md +654 -0
- package/dist/assets/styles/less/components/appBar/appBar.entry.css +1 -1
- package/dist/assets/styles/less/components/badge/badge.entry.css +1 -1
- package/dist/assets/styles/less/components/button/button.entry.css +1 -1
- package/dist/assets/styles/less/components/checkbox/checkbox.entry.css +1 -1
- package/dist/assets/styles/less/components/chip/chip.entry.css +1 -1
- package/dist/assets/styles/less/components/commandPalette/commandPalette.entry.css +1 -0
- package/dist/assets/styles/less/components/composer/composer.entry.css +1 -0
- package/dist/assets/styles/less/components/dagView/dagView.entry.css +1 -0
- package/dist/assets/styles/less/components/diffStat/diffStat.entry.css +1 -0
- package/dist/assets/styles/less/components/kbd/kbd.entry.css +1 -0
- package/dist/assets/styles/less/components/list/list.entry.css +1 -1
- package/dist/assets/styles/less/components/qrCode/qrCode.entry.css +1 -0
- package/dist/assets/styles/less/components/radioButton/radioButton.entry.css +1 -1
- package/dist/assets/styles/less/components/selectField/selectField.entry.css +1 -1
- package/dist/assets/styles/less/components/sidebar/sidebar.entry.css +1 -1
- package/dist/assets/styles/less/components/statusDot/statusDot.entry.css +1 -0
- package/dist/assets/styles/less/components/swimlanes/swimlanes.entry.css +1 -0
- package/dist/assets/styles/less/components/tabGroups/tabGroups.entry.css +1 -0
- package/dist/assets/styles/less/components/tabs/tab/tab.entry.css +1 -1
- package/dist/assets/styles/less/components/tabs/tabPanel/tabPanel.entry.css +1 -0
- package/dist/assets/styles/less/components/tabs/tabs.entry.css +1 -1
- package/dist/assets/styles/less/components/textField/textField.entry.css +1 -1
- package/dist/assets/styles/less/components/toggle/toggle.entry.css +1 -1
- package/dist/assets/styles/less/components/treeView/treeView.entry.css +1 -1
- package/dist/assets/styles/less/tokens.entry.css +1 -1
- package/dist/components/dataDisplay/badge/badge.d.ts +2 -1
- package/dist/components/dataDisplay/badge/badge.js.map +1 -1
- package/dist/components/dataDisplay/chat/chat.d.ts +43 -1
- package/dist/components/dataDisplay/chat/chat.js +179 -150
- package/dist/components/dataDisplay/chat/chat.js.map +1 -1
- package/dist/components/dataDisplay/chat/chatComposer.d.ts +17 -0
- package/dist/components/dataDisplay/chat/chatComposer.js +31 -29
- package/dist/components/dataDisplay/chat/chatComposer.js.map +1 -1
- package/dist/components/dataDisplay/chat/index.d.ts +1 -1
- package/dist/components/dataDisplay/chat/utils.d.ts +14 -0
- package/dist/components/dataDisplay/chat/utils.js.map +1 -1
- package/dist/components/dataDisplay/dagView/dagLayout.d.ts +74 -0
- package/dist/components/dataDisplay/dagView/dagLayout.js +289 -0
- package/dist/components/dataDisplay/dagView/dagLayout.js.map +1 -0
- package/dist/components/dataDisplay/dagView/dagView.d.ts +157 -0
- package/dist/components/dataDisplay/dagView/dagView.js +543 -0
- package/dist/components/dataDisplay/dagView/dagView.js.map +1 -0
- package/dist/components/dataDisplay/dagView/index.d.ts +4 -0
- package/dist/components/dataDisplay/dagView/panZoom.d.ts +75 -0
- package/dist/components/dataDisplay/dagView/panZoom.js +171 -0
- package/dist/components/dataDisplay/dagView/panZoom.js.map +1 -0
- package/dist/components/dataDisplay/diffStat/diffStat.d.ts +54 -0
- package/dist/components/dataDisplay/diffStat/diffStat.js +63 -0
- package/dist/components/dataDisplay/diffStat/diffStat.js.map +1 -0
- package/dist/components/dataDisplay/diffStat/index.d.ts +2 -0
- package/dist/components/dataDisplay/kbd/index.d.ts +4 -0
- package/dist/components/dataDisplay/kbd/kbd.d.ts +40 -0
- package/dist/components/dataDisplay/kbd/kbd.js +27 -0
- package/dist/components/dataDisplay/kbd/kbd.js.map +1 -0
- package/dist/components/dataDisplay/kbd/kbdKeys.d.ts +18 -0
- package/dist/components/dataDisplay/kbd/kbdKeys.js +72 -0
- package/dist/components/dataDisplay/kbd/kbdKeys.js.map +1 -0
- package/dist/components/dataDisplay/list/listItem.d.ts +34 -0
- package/dist/components/dataDisplay/list/listItem.js +47 -24
- package/dist/components/dataDisplay/list/listItem.js.map +1 -1
- package/dist/components/dataDisplay/qrCode/index.d.ts +2 -0
- package/dist/components/dataDisplay/qrCode/qrCode.d.ts +28 -0
- package/dist/components/dataDisplay/qrCode/qrCode.js +78 -0
- package/dist/components/dataDisplay/qrCode/qrCode.js.map +1 -0
- package/dist/components/dataDisplay/qrCode/qrCodePath.d.ts +7 -0
- package/dist/components/dataDisplay/qrCode/qrCodePath.js +20 -0
- package/dist/components/dataDisplay/qrCode/qrCodePath.js.map +1 -0
- package/dist/components/dataDisplay/statusDot/index.d.ts +2 -0
- package/dist/components/dataDisplay/statusDot/statusDot.d.ts +35 -0
- package/dist/components/dataDisplay/statusDot/statusDot.js +30 -0
- package/dist/components/dataDisplay/statusDot/statusDot.js.map +1 -0
- package/dist/components/dataDisplay/swimlanes/index.d.ts +2 -0
- package/dist/components/dataDisplay/swimlanes/swimlanes.d.ts +53 -0
- package/dist/components/dataDisplay/swimlanes/swimlanes.js +357 -0
- package/dist/components/dataDisplay/swimlanes/swimlanes.js.map +1 -0
- package/dist/components/dataDisplay/treeView/treeView.d.ts +17 -1
- package/dist/components/dataDisplay/treeView/treeView.js +113 -92
- package/dist/components/dataDisplay/treeView/treeView.js.map +1 -1
- package/dist/components/feedBack/modal/modal.js +84 -63
- package/dist/components/feedBack/modal/modal.js.map +1 -1
- package/dist/components/inputs/button/button.d.ts +13 -1
- package/dist/components/inputs/button/button.js +57 -51
- package/dist/components/inputs/button/button.js.map +1 -1
- package/dist/components/inputs/composer/composer.d.ts +149 -0
- package/dist/components/inputs/composer/composer.js +219 -0
- package/dist/components/inputs/composer/composer.js.map +1 -0
- package/dist/components/inputs/composer/composerFiles.d.ts +26 -0
- package/dist/components/inputs/composer/composerFiles.js +19 -0
- package/dist/components/inputs/composer/composerFiles.js.map +1 -0
- package/dist/components/inputs/composer/composerKeys.d.ts +29 -0
- package/dist/components/inputs/composer/composerKeys.js +7 -0
- package/dist/components/inputs/composer/composerKeys.js.map +1 -0
- package/dist/components/inputs/composer/index.d.ts +3 -0
- package/dist/components/layout/sheet/sheet.d.ts +12 -0
- package/dist/components/layout/sheet/sheet.js +152 -137
- package/dist/components/layout/sheet/sheet.js.map +1 -1
- package/dist/components/layout/tabGroups/index.d.ts +4 -0
- package/dist/components/layout/tabGroups/tabGroups.d.ts +94 -0
- package/dist/components/layout/tabGroups/tabGroups.js +783 -0
- package/dist/components/layout/tabGroups/tabGroups.js.map +1 -0
- package/dist/components/layout/tabGroups/tabGroupsFocus.d.ts +55 -0
- package/dist/components/layout/tabGroups/tabGroupsFocus.js +199 -0
- package/dist/components/layout/tabGroups/tabGroupsFocus.js.map +1 -0
- package/dist/components/layout/tabGroups/tabGroupsLayout.d.ts +250 -0
- package/dist/components/layout/tabGroups/tabGroupsLayout.js +497 -0
- package/dist/components/layout/tabGroups/tabGroupsLayout.js.map +1 -0
- package/dist/components/navigation/appBar/appBar.d.ts +22 -0
- package/dist/components/navigation/appBar/appBar.js +31 -26
- package/dist/components/navigation/appBar/appBar.js.map +1 -1
- package/dist/components/navigation/commandPalette/commandPalette.d.ts +111 -0
- package/dist/components/navigation/commandPalette/commandPalette.js +337 -0
- package/dist/components/navigation/commandPalette/commandPalette.js.map +1 -0
- package/dist/components/navigation/commandPalette/commandPaletteFilter.d.ts +11 -0
- package/dist/components/navigation/commandPalette/commandPaletteFilter.js +16 -0
- package/dist/components/navigation/commandPalette/commandPaletteFilter.js.map +1 -0
- package/dist/components/navigation/commandPalette/commandPaletteNavigation.d.ts +13 -0
- package/dist/components/navigation/commandPalette/commandPaletteNavigation.js +38 -0
- package/dist/components/navigation/commandPalette/commandPaletteNavigation.js.map +1 -0
- package/dist/components/navigation/commandPalette/commandPaletteTypes.d.ts +39 -0
- package/dist/components/navigation/commandPalette/index.d.ts +4 -0
- package/dist/components/navigation/sidebar/sidebar.d.ts +10 -0
- package/dist/components/navigation/sidebar/sidebar.js +61 -59
- package/dist/components/navigation/sidebar/sidebar.js.map +1 -1
- package/dist/components/navigation/tabs/index.d.ts +3 -1
- package/dist/components/navigation/tabs/tab/tab.d.ts +88 -1
- package/dist/components/navigation/tabs/tab/tab.js +121 -42
- package/dist/components/navigation/tabs/tab/tab.js.map +1 -1
- package/dist/components/navigation/tabs/tabPanel/tabPanel.d.ts +19 -0
- package/dist/components/navigation/tabs/tabPanel/tabPanel.js +27 -0
- package/dist/components/navigation/tabs/tabPanel/tabPanel.js.map +1 -0
- package/dist/components/navigation/tabs/tabs.d.ts +79 -6
- package/dist/components/navigation/tabs/tabs.js +369 -145
- package/dist/components/navigation/tabs/tabs.js.map +1 -1
- package/dist/components/navigation/tabs/tabs.utils.d.ts +20 -0
- package/dist/components/navigation/tabs/tabs.utils.js +11 -0
- package/dist/components/navigation/tabs/tabs.utils.js.map +1 -0
- package/dist/components/navigation/tabs/tabsContext.d.ts +11 -0
- package/dist/components/navigation/tabs/tabsContext.js +6 -0
- package/dist/components/navigation/tabs/tabsContext.js.map +1 -0
- package/dist/headless/components/dataDisplay/badge/badge.js.map +1 -1
- package/dist/headless/components/dataDisplay/chat/chat.js +179 -150
- package/dist/headless/components/dataDisplay/chat/chat.js.map +1 -1
- package/dist/headless/components/dataDisplay/chat/chatComposer.js +31 -29
- package/dist/headless/components/dataDisplay/chat/chatComposer.js.map +1 -1
- package/dist/headless/components/dataDisplay/chat/utils.js.map +1 -1
- package/dist/headless/components/dataDisplay/dagView/dagLayout.js +289 -0
- package/dist/headless/components/dataDisplay/dagView/dagLayout.js.map +1 -0
- package/dist/headless/components/dataDisplay/dagView/dagView.js +541 -0
- package/dist/headless/components/dataDisplay/dagView/dagView.js.map +1 -0
- package/dist/headless/components/dataDisplay/dagView/panZoom.js +171 -0
- package/dist/headless/components/dataDisplay/dagView/panZoom.js.map +1 -0
- package/dist/headless/components/dataDisplay/diffStat/diffStat.js +61 -0
- package/dist/headless/components/dataDisplay/diffStat/diffStat.js.map +1 -0
- package/dist/headless/components/dataDisplay/kbd/kbd.js +25 -0
- package/dist/headless/components/dataDisplay/kbd/kbd.js.map +1 -0
- package/dist/headless/components/dataDisplay/kbd/kbdKeys.js +72 -0
- package/dist/headless/components/dataDisplay/kbd/kbdKeys.js.map +1 -0
- package/dist/headless/components/dataDisplay/list/listItem.js +47 -24
- package/dist/headless/components/dataDisplay/list/listItem.js.map +1 -1
- package/dist/headless/components/dataDisplay/qrCode/qrCode.js +76 -0
- package/dist/headless/components/dataDisplay/qrCode/qrCode.js.map +1 -0
- package/dist/headless/components/dataDisplay/qrCode/qrCodePath.js +20 -0
- package/dist/headless/components/dataDisplay/qrCode/qrCodePath.js.map +1 -0
- package/dist/headless/components/dataDisplay/statusDot/statusDot.js +28 -0
- package/dist/headless/components/dataDisplay/statusDot/statusDot.js.map +1 -0
- package/dist/headless/components/dataDisplay/swimlanes/swimlanes.js +355 -0
- package/dist/headless/components/dataDisplay/swimlanes/swimlanes.js.map +1 -0
- package/dist/headless/components/dataDisplay/treeView/treeView.js +113 -92
- package/dist/headless/components/dataDisplay/treeView/treeView.js.map +1 -1
- package/dist/headless/components/feedBack/modal/modal.js +85 -64
- package/dist/headless/components/feedBack/modal/modal.js.map +1 -1
- package/dist/headless/components/inputs/button/button.js +56 -50
- package/dist/headless/components/inputs/button/button.js.map +1 -1
- package/dist/headless/components/inputs/composer/composer.js +217 -0
- package/dist/headless/components/inputs/composer/composer.js.map +1 -0
- package/dist/headless/components/inputs/composer/composerFiles.js +19 -0
- package/dist/headless/components/inputs/composer/composerFiles.js.map +1 -0
- package/dist/headless/components/inputs/composer/composerKeys.js +7 -0
- package/dist/headless/components/inputs/composer/composerKeys.js.map +1 -0
- package/dist/headless/components/layout/sheet/sheet.js +160 -145
- package/dist/headless/components/layout/sheet/sheet.js.map +1 -1
- package/dist/headless/components/layout/tabGroups/tabGroups.js +781 -0
- package/dist/headless/components/layout/tabGroups/tabGroups.js.map +1 -0
- package/dist/headless/components/layout/tabGroups/tabGroupsFocus.js +199 -0
- package/dist/headless/components/layout/tabGroups/tabGroupsFocus.js.map +1 -0
- package/dist/headless/components/layout/tabGroups/tabGroupsLayout.js +497 -0
- package/dist/headless/components/layout/tabGroups/tabGroupsLayout.js.map +1 -0
- package/dist/headless/components/navigation/appBar/appBar.js +35 -30
- package/dist/headless/components/navigation/appBar/appBar.js.map +1 -1
- package/dist/headless/components/navigation/commandPalette/commandPalette.js +335 -0
- package/dist/headless/components/navigation/commandPalette/commandPalette.js.map +1 -0
- package/dist/headless/components/navigation/commandPalette/commandPaletteFilter.js +16 -0
- package/dist/headless/components/navigation/commandPalette/commandPaletteFilter.js.map +1 -0
- package/dist/headless/components/navigation/commandPalette/commandPaletteNavigation.js +38 -0
- package/dist/headless/components/navigation/commandPalette/commandPaletteNavigation.js.map +1 -0
- package/dist/headless/components/navigation/sidebar/sidebar.js +56 -54
- package/dist/headless/components/navigation/sidebar/sidebar.js.map +1 -1
- package/dist/headless/components/navigation/tabs/tab/tab.js +121 -42
- package/dist/headless/components/navigation/tabs/tab/tab.js.map +1 -1
- package/dist/headless/components/navigation/tabs/tabPanel/tabPanel.js +25 -0
- package/dist/headless/components/navigation/tabs/tabPanel/tabPanel.js.map +1 -0
- package/dist/headless/components/navigation/tabs/tabs.js +369 -145
- package/dist/headless/components/navigation/tabs/tabs.js.map +1 -1
- package/dist/headless/components/navigation/tabs/tabs.utils.js +11 -0
- package/dist/headless/components/navigation/tabs/tabs.utils.js.map +1 -0
- package/dist/headless/components/navigation/tabs/tabsContext.js +6 -0
- package/dist/headless/components/navigation/tabs/tabsContext.js.map +1 -0
- package/dist/headless/hooks/useFocusTrap.js +24 -21
- package/dist/headless/hooks/useFocusTrap.js.map +1 -1
- package/dist/headless/hooks/useKeyboardShortcut.js +19 -0
- package/dist/headless/hooks/useKeyboardShortcut.js.map +1 -0
- package/dist/headless/index.js +360 -316
- package/dist/headless/index.js.map +1 -1
- package/dist/headless/utils/keyboardShortcut.js +49 -0
- package/dist/headless/utils/keyboardShortcut.js.map +1 -0
- package/dist/headless/utils/linkAttrs.js +13 -0
- package/dist/headless/utils/linkAttrs.js.map +1 -0
- package/dist/headless/utils/restoreFocus.js +10 -0
- package/dist/headless/utils/restoreFocus.js.map +1 -0
- package/dist/hooks/useFocusTrap.d.ts +6 -1
- package/dist/hooks/useFocusTrap.js +24 -21
- package/dist/hooks/useFocusTrap.js.map +1 -1
- package/dist/hooks/useKeyboardShortcut.d.ts +30 -0
- package/dist/hooks/useKeyboardShortcut.js +19 -0
- package/dist/hooks/useKeyboardShortcut.js.map +1 -0
- package/dist/index.cjs +3 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +24 -3
- package/dist/index.js +360 -316
- package/dist/index.js.map +1 -1
- package/dist/utils/keyboardShortcut.d.ts +12 -0
- package/dist/utils/keyboardShortcut.js +49 -0
- package/dist/utils/keyboardShortcut.js.map +1 -0
- package/dist/utils/linkAttrs.d.ts +13 -0
- package/dist/utils/linkAttrs.js +13 -0
- package/dist/utils/linkAttrs.js.map +1 -0
- package/dist/utils/restoreFocus.d.ts +8 -0
- package/dist/utils/restoreFocus.js +10 -0
- package/dist/utils/restoreFocus.js.map +1 -0
- package/package.json +5 -3
|
@@ -1,66 +1,67 @@
|
|
|
1
|
-
import { jsx as n, jsxs as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import { CSSTransition as
|
|
5
|
-
import { createPortal as
|
|
6
|
-
import { Button as
|
|
7
|
-
import { Icon as
|
|
8
|
-
import { useForkRef as
|
|
9
|
-
import { isTopOverlayLayer as
|
|
10
|
-
import {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import { jsx as n, jsxs as ie } from "react/jsx-runtime";
|
|
2
|
+
import j, { forwardRef as le, useState as V, useRef as H, useEffect as ce, useCallback as p } from "react";
|
|
3
|
+
import C from "clsx";
|
|
4
|
+
import { CSSTransition as q } from "react-transition-group";
|
|
5
|
+
import { createPortal as de } from "react-dom";
|
|
6
|
+
import { Button as F } from "../../inputs/button/button.js";
|
|
7
|
+
import { Icon as X } from "../../base/icon/icon.js";
|
|
8
|
+
import { useForkRef as me } from "../../../hooks/useForkRef.js";
|
|
9
|
+
import { isTopOverlayLayer as ue } from "../../../utils/overlayLayer.js";
|
|
10
|
+
import { restoreFocus as he } from "../../../utils/restoreFocus.js";
|
|
11
|
+
import { ClickAwayListener as fe } from "../../clickAwayListener/clickAwayListener.js";
|
|
12
|
+
const ze = le(function({
|
|
13
|
+
isOpen: m,
|
|
14
|
+
onClose: s,
|
|
15
|
+
variant: c = "default",
|
|
15
16
|
children: r,
|
|
16
|
-
placement:
|
|
17
|
-
disableOutsideClick:
|
|
18
|
-
closeOnEsc:
|
|
19
|
-
...
|
|
20
|
-
},
|
|
21
|
-
const [
|
|
22
|
-
|
|
23
|
-
if (!
|
|
17
|
+
placement: _ = "bottom",
|
|
18
|
+
disableOutsideClick: d,
|
|
19
|
+
closeOnEsc: R = !0,
|
|
20
|
+
...A
|
|
21
|
+
}, k) {
|
|
22
|
+
const [u, b] = V(null), y = H(null);
|
|
23
|
+
ce(() => {
|
|
24
|
+
if (!m || !R || !s)
|
|
24
25
|
return;
|
|
25
|
-
const
|
|
26
|
-
|
|
26
|
+
const L = (N) => {
|
|
27
|
+
N.key === "Escape" && !N.defaultPrevented && ue(y.current) && s();
|
|
27
28
|
};
|
|
28
|
-
return document.addEventListener("keydown",
|
|
29
|
-
}, [
|
|
30
|
-
const
|
|
31
|
-
b(
|
|
32
|
-
},
|
|
33
|
-
|
|
29
|
+
return document.addEventListener("keydown", L), () => document.removeEventListener("keydown", L);
|
|
30
|
+
}, [m, R, s]);
|
|
31
|
+
const z = () => {
|
|
32
|
+
b(u === "expanded" ? "small" : u ? null : "expanded");
|
|
33
|
+
}, x = () => {
|
|
34
|
+
s == null || s(), b(null);
|
|
34
35
|
};
|
|
35
|
-
return
|
|
36
|
+
return de(
|
|
36
37
|
/* @__PURE__ */ n(
|
|
37
|
-
|
|
38
|
+
q,
|
|
38
39
|
{
|
|
39
|
-
in:
|
|
40
|
+
in: m,
|
|
40
41
|
timeout: 70,
|
|
41
42
|
mountOnEnter: !0,
|
|
42
43
|
unmountOnExit: !0,
|
|
43
44
|
classNames: { enterDone: "smwb-entered" },
|
|
44
45
|
appear: !0,
|
|
45
46
|
nodeRef: y,
|
|
46
|
-
children:
|
|
47
|
+
children: c === "default" ? /* @__PURE__ */ n(
|
|
47
48
|
"div",
|
|
48
49
|
{
|
|
49
|
-
className:
|
|
50
|
+
className: C(d ? "smwb-sheet__overlay" : "smwb-sheet__default"),
|
|
50
51
|
ref: y,
|
|
51
52
|
"data-smwb-overlay-layer": "",
|
|
52
53
|
children: /* @__PURE__ */ n(
|
|
53
|
-
|
|
54
|
+
Y,
|
|
54
55
|
{
|
|
55
|
-
ref:
|
|
56
|
-
onClose:
|
|
57
|
-
handleSizeButton:
|
|
58
|
-
handleClose:
|
|
59
|
-
isOpen:
|
|
60
|
-
mode:
|
|
61
|
-
placement:
|
|
62
|
-
variant:
|
|
63
|
-
...
|
|
56
|
+
ref: k,
|
|
57
|
+
onClose: s,
|
|
58
|
+
handleSizeButton: z,
|
|
59
|
+
handleClose: x,
|
|
60
|
+
isOpen: m,
|
|
61
|
+
mode: u,
|
|
62
|
+
placement: _,
|
|
63
|
+
variant: c,
|
|
64
|
+
...A,
|
|
64
65
|
children: r
|
|
65
66
|
}
|
|
66
67
|
)
|
|
@@ -68,21 +69,21 @@ const ke = oe(function({
|
|
|
68
69
|
) : /* @__PURE__ */ n(
|
|
69
70
|
"div",
|
|
70
71
|
{
|
|
71
|
-
className:
|
|
72
|
+
className: C("smwb-sheet__overlay", "smwb-dark", `smwb-${_}`, `smwb-sheet_${c}`),
|
|
72
73
|
ref: y,
|
|
73
74
|
"data-smwb-overlay-layer": "",
|
|
74
|
-
children: /* @__PURE__ */ n(
|
|
75
|
-
|
|
75
|
+
children: /* @__PURE__ */ n(fe, { onClickAway: () => !d && x(), children: /* @__PURE__ */ n(
|
|
76
|
+
Y,
|
|
76
77
|
{
|
|
77
|
-
ref:
|
|
78
|
-
onClose:
|
|
79
|
-
handleSizeButton:
|
|
80
|
-
handleClose:
|
|
81
|
-
isOpen:
|
|
82
|
-
mode:
|
|
83
|
-
placement:
|
|
84
|
-
variant:
|
|
85
|
-
...
|
|
78
|
+
ref: k,
|
|
79
|
+
onClose: s,
|
|
80
|
+
handleSizeButton: z,
|
|
81
|
+
handleClose: x,
|
|
82
|
+
isOpen: m,
|
|
83
|
+
mode: u,
|
|
84
|
+
placement: _,
|
|
85
|
+
variant: c,
|
|
86
|
+
...A,
|
|
86
87
|
children: r
|
|
87
88
|
}
|
|
88
89
|
) })
|
|
@@ -92,137 +93,151 @@ const ke = oe(function({
|
|
|
92
93
|
),
|
|
93
94
|
document.body
|
|
94
95
|
);
|
|
95
|
-
}),
|
|
96
|
+
}), we = (D) => D === "bottom" || D === "top", Y = j.forwardRef(function(m, s) {
|
|
96
97
|
const {
|
|
97
|
-
isOpen:
|
|
98
|
+
isOpen: c,
|
|
98
99
|
placement: r,
|
|
99
|
-
className:
|
|
100
|
-
mode:
|
|
101
|
-
size:
|
|
102
|
-
variant:
|
|
103
|
-
onClose:
|
|
104
|
-
withSizeToggle:
|
|
100
|
+
className: _,
|
|
101
|
+
mode: d,
|
|
102
|
+
size: R = "60%",
|
|
103
|
+
variant: A,
|
|
104
|
+
onClose: k,
|
|
105
|
+
withSizeToggle: u = !0,
|
|
105
106
|
hideHeaderActions: b = !1,
|
|
106
107
|
reverseHeaderActions: y = !1,
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
108
|
+
closeAriaLabel: z = "Close sheet",
|
|
109
|
+
expandAriaLabel: x = "Expand sheet",
|
|
110
|
+
collapseAriaLabel: L = "Collapse sheet",
|
|
111
|
+
restoreAriaLabel: N = "Restore sheet size",
|
|
112
|
+
resizable: S = !1,
|
|
113
|
+
minSize: h = 80,
|
|
114
|
+
maxSize: a,
|
|
115
|
+
resizeStep: I = 24,
|
|
116
|
+
resizeHandleAriaLabel: G = "Resize sheet",
|
|
117
|
+
onResize: P,
|
|
118
|
+
style: J,
|
|
119
|
+
handleClose: Q,
|
|
120
|
+
handleSizeButton: Z,
|
|
121
|
+
children: O,
|
|
122
|
+
"data-testid": ee = "sheet",
|
|
123
|
+
...M
|
|
124
|
+
} = m, te = !b && (!!k || u), E = [];
|
|
125
|
+
u && E.push(
|
|
126
|
+
/* @__PURE__ */ n(
|
|
127
|
+
F,
|
|
128
|
+
{
|
|
129
|
+
variant: "outlined",
|
|
130
|
+
size: "small",
|
|
131
|
+
onClick: Z,
|
|
132
|
+
"aria-label": d === "expanded" ? L : d === "small" ? N : x,
|
|
133
|
+
children: /* @__PURE__ */ n(X, { name: d === "expanded" ? "close_fullscreen" : "open_in_full" })
|
|
134
|
+
},
|
|
135
|
+
"size"
|
|
136
|
+
)
|
|
137
|
+
), k && E.push(
|
|
138
|
+
/* @__PURE__ */ n(F, { variant: "outlined", size: "small", onClick: Q, "aria-label": z, children: /* @__PURE__ */ n(X, { name: "close" }) }, "close")
|
|
139
|
+
), y && E.reverse();
|
|
140
|
+
const K = H(null), T = H(null), re = me(s, K, T), [i, $] = V(null), o = we(r), U = p(
|
|
126
141
|
(e) => {
|
|
127
|
-
const t =
|
|
128
|
-
return Math.max(
|
|
142
|
+
const t = o ? window.innerHeight : window.innerWidth, l = a != null ? a : t;
|
|
143
|
+
return Math.max(h, Math.min(l, e));
|
|
129
144
|
},
|
|
130
|
-
[
|
|
131
|
-
),
|
|
145
|
+
[o, a, h]
|
|
146
|
+
), v = p(() => {
|
|
132
147
|
var t;
|
|
133
|
-
const e = (t =
|
|
134
|
-
return e ?
|
|
135
|
-
}, [
|
|
148
|
+
const e = (t = T.current) == null ? void 0 : t.getBoundingClientRect();
|
|
149
|
+
return e ? o ? e.height : e.width : h;
|
|
150
|
+
}, [o, h]), f = p(
|
|
136
151
|
(e) => {
|
|
137
|
-
const t =
|
|
138
|
-
|
|
152
|
+
const t = U(e);
|
|
153
|
+
$(t), P == null || P(t);
|
|
139
154
|
},
|
|
140
|
-
[
|
|
141
|
-
),
|
|
155
|
+
[U, P]
|
|
156
|
+
), B = H(null), ne = p(
|
|
142
157
|
(e) => {
|
|
143
|
-
var t,
|
|
144
|
-
e.preventDefault(),
|
|
145
|
-
start:
|
|
146
|
-
size:
|
|
158
|
+
var t, l;
|
|
159
|
+
e.preventDefault(), B.current = {
|
|
160
|
+
start: o ? e.clientY : e.clientX,
|
|
161
|
+
size: v()
|
|
147
162
|
};
|
|
148
163
|
try {
|
|
149
|
-
(
|
|
164
|
+
(l = (t = e.currentTarget).setPointerCapture) == null || l.call(t, e.pointerId);
|
|
150
165
|
} catch {
|
|
151
166
|
}
|
|
152
167
|
},
|
|
153
|
-
[
|
|
154
|
-
),
|
|
168
|
+
[o, v]
|
|
169
|
+
), oe = p(
|
|
155
170
|
(e) => {
|
|
156
|
-
const t =
|
|
171
|
+
const t = B.current;
|
|
157
172
|
if (!t)
|
|
158
173
|
return;
|
|
159
|
-
const
|
|
160
|
-
|
|
174
|
+
const w = (o ? e.clientY : e.clientX) - t.start, g = r === "bottom" || r === "right" ? -w : w;
|
|
175
|
+
f(t.size + g);
|
|
161
176
|
},
|
|
162
|
-
[
|
|
163
|
-
),
|
|
164
|
-
var t,
|
|
165
|
-
|
|
166
|
-
}, []),
|
|
177
|
+
[o, r, f]
|
|
178
|
+
), W = p((e) => {
|
|
179
|
+
var t, l, w, g;
|
|
180
|
+
B.current = null, (l = (t = e.currentTarget).hasPointerCapture) != null && l.call(t, e.pointerId) && ((g = (w = e.currentTarget).releasePointerCapture) == null || g.call(w, e.pointerId));
|
|
181
|
+
}, []), ae = p(
|
|
167
182
|
(e) => {
|
|
168
|
-
const t =
|
|
169
|
-
e.key ===
|
|
183
|
+
const t = i != null ? i : v(), l = a != null ? a : o ? window.innerHeight : window.innerWidth, w = r === "bottom" ? "ArrowUp" : r === "top" ? "ArrowDown" : r === "left" ? "ArrowRight" : "ArrowLeft", g = r === "bottom" ? "ArrowDown" : r === "top" ? "ArrowUp" : r === "left" ? "ArrowLeft" : "ArrowRight";
|
|
184
|
+
e.key === w ? (e.preventDefault(), f(t + I)) : e.key === g ? (e.preventDefault(), f(t - I)) : e.key === "Home" ? (e.preventDefault(), f(h)) : e.key === "End" && (e.preventDefault(), f(l));
|
|
170
185
|
},
|
|
171
|
-
[
|
|
186
|
+
[i, v, o, r, f, I, h, a]
|
|
172
187
|
);
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
B(null);
|
|
188
|
+
j.useEffect(() => {
|
|
189
|
+
if (!c) {
|
|
190
|
+
$(null);
|
|
177
191
|
return;
|
|
178
192
|
}
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
193
|
+
const e = T.current, t = e != null && e.contains(document.activeElement) ? null : document.activeElement;
|
|
194
|
+
return e == null || e.focus(), () => he(t, e);
|
|
195
|
+
}, [c]);
|
|
196
|
+
const se = S && i !== null ? { ...o ? { height: i } : { width: i }, transition: "none" } : {};
|
|
197
|
+
return /* @__PURE__ */ n(q, { in: c, timeout: 120, appear: !0, classNames: { enterDone: "smwb-sheet_entered" }, nodeRef: K, children: /* @__PURE__ */ ie(
|
|
183
198
|
"div",
|
|
184
199
|
{
|
|
185
|
-
ref:
|
|
186
|
-
"data-testid":
|
|
187
|
-
...
|
|
200
|
+
ref: re,
|
|
201
|
+
"data-testid": ee,
|
|
202
|
+
...M,
|
|
188
203
|
tabIndex: -1,
|
|
189
204
|
role: "dialog",
|
|
190
|
-
"aria-modal":
|
|
191
|
-
className:
|
|
192
|
-
"smwb-expanded":
|
|
193
|
-
"smwb-small":
|
|
194
|
-
"smwb-sheet_resizable":
|
|
205
|
+
"aria-modal": A === "modal" || M["aria-modal"],
|
|
206
|
+
className: C("smwb-sheet", _, `smwb-sheet_${A}`, `smwb-${r}`, {
|
|
207
|
+
"smwb-expanded": d === "expanded",
|
|
208
|
+
"smwb-small": d === "small",
|
|
209
|
+
"smwb-sheet_resizable": S
|
|
195
210
|
}),
|
|
196
|
-
style: { "--sizeProp":
|
|
211
|
+
style: { "--sizeProp": R, ...se, ...J },
|
|
197
212
|
children: [
|
|
198
|
-
|
|
213
|
+
S && /* @__PURE__ */ n(
|
|
199
214
|
"div",
|
|
200
215
|
{
|
|
201
216
|
className: "smwb-sheet__drag-handle",
|
|
202
217
|
"data-testid": "sheet-drag-handle",
|
|
203
218
|
role: "separator",
|
|
204
219
|
tabIndex: 0,
|
|
205
|
-
"aria-orientation":
|
|
206
|
-
"aria-label":
|
|
207
|
-
"aria-valuemin":
|
|
208
|
-
"aria-valuemax": Math.round(
|
|
209
|
-
"aria-valuenow": Math.round(
|
|
210
|
-
onPointerDown:
|
|
211
|
-
onPointerMove:
|
|
212
|
-
onPointerUp:
|
|
213
|
-
onPointerCancel:
|
|
214
|
-
onKeyDown:
|
|
220
|
+
"aria-orientation": o ? "horizontal" : "vertical",
|
|
221
|
+
"aria-label": G,
|
|
222
|
+
"aria-valuemin": h,
|
|
223
|
+
"aria-valuemax": Math.round(a != null ? a : o ? window.innerHeight : window.innerWidth),
|
|
224
|
+
"aria-valuenow": Math.round(i != null ? i : v()),
|
|
225
|
+
onPointerDown: ne,
|
|
226
|
+
onPointerMove: oe,
|
|
227
|
+
onPointerUp: W,
|
|
228
|
+
onPointerCancel: W,
|
|
229
|
+
onKeyDown: ae,
|
|
215
230
|
children: /* @__PURE__ */ n("span", { className: "smwb-sheet__drag-handle-bar" })
|
|
216
231
|
}
|
|
217
232
|
),
|
|
218
|
-
|
|
219
|
-
|
|
233
|
+
te && /* @__PURE__ */ n("div", { className: "smwb-sheet__header", children: E }),
|
|
234
|
+
c && d !== "small" && /* @__PURE__ */ n("div", { className: "smwb-sheet__inner", children: O })
|
|
220
235
|
]
|
|
221
236
|
}
|
|
222
237
|
) });
|
|
223
238
|
});
|
|
224
239
|
export {
|
|
225
|
-
|
|
226
|
-
|
|
240
|
+
ze as Sheet,
|
|
241
|
+
ze as default
|
|
227
242
|
};
|
|
228
243
|
//# sourceMappingURL=sheet.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.js","sources":["../../../../../src/components/layout/sheet/sheet.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, PropsWithChildren, useCallback, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { createPortal } from \"react-dom\";\nimport Button from \"../../inputs/button/button\";\nimport Icon from \"../../base/icon/icon\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isTopOverlayLayer } from \"../../../utils/overlayLayer\";\n\nexport interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {\n className?: string;\n placement?: \"top\" | \"bottom\" | \"right\" | \"left\";\n isOpen: boolean;\n onClose?: () => void;\n variant?: \"default\" | \"modal\";\n withSizeToggle?: boolean;\n /** Hide built-in header actions; onClose still handles Esc and backdrop. */\n hideHeaderActions?: boolean;\n reverseHeaderActions?: boolean;\n size?: string;\n disableOutsideClick?: boolean;\n /** Close the sheet when Escape is pressed. */\n closeOnEsc?: boolean;\n /**\n * Allow the user to resize the sheet by dragging a grab handle with\n * touch or mouse (mobile bottom-sheet style). Off by default.\n */\n resizable?: boolean;\n /** Minimum size in px while resizing (default 80). */\n minSize?: number;\n /** Maximum size in px while resizing (default: viewport dimension). */\n maxSize?: number;\n /** Step in px for keyboard resizing (default 24). */\n resizeStep?: number;\n /** Accessible label for the resize handle. */\n resizeHandleAriaLabel?: string;\n /** Called with the new size in px while/after resizing. */\n onResize?: (size: number) => void;\n \"aria-label\"?: string;\n /** Test id of the sheet panel (the dialog); `sheet` unless given. */\n \"data-testid\"?: string;\n}\n\ntype Mode = \"small\" | \"expanded\" | null;\n\nexport const Sheet = forwardRef<HTMLDivElement, PropsWithChildren<SheetProps>>(function Sheet(\n {\n isOpen,\n onClose,\n variant = \"default\",\n children,\n placement = \"bottom\",\n disableOutsideClick,\n closeOnEsc = true,\n ...props\n },\n ref\n) {\n const [mode, setMode] = useState<Mode>(null);\n const nodeRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!isOpen || !closeOnEsc || !onClose) {\n return;\n }\n const onKeyDown = (event: KeyboardEvent) => {\n // Only the topmost overlay layer reacts to Escape, and not to one handled inside\n // it, e.g. by a menu closing on it.\n if (event.key === \"Escape\" && !event.defaultPrevented && isTopOverlayLayer(nodeRef.current)) {\n onClose();\n }\n };\n document.addEventListener(\"keydown\", onKeyDown);\n\n return () => document.removeEventListener(\"keydown\", onKeyDown);\n }, [isOpen, closeOnEsc, onClose]);\n\n const handleSizeButton = () => {\n if (mode === \"expanded\") {\n setMode(\"small\");\n } else if (!mode) {\n setMode(\"expanded\");\n } else {\n setMode(null);\n }\n };\n\n const handleClose = () => {\n onClose?.();\n setMode(null);\n };\n\n return createPortal(\n <CSSTransition\n in={isOpen}\n timeout={70}\n mountOnEnter\n unmountOnExit\n classNames={{ enterDone: \"smwb-entered\" }}\n appear\n nodeRef={nodeRef}\n >\n {variant === \"default\" ? (\n <div\n className={cn(disableOutsideClick ? \"smwb-sheet__overlay\" : \"smwb-sheet__default\")}\n ref={nodeRef}\n data-smwb-overlay-layer=\"\"\n >\n <SheetBlock\n ref={ref}\n onClose={onClose}\n handleSizeButton={handleSizeButton}\n handleClose={handleClose}\n isOpen={isOpen}\n mode={mode}\n placement={placement}\n variant={variant}\n {...props}\n >\n {children}\n </SheetBlock>\n </div>\n ) : (\n <div\n className={cn(\"smwb-sheet__overlay\", \"smwb-dark\", `smwb-${placement}`, `smwb-sheet_${variant}`)}\n ref={nodeRef}\n data-smwb-overlay-layer=\"\"\n >\n <ClickAwayListener onClickAway={() => !disableOutsideClick && handleClose()}>\n <SheetBlock\n ref={ref}\n onClose={onClose}\n handleSizeButton={handleSizeButton}\n handleClose={handleClose}\n isOpen={isOpen}\n mode={mode}\n placement={placement}\n variant={variant}\n {...props}\n >\n {children}\n </SheetBlock>\n </ClickAwayListener>\n </div>\n )}\n </CSSTransition>,\n document.body\n );\n});\n\nexport default Sheet;\n\ninterface SheetBlockProps extends SheetProps {\n mode: Mode;\n handleSizeButton: () => void;\n handleClose: () => void;\n}\n\n/** Sheets anchored to a horizontal edge resize on the Y axis, vertical edges on X. */\nconst isVerticalAxis = (placement: SheetProps[\"placement\"]) => placement === \"bottom\" || placement === \"top\";\n\nconst SheetBlock = React.forwardRef(function SheetBlock(props: SheetBlockProps, ref: React.Ref<HTMLDivElement>) {\n const {\n isOpen,\n placement,\n className,\n mode,\n\n size = \"60%\",\n variant,\n onClose,\n withSizeToggle = true,\n hideHeaderActions = false,\n reverseHeaderActions = false,\n resizable = false,\n minSize = 80,\n maxSize,\n resizeStep = 24,\n resizeHandleAriaLabel = \"Resize sheet\",\n onResize,\n style,\n handleClose,\n handleSizeButton,\n children,\n \"data-testid\": dataTestId = \"sheet\",\n ...rest\n } = props;\n const showActions = !hideHeaderActions && (!!onClose || withSizeToggle);\n const headerActionNodes: React.ReactNode[] = [];\n if (withSizeToggle) {\n headerActionNodes.push(\n <Button variant={\"outlined\"} size=\"small\" onClick={handleSizeButton} key=\"size\">\n <Icon name=\"open_in_full\" />\n </Button>\n );\n }\n if (onClose) {\n headerActionNodes.push(\n <Button variant={\"outlined\"} size=\"small\" onClick={handleClose} key=\"close\">\n <Icon name=\"close\" />\n </Button>\n );\n }\n if (reverseHeaderActions) {\n headerActionNodes.reverse();\n }\n const nodeRef = useRef<HTMLDivElement>(null);\n const rootRef = useRef<HTMLDivElement>(null);\n const forkRef = useForkRef(ref, nodeRef, rootRef);\n\n // Drag-to-resize state. `dragSize` (px) wins over the CSS size when set\n // (inline style beats the .smwb-expanded/.smwb-small rules).\n const [dragSize, setDragSize] = useState<number | null>(null);\n const vertical = isVerticalAxis(placement);\n\n const clamp = useCallback(\n (px: number) => {\n const viewport = vertical ? window.innerHeight : window.innerWidth;\n const max = maxSize ?? viewport;\n return Math.max(minSize, Math.min(max, px));\n },\n [vertical, maxSize, minSize]\n );\n\n const currentSizePx = useCallback(() => {\n const rect = rootRef.current?.getBoundingClientRect();\n if (!rect) {\n return minSize;\n }\n return vertical ? rect.height : rect.width;\n }, [vertical, minSize]);\n\n const applySize = useCallback(\n (px: number) => {\n const next = clamp(px);\n setDragSize(next);\n onResize?.(next);\n },\n [clamp, onResize]\n );\n\n const dragRef = useRef<{ start: number; size: number } | null>(null);\n\n const onPointerDown = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n event.preventDefault();\n dragRef.current = {\n start: vertical ? event.clientY : event.clientX,\n size: currentSizePx(),\n };\n try {\n event.currentTarget.setPointerCapture?.(event.pointerId);\n } catch {\n /* pointer capture is best-effort (unsupported in some envs) */\n }\n },\n [vertical, currentSizePx]\n );\n\n const onPointerMove = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n const drag = dragRef.current;\n if (!drag) {\n return;\n }\n const pos = vertical ? event.clientY : event.clientX;\n const delta = pos - drag.start;\n // Sign so dragging *away* from the anchored edge grows the sheet.\n const grow = placement === \"bottom\" || placement === \"right\" ? -delta : delta;\n applySize(drag.size + grow);\n },\n [vertical, placement, applySize]\n );\n\n const endDrag = useCallback((event: React.PointerEvent<HTMLDivElement>) => {\n dragRef.current = null;\n if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n event.currentTarget.releasePointerCapture?.(event.pointerId);\n }\n }, []);\n\n const onHandleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n const base = dragSize ?? currentSizePx();\n const max = maxSize ?? (vertical ? window.innerHeight : window.innerWidth);\n // Key that should make the sheet *bigger*, per anchored edge.\n const incKey =\n placement === \"bottom\"\n ? \"ArrowUp\"\n : placement === \"top\"\n ? \"ArrowDown\"\n : placement === \"left\"\n ? \"ArrowRight\"\n : \"ArrowLeft\";\n const decKey =\n placement === \"bottom\"\n ? \"ArrowDown\"\n : placement === \"top\"\n ? \"ArrowUp\"\n : placement === \"left\"\n ? \"ArrowLeft\"\n : \"ArrowRight\";\n if (event.key === incKey) {\n event.preventDefault();\n applySize(base + resizeStep);\n } else if (event.key === decKey) {\n event.preventDefault();\n applySize(base - resizeStep);\n } else if (event.key === \"Home\") {\n event.preventDefault();\n applySize(minSize);\n } else if (event.key === \"End\") {\n event.preventDefault();\n applySize(max);\n }\n },\n [dragSize, currentSizePx, vertical, placement, applySize, resizeStep, minSize, maxSize]\n );\n\n React.useEffect(() => {\n if (!isOpen) {\n setDragSize(null);\n return;\n }\n\n rootRef.current?.focus();\n }, [isOpen]);\n\n // While a drag size is applied, suppress the sheet's 0.2s size\n // transition so the panel tracks the pointer in real time instead\n // of lagging 200ms behind every move.\n const sizeStyle: CSSProperties =\n resizable && dragSize !== null\n ? { ...(vertical ? { height: dragSize } : { width: dragSize }), transition: \"none\" }\n : {};\n\n return (\n <CSSTransition in={isOpen} timeout={120} appear classNames={{ enterDone: \"smwb-sheet_entered\" }} nodeRef={nodeRef}>\n <div\n ref={forkRef}\n data-testid={dataTestId}\n {...rest}\n // A sheet is a dialog, focused as a whole when it opens: its role and\n // tabIndex win over the caller's, and so does aria-modal on a modal\n // sheet. On another, the caller's aria-modal stays.\n tabIndex={-1}\n role=\"dialog\"\n aria-modal={variant === \"modal\" || rest[\"aria-modal\"]}\n className={cn(\"smwb-sheet\", className, `smwb-sheet_${variant}`, `smwb-${placement}`, {\n \"smwb-expanded\": mode === \"expanded\",\n \"smwb-small\": mode === \"small\",\n \"smwb-sheet_resizable\": resizable,\n })}\n style={{ \"--sizeProp\": size, ...sizeStyle, ...style } as CSSProperties}\n >\n {resizable && (\n <div\n className=\"smwb-sheet__drag-handle\"\n data-testid=\"sheet-drag-handle\"\n role=\"separator\"\n tabIndex={0}\n aria-orientation={vertical ? \"horizontal\" : \"vertical\"}\n aria-label={resizeHandleAriaLabel}\n aria-valuemin={minSize}\n aria-valuemax={Math.round(maxSize ?? (vertical ? window.innerHeight : window.innerWidth))}\n aria-valuenow={Math.round(dragSize ?? currentSizePx())}\n onPointerDown={onPointerDown}\n onPointerMove={onPointerMove}\n onPointerUp={endDrag}\n onPointerCancel={endDrag}\n onKeyDown={onHandleKeyDown}\n >\n <span className=\"smwb-sheet__drag-handle-bar\" />\n </div>\n )}\n {showActions && <div className=\"smwb-sheet__header\">{headerActionNodes}</div>}\n {isOpen && mode !== \"small\" && <div className=\"smwb-sheet__inner\">{children}</div>}\n </div>\n </CSSTransition>\n );\n});\n"],"names":["Sheet","forwardRef","isOpen","onClose","variant","children","placement","disableOutsideClick","closeOnEsc","props","ref","mode","setMode","useState","nodeRef","useRef","useEffect","onKeyDown","event","isTopOverlayLayer","handleSizeButton","handleClose","createPortal","jsx","CSSTransition","cn","SheetBlock","ClickAwayListener","isVerticalAxis","React","className","size","withSizeToggle","hideHeaderActions","reverseHeaderActions","resizable","minSize","maxSize","resizeStep","resizeHandleAriaLabel","onResize","style","dataTestId","rest","showActions","headerActionNodes","Button","Icon","rootRef","forkRef","useForkRef","dragSize","setDragSize","vertical","clamp","useCallback","px","viewport","max","currentSizePx","rect","_a","applySize","next","dragRef","onPointerDown","_b","onPointerMove","drag","delta","grow","endDrag","_d","_c","onHandleKeyDown","base","incKey","decKey","sizeStyle","jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sheet.js","sources":["../../../../../src/components/layout/sheet/sheet.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, PropsWithChildren, useCallback, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { createPortal } from \"react-dom\";\nimport Button from \"../../inputs/button/button\";\nimport Icon from \"../../base/icon/icon\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isTopOverlayLayer } from \"../../../utils/overlayLayer\";\nimport { restoreFocus } from \"../../../utils/restoreFocus\";\n\nexport interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {\n className?: string;\n placement?: \"top\" | \"bottom\" | \"right\" | \"left\";\n isOpen: boolean;\n onClose?: () => void;\n variant?: \"default\" | \"modal\";\n withSizeToggle?: boolean;\n /** Hide built-in header actions; onClose still handles Esc and backdrop. */\n hideHeaderActions?: boolean;\n reverseHeaderActions?: boolean;\n /** Accessible name of the header close button (default \"Close sheet\"). */\n closeAriaLabel?: string;\n /**\n * Accessible name of the size toggle while the sheet is at its normal size (default \"Expand sheet\"). The toggle\n * cycles normal, expanded, collapsed and back, and its name always says what the next press does; the\n * name changing is how it exposes its state. It shows the `open_in_full` icon, and `close_fullscreen` while expanded.\n */\n expandAriaLabel?: string;\n /** Accessible name of the size toggle while the sheet is expanded (default \"Collapse sheet\"). */\n collapseAriaLabel?: string;\n /** Accessible name of the size toggle while the sheet is collapsed to its header (default \"Restore sheet size\"). */\n restoreAriaLabel?: string;\n size?: string;\n disableOutsideClick?: boolean;\n /** Close the sheet when Escape is pressed. */\n closeOnEsc?: boolean;\n /**\n * Allow the user to resize the sheet by dragging a grab handle with\n * touch or mouse (mobile bottom-sheet style). Off by default.\n */\n resizable?: boolean;\n /** Minimum size in px while resizing (default 80). */\n minSize?: number;\n /** Maximum size in px while resizing (default: viewport dimension). */\n maxSize?: number;\n /** Step in px for keyboard resizing (default 24). */\n resizeStep?: number;\n /** Accessible label for the resize handle. */\n resizeHandleAriaLabel?: string;\n /** Called with the new size in px while/after resizing. */\n onResize?: (size: number) => void;\n \"aria-label\"?: string;\n /** Test id of the sheet panel (the dialog); `sheet` unless given. */\n \"data-testid\"?: string;\n}\n\ntype Mode = \"small\" | \"expanded\" | null;\n\nexport const Sheet = forwardRef<HTMLDivElement, PropsWithChildren<SheetProps>>(function Sheet(\n {\n isOpen,\n onClose,\n variant = \"default\",\n children,\n placement = \"bottom\",\n disableOutsideClick,\n closeOnEsc = true,\n ...props\n },\n ref\n) {\n const [mode, setMode] = useState<Mode>(null);\n const nodeRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!isOpen || !closeOnEsc || !onClose) {\n return;\n }\n const onKeyDown = (event: KeyboardEvent) => {\n // Only the topmost overlay layer reacts to Escape, and not to one handled inside\n // it, e.g. by a menu closing on it.\n if (event.key === \"Escape\" && !event.defaultPrevented && isTopOverlayLayer(nodeRef.current)) {\n onClose();\n }\n };\n document.addEventListener(\"keydown\", onKeyDown);\n\n return () => document.removeEventListener(\"keydown\", onKeyDown);\n }, [isOpen, closeOnEsc, onClose]);\n\n const handleSizeButton = () => {\n if (mode === \"expanded\") {\n setMode(\"small\");\n } else if (!mode) {\n setMode(\"expanded\");\n } else {\n setMode(null);\n }\n };\n\n const handleClose = () => {\n onClose?.();\n setMode(null);\n };\n\n return createPortal(\n <CSSTransition\n in={isOpen}\n timeout={70}\n mountOnEnter\n unmountOnExit\n classNames={{ enterDone: \"smwb-entered\" }}\n appear\n nodeRef={nodeRef}\n >\n {variant === \"default\" ? (\n <div\n className={cn(disableOutsideClick ? \"smwb-sheet__overlay\" : \"smwb-sheet__default\")}\n ref={nodeRef}\n data-smwb-overlay-layer=\"\"\n >\n <SheetBlock\n ref={ref}\n onClose={onClose}\n handleSizeButton={handleSizeButton}\n handleClose={handleClose}\n isOpen={isOpen}\n mode={mode}\n placement={placement}\n variant={variant}\n {...props}\n >\n {children}\n </SheetBlock>\n </div>\n ) : (\n <div\n className={cn(\"smwb-sheet__overlay\", \"smwb-dark\", `smwb-${placement}`, `smwb-sheet_${variant}`)}\n ref={nodeRef}\n data-smwb-overlay-layer=\"\"\n >\n <ClickAwayListener onClickAway={() => !disableOutsideClick && handleClose()}>\n <SheetBlock\n ref={ref}\n onClose={onClose}\n handleSizeButton={handleSizeButton}\n handleClose={handleClose}\n isOpen={isOpen}\n mode={mode}\n placement={placement}\n variant={variant}\n {...props}\n >\n {children}\n </SheetBlock>\n </ClickAwayListener>\n </div>\n )}\n </CSSTransition>,\n document.body\n );\n});\n\nexport default Sheet;\n\ninterface SheetBlockProps extends SheetProps {\n mode: Mode;\n handleSizeButton: () => void;\n handleClose: () => void;\n}\n\n/** Sheets anchored to a horizontal edge resize on the Y axis, vertical edges on X. */\nconst isVerticalAxis = (placement: SheetProps[\"placement\"]) => placement === \"bottom\" || placement === \"top\";\n\nconst SheetBlock = React.forwardRef(function SheetBlock(props: SheetBlockProps, ref: React.Ref<HTMLDivElement>) {\n const {\n isOpen,\n placement,\n className,\n mode,\n\n size = \"60%\",\n variant,\n onClose,\n withSizeToggle = true,\n hideHeaderActions = false,\n reverseHeaderActions = false,\n closeAriaLabel = \"Close sheet\",\n expandAriaLabel = \"Expand sheet\",\n collapseAriaLabel = \"Collapse sheet\",\n restoreAriaLabel = \"Restore sheet size\",\n resizable = false,\n minSize = 80,\n maxSize,\n resizeStep = 24,\n resizeHandleAriaLabel = \"Resize sheet\",\n onResize,\n style,\n handleClose,\n handleSizeButton,\n children,\n \"data-testid\": dataTestId = \"sheet\",\n ...rest\n } = props;\n const showActions = !hideHeaderActions && (!!onClose || withSizeToggle);\n const headerActionNodes: React.ReactNode[] = [];\n if (withSizeToggle) {\n headerActionNodes.push(\n <Button\n variant={\"outlined\"}\n size=\"small\"\n onClick={handleSizeButton}\n aria-label={mode === \"expanded\" ? collapseAriaLabel : mode === \"small\" ? restoreAriaLabel : expandAriaLabel}\n key=\"size\"\n >\n <Icon name={mode === \"expanded\" ? \"close_fullscreen\" : \"open_in_full\"} />\n </Button>\n );\n }\n if (onClose) {\n headerActionNodes.push(\n <Button variant={\"outlined\"} size=\"small\" onClick={handleClose} aria-label={closeAriaLabel} key=\"close\">\n <Icon name=\"close\" />\n </Button>\n );\n }\n if (reverseHeaderActions) {\n headerActionNodes.reverse();\n }\n const nodeRef = useRef<HTMLDivElement>(null);\n const rootRef = useRef<HTMLDivElement>(null);\n const forkRef = useForkRef(ref, nodeRef, rootRef);\n\n // Drag-to-resize state. `dragSize` (px) wins over the CSS size when set\n // (inline style beats the .smwb-expanded/.smwb-small rules).\n const [dragSize, setDragSize] = useState<number | null>(null);\n const vertical = isVerticalAxis(placement);\n\n const clamp = useCallback(\n (px: number) => {\n const viewport = vertical ? window.innerHeight : window.innerWidth;\n const max = maxSize ?? viewport;\n return Math.max(minSize, Math.min(max, px));\n },\n [vertical, maxSize, minSize]\n );\n\n const currentSizePx = useCallback(() => {\n const rect = rootRef.current?.getBoundingClientRect();\n if (!rect) {\n return minSize;\n }\n return vertical ? rect.height : rect.width;\n }, [vertical, minSize]);\n\n const applySize = useCallback(\n (px: number) => {\n const next = clamp(px);\n setDragSize(next);\n onResize?.(next);\n },\n [clamp, onResize]\n );\n\n const dragRef = useRef<{ start: number; size: number } | null>(null);\n\n const onPointerDown = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n event.preventDefault();\n dragRef.current = {\n start: vertical ? event.clientY : event.clientX,\n size: currentSizePx(),\n };\n try {\n event.currentTarget.setPointerCapture?.(event.pointerId);\n } catch {\n /* pointer capture is best-effort (unsupported in some envs) */\n }\n },\n [vertical, currentSizePx]\n );\n\n const onPointerMove = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n const drag = dragRef.current;\n if (!drag) {\n return;\n }\n const pos = vertical ? event.clientY : event.clientX;\n const delta = pos - drag.start;\n // Sign so dragging *away* from the anchored edge grows the sheet.\n const grow = placement === \"bottom\" || placement === \"right\" ? -delta : delta;\n applySize(drag.size + grow);\n },\n [vertical, placement, applySize]\n );\n\n const endDrag = useCallback((event: React.PointerEvent<HTMLDivElement>) => {\n dragRef.current = null;\n if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n event.currentTarget.releasePointerCapture?.(event.pointerId);\n }\n }, []);\n\n const onHandleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n const base = dragSize ?? currentSizePx();\n const max = maxSize ?? (vertical ? window.innerHeight : window.innerWidth);\n // Key that should make the sheet *bigger*, per anchored edge.\n const incKey =\n placement === \"bottom\"\n ? \"ArrowUp\"\n : placement === \"top\"\n ? \"ArrowDown\"\n : placement === \"left\"\n ? \"ArrowRight\"\n : \"ArrowLeft\";\n const decKey =\n placement === \"bottom\"\n ? \"ArrowDown\"\n : placement === \"top\"\n ? \"ArrowUp\"\n : placement === \"left\"\n ? \"ArrowLeft\"\n : \"ArrowRight\";\n if (event.key === incKey) {\n event.preventDefault();\n applySize(base + resizeStep);\n } else if (event.key === decKey) {\n event.preventDefault();\n applySize(base - resizeStep);\n } else if (event.key === \"Home\") {\n event.preventDefault();\n applySize(minSize);\n } else if (event.key === \"End\") {\n event.preventDefault();\n applySize(max);\n }\n },\n [dragSize, currentSizePx, vertical, placement, applySize, resizeStep, minSize, maxSize]\n );\n\n React.useEffect(() => {\n if (!isOpen) {\n setDragSize(null);\n return;\n }\n\n const root = rootRef.current;\n // The element that had focus when the sheet opened gets it back when it closes (or unmounts\n // while open), unless the app has put focus somewhere else by then.\n const opener = root?.contains(document.activeElement) ? null : document.activeElement;\n root?.focus();\n return () => restoreFocus(opener, root);\n }, [isOpen]);\n\n // While a drag size is applied, suppress the sheet's 0.2s size\n // transition so the panel tracks the pointer in real time instead\n // of lagging 200ms behind every move.\n const sizeStyle: CSSProperties =\n resizable && dragSize !== null\n ? { ...(vertical ? { height: dragSize } : { width: dragSize }), transition: \"none\" }\n : {};\n\n return (\n <CSSTransition in={isOpen} timeout={120} appear classNames={{ enterDone: \"smwb-sheet_entered\" }} nodeRef={nodeRef}>\n <div\n ref={forkRef}\n data-testid={dataTestId}\n {...rest}\n // A sheet is a dialog, focused as a whole when it opens: its role and\n // tabIndex win over the caller's, and so does aria-modal on a modal\n // sheet. On another, the caller's aria-modal stays.\n tabIndex={-1}\n role=\"dialog\"\n aria-modal={variant === \"modal\" || rest[\"aria-modal\"]}\n className={cn(\"smwb-sheet\", className, `smwb-sheet_${variant}`, `smwb-${placement}`, {\n \"smwb-expanded\": mode === \"expanded\",\n \"smwb-small\": mode === \"small\",\n \"smwb-sheet_resizable\": resizable,\n })}\n style={{ \"--sizeProp\": size, ...sizeStyle, ...style } as CSSProperties}\n >\n {resizable && (\n <div\n className=\"smwb-sheet__drag-handle\"\n data-testid=\"sheet-drag-handle\"\n role=\"separator\"\n tabIndex={0}\n aria-orientation={vertical ? \"horizontal\" : \"vertical\"}\n aria-label={resizeHandleAriaLabel}\n aria-valuemin={minSize}\n aria-valuemax={Math.round(maxSize ?? (vertical ? window.innerHeight : window.innerWidth))}\n aria-valuenow={Math.round(dragSize ?? currentSizePx())}\n onPointerDown={onPointerDown}\n onPointerMove={onPointerMove}\n onPointerUp={endDrag}\n onPointerCancel={endDrag}\n onKeyDown={onHandleKeyDown}\n >\n <span className=\"smwb-sheet__drag-handle-bar\" />\n </div>\n )}\n {showActions && <div className=\"smwb-sheet__header\">{headerActionNodes}</div>}\n {isOpen && mode !== \"small\" && <div className=\"smwb-sheet__inner\">{children}</div>}\n </div>\n </CSSTransition>\n );\n});\n"],"names":["Sheet","forwardRef","isOpen","onClose","variant","children","placement","disableOutsideClick","closeOnEsc","props","ref","mode","setMode","useState","nodeRef","useRef","useEffect","onKeyDown","event","isTopOverlayLayer","handleSizeButton","handleClose","createPortal","jsx","CSSTransition","cn","SheetBlock","ClickAwayListener","isVerticalAxis","React","className","size","withSizeToggle","hideHeaderActions","reverseHeaderActions","closeAriaLabel","expandAriaLabel","collapseAriaLabel","restoreAriaLabel","resizable","minSize","maxSize","resizeStep","resizeHandleAriaLabel","onResize","style","dataTestId","rest","showActions","headerActionNodes","Button","Icon","rootRef","forkRef","useForkRef","dragSize","setDragSize","vertical","clamp","useCallback","px","viewport","max","currentSizePx","rect","_a","applySize","next","dragRef","onPointerDown","_b","onPointerMove","drag","delta","grow","endDrag","_d","_c","onHandleKeyDown","base","incKey","decKey","root","opener","restoreFocus","sizeStyle","jsxs"],"mappings":"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"}
|