@bioturing/components 0.35.2 → 0.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/base.d.ts +2 -0
- package/dist/base.d.ts.map +1 -0
- package/dist/base.js +2 -0
- package/dist/base.js.map +1 -0
- package/dist/components/base-menu/item.css +1 -1
- package/dist/components/dropdown-menu/item.d.ts.map +1 -1
- package/dist/components/dropdown-menu/item.js +32 -22
- package/dist/components/dropdown-menu/item.js.map +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/nav/index.d.ts.map +1 -1
- package/dist/components/nav/item.d.ts.map +1 -1
- package/dist/components/nav/item.js +25 -24
- package/dist/components/nav/item.js.map +1 -1
- package/dist/components/nav/style.css +1 -1
- package/dist/components/tag/component.js.map +1 -1
- package/dist/components/tag/index.d.ts +1 -0
- package/dist/components/tag/index.d.ts.map +1 -1
- package/dist/components/tag/list.d.ts +18 -0
- package/dist/components/tag/list.d.ts.map +1 -0
- package/dist/components/tag/list.js +100 -0
- package/dist/components/tag/list.js.map +1 -0
- package/dist/components/tag/style.css +1 -1
- package/dist/components/utils/client.d.ts +1 -0
- package/dist/components/utils/client.d.ts.map +1 -1
- package/dist/components/utils/createSyntheticClickEvent.d.ts +13 -0
- package/dist/components/utils/createSyntheticClickEvent.d.ts.map +1 -0
- package/dist/components/utils/createSyntheticClickEvent.js +62 -0
- package/dist/components/utils/createSyntheticClickEvent.js.map +1 -0
- package/dist/index.js +275 -271
- package/dist/index.js.map +1 -1
- package/dist/stats.html +1 -1
- package/package.json +7 -3
package/dist/base.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../src/base.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}
|
package/dist/base.js
ADDED
package/dist/base.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"base.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-menu-item-base{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;color:var(--ds-color-text);border:none;background:none;width:100%;text-align:left}.ds-menu-item-base:focus{outline:none}.ds-menu-item-base:hover,.ds-menu-item-base[data-active=true],.ds-menu-item-base[data-highlighted]{background:var(--ds-control-item-bg-hover)}.ds-menu-item-base:active,.ds-menu-item-base:focus,.ds-menu-item-base[data-selected=true],.ds-menu-item-base[data-focus=true]{background:var(--ds-control-item-bg-active)}.ds-menu-item-base[data-disabled=true]{pointer-events:none;color:var(--ds-color-text-disabled)}.ds-menu-item-base[data-danger=true]{color:var(--ds-color-error)}.ds-menu-item-base[data-danger=true]:hover{background:var(--ds-color-error-bg)}.ds-menu-item-base[data-danger=true]:active,.ds-menu-item-base[data-danger=true]:focus,.ds-menu-item-base[data-danger=true][data-focus=true]{background:var(--ds-color-error-bg-hover)}.ds-menu-item-icon{display:flex;align-items:center;justify-content:center;margin-right:.5rem;font-size:1rem;color:var(--ds-color-icon);flex-shrink:0}.ds-menu-item-base[data-danger=true] .ds-menu-item-icon{color:var(--ds-color-error)}.ds-menu-item-text{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-menu-item-suffix{margin-left:.75rem;font-size:.75rem;line-height:1.25rem;color:var(--ds-color-text-tertiary);display:flex;flex-grow:0;flex-shrink:0;align-items:flex-end}.ds-menu-item-base .ds-checkbox-wrapper{margin-right:.5rem}.ds-menu-item-base:not(.ds-menu-item-show-checkbox) [data-actual-selected=true]:scope{background:var(--ds-control-item-bg-active)}
|
|
1
|
+
@layer components{.ds-menu-item-base{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;color:var(--ds-color-text);border:none;background:none;width:100%;text-align:left}.ds-menu-item-base:focus{outline:none}.ds-menu-item-base:hover,.ds-menu-item-base[data-active=true],.ds-menu-item-base[data-highlighted]{background:var(--ds-control-item-bg-hover)}.ds-menu-item-base:active,.ds-menu-item-base:focus,.ds-menu-item-base[data-selected=true],.ds-menu-item-base[data-focus=true]{background:var(--ds-control-item-bg-active)}.ds-menu-item-base[data-disabled=true]{pointer-events:none;color:var(--ds-color-text-disabled)}.ds-menu-item-base[data-danger=true]{color:var(--ds-color-error)}.ds-menu-item-base[data-danger=true]:hover{background:var(--ds-color-error-bg)}.ds-menu-item-base[data-danger=true]:active,.ds-menu-item-base[data-danger=true]:focus,.ds-menu-item-base[data-danger=true][data-focus=true]{background:var(--ds-color-error-bg-hover)}.ds-menu-item-icon{display:flex;align-items:center;justify-content:center;margin-right:.5rem;font-size:1rem;color:var(--ds-color-icon);flex-shrink:0}.ds-menu-item-base[data-danger=true] .ds-menu-item-icon{color:var(--ds-color-error)}.ds-menu-item-text{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-menu-item-suffix{margin-left:.75rem;font-size:.75rem;line-height:1.25rem;color:var(--ds-color-text-tertiary);display:flex;flex-grow:0;flex-shrink:0;align-items:flex-end}.ds-menu-item-base .ds-checkbox-wrapper{margin-right:.5rem}.ds-menu-item-base:not(.ds-menu-item-show-checkbox) [data-actual-selected=true]:scope{background:var(--ds-control-item-bg-active)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAOzD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAKpD,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,IAAI,EAAE,oBAAoB,GAAG;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C;;OAEG;IACH,UAAU,CAAC,EAAE,CACX,IAAI,EAAE,oBAAoB,EAC1B,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KACrC,KAAK,CAAC,YAAY,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,CAChB,IAAI,EAAE,oBAAoB,GAAG;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,EAC7C,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KACrC,KAAK,CAAC,YAAY,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IAC9C;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,GAAG;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACtE;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,GAAG;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,EAAE,CAAC;CAC/E;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAqH5D,CAAC"}
|
|
@@ -1,28 +1,38 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { useCallback as
|
|
4
|
-
import { Command as
|
|
5
|
-
import { Menu as
|
|
2
|
+
import { jsx as c } from "react/jsx-runtime";
|
|
3
|
+
import { useCallback as i, useMemo as x } from "react";
|
|
4
|
+
import { Command as y } from "../cmdk/index.js";
|
|
5
|
+
import { Menu as O } from "@base-ui-components/react/menu";
|
|
6
6
|
import { BaseMenuItem as S } from "../base-menu/item.js";
|
|
7
|
+
import C from "../utils/createSyntheticClickEvent.js";
|
|
7
8
|
import { reactNodeToString as w } from "../utils/reactToString.js";
|
|
8
|
-
import { useCls as
|
|
9
|
-
import { clsx as
|
|
10
|
-
const
|
|
9
|
+
import { useCls as E } from "../utils/antdUtils.js";
|
|
10
|
+
import { clsx as M } from "../utils/cn.js";
|
|
11
|
+
const z = ({
|
|
11
12
|
item: o,
|
|
12
13
|
inCombobox: e = !1,
|
|
13
14
|
selected: u = !1,
|
|
14
15
|
itemRender: d,
|
|
15
16
|
itemLabelRender: f,
|
|
16
|
-
itemProps:
|
|
17
|
+
itemProps: p = {},
|
|
17
18
|
classNames: n,
|
|
18
19
|
afterSelect: a,
|
|
19
20
|
showCheckbox: v,
|
|
20
21
|
indeterminate: k,
|
|
21
22
|
getItemKeywords: l
|
|
22
23
|
}) => {
|
|
23
|
-
const
|
|
24
|
+
const t = E(), s = i(
|
|
24
25
|
(r) => {
|
|
25
|
-
|
|
26
|
+
if (o.onSelect)
|
|
27
|
+
o.onSelect(o);
|
|
28
|
+
else if (o.onClick)
|
|
29
|
+
if (typeof r == "object")
|
|
30
|
+
o.onClick(r);
|
|
31
|
+
else {
|
|
32
|
+
const b = C(null);
|
|
33
|
+
o.onClick(b);
|
|
34
|
+
}
|
|
35
|
+
a && a(o);
|
|
26
36
|
},
|
|
27
37
|
[a, o]
|
|
28
38
|
), g = x(
|
|
@@ -30,8 +40,8 @@ const D = ({
|
|
|
30
40
|
[l, o]
|
|
31
41
|
);
|
|
32
42
|
return d ? d(o, {
|
|
33
|
-
className:
|
|
34
|
-
|
|
43
|
+
className: M(
|
|
44
|
+
t("dropdown-menu-item", e && "dropdown-menu-item-combobox"),
|
|
35
45
|
n?.item,
|
|
36
46
|
o.className
|
|
37
47
|
),
|
|
@@ -39,13 +49,13 @@ const D = ({
|
|
|
39
49
|
"data-actual-selected": u,
|
|
40
50
|
"data-value": typeof o.label == "string" ? o.label : String(o.key),
|
|
41
51
|
ref: o.ref,
|
|
42
|
-
onClick:
|
|
52
|
+
onClick: s,
|
|
43
53
|
onMouseEnter: o.onMouseEnter,
|
|
44
54
|
onMouseLeave: o.onMouseLeave,
|
|
45
55
|
onMouseOver: o.onMouseOver,
|
|
46
56
|
onMouseOut: o.onMouseOut,
|
|
47
|
-
...
|
|
48
|
-
}) : /* @__PURE__ */
|
|
57
|
+
...p
|
|
58
|
+
}) : /* @__PURE__ */ c(
|
|
49
59
|
S,
|
|
50
60
|
{
|
|
51
61
|
disabled: o.disabled,
|
|
@@ -56,8 +66,8 @@ const D = ({
|
|
|
56
66
|
icon: o.icon,
|
|
57
67
|
suffix: e ? void 0 : o.suffix,
|
|
58
68
|
classNames: {
|
|
59
|
-
root:
|
|
60
|
-
|
|
69
|
+
root: M(
|
|
70
|
+
t(
|
|
61
71
|
"dropdown-menu-item",
|
|
62
72
|
e && "dropdown-menu-item-combobox"
|
|
63
73
|
),
|
|
@@ -76,19 +86,19 @@ const D = ({
|
|
|
76
86
|
onMouseOut: o.onMouseOut,
|
|
77
87
|
"data-value": typeof o.label == "string" ? o.label : String(o.key),
|
|
78
88
|
"data-actual-selected": u,
|
|
79
|
-
render: e ? /* @__PURE__ */
|
|
80
|
-
|
|
89
|
+
render: e ? /* @__PURE__ */ c(
|
|
90
|
+
y.Item,
|
|
81
91
|
{
|
|
82
92
|
value: String(o.key),
|
|
83
93
|
keywords: g || void 0,
|
|
84
|
-
onSelect:
|
|
94
|
+
onSelect: s
|
|
85
95
|
}
|
|
86
|
-
) : /* @__PURE__ */
|
|
96
|
+
) : /* @__PURE__ */ c(O.Item, { onClick: s }),
|
|
87
97
|
children: o.label
|
|
88
98
|
}
|
|
89
99
|
);
|
|
90
100
|
};
|
|
91
101
|
export {
|
|
92
|
-
|
|
102
|
+
z as DropdownMenuItem
|
|
93
103
|
};
|
|
94
104
|
//# sourceMappingURL=item.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","sources":["../../../src/components/dropdown-menu/item.tsx"],"sourcesContent":["\"use client\";\nimport React, { Ref, useCallback, useMemo } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"file":"item.js","sources":["../../../src/components/dropdown-menu/item.tsx"],"sourcesContent":["\"use client\";\nimport React, { Ref, useCallback, useMemo } from \"react\";\nimport {\n clsx,\n createSyntheticClickEvent,\n reactNodeToString,\n useCls,\n} from \"../utils\";\nimport type { DropdownMenuItemType } from \"./types\";\nimport { Command } from \"../cmdk\";\nimport { Menu } from \"@base-ui-components/react/menu\";\nimport { BaseMenuItem } from \"../base-menu\";\n\nexport interface DropdownMenuItemProps {\n /**\n * The menu item data\n */\n item: DropdownMenuItemType & { type: \"item\" };\n /**\n * Custom render function for the item\n */\n itemRender?: (\n item: DropdownMenuItemType,\n props: React.HTMLAttributes<HTMLElement>\n ) => React.ReactElement;\n /**\n * Custom render function for the item label\n */\n itemLabelRender?: (\n item: DropdownMenuItemType & { type: \"item\" },\n props: React.HTMLAttributes<HTMLElement>\n ) => React.ReactElement;\n /**\n * Additional props to pass to the item\n */\n itemProps?: React.HTMLAttributes<HTMLElement>;\n /**\n * Class names from parent DropdownMenu\n */\n classNames?: {\n item?: string;\n itemIcon?: string;\n itemText?: string;\n itemSuffix?: string;\n };\n /**\n * Function to be called after the menu item is selected\n */\n afterSelect?: (item: DropdownMenuItemType & { type: \"item\" }) => void;\n /**\n * Whether the menu item is in a combobox\n */\n inCombobox?: boolean;\n /**\n * Whether the menu item is selected (for combobox)\n * @default false\n */\n selected?: boolean;\n /**\n * Whether to show checkbox (only for decoration purpose)\n */\n showCheckbox?: boolean;\n /**\n * Whether the menu item checkbox is indeterminate (for combobox)\n * @default false\n */\n indeterminate?: boolean;\n /**\n * Function to extract keywords from the item for search filtering\n * @default (item) => [String(item.key), reactNodeToString(item.label)]\n */\n getItemKeywords?: (item: DropdownMenuItemType & { type: \"item\" }) => string[];\n}\n\nexport const DropdownMenuItem: React.FC<DropdownMenuItemProps> = ({\n item,\n inCombobox = false,\n selected = false,\n itemRender,\n itemLabelRender,\n itemProps = {},\n classNames,\n afterSelect,\n showCheckbox,\n indeterminate,\n getItemKeywords,\n}) => {\n const cls = useCls();\n\n const handler = useCallback(\n (e?: React.MouseEvent<HTMLElement, MouseEvent> | string) => {\n // onSelect has priority over onClick\n if (item.onSelect) {\n item.onSelect(item);\n } else if (item.onClick) {\n if (typeof e === \"object\") {\n item.onClick(e);\n } else {\n const event = createSyntheticClickEvent(null);\n item.onClick(event);\n }\n }\n if (afterSelect) afterSelect(item);\n },\n [afterSelect, item]\n );\n\n const keywords = useMemo(\n () =>\n getItemKeywords\n ? getItemKeywords(item)\n : [String(item.key), reactNodeToString(item.label)],\n [getItemKeywords, item]\n );\n\n // If custom render function is provided, use it\n if (itemRender) {\n return itemRender(item, {\n className: clsx(\n cls(\"dropdown-menu-item\", inCombobox && \"dropdown-menu-item-combobox\"),\n classNames?.item,\n item.className\n ),\n \"data-danger\": item.danger,\n \"data-actual-selected\": selected,\n \"data-value\":\n typeof item.label === \"string\" ? item.label : String(item.key),\n ref: item.ref as Ref<HTMLDivElement>,\n onClick: handler,\n onMouseEnter: item.onMouseEnter,\n onMouseLeave: item.onMouseLeave,\n onMouseOver: item.onMouseOver,\n onMouseOut: item.onMouseOut,\n ...itemProps,\n } as React.HTMLAttributes<HTMLElement>);\n }\n\n return (\n <BaseMenuItem\n // BaseMenuItem props\n disabled={item.disabled}\n danger={item.danger}\n selected={selected}\n showCheckbox={showCheckbox}\n indeterminate={indeterminate}\n icon={item.icon}\n suffix={!inCombobox ? item.suffix : undefined}\n classNames={{\n root: clsx(\n cls(\n \"dropdown-menu-item\",\n inCombobox && \"dropdown-menu-item-combobox\"\n ),\n classNames?.item,\n item.className\n ),\n icon: classNames?.itemIcon,\n text: classNames?.itemText,\n suffix: classNames?.itemSuffix,\n }}\n labelRender={\n itemLabelRender\n ? (props: React.HTMLAttributes<HTMLElement>) =>\n itemLabelRender(item, props)\n : undefined\n }\n ref={item.ref as Ref<HTMLDivElement>}\n onMouseEnter={item.onMouseEnter}\n onMouseLeave={item.onMouseLeave}\n onMouseOver={item.onMouseOver}\n onMouseOut={item.onMouseOut}\n data-value={\n typeof item.label === \"string\" ? item.label : String(item.key)\n }\n data-actual-selected={selected}\n // Render prop to use Base UI components\n render={\n inCombobox ? (\n <Command.Item\n value={String(item.key)}\n keywords={keywords || undefined}\n onSelect={handler}\n />\n ) : (\n <Menu.Item onClick={handler} />\n )\n }\n >\n {item.label}\n </BaseMenuItem>\n );\n};\n"],"names":["DropdownMenuItem","item","inCombobox","selected","itemRender","itemLabelRender","itemProps","classNames","afterSelect","showCheckbox","indeterminate","getItemKeywords","cls","useCls","handler","useCallback","e","event","createSyntheticClickEvent","keywords","useMemo","reactNodeToString","clsx","jsx","BaseMenuItem","props","Command","Menu"],"mappings":";;;;;;;;;;AA0EO,MAAMA,IAAoD,CAAC;AAAA,EAChE,MAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC,IAAY,CAAA;AAAA,EACZ,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC;AACF,MAAM;AACJ,QAAMC,IAAMC,EAAA,GAENC,IAAUC;AAAA,IACd,CAACC,MAA2D;AAE1D,UAAIf,EAAK;AACP,QAAAA,EAAK,SAASA,CAAI;AAAA,eACTA,EAAK;AACd,YAAI,OAAOe,KAAM;AACf,UAAAf,EAAK,QAAQe,CAAC;AAAA,aACT;AACL,gBAAMC,IAAQC,EAA0B,IAAI;AAC5C,UAAAjB,EAAK,QAAQgB,CAAK;AAAA,QACpB;AAEF,MAAIT,OAAyBP,CAAI;AAAA,IACnC;AAAA,IACA,CAACO,GAAaP,CAAI;AAAA,EAAA,GAGdkB,IAAWC;AAAA,IACf,MACET,IACIA,EAAgBV,CAAI,IACpB,CAAC,OAAOA,EAAK,GAAG,GAAGoB,EAAkBpB,EAAK,KAAK,CAAC;AAAA,IACtD,CAACU,GAAiBV,CAAI;AAAA,EAAA;AAIxB,SAAIG,IACKA,EAAWH,GAAM;AAAA,IACtB,WAAWqB;AAAA,MACTV,EAAI,sBAAsBV,KAAc,6BAA6B;AAAA,MACrEK,GAAY;AAAA,MACZN,EAAK;AAAA,IAAA;AAAA,IAEP,eAAeA,EAAK;AAAA,IACpB,wBAAwBE;AAAA,IACxB,cACE,OAAOF,EAAK,SAAU,WAAWA,EAAK,QAAQ,OAAOA,EAAK,GAAG;AAAA,IAC/D,KAAKA,EAAK;AAAA,IACV,SAASa;AAAA,IACT,cAAcb,EAAK;AAAA,IACnB,cAAcA,EAAK;AAAA,IACnB,aAAaA,EAAK;AAAA,IAClB,YAAYA,EAAK;AAAA,IACjB,GAAGK;AAAA,EAAA,CACiC,IAItC,gBAAAiB;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,UAAUvB,EAAK;AAAA,MACf,QAAQA,EAAK;AAAA,MACb,UAAAE;AAAA,MACA,cAAAM;AAAA,MACA,eAAAC;AAAA,MACA,MAAMT,EAAK;AAAA,MACX,QAASC,IAA2B,SAAdD,EAAK;AAAA,MAC3B,YAAY;AAAA,QACV,MAAMqB;AAAA,UACJV;AAAA,YACE;AAAA,YACAV,KAAc;AAAA,UAAA;AAAA,UAEhBK,GAAY;AAAA,UACZN,EAAK;AAAA,QAAA;AAAA,QAEP,MAAMM,GAAY;AAAA,QAClB,MAAMA,GAAY;AAAA,QAClB,QAAQA,GAAY;AAAA,MAAA;AAAA,MAEtB,aACEF,IACI,CAACoB,MACCpB,EAAgBJ,GAAMwB,CAAK,IAC7B;AAAA,MAEN,KAAKxB,EAAK;AAAA,MACV,cAAcA,EAAK;AAAA,MACnB,cAAcA,EAAK;AAAA,MACnB,aAAaA,EAAK;AAAA,MAClB,YAAYA,EAAK;AAAA,MACjB,cACE,OAAOA,EAAK,SAAU,WAAWA,EAAK,QAAQ,OAAOA,EAAK,GAAG;AAAA,MAE/D,wBAAsBE;AAAA,MAEtB,QACED,IACE,gBAAAqB;AAAA,QAACG,EAAQ;AAAA,QAAR;AAAA,UACC,OAAO,OAAOzB,EAAK,GAAG;AAAA,UACtB,UAAUkB,KAAY;AAAA,UACtB,UAAUL;AAAA,QAAA;AAAA,MAAA,IAGZ,gBAAAS,EAACI,EAAK,MAAL,EAAU,SAASb,EAAA,CAAS;AAAA,MAIhC,UAAAb,EAAK;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
|
|
@@ -9,7 +9,7 @@ export * from './segmented/index';
|
|
|
9
9
|
export * from './table/component';
|
|
10
10
|
export { DataTable } from './data-table/component';
|
|
11
11
|
export type { DataTableProps, DataTableColumnType, DataTableRef, DataTableRowSelection, DataTablePaginationConfig, } from './data-table/types';
|
|
12
|
-
export * from './tag/
|
|
12
|
+
export * from './tag/index';
|
|
13
13
|
export * from './theme-provider';
|
|
14
14
|
export * from './splitter/component';
|
|
15
15
|
export * from './truncate/component';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,EACL,KAAK,EACL,MAAM,EACN,GAAG,EACH,YAAY,EACZ,MAAM,EACN,OAAO,EAIP,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,QAAQ,EAER,GAAG,EAEH,WAAW,EACX,cAAc,EACd,UAAU,EACV,YAAY,EACZ,OAAO,EACP,MAAM,EACN,QAAQ,EAER,IAAI,EACJ,WAAW,EAEX,IAAI,EAGJ,WAAW,EACX,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,OAAO,EAEP,YAAY,EACZ,UAAU,EACV,UAAU,EAEV,QAAQ,EACR,MAAM,EAEN,IAAI,EACJ,MAAM,EACN,GAAG,EAGH,QAAQ,EAER,KAAK,EAEL,SAAS,EACT,KAAK,EAGL,IAAI,EAEJ,KAAK,EACL,UAAU,EACV,QAAQ,EAGR,QAAQ,EAER,UAAU,EACV,UAAU,EAEV,OAAO,EACP,SAAS,EAET,iBAAiB,GAClB,MAAM,MAAM,CAAC;AAEd,YAAY,EACV,UAAU,EACV,QAAQ,EACR,UAAU,EACV,eAAe,EACf,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,WAAW,EACX,YAAY,EAKZ,YAAY,EACZ,aAAa,EACb,SAAS,EACT,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,EACnB,kBAAkB,EAElB,WAAW,EACX,QAAQ,EAGR,gBAAgB,EAChB,mBAAmB,EACnB,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,aAAa,EACb,aAAa,EAEb,SAAS,EACT,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,YAAY,EAEZ,iBAAiB,EACjB,iBAAiB,EACjB,SAAS,EAIT,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,SAAS,EACT,YAAY,EACZ,aAAa,EACb,aAAa,EACb,SAAS,EACT,OAAO,EACP,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,cAAc,EAEd,qBAAqB,EACrB,eAAe,EACf,eAAe,EAEf,aAAa,EACb,WAAW,EACX,aAAa,EACb,UAAU,EAIV,SAAS,EACT,WAAW,EACX,QAAQ,EAER,cAAc,EAEd,aAAa,EACb,iBAAiB,EACjB,UAAU,EAEV,cAAc,EACd,cAAc,EACd,SAAS,EACT,UAAU,EAEV,oBAAoB,EACpB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,qBAAqB,EAErB,YAAY,EACZ,SAAS,EAET,OAAO,EACP,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,EAIb,aAAa,EAIb,eAAe,EACf,eAAe,EACf,UAAU,EAGV,cAAc,GAEf,MAAM,MAAM,CAAC;AAEd,cAAc,gBAAgB,CAAC;AAE/B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,oBAAoB,CAAC;AAC5B,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/nav/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAW,YAAY,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAc,eAAe,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAY,aAAa,EAAE,MAAM,SAAS,CAAC;AAElD,OAAO,aAAa,CAAC;AAErB,eAAO,MAAM,GAAG;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/nav/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAW,YAAY,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAc,eAAe,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAY,aAAa,EAAE,MAAM,SAAS,CAAC;AAElD,OAAO,aAAa,CAAC;AAErB,eAAO,MAAM,GAAG;;WAO62D,CAAC,EAAC,MAAO,GAAG;qJAAh9B,MAAO,GAAG;;;CAHl8B,CAAC;AAEF,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/nav/item.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAEjE,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC;QAC5B,MAAM,EAAE,OAAO,CAAC;QAChB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB,CAAC,CAAC;IACH;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAUD,QAAA,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,EACxC,kFAQG,YAAY,EACf,KAAK,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/nav/item.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAEjE,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC;QAC5B,MAAM,EAAE,OAAO,CAAC;QAChB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB,CAAC,CAAC;IACH;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAUD,QAAA,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,EACxC,kFAQG,YAAY,EACf,KAAK,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,SAgClB,CAAC;AAEF,QAAA,MAAM,OAAO,EAA8B,CAAC,CAAC,SAAS,WAAW,EAC/D,KAAK,EAAE,YAAY,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;CAAE,KACzC,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,CAAC"}
|
|
@@ -1,36 +1,37 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import
|
|
4
|
-
import { useRender as
|
|
5
|
-
import { useCls as
|
|
6
|
-
import { clsx as
|
|
7
|
-
const
|
|
2
|
+
import { jsxs as f, Fragment as c, jsx as n } from "react/jsx-runtime";
|
|
3
|
+
import u, { forwardRef as N, useMemo as x, isValidElement as v } from "react";
|
|
4
|
+
import { useRender as h } from "@base-ui-components/react/use-render";
|
|
5
|
+
import { useCls as I } from "../utils/antdUtils.js";
|
|
6
|
+
import { clsx as R } from "../utils/cn.js";
|
|
7
|
+
const g = (e) => v(e), j = ({
|
|
8
8
|
icon: e,
|
|
9
|
-
active:
|
|
9
|
+
active: a = !1,
|
|
10
10
|
render: m,
|
|
11
|
-
className:
|
|
12
|
-
children:
|
|
13
|
-
changeIconWeightOnActive:
|
|
14
|
-
...
|
|
11
|
+
className: l,
|
|
12
|
+
children: o,
|
|
13
|
+
changeIconWeightOnActive: r = !0,
|
|
14
|
+
...s
|
|
15
15
|
}, d) => {
|
|
16
|
-
const t =
|
|
17
|
-
return
|
|
18
|
-
render: m
|
|
16
|
+
const t = I(), i = x(() => !r || !a || !g(e) ? e : u.cloneElement(e, { weight: "fill" }), [e, r, a]), p = R(t("nav-item"), l);
|
|
17
|
+
return h({
|
|
18
|
+
render: m,
|
|
19
19
|
ref: d,
|
|
20
|
+
defaultTagName: "button",
|
|
20
21
|
props: {
|
|
21
|
-
"data-active":
|
|
22
|
-
"aria-expanded":
|
|
23
|
-
className:
|
|
24
|
-
children: /* @__PURE__ */
|
|
25
|
-
/* @__PURE__ */
|
|
26
|
-
/* @__PURE__ */
|
|
22
|
+
"data-active": a || void 0,
|
|
23
|
+
"aria-expanded": s["aria-expanded"],
|
|
24
|
+
className: p,
|
|
25
|
+
children: /* @__PURE__ */ f(c, { children: [
|
|
26
|
+
/* @__PURE__ */ n("span", { className: t("nav-item-icon"), children: i }),
|
|
27
|
+
/* @__PURE__ */ n("span", { className: t("nav-item-content"), children: o })
|
|
27
28
|
] }),
|
|
28
|
-
...
|
|
29
|
+
...s
|
|
29
30
|
},
|
|
30
|
-
state: { active:
|
|
31
|
+
state: { active: a, icon: e }
|
|
31
32
|
});
|
|
32
|
-
},
|
|
33
|
+
}, F = N(j);
|
|
33
34
|
export {
|
|
34
|
-
|
|
35
|
+
F as NavItem
|
|
35
36
|
};
|
|
36
37
|
//# sourceMappingURL=item.js.map
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 const finalClassName = clsx(cls(\"nav-item\"), className);\n\n return useRender({\n render,\n ref,\n defaultTagName: \"button\",\n props: {\n \"data-active\": active || undefined,\n \"aria-expanded\": rest[\"aria-expanded\"],\n className: finalClassName,\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","finalClassName","clsx","useRender","jsxs","Fragment","jsx","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,EAAA,GAGNC,IAAeC,EAAQ,MACvB,CAACN,KAA4B,CAACJ,KAAU,CAACL,EAAkBI,CAAI,IAC1DA,IAEFY,EAAM,aAAaZ,GAAM,EAAE,QAAQ,QAAQ,GACjD,CAACA,GAAMK,GAA0BJ,CAAM,CAAC,GAErCY,IAAiBC,EAAKN,EAAI,UAAU,GAAGL,CAAS;AAEtD,SAAOY,EAAU;AAAA,IACf,QAAAb;AAAA,IACA,KAAAK;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACL,eAAeN,KAAU;AAAA,MACzB,iBAAiBK,EAAK,eAAe;AAAA,MACrC,WAAWO;AAAA,MACX,UACE,gBAAAG,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWV,EAAI,eAAe,GAAI,UAAAE,GAAa;AAAA,0BACpD,QAAA,EAAK,WAAWF,EAAI,kBAAkB,GAAI,UAAAJ,EAAA,CAAS;AAAA,MAAA,GACtD;AAAA,MAEF,GAAGE;AAAA,IAAA;AAAA,IAEL,OAAO,EAAE,QAAAL,GAAQ,MAAAD,EAAA;AAAA,EAAK,CACvB;AACH,GAEMmB,IAAUC,EAAWrB,CAAW;"}
|
|
@@ -1 +1 @@
|
|
|
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}.ds-nav-small .ds-nav-item .ds-nav-item-icon,.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}.ds-nav-large .ds-nav-item .ds-nav-item-icon,.ds-nav-item.ds-nav-item-large .ds-nav-item-icon{font-size:1.5rem}.ds-nav-large .ds-nav-item .ds-nav-item-content,.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,.ds-nav-item:focus{background-color:var(--ds-color-fill-tertiary);color:var(--ds-color-icon-hover)}.ds-nav-item:focus:not(:focus-visible){outline:none}.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}.ds-nav-small .ds-nav-item .ds-nav-item-icon,.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}.ds-nav-large .ds-nav-item .ds-nav-item-icon,.ds-nav-item.ds-nav-item-large .ds-nav-item-icon{font-size:1.5rem}.ds-nav-large .ds-nav-item .ds-nav-item-content,.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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/tag/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n forwardRef,\n cloneElement,\n isValidElement,\n HTMLAttributes,\n} from \"react\";\nimport { XIcon } from \"@bioturing/assets\";\nimport AntTag, {\n type TagProps as AntTagProps,\n type TagType,\n} from \"antd/es/tag\";\nimport AntCheckableTag, {\n type CheckableTagProps as AntCheckableTagProps,\n} from \"antd/es/tag/CheckableTag\";\nimport { clsx, useCls } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport { TagType };\n\n// Define props interface extending Ant Design's TagProps\nexport interface TagProps extends AntTagProps {\n /**\n * Indicates if the tag is active\n * @default false\n */\n active?: boolean;\n /**\n * Size of the tag\n * @default \"small\"\n */\n size?: \"small\" | \"medium\" | \"large\";\n}\n\nexport interface CheckableTagProps extends AntCheckableTagProps {\n size?: \"small\" | \"medium\" | \"large\";\n}\n\n// Create Tag component\nconst InternalTag = forwardRef<HTMLSpanElement, TagProps>(\n (\n {\n className,\n active = false,\n color,\n style,\n closeIcon,\n closable,\n size = \"small\",\n children,\n icon,\n ...rest\n },\n ref
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/tag/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n forwardRef,\n cloneElement,\n isValidElement,\n HTMLAttributes,\n} from \"react\";\nimport { XIcon } from \"@bioturing/assets\";\nimport AntTag, {\n type TagProps as AntTagProps,\n type TagType,\n} from \"antd/es/tag\";\nimport AntCheckableTag, {\n type CheckableTagProps as AntCheckableTagProps,\n} from \"antd/es/tag/CheckableTag\";\nimport { clsx, useCls } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport { TagType };\n\n// Define props interface extending Ant Design's TagProps\nexport interface TagProps extends AntTagProps {\n /**\n * Indicates if the tag is active\n * @default false\n */\n active?: boolean;\n /**\n * Size of the tag\n * @default \"small\"\n */\n size?: \"small\" | \"medium\" | \"large\";\n}\n\nexport interface CheckableTagProps extends AntCheckableTagProps {\n size?: \"small\" | \"medium\" | \"large\";\n}\n\n// Create Tag component\nconst InternalTag = forwardRef<HTMLSpanElement, TagProps>(\n (\n {\n className,\n active = false,\n color,\n style,\n closeIcon,\n closable,\n size = \"small\",\n children,\n icon,\n ...rest\n },\n ref\n ) => {\n const renderedCloseIcon = <XIcon weight=\"bold\" />;\n const cls = useCls();\n const renderedIcon = isValidElement(icon)\n ? cloneElement<HTMLAttributes<SVGElement>>(icon, {\n className: clsx(\n cls(\"tag-icon\"),\n icon.props &&\n typeof icon.props === \"object\" &&\n \"className\" in icon.props &&\n typeof icon.props.className === \"string\"\n ? icon.props.className\n : \"\"\n ),\n })\n : icon;\n return (\n <AntTag\n ref={ref}\n className={clsx(\n cls(\"tag\"),\n cls(`tag-${size}`),\n !children && cls(\"tag-empty\"),\n className\n )}\n color={color}\n style={style}\n closable={closable}\n closeIcon={closable ? closeIcon || renderedCloseIcon : undefined}\n icon={renderedIcon}\n {...(active ? { \"data-active\": \"true\" } : {})}\n {...rest}\n >\n {children}\n </AntTag>\n );\n }\n);\n\nconst CheckableTag = forwardRef<HTMLSpanElement, CheckableTagProps>(\n ({ className, size = \"small\", children, ...rest }, ref) => {\n const cls = useCls();\n return (\n <AntCheckableTag\n ref={ref}\n className={clsx(\n cls(\"tag\"),\n cls(`tag-${size}`),\n !children && cls(\"tag-empty\"),\n className\n )}\n {...rest}\n >\n {children}\n </AntCheckableTag>\n );\n }\n);\n\nexport const Tag = Object.assign(InternalTag, {\n CheckableTag,\n});\n"],"names":["InternalTag","forwardRef","className","active","color","style","closeIcon","closable","size","children","icon","rest","ref","renderedCloseIcon","jsx","XIcon","cls","useCls","renderedIcon","isValidElement","cloneElement","clsx","AntTag","CheckableTag","AntCheckableTag","Tag"],"mappings":";;;;;;;;;AAyCA,MAAMA,IAAcC;AAAA,EAClB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAoB,gBAAAC,EAACC,GAAA,EAAM,QAAO,OAAA,CAAO,GACzCC,IAAMC,EAAA,GACNC,IAAeC,EAAeT,CAAI,IACpCU,EAAyCV,GAAM;AAAA,MAC7C,WAAWW;AAAA,QACTL,EAAI,UAAU;AAAA,QACdN,EAAK,SACH,OAAOA,EAAK,SAAU,YACtB,eAAeA,EAAK,SACpB,OAAOA,EAAK,MAAM,aAAc,WAC9BA,EAAK,MAAM,YACX;AAAA,MAAA;AAAA,IACN,CACD,IACDA;AACJ,WACE,gBAAAI;AAAA,MAACQ;AAAA,MAAA;AAAA,QACC,KAAAV;AAAA,QACA,WAAWS;AAAA,UACTL,EAAI,KAAK;AAAA,UACTA,EAAI,OAAOR,CAAI,EAAE;AAAA,UACjB,CAACC,KAAYO,EAAI,WAAW;AAAA,UAC5Bd;AAAA,QAAA;AAAA,QAEF,OAAAE;AAAA,QACA,OAAAC;AAAA,QACA,UAAAE;AAAA,QACA,WAAWA,IAAWD,KAAaO,IAAoB;AAAA,QACvD,MAAMK;AAAA,QACL,GAAIf,IAAS,EAAE,eAAe,OAAA,IAAW,CAAA;AAAA,QACzC,GAAGQ;AAAA,QAEH,UAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF,GAEMc,IAAetB;AAAA,EACnB,CAAC,EAAE,WAAAC,GAAW,MAAAM,IAAO,SAAS,UAAAC,GAAU,GAAGE,EAAA,GAAQC,MAAQ;AACzD,UAAMI,IAAMC,EAAA;AACZ,WACE,gBAAAH;AAAA,MAACU;AAAA,MAAA;AAAA,QACC,KAAAZ;AAAA,QACA,WAAWS;AAAA,UACTL,EAAI,KAAK;AAAA,UACTA,EAAI,OAAOR,CAAI,EAAE;AAAA,UACjB,CAACC,KAAYO,EAAI,WAAW;AAAA,UAC5Bd;AAAA,QAAA;AAAA,QAED,GAAGS;AAAA,QAEH,UAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF,GAEagB,IAAM,OAAO,OAAOzB,GAAa;AAAA,EAC5C,cAAAuB;AACF,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tag/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tag/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export interface TagListProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
|
|
2
|
+
/**
|
|
3
|
+
* Tag components to be displayed
|
|
4
|
+
*/
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
/**
|
|
7
|
+
* Maximum number of tags to display before truncating
|
|
8
|
+
* If omitted, will automatically calculate based on container width
|
|
9
|
+
*/
|
|
10
|
+
maxCount?: number;
|
|
11
|
+
/**
|
|
12
|
+
* Custom render function for the overflow tag
|
|
13
|
+
* @param count - Number of hidden tags
|
|
14
|
+
*/
|
|
15
|
+
renderOverflow?: (count: number) => React.ReactNode;
|
|
16
|
+
}
|
|
17
|
+
export declare const TagList: import('react').ForwardRefExoticComponent<TagListProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
18
|
+
//# sourceMappingURL=list.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/tag/list.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/D;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACrD;AAID,eAAO,MAAM,OAAO,yGAiLnB,CAAC"}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs as y, Fragment as U, jsx as a } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef as _, useRef as q, useState as D, Children as H, isValidElement as J, useLayoutEffect as K } from "react";
|
|
4
|
+
import { Tag as x } from "./component.js";
|
|
5
|
+
import { useCls as O } from "../utils/antdUtils.js";
|
|
6
|
+
import { clsx as P } from "../utils/cn.js";
|
|
7
|
+
const I = 16, Q = _(
|
|
8
|
+
({ children: N, maxCount: d, renderOverflow: s, className: j, ...B }, r) => {
|
|
9
|
+
const u = O(), w = q(null), R = q(null), [b, h] = D(null), n = H.toArray(N).filter(
|
|
10
|
+
(t) => J(t)
|
|
11
|
+
);
|
|
12
|
+
K(() => {
|
|
13
|
+
const t = w.current;
|
|
14
|
+
if (!t || n.length === 0) return;
|
|
15
|
+
if (typeof d == "number") {
|
|
16
|
+
h(Math.min(d, n.length));
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
const i = () => {
|
|
20
|
+
const g = R.current;
|
|
21
|
+
if (!g) return;
|
|
22
|
+
const v = t.clientWidth, p = window.getComputedStyle(t), f = parseFloat(p.gap) || 0, C = parseFloat(p.paddingLeft) || 0, L = parseFloat(p.paddingRight) || 0, $ = Array.from(
|
|
23
|
+
g.querySelectorAll(
|
|
24
|
+
"[data-tag-measure-item]"
|
|
25
|
+
)
|
|
26
|
+
), S = (e) => {
|
|
27
|
+
const l = window.getComputedStyle(e), c = parseFloat(l.marginLeft) || 0, G = parseFloat(l.marginRight) || 0;
|
|
28
|
+
return e.getBoundingClientRect().width + c + G;
|
|
29
|
+
}, o = $.map((e) => S(e));
|
|
30
|
+
let A = C + L;
|
|
31
|
+
for (let e = 0; e < o.length; e++)
|
|
32
|
+
A += o[e] + (e > 0 ? f : 0);
|
|
33
|
+
if (A + I <= v) {
|
|
34
|
+
h(o.length);
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
const E = g.querySelector(
|
|
38
|
+
"[data-tag-overflow-measure]"
|
|
39
|
+
), k = E ? S(E) : 0, z = v - C - L - k - f - I;
|
|
40
|
+
let T = 0, V = 0;
|
|
41
|
+
for (let e = 0; e < o.length; e++) {
|
|
42
|
+
const l = o[e], c = T + l + (e > 0 ? f : 0);
|
|
43
|
+
if (c <= z)
|
|
44
|
+
T = c, V++;
|
|
45
|
+
else
|
|
46
|
+
break;
|
|
47
|
+
}
|
|
48
|
+
h(Math.max(0, V));
|
|
49
|
+
};
|
|
50
|
+
window.document.fonts?.ready?.then(i);
|
|
51
|
+
const W = new ResizeObserver(() => {
|
|
52
|
+
window.requestAnimationFrame(i);
|
|
53
|
+
});
|
|
54
|
+
return W.observe(t), () => {
|
|
55
|
+
W.disconnect();
|
|
56
|
+
};
|
|
57
|
+
}, [n, d, s, u]);
|
|
58
|
+
const F = b !== null ? b : n.length, m = n.length - F, M = m > 0;
|
|
59
|
+
return /* @__PURE__ */ y(U, { children: [
|
|
60
|
+
/* @__PURE__ */ y(
|
|
61
|
+
"div",
|
|
62
|
+
{
|
|
63
|
+
ref: R,
|
|
64
|
+
className: u("tag-list"),
|
|
65
|
+
style: {
|
|
66
|
+
visibility: "hidden",
|
|
67
|
+
position: "absolute",
|
|
68
|
+
top: 0,
|
|
69
|
+
left: 0,
|
|
70
|
+
pointerEvents: "none"
|
|
71
|
+
},
|
|
72
|
+
"aria-hidden": "true",
|
|
73
|
+
children: [
|
|
74
|
+
n.map((t, i) => /* @__PURE__ */ a("span", { "data-tag-measure-item": !0, children: t }, i)),
|
|
75
|
+
/* @__PURE__ */ a("span", { "data-tag-overflow-measure": !0, children: s ? s(n.length - 1) : /* @__PURE__ */ a(x, { children: `+${n.length - 1}` }) })
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
),
|
|
79
|
+
/* @__PURE__ */ y(
|
|
80
|
+
"div",
|
|
81
|
+
{
|
|
82
|
+
ref: (t) => {
|
|
83
|
+
w.current = t, typeof r == "function" ? r(t) : r && (r.current = t);
|
|
84
|
+
},
|
|
85
|
+
className: P(u("tag-list"), j),
|
|
86
|
+
...B,
|
|
87
|
+
children: [
|
|
88
|
+
n.slice(0, F).map((t, i) => /* @__PURE__ */ a("span", { "data-tag-item": !0, children: t }, i)),
|
|
89
|
+
M && /* @__PURE__ */ a("span", { "data-tag-item": !0, children: s ? s(m) : /* @__PURE__ */ a(x, { children: `+${m}` }) })
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
)
|
|
93
|
+
] });
|
|
94
|
+
}
|
|
95
|
+
);
|
|
96
|
+
Q.displayName = "TagList";
|
|
97
|
+
export {
|
|
98
|
+
Q as TagList
|
|
99
|
+
};
|
|
100
|
+
//# sourceMappingURL=list.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"list.js","sources":["../../../src/components/tag/list.tsx"],"sourcesContent":["\"use client\";\nimport {\n forwardRef,\n useLayoutEffect,\n useRef,\n useState,\n Children,\n isValidElement,\n ReactElement,\n} from \"react\";\nimport { useCls, clsx } from \"../utils\";\nimport { Tag } from \"./component\";\n\nexport interface TagListProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\"> {\n /**\n * Tag components to be displayed\n */\n children: React.ReactNode;\n /**\n * Maximum number of tags to display before truncating\n * If omitted, will automatically calculate based on container width\n */\n maxCount?: number;\n /**\n * Custom render function for the overflow tag\n * @param count - Number of hidden tags\n */\n renderOverflow?: (count: number) => React.ReactNode;\n}\n\nconst OVERFLOW_BUFFER = 16;\n\nexport const TagList = forwardRef<HTMLDivElement, TagListProps>(\n ({ children, maxCount, renderOverflow, className, ...rest }, ref) => {\n const cls = useCls();\n const containerRef = useRef<HTMLDivElement>(null);\n const measureContainerRef = useRef<HTMLDivElement>(null);\n const [visibleCount, setVisibleCount] = useState<number | null>(null);\n\n const childArray = Children.toArray(children).filter((child) =>\n isValidElement(child)\n ) as ReactElement[];\n\n useLayoutEffect(() => {\n const container = containerRef.current;\n if (!container || childArray.length === 0) return;\n\n // If maxCount is specified, use it directly\n if (typeof maxCount === \"number\") {\n setVisibleCount(Math.min(maxCount, childArray.length));\n return;\n }\n\n const calculateVisibleTags = () => {\n const measureContainer = measureContainerRef.current;\n if (!measureContainer) return;\n\n const containerWidth = container.clientWidth;\n const containerStyle = window.getComputedStyle(container);\n const gap = parseFloat(containerStyle.gap) || 0;\n const paddingLeft = parseFloat(containerStyle.paddingLeft) || 0;\n const paddingRight = parseFloat(containerStyle.paddingRight) || 0;\n\n // Get all tags from measurement container\n const items = Array.from(\n measureContainer.querySelectorAll<HTMLElement>(\n \"[data-tag-measure-item]\"\n )\n );\n\n // Helper to get full item width including margins\n const getItemFullWidth = (item: HTMLElement) => {\n const style = window.getComputedStyle(item);\n const marginLeft = parseFloat(style.marginLeft) || 0;\n const marginRight = parseFloat(style.marginRight) || 0;\n const width = item.getBoundingClientRect().width;\n return width + marginLeft + marginRight;\n };\n\n // Measure all tag widths (always fresh from DOM)\n const itemWidths = items.map((item) => getItemFullWidth(item));\n\n // Check if all items fit first\n let allItemsWidth = paddingLeft + paddingRight;\n for (let i = 0; i < itemWidths.length; i++) {\n allItemsWidth += itemWidths[i] + (i > 0 ? gap : 0);\n }\n\n if (allItemsWidth + OVERFLOW_BUFFER <= containerWidth) {\n setVisibleCount(itemWidths.length);\n return;\n }\n\n // Measure overflow tag width from the measurement container\n const overflowItem = measureContainer.querySelector<HTMLElement>(\n \"[data-tag-overflow-measure]\"\n );\n const overflowTagWidth = overflowItem\n ? getItemFullWidth(overflowItem)\n : 0;\n\n // Calculate available width accounting for overflow tag\n const availableWidth =\n containerWidth -\n paddingLeft -\n paddingRight -\n overflowTagWidth -\n gap -\n OVERFLOW_BUFFER;\n\n let totalWidth = 0;\n let count = 0;\n\n for (let i = 0; i < itemWidths.length; i++) {\n const itemWidth = itemWidths[i];\n const widthWithGap = totalWidth + itemWidth + (i > 0 ? gap : 0);\n\n if (widthWithGap <= availableWidth) {\n totalWidth = widthWithGap;\n count++;\n } else {\n break;\n }\n }\n\n setVisibleCount(Math.max(0, count));\n };\n\n // Wait for fonts to load\n window.document.fonts?.ready?.then(calculateVisibleTags);\n\n // Observe container resize\n const observer = new ResizeObserver(() => {\n window.requestAnimationFrame(calculateVisibleTags);\n });\n\n observer.observe(container);\n\n return () => {\n observer.disconnect();\n };\n }, [childArray, maxCount, renderOverflow, cls]);\n\n const displayCount =\n visibleCount !== null ? visibleCount : childArray.length;\n const hiddenCount = childArray.length - displayCount;\n const showOverflow = hiddenCount > 0;\n\n return (\n <>\n {/* Hidden measurement container with all tags */}\n <div\n ref={measureContainerRef}\n className={cls(\"tag-list\")}\n style={{\n visibility: \"hidden\",\n position: \"absolute\",\n top: 0,\n left: 0,\n pointerEvents: \"none\",\n }}\n aria-hidden=\"true\"\n >\n {childArray.map((child, index) => (\n <span key={index} data-tag-measure-item>\n {child}\n </span>\n ))}\n {/* Always render overflow tag for measurement */}\n <span data-tag-overflow-measure>\n {renderOverflow ? (\n renderOverflow(childArray.length - 1)\n ) : (\n <Tag>{`+${childArray.length - 1}`}</Tag>\n )}\n </span>\n </div>\n\n {/* Visible container */}\n <div\n ref={(node) => {\n containerRef.current = node;\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n ref.current = node;\n }\n }}\n className={clsx(cls(\"tag-list\"), className)}\n {...rest}\n >\n {childArray.slice(0, displayCount).map((child, index) => (\n <span key={index} data-tag-item>\n {child}\n </span>\n ))}\n {showOverflow && (\n <span data-tag-item>\n {renderOverflow ? (\n renderOverflow(hiddenCount)\n ) : (\n <Tag>{`+${hiddenCount}`}</Tag>\n )}\n </span>\n )}\n </div>\n </>\n );\n }\n);\n\nTagList.displayName = \"TagList\";\n"],"names":["OVERFLOW_BUFFER","TagList","forwardRef","children","maxCount","renderOverflow","className","rest","ref","cls","useCls","containerRef","useRef","measureContainerRef","visibleCount","setVisibleCount","useState","childArray","Children","child","isValidElement","useLayoutEffect","container","calculateVisibleTags","measureContainer","containerWidth","containerStyle","gap","paddingLeft","paddingRight","items","getItemFullWidth","item","style","marginLeft","marginRight","itemWidths","allItemsWidth","i","overflowItem","overflowTagWidth","availableWidth","totalWidth","count","itemWidth","widthWithGap","observer","displayCount","hiddenCount","showOverflow","jsxs","Fragment","index","jsx","Tag","node","clsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-tag{display:inline-flex;align-items:center;font-size:var(--ds-font-size-sm);padding:.0625rem .4375rem}.ds-tag[data-active]{background-color:var(--ds-color-primary-bg);border-color:var(--ds-color-primary);color:var(--ds-color-primary)}.ds-tag .ds-tag-close-icon{color:var(--ds-color-icon)}.ds-tag.ds-tag-medium{padding:.1875rem .4375rem}.ds-tag.ds-tag-large{font-size:var(--ds-font-size);padding:.1875rem .4375rem}.ds-tag:is(.ds-tag-magenta,.ds-tag-red,.ds-tag-volcano,.ds-tag-orange,.ds-tag-gold,.ds-tag-lime,.ds-tag-green,.ds-tag-cyan,.ds-tag-blue,.ds-tag-geekblue,.ds-tag-purple) .ds-tag-close-icon{color:currentColor}.ds-tag.ds-tag-empty .ds-tag-close-icon{margin-left:0}.ds-tag .ds-tag-icon{margin-right:.25rem}.ds-tag>span:not(.ds-tag-icon,.ds-tag-close-icon){flex-shrink:1;min-height:0;min-width:0;flex-grow:1;flex-basis:max-content}}
|
|
1
|
+
@layer components{.ds-tag{display:inline-flex;align-items:center;font-size:var(--ds-font-size-sm);padding:.0625rem .4375rem}.ds-tag[data-active]{background-color:var(--ds-color-primary-bg);border-color:var(--ds-color-primary);color:var(--ds-color-primary)}.ds-tag .ds-tag-close-icon{color:var(--ds-color-icon)}.ds-tag.ds-tag-medium{padding:.1875rem .4375rem}.ds-tag.ds-tag-large{font-size:var(--ds-font-size);padding:.1875rem .4375rem}.ds-tag:is(.ds-tag-magenta,.ds-tag-red,.ds-tag-volcano,.ds-tag-orange,.ds-tag-gold,.ds-tag-lime,.ds-tag-green,.ds-tag-cyan,.ds-tag-blue,.ds-tag-geekblue,.ds-tag-purple) .ds-tag-close-icon{color:currentColor}.ds-tag.ds-tag-empty .ds-tag-close-icon{margin-left:0}.ds-tag .ds-tag-icon{margin-right:.25rem}.ds-tag>span:not(.ds-tag-icon,.ds-tag-close-icon){flex-shrink:1;min-height:0;min-width:0;flex-grow:1;flex-basis:max-content}.ds-tag-list{display:flex;flex-wrap:nowrap;overflow:hidden;align-items:center}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/components/utils/client.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,YAAY,CAAC"}
|
|
1
|
+
{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/components/utils/client.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6BAA6B,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Creates a synthetic React MouseEvent for programmatic event simulation
|
|
4
|
+
*
|
|
5
|
+
* References:
|
|
6
|
+
* - React SyntheticEvent: https://react.dev/reference/react-dom/components/common#react-event-object
|
|
7
|
+
* - MouseEvent Web API: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
|
|
8
|
+
* - React TypeScript types: @types/react package
|
|
9
|
+
* - Dispatch events in tests: https://react.dev/reference/react/act#dispatching-events-in-tests
|
|
10
|
+
*/
|
|
11
|
+
declare function createSyntheticClickEvent(target: HTMLElement | null): React.MouseEvent<HTMLElement, MouseEvent>;
|
|
12
|
+
export default createSyntheticClickEvent;
|
|
13
|
+
//# sourceMappingURL=createSyntheticClickEvent.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createSyntheticClickEvent.d.ts","sourceRoot":"","sources":["../../../src/components/utils/createSyntheticClickEvent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;GAQG;AACH,iBAAS,yBAAyB,CAChC,MAAM,EAAE,WAAW,GAAG,IAAI,GACzB,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,CAmE3C;AAED,eAAe,yBAAyB,CAAC"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
function i(t) {
|
|
2
|
+
const e = new MouseEvent("click", {
|
|
3
|
+
bubbles: !0,
|
|
4
|
+
cancelable: !0,
|
|
5
|
+
view: window,
|
|
6
|
+
detail: 1
|
|
7
|
+
});
|
|
8
|
+
return {
|
|
9
|
+
nativeEvent: e,
|
|
10
|
+
currentTarget: t,
|
|
11
|
+
target: t,
|
|
12
|
+
bubbles: !0,
|
|
13
|
+
cancelable: !0,
|
|
14
|
+
defaultPrevented: !1,
|
|
15
|
+
eventPhase: e.eventPhase,
|
|
16
|
+
isTrusted: !0,
|
|
17
|
+
timeStamp: e.timeStamp,
|
|
18
|
+
type: "click",
|
|
19
|
+
// UIEvent properties
|
|
20
|
+
detail: 1,
|
|
21
|
+
view: window,
|
|
22
|
+
// Type cast to avoid AbstractView mismatch
|
|
23
|
+
// Event methods
|
|
24
|
+
preventDefault: function() {
|
|
25
|
+
e.preventDefault();
|
|
26
|
+
},
|
|
27
|
+
isDefaultPrevented: function() {
|
|
28
|
+
return e.defaultPrevented;
|
|
29
|
+
},
|
|
30
|
+
stopPropagation: function() {
|
|
31
|
+
e.stopPropagation();
|
|
32
|
+
},
|
|
33
|
+
isPropagationStopped: function() {
|
|
34
|
+
return !1;
|
|
35
|
+
},
|
|
36
|
+
persist: function() {
|
|
37
|
+
},
|
|
38
|
+
// MouseEvent specific properties
|
|
39
|
+
altKey: !1,
|
|
40
|
+
button: 0,
|
|
41
|
+
buttons: 0,
|
|
42
|
+
clientX: 0,
|
|
43
|
+
clientY: 0,
|
|
44
|
+
ctrlKey: !1,
|
|
45
|
+
metaKey: !1,
|
|
46
|
+
movementX: 0,
|
|
47
|
+
movementY: 0,
|
|
48
|
+
pageX: 0,
|
|
49
|
+
pageY: 0,
|
|
50
|
+
relatedTarget: null,
|
|
51
|
+
screenX: 0,
|
|
52
|
+
screenY: 0,
|
|
53
|
+
shiftKey: !1,
|
|
54
|
+
getModifierState: function(a) {
|
|
55
|
+
return !1;
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
export {
|
|
60
|
+
i as default
|
|
61
|
+
};
|
|
62
|
+
//# sourceMappingURL=createSyntheticClickEvent.js.map
|