@oneplatformdev/ui 0.1.99-beta.25 → 0.1.99-beta.250
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/Accordion/Accordion.d.ts +1 -1
- package/Accordion/Accordion.d.ts.map +1 -1
- package/Accordion/Accordion.js +48 -26
- package/Accordion/Accordion.js.map +1 -1
- package/AlertDialog/AlertDialog.stories.js +3 -2
- package/AlertDialog/AlertDialog.stories.js.map +1 -1
- package/AlertDialog/AlertDialogRoot.d.ts.map +1 -1
- package/AlertDialog/AlertDialogRoot.js +26 -24
- package/AlertDialog/AlertDialogRoot.js.map +1 -1
- package/Button/Button.d.ts.map +1 -1
- package/Button/Button.js +43 -43
- package/Button/Button.js.map +1 -1
- package/Button/Button.stories.js +15 -12
- package/Button/Button.stories.js.map +1 -1
- package/Button/Button.utils.d.ts +3 -0
- package/Button/Button.utils.d.ts.map +1 -0
- package/Button/Button.utils.js +14 -0
- package/Button/Button.utils.js.map +1 -0
- package/Button/buttonVariants.d.ts +2 -2
- package/Button/buttonVariants.d.ts.map +1 -1
- package/Button/buttonVariants.js +38 -6
- package/Button/buttonVariants.js.map +1 -1
- package/Button/index.d.ts +1 -0
- package/Button/index.d.ts.map +1 -1
- package/Button/index.js +8 -6
- package/Button/index.js.map +1 -1
- package/ButtonIcon/ButtonIcon.d.ts.map +1 -1
- package/ButtonIcon/ButtonIcon.js +41 -39
- package/ButtonIcon/ButtonIcon.js.map +1 -1
- package/ButtonIcon/ButtonIcon.stories.js +35 -33
- package/ButtonIcon/ButtonIcon.stories.js.map +1 -1
- package/ButtonIcon/buttonIconVariants.d.ts +1 -1
- package/ButtonIcon/buttonIconVariants.d.ts.map +1 -1
- package/ButtonIcon/buttonIconVariants.js +3 -2
- package/ButtonIcon/buttonIconVariants.js.map +1 -1
- package/CHANGELOG.md +1431 -0
- package/Calendar/Calendar.js +5 -4
- package/Calendar/Calendar.js.map +1 -1
- package/Card/Card.d.ts.map +1 -1
- package/Card/Card.js +22 -21
- package/Card/Card.js.map +1 -1
- package/Checkbox/Checkbox.d.ts.map +1 -1
- package/Checkbox/Checkbox.js +36 -34
- package/Checkbox/Checkbox.js.map +1 -1
- package/Checkbox/Checkbox.stories.js +108 -0
- package/Checkbox/Checkbox.stories.js.map +1 -0
- package/Checkbox/Checkbox.types.d.ts +2 -1
- package/Checkbox/Checkbox.types.d.ts.map +1 -1
- package/Combobox/Combobox.d.ts +4 -2
- package/Combobox/Combobox.d.ts.map +1 -1
- package/Combobox/Combobox.js +183 -194
- package/Combobox/Combobox.js.map +1 -1
- package/Combobox/Combobox.stories.js +174 -73
- package/Combobox/Combobox.stories.js.map +1 -1
- package/Combobox/Combobox.types.d.ts +68 -24
- package/Combobox/Combobox.types.d.ts.map +1 -1
- package/Combobox/Combobox.types.js +4 -1
- package/Combobox/Combobox.types.js.map +1 -1
- package/Combobox/ComboboxOptionItem.d.ts +5 -3
- package/Combobox/ComboboxOptionItem.d.ts.map +1 -1
- package/Combobox/ComboboxOptionItem.js +79 -23
- package/Combobox/ComboboxOptionItem.js.map +1 -1
- package/Combobox/ComboboxRenderContent.d.ts +23 -0
- package/Combobox/ComboboxRenderContent.d.ts.map +1 -0
- package/Combobox/ComboboxRenderContent.js +117 -0
- package/Combobox/ComboboxRenderContent.js.map +1 -0
- package/Combobox/ComboboxRenderOptions.d.ts +4 -0
- package/Combobox/ComboboxRenderOptions.d.ts.map +1 -0
- package/Combobox/ComboboxRenderOptions.js +53 -0
- package/Combobox/ComboboxRenderOptions.js.map +1 -0
- package/Combobox/ComboboxRenderTrigger.d.ts +18 -0
- package/Combobox/ComboboxRenderTrigger.d.ts.map +1 -0
- package/Combobox/ComboboxRenderTrigger.js +120 -0
- package/Combobox/ComboboxRenderTrigger.js.map +1 -0
- package/Command/Command.d.ts +6 -1
- package/Command/Command.d.ts.map +1 -1
- package/Command/Command.js +61 -43
- package/Command/Command.js.map +1 -1
- package/ContextPopover/ContextDropdownMenu.d.ts +12 -0
- package/ContextPopover/ContextDropdownMenu.d.ts.map +1 -0
- package/ContextPopover/ContextDropdownMenu.js +41 -0
- package/ContextPopover/ContextDropdownMenu.js.map +1 -0
- package/ContextPopover/ContextPopover.d.ts +12 -0
- package/ContextPopover/ContextPopover.d.ts.map +1 -0
- package/ContextPopover/ContextPopover.js +34 -0
- package/ContextPopover/ContextPopover.js.map +1 -0
- package/ContextPopover/index.d.ts +4 -0
- package/ContextPopover/index.d.ts.map +1 -0
- package/ContextPopover/index.js +9 -0
- package/ContextPopover/index.js.map +1 -0
- package/ContextPopover/useContextPopoverHandler.d.ts +14 -0
- package/ContextPopover/useContextPopoverHandler.d.ts.map +1 -0
- package/ContextPopover/useContextPopoverHandler.js +21 -0
- package/ContextPopover/useContextPopoverHandler.js.map +1 -0
- package/DataTable/DataTable.js +16 -15
- package/DataTable/DataTable.js.map +1 -1
- package/Dialog/Dialog.d.ts +4 -1
- package/Dialog/Dialog.d.ts.map +1 -1
- package/Dialog/Dialog.js +84 -41
- package/Dialog/Dialog.js.map +1 -1
- package/Dialog/Dialog.stories.js +109 -0
- package/Dialog/Dialog.stories.js.map +1 -0
- package/Dialog/Dialog.types.d.ts +4 -0
- package/Dialog/Dialog.types.d.ts.map +1 -0
- package/Dialog/Dialog.types.js +2 -0
- package/Dialog/Dialog.types.js.map +1 -0
- package/Dialog/index.d.ts +1 -0
- package/Dialog/index.d.ts.map +1 -1
- package/Dialog/useDialogClosePosition.d.ts +11 -0
- package/Dialog/useDialogClosePosition.d.ts.map +1 -0
- package/Dialog/useDialogClosePosition.js +50 -0
- package/Dialog/useDialogClosePosition.js.map +1 -0
- package/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/DropdownMenu/DropdownMenu.js +33 -20
- package/DropdownMenu/DropdownMenu.js.map +1 -1
- package/Dropzone/Dropzone.d.ts.map +1 -1
- package/Dropzone/Dropzone.js +46 -28
- package/Dropzone/Dropzone.js.map +1 -1
- package/Dropzone/Dropzone.stories.js +100 -0
- package/Dropzone/Dropzone.stories.js.map +1 -0
- package/Dropzone/Dropzone.types.js +6 -6
- package/Dropzone/Dropzone.types.js.map +1 -1
- package/Form/FormRenderControl.d.ts +1 -1
- package/Form/FormRenderControl.d.ts.map +1 -1
- package/Form/FormRenderControl.js +55 -14
- package/Form/FormRenderControl.js.map +1 -1
- package/Form/FormRenderControl.types.d.ts +6 -2
- package/Form/FormRenderControl.types.d.ts.map +1 -1
- package/FormCombobox/FormCombobox.d.ts +4 -2
- package/FormCombobox/FormCombobox.d.ts.map +1 -1
- package/FormCombobox/FormCombobox.js +30 -17
- package/FormCombobox/FormCombobox.js.map +1 -1
- package/FormCombobox/FormCombobox.types.d.ts +6 -2
- package/FormCombobox/FormCombobox.types.d.ts.map +1 -1
- package/FormDatePicker/FormDatePicker.d.ts.map +1 -1
- package/FormDatePicker/FormDatePicker.js +18 -16
- package/FormDatePicker/FormDatePicker.js.map +1 -1
- package/FormDropzone/FormDropzone.d.ts.map +1 -1
- package/FormDropzone/FormDropzone.js +11 -9
- package/FormDropzone/FormDropzone.js.map +1 -1
- package/FormInput/FormInput.d.ts.map +1 -1
- package/FormInput/FormInput.js +47 -27
- package/FormInput/FormInput.js.map +1 -1
- package/FormInput/FormInput.stories.js +61 -0
- package/FormInput/FormInput.stories.js.map +1 -0
- package/FormInput/FormInput.types.d.ts +1 -0
- package/FormInput/FormInput.types.d.ts.map +1 -1
- package/FormSelect/FormSelect.d.ts.map +1 -1
- package/FormSelect/FormSelect.js +21 -17
- package/FormSelect/FormSelect.js.map +1 -1
- package/FormTextarea/FormTextarea.d.ts.map +1 -1
- package/FormTextarea/FormTextarea.js +15 -12
- package/FormTextarea/FormTextarea.js.map +1 -1
- package/InfoBlock/InfoBlock.d.ts +7 -0
- package/InfoBlock/InfoBlock.d.ts.map +1 -0
- package/InfoBlock/InfoBlock.js +28 -0
- package/InfoBlock/InfoBlock.js.map +1 -0
- package/InfoBlock/InfoBlock.stories.js +50 -0
- package/InfoBlock/InfoBlock.stories.js.map +1 -0
- package/InfoBlock/InfoBlock.types.d.ts +9 -0
- package/InfoBlock/InfoBlock.types.d.ts.map +1 -0
- package/InfoBlock/InfoBlock.types.js +2 -0
- package/InfoBlock/InfoBlock.types.js.map +1 -0
- package/InfoBlock/index.d.ts +3 -0
- package/InfoBlock/index.d.ts.map +1 -0
- package/InfoBlock/index.js +5 -0
- package/InfoBlock/index.js.map +1 -0
- package/InfoBlock/infoBlockVariants.d.ts +6 -0
- package/InfoBlock/infoBlockVariants.d.ts.map +1 -0
- package/InfoBlock/infoBlockVariants.js +27 -0
- package/InfoBlock/infoBlockVariants.js.map +1 -0
- package/Input/Input.d.ts.map +1 -1
- package/Input/Input.js +65 -51
- package/Input/Input.js.map +1 -1
- package/Input/Input.stories.js +154 -0
- package/Input/Input.stories.js.map +1 -0
- package/Input/Input.types.d.ts +1 -0
- package/Input/Input.types.d.ts.map +1 -1
- package/LoadingMask/LoadingMask.d.ts +1 -2
- package/LoadingMask/LoadingMask.d.ts.map +1 -1
- package/LoadingMask/LoadingMask.js +8 -8
- package/LoadingMask/LoadingMask.js.map +1 -1
- package/LoadingMask/LoadingMask.types.d.ts +1 -0
- package/LoadingMask/LoadingMask.types.d.ts.map +1 -1
- package/Popover/Popover.d.ts.map +1 -1
- package/Popover/Popover.js +9 -5
- package/Popover/Popover.js.map +1 -1
- package/ScrollArea/ScrollArea.d.ts +5 -1
- package/ScrollArea/ScrollArea.d.ts.map +1 -1
- package/ScrollArea/ScrollArea.js +23 -17
- package/ScrollArea/ScrollArea.js.map +1 -1
- package/Search/Search.d.ts.map +1 -1
- package/Search/Search.js +40 -31
- package/Search/Search.js.map +1 -1
- package/Select/Select.d.ts.map +1 -1
- package/Select/Select.js +53 -48
- package/Select/Select.js.map +1 -1
- package/Select/Select.types.d.ts +4 -0
- package/Select/Select.types.d.ts.map +1 -1
- package/Select/SelectRoot.js +6 -6
- package/Select/SelectRoot.js.map +1 -1
- package/Switch/Switch.d.ts +1 -1
- package/Switch/Switch.d.ts.map +1 -1
- package/Switch/Switch.js +19 -9
- package/Switch/Switch.js.map +1 -1
- package/Switch/Switch.stories.js +62 -0
- package/Switch/Switch.stories.js.map +1 -0
- package/TablePagination/TablePagination.js +9 -8
- package/TablePagination/TablePagination.js.map +1 -1
- package/Textarea/Textarea.d.ts.map +1 -1
- package/Textarea/Textarea.js +50 -45
- package/Textarea/Textarea.js.map +1 -1
- package/Textarea/Textarea.types.d.ts +3 -1
- package/Textarea/Textarea.types.d.ts.map +1 -1
- package/Toast/Toast.d.ts +1 -1
- package/Toast/toastVariants.d.ts +1 -1
- package/Tooltip/Tooltip.d.ts.map +1 -1
- package/Tooltip/Tooltip.js +51 -32
- package/Tooltip/Tooltip.js.map +1 -1
- package/Tooltip/Tooltip.types.d.ts +10 -0
- package/Tooltip/Tooltip.types.d.ts.map +1 -1
- package/Tooltip/tooltipVariants.d.ts +4 -0
- package/Tooltip/tooltipVariants.d.ts.map +1 -0
- package/Tooltip/tooltipVariants.js +22 -0
- package/Tooltip/tooltipVariants.js.map +1 -0
- package/index.d.ts +2 -0
- package/index.d.ts.map +1 -1
- package/index.js +342 -332
- package/index.js.map +1 -1
- package/package.json +6 -5
- package/Combobox/ComboboxOptions.d.ts +0 -4
- package/Combobox/ComboboxOptions.d.ts.map +0 -1
- package/Combobox/ComboboxOptions.js +0 -65
- package/Combobox/ComboboxOptions.js.map +0 -1
|
@@ -1,38 +1,94 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { cn as
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
import { jsxs as h, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { CommandItem as y } from "../Command/Command.js";
|
|
3
|
+
import { DEFAULT_COMBOBOX_TYPE as b } from "./Combobox.types.js";
|
|
4
|
+
import { ChevronRightIcon as g, CheckIcon as N } from "lucide-react";
|
|
5
|
+
import { cn as r } from "@oneplatformdev/utils";
|
|
6
|
+
import { Checkbox as x } from "../Checkbox/Checkbox.js";
|
|
7
|
+
import { ButtonIcon as D } from "../ButtonIcon/ButtonIcon.js";
|
|
8
|
+
import "../ButtonIcon/buttonIconVariants.js";
|
|
9
|
+
const k = 24, C = 8, E = (i) => i ? Math.max(i - 1, 0) * k - C : 0, B = (i) => {
|
|
10
|
+
const {
|
|
11
|
+
type: c = b,
|
|
12
|
+
expanded: m,
|
|
13
|
+
option: e,
|
|
14
|
+
onSelect: v,
|
|
15
|
+
value: l = "",
|
|
16
|
+
deep: t = 0,
|
|
17
|
+
onCollapseToggle: s,
|
|
18
|
+
defaultNodeDisabled: p,
|
|
19
|
+
defaultNodeMatched: d,
|
|
20
|
+
defaultNodeMuted: u,
|
|
21
|
+
defaultNodeInteractive: o
|
|
22
|
+
} = i, f = Array.isArray(l) ? l.includes(e.value) : l === e.value;
|
|
23
|
+
return /* @__PURE__ */ h(
|
|
24
|
+
y,
|
|
10
25
|
{
|
|
11
|
-
ref: n,
|
|
12
26
|
value: e.value,
|
|
27
|
+
"data-matched": e.matched ?? !0,
|
|
13
28
|
onSelect: () => {
|
|
14
|
-
|
|
29
|
+
if (!(typeof o == "function" ? o(e, t) : o ?? !0)) return s?.();
|
|
30
|
+
v?.(e);
|
|
15
31
|
},
|
|
32
|
+
onClick: (a) => {
|
|
33
|
+
(typeof o == "function" ? o(e, t) : o ?? !0) || (a?.preventDefault(), a?.stopPropagation());
|
|
34
|
+
},
|
|
35
|
+
className: r("py-0 gap-0", t && "pl-0"),
|
|
16
36
|
style: {
|
|
17
|
-
|
|
37
|
+
"--deep-space": `${E(t)}px`
|
|
18
38
|
},
|
|
39
|
+
disabled: typeof p == "function" ? p(e, t) : p ?? !1,
|
|
19
40
|
children: [
|
|
20
|
-
|
|
21
|
-
|
|
41
|
+
!!t && /* @__PURE__ */ n(
|
|
42
|
+
"div",
|
|
43
|
+
{
|
|
44
|
+
style: { paddingLeft: "var(--deep-space)" },
|
|
45
|
+
className: "relative box-border min-w-10 h-10",
|
|
46
|
+
onClick: (a) => {
|
|
47
|
+
s && (a?.preventDefault(), a?.stopPropagation(), s?.());
|
|
48
|
+
},
|
|
49
|
+
children: /* @__PURE__ */ n("div", { className: "w-10 aspect-square shrink-0", children: s && /* @__PURE__ */ n(
|
|
50
|
+
D,
|
|
51
|
+
{
|
|
52
|
+
type: "button",
|
|
53
|
+
variant: "ghost",
|
|
54
|
+
color: "secondary",
|
|
55
|
+
className: r(
|
|
56
|
+
"bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent"
|
|
57
|
+
),
|
|
58
|
+
icon: /* @__PURE__ */ n(
|
|
59
|
+
g,
|
|
60
|
+
{
|
|
61
|
+
strokeWidth: 2,
|
|
62
|
+
className: r(
|
|
63
|
+
"text-[#06080D]",
|
|
64
|
+
"transition-transform duration-200",
|
|
65
|
+
m && "rotate-90"
|
|
66
|
+
)
|
|
67
|
+
}
|
|
68
|
+
)
|
|
69
|
+
}
|
|
70
|
+
) })
|
|
71
|
+
}
|
|
72
|
+
),
|
|
73
|
+
c === "multi" && /* @__PURE__ */ n(x, { checked: f, className: "mr-2 shrink-0" }),
|
|
74
|
+
/* @__PURE__ */ n(
|
|
22
75
|
"span",
|
|
23
76
|
{
|
|
24
|
-
className:
|
|
25
|
-
"overflow-hidden whitespace-wrap text-ellipsis line-clamp-2"
|
|
77
|
+
className: r(
|
|
78
|
+
"overflow-hidden whitespace-wrap text-ellipsis line-clamp-2 grow",
|
|
79
|
+
(typeof d == "function" ? d(e, t) : d ?? !1) && "font-bold",
|
|
80
|
+
(typeof u == "function" ? u(e, t) : u ?? !1) && "opacity-60",
|
|
81
|
+
!(typeof o == "function" ? o(e, t) : o ?? !0) && "pointer-events-none"
|
|
26
82
|
),
|
|
27
83
|
children: e.label
|
|
28
84
|
}
|
|
29
85
|
),
|
|
30
|
-
/* @__PURE__ */
|
|
31
|
-
|
|
86
|
+
c === "single" && /* @__PURE__ */ n(
|
|
87
|
+
N,
|
|
32
88
|
{
|
|
33
|
-
className:
|
|
34
|
-
"ml-
|
|
35
|
-
|
|
89
|
+
className: r(
|
|
90
|
+
"ml-2 shrink-0",
|
|
91
|
+
f ? "opacity-100" : "opacity-0"
|
|
36
92
|
)
|
|
37
93
|
}
|
|
38
94
|
)
|
|
@@ -40,8 +96,8 @@ const u = 8, C = c((i, n) => {
|
|
|
40
96
|
},
|
|
41
97
|
e.value
|
|
42
98
|
);
|
|
43
|
-
}
|
|
99
|
+
};
|
|
44
100
|
export {
|
|
45
|
-
|
|
101
|
+
B as ComboboxOptionItem
|
|
46
102
|
};
|
|
47
103
|
//# sourceMappingURL=ComboboxOptionItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxOptionItem.js","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"ComboboxOptionItem.js","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"sourcesContent":["import { CSSProperties, PropsWithChildren } from 'react';\nimport { CommandItem } from '../Command';\nimport { DEFAULT_COMBOBOX_TYPE, IComboboxOptionsNodeProps } from './Combobox.types';\nimport { CheckIcon, ChevronRightIcon } from 'lucide-react';\nimport { cn } from '@oneplatformdev/utils';\nimport { Checkbox } from \"../Checkbox\";\nimport { ButtonIcon } from \"../ButtonIcon\";\n\nconst DEEP_OFFSET = 24;\nconst DEEP_PADDING_DELTA = 8;\nconst calcDeepSpace = (deep: number) => {\n if(!deep) return 0;\n const space = Math.max(deep - 1, 0) * DEEP_OFFSET;\n return space - DEEP_PADDING_DELTA;\n}\n\nexport const ComboboxOptionItem = <Data extends object>(\n props: PropsWithChildren<IComboboxOptionsNodeProps<Data>> & {\n onCollapseToggle?: () => void;\n expanded?: boolean;\n }\n) => {\n const {\n type = DEFAULT_COMBOBOX_TYPE,\n expanded,\n option,\n onSelect,\n value = '',\n deep = 0,\n onCollapseToggle,\n defaultNodeDisabled,\n defaultNodeMatched,\n defaultNodeMuted,\n defaultNodeInteractive,\n } = props;\n\n const isSelected = Array.isArray(value)\n ? value.includes(option.value)\n : value === option.value;\n\n return (\n <CommandItem\n key={option.value}\n value={option.value}\n data-matched={option.matched ?? true}\n onSelect={() => {\n const interactive = typeof defaultNodeInteractive === \"function\"\n ? defaultNodeInteractive(option, deep)\n : defaultNodeInteractive ?? true\n if(!interactive) return onCollapseToggle?.();\n onSelect?.(option);\n }}\n onClick={(e) => {\n const interactive = typeof defaultNodeInteractive === \"function\"\n ? defaultNodeInteractive(option, deep)\n : defaultNodeInteractive ?? true\n\n if(!interactive) {\n e?.preventDefault();\n e?.stopPropagation();\n }\n }}\n className={cn('py-0 gap-0', deep && 'pl-0')}\n style={{\n '--deep-space': `${calcDeepSpace(deep)}px`,\n } as CSSProperties}\n disabled={typeof defaultNodeDisabled === \"function\"\n ? defaultNodeDisabled(option, deep)\n : defaultNodeDisabled ?? false}\n >\n {!!deep && (\n <div\n style={{ paddingLeft: 'var(--deep-space)' }}\n className='relative box-border min-w-10 h-10'\n onClick={(e) => {\n if(!onCollapseToggle) return;\n e?.preventDefault();\n e?.stopPropagation();\n onCollapseToggle?.();\n }}\n >\n <div className='w-10 aspect-square shrink-0'>\n {onCollapseToggle && (\n <ButtonIcon\n type=\"button\"\n variant=\"ghost\"\n color='secondary'\n className={cn(\n 'bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent'\n )}\n icon={(\n <ChevronRightIcon\n strokeWidth={2}\n className={cn(\n 'text-[#06080D]',\n 'transition-transform duration-200',\n expanded && 'rotate-90',\n )}\n />\n )}\n />\n )}\n </div>\n </div>\n )}\n {type === 'multi' && <Checkbox checked={isSelected} className='mr-2 shrink-0'/>}\n <span\n className={cn(\n 'overflow-hidden whitespace-wrap text-ellipsis line-clamp-2 grow',\n (() => {\n return typeof defaultNodeMatched === \"function\"\n ? defaultNodeMatched(option, deep)\n : defaultNodeMatched ?? false\n })() && 'font-bold',\n (() => {\n return typeof defaultNodeMuted === \"function\"\n ? defaultNodeMuted(option, deep)\n : defaultNodeMuted ?? false\n })() && 'opacity-60',\n (() => {\n const res = typeof defaultNodeInteractive === \"function\"\n ? defaultNodeInteractive(option, deep)\n : defaultNodeInteractive ?? true\n return !res;\n })() && 'pointer-events-none',\n )}\n >\n {option.label}\n </span>\n {type === 'single' && (\n <CheckIcon\n className={cn(\n 'ml-2 shrink-0',\n isSelected ? 'opacity-100' : 'opacity-0'\n )}\n />\n )}\n </CommandItem>\n );\n}\n"],"names":["DEEP_OFFSET","DEEP_PADDING_DELTA","calcDeepSpace","deep","ComboboxOptionItem","props","type","DEFAULT_COMBOBOX_TYPE","expanded","option","onSelect","value","onCollapseToggle","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","isSelected","jsxs","CommandItem","e","cn","jsx","ButtonIcon","ChevronRightIcon","Checkbox","CheckIcon"],"mappings":"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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { ComboboxCallbackStateParamsRenderHandler, ComboboxCallbackStateParamsUnion, ComboboxOption, ComboboxProps, ComboboxSelectedType, IComboboxOptionsNodeHandlersProps, ISlotProps } from './Combobox.types';
|
|
2
|
+
type ComboboxRenderContentProps<Data extends object = object> = IComboboxOptionsNodeHandlersProps<Data> & {
|
|
3
|
+
type: ComboboxSelectedType;
|
|
4
|
+
value: ComboboxProps<Data, 'single'>['value'] | ComboboxProps<Data, 'multi'>['value'];
|
|
5
|
+
loading: boolean;
|
|
6
|
+
options: ComboboxOption<Data>[];
|
|
7
|
+
search?: string;
|
|
8
|
+
onSearch?: (term: string) => void;
|
|
9
|
+
isEmptyList?: boolean;
|
|
10
|
+
onSelect?: (option: ComboboxOption<Data>) => void;
|
|
11
|
+
searchLabel?: string;
|
|
12
|
+
emptyLabel?: string;
|
|
13
|
+
callbackStateParams: ComboboxCallbackStateParamsUnion<Data>;
|
|
14
|
+
commandInputAction?: ComboboxCallbackStateParamsRenderHandler<Data>;
|
|
15
|
+
renderList?: ComboboxCallbackStateParamsRenderHandler<Data>;
|
|
16
|
+
listHeadAction?: ComboboxCallbackStateParamsRenderHandler<Data>;
|
|
17
|
+
listFooterAction?: ComboboxCallbackStateParamsRenderHandler<Data>;
|
|
18
|
+
emptyAction?: ComboboxCallbackStateParamsRenderHandler<Data>;
|
|
19
|
+
slotProps?: ISlotProps;
|
|
20
|
+
};
|
|
21
|
+
export declare const ComboboxRenderContent: <Data extends object = object>(props: ComboboxRenderContentProps<Data>) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export {};
|
|
23
|
+
//# sourceMappingURL=ComboboxRenderContent.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComboboxRenderContent.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxRenderContent.tsx"],"names":[],"mappings":"AAWA,OAAO,EACL,wCAAwC,EACxC,gCAAgC,EAChC,cAAc,EAAE,aAAa,EAC7B,oBAAoB,EAAE,iCAAiC,EACvD,UAAU,EACX,MAAM,kBAAkB,CAAC;AAG1B,KAAK,0BAA0B,CAAC,IAAI,SAAS,MAAM,GAAG,MAAM,IAAI,iCAAiC,CAAC,IAAI,CAAC,GAAG;IACxG,IAAI,EAAE,oBAAoB,CAAC;IAC3B,KAAK,EAAE,aAAa,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,GAAG,aAAa,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC;IAEtF,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAElD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mBAAmB,EAAE,gCAAgC,CAAC,IAAI,CAAC,CAAC;IAE5D,kBAAkB,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IACpE,UAAU,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAChE,gBAAgB,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAClE,WAAW,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAE7D,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAA;AAGD,eAAO,MAAM,qBAAqB,GAAI,IAAI,SAAS,MAAM,GAAG,MAAM,EAChE,OAAO,0BAA0B,CAAC,IAAI,CAAC,4CA6HxC,CAAA"}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { jsx as e, jsxs as i, Fragment as u } from "react/jsx-runtime";
|
|
2
|
+
import { LoadingMask as M } from "../LoadingMask/LoadingMask.js";
|
|
3
|
+
import "../LoadingMask/RenderLoadingMask.js";
|
|
4
|
+
import { PopoverContent as P } from "../Popover/Popover.js";
|
|
5
|
+
import { Command as j, CommandInput as k, CommandList as E, CommandGroup as O, CommandEmpty as x, CommandItem as R } from "../Command/Command.js";
|
|
6
|
+
import { cn as m } from "@oneplatformdev/utils";
|
|
7
|
+
import { ComboboxRenderOptions as D } from "./ComboboxRenderOptions.js";
|
|
8
|
+
const z = (b) => {
|
|
9
|
+
const {
|
|
10
|
+
type: y,
|
|
11
|
+
search: p,
|
|
12
|
+
onSearch: C,
|
|
13
|
+
loading: t,
|
|
14
|
+
isEmptyList: l,
|
|
15
|
+
onSelect: N,
|
|
16
|
+
options: f = [],
|
|
17
|
+
callbackStateParams: o,
|
|
18
|
+
value: g,
|
|
19
|
+
searchLabel: w = "Type to search...",
|
|
20
|
+
emptyLabel: h = "No options",
|
|
21
|
+
emptyAction: n,
|
|
22
|
+
commandInputAction: d,
|
|
23
|
+
listHeadAction: r,
|
|
24
|
+
listFooterAction: a,
|
|
25
|
+
slotProps: s = {},
|
|
26
|
+
defaultNodeDisabled: A,
|
|
27
|
+
defaultNodeMatched: F,
|
|
28
|
+
defaultNodeMuted: L,
|
|
29
|
+
defaultNodeInteractive: v,
|
|
30
|
+
renderList: c
|
|
31
|
+
} = b;
|
|
32
|
+
return /* @__PURE__ */ e(
|
|
33
|
+
P,
|
|
34
|
+
{
|
|
35
|
+
className: m(
|
|
36
|
+
"w-(--radix-popper-anchor-width) max-w-none p-2"
|
|
37
|
+
),
|
|
38
|
+
align: "start",
|
|
39
|
+
children: /* @__PURE__ */ i(j, { shouldFilter: !1, children: [
|
|
40
|
+
/* @__PURE__ */ e(
|
|
41
|
+
k,
|
|
42
|
+
{
|
|
43
|
+
placeholder: w,
|
|
44
|
+
value: p,
|
|
45
|
+
onValueChange: C
|
|
46
|
+
}
|
|
47
|
+
),
|
|
48
|
+
typeof d == "function" ? d(o) : d,
|
|
49
|
+
/* @__PURE__ */ e(E, { children: /* @__PURE__ */ i(
|
|
50
|
+
O,
|
|
51
|
+
{
|
|
52
|
+
className: m(
|
|
53
|
+
!f.length && "p-0 shadow-none",
|
|
54
|
+
"px-0 py-2"
|
|
55
|
+
),
|
|
56
|
+
children: [
|
|
57
|
+
t && /* @__PURE__ */ e(M, { fullWidth: !0 }),
|
|
58
|
+
!t && l && /* @__PURE__ */ e(u, { children: n ? /* @__PURE__ */ i(x, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
|
|
59
|
+
/* @__PURE__ */ e("span", { children: h }),
|
|
60
|
+
typeof n == "function" ? n(o) : n
|
|
61
|
+
] }) : /* @__PURE__ */ e(x, { children: h }) }),
|
|
62
|
+
!t && !l && /* @__PURE__ */ i(u, { children: [
|
|
63
|
+
r && /* @__PURE__ */ e(
|
|
64
|
+
R,
|
|
65
|
+
{
|
|
66
|
+
asChild: !0,
|
|
67
|
+
className: "w-full",
|
|
68
|
+
children: typeof r == "function" ? r(o) : r
|
|
69
|
+
},
|
|
70
|
+
"combobox-list-head-action"
|
|
71
|
+
),
|
|
72
|
+
c && c(o),
|
|
73
|
+
!c && /* @__PURE__ */ e(
|
|
74
|
+
D,
|
|
75
|
+
{
|
|
76
|
+
type: y,
|
|
77
|
+
search: p,
|
|
78
|
+
value: g,
|
|
79
|
+
options: f,
|
|
80
|
+
onSelect: N,
|
|
81
|
+
defaultNodeDisabled: A,
|
|
82
|
+
defaultNodeMatched: F,
|
|
83
|
+
defaultNodeMuted: L,
|
|
84
|
+
defaultNodeInteractive: v
|
|
85
|
+
}
|
|
86
|
+
)
|
|
87
|
+
] })
|
|
88
|
+
]
|
|
89
|
+
}
|
|
90
|
+
) }),
|
|
91
|
+
!t && a && !l && /* @__PURE__ */ e(
|
|
92
|
+
"div",
|
|
93
|
+
{
|
|
94
|
+
"data-slot": "command-footer-wrapper",
|
|
95
|
+
...(() => {
|
|
96
|
+
const { bordered: I = !0, ...S } = s?.listFooterAction || {};
|
|
97
|
+
return {
|
|
98
|
+
...S,
|
|
99
|
+
"data-slot-bordered": JSON.stringify(I)
|
|
100
|
+
};
|
|
101
|
+
})(),
|
|
102
|
+
className: m(
|
|
103
|
+
"flex w-full items-center gap-2 px-0",
|
|
104
|
+
(s?.listFooterAction?.bordered ?? !0) && "border-t px-0 pt-2",
|
|
105
|
+
s?.listFooterAction?.className
|
|
106
|
+
),
|
|
107
|
+
children: typeof a == "function" ? a(o) : a
|
|
108
|
+
}
|
|
109
|
+
)
|
|
110
|
+
] })
|
|
111
|
+
}
|
|
112
|
+
);
|
|
113
|
+
};
|
|
114
|
+
export {
|
|
115
|
+
z as ComboboxRenderContent
|
|
116
|
+
};
|
|
117
|
+
//# sourceMappingURL=ComboboxRenderContent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComboboxRenderContent.js","sources":["../../src/Combobox/ComboboxRenderContent.tsx"],"sourcesContent":["import { LoadingMask } from '../LoadingMask';\nimport { PopoverContent } from '../Popover';\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from '../Command';\nimport { cn } from '@oneplatformdev/utils';\nimport {\n ComboboxCallbackStateParamsRenderHandler,\n ComboboxCallbackStateParamsUnion,\n ComboboxOption, ComboboxProps,\n ComboboxSelectedType, IComboboxOptionsNodeHandlersProps,\n ISlotProps,\n} from './Combobox.types';\nimport { ComboboxRenderOptions } from './ComboboxRenderOptions';\n\ntype ComboboxRenderContentProps<Data extends object = object> = IComboboxOptionsNodeHandlersProps<Data> & {\n type: ComboboxSelectedType,\n value: ComboboxProps<Data, 'single'>['value'] | ComboboxProps<Data, 'multi'>['value'];\n\n loading: boolean;\n options: ComboboxOption<Data>[];\n search?: string;\n onSearch?: (term: string) => void;\n isEmptyList?: boolean;\n onSelect?: (option: ComboboxOption<Data>) => void;\n\n searchLabel?: string;\n emptyLabel?: string;\n\n callbackStateParams: ComboboxCallbackStateParamsUnion<Data>;\n\n commandInputAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n renderList?: ComboboxCallbackStateParamsRenderHandler<Data>;\n listHeadAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n listFooterAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n emptyAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n\n slotProps?: ISlotProps;\n}\n\n\nexport const ComboboxRenderContent = <Data extends object = object>(\n props: ComboboxRenderContentProps<Data>\n) => {\n const {\n type,\n search,\n onSearch,\n loading,\n isEmptyList,\n onSelect,\n options = [],\n callbackStateParams,\n value,\n searchLabel = 'Type to search...',\n emptyLabel = 'No options',\n emptyAction,\n commandInputAction,\n listHeadAction,\n listFooterAction,\n slotProps = {},\n defaultNodeDisabled,\n defaultNodeMatched,\n defaultNodeMuted,\n defaultNodeInteractive,\n renderList,\n } = props;\n\n return (\n <PopoverContent\n className={cn(\n \"w-(--radix-popper-anchor-width) max-w-none p-2\"\n )}\n align=\"start\"\n >\n <Command shouldFilter={false}>\n <CommandInput\n placeholder={searchLabel}\n value={search}\n onValueChange={onSearch}\n />\n {typeof commandInputAction === 'function'\n ? commandInputAction(callbackStateParams)\n : commandInputAction}\n\n <CommandList>\n <CommandGroup\n className={cn(\n !options.length && 'p-0 shadow-none',\n 'px-0 py-2',\n )}\n >\n {loading && <LoadingMask fullWidth/>}\n {!loading && isEmptyList && (\n <>\n {emptyAction ? (\n <CommandEmpty className=\"flex flex-col gap-3 py-5 px-3 items-center\">\n <span>{emptyLabel}</span>\n {typeof emptyAction === 'function'\n ? emptyAction(callbackStateParams)\n : emptyAction}\n </CommandEmpty>\n ) : (\n <CommandEmpty>{emptyLabel}</CommandEmpty>\n )}\n </>\n )}\n\n {!loading && !isEmptyList && (\n <>\n {listHeadAction && (\n <CommandItem\n key='combobox-list-head-action'\n asChild\n className='w-full'\n >\n {typeof listHeadAction === 'function'\n ? listHeadAction(callbackStateParams)\n : listHeadAction}\n </CommandItem>\n )}\n\n {renderList && renderList(callbackStateParams)}\n\n {!renderList && (\n <ComboboxRenderOptions\n type={type}\n search={search}\n value={value}\n options={options}\n onSelect={onSelect}\n defaultNodeDisabled={defaultNodeDisabled}\n defaultNodeMatched={defaultNodeMatched}\n defaultNodeMuted={defaultNodeMuted}\n defaultNodeInteractive={defaultNodeInteractive}/>\n )}\n </>\n )}\n\n </CommandGroup>\n </CommandList>\n\n {/*LIST FOOTER ACTION*/}\n {!loading && listFooterAction && !isEmptyList && (\n <div\n data-slot=\"command-footer-wrapper\"\n {...((() => {\n const { bordered = true, ...rest } = slotProps?.listFooterAction || {};\n return {\n ...rest,\n 'data-slot-bordered': JSON.stringify(bordered)\n }\n })())}\n className={cn(\n \"flex w-full items-center gap-2 px-0\",\n (slotProps?.listFooterAction?.bordered ?? true) && 'border-t px-0 pt-2',\n slotProps?.listFooterAction?.className,\n )}\n >\n {typeof listFooterAction === 'function'\n ? listFooterAction(callbackStateParams)\n : listFooterAction}\n </div>\n )}\n </Command>\n </PopoverContent>\n );\n}\n"],"names":["ComboboxRenderContent","props","type","search","onSearch","loading","isEmptyList","onSelect","options","callbackStateParams","value","searchLabel","emptyLabel","emptyAction","commandInputAction","listHeadAction","listFooterAction","slotProps","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","renderList","jsx","PopoverContent","cn","jsxs","Command","CommandInput","CommandList","CommandGroup","LoadingMask","Fragment","CommandEmpty","CommandItem","ComboboxRenderOptions","bordered","rest"],"mappings":"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"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { IComboboxOptionsNodeProps, IComboboxOptionsProps } from './Combobox.types';
|
|
2
|
+
export declare const ComboboxOptionsNode: <Data extends object>(props: IComboboxOptionsNodeProps<Data>) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare const ComboboxRenderOptions: <Data extends object>(props: IComboboxOptionsProps<Data>) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
//# sourceMappingURL=ComboboxRenderOptions.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComboboxRenderOptions.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxRenderOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,yBAAyB,EACzB,qBAAqB,EACtB,MAAM,kBAAkB,CAAC;AAS1B,eAAO,MAAM,mBAAmB,GAAI,IAAI,SAAS,MAAM,EAAE,OAAO,yBAAyB,CAAC,IAAI,CAAC,4CA2C9F,CAAA;AAED,eAAO,MAAM,qBAAqB,GAAI,IAAI,SAAS,MAAM,EAAE,OAAO,qBAAqB,CAAC,IAAI,CAAC,4CAe5F,CAAA"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { jsx as t, jsxs as c } from "react/jsx-runtime";
|
|
2
|
+
import { useState as f, useMemo as u } from "react";
|
|
3
|
+
import { Collapsible as b, CollapsibleContent as x } from "../Collapsible/Collapsible.js";
|
|
4
|
+
import { ComboboxOptionItem as m } from "./ComboboxOptionItem.js";
|
|
5
|
+
import { cn as h } from "@oneplatformdev/utils";
|
|
6
|
+
const d = (n) => {
|
|
7
|
+
const { option: e, deep: l = 0, defaultNodeOpen: s, defaultNodeDisabled: o, search: p } = n, [r, i] = f(() => typeof s == "function" ? s(e, l) : s ?? (!!p || !l));
|
|
8
|
+
return e?.items?.length ? /* @__PURE__ */ c(
|
|
9
|
+
b,
|
|
10
|
+
{
|
|
11
|
+
open: r,
|
|
12
|
+
onOpenChange: i,
|
|
13
|
+
"data-opened": r,
|
|
14
|
+
className: h("group/collapsible"),
|
|
15
|
+
disabled: typeof o == "function" ? o(e, l) : o ?? !1,
|
|
16
|
+
children: [
|
|
17
|
+
/* @__PURE__ */ t(
|
|
18
|
+
m,
|
|
19
|
+
{
|
|
20
|
+
...n,
|
|
21
|
+
expanded: r,
|
|
22
|
+
onCollapseToggle: () => i((a) => !a)
|
|
23
|
+
}
|
|
24
|
+
),
|
|
25
|
+
/* @__PURE__ */ t(x, { children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-0", children: e?.items.map((a) => /* @__PURE__ */ t(
|
|
26
|
+
d,
|
|
27
|
+
{
|
|
28
|
+
...n,
|
|
29
|
+
deep: l + 1,
|
|
30
|
+
option: a
|
|
31
|
+
},
|
|
32
|
+
a.value
|
|
33
|
+
)) }) })
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
) : /* @__PURE__ */ t(m, { ...n });
|
|
37
|
+
}, j = (n) => {
|
|
38
|
+
const { options: e = [], ...l } = n, s = u(() => e.some((o) => o.items?.length), [e]);
|
|
39
|
+
return /* @__PURE__ */ t("div", { className: "flex flex-col gap-0", children: e.map((o) => /* @__PURE__ */ t(
|
|
40
|
+
d,
|
|
41
|
+
{
|
|
42
|
+
...l,
|
|
43
|
+
option: o,
|
|
44
|
+
deep: Number(s)
|
|
45
|
+
},
|
|
46
|
+
o.value
|
|
47
|
+
)) });
|
|
48
|
+
};
|
|
49
|
+
export {
|
|
50
|
+
d as ComboboxOptionsNode,
|
|
51
|
+
j as ComboboxRenderOptions
|
|
52
|
+
};
|
|
53
|
+
//# sourceMappingURL=ComboboxRenderOptions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComboboxRenderOptions.js","sources":["../../src/Combobox/ComboboxRenderOptions.tsx"],"sourcesContent":["import {\n IComboboxOptionsNodeProps,\n IComboboxOptionsProps,\n} from './Combobox.types';\nimport { useMemo, useState } from 'react';\nimport {\n Collapsible,\n CollapsibleContent,\n} from '../Collapsible';\nimport { ComboboxOptionItem } from './ComboboxOptionItem';\nimport { cn } from '@oneplatformdev/utils';\n\nexport const ComboboxOptionsNode = <Data extends object>(props: IComboboxOptionsNodeProps<Data>) => {\n const { option, deep = 0, defaultNodeOpen, defaultNodeDisabled, search } = props;\n\n const [open, onOpenChange] = useState(() => {\n const def = !!search || !deep;\n return typeof defaultNodeOpen === \"function\"\n ? defaultNodeOpen(option, deep)\n : defaultNodeOpen ?? def\n });\n\n if (!option?.items?.length) return <ComboboxOptionItem {...props} />;\n return (\n <Collapsible\n open={open}\n onOpenChange={onOpenChange}\n data-opened={open}\n className={cn('group/collapsible')}\n disabled={typeof defaultNodeDisabled === \"function\"\n ? defaultNodeDisabled(option, deep)\n : defaultNodeDisabled ?? false}\n >\n <ComboboxOptionItem\n {...props}\n expanded={open}\n onCollapseToggle={() => onOpenChange(prev => !prev)}\n />\n\n <CollapsibleContent>\n <div className=\"flex flex-col gap-0\">\n {option?.items.map((opt) => {\n return (\n <ComboboxOptionsNode\n key={opt.value}\n {...props}\n deep={deep + 1}\n option={opt}\n />\n );\n })}\n </div>\n </CollapsibleContent>\n </Collapsible>\n );\n}\n\nexport const ComboboxRenderOptions = <Data extends object>(props: IComboboxOptionsProps<Data>) => {\n const { options = [], ...rest } = props;\n const hasTree = useMemo(() => options.some(o => o.items?.length), [options]);\n return (\n <div className=\"flex flex-col gap-0\">\n {options.map((option) => (\n <ComboboxOptionsNode\n key={option.value}\n {...rest}\n option={option}\n deep={Number(hasTree)}\n />\n ))}\n </div>\n );\n}\n"],"names":["ComboboxOptionsNode","props","option","deep","defaultNodeOpen","defaultNodeDisabled","search","open","onOpenChange","useState","jsxs","Collapsible","cn","jsx","ComboboxOptionItem","prev","CollapsibleContent","opt","ComboboxRenderOptions","options","rest","hasTree","useMemo"],"mappings":";;;;;AAYO,MAAMA,IAAsB,CAAsBC,MAA2C;AAClG,QAAM,EAAE,QAAAC,GAAQ,MAAAC,IAAO,GAAG,iBAAAC,GAAiB,qBAAAC,GAAqB,QAAAC,MAAWL,GAErE,CAACM,GAAMC,CAAY,IAAIC,EAAS,MAE7B,OAAOL,KAAoB,aAC9BA,EAAgBF,GAAQC,CAAI,IAC5BC,MAHQ,CAAC,CAACE,KAAU,CAACH,EAI1B;AAED,SAAKD,GAAQ,OAAO,SAElB,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAJ;AAAA,MACA,cAAAC;AAAA,MACA,eAAaD;AAAA,MACb,WAAWK,EAAG,mBAAmB;AAAA,MACjC,UAAU,OAAOP,KAAwB,aACrCA,EAAoBH,GAAQC,CAAI,IAChCE,KAAuB;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAQ;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGb;AAAA,YACJ,UAAUM;AAAA,YACV,kBAAkB,MAAMC,EAAa,CAAAO,MAAQ,CAACA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGpD,gBAAAF,EAACG,GAAA,EACC,UAAA,gBAAAH,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAAX,GAAQ,MAAM,IAAI,CAACe,MAEhB,gBAAAJ;AAAA,UAACb;AAAA,UAAA;AAAA,YAEE,GAAGC;AAAA,YACJ,MAAME,IAAO;AAAA,YACb,QAAQc;AAAA,UAAA;AAAA,UAHHA,EAAI;AAAA,QAAA,CAMd,GACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IA9B+B,gBAAAJ,EAACC,GAAA,EAAoB,GAAGb,GAAO;AAiCpE,GAEaiB,IAAwB,CAAsBjB,MAAuC;AAChG,QAAM,EAAE,SAAAkB,IAAU,CAAA,GAAI,GAAGC,MAASnB,GAC5BoB,IAAUC,EAAQ,MAAMH,EAAQ,KAAK,CAAA,MAAK,EAAE,OAAO,MAAM,GAAG,CAACA,CAAO,CAAC;AAC3E,2BACG,OAAA,EAAI,WAAU,uBACZ,UAAAA,EAAQ,IAAI,CAACjB,MACZ,gBAAAW;AAAA,IAACb;AAAA,IAAA;AAAA,MAEE,GAAGoB;AAAA,MACJ,QAAAlB;AAAA,MACA,MAAM,OAAOmB,CAAO;AAAA,IAAA;AAAA,IAHfnB,EAAO;AAAA,EAAA,CAKf,GACH;AAEJ;"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ComboboxCallbackStateParamsRenderHandler, ComboboxCallbackStateParamsUnion, ComboboxOption, ComboboxProps, ComboboxSelectedType } from './Combobox.types';
|
|
2
|
+
type ComboboxRenderTriggerProps<Data extends object = object> = {
|
|
3
|
+
type: ComboboxSelectedType;
|
|
4
|
+
value: ComboboxProps<Data, 'single'>['value'] | ComboboxProps<Data, 'multi'>['value'];
|
|
5
|
+
open: boolean;
|
|
6
|
+
initialLoading: boolean;
|
|
7
|
+
flattenOptions: ComboboxOption<Data>[];
|
|
8
|
+
selectedOptions?: Map<ComboboxOption<Data>['value'], ComboboxOption<Data>>;
|
|
9
|
+
onSelect?: (option: ComboboxOption<Data>) => void;
|
|
10
|
+
onClearSelections?: () => void;
|
|
11
|
+
callbackStateParams: ComboboxCallbackStateParamsUnion<Data>;
|
|
12
|
+
renderTrigger?: ComboboxCallbackStateParamsRenderHandler<Data>;
|
|
13
|
+
placeholder?: string;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
};
|
|
16
|
+
export declare const ComboboxRenderTrigger: <Data extends object>(props: ComboboxRenderTriggerProps<Data>) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export {};
|
|
18
|
+
//# sourceMappingURL=ComboboxRenderTrigger.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComboboxRenderTrigger.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxRenderTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,wCAAwC,EACxC,gCAAgC,EAChC,cAAc,EACd,aAAa,EAAE,oBAAoB,EAEpC,MAAM,kBAAkB,CAAC;AAS1B,KAAK,0BAA0B,CAAC,IAAI,SAAS,MAAM,GAAG,MAAM,IAAI;IAC9D,IAAI,EAAE,oBAAoB,CAAC;IAC3B,KAAK,EAAE,aAAa,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,GAAG,aAAa,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC;IACtF,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;IACvC,eAAe,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3E,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE/B,mBAAmB,EAAE,gCAAgC,CAAC,IAAI,CAAC,CAAC;IAC5D,aAAa,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAE/D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAA;AAmJD,eAAO,MAAM,qBAAqB,GAAI,IAAI,SAAS,MAAM,EACvD,OAAO,0BAA0B,CAAC,IAAI,CAAC,4CAyCxC,CAAA"}
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { jsx as r, jsxs as d, Fragment as b } from "react/jsx-runtime";
|
|
2
|
+
import { DEFAULT_COMBOBOX_TYPE as h } from "./Combobox.types.js";
|
|
3
|
+
import { Button as v } from "../Button/Button.js";
|
|
4
|
+
import "../Button/buttonVariants.js";
|
|
5
|
+
import { useMemo as w } from "react";
|
|
6
|
+
import { cn as u } from "@oneplatformdev/utils";
|
|
7
|
+
import { LoadingMask as x } from "../LoadingMask/LoadingMask.js";
|
|
8
|
+
import "../LoadingMask/RenderLoadingMask.js";
|
|
9
|
+
import { XIcon as f, ChevronDown as y } from "lucide-react";
|
|
10
|
+
import { PopoverTrigger as C } from "../Popover/Popover.js";
|
|
11
|
+
import { ScrollArea as N } from "../ScrollArea/ScrollArea.js";
|
|
12
|
+
const g = (o) => {
|
|
13
|
+
const { value: n, flattenOptions: a = [], selectedOptions: t = /* @__PURE__ */ new Map() } = o;
|
|
14
|
+
return w(() => {
|
|
15
|
+
if (!n) return [];
|
|
16
|
+
const c = Array.from(t.values()), i = Array.isArray(n) ? n : [n], p = [...a.filter((l) => i.find((s) => String(s).toLowerCase() === String(l.value).toLowerCase())), ...c].reduce((l, s) => (!s || l.has(s.value) || l.set(s.value, { ...s, label: s.label || s.value }), l), /* @__PURE__ */ new Map());
|
|
17
|
+
return p.size ? Array.from(p.values()) : i.map((l) => ({ value: l, label: String(l) }));
|
|
18
|
+
}, [n, a, t]);
|
|
19
|
+
}, k = (o) => {
|
|
20
|
+
const { type: n = h, placeholder: a, onSelect: t, open: c } = o, i = g(o);
|
|
21
|
+
return i.length ? n === "single" ? /* @__PURE__ */ r("span", { className: "truncate overflow-hidden whitespace-nowrap break-words line-clamp-1 pr-8", children: i[0].label }) : n === "multi" ? /* @__PURE__ */ r(
|
|
22
|
+
N,
|
|
23
|
+
{
|
|
24
|
+
className: u(
|
|
25
|
+
"w-full h-auto min-h-5 max-h-20.25",
|
|
26
|
+
"overflow-y-auto overflow-x-hidden"
|
|
27
|
+
),
|
|
28
|
+
slotProps: {
|
|
29
|
+
viewport: {
|
|
30
|
+
className: "[&>div]:block!"
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
children: /* @__PURE__ */ r("div", { className: "p-0 gap-1 flex flex-wrap w-full pr-11", children: i.map((e) => e ? /* @__PURE__ */ d(
|
|
34
|
+
"div",
|
|
35
|
+
{
|
|
36
|
+
className: u(
|
|
37
|
+
"flex items-center justify-center",
|
|
38
|
+
"py-1 px-2 min-h-5 w-fit gap-1",
|
|
39
|
+
"bg-[#9368FF] rounded-sm",
|
|
40
|
+
"text-[#FCFCFC] leading-none text-xs font-semibold",
|
|
41
|
+
"cursor-pointer",
|
|
42
|
+
"truncate"
|
|
43
|
+
),
|
|
44
|
+
onClick: (p) => {
|
|
45
|
+
c && (p.preventDefault(), p.stopPropagation(), t?.(e));
|
|
46
|
+
},
|
|
47
|
+
children: [
|
|
48
|
+
/* @__PURE__ */ r("span", { className: "whitespace-pre-wrap wrap-break-word line-clamp-1", children: e.label }),
|
|
49
|
+
/* @__PURE__ */ r(f, { className: "size-3! shrink-0 text-white!" })
|
|
50
|
+
]
|
|
51
|
+
},
|
|
52
|
+
e.value
|
|
53
|
+
) : null) })
|
|
54
|
+
}
|
|
55
|
+
) : "No supported to render" : /* @__PURE__ */ r("span", { className: "text-gray-400 whitespace-pre-wrap break-words line-clamp-1 pr-11", children: a });
|
|
56
|
+
}, m = (o) => {
|
|
57
|
+
const { children: n, prevented: a = !0, onClick: t, className: c, ...i } = o;
|
|
58
|
+
return /* @__PURE__ */ r(
|
|
59
|
+
"div",
|
|
60
|
+
{
|
|
61
|
+
...i,
|
|
62
|
+
className: u(
|
|
63
|
+
"absolute top-1/2 -translate-y-1/2 right-1",
|
|
64
|
+
"flex items-center justify-center",
|
|
65
|
+
"w-10 h-10 [&_svg]:size-5!",
|
|
66
|
+
"opacity-50 cursor-pointer hover:opacity-100",
|
|
67
|
+
c
|
|
68
|
+
),
|
|
69
|
+
onClick: (e) => {
|
|
70
|
+
if (!a) return t?.(e);
|
|
71
|
+
e.stopPropagation(), e.preventDefault(), t?.(e);
|
|
72
|
+
},
|
|
73
|
+
children: n
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
}, A = (o) => {
|
|
77
|
+
const { open: n, onClearSelections: a } = o, t = g(o);
|
|
78
|
+
return n ? t.length ? /* @__PURE__ */ r(m, { onClick: () => a?.(), children: /* @__PURE__ */ r(f, {}) }) : null : /* @__PURE__ */ r(m, { prevented: !1, children: /* @__PURE__ */ r(y, {}) });
|
|
79
|
+
}, B = (o) => {
|
|
80
|
+
const {
|
|
81
|
+
type: n,
|
|
82
|
+
open: a,
|
|
83
|
+
initialLoading: t,
|
|
84
|
+
callbackStateParams: c,
|
|
85
|
+
disabled: i,
|
|
86
|
+
renderTrigger: e
|
|
87
|
+
} = o;
|
|
88
|
+
return /* @__PURE__ */ r(C, { asChild: !0, className: "border-input", children: /* @__PURE__ */ d(
|
|
89
|
+
v,
|
|
90
|
+
{
|
|
91
|
+
variant: e ? "none" : "contained",
|
|
92
|
+
color: "secondary",
|
|
93
|
+
role: "combobox",
|
|
94
|
+
"aria-expanded": a,
|
|
95
|
+
className: u(
|
|
96
|
+
"relative w-full justify-between bg-transparent",
|
|
97
|
+
!e && "font-normal text-sm",
|
|
98
|
+
"border border-border",
|
|
99
|
+
a && "border-1 outline-hidden ring-1 ring-ring",
|
|
100
|
+
n === "multi" && "pr-0",
|
|
101
|
+
"focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
|
|
102
|
+
e && "p-0",
|
|
103
|
+
e && a && "p-0 border-1 ring-0 ring-transparent"
|
|
104
|
+
),
|
|
105
|
+
disabled: i || t,
|
|
106
|
+
children: [
|
|
107
|
+
t && /* @__PURE__ */ r(x, { fullWidth: !0 }),
|
|
108
|
+
!t && e && e(c),
|
|
109
|
+
!t && !e && /* @__PURE__ */ d(b, { children: [
|
|
110
|
+
/* @__PURE__ */ r(k, { ...o }),
|
|
111
|
+
/* @__PURE__ */ r(A, { ...o })
|
|
112
|
+
] })
|
|
113
|
+
]
|
|
114
|
+
}
|
|
115
|
+
) });
|
|
116
|
+
};
|
|
117
|
+
export {
|
|
118
|
+
B as ComboboxRenderTrigger
|
|
119
|
+
};
|
|
120
|
+
//# sourceMappingURL=ComboboxRenderTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComboboxRenderTrigger.js","sources":["../../src/Combobox/ComboboxRenderTrigger.tsx"],"sourcesContent":["import {\n ComboboxCallbackStateParamsRenderHandler,\n ComboboxCallbackStateParamsUnion,\n ComboboxOption,\n ComboboxProps, ComboboxSelectedType,\n DEFAULT_COMBOBOX_TYPE\n} from \"./Combobox.types\";\nimport { Button } from \"../Button\";\nimport { cn } from \"@oneplatformdev/utils\";\nimport { LoadingMask } from \"../LoadingMask\";\nimport { ChevronDown, XIcon } from \"lucide-react\";\nimport { PopoverTrigger } from \"../Popover\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { ScrollArea } from \"../ScrollArea\";\n\ntype ComboboxRenderTriggerProps<Data extends object = object> = {\n type: ComboboxSelectedType,\n value: ComboboxProps<Data, 'single'>['value'] | ComboboxProps<Data, 'multi'>['value'];\n open: boolean;\n initialLoading: boolean;\n flattenOptions: ComboboxOption<Data>[];\n selectedOptions?: Map<ComboboxOption<Data>['value'], ComboboxOption<Data>>;\n onSelect?: (option: ComboboxOption<Data>) => void;\n onClearSelections?: () => void;\n\n callbackStateParams: ComboboxCallbackStateParamsUnion<Data>;\n renderTrigger?: ComboboxCallbackStateParamsRenderHandler<Data>;\n\n placeholder?: string;\n disabled?: boolean;\n}\n\nconst useValues = <Data extends object>(\n props: ComboboxRenderTriggerProps<Data>\n): ComboboxOption<Data>[] => {\n const { value, flattenOptions = [], selectedOptions = new Map() } = props;\n return useMemo(() => {\n if (!value) return [];\n const selectedOption = Array.from(selectedOptions.values());\n const vls = Array.isArray(value) ? value : [ value ];\n const flattenedOptionValues = flattenOptions.filter(o => {\n return vls.find(v => String(v).toLowerCase() === String(o.value).toLowerCase())\n });\n\n const labels = [ ...flattenedOptionValues, ...selectedOption ]\n .reduce<Map<ComboboxOption<Data>['value'], ComboboxOption<Data>>>((acc, o) => {\n if (!o) return acc;\n if (acc.has(o.value)) return acc;\n acc.set(o.value, { ...o, label: o.label || o.value });\n return acc;\n }, new Map())\n if (!labels.size) return vls.map(v => ({ value: v, label: String(v) }));\n return Array.from(labels.values());\n }, [ value, flattenOptions, selectedOptions ])\n}\n\nconst ComboboxRenderTriggerLabel = <Data extends object = object>(\n props: ComboboxRenderTriggerProps<Data>\n) => {\n const { type = DEFAULT_COMBOBOX_TYPE, placeholder, onSelect, open } = props;\n const values = useValues(props);\n\n if (!values.length) {\n return (\n <span className=\"text-gray-400 whitespace-pre-wrap break-words line-clamp-1 pr-11\">\n {placeholder}\n </span>\n )\n }\n\n if (type === 'single') {\n return (\n <span className=\"truncate overflow-hidden whitespace-nowrap break-words line-clamp-1 pr-8\">\n {values[0].label}\n </span>\n )\n }\n\n if (type === 'multi') {\n return (\n <ScrollArea\n className={cn(\n \"w-full h-auto min-h-5 max-h-20.25\",\n 'overflow-y-auto overflow-x-hidden',\n )}\n slotProps={{\n viewport: {\n className: '[&>div]:block!',\n }\n }}\n >\n <div className=\"p-0 gap-1 flex flex-wrap w-full pr-11\">\n {values.map((item) => {\n if (!item) return null;\n return (\n <div\n key={item.value}\n className={cn(\n 'flex items-center justify-center',\n 'py-1 px-2 min-h-5 w-fit gap-1',\n 'bg-[#9368FF] rounded-sm',\n 'text-[#FCFCFC] leading-none text-xs font-semibold',\n 'cursor-pointer',\n 'truncate',\n )}\n onClick={(e) => {\n if(!open) return;\n e.preventDefault();\n e.stopPropagation();\n onSelect?.(item)\n }}\n >\n <span className='whitespace-pre-wrap wrap-break-word line-clamp-1'>\n {item.label}\n </span>\n <XIcon className='size-3! shrink-0 text-white!'/>\n </div>\n );\n })}\n </div>\n </ScrollArea>\n )\n }\n\n return 'No supported to render'\n}\n\nconst EndAdornmentWrapper = (\n props: HTMLAttributes<HTMLDivElement> & {\n prevented?: boolean;\n }\n) => {\n const { children, prevented = true, onClick, className, ...rest } = props;\n return (\n <div\n {...rest}\n className={cn(\n 'absolute top-1/2 -translate-y-1/2 right-1',\n 'flex items-center justify-center',\n 'w-10 h-10 [&_svg]:size-5!',\n 'opacity-50 cursor-pointer hover:opacity-100',\n className,\n )}\n onClick={(e) => {\n if (!prevented) return onClick?.(e);\n e.stopPropagation();\n e.preventDefault();\n onClick?.(e);\n }}\n >\n {children}\n </div>\n )\n}\nconst ComboboxRenderTriggerEndAdornment = <Data extends object = object>(\n props: ComboboxRenderTriggerProps<Data>\n) => {\n const { open, onClearSelections } = props;\n const values = useValues(props);\n\n if (!open) {\n return (\n <EndAdornmentWrapper prevented={false}>\n <ChevronDown/>\n </EndAdornmentWrapper>\n )\n }\n\n if (!values.length) return null\n\n return (\n <EndAdornmentWrapper onClick={() => onClearSelections?.()}>\n <XIcon/>\n </EndAdornmentWrapper>\n )\n}\n\nexport const ComboboxRenderTrigger = <Data extends object>(\n props: ComboboxRenderTriggerProps<Data>\n) => {\n const {\n type,\n open,\n initialLoading,\n callbackStateParams,\n disabled,\n renderTrigger,\n } = props;\n\n return (\n <PopoverTrigger asChild className=\"border-input\">\n <Button\n variant={renderTrigger ? 'none' : 'contained'}\n color='secondary'\n role=\"combobox\"\n aria-expanded={open}\n className={cn(\n 'relative w-full justify-between bg-transparent',\n !renderTrigger && 'font-normal text-sm',\n 'border border-border',\n open && 'border-1 outline-hidden ring-1 ring-ring',\n type === 'multi' && 'pr-0',\n 'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring',\n renderTrigger && 'p-0',\n renderTrigger && open && 'p-0 border-1 ring-0 ring-transparent',\n )}\n disabled={disabled || initialLoading}\n >\n {initialLoading && <LoadingMask fullWidth/>}\n {!initialLoading && renderTrigger && renderTrigger(callbackStateParams)}\n {!initialLoading && !renderTrigger && (\n <>\n <ComboboxRenderTriggerLabel {...props} />\n <ComboboxRenderTriggerEndAdornment {...props} />\n </>\n )}\n </Button>\n </PopoverTrigger>\n )\n}\n"],"names":["useValues","props","value","flattenOptions","selectedOptions","useMemo","selectedOption","vls","labels","o","v","acc","ComboboxRenderTriggerLabel","type","DEFAULT_COMBOBOX_TYPE","placeholder","onSelect","open","values","jsx","ScrollArea","cn","item","jsxs","e","XIcon","EndAdornmentWrapper","children","prevented","onClick","className","rest","ComboboxRenderTriggerEndAdornment","onClearSelections","ChevronDown","ComboboxRenderTrigger","initialLoading","callbackStateParams","disabled","renderTrigger","PopoverTrigger","Button","LoadingMask","Fragment"],"mappings":"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"}
|
package/Command/Command.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Command as CommandPrimitive } from 'cmdk';
|
|
2
2
|
import { Dialog } from '../Dialog';
|
|
3
|
+
import { HTMLAttributes } from 'react';
|
|
3
4
|
import * as React from "react";
|
|
4
5
|
declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
|
|
5
6
|
declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React.ComponentProps<typeof Dialog> & {
|
|
@@ -8,7 +9,11 @@ declare function CommandDialog({ title, description, children, className, showCl
|
|
|
8
9
|
className?: string;
|
|
9
10
|
showCloseButton?: boolean;
|
|
10
11
|
}): import("react/jsx-runtime").JSX.Element;
|
|
11
|
-
declare function CommandInput(
|
|
12
|
+
declare function CommandInput(props: React.ComponentProps<typeof CommandPrimitive.Input> & {
|
|
13
|
+
slotProps?: {
|
|
14
|
+
wrapper?: HTMLAttributes<HTMLDivElement>;
|
|
15
|
+
};
|
|
16
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
12
17
|
declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): import("react/jsx-runtime").JSX.Element;
|
|
13
18
|
declare function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
|
|
14
19
|
declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
|
package/Command/Command.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Command.d.ts","sourceRoot":"","sources":["../../src/Command/Command.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAA;AAIlD,OAAO,EACL,MAAM,EAKP,MAAM,WAAW,CAAA;
|
|
1
|
+
{"version":3,"file":"Command.d.ts","sourceRoot":"","sources":["../../src/Command/Command.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAA;AAIlD,OAAO,EACL,MAAM,EAKP,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,iBAAS,OAAO,CAAC,EACE,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,2CAWhE;AAED,iBAAS,aAAa,CAAC,EACE,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,SAAS,EACT,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,2CAiBA;AAED,iBAAS,YAAY,CACnB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,GAAG;IAC3D,SAAS,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;KAC1C,CAAA;CACF,2CAmCF;AAGD,iBAAS,WAAW,CAAC,EACE,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAWzE;AAED,iBAAS,YAAY,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAQ3E;AAED,iBAAS,YAAY,CAAC,EACE,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAW3E;AAED,iBAAS,gBAAgB,CAAC,EACE,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,2CAQnF;AAED,iBAAS,WAAW,CAAC,EACE,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAczE;AAED,iBAAS,eAAe,CAAC,EACE,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAWvD;AAED,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EACjB,CAAA"}
|