@namroodinc/liquid-editorial 0.1.6 → 0.1.7
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/AGENTS.md +2 -0
- package/README.md +42 -0
- package/UPGRADING.md +68 -11
- package/dist/components/AppShell/index.cjs +2 -0
- package/dist/components/AppShell/index.cjs.map +1 -0
- package/dist/components/AppShell/index.d.cts +15 -0
- package/dist/components/AppShell/index.d.cts.map +1 -0
- package/dist/components/AppShell/index.d.ts +15 -0
- package/dist/components/AppShell/index.d.ts.map +1 -0
- package/dist/components/AppShell/index.js +93 -0
- package/dist/components/AppShell/index.js.map +1 -0
- package/dist/components/AppShell/style.css +79 -0
- package/dist/components/AssetGrid/index.cjs +1 -1
- package/dist/components/AssetGrid/index.cjs.map +1 -1
- package/dist/components/AssetGrid/index.d.cts.map +1 -1
- package/dist/components/AssetGrid/index.d.ts.map +1 -1
- package/dist/components/AssetGrid/index.js +57 -59
- package/dist/components/AssetGrid/index.js.map +1 -1
- package/dist/components/AssetGrid/style.css +8 -16
- package/dist/components/Board/index.cjs +1 -1
- package/dist/components/Board/index.cjs.map +1 -1
- package/dist/components/Board/index.d.cts.map +1 -1
- package/dist/components/Board/index.d.ts.map +1 -1
- package/dist/components/Board/index.js +88 -84
- package/dist/components/Board/index.js.map +1 -1
- package/dist/components/Board/style.css +17 -28
- package/dist/components/Button/index.cjs +1 -1
- package/dist/components/Button/index.cjs.map +1 -1
- package/dist/components/Button/index.d.cts +3 -2
- package/dist/components/Button/index.d.cts.map +1 -1
- package/dist/components/Button/index.d.ts +3 -2
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +1 -1
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Button/style.css +21 -15
- package/dist/components/DatePicker/index.cjs +1 -1
- package/dist/components/DatePicker/index.cjs.map +1 -1
- package/dist/components/DatePicker/index.d.cts.map +1 -1
- package/dist/components/DatePicker/index.d.ts.map +1 -1
- package/dist/components/DatePicker/index.js +46 -45
- package/dist/components/DatePicker/index.js.map +1 -1
- package/dist/components/DatePicker/style.css +4 -61
- package/dist/components/Drawer/index.cjs +1 -1
- package/dist/components/Drawer/index.cjs.map +1 -1
- package/dist/components/Drawer/index.d.cts +10 -1
- package/dist/components/Drawer/index.d.cts.map +1 -1
- package/dist/components/Drawer/index.d.ts +10 -1
- package/dist/components/Drawer/index.d.ts.map +1 -1
- package/dist/components/Drawer/index.js +69 -47
- package/dist/components/Drawer/index.js.map +1 -1
- package/dist/components/Drawer/style.css +106 -0
- package/dist/components/EntryPicker/index.cjs +1 -1
- package/dist/components/EntryPicker/index.cjs.map +1 -1
- package/dist/components/EntryPicker/index.d.cts.map +1 -1
- package/dist/components/EntryPicker/index.d.ts.map +1 -1
- package/dist/components/EntryPicker/index.js +12 -11
- package/dist/components/EntryPicker/index.js.map +1 -1
- package/dist/components/EntryPicker/style.css +3 -30
- package/dist/components/Field/style.css +11 -3
- package/dist/components/Menu/index.cjs +1 -1
- package/dist/components/Menu/index.cjs.map +1 -1
- package/dist/components/Menu/index.d.cts.map +1 -1
- package/dist/components/Menu/index.d.ts.map +1 -1
- package/dist/components/Menu/index.js +11 -16
- package/dist/components/Menu/index.js.map +1 -1
- package/dist/components/Menu/style.css +7 -41
- package/dist/components/Modal/index.cjs +1 -1
- package/dist/components/Modal/index.cjs.map +1 -1
- package/dist/components/Modal/index.d.cts.map +1 -1
- package/dist/components/Modal/index.d.ts.map +1 -1
- package/dist/components/Modal/index.js +12 -12
- package/dist/components/Modal/index.js.map +1 -1
- package/dist/components/NumberField/index.cjs +1 -1
- package/dist/components/NumberField/index.cjs.map +1 -1
- package/dist/components/NumberField/index.js +13 -17
- package/dist/components/NumberField/index.js.map +1 -1
- package/dist/components/NumberField/style.css +1 -41
- package/dist/components/Popover/index.cjs +1 -1
- package/dist/components/Popover/index.cjs.map +1 -1
- package/dist/components/Popover/index.js +4 -4
- package/dist/components/SearchField/index.cjs +1 -1
- package/dist/components/SearchField/index.cjs.map +1 -1
- package/dist/components/SearchField/index.d.cts.map +1 -1
- package/dist/components/SearchField/index.d.ts.map +1 -1
- package/dist/components/SearchField/index.js +26 -27
- package/dist/components/SearchField/index.js.map +1 -1
- package/dist/components/SearchField/style.css +0 -21
- package/dist/components/Select/index.cjs +1 -1
- package/dist/components/Select/index.cjs.map +1 -1
- package/dist/components/Select/index.d.cts.map +1 -1
- package/dist/components/Select/index.d.ts.map +1 -1
- package/dist/components/Select/index.js +82 -75
- package/dist/components/Select/index.js.map +1 -1
- package/dist/components/Select/style.css +5 -38
- package/dist/components/SideNav/index.cjs +1 -1
- package/dist/components/SideNav/index.cjs.map +1 -1
- package/dist/components/SideNav/index.d.cts.map +1 -1
- package/dist/components/SideNav/index.d.ts.map +1 -1
- package/dist/components/SideNav/index.js +52 -49
- package/dist/components/SideNav/index.js.map +1 -1
- package/dist/components/SideNav/style.css +2 -27
- package/dist/components/SortableList/index.cjs +1 -1
- package/dist/components/SortableList/index.cjs.map +1 -1
- package/dist/components/SortableList/index.d.cts.map +1 -1
- package/dist/components/SortableList/index.d.ts.map +1 -1
- package/dist/components/SortableList/index.js +42 -39
- package/dist/components/SortableList/index.js.map +1 -1
- package/dist/components/SortableList/style.css +9 -15
- package/dist/components/Stepper/index.cjs +1 -1
- package/dist/components/Stepper/index.cjs.map +1 -1
- package/dist/components/Stepper/index.d.cts.map +1 -1
- package/dist/components/Stepper/index.d.ts.map +1 -1
- package/dist/components/Stepper/index.js +48 -39
- package/dist/components/Stepper/index.js.map +1 -1
- package/dist/components/Stepper/style.css +24 -18
- package/dist/components/SubNav/index.cjs +1 -1
- package/dist/components/SubNav/index.cjs.map +1 -1
- package/dist/components/SubNav/index.d.cts.map +1 -1
- package/dist/components/SubNav/index.d.ts.map +1 -1
- package/dist/components/SubNav/index.js +27 -28
- package/dist/components/SubNav/index.js.map +1 -1
- package/dist/components/SubNav/style.css +13 -0
- package/dist/components/Switch/index.cjs +1 -1
- package/dist/components/Switch/index.cjs.map +1 -1
- package/dist/components/Switch/index.d.cts.map +1 -1
- package/dist/components/Switch/index.d.ts.map +1 -1
- package/dist/components/Switch/index.js +23 -21
- package/dist/components/Switch/index.js.map +1 -1
- package/dist/components/Switch/style.css +2 -28
- package/dist/components/TagsInput/index.cjs +1 -1
- package/dist/components/TagsInput/index.cjs.map +1 -1
- package/dist/components/TagsInput/index.js +8 -10
- package/dist/components/TagsInput/index.js.map +1 -1
- package/dist/components/TagsInput/style.css +2 -24
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +2 -0
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +39 -38
- package/dist/styles.css +1 -0
- package/package.json +1 -1
|
@@ -1,131 +1,138 @@
|
|
|
1
1
|
import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
|
|
2
|
+
import { Button as t } from "../Button/index.js";
|
|
2
3
|
/* empty css */
|
|
3
|
-
import { Popover as
|
|
4
|
-
import { forwardRef as
|
|
5
|
-
import { jsx as
|
|
4
|
+
import { Popover as n } from "../Popover/index.js";
|
|
5
|
+
import { forwardRef as r, useCallback as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
|
|
6
|
+
import { jsx as l, jsxs as u } from "react/jsx-runtime";
|
|
6
7
|
//#region src/components/Select/index.tsx
|
|
7
|
-
function
|
|
8
|
+
function d(...e) {
|
|
8
9
|
return e.filter(Boolean).join(" ");
|
|
9
10
|
}
|
|
10
|
-
var
|
|
11
|
-
let [
|
|
12
|
-
|
|
13
|
-
}, [
|
|
14
|
-
|
|
15
|
-
if (!
|
|
16
|
-
let e =
|
|
17
|
-
|
|
11
|
+
var f = r(function({ options: r, value: f, defaultValue: p, onValueChange: m, placeholder: h = "Select an option", size: g = "md", isDisabled: _ = !1, isInvalid: v = !1, menuPlacement: y = "bottom", className: b, disabled: x, onClick: S, onKeyDown: C, ...w }, T) {
|
|
12
|
+
let [E, D] = c(p ?? ""), O = f ?? E, [k, A] = c(!1), [j, M] = c(0), N = s(null), P = s(null), F = s(null), I = o(), L = _ || x, R = k && !L, z = r.find((e) => e.value === O), B = r.filter((e) => !e.isDisabled), V = i((e) => {
|
|
13
|
+
f === void 0 && D(e), m?.(e), A(!1);
|
|
14
|
+
}, [m, f]);
|
|
15
|
+
a(() => {
|
|
16
|
+
if (!R) return;
|
|
17
|
+
let e = r.findIndex((e) => e.value === O && !e.isDisabled);
|
|
18
|
+
M(e < 0 ? r.indexOf(B[0]) : e);
|
|
18
19
|
let t = (e) => {
|
|
19
20
|
let t = e.target;
|
|
20
|
-
!
|
|
21
|
+
!N.current?.contains(t) && !F.current?.contains(t) && A(!1);
|
|
21
22
|
};
|
|
22
23
|
return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
|
|
23
|
-
}, [
|
|
24
|
-
|
|
25
|
-
}, [
|
|
26
|
-
let
|
|
27
|
-
let t =
|
|
24
|
+
}, [R]), a(() => {
|
|
25
|
+
R && (F.current?.querySelectorAll("[role='option']")[j])?.scrollIntoView({ block: "nearest" });
|
|
26
|
+
}, [j, R]);
|
|
27
|
+
let H = (e) => {
|
|
28
|
+
let t = r.map((e, t) => ({
|
|
28
29
|
option: e,
|
|
29
30
|
index: t
|
|
30
31
|
})).filter((e) => !e.option.isDisabled);
|
|
31
32
|
if (t.length === 0) return;
|
|
32
|
-
let
|
|
33
|
-
|
|
34
|
-
},
|
|
35
|
-
if (!
|
|
36
|
-
if (e.key === "Escape")
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
33
|
+
let n = t[(t.findIndex((e) => e.index === j) + e + t.length) % t.length];
|
|
34
|
+
M(n.index);
|
|
35
|
+
}, U = (e) => {
|
|
36
|
+
if (!L) {
|
|
37
|
+
if (e.key === "Escape") {
|
|
38
|
+
if (!R) return;
|
|
39
|
+
e.preventDefault(), A(!1), P.current?.focus();
|
|
40
|
+
} else if (!R && (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ")) e.preventDefault(), A(!0);
|
|
41
|
+
else if (R) {
|
|
42
|
+
if (e.key === "Tab") A(!1);
|
|
43
|
+
else if (e.key === "ArrowDown" || e.key === "ArrowUp") e.preventDefault(), H(e.key === "ArrowDown" ? 1 : -1);
|
|
41
44
|
else if (e.key === "Home" || e.key === "End") {
|
|
42
45
|
e.preventDefault();
|
|
43
|
-
let t = e.key === "Home" ?
|
|
44
|
-
t &&
|
|
46
|
+
let t = e.key === "Home" ? B[0] : B[B.length - 1];
|
|
47
|
+
t && M(r.indexOf(t));
|
|
45
48
|
} else if (e.key === "Enter" || e.key === " ") {
|
|
46
49
|
e.preventDefault();
|
|
47
|
-
let t =
|
|
48
|
-
t && !t.isDisabled &&
|
|
50
|
+
let t = r[j];
|
|
51
|
+
t && !t.isDisabled && V(t.value);
|
|
49
52
|
}
|
|
50
53
|
}
|
|
51
54
|
}
|
|
52
55
|
};
|
|
53
|
-
return /* @__PURE__ */
|
|
56
|
+
return /* @__PURE__ */ u("div", {
|
|
54
57
|
className: "ds-select-root",
|
|
55
|
-
ref:
|
|
56
|
-
children: [/* @__PURE__ */
|
|
58
|
+
ref: N,
|
|
59
|
+
children: [/* @__PURE__ */ u(t, {
|
|
57
60
|
ref: (e) => {
|
|
58
|
-
|
|
61
|
+
P.current = e, typeof T == "function" ? T(e) : T && (T.current = e);
|
|
59
62
|
},
|
|
60
|
-
|
|
63
|
+
size: g,
|
|
61
64
|
role: "combobox",
|
|
62
65
|
"aria-haspopup": "listbox",
|
|
63
|
-
"aria-expanded":
|
|
64
|
-
"aria-controls":
|
|
65
|
-
"aria-activedescendant":
|
|
66
|
-
"aria-invalid":
|
|
67
|
-
|
|
68
|
-
"data-
|
|
69
|
-
"
|
|
70
|
-
className: u("ds-field-skin", "ds-select", y),
|
|
66
|
+
"aria-expanded": R,
|
|
67
|
+
"aria-controls": R ? I : void 0,
|
|
68
|
+
"aria-activedescendant": R && r[j] && !r[j].isDisabled ? `${I}-option-${j}` : void 0,
|
|
69
|
+
"aria-invalid": v || void 0,
|
|
70
|
+
isDisabled: L,
|
|
71
|
+
"data-placeholder": z ? void 0 : "",
|
|
72
|
+
className: d("ds-field-skin", "ds-select", b),
|
|
71
73
|
onClick: (e) => {
|
|
72
|
-
|
|
74
|
+
S?.(e), e.defaultPrevented || A((e) => !e);
|
|
73
75
|
},
|
|
74
76
|
onKeyDown: (e) => {
|
|
75
|
-
|
|
77
|
+
C?.(e), e.defaultPrevented || U(e);
|
|
76
78
|
},
|
|
77
|
-
...
|
|
78
|
-
children: [/* @__PURE__ */
|
|
79
|
+
...w,
|
|
80
|
+
children: [/* @__PURE__ */ l("span", {
|
|
79
81
|
className: "ds-select__value",
|
|
80
|
-
children:
|
|
81
|
-
}), /* @__PURE__ */
|
|
82
|
+
children: z ? z.label : h
|
|
83
|
+
}), /* @__PURE__ */ l(e, {
|
|
82
84
|
name: "chevron-down",
|
|
83
85
|
size: 16,
|
|
84
86
|
className: "ds-select__chevron"
|
|
85
87
|
})]
|
|
86
|
-
}), /* @__PURE__ */
|
|
87
|
-
anchorRef:
|
|
88
|
-
isOpen:
|
|
89
|
-
placement:
|
|
88
|
+
}), /* @__PURE__ */ l(n, {
|
|
89
|
+
anchorRef: P,
|
|
90
|
+
isOpen: R,
|
|
91
|
+
placement: y,
|
|
90
92
|
matchAnchorWidth: !0,
|
|
91
|
-
panelRef:
|
|
92
|
-
id:
|
|
93
|
+
panelRef: F,
|
|
94
|
+
id: I,
|
|
93
95
|
role: "listbox",
|
|
94
|
-
"aria-label":
|
|
95
|
-
"aria-labelledby":
|
|
96
|
+
"aria-label": w["aria-labelledby"] ? void 0 : w["aria-label"] ?? h,
|
|
97
|
+
"aria-labelledby": w["aria-labelledby"],
|
|
96
98
|
className: "ds-surface-raised ds-select__menu",
|
|
97
|
-
children: /* @__PURE__ */
|
|
98
|
-
onKeyDown:
|
|
99
|
-
|
|
100
|
-
|
|
99
|
+
children: /* @__PURE__ */ l("div", {
|
|
100
|
+
onKeyDown: U,
|
|
101
|
+
onPointerDown: (e) => e.preventDefault(),
|
|
102
|
+
children: r.map((n, r) => /* @__PURE__ */ u(t, {
|
|
103
|
+
variant: r === j ? "active" : "simple",
|
|
104
|
+
size: "sm",
|
|
105
|
+
isDisabled: n.isDisabled,
|
|
106
|
+
tabIndex: -1,
|
|
107
|
+
id: `${I}-option-${r}`,
|
|
101
108
|
role: "option",
|
|
102
|
-
"aria-selected":
|
|
103
|
-
"aria-disabled":
|
|
104
|
-
"data-active":
|
|
109
|
+
"aria-selected": n.value === O,
|
|
110
|
+
"aria-disabled": n.isDisabled || void 0,
|
|
111
|
+
"data-active": r === j || void 0,
|
|
105
112
|
className: "ds-select__option",
|
|
106
|
-
onMouseEnter: () => !
|
|
113
|
+
onMouseEnter: () => !n.isDisabled && M(r),
|
|
107
114
|
onClick: () => {
|
|
108
|
-
|
|
115
|
+
n.isDisabled || (V(n.value), P.current?.focus());
|
|
109
116
|
},
|
|
110
|
-
children: [/* @__PURE__ */
|
|
117
|
+
children: [/* @__PURE__ */ u("span", {
|
|
111
118
|
className: "ds-select__option-body",
|
|
112
|
-
children: [/* @__PURE__ */
|
|
119
|
+
children: [/* @__PURE__ */ l("span", {
|
|
113
120
|
className: "ds-select__option-label",
|
|
114
|
-
children:
|
|
115
|
-
}),
|
|
121
|
+
children: n.label
|
|
122
|
+
}), n.description && /* @__PURE__ */ l("span", {
|
|
116
123
|
className: "ds-select__option-description",
|
|
117
|
-
children:
|
|
124
|
+
children: n.description
|
|
118
125
|
})]
|
|
119
|
-
}),
|
|
126
|
+
}), n.value === O && /* @__PURE__ */ l(e, {
|
|
120
127
|
name: "check",
|
|
121
128
|
size: 16
|
|
122
129
|
})]
|
|
123
|
-
},
|
|
130
|
+
}, n.value))
|
|
124
131
|
})
|
|
125
132
|
})]
|
|
126
133
|
});
|
|
127
134
|
});
|
|
128
135
|
//#endregion
|
|
129
|
-
export {
|
|
136
|
+
export { f as Select };
|
|
130
137
|
|
|
131
138
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["Icon","cx","parts","Select","forwardRef","rest","internal","setInternal","useState","defaultValue","current","value","isOpen","setOpen","activeIndex","setActiveIndex","rootRef","useRef","triggerRef","listRef","listId","useId","effectiveDisabled","isDisabled","disabled","isVisible","selected","options","option","enabled","commit","useCallback","next","onValueChange","useEffect","index","onPointerDown","target","event","step","order","o","delta","handleKeyDown","pick","node","ref","isInvalid","size","className","onClick","open","onKeyDown","placeholder","Popover","menuPlacement"],"sources":["../../../src/components/Select/index.tsx"],"sourcesContent":["import {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n type ButtonHTMLAttributes,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Popover, type PopoverPlacement } from \"../Popover\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n return parts.filter(Boolean).join(\" \");\n}\n\nexport interface SelectOption {\n value: string;\n label: string;\n /** Secondary line under the label. */\n description?: string;\n isDisabled?: boolean;\n}\n\nexport interface SelectProps\n extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"value\" | \"defaultValue\" | \"onChange\"> {\n options: SelectOption[];\n /** Controlled value. Leave undefined to let the select hold its own. */\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n placeholder?: string;\n size?: FieldSize;\n isDisabled?: boolean;\n isInvalid?: boolean;\n /** Preferred side of the menu; flips when space requires it. */\n menuPlacement?: PopoverPlacement;\n}\n\n/**\n * One value out of a known list. Wears the field skin, opens a listbox: arrows\n * walk the options, Enter commits, Escape closes without changing anything.\n */\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n {\n options,\n value,\n defaultValue,\n onValueChange,\n placeholder = \"Select an option\",\n size = \"md\",\n isDisabled = false,\n isInvalid = false,\n menuPlacement = \"bottom\",\n className,\n disabled,\n onClick,\n onKeyDown,\n ...rest\n },\n ref,\n) {\n const [internal, setInternal] = useState(defaultValue ?? \"\");\n const current = value ?? internal;\n const [isOpen, setOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(0);\n const rootRef = useRef<HTMLDivElement | null>(null);\n const triggerRef = useRef<HTMLButtonElement | null>(null);\n const listRef = useRef<HTMLDivElement | null>(null);\n const listId = useId();\n const effectiveDisabled = isDisabled || disabled;\n const isVisible = isOpen && !effectiveDisabled;\n\n const selected = options.find((option) => option.value === current);\n const enabled = options.filter((option) => !option.isDisabled);\n\n const commit = useCallback(\n (next: string) => {\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n setOpen(false);\n },\n [onValueChange, value],\n );\n\n useEffect(() => {\n if (!isVisible) return;\n const index = options.findIndex((option) => option.value === current && !option.isDisabled);\n setActiveIndex(index < 0 ? options.indexOf(enabled[0]!) : index);\n const onPointerDown = (event: MouseEvent) => {\n const target = event.target as Node;\n if (!rootRef.current?.contains(target) && !listRef.current?.contains(target)) setOpen(false);\n };\n document.addEventListener(\"mousedown\", onPointerDown);\n return () => document.removeEventListener(\"mousedown\", onPointerDown);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isVisible]);\n\n useEffect(() => {\n if (!isVisible) return;\n const activeOption = listRef.current?.querySelectorAll<HTMLElement>(\"[role='option']\")[activeIndex];\n activeOption?.scrollIntoView({ block: \"nearest\" });\n }, [activeIndex, isVisible]);\n\n const step = (delta: number) => {\n const order = options.map((option, index) => ({ option, index })).filter((o) => !o.option.isDisabled);\n if (order.length === 0) return;\n const at = order.findIndex((o) => o.index === activeIndex);\n const next = order[(at + delta + order.length) % order.length]!;\n setActiveIndex(next.index);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (effectiveDisabled) return;\n if (event.key === \"Escape\") {\n setOpen(false);\n triggerRef.current?.focus();\n return;\n }\n if (!isVisible && (event.key === \"ArrowDown\" || event.key === \"ArrowUp\" || event.key === \"Enter\" || event.key === \" \")) {\n event.preventDefault();\n setOpen(true);\n return;\n }\n if (!isVisible) return;\n if (event.key === \"Tab\") {\n setOpen(false);\n return;\n }\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n step(event.key === \"ArrowDown\" ? 1 : -1);\n } else if (event.key === \"Home\" || event.key === \"End\") {\n event.preventDefault();\n const pick = event.key === \"Home\" ? enabled[0] : enabled[enabled.length - 1];\n if (pick) setActiveIndex(options.indexOf(pick));\n } else if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n const option = options[activeIndex];\n if (option && !option.isDisabled) commit(option.value);\n }\n };\n\n return (\n <div className=\"ds-select-root\" ref={rootRef}>\n <button\n ref={(node) => {\n triggerRef.current = node;\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }}\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={isVisible}\n aria-controls={isVisible ? listId : undefined}\n aria-activedescendant={isVisible && options[activeIndex] && !options[activeIndex].isDisabled ? `${listId}-option-${activeIndex}` : undefined}\n aria-invalid={isInvalid || undefined}\n disabled={effectiveDisabled}\n data-size={size}\n data-placeholder={selected ? undefined : \"\"}\n className={cx(\"ds-field-skin\", \"ds-select\", className)}\n onClick={(event) => {\n onClick?.(event);\n if (!event.defaultPrevented) setOpen((open) => !open);\n }}\n onKeyDown={(event) => {\n onKeyDown?.(event);\n if (!event.defaultPrevented) handleKeyDown(event);\n }}\n {...rest}\n >\n <span className=\"ds-select__value\">{selected ? selected.label : placeholder}</span>\n <Icon name=\"chevron-down\" size={16} className=\"ds-select__chevron\" />\n </button>\n <Popover\n anchorRef={triggerRef}\n isOpen={isVisible}\n placement={menuPlacement}\n matchAnchorWidth\n panelRef={listRef}\n id={listId}\n role=\"listbox\"\n aria-label={rest[\"aria-labelledby\"] ? undefined : rest[\"aria-label\"] ?? placeholder}\n aria-labelledby={rest[\"aria-labelledby\"]}\n className=\"ds-surface-raised ds-select__menu\"\n >\n <div onKeyDown={handleKeyDown}>\n {options.map((option, index) => (\n <div\n key={option.value}\n id={`${listId}-option-${index}`}\n role=\"option\"\n aria-selected={option.value === current}\n aria-disabled={option.isDisabled || undefined}\n data-active={index === activeIndex || undefined}\n className=\"ds-select__option\"\n onMouseEnter={() => !option.isDisabled && setActiveIndex(index)}\n onClick={() => {\n if (!option.isDisabled) {\n commit(option.value);\n triggerRef.current?.focus();\n }\n }}\n >\n <span className=\"ds-select__option-body\">\n <span className=\"ds-select__option-label\">{option.label}</span>\n {option.description && (\n <span className=\"ds-select__option-description\">{option.description}</span>\n )}\n </span>\n {option.value === current && <Icon name=\"check\" size={16} />}\n </div>\n ))}\n </div>\n </Popover>\n </div>\n );\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["Icon","cx","parts","Select","forwardRef","rest","internal","setInternal","useState","defaultValue","current","value","isOpen","setOpen","activeIndex","setActiveIndex","rootRef","useRef","triggerRef","listRef","listId","useId","effectiveDisabled","isDisabled","disabled","isVisible","selected","options","option","enabled","commit","useCallback","next","onValueChange","useEffect","index","onPointerDown","target","event","step","order","o","delta","handleKeyDown","pick","Button","node","ref","isInvalid","className","onClick","open","onKeyDown","placeholder","Popover","menuPlacement"],"sources":["../../../src/components/Select/index.tsx"],"sourcesContent":["import {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n type ButtonHTMLAttributes,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../Button\";\nimport { Popover, type PopoverPlacement } from \"../Popover\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n return parts.filter(Boolean).join(\" \");\n}\n\nexport interface SelectOption {\n value: string;\n label: string;\n /** Secondary line under the label. */\n description?: string;\n isDisabled?: boolean;\n}\n\nexport interface SelectProps\n extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"value\" | \"defaultValue\" | \"onChange\"> {\n options: SelectOption[];\n /** Controlled value. Leave undefined to let the select hold its own. */\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n placeholder?: string;\n size?: FieldSize;\n isDisabled?: boolean;\n isInvalid?: boolean;\n /** Preferred side of the menu; flips when space requires it. */\n menuPlacement?: PopoverPlacement;\n}\n\n/**\n * One value out of a known list. Wears the field skin, opens a listbox: arrows\n * walk the options, Enter commits, Escape closes without changing anything.\n */\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n {\n options,\n value,\n defaultValue,\n onValueChange,\n placeholder = \"Select an option\",\n size = \"md\",\n isDisabled = false,\n isInvalid = false,\n menuPlacement = \"bottom\",\n className,\n disabled,\n onClick,\n onKeyDown,\n ...rest\n },\n ref,\n) {\n const [internal, setInternal] = useState(defaultValue ?? \"\");\n const current = value ?? internal;\n const [isOpen, setOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(0);\n const rootRef = useRef<HTMLDivElement | null>(null);\n const triggerRef = useRef<HTMLButtonElement | null>(null);\n const listRef = useRef<HTMLDivElement | null>(null);\n const listId = useId();\n const effectiveDisabled = isDisabled || disabled;\n const isVisible = isOpen && !effectiveDisabled;\n\n const selected = options.find((option) => option.value === current);\n const enabled = options.filter((option) => !option.isDisabled);\n\n const commit = useCallback(\n (next: string) => {\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n setOpen(false);\n },\n [onValueChange, value],\n );\n\n useEffect(() => {\n if (!isVisible) return;\n const index = options.findIndex((option) => option.value === current && !option.isDisabled);\n setActiveIndex(index < 0 ? options.indexOf(enabled[0]!) : index);\n const onPointerDown = (event: MouseEvent) => {\n const target = event.target as Node;\n if (!rootRef.current?.contains(target) && !listRef.current?.contains(target)) setOpen(false);\n };\n document.addEventListener(\"mousedown\", onPointerDown);\n return () => document.removeEventListener(\"mousedown\", onPointerDown);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isVisible]);\n\n useEffect(() => {\n if (!isVisible) return;\n const activeOption = listRef.current?.querySelectorAll<HTMLElement>(\"[role='option']\")[activeIndex];\n activeOption?.scrollIntoView({ block: \"nearest\" });\n }, [activeIndex, isVisible]);\n\n const step = (delta: number) => {\n const order = options.map((option, index) => ({ option, index })).filter((o) => !o.option.isDisabled);\n if (order.length === 0) return;\n const at = order.findIndex((o) => o.index === activeIndex);\n const next = order[(at + delta + order.length) % order.length]!;\n setActiveIndex(next.index);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (effectiveDisabled) return;\n if (event.key === \"Escape\") {\n if (!isVisible) return;\n // Claims Escape so an enclosing Drawer stays open.\n event.preventDefault();\n setOpen(false);\n triggerRef.current?.focus();\n return;\n }\n if (!isVisible && (event.key === \"ArrowDown\" || event.key === \"ArrowUp\" || event.key === \"Enter\" || event.key === \" \")) {\n event.preventDefault();\n setOpen(true);\n return;\n }\n if (!isVisible) return;\n if (event.key === \"Tab\") {\n setOpen(false);\n return;\n }\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n step(event.key === \"ArrowDown\" ? 1 : -1);\n } else if (event.key === \"Home\" || event.key === \"End\") {\n event.preventDefault();\n const pick = event.key === \"Home\" ? enabled[0] : enabled[enabled.length - 1];\n if (pick) setActiveIndex(options.indexOf(pick));\n } else if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n const option = options[activeIndex];\n if (option && !option.isDisabled) commit(option.value);\n }\n };\n\n return (\n <div className=\"ds-select-root\" ref={rootRef}>\n <Button\n ref={(node) => {\n triggerRef.current = node;\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }}\n size={size}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={isVisible}\n aria-controls={isVisible ? listId : undefined}\n aria-activedescendant={isVisible && options[activeIndex] && !options[activeIndex].isDisabled ? `${listId}-option-${activeIndex}` : undefined}\n aria-invalid={isInvalid || undefined}\n isDisabled={effectiveDisabled}\n data-placeholder={selected ? undefined : \"\"}\n className={cx(\"ds-field-skin\", \"ds-select\", className)}\n onClick={(event) => {\n onClick?.(event);\n if (!event.defaultPrevented) setOpen((open) => !open);\n }}\n onKeyDown={(event) => {\n onKeyDown?.(event);\n if (!event.defaultPrevented) handleKeyDown(event);\n }}\n {...rest}\n >\n <span className=\"ds-select__value\">{selected ? selected.label : placeholder}</span>\n <Icon name=\"chevron-down\" size={16} className=\"ds-select__chevron\" />\n </Button>\n <Popover\n anchorRef={triggerRef}\n isOpen={isVisible}\n placement={menuPlacement}\n matchAnchorWidth\n panelRef={listRef}\n id={listId}\n role=\"listbox\"\n aria-label={rest[\"aria-labelledby\"] ? undefined : rest[\"aria-label\"] ?? placeholder}\n aria-labelledby={rest[\"aria-labelledby\"]}\n className=\"ds-surface-raised ds-select__menu\"\n >\n <div onKeyDown={handleKeyDown} onPointerDown={(event) => event.preventDefault()}>\n {options.map((option, index) => (\n <Button\n key={option.value}\n variant={index === activeIndex ? \"active\" : \"simple\"}\n size=\"sm\"\n isDisabled={option.isDisabled}\n tabIndex={-1}\n id={`${listId}-option-${index}`}\n role=\"option\"\n aria-selected={option.value === current}\n aria-disabled={option.isDisabled || undefined}\n data-active={index === activeIndex || undefined}\n className=\"ds-select__option\"\n onMouseEnter={() => !option.isDisabled && setActiveIndex(index)}\n onClick={() => {\n if (!option.isDisabled) {\n commit(option.value);\n triggerRef.current?.focus();\n }\n }}\n >\n <span className=\"ds-select__option-body\">\n <span className=\"ds-select__option-label\">{option.label}</span>\n {option.description && (\n <span className=\"ds-select__option-description\">{option.description}</span>\n )}\n </span>\n {option.value === current && <Icon name=\"check\" size={16} />}\n </Button>\n ))}\n </div>\n </Popover>\n </div>\n );\n});\n"],"mappings":"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"}
|
|
@@ -9,26 +9,10 @@
|
|
|
9
9
|
align-items: center;
|
|
10
10
|
justify-content: space-between;
|
|
11
11
|
gap: var(--space-2);
|
|
12
|
-
padding: 0 10px;
|
|
13
12
|
text-align: start;
|
|
14
13
|
cursor: pointer;
|
|
15
14
|
}
|
|
16
15
|
|
|
17
|
-
.ds-select[data-size="sm"] {
|
|
18
|
-
block-size: var(--field-height-sm);
|
|
19
|
-
font-size: var(--field-font-size-sm);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.ds-select[data-size="md"] {
|
|
23
|
-
block-size: var(--field-height-md);
|
|
24
|
-
font-size: var(--field-font-size-md);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.ds-select[data-size="lg"] {
|
|
28
|
-
block-size: var(--field-height-lg);
|
|
29
|
-
font-size: var(--field-font-size-md);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
16
|
.ds-select[data-placeholder] .ds-select__value {
|
|
33
17
|
color: var(--color-text-muted);
|
|
34
18
|
}
|
|
@@ -49,28 +33,11 @@
|
|
|
49
33
|
padding: var(--space-1);
|
|
50
34
|
}
|
|
51
35
|
|
|
52
|
-
.ds-select__option {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
border-radius: var(--radius-sm);
|
|
58
|
-
color: var(--color-text);
|
|
59
|
-
font-size: var(--font-size-sm);
|
|
60
|
-
cursor: pointer;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.ds-select__option[data-active] {
|
|
64
|
-
background: var(--field-hover);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.ds-select__option[aria-selected="true"] {
|
|
68
|
-
font-weight: var(--font-weight-semibold);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.ds-select__option[aria-disabled="true"] {
|
|
72
|
-
opacity: 45%;
|
|
73
|
-
cursor: not-allowed;
|
|
36
|
+
.ds-select__option.ds-button {
|
|
37
|
+
inline-size: 100%;
|
|
38
|
+
height: auto;
|
|
39
|
+
min-block-size: var(--field-height-sm);
|
|
40
|
+
text-align: start;
|
|
74
41
|
}
|
|
75
42
|
|
|
76
43
|
.ds-select__option-body {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");let
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Button/index.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.createContext)({isCollapsed:!1});function a(){return(0,n.useContext)(i).isCollapsed}var o=(0,n.forwardRef)(function({isCollapsed:e,defaultCollapsed:t=!1,onCollapsedChange:a,label:o=`Main`,className:c,children:l,...u},d){let[f,p]=(0,n.useState)(t),m=e??f,h=(0,n.useCallback)(()=>{let t=!m;e===void 0&&p(t),a?.(t)},[e,m,a]),g=(0,n.useMemo)(()=>({isCollapsed:m}),[m]);return(0,r.jsx)(i.Provider,{value:g,children:(0,r.jsx)(s.Provider,{value:h,children:(0,r.jsx)(`nav`,{ref:d,"aria-label":o,"data-collapsed":m||void 0,className:[`ds-sidenav`,c].filter(Boolean).join(` `),...u,children:l})})})}),s=(0,n.createContext)(()=>{}),c=(0,n.forwardRef)(function({title:e,mark:a,isCollapsible:o=!0,className:c,children:l,...u},d){let{isCollapsed:f}=(0,n.useContext)(i),p=(0,n.useContext)(s);return(0,r.jsxs)(`div`,{ref:d,className:[`ds-sidenav__header`,c].filter(Boolean).join(` `),...u,children:[a&&(0,r.jsx)(`span`,{className:`ds-sidenav__mark`,children:a}),!f&&(e||l)&&(0,r.jsx)(`span`,{className:`ds-sidenav__title`,children:e??l}),o&&(0,r.jsx)(t.Button,{variant:`simple`,size:`sm`,isIconOnly:!0,iconStart:f?`chevrons-right`:`chevrons-left`,className:`ds-sidenav__toggle`,"aria-label":f?`Expand navigation`:`Collapse navigation`,"aria-expanded":!f,title:f?`Expand navigation`:`Collapse navigation`,onClick:p})]})}),l=(0,n.forwardRef)(function({label:e,className:t,children:a,...o},s){let{isCollapsed:c}=(0,n.useContext)(i);return(0,r.jsxs)(`div`,{ref:s,className:[`ds-sidenav__section`,t].filter(Boolean).join(` `),"aria-label":e,role:e?`group`:void 0,...o,children:[e&&!c&&(0,r.jsx)(`span`,{className:`ds-sidenav__section-label`,children:e}),(0,r.jsx)(`ul`,{className:`ds-sidenav__list`,children:a})]})}),u=(0,n.forwardRef)(function({icon:t,label:a,isActive:o,badge:s,className:c,...l},u){let{isCollapsed:d}=(0,n.useContext)(i);return(0,r.jsx)(`li`,{className:`ds-sidenav__row`,children:(0,r.jsxs)(`a`,{ref:u,className:[`ds-sidenav__item`,c].filter(Boolean).join(` `),"data-active":o||void 0,"aria-current":o?`page`:void 0,title:d?a:void 0,...l,children:[(0,r.jsx)(e.t,{name:t}),!d&&(0,r.jsx)(`span`,{className:`ds-sidenav__label`,children:a}),!d&&s&&(0,r.jsx)(`span`,{className:`ds-sidenav__badge`,children:s}),d&&(0,r.jsx)(`span`,{className:`ds-sidenav__sr`,children:a})]})})}),d=(0,n.forwardRef)(function({className:e,children:t,...n},i){return(0,r.jsx)(`div`,{ref:i,className:[`ds-sidenav__footer`,e].filter(Boolean).join(` `),...n,children:t})});exports.SideNav=o,exports.SideNavFooter=d,exports.SideNavHeader=c,exports.SideNavItem=u,exports.SideNavSection=l,exports.useSideNavCollapsed=a;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":["createContext","useContext","forwardRef","useState","useCallback","useMemo","Icon","require_Icon","react","react_jsx_runtime","SideNavContext","useSideNavCollapsed","SideNav","controlled","rest","uncontrolled","setUncontrolled","defaultCollapsed","isCollapsed","toggle","next","onCollapsedChange","value","SideNavToggleContext","label","className","SideNavHeader","mark","title","children","isCollapsible","SideNavSection","SideNavItem","isActive","icon","badge","SideNavFooter"],"sources":["../../../src/components/SideNav/index.tsx"],"sourcesContent":["import {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useMemo,\n useState,\n type AnchorHTMLAttributes,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\ninterface SideNavContextValue {\n isCollapsed: boolean;\n}\n\nconst SideNavContext = createContext<SideNavContextValue>({ isCollapsed: false });\n\n/** Read the rail's collapsed state from anything rendered inside it. */\nexport function useSideNavCollapsed(): boolean {\n return useContext(SideNavContext).isCollapsed;\n}\n\nexport interface SideNavProps extends HTMLAttributes<HTMLElement> {\n /** Controlled collapsed state. Omit to let the rail own it. */\n isCollapsed?: boolean;\n /** Initial state when uncontrolled. */\n defaultCollapsed?: boolean;\n /** Fired by the header's collapse toggle. */\n onCollapsedChange?: (isCollapsed: boolean) => void;\n /** Accessible name for the landmark. */\n label?: string;\n children?: ReactNode;\n}\n\n/**\n * The primary rail: one heavy edge against the page, hairline rules between\n * sections. Collapsed it keeps the icons and drops the words — the width is a\n * token, so every rail in the product collapses to the same measure.\n */\nexport const SideNav = forwardRef<HTMLElement, SideNavProps>(function SideNav(\n {\n isCollapsed: controlled,\n defaultCollapsed = false,\n onCollapsedChange,\n label = \"Main\",\n className,\n children,\n ...rest\n },\n ref,\n) {\n const [uncontrolled, setUncontrolled] = useState(defaultCollapsed);\n const isCollapsed = controlled ?? uncontrolled;\n\n const toggle = useCallback(() => {\n const next = !isCollapsed;\n if (controlled === undefined) setUncontrolled(next);\n onCollapsedChange?.(next);\n }, [controlled, isCollapsed, onCollapsedChange]);\n\n const value = useMemo(() => ({ isCollapsed }), [isCollapsed]);\n\n return (\n <SideNavContext.Provider value={value}>\n <SideNavToggleContext.Provider value={toggle}>\n <nav\n ref={ref}\n aria-label={label}\n data-collapsed={isCollapsed || undefined}\n className={[\"ds-sidenav\", className].filter(Boolean).join(\" \")}\n {...rest}\n >\n {children}\n </nav>\n </SideNavToggleContext.Provider>\n </SideNavContext.Provider>\n );\n});\n\nconst SideNavToggleContext = createContext<() => void>(() => {});\n\nexport interface SideNavHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n /** Shown when the rail is open; hidden when it collapses. */\n title?: ReactNode;\n /** A mark that survives the collapse — a logo, a monogram. */\n mark?: ReactNode;\n /** Set false when the rail is permanently open. */\n isCollapsible?: boolean;\n children?: ReactNode;\n}\n\n/** Brand block plus the collapse toggle, above the first hairline rule. */\nexport const SideNavHeader = forwardRef<HTMLDivElement, SideNavHeaderProps>(\n function SideNavHeader({ title, mark, isCollapsible = true, className, children, ...rest }, ref) {\n const { isCollapsed } = useContext(SideNavContext);\n const toggle = useContext(SideNavToggleContext);\n\n return (\n <div\n ref={ref}\n className={[\"ds-sidenav__header\", className].filter(Boolean).join(\" \")}\n {...rest}\n >\n {mark && <span className=\"ds-sidenav__mark\">{mark}</span>}\n {!isCollapsed && (title || children) && (\n <span className=\"ds-sidenav__title\">{title ?? children}</span>\n )}\n {isCollapsible && (\n <button\n type=\"button\"\n className=\"ds-sidenav__toggle\"\n aria-label={isCollapsed ? \"Expand navigation\" : \"Collapse navigation\"}\n aria-expanded={!isCollapsed}\n title={isCollapsed ? \"Expand navigation\" : \"Collapse navigation\"}\n onClick={toggle}\n >\n <Icon name={isCollapsed ? \"chevrons-right\" : \"chevrons-left\"} />\n </button>\n )}\n </div>\n );\n },\n);\n\nexport interface SideNavSectionProps extends HTMLAttributes<HTMLDivElement> {\n /** Section label. Hidden — but still announced — when collapsed. */\n label?: string;\n children?: ReactNode;\n}\n\n/** A group of items under one label, separated by a hairline rule. */\nexport const SideNavSection = forwardRef<HTMLDivElement, SideNavSectionProps>(\n function SideNavSection({ label, className, children, ...rest }, ref) {\n const { isCollapsed } = useContext(SideNavContext);\n\n return (\n <div\n ref={ref}\n className={[\"ds-sidenav__section\", className].filter(Boolean).join(\" \")}\n aria-label={label}\n role={label ? \"group\" : undefined}\n {...rest}\n >\n {label && !isCollapsed && <span className=\"ds-sidenav__section-label\">{label}</span>}\n <ul className=\"ds-sidenav__list\">{children}</ul>\n </div>\n );\n },\n);\n\nexport interface SideNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n icon: IconName;\n /** The words. Kept in the accessible name even when the rail is collapsed. */\n label: string;\n isActive?: boolean;\n /** A count or status pill at the end of the row. Hidden when collapsed. */\n badge?: ReactNode;\n}\n\n/**\n * One destination. The active row carries the solid rail on its leading edge —\n * the same rail as a selected table row, so selection reads the same anywhere.\n */\nexport const SideNavItem = forwardRef<HTMLAnchorElement, SideNavItemProps>(\n function SideNavItem({ icon, label, isActive, badge, className, ...rest }, ref) {\n const { isCollapsed } = useContext(SideNavContext);\n\n return (\n <li className=\"ds-sidenav__row\">\n <a\n ref={ref}\n className={[\"ds-sidenav__item\", className].filter(Boolean).join(\" \")}\n data-active={isActive || undefined}\n aria-current={isActive ? \"page\" : undefined}\n title={isCollapsed ? label : undefined}\n {...rest}\n >\n <Icon name={icon} />\n {!isCollapsed && <span className=\"ds-sidenav__label\">{label}</span>}\n {!isCollapsed && badge && <span className=\"ds-sidenav__badge\">{badge}</span>}\n {isCollapsed && <span className=\"ds-sidenav__sr\">{label}</span>}\n </a>\n </li>\n );\n },\n);\n\nexport interface SideNavFooterProps extends HTMLAttributes<HTMLDivElement> {\n children?: ReactNode;\n}\n\n/** The bottom band — account, theme, help. Above the page edge, under a rule. */\nexport const SideNavFooter = forwardRef<HTMLDivElement, SideNavFooterProps>(\n function SideNavFooter({ className, children, ...rest }, ref) {\n return (\n <div\n ref={ref}\n className={[\"ds-sidenav__footer\", className].filter(Boolean).join(\" \")}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","names":["createContext","useContext","forwardRef","useState","useCallback","useMemo","Button","Icon","require_Icon","require_components_Button_index","react","react_jsx_runtime","SideNavContext","useSideNavCollapsed","SideNav","controlled","rest","uncontrolled","setUncontrolled","defaultCollapsed","isCollapsed","toggle","next","onCollapsedChange","value","SideNavToggleContext","label","className","SideNavHeader","mark","title","children","isCollapsible","SideNavSection","SideNavItem","isActive","icon","badge","SideNavFooter"],"sources":["../../../src/components/SideNav/index.tsx"],"sourcesContent":["import {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useMemo,\n useState,\n type AnchorHTMLAttributes,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../Button\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\ninterface SideNavContextValue {\n isCollapsed: boolean;\n}\n\nconst SideNavContext = createContext<SideNavContextValue>({ isCollapsed: false });\n\n/** Read the rail's collapsed state from anything rendered inside it. */\nexport function useSideNavCollapsed(): boolean {\n return useContext(SideNavContext).isCollapsed;\n}\n\nexport interface SideNavProps extends HTMLAttributes<HTMLElement> {\n /** Controlled collapsed state. Omit to let the rail own it. */\n isCollapsed?: boolean;\n /** Initial state when uncontrolled. */\n defaultCollapsed?: boolean;\n /** Fired by the header's collapse toggle. */\n onCollapsedChange?: (isCollapsed: boolean) => void;\n /** Accessible name for the landmark. */\n label?: string;\n children?: ReactNode;\n}\n\n/**\n * The primary rail: one heavy edge against the page, hairline rules between\n * sections. Collapsed it keeps the icons and drops the words — the width is a\n * token, so every rail in the product collapses to the same measure.\n */\nexport const SideNav = forwardRef<HTMLElement, SideNavProps>(function SideNav(\n {\n isCollapsed: controlled,\n defaultCollapsed = false,\n onCollapsedChange,\n label = \"Main\",\n className,\n children,\n ...rest\n },\n ref,\n) {\n const [uncontrolled, setUncontrolled] = useState(defaultCollapsed);\n const isCollapsed = controlled ?? uncontrolled;\n\n const toggle = useCallback(() => {\n const next = !isCollapsed;\n if (controlled === undefined) setUncontrolled(next);\n onCollapsedChange?.(next);\n }, [controlled, isCollapsed, onCollapsedChange]);\n\n const value = useMemo(() => ({ isCollapsed }), [isCollapsed]);\n\n return (\n <SideNavContext.Provider value={value}>\n <SideNavToggleContext.Provider value={toggle}>\n <nav\n ref={ref}\n aria-label={label}\n data-collapsed={isCollapsed || undefined}\n className={[\"ds-sidenav\", className].filter(Boolean).join(\" \")}\n {...rest}\n >\n {children}\n </nav>\n </SideNavToggleContext.Provider>\n </SideNavContext.Provider>\n );\n});\n\nconst SideNavToggleContext = createContext<() => void>(() => {});\n\nexport interface SideNavHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n /** Shown when the rail is open; hidden when it collapses. */\n title?: ReactNode;\n /** A mark that survives the collapse — a logo, a monogram. */\n mark?: ReactNode;\n /** Set false when the rail is permanently open. */\n isCollapsible?: boolean;\n children?: ReactNode;\n}\n\n/** Brand block plus the collapse toggle, above the first hairline rule. */\nexport const SideNavHeader = forwardRef<HTMLDivElement, SideNavHeaderProps>(\n function SideNavHeader({ title, mark, isCollapsible = true, className, children, ...rest }, ref) {\n const { isCollapsed } = useContext(SideNavContext);\n const toggle = useContext(SideNavToggleContext);\n\n return (\n <div\n ref={ref}\n className={[\"ds-sidenav__header\", className].filter(Boolean).join(\" \")}\n {...rest}\n >\n {mark && <span className=\"ds-sidenav__mark\">{mark}</span>}\n {!isCollapsed && (title || children) && (\n <span className=\"ds-sidenav__title\">{title ?? children}</span>\n )}\n {isCollapsible && (\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart={isCollapsed ? \"chevrons-right\" : \"chevrons-left\"}\n className=\"ds-sidenav__toggle\"\n aria-label={isCollapsed ? \"Expand navigation\" : \"Collapse navigation\"}\n aria-expanded={!isCollapsed}\n title={isCollapsed ? \"Expand navigation\" : \"Collapse navigation\"}\n onClick={toggle}\n />\n )}\n </div>\n );\n },\n);\n\nexport interface SideNavSectionProps extends HTMLAttributes<HTMLDivElement> {\n /** Section label. Hidden — but still announced — when collapsed. */\n label?: string;\n children?: ReactNode;\n}\n\n/** A group of items under one label, separated by a hairline rule. */\nexport const SideNavSection = forwardRef<HTMLDivElement, SideNavSectionProps>(\n function SideNavSection({ label, className, children, ...rest }, ref) {\n const { isCollapsed } = useContext(SideNavContext);\n\n return (\n <div\n ref={ref}\n className={[\"ds-sidenav__section\", className].filter(Boolean).join(\" \")}\n aria-label={label}\n role={label ? \"group\" : undefined}\n {...rest}\n >\n {label && !isCollapsed && <span className=\"ds-sidenav__section-label\">{label}</span>}\n <ul className=\"ds-sidenav__list\">{children}</ul>\n </div>\n );\n },\n);\n\nexport interface SideNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n icon: IconName;\n /** The words. Kept in the accessible name even when the rail is collapsed. */\n label: string;\n isActive?: boolean;\n /** A count or status pill at the end of the row. Hidden when collapsed. */\n badge?: ReactNode;\n}\n\n/**\n * One destination. The active row carries the solid rail on its leading edge —\n * the same rail as a selected table row, so selection reads the same anywhere.\n */\nexport const SideNavItem = forwardRef<HTMLAnchorElement, SideNavItemProps>(\n function SideNavItem({ icon, label, isActive, badge, className, ...rest }, ref) {\n const { isCollapsed } = useContext(SideNavContext);\n\n return (\n <li className=\"ds-sidenav__row\">\n <a\n ref={ref}\n className={[\"ds-sidenav__item\", className].filter(Boolean).join(\" \")}\n data-active={isActive || undefined}\n aria-current={isActive ? \"page\" : undefined}\n title={isCollapsed ? label : undefined}\n {...rest}\n >\n <Icon name={icon} />\n {!isCollapsed && <span className=\"ds-sidenav__label\">{label}</span>}\n {!isCollapsed && badge && <span className=\"ds-sidenav__badge\">{badge}</span>}\n {isCollapsed && <span className=\"ds-sidenav__sr\">{label}</span>}\n </a>\n </li>\n );\n },\n);\n\nexport interface SideNavFooterProps extends HTMLAttributes<HTMLDivElement> {\n children?: ReactNode;\n}\n\n/** The bottom band — account, theme, help. Above the page edge, under a rule. */\nexport const SideNavFooter = forwardRef<HTMLDivElement, SideNavFooterProps>(\n function SideNavFooter({ className, children, ...rest }, ref) {\n return (\n <div\n ref={ref}\n className={[\"ds-sidenav__footer\", className].filter(Boolean).join(\" \")}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SideNav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SideNav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAQrB,wEAAwE;AACxE,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,sGAsClB,CAAC;AAIH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,2EAA2E;AAC3E,eAAO,MAAM,aAAa,+GA+BzB,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,sEAAsE;AACtE,eAAO,MAAM,cAAc,gHAiB1B,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,IAAI,EAAE,QAAQ,CAAC;IACf,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,gHAsBvB,CAAC;AAEF,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iFAAiF;AACjF,eAAO,MAAM,aAAa,+GAYzB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SideNav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SideNav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAQrB,wEAAwE;AACxE,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,sGAsClB,CAAC;AAIH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,2EAA2E;AAC3E,eAAO,MAAM,aAAa,+GA+BzB,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,sEAAsE;AACtE,eAAO,MAAM,cAAc,gHAiB1B,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,IAAI,EAAE,QAAQ,CAAC;IACf,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,gHAsBvB,CAAC;AAEF,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iFAAiF;AACjF,eAAO,MAAM,aAAa,+GAYzB,CAAC"}
|
|
@@ -1,106 +1,109 @@
|
|
|
1
1
|
import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { Button as t } from "../Button/index.js";
|
|
3
|
+
import { createContext as n, forwardRef as r, useCallback as i, useContext as a, useMemo as o, useState as s } from "react";
|
|
4
|
+
import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
4
5
|
//#region src/components/SideNav/index.tsx
|
|
5
|
-
var
|
|
6
|
-
function
|
|
7
|
-
return
|
|
6
|
+
var u = n({ isCollapsed: !1 });
|
|
7
|
+
function d() {
|
|
8
|
+
return a(u).isCollapsed;
|
|
8
9
|
}
|
|
9
|
-
var
|
|
10
|
-
let [m, h] =
|
|
10
|
+
var f = r(function({ isCollapsed: e, defaultCollapsed: t = !1, onCollapsedChange: n, label: r = "Main", className: a, children: l, ...d }, f) {
|
|
11
|
+
let [m, h] = s(t), g = e ?? m, _ = i(() => {
|
|
11
12
|
let t = !g;
|
|
12
13
|
e === void 0 && h(t), n?.(t);
|
|
13
14
|
}, [
|
|
14
15
|
e,
|
|
15
16
|
g,
|
|
16
17
|
n
|
|
17
|
-
]), v =
|
|
18
|
-
return /* @__PURE__ */
|
|
18
|
+
]), v = o(() => ({ isCollapsed: g }), [g]);
|
|
19
|
+
return /* @__PURE__ */ c(u.Provider, {
|
|
19
20
|
value: v,
|
|
20
|
-
children: /* @__PURE__ */
|
|
21
|
+
children: /* @__PURE__ */ c(p.Provider, {
|
|
21
22
|
value: _,
|
|
22
|
-
children: /* @__PURE__ */
|
|
23
|
-
ref:
|
|
24
|
-
"aria-label":
|
|
23
|
+
children: /* @__PURE__ */ c("nav", {
|
|
24
|
+
ref: f,
|
|
25
|
+
"aria-label": r,
|
|
25
26
|
"data-collapsed": g || void 0,
|
|
26
|
-
className: ["ds-sidenav",
|
|
27
|
+
className: ["ds-sidenav", a].filter(Boolean).join(" "),
|
|
27
28
|
...d,
|
|
28
|
-
children:
|
|
29
|
+
children: l
|
|
29
30
|
})
|
|
30
31
|
})
|
|
31
32
|
});
|
|
32
|
-
}),
|
|
33
|
-
let { isCollapsed:
|
|
34
|
-
return /* @__PURE__ */
|
|
33
|
+
}), p = n(() => {}), m = r(function({ title: e, mark: n, isCollapsible: r = !0, className: i, children: o, ...s }, d) {
|
|
34
|
+
let { isCollapsed: f } = a(u), m = a(p);
|
|
35
|
+
return /* @__PURE__ */ l("div", {
|
|
35
36
|
ref: d,
|
|
36
|
-
className: ["ds-sidenav__header",
|
|
37
|
-
...
|
|
37
|
+
className: ["ds-sidenav__header", i].filter(Boolean).join(" "),
|
|
38
|
+
...s,
|
|
38
39
|
children: [
|
|
39
|
-
n && /* @__PURE__ */
|
|
40
|
+
n && /* @__PURE__ */ c("span", {
|
|
40
41
|
className: "ds-sidenav__mark",
|
|
41
42
|
children: n
|
|
42
43
|
}),
|
|
43
|
-
!
|
|
44
|
+
!f && (e || o) && /* @__PURE__ */ c("span", {
|
|
44
45
|
className: "ds-sidenav__title",
|
|
45
|
-
children:
|
|
46
|
+
children: e ?? o
|
|
46
47
|
}),
|
|
47
|
-
r && /* @__PURE__ */
|
|
48
|
-
|
|
48
|
+
r && /* @__PURE__ */ c(t, {
|
|
49
|
+
variant: "simple",
|
|
50
|
+
size: "sm",
|
|
51
|
+
isIconOnly: !0,
|
|
52
|
+
iconStart: f ? "chevrons-right" : "chevrons-left",
|
|
49
53
|
className: "ds-sidenav__toggle",
|
|
50
|
-
"aria-label":
|
|
51
|
-
"aria-expanded": !
|
|
52
|
-
title:
|
|
53
|
-
onClick: m
|
|
54
|
-
children: /* @__PURE__ */ s(e, { name: p ? "chevrons-right" : "chevrons-left" })
|
|
54
|
+
"aria-label": f ? "Expand navigation" : "Collapse navigation",
|
|
55
|
+
"aria-expanded": !f,
|
|
56
|
+
title: f ? "Expand navigation" : "Collapse navigation",
|
|
57
|
+
onClick: m
|
|
55
58
|
})
|
|
56
59
|
]
|
|
57
60
|
});
|
|
58
|
-
}),
|
|
59
|
-
let { isCollapsed: o } =
|
|
60
|
-
return /* @__PURE__ */
|
|
61
|
-
ref:
|
|
61
|
+
}), h = r(function({ label: e, className: t, children: n, ...r }, i) {
|
|
62
|
+
let { isCollapsed: o } = a(u);
|
|
63
|
+
return /* @__PURE__ */ l("div", {
|
|
64
|
+
ref: i,
|
|
62
65
|
className: ["ds-sidenav__section", t].filter(Boolean).join(" "),
|
|
63
66
|
"aria-label": e,
|
|
64
67
|
role: e ? "group" : void 0,
|
|
65
68
|
...r,
|
|
66
|
-
children: [e && !o && /* @__PURE__ */
|
|
69
|
+
children: [e && !o && /* @__PURE__ */ c("span", {
|
|
67
70
|
className: "ds-sidenav__section-label",
|
|
68
71
|
children: e
|
|
69
|
-
}), /* @__PURE__ */
|
|
72
|
+
}), /* @__PURE__ */ c("ul", {
|
|
70
73
|
className: "ds-sidenav__list",
|
|
71
74
|
children: n
|
|
72
75
|
})]
|
|
73
76
|
});
|
|
74
|
-
}),
|
|
75
|
-
let { isCollapsed: f } =
|
|
76
|
-
return /* @__PURE__ */
|
|
77
|
+
}), g = r(function({ icon: t, label: n, isActive: r, badge: i, className: o, ...s }, d) {
|
|
78
|
+
let { isCollapsed: f } = a(u);
|
|
79
|
+
return /* @__PURE__ */ c("li", {
|
|
77
80
|
className: "ds-sidenav__row",
|
|
78
|
-
children: /* @__PURE__ */
|
|
81
|
+
children: /* @__PURE__ */ l("a", {
|
|
79
82
|
ref: d,
|
|
80
83
|
className: ["ds-sidenav__item", o].filter(Boolean).join(" "),
|
|
81
84
|
"data-active": r || void 0,
|
|
82
85
|
"aria-current": r ? "page" : void 0,
|
|
83
86
|
title: f ? n : void 0,
|
|
84
|
-
...
|
|
87
|
+
...s,
|
|
85
88
|
children: [
|
|
86
|
-
/* @__PURE__ */
|
|
87
|
-
!f && /* @__PURE__ */
|
|
89
|
+
/* @__PURE__ */ c(e, { name: t }),
|
|
90
|
+
!f && /* @__PURE__ */ c("span", {
|
|
88
91
|
className: "ds-sidenav__label",
|
|
89
92
|
children: n
|
|
90
93
|
}),
|
|
91
|
-
!f &&
|
|
94
|
+
!f && i && /* @__PURE__ */ c("span", {
|
|
92
95
|
className: "ds-sidenav__badge",
|
|
93
|
-
children:
|
|
96
|
+
children: i
|
|
94
97
|
}),
|
|
95
|
-
f && /* @__PURE__ */
|
|
98
|
+
f && /* @__PURE__ */ c("span", {
|
|
96
99
|
className: "ds-sidenav__sr",
|
|
97
100
|
children: n
|
|
98
101
|
})
|
|
99
102
|
]
|
|
100
103
|
})
|
|
101
104
|
});
|
|
102
|
-
}),
|
|
103
|
-
return /* @__PURE__ */
|
|
105
|
+
}), _ = r(function({ className: e, children: t, ...n }, r) {
|
|
106
|
+
return /* @__PURE__ */ c("div", {
|
|
104
107
|
ref: r,
|
|
105
108
|
className: ["ds-sidenav__footer", e].filter(Boolean).join(" "),
|
|
106
109
|
...n,
|
|
@@ -108,6 +111,6 @@ var d = n(function({ isCollapsed: e, defaultCollapsed: t = !1, onCollapsedChange
|
|
|
108
111
|
});
|
|
109
112
|
});
|
|
110
113
|
//#endregion
|
|
111
|
-
export {
|
|
114
|
+
export { f as SideNav, _ as SideNavFooter, m as SideNavHeader, g as SideNavItem, h as SideNavSection, d as useSideNavCollapsed };
|
|
112
115
|
|
|
113
116
|
//# sourceMappingURL=index.js.map
|