@bioturing/components 0.20.1 → 0.20.2
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/dist/components/code-block/component.js +12 -12
- package/dist/components/dropdown-menu/component.js +84 -83
- package/dist/components/dropdown-menu/component.js.map +1 -1
- package/dist/components/dropdown-menu/style.css +1 -1
- package/dist/components/form/item.js.map +1 -1
- package/dist/components/hooks/useCharts.js +23 -19
- package/dist/components/hooks/useCharts.js.map +1 -1
- package/dist/components/nav/group.js +24 -9
- package/dist/components/nav/group.js.map +1 -1
- package/dist/components/nav/item.js +2 -2
- package/dist/components/nav/item.js.map +1 -1
- package/dist/components/nav/style.css +1 -1
- package/dist/components/stack/StackChild.js +31 -34
- package/dist/components/stack/StackChild.js.map +1 -1
- package/dist/components/table/style.css +1 -1
- package/dist/index.d.ts +4 -0
- package/package.json +1 -1
|
@@ -7,12 +7,12 @@ import { Highlight as J, themes as K } from "prism-react-renderer";
|
|
|
7
7
|
import './style.css';/* empty css */
|
|
8
8
|
import { WithAntdTokens as Q } from "../utils/WithAntdTokens.js";
|
|
9
9
|
import { Segmented as R } from "../segmented/component.js";
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
10
|
+
import { reactNodeToString as U } from "../utils/reactToString.js";
|
|
11
|
+
import { useControlledState as V } from "../hooks/useControlledState.js";
|
|
12
|
+
import { useCls as X } from "../utils/antdUtils.js";
|
|
13
|
+
import { clsx as Y } from "../utils/cn.js";
|
|
14
|
+
import { IconButton as Z } from "../icon-button/component.js";
|
|
15
|
+
import { ScrollArea as H } from "../scroll-area/component.js";
|
|
16
16
|
const fo = ({
|
|
17
17
|
code: u,
|
|
18
18
|
children: s,
|
|
@@ -29,7 +29,7 @@ const fo = ({
|
|
|
29
29
|
maxHeight: c,
|
|
30
30
|
...O
|
|
31
31
|
}) => {
|
|
32
|
-
const [i, k] =
|
|
32
|
+
const [i, k] = V(
|
|
33
33
|
x,
|
|
34
34
|
T,
|
|
35
35
|
v
|
|
@@ -50,7 +50,7 @@ const fo = ({
|
|
|
50
50
|
k
|
|
51
51
|
]);
|
|
52
52
|
const [L, a] = p(g), [M, b] = p(!1), D = () => {
|
|
53
|
-
const t = l ||
|
|
53
|
+
const t = l || U(s);
|
|
54
54
|
try {
|
|
55
55
|
navigator.clipboard.writeText(t).then(() => {
|
|
56
56
|
a(w), b(!0);
|
|
@@ -60,11 +60,11 @@ const fo = ({
|
|
|
60
60
|
}
|
|
61
61
|
}, E = () => {
|
|
62
62
|
a(g), b(!1);
|
|
63
|
-
}, d =
|
|
63
|
+
}, d = X();
|
|
64
64
|
return /* @__PURE__ */ o(G, { theme: "dark", children: /* @__PURE__ */ _(
|
|
65
65
|
Q,
|
|
66
66
|
{
|
|
67
|
-
className:
|
|
67
|
+
className: Y(d("code-block"), S, e == null ? void 0 : e.root),
|
|
68
68
|
...O,
|
|
69
69
|
children: [
|
|
70
70
|
h && /* @__PURE__ */ o("div", { className: d("code-block-header", e == null ? void 0 : e.header), children: /* @__PURE__ */ o(
|
|
@@ -79,7 +79,7 @@ const fo = ({
|
|
|
79
79
|
}
|
|
80
80
|
) }),
|
|
81
81
|
/* @__PURE__ */ o("div", { className: d("code-block-copy"), children: /* @__PURE__ */ o(
|
|
82
|
-
|
|
82
|
+
Z,
|
|
83
83
|
{
|
|
84
84
|
onClick: D,
|
|
85
85
|
label: L,
|
|
@@ -94,7 +94,7 @@ const fo = ({
|
|
|
94
94
|
style: {
|
|
95
95
|
maxHeight: c && (typeof c == "number" ? `${c}px` : c)
|
|
96
96
|
},
|
|
97
|
-
children: /* @__PURE__ */ o(
|
|
97
|
+
children: /* @__PURE__ */ o(H, { children: l ? /* @__PURE__ */ o(
|
|
98
98
|
J,
|
|
99
99
|
{
|
|
100
100
|
language: A,
|
|
@@ -1,28 +1,29 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { useCallback as
|
|
2
|
+
import { jsx as e, jsxs as g } from "react/jsx-runtime";
|
|
3
|
+
import { useCallback as M, useRef as j, createElement as q } from "react";
|
|
4
4
|
import { Menu as f } from "@base-ui-components/react/menu";
|
|
5
5
|
import { useControlled as F } from "@base-ui-components/react/utils";
|
|
6
6
|
import { Popover as H } from "@base-ui-components/react/popover";
|
|
7
|
-
import { Command as
|
|
7
|
+
import { Command as u } from "../cmdk/index.js";
|
|
8
8
|
import { PopupPanelSize as S } from "../popup-panel/constants.js";
|
|
9
9
|
import './style.css';/* empty css */
|
|
10
10
|
import { useCls as J, useAntdCssVarClassname as K, parseAntdPlacement as Q } from "../utils/antdUtils.js";
|
|
11
11
|
import { Input as X } from "../input/component.js";
|
|
12
|
+
import { ScrollArea as R } from "../scroll-area/component.js";
|
|
12
13
|
import { DROPDOWN_COLLISION_AVOIDANCE as Y } from "../utils/constants.js";
|
|
13
|
-
import { clsx as
|
|
14
|
-
const
|
|
14
|
+
import { clsx as d } from "../utils/cn.js";
|
|
15
|
+
const lo = ({
|
|
15
16
|
children: V,
|
|
16
17
|
items: _,
|
|
17
18
|
placement: x,
|
|
18
19
|
openOnHover: z,
|
|
19
20
|
open: B,
|
|
20
|
-
onOpenChange:
|
|
21
|
+
onOpenChange: v,
|
|
21
22
|
className: O,
|
|
22
23
|
itemRender: I,
|
|
23
24
|
classNames: r,
|
|
24
|
-
size:
|
|
25
|
-
showSearch:
|
|
25
|
+
size: C = "auto",
|
|
26
|
+
showSearch: i,
|
|
26
27
|
searchProps: L = {
|
|
27
28
|
placeholder: "Search..."
|
|
28
29
|
}
|
|
@@ -31,23 +32,23 @@ const uo = ({
|
|
|
31
32
|
controlled: B,
|
|
32
33
|
default: !1,
|
|
33
34
|
name: "open"
|
|
34
|
-
}),
|
|
35
|
+
}), m = M(
|
|
35
36
|
(o) => {
|
|
36
|
-
P(o),
|
|
37
|
+
P(o), v == null || v(o);
|
|
37
38
|
},
|
|
38
|
-
[P,
|
|
39
|
-
), n = J(),
|
|
39
|
+
[P, v]
|
|
40
|
+
), n = J(), c = K(), k = Q(x), U = j(null), w = _.reduce((o, t) => (o.length === 0 && t.type !== "header" && o.push({
|
|
40
41
|
label: null,
|
|
41
42
|
items: []
|
|
42
|
-
}),
|
|
43
|
-
label:
|
|
43
|
+
}), t.type === "header" ? o.push({
|
|
44
|
+
label: t.title,
|
|
44
45
|
items: []
|
|
45
|
-
}) : (
|
|
46
|
-
(o,
|
|
47
|
-
const l =
|
|
46
|
+
}) : (t.type === "item" || t.type === "divider") && o.length > 0 && o[o.length - 1].items.push(t), o), []), G = i ? u.Separator : f.Separator, b = M(
|
|
47
|
+
(o, t, p) => {
|
|
48
|
+
const l = i ? u.Item : f.Item;
|
|
48
49
|
if (o.type === "item") {
|
|
49
|
-
const
|
|
50
|
-
className:
|
|
50
|
+
const D = {
|
|
51
|
+
className: d(n("dropdown-menu-item"), r == null ? void 0 : r.item),
|
|
51
52
|
disabled: o.disabled,
|
|
52
53
|
"data-danger": o.danger,
|
|
53
54
|
ref: o.ref,
|
|
@@ -56,19 +57,19 @@ const uo = ({
|
|
|
56
57
|
onMouseLeave: o.onMouseLeave,
|
|
57
58
|
onMouseOver: o.onMouseOver,
|
|
58
59
|
onMouseOut: o.onMouseOut,
|
|
59
|
-
onSelect:
|
|
60
|
-
const
|
|
60
|
+
onSelect: i ? () => {
|
|
61
|
+
const y = new MouseEvent("click", {
|
|
61
62
|
bubbles: !0,
|
|
62
63
|
cancelable: !0
|
|
63
64
|
});
|
|
64
|
-
o.onClick(
|
|
65
|
+
o.onClick(y), m == null || m(!1);
|
|
65
66
|
} : void 0,
|
|
66
|
-
render: I ? (
|
|
67
|
+
render: I ? (y) => I(o, y) : void 0,
|
|
67
68
|
children: [
|
|
68
|
-
o.icon && /* @__PURE__ */
|
|
69
|
+
o.icon && /* @__PURE__ */ e(
|
|
69
70
|
"span",
|
|
70
71
|
{
|
|
71
|
-
className:
|
|
72
|
+
className: d(
|
|
72
73
|
n("dropdown-menu-item-icon"),
|
|
73
74
|
r == null ? void 0 : r.itemIcon
|
|
74
75
|
),
|
|
@@ -76,128 +77,128 @@ const uo = ({
|
|
|
76
77
|
},
|
|
77
78
|
"icon"
|
|
78
79
|
),
|
|
79
|
-
/* @__PURE__ */
|
|
80
|
+
/* @__PURE__ */ e("span", { children: o.label }, "label")
|
|
80
81
|
]
|
|
81
82
|
};
|
|
82
|
-
return
|
|
83
|
+
return i ? /* @__PURE__ */ e(u.Item, { ...D }, t + "-" + p) : /* @__PURE__ */ e(l, { ...D }, t + "-" + p);
|
|
83
84
|
} else if (o.type === "divider")
|
|
84
|
-
return /* @__PURE__ */
|
|
85
|
-
|
|
85
|
+
return /* @__PURE__ */ e(
|
|
86
|
+
G,
|
|
86
87
|
{
|
|
87
|
-
className:
|
|
88
|
+
className: d(
|
|
88
89
|
n("dropdown-menu-divider"),
|
|
89
90
|
r == null ? void 0 : r.separator
|
|
90
91
|
)
|
|
91
92
|
},
|
|
92
|
-
|
|
93
|
+
t + "-" + p
|
|
93
94
|
);
|
|
94
95
|
return null;
|
|
95
96
|
},
|
|
96
|
-
[n, r, I,
|
|
97
|
-
), A =
|
|
98
|
-
(o,
|
|
97
|
+
[n, r, I, m, i, G]
|
|
98
|
+
), A = M(
|
|
99
|
+
(o, t) => /* @__PURE__ */ g(
|
|
99
100
|
f.Group,
|
|
100
101
|
{
|
|
101
|
-
className:
|
|
102
|
+
className: d(n("dropdown-menu-group"), r == null ? void 0 : r.group),
|
|
102
103
|
children: [
|
|
103
|
-
o.label && /* @__PURE__ */
|
|
104
|
+
o.label && /* @__PURE__ */ e(
|
|
104
105
|
f.GroupLabel,
|
|
105
106
|
{
|
|
106
|
-
className:
|
|
107
|
+
className: d(
|
|
107
108
|
n("dropdown-menu-header"),
|
|
108
109
|
r == null ? void 0 : r.groupLabel
|
|
109
110
|
),
|
|
110
|
-
children: /* @__PURE__ */
|
|
111
|
+
children: /* @__PURE__ */ e("span", { children: o.label })
|
|
111
112
|
}
|
|
112
113
|
),
|
|
113
|
-
o.items.map((
|
|
114
|
+
o.items.map((p, l) => b(p, t, l))
|
|
114
115
|
]
|
|
115
116
|
},
|
|
116
|
-
"group" +
|
|
117
|
+
"group" + t
|
|
117
118
|
),
|
|
118
|
-
[n, r,
|
|
119
|
-
),
|
|
120
|
-
(o,
|
|
121
|
-
|
|
119
|
+
[n, r, b]
|
|
120
|
+
), E = M(
|
|
121
|
+
(o, t) => o.label ? /* @__PURE__ */ e(
|
|
122
|
+
u.Group,
|
|
122
123
|
{
|
|
123
|
-
className:
|
|
124
|
-
heading: /* @__PURE__ */
|
|
124
|
+
className: d(n("dropdown-menu-group"), r == null ? void 0 : r.group),
|
|
125
|
+
heading: /* @__PURE__ */ e(
|
|
125
126
|
f.GroupLabel,
|
|
126
127
|
{
|
|
127
|
-
className:
|
|
128
|
+
className: d(
|
|
128
129
|
n("dropdown-menu-header"),
|
|
129
130
|
r == null ? void 0 : r.groupLabel
|
|
130
131
|
),
|
|
131
|
-
children: /* @__PURE__ */
|
|
132
|
+
children: /* @__PURE__ */ e("span", { children: o.label })
|
|
132
133
|
}
|
|
133
134
|
),
|
|
134
|
-
children: o.items.map((
|
|
135
|
+
children: o.items.map((p, l) => b(p, t, l))
|
|
135
136
|
},
|
|
136
|
-
"group" +
|
|
137
|
-
) : o.items.map((
|
|
138
|
-
[n, r,
|
|
139
|
-
), W =
|
|
140
|
-
() =>
|
|
137
|
+
"group" + t
|
|
138
|
+
) : o.items.map((p, l) => b(p, t, l)),
|
|
139
|
+
[n, r, b]
|
|
140
|
+
), W = M(
|
|
141
|
+
() => i ? /* @__PURE__ */ g(u, { className: n("dropdown-menu-container"), children: [
|
|
141
142
|
/* @__PURE__ */ q(
|
|
142
|
-
|
|
143
|
+
u.Input,
|
|
143
144
|
{
|
|
144
145
|
...L,
|
|
145
146
|
key: "search",
|
|
146
|
-
render: /* @__PURE__ */
|
|
147
|
+
render: /* @__PURE__ */ e(X, { allowClear: !0, className: n("dropdown-menu-search") })
|
|
147
148
|
}
|
|
148
149
|
),
|
|
149
|
-
/* @__PURE__ */
|
|
150
|
-
/* @__PURE__ */
|
|
151
|
-
|
|
152
|
-
] })
|
|
153
|
-
] }) :
|
|
150
|
+
/* @__PURE__ */ e(R, { children: /* @__PURE__ */ g(u.List, { className: n("dropdown-menu-list"), children: [
|
|
151
|
+
/* @__PURE__ */ e(u.Empty, { className: n("dropdown-menu-empty"), children: "No results found." }),
|
|
152
|
+
w.map(E)
|
|
153
|
+
] }) })
|
|
154
|
+
] }) : /* @__PURE__ */ e("div", { className: n("dropdown-menu-container"), children: /* @__PURE__ */ e(R, { children: w.map(A) }) }),
|
|
154
155
|
[
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
156
|
+
i,
|
|
157
|
+
w,
|
|
158
|
+
E,
|
|
158
159
|
A,
|
|
159
160
|
L,
|
|
160
161
|
n
|
|
161
162
|
]
|
|
162
|
-
),
|
|
163
|
-
return /* @__PURE__ */
|
|
164
|
-
|
|
163
|
+
), h = i ? H : f;
|
|
164
|
+
return /* @__PURE__ */ g(
|
|
165
|
+
h.Root,
|
|
165
166
|
{
|
|
166
167
|
openOnHover: z,
|
|
167
168
|
open: T,
|
|
168
|
-
onOpenChange:
|
|
169
|
+
onOpenChange: m,
|
|
169
170
|
children: [
|
|
170
|
-
/* @__PURE__ */
|
|
171
|
-
|
|
171
|
+
/* @__PURE__ */ e(
|
|
172
|
+
h.Trigger,
|
|
172
173
|
{
|
|
173
174
|
render: V,
|
|
174
175
|
ref: U,
|
|
175
|
-
className:
|
|
176
|
+
className: d(
|
|
176
177
|
n("dropdown-menu-trigger"),
|
|
177
178
|
r == null ? void 0 : r.trigger,
|
|
178
|
-
|
|
179
|
+
c
|
|
179
180
|
)
|
|
180
181
|
}
|
|
181
182
|
),
|
|
182
|
-
/* @__PURE__ */
|
|
183
|
-
|
|
183
|
+
/* @__PURE__ */ e(h.Portal, { children: /* @__PURE__ */ e(
|
|
184
|
+
h.Positioner,
|
|
184
185
|
{
|
|
185
|
-
side:
|
|
186
|
-
align:
|
|
186
|
+
side: k.placement,
|
|
187
|
+
align: k.align,
|
|
187
188
|
sideOffset: 4,
|
|
188
|
-
className:
|
|
189
|
+
className: d(n("dropdown-menu-root"), r == null ? void 0 : r.root),
|
|
189
190
|
collisionAvoidance: Y,
|
|
190
|
-
children: /* @__PURE__ */
|
|
191
|
-
|
|
191
|
+
children: /* @__PURE__ */ e(
|
|
192
|
+
h.Popup,
|
|
192
193
|
{
|
|
193
|
-
className:
|
|
194
|
+
className: d(
|
|
194
195
|
n("dropdown-menu"),
|
|
195
196
|
O,
|
|
196
197
|
r == null ? void 0 : r.popup,
|
|
197
|
-
|
|
198
|
+
c
|
|
198
199
|
),
|
|
199
200
|
style: {
|
|
200
|
-
"--size-width":
|
|
201
|
+
"--size-width": C in S ? S[C] : void 0
|
|
201
202
|
},
|
|
202
203
|
children: W()
|
|
203
204
|
}
|
|
@@ -209,6 +210,6 @@ const uo = ({
|
|
|
209
210
|
);
|
|
210
211
|
};
|
|
211
212
|
export {
|
|
212
|
-
|
|
213
|
+
lo as DropdownMenu
|
|
213
214
|
};
|
|
214
215
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/dropdown-menu/component.tsx"],"sourcesContent":["\"use client\";\nimport { Menu } from \"@base-ui-components/react/menu\";\nimport { useControlled } from \"@base-ui-components/react/utils\";\nimport { Popover } from \"@base-ui-components/react/popover\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { Ref, useCallback, useRef } from \"react\";\nimport {\n clsx,\n DROPDOWN_COLLISION_AVOIDANCE,\n parseAntdPlacement,\n useAntdCssVarClassname,\n useCls,\n} from \"../utils\";\nimport { Command } from \"../cmdk\";\n\n// Import component-specific styles\nimport { Input } from \"../input\";\nimport { PopupPanelSize } from \"../popup-panel/constants\";\n\nimport \"./style.css\";\n\nexport type DropdownMenuItemType =\n | {\n type: \"item\";\n label?: React.ReactNode;\n disabled?: boolean;\n icon?: React.ReactNode;\n key: React.Key;\n onClick?: React.HTMLAttributes<HTMLElement>[\"onClick\"];\n onMouseEnter?: React.HTMLAttributes<HTMLElement>[\"onMouseEnter\"];\n onMouseLeave?: React.HTMLAttributes<HTMLElement>[\"onMouseLeave\"];\n onMouseOver?: React.HTMLAttributes<HTMLElement>[\"onMouseOver\"];\n onMouseOut?: React.HTMLAttributes<HTMLElement>[\"onMouseOut\"];\n danger?: boolean;\n ref?: React.Ref<HTMLElement>;\n }\n | {\n type: \"divider\";\n }\n | {\n type: \"header\";\n title?: React.ReactNode;\n };\n\nexport interface DropdownMenuProps {\n /** Array of menu items to be displayed in the dropdown */\n items: DropdownMenuItemType[];\n /** Custom render function for the trigger element */\n children?: React.ComponentProps<typeof Menu.Trigger>[\"render\"];\n /**\n * Placement of the dropdown relative to the trigger element\n * @default \"bottomLeft\"\n */\n placement?: PopoverProps[\"placement\"];\n /**\n * Whether to open the dropdown on hover instead of click\n * @default false\n */\n openOnHover?: boolean;\n /**\n * Controlled open state of the dropdown\n */\n open?: boolean;\n /**\n * Callback fired when the dropdown open state changes\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * Additional CSS class for the dropdown component\n */\n className?: string;\n /**\n * Custom class names for different parts of the dropdown\n * @default {}\n */\n classNames?: {\n root?: string;\n trigger?: string;\n popup?: string;\n group?: string;\n groupLabel?: string;\n item?: string;\n itemIcon?: string;\n itemText?: string;\n separator?: string;\n positioner?: string;\n };\n /**\n * Custom render function for menu items\n */\n itemRender?: (\n item: DropdownMenuItemType,\n props: React.HTMLAttributes<HTMLElement>\n ) => React.ReactElement;\n /**\n * Whether to show search input\n * @default false\n */\n showSearch?: boolean;\n /**\n * Size of the dropdown menu\n * @default \"auto\"\n */\n size?: \"auto\" | keyof typeof PopupPanelSize;\n /**\n * Search placeholder\n */\n searchProps?: Omit<\n React.ComponentProps<typeof Command.Input>,\n \"size\" | \"ref\"\n >;\n /**\n *\n */\n}\n\ninterface DropdownMenuGroup {\n label: React.ReactNode | null;\n items: DropdownMenuItemType[];\n}\n\nexport const DropdownMenu = ({\n children,\n items,\n placement,\n openOnHover,\n open: outsideOpen,\n onOpenChange: outsideOnOpenChange,\n className,\n itemRender,\n classNames,\n size = \"auto\",\n showSearch,\n searchProps = {\n placeholder: \"Search...\",\n },\n}: DropdownMenuProps) => {\n const [open, setOpen] = useControlled({\n controlled: outsideOpen,\n default: false,\n name: \"open\",\n });\n const onOpenChange = useCallback(\n (newValue: boolean) => {\n setOpen(newValue);\n outsideOnOpenChange?.(newValue);\n },\n [setOpen, outsideOnOpenChange]\n );\n const cls = useCls();\n const antdCssVarClassname = useAntdCssVarClassname();\n const headlessUIPlacement = parseAntdPlacement(placement);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const itemGroups = items.reduce<DropdownMenuGroup[]>((acc, current) => {\n // If no groups exist yet and current item is not a header, create default group\n if (acc.length === 0 && current.type !== \"header\") {\n acc.push({\n label: null,\n items: [],\n });\n }\n\n // If it's a header, create a new group\n if (current.type === \"header\") {\n acc.push({\n label: current.title,\n items: [],\n });\n }\n // If it's an item and we have at least one group, add it to the last group's items\n else if (\n (current.type === \"item\" || current.type === \"divider\") &&\n acc.length > 0\n ) {\n acc[acc.length - 1].items.push(current);\n }\n // Skip dividers\n return acc;\n }, []);\n\n const MenuSeparator = showSearch ? Command.Separator : Menu.Separator;\n\n const renderMenuItem = useCallback(\n (item: DropdownMenuItemType, i: number, j: number) => {\n const MenuItem = showSearch ? Command.Item : Menu.Item;\n\n if (item.type === \"item\") {\n const props = {\n className: clsx(cls(\"dropdown-menu-item\"), classNames?.item),\n disabled: item.disabled,\n \"data-danger\": item.danger,\n ref: item.ref as Ref<HTMLDivElement>,\n onClick: item.onClick,\n onMouseEnter: item.onMouseEnter,\n onMouseLeave: item.onMouseLeave,\n onMouseOver: item.onMouseOver,\n onMouseOut: item.onMouseOut,\n onSelect: showSearch\n ? () => {\n const e = new MouseEvent(\"click\", {\n bubbles: true,\n cancelable: true,\n }) as unknown as React.MouseEvent<HTMLElement, MouseEvent>;\n item.onClick(e);\n onOpenChange?.(false);\n }\n : undefined,\n render: itemRender\n ? (itemProps: React.HTMLAttributes<HTMLElement>) =>\n itemRender(item, itemProps)\n : undefined,\n children: [\n item.icon && (\n <span\n key=\"icon\"\n className={clsx(\n cls(\"dropdown-menu-item-icon\"),\n classNames?.itemIcon\n )}\n >\n {item.icon}\n </span>\n ),\n <span key=\"label\">{item.label}</span>,\n ],\n };\n return showSearch ? (\n <Command.Item key={i + \"-\" + j} {...props}></Command.Item>\n ) : (\n <MenuItem key={i + \"-\" + j} {...props}></MenuItem>\n );\n } else if (item.type === \"divider\") {\n return (\n <MenuSeparator\n key={i + \"-\" + j}\n className={clsx(\n cls(\"dropdown-menu-divider\"),\n classNames?.separator\n )}\n />\n );\n }\n return null;\n },\n [cls, classNames, itemRender, onOpenChange, showSearch, MenuSeparator]\n );\n\n const renderGroup = useCallback(\n (group: DropdownMenuGroup, index: number) => (\n <Menu.Group\n key={\"group\" + index}\n className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n >\n {group.label && (\n <Menu.GroupLabel\n className={clsx(\n cls(\"dropdown-menu-header\"),\n classNames?.groupLabel\n )}\n >\n <span>{group.label}</span>\n </Menu.GroupLabel>\n )}\n {group.items.map((item, j) => renderMenuItem(item, index, j))}\n </Menu.Group>\n ),\n [cls, classNames, renderMenuItem]\n );\n\n const renderGroupShowSearch = useCallback(\n (group: DropdownMenuGroup, index: number) =>\n group.label ? (\n <Command.Group\n key={\"group\" + index}\n className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n heading={\n <Menu.GroupLabel\n className={clsx(\n cls(\"dropdown-menu-header\"),\n classNames?.groupLabel\n )}\n >\n <span>{group.label}</span>\n </Menu.GroupLabel>\n }\n >\n {group.items.map((item, j) => renderMenuItem(item, index, j))}\n </Command.Group>\n ) : (\n group.items.map((item, j) => renderMenuItem(item, index, j))\n ),\n [cls, classNames, renderMenuItem]\n );\n\n const renderMenuInner = useCallback(\n () =>\n showSearch ? (\n <Command>\n <Command.Input\n {...searchProps}\n key=\"search\"\n render={\n <Input allowClear className={cls(\"dropdown-menu-search\")} />\n }\n />\n <Command.List>\n <Command.Empty className={cls(\"dropdown-menu-empty\")}>\n No results found.\n </Command.Empty>\n {itemGroups.map(renderGroupShowSearch)}\n </Command.List>\n </Command>\n ) : (\n itemGroups.map(renderGroup)\n ),\n [\n showSearch,\n itemGroups,\n renderGroupShowSearch,\n renderGroup,\n searchProps,\n cls,\n ]\n );\n\n const BaseComponent = showSearch ? Popover : Menu;\n\n return (\n <BaseComponent.Root\n openOnHover={openOnHover}\n open={open}\n onOpenChange={onOpenChange}\n >\n <BaseComponent.Trigger\n render={children}\n ref={buttonRef}\n className={clsx(\n cls(\"dropdown-menu-trigger\"),\n classNames?.trigger,\n antdCssVarClassname\n )}\n />\n <BaseComponent.Portal>\n <BaseComponent.Positioner\n side={headlessUIPlacement.placement}\n align={headlessUIPlacement.align}\n sideOffset={4}\n className={clsx(cls(\"dropdown-menu-root\"), classNames?.root)}\n collisionAvoidance={DROPDOWN_COLLISION_AVOIDANCE}\n >\n <BaseComponent.Popup\n className={clsx(\n cls(\"dropdown-menu\"),\n className,\n classNames?.popup,\n antdCssVarClassname\n )}\n style={\n {\n \"--size-width\":\n size in PopupPanelSize ? PopupPanelSize[size] : undefined,\n } as React.CSSProperties\n }\n >\n {renderMenuInner()}\n </BaseComponent.Popup>\n </BaseComponent.Positioner>\n </BaseComponent.Portal>\n </BaseComponent.Root>\n );\n};\n"],"names":["DropdownMenu","children","items","placement","openOnHover","outsideOpen","outsideOnOpenChange","className","itemRender","classNames","size","showSearch","searchProps","open","setOpen","useControlled","onOpenChange","useCallback","newValue","cls","useCls","antdCssVarClassname","useAntdCssVarClassname","headlessUIPlacement","parseAntdPlacement","buttonRef","useRef","itemGroups","acc","current","MenuSeparator","Command","Menu","renderMenuItem","item","i","j","MenuItem","props","clsx","e","itemProps","jsx","renderGroup","group","index","jsxs","renderGroupShowSearch","renderMenuInner","createElement","Input","BaseComponent","Popover","DROPDOWN_COLLISION_AVOIDANCE","PopupPanelSize"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/dropdown-menu/component.tsx"],"sourcesContent":["\"use client\";\nimport { Menu } from \"@base-ui-components/react/menu\";\nimport { useControlled } from \"@base-ui-components/react/utils\";\nimport { Popover } from \"@base-ui-components/react/popover\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { Ref, useCallback, useRef } from \"react\";\nimport {\n clsx,\n DROPDOWN_COLLISION_AVOIDANCE,\n parseAntdPlacement,\n useAntdCssVarClassname,\n useCls,\n} from \"../utils\";\nimport { Command } from \"../cmdk\";\nimport { ScrollArea } from \"../scroll-area\";\n\n// Import component-specific styles\nimport { Input } from \"../input\";\nimport { PopupPanelSize } from \"../popup-panel/constants\";\n\nimport \"./style.css\";\n\nexport type DropdownMenuItemType =\n | {\n type: \"item\";\n label?: React.ReactNode;\n disabled?: boolean;\n icon?: React.ReactNode;\n key: React.Key;\n onClick?: React.HTMLAttributes<HTMLElement>[\"onClick\"];\n onMouseEnter?: React.HTMLAttributes<HTMLElement>[\"onMouseEnter\"];\n onMouseLeave?: React.HTMLAttributes<HTMLElement>[\"onMouseLeave\"];\n onMouseOver?: React.HTMLAttributes<HTMLElement>[\"onMouseOver\"];\n onMouseOut?: React.HTMLAttributes<HTMLElement>[\"onMouseOut\"];\n danger?: boolean;\n ref?: React.Ref<HTMLElement>;\n }\n | {\n type: \"divider\";\n }\n | {\n type: \"header\";\n title?: React.ReactNode;\n };\n\nexport interface DropdownMenuProps {\n /** Array of menu items to be displayed in the dropdown */\n items: DropdownMenuItemType[];\n /** Custom render function for the trigger element */\n children?: React.ComponentProps<typeof Menu.Trigger>[\"render\"];\n /**\n * Placement of the dropdown relative to the trigger element\n * @default \"bottomLeft\"\n */\n placement?: PopoverProps[\"placement\"];\n /**\n * Whether to open the dropdown on hover instead of click\n * @default false\n */\n openOnHover?: boolean;\n /**\n * Controlled open state of the dropdown\n */\n open?: boolean;\n /**\n * Callback fired when the dropdown open state changes\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * Additional CSS class for the dropdown component\n */\n className?: string;\n /**\n * Custom class names for different parts of the dropdown\n * @default {}\n */\n classNames?: {\n root?: string;\n trigger?: string;\n popup?: string;\n group?: string;\n groupLabel?: string;\n item?: string;\n itemIcon?: string;\n itemText?: string;\n separator?: string;\n positioner?: string;\n };\n /**\n * Custom render function for menu items\n */\n itemRender?: (\n item: DropdownMenuItemType,\n props: React.HTMLAttributes<HTMLElement>\n ) => React.ReactElement;\n /**\n * Whether to show search input\n * @default false\n */\n showSearch?: boolean;\n /**\n * Size of the dropdown menu\n * @default \"auto\"\n */\n size?: \"auto\" | keyof typeof PopupPanelSize;\n /**\n * Search placeholder\n */\n searchProps?: Omit<\n React.ComponentProps<typeof Command.Input>,\n \"size\" | \"ref\"\n >;\n /**\n *\n */\n}\n\ninterface DropdownMenuGroup {\n label: React.ReactNode | null;\n items: DropdownMenuItemType[];\n}\n\nexport const DropdownMenu = ({\n children,\n items,\n placement,\n openOnHover,\n open: outsideOpen,\n onOpenChange: outsideOnOpenChange,\n className,\n itemRender,\n classNames,\n size = \"auto\",\n showSearch,\n searchProps = {\n placeholder: \"Search...\",\n },\n}: DropdownMenuProps) => {\n const [open, setOpen] = useControlled({\n controlled: outsideOpen,\n default: false,\n name: \"open\",\n });\n const onOpenChange = useCallback(\n (newValue: boolean) => {\n setOpen(newValue);\n outsideOnOpenChange?.(newValue);\n },\n [setOpen, outsideOnOpenChange]\n );\n const cls = useCls();\n const antdCssVarClassname = useAntdCssVarClassname();\n const headlessUIPlacement = parseAntdPlacement(placement);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const itemGroups = items.reduce<DropdownMenuGroup[]>((acc, current) => {\n // If no groups exist yet and current item is not a header, create default group\n if (acc.length === 0 && current.type !== \"header\") {\n acc.push({\n label: null,\n items: [],\n });\n }\n\n // If it's a header, create a new group\n if (current.type === \"header\") {\n acc.push({\n label: current.title,\n items: [],\n });\n }\n // If it's an item and we have at least one group, add it to the last group's items\n else if (\n (current.type === \"item\" || current.type === \"divider\") &&\n acc.length > 0\n ) {\n acc[acc.length - 1].items.push(current);\n }\n // Skip dividers\n return acc;\n }, []);\n\n const MenuSeparator = showSearch ? Command.Separator : Menu.Separator;\n\n const renderMenuItem = useCallback(\n (item: DropdownMenuItemType, i: number, j: number) => {\n const MenuItem = showSearch ? Command.Item : Menu.Item;\n\n if (item.type === \"item\") {\n const props = {\n className: clsx(cls(\"dropdown-menu-item\"), classNames?.item),\n disabled: item.disabled,\n \"data-danger\": item.danger,\n ref: item.ref as Ref<HTMLDivElement>,\n onClick: item.onClick,\n onMouseEnter: item.onMouseEnter,\n onMouseLeave: item.onMouseLeave,\n onMouseOver: item.onMouseOver,\n onMouseOut: item.onMouseOut,\n onSelect: showSearch\n ? () => {\n const e = new MouseEvent(\"click\", {\n bubbles: true,\n cancelable: true,\n }) as unknown as React.MouseEvent<HTMLElement, MouseEvent>;\n item.onClick(e);\n onOpenChange?.(false);\n }\n : undefined,\n render: itemRender\n ? (itemProps: React.HTMLAttributes<HTMLElement>) =>\n itemRender(item, itemProps)\n : undefined,\n children: [\n item.icon && (\n <span\n key=\"icon\"\n className={clsx(\n cls(\"dropdown-menu-item-icon\"),\n classNames?.itemIcon\n )}\n >\n {item.icon}\n </span>\n ),\n <span key=\"label\">{item.label}</span>,\n ],\n };\n return showSearch ? (\n <Command.Item key={i + \"-\" + j} {...props}></Command.Item>\n ) : (\n <MenuItem key={i + \"-\" + j} {...props}></MenuItem>\n );\n } else if (item.type === \"divider\") {\n return (\n <MenuSeparator\n key={i + \"-\" + j}\n className={clsx(\n cls(\"dropdown-menu-divider\"),\n classNames?.separator\n )}\n />\n );\n }\n return null;\n },\n [cls, classNames, itemRender, onOpenChange, showSearch, MenuSeparator]\n );\n\n const renderGroup = useCallback(\n (group: DropdownMenuGroup, index: number) => (\n <Menu.Group\n key={\"group\" + index}\n className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n >\n {group.label && (\n <Menu.GroupLabel\n className={clsx(\n cls(\"dropdown-menu-header\"),\n classNames?.groupLabel\n )}\n >\n <span>{group.label}</span>\n </Menu.GroupLabel>\n )}\n {group.items.map((item, j) => renderMenuItem(item, index, j))}\n </Menu.Group>\n ),\n [cls, classNames, renderMenuItem]\n );\n\n const renderGroupShowSearch = useCallback(\n (group: DropdownMenuGroup, index: number) =>\n group.label ? (\n <Command.Group\n key={\"group\" + index}\n className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n heading={\n <Menu.GroupLabel\n className={clsx(\n cls(\"dropdown-menu-header\"),\n classNames?.groupLabel\n )}\n >\n <span>{group.label}</span>\n </Menu.GroupLabel>\n }\n >\n {group.items.map((item, j) => renderMenuItem(item, index, j))}\n </Command.Group>\n ) : (\n group.items.map((item, j) => renderMenuItem(item, index, j))\n ),\n [cls, classNames, renderMenuItem]\n );\n\n const renderMenuInner = useCallback(\n () =>\n showSearch ? (\n <Command className={cls(\"dropdown-menu-container\")}>\n <Command.Input\n {...searchProps}\n key=\"search\"\n render={\n <Input allowClear className={cls(\"dropdown-menu-search\")} />\n }\n />\n <ScrollArea>\n <Command.List className={cls(\"dropdown-menu-list\")}>\n <Command.Empty className={cls(\"dropdown-menu-empty\")}>\n No results found.\n </Command.Empty>\n {itemGroups.map(renderGroupShowSearch)}\n </Command.List>\n </ScrollArea>\n </Command>\n ) : (\n <div className={cls(\"dropdown-menu-container\")}>\n <ScrollArea>{itemGroups.map(renderGroup)}</ScrollArea>\n </div>\n ),\n [\n showSearch,\n itemGroups,\n renderGroupShowSearch,\n renderGroup,\n searchProps,\n cls,\n ]\n );\n\n const BaseComponent = showSearch ? Popover : Menu;\n\n return (\n <BaseComponent.Root\n openOnHover={openOnHover}\n open={open}\n onOpenChange={onOpenChange}\n >\n <BaseComponent.Trigger\n render={children}\n ref={buttonRef}\n className={clsx(\n cls(\"dropdown-menu-trigger\"),\n classNames?.trigger,\n antdCssVarClassname\n )}\n />\n <BaseComponent.Portal>\n <BaseComponent.Positioner\n side={headlessUIPlacement.placement}\n align={headlessUIPlacement.align}\n sideOffset={4}\n className={clsx(cls(\"dropdown-menu-root\"), classNames?.root)}\n collisionAvoidance={DROPDOWN_COLLISION_AVOIDANCE}\n >\n <BaseComponent.Popup\n className={clsx(\n cls(\"dropdown-menu\"),\n className,\n classNames?.popup,\n antdCssVarClassname\n )}\n style={\n {\n \"--size-width\":\n size in PopupPanelSize ? PopupPanelSize[size] : undefined,\n } as React.CSSProperties\n }\n >\n {renderMenuInner()}\n </BaseComponent.Popup>\n </BaseComponent.Positioner>\n </BaseComponent.Portal>\n </BaseComponent.Root>\n );\n};\n"],"names":["DropdownMenu","children","items","placement","openOnHover","outsideOpen","outsideOnOpenChange","className","itemRender","classNames","size","showSearch","searchProps","open","setOpen","useControlled","onOpenChange","useCallback","newValue","cls","useCls","antdCssVarClassname","useAntdCssVarClassname","headlessUIPlacement","parseAntdPlacement","buttonRef","useRef","itemGroups","acc","current","MenuSeparator","Command","Menu","renderMenuItem","item","i","j","MenuItem","props","clsx","e","itemProps","jsx","renderGroup","group","index","jsxs","renderGroupShowSearch","renderMenuInner","createElement","Input","ScrollArea","BaseComponent","Popover","DROPDOWN_COLLISION_AVOIDANCE","PopupPanelSize"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-dropdown-menu-root{z-index:2000}.ds-dropdown-menu{box-shadow:var(--ds-box-shadow-secondary);border-radius:var(--ds-border-radius);background:var(--ds-color-bg-elevated);list-style:none;padding:.25rem;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);transition-property:transform,scale,opacity;transition-duration:.2s;transition-timing-function:var(--ds-motion-ease-out);transform-origin:var(--transform-origin);max-width:min(var(--size-width),var(--available-width))}.ds-dropdown-menu[data-ending-style],.ds-dropdown-menu[data-starting-style]{transform:scale(.9);opacity:0}.ds-dropdown-menu:focus{outline:none}.ds-dropdown-menu-item{padding:.375rem .75rem;border-radius:var(--ds-border-radius-sm);transition:all .3s var(--ds-motion-ease-out);cursor:pointer;display:flex;align-items:center}.ds-dropdown-menu-item:focus{outline:none}.ds-dropdown-menu-item:hover{background:var(--ds-control-item-bg-hover)}.ds-dropdown-menu-item:active,.ds-dropdown-menu-item:focus,.ds-dropdown-menu-item[data-focus=true],.ds-dropdown-menu-item[data-selected=true]{background:var(--ds-control-item-bg-active)}.ds-dropdown-menu-item[data-disabled=true]{pointer-events:none;color:var(--ds-color-text-disabled)}.ds-dropdown-menu-item[data-danger=true]{color:var(--ds-color-error)}.ds-dropdown-menu-item[data-danger=true]:hover{background:var(--ds-color-error-bg)}.ds-dropdown-menu-item[data-danger=true]:active,.ds-dropdown-menu-item[data-danger=true]:focus,.ds-dropdown-menu-item[data-danger=true][data-focus=true]{background:var(--ds-color-error-bg-hover)}.ds-dropdown-menu-search{margin-bottom:.25rem}.ds-dropdown-menu-item-icon{display:flex;align-items:center;justify-content:center;margin-right:.5rem;font-size:1rem;color:var(--ds-color-icon)}[data-danger=true] .ds-dropdown-menu-item-icon{color:var(--ds-color-error)}.ds-dropdown-menu-divider{border-bottom:1px solid var(--ds-color-split);margin:.25rem 0}.ds-dropdown-menu-header{font-size:.75rem;font-weight:500;line-height:1rem;text-transform:uppercase;color:var(--ds-color-text-tertiary);padding:.75rem .75rem .25rem}.ds-dropdown-menu-header:first-child{padding-top:.5rem}.ds-dropdown-menu-empty{padding:.375rem .75rem;color:var(--ds-color-text-tertiary)}}
|
|
1
|
+
@layer components{.ds-dropdown-menu-root{z-index:2000}.ds-dropdown-menu{box-shadow:var(--ds-box-shadow-secondary);border-radius:var(--ds-border-radius);background:var(--ds-color-bg-elevated);list-style:none;padding:.25rem;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);transition-property:transform,scale,opacity;transition-duration:.2s;transition-timing-function:var(--ds-motion-ease-out);transform-origin:var(--transform-origin);max-width:min(var(--size-width),var(--available-width));max-height:var(--available-height);display:flex;flex-direction:column}.ds-dropdown-menu[data-ending-style],.ds-dropdown-menu[data-starting-style]{transform:scale(.9);opacity:0}.ds-dropdown-menu:focus{outline:none}.ds-dropdown-menu .ds-dropdown-menu-container{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-dropdown-menu .ds-dropdown-menu-search{flex-shrink:0}.ds-dropdown-menu .ds-dropdown-menu-list{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-dropdown-menu-item{padding:.375rem .75rem;border-radius:var(--ds-border-radius-sm);transition:all .3s var(--ds-motion-ease-out);cursor:pointer;display:flex;align-items:center}.ds-dropdown-menu-item:focus{outline:none}.ds-dropdown-menu-item:hover{background:var(--ds-control-item-bg-hover)}.ds-dropdown-menu-item:active,.ds-dropdown-menu-item:focus,.ds-dropdown-menu-item[data-focus=true],.ds-dropdown-menu-item[data-selected=true]{background:var(--ds-control-item-bg-active)}.ds-dropdown-menu-item[data-disabled=true]{pointer-events:none;color:var(--ds-color-text-disabled)}.ds-dropdown-menu-item[data-danger=true]{color:var(--ds-color-error)}.ds-dropdown-menu-item[data-danger=true]:hover{background:var(--ds-color-error-bg)}.ds-dropdown-menu-item[data-danger=true]:active,.ds-dropdown-menu-item[data-danger=true]:focus,.ds-dropdown-menu-item[data-danger=true][data-focus=true]{background:var(--ds-color-error-bg-hover)}.ds-dropdown-menu-search{margin-bottom:.25rem}.ds-dropdown-menu-item-icon{display:flex;align-items:center;justify-content:center;margin-right:.5rem;font-size:1rem;color:var(--ds-color-icon)}[data-danger=true] .ds-dropdown-menu-item-icon{color:var(--ds-color-error)}.ds-dropdown-menu-divider{border-bottom:1px solid var(--ds-color-split);margin:.25rem 0}.ds-dropdown-menu-header{font-size:.75rem;font-weight:500;line-height:1rem;text-transform:uppercase;color:var(--ds-color-text-tertiary);padding:.75rem .75rem .25rem}.ds-dropdown-menu-header:first-child{padding-top:.5rem}.ds-dropdown-menu-empty{padding:.375rem .75rem;color:var(--ds-color-text-tertiary)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","sources":["../../../src/components/form/item.tsx"],"sourcesContent":["\"use client\";\nimport { isValidElement } from \"react\";\nimport {\n default as AntdFormItem,\n type FormItemProps as AntdFormItemProps,\n} from \"antd/es/form/FormItem\";\nimport { Question } from \"@bioturing/assets\";\nimport { IconButton } from \"../icon-button\";\nimport { useCls } from \"../utils\";\n\nexport interface FormItemProps<Values = unknown>\n extends AntdFormItemProps<Values> {\n // tooltip?: React.ReactNode | TooltipProps;\n optionalMark?: boolean | React.ReactNode;\n}\n\nexport const FormItem = <Values = unknown,>({\n tooltip,\n label,\n optionalMark,\n ...rest\n}: FormItemProps<Values>) => {\n const cls = useCls();\n const renderedLabel =\n tooltip || optionalMark ? (\n <span className={cls(\"form-item-label-inner\")}>\n {label}\n {tooltip && (\n <IconButton\n className={cls(\"form-item-explaination-icon\")}\n label={\n typeof tooltip == \"string\" || isValidElement(tooltip)\n ? tooltip\n : undefined\n }\n >\n <Question />\n </IconButton>\n )}\n {optionalMark && (\n <span className={cls(\"form-item-label-optional-mark\")}>\n {typeof optionalMark == \"boolean\" ? \"(optional)\" : optionalMark}\n </span>\n )}\n </span>\n ) : (\n label\n );\n return <AntdFormItem label={renderedLabel} {...rest} />;\n};\n"],"names":["FormItem","tooltip","label","optionalMark","rest","cls","useCls","renderedLabel","jsxs","jsx","IconButton","isValidElement","Question","AntdFormItem"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"item.js","sources":["../../../src/components/form/item.tsx"],"sourcesContent":["\"use client\";\nimport { isValidElement } from \"react\";\nimport {\n default as AntdFormItem,\n type FormItemProps as AntdFormItemProps,\n} from \"antd/es/form/FormItem\";\nimport { Question } from \"@bioturing/assets\";\nimport { IconButton } from \"../icon-button\";\nimport { useCls } from \"../utils\";\n\nexport interface FormItemProps<Values = unknown>\n extends AntdFormItemProps<Values> {\n // tooltip?: React.ReactNode | TooltipProps;\n /**\n * Whether the field is optional. If true, the label will be marked as optional.\n * @default false\n */\n optionalMark?: boolean | React.ReactNode;\n}\n\nexport const FormItem = <Values = unknown,>({\n tooltip,\n label,\n optionalMark,\n ...rest\n}: FormItemProps<Values>) => {\n const cls = useCls();\n const renderedLabel =\n tooltip || optionalMark ? (\n <span className={cls(\"form-item-label-inner\")}>\n {label}\n {tooltip && (\n <IconButton\n className={cls(\"form-item-explaination-icon\")}\n label={\n typeof tooltip == \"string\" || isValidElement(tooltip)\n ? tooltip\n : undefined\n }\n >\n <Question />\n </IconButton>\n )}\n {optionalMark && (\n <span className={cls(\"form-item-label-optional-mark\")}>\n {typeof optionalMark == \"boolean\" ? \"(optional)\" : optionalMark}\n </span>\n )}\n </span>\n ) : (\n label\n );\n return <AntdFormItem label={renderedLabel} {...rest} />;\n};\n"],"names":["FormItem","tooltip","label","optionalMark","rest","cls","useCls","renderedLabel","jsxs","jsx","IconButton","isValidElement","Question","AntdFormItem"],"mappings":";;;;;;;AAoBO,MAAMA,IAAW,CAAoB;AAAA,EAC1C,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACL,MAA6B;AAC3B,QAAMC,IAAMC,EAAO,GACbC,IACJN,KAAWE,IACT,gBAAAK,EAAC,UAAK,WAAWH,EAAI,uBAAuB,GACzC,UAAA;AAAA,IAAAH;AAAA,IACAD,KACC,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWL,EAAI,6BAA6B;AAAA,QAC5C,OACE,OAAOJ,KAAW,YAAYU,EAAeV,CAAO,IAChDA,IACA;AAAA,QAGN,4BAACW,GAAS,CAAA,CAAA;AAAA,MAAA;AAAA,IACZ;AAAA,IAEDT,KACE,gBAAAM,EAAA,QAAA,EAAK,WAAWJ,EAAI,+BAA+B,GACjD,UAAO,OAAAF,KAAgB,YAAY,eAAeA,EACrD,CAAA;AAAA,EAAA,EAAA,CAEJ,IAEAD;AAEJ,SAAQ,gBAAAO,EAAAI,GAAA,EAAa,OAAON,GAAgB,GAAGH,GAAM;AACvD;"}
|
|
@@ -1,30 +1,34 @@
|
|
|
1
1
|
import { useDS as c } from "../ds-root/context.js";
|
|
2
2
|
import { getTokensByTheme as C } from "../../tokens/utils.js";
|
|
3
3
|
import { chartColorTokens as h } from "../../tokens/charts/palettes/cloudscape.js";
|
|
4
|
-
import {
|
|
5
|
-
|
|
4
|
+
import { useMemo as m } from "react";
|
|
5
|
+
import { CATEGORICAL_PALETTE_NAMES as L, getCategoricalChartColors as A, SEQUENTIAL_PALETTE_NAMES as f, getSequentialChartColors as p } from "../../tokens/charts/palettes/index.js";
|
|
6
|
+
const I = (t = {
|
|
6
7
|
palette: "cloudscape",
|
|
7
8
|
theme: void 0
|
|
8
9
|
}) => {
|
|
9
|
-
const { theme:
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
color:
|
|
22
|
-
|
|
10
|
+
const { theme: i } = c(), e = t.theme || i;
|
|
11
|
+
return m(() => {
|
|
12
|
+
const r = C(h, e), s = r.colorChartsLineAxis, l = r.colorChartsLineGrid, a = r.colorChartsLabelAxis, o = t.palette, n = L.includes(
|
|
13
|
+
o
|
|
14
|
+
) ? A(o, e) : f.includes(o) ? p(o, e) : [];
|
|
15
|
+
return {
|
|
16
|
+
axisLineColor: s,
|
|
17
|
+
splitLineColor: l,
|
|
18
|
+
axisLabelColor: a,
|
|
19
|
+
chartColors: n,
|
|
20
|
+
echartsAxisConfig: {
|
|
21
|
+
axisLine: { lineStyle: { color: s } },
|
|
22
|
+
splitLine: { lineStyle: { color: l } },
|
|
23
|
+
axisLabel: {
|
|
24
|
+
color: a,
|
|
25
|
+
fontFamily: "InterVariable, Inter, Helvetica, Arial, sans-serif"
|
|
26
|
+
}
|
|
23
27
|
}
|
|
24
|
-
}
|
|
25
|
-
};
|
|
28
|
+
};
|
|
29
|
+
}, [e, t.palette]);
|
|
26
30
|
};
|
|
27
31
|
export {
|
|
28
|
-
|
|
32
|
+
I as useCharts
|
|
29
33
|
};
|
|
30
34
|
//# sourceMappingURL=useCharts.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCharts.js","sources":["../../../src/components/hooks/useCharts.ts"],"sourcesContent":["import { useDS } from \"../ds-root/context\";\nimport { getTokensByTheme } from \"../../tokens/utils\";\nimport { chartColorTokens } from \"../../tokens/charts/palettes/cloudscape\";\n\nimport {\n SequentialPaletteName,\n CategoricalPaletteName,\n CATEGORICAL_PALETTE_NAMES,\n getCategoricalChartColors,\n getSequentialChartColors,\n SEQUENTIAL_PALETTE_NAMES,\n Theme,\n} from \"../../tokens\";\n\nexport interface UseChartsOptions {\n /**\n * The palette to use for the charts.\n * @default \"cloudscape\"\n */\n palette?: SequentialPaletteName | CategoricalPaletteName;\n /**\n * The theme to use for the charts.\n * @default \"light\"\n */\n theme?: Theme;\n}\n\n/**\n * Get chart colors and axis configuration based on the current theme.\n * @param options\n * @returns\n */\nexport const useCharts = (\n options: UseChartsOptions = {\n palette: \"cloudscape\",\n theme: undefined,\n }\n) => {\n const { theme: themeContext } = useDS();\n const theme = options.theme || themeContext;\n const themedChartColorTokens = getTokensByTheme(chartColorTokens, theme);\n
|
|
1
|
+
{"version":3,"file":"useCharts.js","sources":["../../../src/components/hooks/useCharts.ts"],"sourcesContent":["import { useDS } from \"../ds-root/context\";\nimport { getTokensByTheme } from \"../../tokens/utils\";\nimport { chartColorTokens } from \"../../tokens/charts/palettes/cloudscape\";\n\nimport {\n SequentialPaletteName,\n CategoricalPaletteName,\n CATEGORICAL_PALETTE_NAMES,\n getCategoricalChartColors,\n getSequentialChartColors,\n SEQUENTIAL_PALETTE_NAMES,\n Theme,\n} from \"../../tokens\";\nimport { useMemo } from \"react\";\n\nexport interface UseChartsOptions {\n /**\n * The palette to use for the charts.\n * @default \"cloudscape\"\n */\n palette?: SequentialPaletteName | CategoricalPaletteName;\n /**\n * The theme to use for the charts.\n * @default \"light\"\n */\n theme?: Theme;\n}\n\n/**\n * Get chart colors and axis configuration based on the current theme.\n * @param options\n * @returns\n */\nexport const useCharts = (\n options: UseChartsOptions = {\n palette: \"cloudscape\",\n theme: undefined,\n }\n) => {\n const { theme: themeContext } = useDS();\n const theme = options.theme || themeContext;\n\n const chartInfo = useMemo(() => {\n const themedChartColorTokens = getTokensByTheme(chartColorTokens, theme);\n const axisLineColor = themedChartColorTokens[\"colorChartsLineAxis\"];\n const splitLineColor = themedChartColorTokens[\"colorChartsLineGrid\"];\n const axisLabelColor = themedChartColorTokens[\"colorChartsLabelAxis\"];\n\n const palette = options.palette;\n\n const chartColors = CATEGORICAL_PALETTE_NAMES.includes(\n palette as CategoricalPaletteName\n )\n ? getCategoricalChartColors(palette as CategoricalPaletteName, theme)\n : SEQUENTIAL_PALETTE_NAMES.includes(palette as SequentialPaletteName)\n ? getSequentialChartColors(palette as SequentialPaletteName, theme)\n : [];\n const echartsAxisConfig = {\n axisLine: { lineStyle: { color: axisLineColor } },\n splitLine: { lineStyle: { color: splitLineColor } },\n axisLabel: {\n color: axisLabelColor,\n fontFamily: \"InterVariable, Inter, Helvetica, Arial, sans-serif\",\n },\n };\n return {\n axisLineColor,\n splitLineColor,\n axisLabelColor,\n chartColors,\n echartsAxisConfig,\n };\n }, [theme, options.palette]);\n\n return chartInfo;\n};\n"],"names":["useCharts","options","themeContext","useDS","theme","useMemo","themedChartColorTokens","getTokensByTheme","chartColorTokens","axisLineColor","splitLineColor","axisLabelColor","palette","chartColors","CATEGORICAL_PALETTE_NAMES","getCategoricalChartColors","SEQUENTIAL_PALETTE_NAMES","getSequentialChartColors"],"mappings":";;;;;AAiCa,MAAAA,IAAY,CACvBC,IAA4B;AAAA,EAC1B,SAAS;AAAA,EACT,OAAO;AACT,MACG;AACH,QAAM,EAAE,OAAOC,EAAa,IAAIC,EAAM,GAChCC,IAAQH,EAAQ,SAASC;AAkCxB,SAhCWG,EAAQ,MAAM;AACxB,UAAAC,IAAyBC,EAAiBC,GAAkBJ,CAAK,GACjEK,IAAgBH,EAAuB,qBACvCI,IAAiBJ,EAAuB,qBACxCK,IAAiBL,EAAuB,sBAExCM,IAAUX,EAAQ,SAElBY,IAAcC,EAA0B;AAAA,MAC5CF;AAAA,IAEE,IAAAG,EAA0BH,GAAmCR,CAAK,IAClEY,EAAyB,SAASJ,CAAgC,IAClEK,EAAyBL,GAAkCR,CAAK,IAChE,CAAC;AASE,WAAA;AAAA,MACL,eAAAK;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,aAAAE;AAAA,MACA,mBAbwB;AAAA,QACxB,UAAU,EAAE,WAAW,EAAE,OAAOJ,IAAgB;AAAA,QAChD,WAAW,EAAE,WAAW,EAAE,OAAOC,IAAiB;AAAA,QAClD,WAAW;AAAA,UACT,OAAOC;AAAA,UACP,YAAY;AAAA,QAAA;AAAA,MAEhB;AAAA,IAOA;AAAA,EACC,GAAA,CAACP,GAAOH,EAAQ,OAAO,CAAC;AAG7B;"}
|
|
@@ -1,16 +1,31 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as o } from "react/jsx-runtime";
|
|
3
|
-
import { forwardRef as
|
|
4
|
-
import { NavGroupContext as
|
|
5
|
-
import { useCls as
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
3
|
+
import { forwardRef as s } from "react";
|
|
4
|
+
import { NavGroupContext as u } from "./context.js";
|
|
5
|
+
import { useCls as l } from "../utils/antdUtils.js";
|
|
6
|
+
import { clsx as n } from "../utils/cn.js";
|
|
7
|
+
const v = s(
|
|
8
|
+
({
|
|
9
|
+
children: m,
|
|
10
|
+
size: r = "medium",
|
|
11
|
+
collapsible: e,
|
|
12
|
+
className: t,
|
|
13
|
+
...a
|
|
14
|
+
}, p) => {
|
|
15
|
+
const i = l();
|
|
16
|
+
return /* @__PURE__ */ o(u.Provider, { value: { size: r, collapsible: e }, children: /* @__PURE__ */ o(
|
|
17
|
+
"div",
|
|
18
|
+
{
|
|
19
|
+
className: n(i("nav-group", `nav-${r}`), t),
|
|
20
|
+
ref: p,
|
|
21
|
+
...a,
|
|
22
|
+
children: m
|
|
23
|
+
}
|
|
24
|
+
) });
|
|
10
25
|
}
|
|
11
26
|
);
|
|
12
|
-
|
|
27
|
+
v.displayName = "NavGroup";
|
|
13
28
|
export {
|
|
14
|
-
|
|
29
|
+
v as NavGroup
|
|
15
30
|
};
|
|
16
31
|
//# sourceMappingURL=group.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"group.js","sources":["../../../src/components/nav/group.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef } from \"react\";\nimport { useCls } from \"../utils\";\nimport { NavGroupContext } from \"./context\";\n\nexport interface NavGroupProps extends React.ComponentPropsWithoutRef<\"div\"> {\n /**\n * Size of the nav\n * @default \"medium\"\n */\n size?: \"small\" | \"medium\" | \"large\";\n /**\n * Weather it's collapsible or not\n */\n collapsible?: boolean;\n}\n\nconst NavGroup = forwardRef(\n (\n {
|
|
1
|
+
{"version":3,"file":"group.js","sources":["../../../src/components/nav/group.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef } from \"react\";\nimport { useCls, clsx } from \"../utils\";\nimport { NavGroupContext } from \"./context\";\n\nexport interface NavGroupProps extends React.ComponentPropsWithoutRef<\"div\"> {\n /**\n * Size of the nav\n * @default \"medium\"\n */\n size?: \"small\" | \"medium\" | \"large\";\n /**\n * Weather it's collapsible or not\n */\n collapsible?: boolean;\n}\n\nconst NavGroup = forwardRef(\n (\n {\n children,\n size = \"medium\",\n collapsible,\n className,\n ...rest\n }: NavGroupProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const cls = useCls();\n return (\n <NavGroupContext.Provider value={{ size, collapsible }}>\n <div\n className={clsx(cls(\"nav-group\", `nav-${size}`), className)}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n </NavGroupContext.Provider>\n );\n }\n);\n\nNavGroup.displayName = \"NavGroup\";\n\nexport { NavGroup };\n"],"names":["NavGroup","forwardRef","children","size","collapsible","className","rest","ref","cls","useCls","jsx","NavGroupContext","clsx"],"mappings":";;;;;;AAiBA,MAAMA,IAAWC;AAAA,EACf,CACE;AAAA,IACE,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAMC,IAAMC,EAAO;AAEjB,WAAA,gBAAAC,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAAR,GAAM,aAAAC,KACvC,UAAA,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWE,EAAKJ,EAAI,aAAa,OAAOL,CAAI,EAAE,GAAGE,CAAS;AAAA,QAC1D,KAAAE;AAAA,QACC,GAAGD;AAAA,QAEH,UAAAJ;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAAA;AAGN;AAEAF,EAAS,cAAc;"}
|
|
@@ -21,11 +21,11 @@ const R = (e) => N(e), j = ({
|
|
|
21
21
|
"data-active": r || void 0,
|
|
22
22
|
"aria-expanded": n["aria-expanded"],
|
|
23
23
|
className: void 0,
|
|
24
|
-
...n,
|
|
25
24
|
children: /* @__PURE__ */ p(c, { children: [
|
|
26
25
|
/* @__PURE__ */ a("span", { className: t("nav-item-icon"), children: i }),
|
|
27
26
|
/* @__PURE__ */ a("span", { className: t("nav-item-content"), children: l })
|
|
28
|
-
] })
|
|
27
|
+
] }),
|
|
28
|
+
...n
|
|
29
29
|
},
|
|
30
30
|
state: { active: r, icon: e }
|
|
31
31
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","sources":["../../../src/components/nav/item.tsx"],"sourcesContent":["\"use client\";\nimport React, {
|
|
1
|
+
{"version":3,"file":"item.js","sources":["../../../src/components/nav/item.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef, isValidElement, useMemo } from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\n\nexport interface NavItemProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * The icon to display in the nav item\n */\n icon?: React.ReactNode;\n /**\n * Whether the nav item is active\n */\n active?: boolean;\n /**\n * The render prop to render the nav item\n */\n render?: useRender.RenderProp<{\n active: boolean;\n icon?: React.ReactNode;\n }>;\n /**\n * The size of the nav item\n * @default \"medium\"\n */\n size?: \"small\" | \"medium\" | \"large\";\n /**\n * Whether to change the icon weight on active state\n * @default true\n */\n changeIconWeightOnActive?: boolean;\n}\n\n// Define a type for elements that can have a weight prop\ntype ElementWithWeight = React.ReactElement<{ weight?: string }>;\n\n// Type guard to check if an element can accept a weight prop\nconst canHaveWeightProp = (el: React.ReactNode): el is ElementWithWeight => {\n return isValidElement(el);\n};\n\nconst NavItemImpl = <T extends HTMLElement>(\n {\n icon,\n active = false,\n render,\n className,\n children,\n changeIconWeightOnActive = true,\n ...rest\n }: NavItemProps,\n ref: React.Ref<T>\n) => {\n const cls = useCls();\n\n // Apply weight prop only if the element can accept it\n const renderedIcon = useMemo(() => {\n if (!changeIconWeightOnActive || !active || !canHaveWeightProp(icon)) {\n return icon;\n }\n return React.cloneElement(icon, { weight: \"fill\" });\n }, [icon, changeIconWeightOnActive, active]);\n\n return useRender({\n render: render ?? <button className={clsx(cls(\"nav-item\"), className)} />,\n ref,\n props: {\n \"data-active\": active || undefined,\n \"aria-expanded\": rest[\"aria-expanded\"],\n className: undefined,\n children: (\n <>\n <span className={cls(\"nav-item-icon\")}>{renderedIcon}</span>\n <span className={cls(\"nav-item-content\")}>{children}</span>\n </>\n ),\n ...rest,\n },\n state: { active, icon },\n });\n};\n\nconst NavItem = forwardRef(NavItemImpl) as <T extends HTMLElement>(\n props: NavItemProps & { ref?: React.Ref<T> }\n) => ReturnType<typeof NavItemImpl>;\n\nexport { NavItem };\n"],"names":["canHaveWeightProp","el","isValidElement","NavItemImpl","icon","active","render","className","children","changeIconWeightOnActive","rest","ref","cls","useCls","renderedIcon","useMemo","React","useRender","jsx","clsx","jsxs","Fragment","NavItem","forwardRef"],"mappings":";;;;;;AAsCA,MAAMA,IAAoB,CAACC,MAClBC,EAAeD,CAAE,GAGpBE,IAAc,CAClB;AAAA,EACE,MAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO,GAGbC,IAAeC,EAAQ,MACvB,CAACN,KAA4B,CAACJ,KAAU,CAACL,EAAkBI,CAAI,IAC1DA,IAEFY,EAAM,aAAaZ,GAAM,EAAE,QAAQ,QAAQ,GACjD,CAACA,GAAMK,GAA0BJ,CAAM,CAAC;AAE3C,SAAOY,EAAU;AAAA,IACf,QAAQX,KAAU,gBAAAY,EAAC,UAAO,EAAA,WAAWC,EAAKP,EAAI,UAAU,GAAGL,CAAS,EAAG,CAAA;AAAA,IACvE,KAAAI;AAAA,IACA,OAAO;AAAA,MACL,eAAeN,KAAU;AAAA,MACzB,iBAAiBK,EAAK,eAAe;AAAA,MACrC,WAAW;AAAA,MACX,UAEI,gBAAAU,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAH,EAAC,QAAK,EAAA,WAAWN,EAAI,eAAe,GAAI,UAAaE,GAAA;AAAA,0BACpD,QAAK,EAAA,WAAWF,EAAI,kBAAkB,GAAI,UAAAJ,EAAS,CAAA;AAAA,MAAA,GACtD;AAAA,MAEF,GAAGE;AAAA,IACL;AAAA,IACA,OAAO,EAAE,QAAAL,GAAQ,MAAAD,EAAK;AAAA,EAAA,CACvB;AACH,GAEMkB,IAAUC,EAAWpB,CAAW;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-nav-group{display:flex;flex-direction:column;gap:.25rem}.ds-nav-item{width:100%;display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;font-size:1.25rem;color:var(--ds-color-icon);background:transparent;border-radius:var(--ds-border-radius);transition:background-color var(--ds-motion-duration-mid),color var(--ds-motion-duration-mid)}.ds-nav-item:hover{background-color:var(--ds-color-fill-tertiary);color:var(--ds-color-icon-hover)}.ds-nav-item[data-active]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text);font-weight:500}.ds-nav-item[aria-expanded]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text)}.ds-nav-item:disabled{background:transparent;color:var(--ds-color-text-disabled);cursor:not-allowed}.ds-nav-item .ds-nav-item-icon{font-size:1.25rem;line-height:1;transition:all .1s}.ds-nav-item .ds-nav-item-content{flex:1;display:flex;align-items:center;white-space:nowrap;overflow:hidden;font-size:.875rem;line-height:1rem;transition:max-width .15s,opacity .15s}.ds-nav-small .ds-nav-item,.ds-nav-item.ds-nav-item-small{padding:.25rem .5rem}:is(.ds-nav-small .ds-nav-item,.ds-nav-item.ds-nav-item-small) .ds-nav-item-icon{font-size:1rem}.ds-nav-large .ds-nav-item,.ds-nav-item.ds-nav-item-large{padding:.5rem 1rem}:is(.ds-nav-large .ds-nav-item,.ds-nav-item.ds-nav-item-large) .ds-nav-item-icon{font-size:1.5rem}:is(.ds-nav-large .ds-nav-item,.ds-nav-item.ds-nav-item-large) .ds-nav-item-content{font-size:1rem;line-height:1.5rem}.ds-nav-heading{width:100%;height:.875rem;position:relative;color:var(--ds-color-text-tertiary);text-transform:uppercase;font-weight:500;letter-spacing:.002em;font-size:.75rem;line-height:1rem;margin-bottom:.5rem}.ds-nav-small .ds-nav-heading{font-size:.625rem;line-height:1.4}.ds-nav-heading-text{display:inline-block;overflow:hidden;text-overflow:ellipsis;position:absolute;transition:all .1s;white-space:nowrap}
|
|
1
|
+
@layer components{.ds-nav-group{display:flex;flex-direction:column;gap:.25rem}.ds-nav-item{width:100%;display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;font-size:1.25rem;color:var(--ds-color-icon);background:transparent;border-radius:var(--ds-border-radius);transition:background-color var(--ds-motion-duration-mid),color var(--ds-motion-duration-mid)}.ds-nav-item:hover{background-color:var(--ds-color-fill-tertiary);color:var(--ds-color-icon-hover)}.ds-nav-item[data-active=true]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text);font-weight:500}.ds-nav-item[aria-expanded=true]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text)}.ds-nav-item:disabled{background:transparent;color:var(--ds-color-text-disabled);cursor:not-allowed}.ds-nav-item .ds-nav-item-icon{font-size:1.25rem;line-height:1;transition:all .1s}.ds-nav-item .ds-nav-item-content{flex:1;display:flex;align-items:center;white-space:nowrap;overflow:hidden;font-size:.875rem;line-height:1rem;transition:max-width .15s,opacity .15s}.ds-nav-small .ds-nav-item,.ds-nav-item.ds-nav-item-small{padding:.25rem .5rem}:is(.ds-nav-small .ds-nav-item,.ds-nav-item.ds-nav-item-small) .ds-nav-item-icon{font-size:1rem}.ds-nav-large .ds-nav-item,.ds-nav-item.ds-nav-item-large{padding:.5rem 1rem}:is(.ds-nav-large .ds-nav-item,.ds-nav-item.ds-nav-item-large) .ds-nav-item-icon{font-size:1.5rem}:is(.ds-nav-large .ds-nav-item,.ds-nav-item.ds-nav-item-large) .ds-nav-item-content{font-size:1rem;line-height:1.5rem}.ds-nav-heading{width:100%;height:.875rem;position:relative;color:var(--ds-color-text-tertiary);text-transform:uppercase;font-weight:500;letter-spacing:.002em;font-size:.75rem;line-height:1rem;margin-bottom:.5rem}.ds-nav-small .ds-nav-heading{font-size:.625rem;line-height:1.4}.ds-nav-heading-text{display:inline-block;overflow:hidden;text-overflow:ellipsis;position:absolute;transition:all .1s;white-space:nowrap}}
|
|
@@ -1,65 +1,62 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import
|
|
4
|
-
import { useRender as
|
|
5
|
-
import { mergeProps as
|
|
6
|
-
import { Stack as
|
|
7
|
-
import { useCls as
|
|
8
|
-
import { cn as
|
|
9
|
-
const
|
|
2
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
3
|
+
import S, { forwardRef as g, useMemo as v } from "react";
|
|
4
|
+
import { useRender as w } from "@base-ui-components/react/use-render";
|
|
5
|
+
import { mergeProps as E } from "@base-ui-components/react/merge-props";
|
|
6
|
+
import { Stack as P } from "./Stack.js";
|
|
7
|
+
import { useCls as V } from "../utils/antdUtils.js";
|
|
8
|
+
import { cn as j } from "../utils/cn.js";
|
|
9
|
+
const x = g(
|
|
10
10
|
({
|
|
11
11
|
flex: s,
|
|
12
12
|
grow: m = !1,
|
|
13
|
-
shrink:
|
|
14
|
-
children:
|
|
15
|
-
style:
|
|
16
|
-
stack:
|
|
13
|
+
shrink: i = !1,
|
|
14
|
+
children: e,
|
|
15
|
+
style: n,
|
|
16
|
+
stack: f = !1,
|
|
17
17
|
// stack props
|
|
18
18
|
hug: p = !1,
|
|
19
19
|
align: d = "flex-start",
|
|
20
20
|
justify: k = "flex-start",
|
|
21
21
|
vertical: u = !1,
|
|
22
|
-
gap:
|
|
23
|
-
wrap:
|
|
22
|
+
gap: h = 0,
|
|
23
|
+
wrap: C = !1,
|
|
24
24
|
className: y,
|
|
25
25
|
...o
|
|
26
26
|
}, a) => {
|
|
27
|
-
const
|
|
27
|
+
const t = V(), N = {
|
|
28
28
|
hug: p,
|
|
29
29
|
align: d,
|
|
30
30
|
justify: k,
|
|
31
31
|
vertical: u,
|
|
32
|
-
gap:
|
|
33
|
-
wrap:
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
m && e("stack-child-grow"),
|
|
40
|
-
f && e("stack-child-shrink"),
|
|
41
|
-
l,
|
|
32
|
+
gap: h,
|
|
33
|
+
wrap: C
|
|
34
|
+
}, r = v(() => typeof s == "boolean" || s === 0 || s === 1 ? t(s === !0 || s === 1 ? "stack-child-flex-1" : "stack-child-flex-0") : "", [s, t]), c = j(
|
|
35
|
+
t("stack-child"),
|
|
36
|
+
m && t("stack-child-grow"),
|
|
37
|
+
i && t("stack-child-shrink"),
|
|
38
|
+
r,
|
|
42
39
|
y
|
|
43
|
-
),
|
|
44
|
-
render:
|
|
40
|
+
), b = s && typeof s != "boolean" && !r ? s : void 0, R = w({
|
|
41
|
+
render: S.isValidElement(e) ? e : /* @__PURE__ */ l("div", { children: e }),
|
|
45
42
|
ref: a,
|
|
46
|
-
props:
|
|
43
|
+
props: E(
|
|
47
44
|
{
|
|
48
|
-
className:
|
|
45
|
+
className: c,
|
|
49
46
|
style: {
|
|
50
|
-
...
|
|
51
|
-
flex:
|
|
47
|
+
...n,
|
|
48
|
+
flex: b
|
|
52
49
|
},
|
|
53
50
|
...o
|
|
54
51
|
},
|
|
55
52
|
{}
|
|
56
53
|
)
|
|
57
54
|
});
|
|
58
|
-
return
|
|
55
|
+
return f ? /* @__PURE__ */ l(P, { ...N, ref: a, className: c, ...o, children: e }) : R;
|
|
59
56
|
}
|
|
60
57
|
);
|
|
61
|
-
|
|
58
|
+
x.displayName = "StackChild";
|
|
62
59
|
export {
|
|
63
|
-
|
|
60
|
+
x as StackChild
|
|
64
61
|
};
|
|
65
62
|
//# sourceMappingURL=StackChild.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackChild.js","sources":["../../../src/components/stack/StackChild.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef } from \"react\";\nimport { cn, useCls } from \"../utils\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport { mergeProps } from \"@base-ui-components/react/merge-props\";\nimport { Stack, StackProps } from \"./Stack\";\n\nexport interface StackChildProps extends StackProps {\n /**\n * CSS flex property value (e.g. \"1\", \"1 0 auto\", \"0 1 auto\")\n * When boolean: true = 1, false = 0\n * @default undefined\n */\n flex?: string | number | boolean;\n\n /**\n * Whether this child should grow to fill available space\n * @default false\n */\n grow?: boolean;\n\n /**\n * Whether this child should shrink if necessary\n * @default false\n */\n shrink?: boolean;\n\n /**\n * Children of the stack child\n */\n children?: React.ReactNode;\n /**\n * Whether to render the child with a stack wrapper\n * @default false\n */\n stack?: boolean;\n}\n\nexport const StackChild = forwardRef<HTMLDivElement, StackChildProps>(\n (\n {\n flex,\n grow = false,\n shrink = false,\n children,\n style,\n stack = false,\n // stack props\n hug = false,\n align = \"flex-start\",\n justify = \"flex-start\",\n vertical = false,\n gap = 0,\n wrap = false,\n className,\n ...rest\n },\n ref\n ) => {\n const cls = useCls();\n const stackProps = {\n hug,\n align,\n justify,\n vertical,\n gap,\n wrap,\n };\n\n // Determine flex class based on flex prop type\n
|
|
1
|
+
{"version":3,"file":"StackChild.js","sources":["../../../src/components/stack/StackChild.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef, useMemo } from \"react\";\nimport { cn, useCls } from \"../utils\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport { mergeProps } from \"@base-ui-components/react/merge-props\";\nimport { Stack, StackProps } from \"./Stack\";\n\nexport interface StackChildProps extends StackProps {\n /**\n * CSS flex property value (e.g. \"1\", \"1 0 auto\", \"0 1 auto\")\n * When boolean: true = 1, false = 0\n * @default undefined\n */\n flex?: string | number | boolean;\n\n /**\n * Whether this child should grow to fill available space\n * @default false\n */\n grow?: boolean;\n\n /**\n * Whether this child should shrink if necessary\n * @default false\n */\n shrink?: boolean;\n\n /**\n * Children of the stack child\n */\n children?: React.ReactNode;\n /**\n * Whether to render the child with a stack wrapper\n * @default false\n */\n stack?: boolean;\n}\n\nexport const StackChild = forwardRef<HTMLDivElement, StackChildProps>(\n (\n {\n flex,\n grow = false,\n shrink = false,\n children,\n style,\n stack = false,\n // stack props\n hug = false,\n align = \"flex-start\",\n justify = \"flex-start\",\n vertical = false,\n gap = 0,\n wrap = false,\n className,\n ...rest\n },\n ref\n ) => {\n const cls = useCls();\n const stackProps = {\n hug,\n align,\n justify,\n vertical,\n gap,\n wrap,\n };\n\n // Determine flex class based on flex prop type\n const flexClass = useMemo(() => {\n if (typeof flex === \"boolean\" || flex === 0 || flex === 1) {\n return flex === true || flex === 1\n ? cls(\"stack-child-flex-1\")\n : cls(\"stack-child-flex-0\");\n }\n return \"\";\n }, [flex, cls]);\n\n // Calculate the combined className\n const combinedClassName = cn(\n cls(\"stack-child\"),\n grow && cls(\"stack-child-grow\"),\n shrink && cls(\"stack-child-shrink\"),\n flexClass,\n className\n );\n\n // Calculate the flex style value\n const flexValue =\n flex && typeof flex !== \"boolean\" && !flexClass ? flex : undefined;\n\n // Use useRender to apply props directly to the child without creating a wrapper\n const renderedElement = useRender({\n render: React.isValidElement(children) ? children : <div>{children}</div>,\n ref,\n props: mergeProps<\"div\">(\n {\n className: combinedClassName,\n style: {\n ...style,\n flex: flexValue,\n },\n ...rest,\n },\n {}\n ),\n });\n\n return stack ? (\n <Stack {...stackProps} ref={ref} className={combinedClassName} {...rest}>\n {children}\n </Stack>\n ) : (\n renderedElement\n );\n }\n);\n\nStackChild.displayName = \"StackChild\";\n"],"names":["StackChild","forwardRef","flex","grow","shrink","children","style","stack","hug","align","justify","vertical","gap","wrap","className","rest","ref","cls","useCls","stackProps","flexClass","useMemo","combinedClassName","cn","flexValue","renderedElement","useRender","React","jsx","mergeProps","Stack"],"mappings":";;;;;;;;AAsCO,MAAMA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA;AAAA,IAER,KAAAC,IAAM;AAAA,IACN,OAAAC,IAAQ;AAAA,IACR,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,KAAAC,IAAM;AAAA,IACN,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAMC,IAAMC,EAAO,GACbC,IAAa;AAAA,MACjB,KAAAX;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,UAAAC;AAAA,MACA,KAAAC;AAAA,MACA,MAAAC;AAAA,IACF,GAGMO,IAAYC,EAAQ,MACpB,OAAOnB,KAAS,aAAaA,MAAS,KAAKA,MAAS,IAElDe,EADGf,MAAS,MAAQA,MAAS,IACzB,uBACA,oBADoB,IAGvB,IACN,CAACA,GAAMe,CAAG,CAAC,GAGRK,IAAoBC;AAAA,MACxBN,EAAI,aAAa;AAAA,MACjBd,KAAQc,EAAI,kBAAkB;AAAA,MAC9Bb,KAAUa,EAAI,oBAAoB;AAAA,MAClCG;AAAA,MACAN;AAAA,IACF,GAGMU,IACJtB,KAAQ,OAAOA,KAAS,aAAa,CAACkB,IAAYlB,IAAO,QAGrDuB,IAAkBC,EAAU;AAAA,MAChC,QAAQC,EAAM,eAAetB,CAAQ,IAAIA,IAAW,gBAAAuB,EAAC,SAAK,UAAAvB,GAAS;AAAA,MACnE,KAAAW;AAAA,MACA,OAAOa;AAAA,QACL;AAAA,UACE,WAAWP;AAAA,UACX,OAAO;AAAA,YACL,GAAGhB;AAAA,YACH,MAAMkB;AAAA,UACR;AAAA,UACA,GAAGT;AAAA,QACL;AAAA,QACA,CAAA;AAAA,MAAC;AAAA,IACH,CACD;AAEM,WAAAR,IACJ,gBAAAqB,EAAAE,GAAA,EAAO,GAAGX,GAAY,KAAAH,GAAU,WAAWM,GAAoB,GAAGP,GAChE,UAAAV,EAAA,CACH,IAEAoB;AAAA,EAAA;AAGN;AAEAzB,EAAW,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-table-column-sort-icon{display:flex;flex-direction:column}.ds-table-column-sort-icon svg{color:var(--ds-color-text-disabled);font-size:1rem}:is(.ds-table-column-sort-icon svg):hover{color:var(--ds-color-text-secondary)}.ds-table-column-sort-icon.ds-table-column-sort-icon-none svg{font-size:.75rem}.ds-table-column-sort-icon.ds-table-column-sort-icon-none>svg:first-child{margin-bottom:-2px}.ds-table-column-sort-icon.ds-table-column-sort-icon-none>svg:last-child{margin-top:-2px}.ds-table-column-filter-icon{display:flex;flex-direction:column}.ds-table-column-filter-icon svg{color:var(--ds-color-text-disabled);font-size:.875rem}:is(.ds-table-column-filter-icon svg):hover{color:var(--ds-color-text-secondary)}.ds-table-column-filter-icon.ds-table-column-filter-icon-active svg{color:var(--ds-color-primary)}.ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-first:after,.ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-last:after{box-shadow:inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-first:after,.ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-last:after{box-shadow:inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-right:not(.ds-table-has-fix-right) .ds-table-container:after{box-shadow:inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-left:not(.ds-table-has-fix-left) .ds-table-container:before{box-shadow:inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper{display:flex;flex-direction:column}.ds-table-wrapper .ds-spin-nested-loading,.ds-table-wrapper .ds-spin-container{display:flex;flex-direction:column;flex-shrink:1;flex-grow:1;min-height:0}:is(.ds-table-wrapper .ds-spin-container) .ds-table{flex-shrink:1;flex-grow:1;min-height:0}.ds-table{display:flex;flex-direction:column}.ds-table-container{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-table-header{flex-shrink:0}.ds-table-body{flex-shrink:1;min-height:0;min-width:0}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-thead>tr>th,:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-thead>tr>td{background:transparent}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-thead>tr>th,:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-thead>tr>td,:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>tr>th,:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>tr>td{border-bottom:0}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>.ds-table-row:nth-child(2n) .ds-table-cell{background-color:var(--ds-color-fill-tertiary)}:is(:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>.ds-table-row:nth-child(2n) .ds-table-cell):first-child{border-top-left-radius:var(--ds-border-radius);border-bottom-left-radius:var(--ds-border-radius)}:is(:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>.ds-table-row:nth-child(2n) .ds-table-cell):last-child{border-top-right-radius:var(--ds-border-radius);border-bottom-right-radius:var(--ds-border-radius)}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>.ds-table-row:nth-child(2n)>.ds-table-cell-row-hover{background-color:var(--ds-color-fill-secondary)}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>tr>td.ds-table-column-sort{background-color:unset}}
|
|
1
|
+
@layer components{.ds-table-column-sort-icon{display:flex;flex-direction:column}.ds-table-column-sort-icon svg{color:var(--ds-color-text-disabled);font-size:1rem}:is(.ds-table-column-sort-icon svg):hover{color:var(--ds-color-text-secondary)}.ds-table-column-sort-icon.ds-table-column-sort-icon-none svg{font-size:.75rem}.ds-table-column-sort-icon.ds-table-column-sort-icon-none>svg:first-child{margin-bottom:-2px}.ds-table-column-sort-icon.ds-table-column-sort-icon-none>svg:last-child{margin-top:-2px}.ds-table-column-filter-icon{display:flex;flex-direction:column}.ds-table-column-filter-icon svg{color:var(--ds-color-text-disabled);font-size:.875rem}:is(.ds-table-column-filter-icon svg):hover{color:var(--ds-color-text-secondary)}.ds-table-column-filter-icon.ds-table-column-filter-icon-active svg{color:var(--ds-color-primary)}.ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-first:after,.ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-last:after{box-shadow:inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-first:after,.ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-last:after{box-shadow:inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-right:not(.ds-table-has-fix-right) .ds-table-container:after{box-shadow:inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-left:not(.ds-table-has-fix-left) .ds-table-container:before{box-shadow:inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper{display:flex;flex-direction:column}.ds-table-wrapper .ds-spin-nested-loading,.ds-table-wrapper .ds-spin-container{display:flex;flex-direction:column;flex-shrink:1;flex-grow:1;min-height:0}:is(.ds-table-wrapper .ds-spin-container) .ds-table{flex-shrink:1;flex-grow:1;min-height:0}.ds-table{display:flex;flex-direction:column}.ds-table-container{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-table-header{flex-shrink:0}.ds-table-body{flex-shrink:1;min-height:0;min-width:0}.ds-table-zebra .ds-table{background:transparent}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-thead>tr>th,:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-thead>tr>td{background:transparent}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-thead>tr>th,:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-thead>tr>td,:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>tr>th,:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>tr>td{border-bottom:0}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>.ds-table-row:nth-child(2n) .ds-table-cell{background-color:var(--ds-color-fill-tertiary)}:is(:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>.ds-table-row:nth-child(2n) .ds-table-cell):first-child{border-top-left-radius:var(--ds-border-radius);border-bottom-left-radius:var(--ds-border-radius)}:is(:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>.ds-table-row:nth-child(2n) .ds-table-cell):last-child{border-top-right-radius:var(--ds-border-radius);border-bottom-right-radius:var(--ds-border-radius)}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>.ds-table-row:nth-child(2n)>.ds-table-cell-row-hover{background-color:var(--ds-color-fill-secondary)}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>tr>td.ds-table-column-sort{background-color:unset}}
|
package/dist/index.d.ts
CHANGED
|
@@ -1727,6 +1727,10 @@ export declare const Form: (<Values = any>({ ...rest }: InternalFormProps<Values
|
|
|
1727
1727
|
export { FormInstance }
|
|
1728
1728
|
|
|
1729
1729
|
export declare interface FormItemProps<Values = unknown> extends FormItemProps_2<Values> {
|
|
1730
|
+
/**
|
|
1731
|
+
* Whether the field is optional. If true, the label will be marked as optional.
|
|
1732
|
+
* @default false
|
|
1733
|
+
*/
|
|
1730
1734
|
optionalMark?: boolean | React.ReactNode;
|
|
1731
1735
|
}
|
|
1732
1736
|
|