@bioturing/components 0.28.1 → 0.29.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/breadcrumb/style.css +1 -1
- package/dist/components/checkbox/style.css +1 -1
- package/dist/components/choice-list/component.js +137 -50
- package/dist/components/choice-list/component.js.map +1 -1
- package/dist/components/choice-list/style.css +1 -1
- package/dist/components/code-block/component.js +8 -8
- package/dist/components/color-select/style.css +1 -1
- package/dist/components/combobox/component.js +171 -141
- package/dist/components/combobox/component.js.map +1 -1
- package/dist/components/combobox/style.css +1 -1
- package/dist/components/drag-drop/style.css +1 -1
- package/dist/components/dropdown-menu/component.js +110 -100
- package/dist/components/dropdown-menu/component.js.map +1 -1
- package/dist/components/dropdown-menu/item.css +1 -1
- package/dist/components/dropdown-menu/item.js +52 -49
- package/dist/components/dropdown-menu/item.js.map +1 -1
- package/dist/components/dropdown-menu/style.css +1 -1
- package/dist/components/ds-root/component.js +22 -17
- package/dist/components/ds-root/component.js.map +1 -1
- package/dist/components/ds-root/style.css +1 -1
- package/dist/components/form/style.css +1 -1
- package/dist/components/modal/style.css +1 -1
- package/dist/components/nav/style.css +1 -1
- package/dist/components/resizable/component.js +27 -26
- package/dist/components/resizable/component.js.map +1 -1
- package/dist/components/scroll-area/component.js +70 -24
- package/dist/components/scroll-area/component.js.map +1 -1
- package/dist/components/scroll-area/style.css +1 -1
- package/dist/components/select-trigger/component.js +150 -0
- package/dist/components/select-trigger/component.js.map +1 -0
- package/dist/components/select-trigger/style.css +1 -0
- package/dist/components/switch/style.css +1 -1
- package/dist/components/table/style.css +1 -1
- package/dist/components/theme-provider/component.js.map +1 -1
- package/dist/components/theme-provider/style.css +1 -1
- package/dist/components/toast/component.js +13 -13
- package/dist/components/toast/component.js.map +1 -1
- package/dist/components/tour/style.css +1 -1
- package/dist/components/utils/WithRenderProp.js.map +1 -1
- package/dist/index.d.ts +101 -42
- package/dist/index.js +125 -125
- package/dist/tokens/and-theme/tokens.js +12 -12
- package/dist/tokens/and-theme/tokens.js.map +1 -1
- package/package.json +6 -6
- package/dist/components/combobox/trigger.js +0 -89
- package/dist/components/combobox/trigger.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-breadcrumb{display:flex}.ds-breadcrumb ol{display:inline-flex;flex:1;min-width:0;gap:.25rem 0}.ds-breadcrumb>ol>li{display:inline-flex;align-items:center;flex:0 1 0;max-width:100%}.ds-breadcrumb>ol>li.ds-breadcrumb-separator{flex:0}.ds-breadcrumb>ol>li .ds-breadcrumb-link{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;gap:.5rem}.ds-breadcrumb .ds-breadcrumb-item-name{flex:1 1 auto;min-width:0}.ds-breadcrumb .ds-breadcrumb-item-icon{flex:0 0 auto}.ds-breadcrumb.ds-breadcrumb-nowrap{display:flex;align-items:center;flex-grow:1;min-width:0}.ds-breadcrumb.ds-breadcrumb-nowrap ol{flex-wrap:nowrap}
|
|
1
|
+
@layer components{.ds-breadcrumb{display:flex}.ds-breadcrumb ol{display:inline-flex;flex:1;min-width:0;gap:.25rem 0}.ds-breadcrumb>ol>li{display:inline-flex;align-items:center;flex:0 1 0;max-width:100%}.ds-breadcrumb>ol>li.ds-breadcrumb-separator{flex:0}.ds-breadcrumb>ol>li .ds-breadcrumb-link{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;gap:.5rem}.ds-breadcrumb .ds-breadcrumb-item-name{flex:1 1 auto;min-width:0}.ds-breadcrumb .ds-breadcrumb-item-icon{flex:0 0 auto}.ds-breadcrumb.ds-breadcrumb-nowrap{display:flex;align-items:center;flex-grow:1;min-width:0}.ds-breadcrumb.ds-breadcrumb-nowrap ol{flex-wrap:nowrap}.ds-breadcrumb.ds-breadcrumb-nowrap ol li:not(.ds-breadcrumb-separator){flex:0 1 auto;min-width:0;display:flex;transition:all .2s ease;max-width:100%}.ds-breadcrumb.ds-breadcrumb-nowrap ol li:not(.ds-breadcrumb-separator) span.ds-breadcrumb-link{display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.ds-breadcrumb.ds-breadcrumb-nowrap ol li:last-child{flex:0 0 auto}.ds-breadcrumb.ds-breadcrumb-nowrap ol:hover li:last-child{flex-shrink:1}.ds-breadcrumb.ds-breadcrumb-nowrap ol li:hover{flex-shrink:0}.ds-breadcrumb.ds-breadcrumb-nowrap ol li:last-child:hover{flex-shrink:0}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{
|
|
1
|
+
@layer components{.ds-checkbox-wrapper .ds-checkbox.ds-checkbox-indeterminate span.ds-checkbox-inner{background:var(--ds-color-primary);border:1px solid var(--ds-color-primary)}.ds-checkbox-wrapper .ds-checkbox.ds-checkbox-indeterminate span.ds-checkbox-inner:after{background-color:var(--ds-color-white);height:.125rem;border-radius:.125rem}.ds-checkbox-outlined.ds-checkbox-wrapper .ds-checkbox .ds-checkbox-inner{background-color:transparent}.ds-checkbox-outlined.ds-checkbox-wrapper .ds-checkbox.ds-checkbox-checked .ds-checkbox-inner{background-color:transparent;--ds-color-border: var(--ds-color-primary);border-color:var(--ds-color-border)}.ds-checkbox-outlined.ds-checkbox-wrapper .ds-checkbox.ds-checkbox-checked .ds-checkbox-inner:hover{--ds-color-border: var(--ds-color-primary-hover);border-color:var(--ds-color-border)}.ds-checkbox-outlined.ds-checkbox-wrapper .ds-checkbox.ds-checkbox-checked .ds-checkbox-inner:after{border-color:var(--ds-color-primary)}.ds-checkbox-outlined.ds-checkbox-wrapper .ds-checkbox.ds-checkbox-indeterminate .ds-checkbox-inner{background-color:transparent;--ds-color-border: var(--ds-color-primary)}.ds-checkbox-outlined.ds-checkbox-wrapper .ds-checkbox.ds-checkbox-indeterminate .ds-checkbox-inner:after{background-color:var(--ds-color-primary)}.ds-checkbox-outlined.ds-checkbox-wrapper .ds-checkbox.ds-checkbox-checked:hover .ds-checkbox-inner,.ds-checkbox-outlined.ds-checkbox-wrapper .ds-checkbox.ds-checkbox-indeterminate:hover .ds-checkbox-inner{background-color:transparent;border-color:var( --ds-color-primary-hover, var(--ds-color-primary) )}}
|
|
@@ -1,57 +1,144 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import { Command as
|
|
4
|
-
import {
|
|
2
|
+
import { jsxs as p, jsx as t } from "react/jsx-runtime";
|
|
3
|
+
import { Command as d } from "../cmdk/index.js";
|
|
4
|
+
import { useMemo as P, useContext as v, useCallback as b } from "react";
|
|
5
5
|
import './style.css';/* empty css */
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
6
|
+
import { FormItemInputContext as x } from "antd/es/form/context";
|
|
7
|
+
import R from "antd/es/config-provider/DisabledContext";
|
|
8
|
+
import { Radio as T } from "../radio/component.js";
|
|
9
|
+
import { useControlledState as q } from "../hooks/useControlledState.js";
|
|
10
|
+
import { useCls as w } from "../utils/antdUtils.js";
|
|
11
|
+
import { cn as z } from "../utils/cn.js";
|
|
12
|
+
import { Input as G } from "../input/component.js";
|
|
13
|
+
import { Checkbox as S } from "../checkbox/component.js";
|
|
14
|
+
import { ScrollArea as H } from "../scroll-area/component.js";
|
|
15
|
+
import { reactNodeToString as J } from "../utils/reactToString.js";
|
|
16
|
+
const ae = ({
|
|
17
|
+
items: i,
|
|
18
|
+
multiple: a,
|
|
19
|
+
value: g,
|
|
20
|
+
defaultValue: C,
|
|
21
|
+
onChange: A,
|
|
22
|
+
searchProps: k = { placeholder: "Search..." },
|
|
23
|
+
showSelectAll: I = !1,
|
|
24
|
+
className: N,
|
|
25
|
+
placeholder: y = "Search",
|
|
26
|
+
disabled: D = !1,
|
|
27
|
+
status: V,
|
|
28
|
+
getItemKeywords: m,
|
|
29
|
+
...j
|
|
19
30
|
}) => {
|
|
20
|
-
const [
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
)
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
31
|
+
const [l, c] = q(
|
|
32
|
+
g,
|
|
33
|
+
A,
|
|
34
|
+
C
|
|
35
|
+
), s = P(() => a ? Array.isArray(l) ? l : l ? [l] : [] : Array.isArray(l) ? l.length > 0 ? [l[0]] : [] : l ? [l] : [], [l, a]), {
|
|
36
|
+
status: B
|
|
37
|
+
} = v(x), E = v(R), F = V || B, o = D || E, n = w(), L = b(() => {
|
|
38
|
+
if (a) {
|
|
39
|
+
const e = i.map((r) => r.value).filter(Boolean);
|
|
40
|
+
c(e);
|
|
41
|
+
}
|
|
42
|
+
}, [a, i, c]), M = b(() => {
|
|
43
|
+
a && c([]);
|
|
44
|
+
}, [a, c]);
|
|
45
|
+
return /* @__PURE__ */ p(
|
|
46
|
+
d,
|
|
47
|
+
{
|
|
48
|
+
className: z(n("choice-list"), N),
|
|
49
|
+
"data-disabled": o,
|
|
50
|
+
"data-status": F,
|
|
51
|
+
...j,
|
|
52
|
+
children: [
|
|
53
|
+
/* @__PURE__ */ t(x.Provider, { value: {}, children: /* @__PURE__ */ t(
|
|
54
|
+
d.Input,
|
|
55
|
+
{
|
|
56
|
+
render: (
|
|
57
|
+
// isolate the input from the form context
|
|
58
|
+
/* @__PURE__ */ t(
|
|
59
|
+
G.Search,
|
|
60
|
+
{
|
|
61
|
+
allowClear: !0,
|
|
62
|
+
disabled: o,
|
|
63
|
+
className: n("choice-list-search"),
|
|
64
|
+
placeholder: y
|
|
65
|
+
}
|
|
66
|
+
)
|
|
67
|
+
),
|
|
68
|
+
...k
|
|
69
|
+
}
|
|
70
|
+
) }),
|
|
71
|
+
I && a && i.length > 0 && (() => {
|
|
72
|
+
const e = i.map((f) => f.value).filter(Boolean), r = s.filter(
|
|
73
|
+
(f) => e.includes(f)
|
|
74
|
+
), u = r.length === e.length && e.length > 0, h = r.length > 0 && r.length < e.length;
|
|
75
|
+
return /* @__PURE__ */ t(
|
|
76
|
+
"div",
|
|
77
|
+
{
|
|
78
|
+
className: n("choice-list-item"),
|
|
79
|
+
onClick: () => {
|
|
80
|
+
o || (h || u ? M() : L());
|
|
81
|
+
},
|
|
82
|
+
children: /* @__PURE__ */ t(
|
|
83
|
+
S,
|
|
84
|
+
{
|
|
85
|
+
tabIndex: -1,
|
|
86
|
+
checked: u,
|
|
87
|
+
indeterminate: h,
|
|
88
|
+
disabled: o,
|
|
89
|
+
children: "Select All"
|
|
90
|
+
}
|
|
91
|
+
)
|
|
92
|
+
}
|
|
93
|
+
);
|
|
94
|
+
})(),
|
|
95
|
+
/* @__PURE__ */ t(H, { className: n("choice-list-items"), fadeEdges: !0, children: /* @__PURE__ */ p(d.List, { children: [
|
|
96
|
+
/* @__PURE__ */ t(d.Empty, { className: n("choice-list-empty"), children: "No results found." }),
|
|
97
|
+
i.map((e) => /* @__PURE__ */ t(
|
|
98
|
+
d.Item,
|
|
99
|
+
{
|
|
100
|
+
className: n("choice-list-item"),
|
|
101
|
+
keywords: m ? m(e) : [e.value || "", J(e.label)],
|
|
102
|
+
value: e.value,
|
|
103
|
+
"data-in-choice": e.value ? s.includes(e.value) : !1,
|
|
104
|
+
onSelect: (r) => {
|
|
105
|
+
if (!o)
|
|
106
|
+
if (a) {
|
|
107
|
+
const u = s.includes(r) ? s.filter((h) => h !== r) : [.../* @__PURE__ */ new Set([...s, r])];
|
|
108
|
+
c(
|
|
109
|
+
u
|
|
110
|
+
);
|
|
111
|
+
} else
|
|
112
|
+
c(
|
|
113
|
+
r
|
|
114
|
+
);
|
|
115
|
+
},
|
|
116
|
+
children: a ? /* @__PURE__ */ t(
|
|
117
|
+
S,
|
|
118
|
+
{
|
|
119
|
+
tabIndex: -1,
|
|
120
|
+
checked: e.value ? s.includes(e.value) : !1,
|
|
121
|
+
disabled: o,
|
|
122
|
+
children: e.label
|
|
123
|
+
}
|
|
124
|
+
) : /* @__PURE__ */ t(
|
|
125
|
+
T,
|
|
126
|
+
{
|
|
127
|
+
tabIndex: -1,
|
|
128
|
+
checked: e.value ? s.includes(e.value) : !1,
|
|
129
|
+
disabled: o,
|
|
130
|
+
children: e.label
|
|
131
|
+
}
|
|
132
|
+
)
|
|
133
|
+
},
|
|
134
|
+
e.value
|
|
135
|
+
))
|
|
136
|
+
] }) })
|
|
137
|
+
]
|
|
138
|
+
}
|
|
139
|
+
);
|
|
53
140
|
};
|
|
54
141
|
export {
|
|
55
|
-
|
|
142
|
+
ae as ChoiceList
|
|
56
143
|
};
|
|
57
144
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/choice-list/component.tsx"],"sourcesContent":["\"use client\";\nimport { Command, CommandProps } from \"../cmdk\";\nimport { Input } from \"../input\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useCls, cn } from \"../utils\";\nimport { Radio } from \"../radio\";\nimport { Checkbox } from \"../checkbox\";\n\nimport \"./style.css\";\n\nexport type ChoiceListItem = {\n label: React.ReactNode;\n value?: string;\n};\n\nexport interface ChoiceListProps<M extends boolean = false>\n extends Omit<CommandProps, \"value\" | \"onChange\"> {\n items: ChoiceListItem[];\n multiple?: M;\n value?: M extends true ? string[] : string;\n onChange?: (value: M extends true ? string[] : string) => void;\n searchProps?: React.ComponentProps<typeof Command.Input>;\n}\n\nexport const ChoiceList = <M extends boolean = false>({\n items,\n multiple,\n value,\n onChange,\n searchProps = { placeholder: \"Search...\" },\n className,\n ...rest\n}: ChoiceListProps<M>) => {\n const [selectedValue, setSelectedValue] = useState<string[]>(\n multiple ? (value as string[]) : [value as string]\n );\n const usedValue = useMemo(() => {\n if (typeof value !== \"undefined\") {\n if (multiple) {\n return value as string[];\n } else {\n return [value as string];\n }\n }\n return selectedValue;\n }, [selectedValue, multiple, value]);\n const cls = useCls();\n useEffect(() => {\n if (!onChange) return;\n if (multiple) {\n (onChange as (value: string[]) => void)(selectedValue as string[]);\n } else {\n (onChange as (value: string) => void)(selectedValue[0] as string);\n }\n }, [selectedValue, multiple, onChange]);\n\n return (\n <Command className={cn(cls(\"choice-list\"), className)} {...rest}>\n <Command.Input\n render={<Input allowClear className={cls(\"choice-list-search\")} />}\n {...searchProps}\n />\n <Command.List>\n <Command.Empty className={cls(\"choice-list-empty\")}>\n No results found.\n </Command.Empty>\n {items.map((item) => (\n <Command.Item\n className={cls(\"choice-list-item\")}\n value={item.value}\n data-in-choice={usedValue.includes(item.value)}\n onSelect={(newValue) => {\n if (multiple) {\n if (usedValue.includes(newValue)) {\n setSelectedValue((prev: string[]) =>\n prev.filter((value) => value !== newValue)\n );\n } else {\n setSelectedValue((prev: string[]) => [\n ...new Set([...prev, newValue]),\n ]);\n }\n } else {\n setSelectedValue([newValue]);\n }\n }}\n >\n {multiple ? (\n <Checkbox tabIndex={-1} checked={usedValue.includes(item.value)}>\n {item.label}\n </Checkbox>\n ) : (\n <Radio tabIndex={-1} checked={usedValue.includes(item.value)}>\n {item.label}\n </Radio>\n )}\n </Command.Item>\n ))}\n </Command.List>\n </Command>\n );\n};\n"],"names":["ChoiceList","items","multiple","value","onChange","searchProps","className","rest","selectedValue","setSelectedValue","useState","usedValue","useMemo","cls","useCls","useEffect","jsxs","Command","cn","jsx","Input","item","newValue","prev","Checkbox","Radio"],"mappings":";;;;;;;;;;AAwBO,MAAMA,IAAa,CAA4B;AAAA,EACpD,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC,IAAc,EAAE,aAAa,YAAY;AAAA,EACzC,WAAAC;AAAA,EACA,GAAGC;AACL,MAA0B;AAClB,QAAA,CAACC,GAAeC,CAAgB,IAAIC;AAAA,IACxCR,IAAYC,IAAqB,CAACA,CAAe;AAAA,EACnD,GACMQ,IAAYC,EAAQ,MACpB,OAAOT,IAAU,MACfD,IACKC,IAEA,CAACA,CAAe,IAGpBK,GACN,CAACA,GAAeN,GAAUC,CAAK,CAAC,GAC7BU,IAAMC,EAAO;AACnB,SAAAC,EAAU,MAAM;AACd,IAAKX,KAEFA,EADCF,IACsCM,IAEFA,EAAc,CAAC,CAFY;AAAA,EAIlE,GAAA,CAACA,GAAeN,GAAUE,CAAQ,CAAC,GAGpC,gBAAAY,EAACC,GAAQ,EAAA,WAAWC,EAAGL,EAAI,aAAa,GAAGP,CAAS,GAAI,GAAGC,GACzD,UAAA;AAAA,IAAA,gBAAAY;AAAA,MAACF,EAAQ;AAAA,MAAR;AAAA,QACC,0BAASG,GAAM,EAAA,YAAU,IAAC,WAAWP,EAAI,oBAAoB,GAAG;AAAA,QAC/D,GAAGR;AAAA,MAAA;AAAA,IACN;AAAA,IACA,gBAAAW,EAACC,EAAQ,MAAR,EACC,UAAA;AAAA,MAAA,gBAAAE,EAACF,EAAQ,OAAR,EAAc,WAAWJ,EAAI,mBAAmB,GAAG,UAEpD,qBAAA;AAAA,MACCZ,EAAM,IAAI,CAACoB,MACV,gBAAAF;AAAA,QAACF,EAAQ;AAAA,QAAR;AAAA,UACC,WAAWJ,EAAI,kBAAkB;AAAA,UACjC,OAAOQ,EAAK;AAAA,UACZ,kBAAgBV,EAAU,SAASU,EAAK,KAAK;AAAA,UAC7C,UAAU,CAACC,MAAa;AACtB,YAAIpB,IACES,EAAU,SAASW,CAAQ,IAC7Bb;AAAA,cAAiB,CAACc,MAChBA,EAAK,OAAO,CAACpB,MAAUA,MAAUmB,CAAQ;AAAA,YAC3C,IAEAb,EAAiB,CAACc,MAAmB;AAAA,cACnC,GAAO,oBAAA,IAAI,CAAC,GAAGA,GAAMD,CAAQ,CAAC;AAAA,YAAA,CAC/B,IAGcb,EAAA,CAACa,CAAQ,CAAC;AAAA,UAE/B;AAAA,UAEC,UAAApB,IACE,gBAAAiB,EAAAK,GAAA,EAAS,UAAU,IAAI,SAASb,EAAU,SAASU,EAAK,KAAK,GAC3D,UAAAA,EAAK,MACR,CAAA,IAEA,gBAAAF,EAACM,GAAM,EAAA,UAAU,IAAI,SAASd,EAAU,SAASU,EAAK,KAAK,GACxD,UAAAA,EAAK,MACR,CAAA;AAAA,QAAA;AAAA,MAGL,CAAA;AAAA,IAAA,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/choice-list/component.tsx"],"sourcesContent":["\"use client\";\nimport { Command, CommandProps } from \"../cmdk\";\nimport { Input } from \"../input\";\nimport { useCallback, useMemo, useContext } from \"react\";\nimport { useCls, cn, reactNodeToString } from \"../utils\";\nimport { useControlledState } from \"../hooks\";\nimport { Radio } from \"../radio\";\nimport { Checkbox } from \"../checkbox\";\nimport { ScrollArea } from \"../scroll-area\";\n\nimport \"./style.css\";\nimport { FormItemInputContext } from \"antd/es/form/context\";\nimport DisabledContext from \"antd/es/config-provider/DisabledContext\";\n\nexport type ChoiceListItem = {\n label: React.ReactNode;\n value?: string;\n};\n\nexport interface ChoiceListProps<M extends boolean = false>\n extends Omit<CommandProps, \"value\" | \"onChange\" | \"defaultValue\"> {\n items: ChoiceListItem[];\n multiple?: M;\n value?: M extends true ? string[] : string;\n defaultValue?: M extends true ? string[] : string;\n onChange?: (value: M extends true ? string[] : string) => void;\n searchProps?: React.ComponentProps<typeof Command.Input>;\n /**\n * Show select all option when in multiple mode\n * @default false\n */\n showSelectAll?: boolean;\n placeholder?: string;\n /**\n * Whether the choice list is disabled\n * @default false\n */\n disabled?: boolean;\n /**\n * Validation status\n */\n status?: \"error\" | \"warning\" | \"success\" | \"validating\";\n /**\n * Function to extract keywords from the item for search filtering\n * @default (item) => [item.value, reactNodeToString(item.label)]\n */\n getItemKeywords?: (item: ChoiceListItem) => string[];\n}\n\nexport const ChoiceList = <M extends boolean = false>({\n items,\n multiple,\n value,\n defaultValue,\n onChange,\n searchProps = { placeholder: \"Search...\" },\n showSelectAll = false,\n className,\n placeholder = \"Search\",\n disabled: disabledProp = false,\n status: statusProp,\n getItemKeywords,\n ...rest\n}: ChoiceListProps<M>) => {\n const [internalValue, setInternalValue] = useControlledState(\n value,\n onChange,\n defaultValue,\n );\n\n const usedValue = useMemo(() => {\n if (multiple) {\n // Ensure we always return an array for multiple mode\n if (Array.isArray(internalValue)) {\n return internalValue;\n }\n return internalValue ? [internalValue as string] : [];\n } else {\n // For single mode, convert to array for consistent usage\n if (Array.isArray(internalValue)) {\n return internalValue.length > 0 ? [internalValue[0]] : [];\n }\n return internalValue ? [internalValue as string] : [];\n }\n }, [internalValue, multiple]);\n\n // Get form context values\n const {\n status: contextStatus,\n } = useContext(FormItemInputContext);\n const contextDisabled = useContext(DisabledContext);\n\n // Merge context values with props\n const mergedStatus = statusProp || contextStatus;\n const disabled = disabledProp || contextDisabled;\n\n const cls = useCls();\n\n const handleSelectAll = useCallback(() => {\n if (multiple) {\n const allValues = items\n .map((item) => item.value)\n .filter(Boolean) as string[];\n setInternalValue(allValues as M extends true ? string[] : string);\n }\n }, [multiple, items, setInternalValue]);\n\n const handleDeselectAll = useCallback(() => {\n if (multiple) {\n setInternalValue([] as M extends true ? string[] : string);\n }\n }, [multiple, setInternalValue]);\n\n return (\n <Command \n className={cn(cls(\"choice-list\"), className)} \n data-disabled={disabled}\n data-status={mergedStatus}\n {...rest}\n >\n <FormItemInputContext.Provider value={{}}>\n <Command.Input\n render={\n // isolate the input from the form context\n <Input.Search\n allowClear\n disabled={disabled}\n className={cls(\"choice-list-search\")}\n placeholder={placeholder}\n />\n }\n {...searchProps}\n />\n </FormItemInputContext.Provider>\n {showSelectAll &&\n multiple &&\n items.length > 0 &&\n (() => {\n const allValues = items\n .map((item) => item.value)\n .filter(Boolean) as string[];\n const selectedFromAll = usedValue.filter((val) =>\n allValues.includes(val),\n );\n const checked =\n selectedFromAll.length === allValues.length && allValues.length > 0;\n const indeterminate =\n selectedFromAll.length > 0 &&\n selectedFromAll.length < allValues.length;\n\n return (\n <div\n className={cls(\"choice-list-item\")}\n onClick={() => {\n if (disabled) return;\n if (indeterminate || checked) {\n handleDeselectAll();\n } else {\n handleSelectAll();\n }\n }}\n >\n <Checkbox\n tabIndex={-1}\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n >\n Select All\n </Checkbox>\n </div>\n );\n })()}\n <ScrollArea className={cls(\"choice-list-items\")} fadeEdges>\n <Command.List>\n <Command.Empty className={cls(\"choice-list-empty\")}>\n No results found.\n </Command.Empty>\n {items.map((item) => (\n <Command.Item\n key={item.value}\n className={cls(\"choice-list-item\")}\n keywords={getItemKeywords ? getItemKeywords(item) : [item.value || '', reactNodeToString(item.label)]}\n value={item.value}\n data-in-choice={item.value ? usedValue.includes(item.value) : false}\n onSelect={(newValue) => {\n if (disabled) return;\n if (multiple) {\n const newValues = usedValue.includes(newValue)\n ? usedValue.filter((value) => value !== newValue)\n : [...new Set([...usedValue, newValue])];\n setInternalValue(\n newValues as M extends true ? string[] : string,\n );\n } else {\n setInternalValue(\n newValue as M extends true ? string[] : string,\n );\n }\n }}\n >\n {multiple ? (\n <Checkbox\n tabIndex={-1}\n checked={item.value ? usedValue.includes(item.value) : false}\n disabled={disabled}\n >\n {item.label}\n </Checkbox>\n ) : (\n <Radio \n tabIndex={-1} \n checked={item.value ? usedValue.includes(item.value) : false}\n disabled={disabled}\n >\n {item.label}\n </Radio>\n )}\n </Command.Item>\n ))}\n </Command.List>\n </ScrollArea>\n </Command>\n );\n};\n"],"names":["ChoiceList","items","multiple","value","defaultValue","onChange","searchProps","showSelectAll","className","placeholder","disabledProp","statusProp","getItemKeywords","rest","internalValue","setInternalValue","useControlledState","usedValue","useMemo","contextStatus","useContext","FormItemInputContext","contextDisabled","DisabledContext","mergedStatus","disabled","cls","useCls","handleSelectAll","useCallback","allValues","item","handleDeselectAll","jsxs","Command","cn","jsx","Input","selectedFromAll","val","checked","indeterminate","Checkbox","ScrollArea","reactNodeToString","newValue","newValues","Radio"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-choice-list{display:flex;flex-direction:column}.ds-choice-list-search{flex:
|
|
1
|
+
@layer components{.ds-choice-list{display:flex;flex-direction:column}.ds-choice-list-search{flex-grow:0;margin-bottom:.25rem;flex-shrink:0}.ds-choice-list-list{flex-grow:1;flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-choice-list-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-choice-list-item:focus{outline:none}.ds-choice-list-item:hover{background:var(--ds-control-item-bg-hover)}.ds-choice-list-item:active,.ds-choice-list-item:focus,.ds-choice-list-item[data-focus=true],.ds-choice-list-item[data-selected=true]{background:var(--ds-control-item-bg-active)}.ds-choice-list-item[data-disabled=true]{pointer-events:none;color:var(--ds-color-text-disabled)}.ds-choice-list-item[data-danger=true]{color:var(--ds-color-error)}.ds-choice-list-item[data-danger=true]:hover{background:var(--ds-color-error-bg)}.ds-choice-list-item[data-danger=true]:active,.ds-choice-list-item[data-danger=true]:focus,.ds-choice-list-item[data-danger=true][data-focus=true]{background:var(--ds-color-error-bg-hover)}.ds-choice-list-empty{padding:.375rem .75rem;color:var(--ds-color-text-tertiary)}}
|
|
@@ -5,10 +5,10 @@ import { Highlight as J, themes as K } from "prism-react-renderer";
|
|
|
5
5
|
import { useState as p, useEffect as Q, useCallback as I } from "react";
|
|
6
6
|
import { ThemeProvider as R } from "../theme-provider/component.js";
|
|
7
7
|
import './style.css';/* empty css */
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
8
|
+
import { WithAntdTokens as U } from "../utils/WithAntdTokens.js";
|
|
9
|
+
import { Segmented as V } from "../segmented/component.js";
|
|
10
|
+
import { useControlledState as X } from "../hooks/useControlledState.js";
|
|
11
|
+
import { reactNodeToString as Y } from "../utils/reactToString.js";
|
|
12
12
|
import { useCls as Z } from "../utils/antdUtils.js";
|
|
13
13
|
import { clsx as H } from "../utils/cn.js";
|
|
14
14
|
import { IconButton as N } from "../icon-button/component.js";
|
|
@@ -30,7 +30,7 @@ const vo = ({
|
|
|
30
30
|
onCopy: C,
|
|
31
31
|
...A
|
|
32
32
|
}) => {
|
|
33
|
-
const [l, y] =
|
|
33
|
+
const [l, y] = X(
|
|
34
34
|
j,
|
|
35
35
|
x,
|
|
36
36
|
b
|
|
@@ -51,7 +51,7 @@ const vo = ({
|
|
|
51
51
|
y
|
|
52
52
|
]);
|
|
53
53
|
const [T, u] = p(a), [D, S] = p(!1), E = I(() => {
|
|
54
|
-
const t = c ||
|
|
54
|
+
const t = c || Y(m);
|
|
55
55
|
try {
|
|
56
56
|
navigator.clipboard.writeText(t).then(() => {
|
|
57
57
|
u(g), S(!0), C && C(t);
|
|
@@ -63,13 +63,13 @@ const vo = ({
|
|
|
63
63
|
u(a), S(!1);
|
|
64
64
|
}, [a]), d = Z();
|
|
65
65
|
return /* @__PURE__ */ o(R, { theme: "dark", children: /* @__PURE__ */ q(
|
|
66
|
-
|
|
66
|
+
U,
|
|
67
67
|
{
|
|
68
68
|
className: H(d("code-block"), O, e == null ? void 0 : e.root),
|
|
69
69
|
...A,
|
|
70
70
|
children: [
|
|
71
71
|
f && /* @__PURE__ */ o("div", { className: d("code-block-header", e == null ? void 0 : e.header), children: /* @__PURE__ */ o(
|
|
72
|
-
|
|
72
|
+
V,
|
|
73
73
|
{
|
|
74
74
|
value: l,
|
|
75
75
|
onChange: y,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-color-select{border-color:var(--ds-color-border);border-radius:var(--ds-border-radius);padding:.25rem;background:var(--ds-color-bg-container);border-width:var(--ds-line-width);border-style:var(--ds-line-type);transition:all var(--ds-motion-duration-mid)}.ds-color-select[data-focus=true]{border-color:var(--ds-input-color-border-active);box-shadow:var(--ds-
|
|
1
|
+
@layer components{.ds-color-select{border-color:var(--ds-color-border);border-radius:var(--ds-border-radius);padding:.25rem;background:var(--ds-color-bg-container);border-width:var(--ds-line-width);border-style:var(--ds-line-type);transition:all var(--ds-motion-duration-mid)}.ds-color-select[data-focus=true]{border-color:var(--ds-input-color-border-active);box-shadow:var(--ds-control-shadow-active);outline:0;background-color:var(--ds-input-active-bg)}.ds-color-select .ds-tag{margin-right:0}.ds-color-select-option{display:flex;align-items:center;gap:.5rem}.ds-color-select-tag{display:flex;align-items:center}.ds-color-select-swatch{width:16px;height:16px;border-radius:9999px;border:1px solid var(--ds-color-border);flex-shrink:0}.ds-color-select-input{outline:none;border:none;background:transparent;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);line-height:var(--ds-line-height);flex:1;min-width:11rem;width:100%;margin-left:.25rem}.ds-color-select-input:first-child{margin-left:.7rem}}
|