@oneplatformdev/ui 0.1.99-beta.8 → 0.1.99-beta.80
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/Badge/badgeVariants.d.ts +1 -1
- package/Button/Button.d.ts +6 -0
- package/Button/Button.d.ts.map +1 -1
- package/Button/Button.js +49 -51
- package/Button/Button.js.map +1 -1
- package/Button/Button.types.d.ts +12 -0
- package/Button/Button.types.d.ts.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/ButtonCounterBadge.d.ts +7 -0
- package/Button/ButtonCounterBadge.d.ts.map +1 -0
- package/Button/ButtonCounterBadge.js +20 -0
- package/Button/ButtonCounterBadge.js.map +1 -0
- package/Button/buttonVariants.d.ts +11 -20
- package/Button/buttonVariants.d.ts.map +1 -1
- package/Button/buttonVariants.js +76 -12
- 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 +6 -3
- package/Button/index.js.map +1 -1
- package/ButtonIcon/ButtonIcon.d.ts +5 -0
- package/ButtonIcon/ButtonIcon.d.ts.map +1 -1
- package/ButtonIcon/ButtonIcon.js +69 -51
- package/ButtonIcon/ButtonIcon.js.map +1 -1
- package/ButtonIcon/ButtonIcon.stories.js +94 -65
- 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 +7 -6
- package/ButtonIcon/buttonIconVariants.js.map +1 -1
- package/CHANGELOG.md +841 -0
- package/Calendar/Calendar.js +5 -4
- package/Calendar/Calendar.js.map +1 -1
- package/Combobox/Combobox.d.ts +1 -1
- package/Combobox/Combobox.d.ts.map +1 -1
- package/Combobox/Combobox.js +206 -191
- package/Combobox/Combobox.js.map +1 -1
- package/Combobox/Combobox.stories.js +212 -0
- package/Combobox/Combobox.stories.js.map +1 -0
- package/Combobox/Combobox.types.d.ts +34 -19
- package/Combobox/Combobox.types.d.ts.map +1 -1
- package/Combobox/ComboboxOptionItem.d.ts +4 -3
- package/Combobox/ComboboxOptionItem.d.ts.map +1 -1
- package/Combobox/ComboboxOptionItem.js +49 -22
- package/Combobox/ComboboxOptionItem.js.map +1 -1
- package/Combobox/ComboboxOptions.d.ts +2 -2
- package/Combobox/ComboboxOptions.d.ts.map +1 -1
- package/Combobox/ComboboxOptions.js +48 -48
- package/Combobox/ComboboxOptions.js.map +1 -1
- package/Command/Command.d.ts +6 -1
- package/Command/Command.d.ts.map +1 -1
- package/Command/Command.js +42 -33
- package/Command/Command.js.map +1 -1
- package/DataTable/DataTable.js +16 -15
- package/DataTable/DataTable.js.map +1 -1
- package/Dialog/Dialog.d.ts +1 -1
- package/Dialog/Dialog.d.ts.map +1 -1
- package/Dialog/Dialog.js +71 -39
- package/Dialog/Dialog.js.map +1 -1
- package/Dialog/Dialog.stories.js +102 -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/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/DropdownMenu/DropdownMenu.js +33 -20
- package/DropdownMenu/DropdownMenu.js.map +1 -1
- package/Form/Form.d.ts.map +1 -1
- package/Form/Form.js.map +1 -1
- package/Form/FormRenderControl.d.ts +1 -1
- package/Form/FormRenderControl.d.ts.map +1 -1
- package/Form/FormRenderControl.js +54 -14
- package/Form/FormRenderControl.js.map +1 -1
- package/Form/FormRenderControl.types.d.ts +4 -1
- package/Form/FormRenderControl.types.d.ts.map +1 -1
- package/FormCombobox/FormCombobox.d.ts.map +1 -1
- package/FormCombobox/FormCombobox.js +15 -13
- package/FormCombobox/FormCombobox.js.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 +27 -25
- package/FormInput/FormInput.js.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 -13
- 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 +27 -0
- package/InfoBlock/InfoBlock.js.map +1 -0
- package/InfoBlock/InfoBlock.stories.js +14 -0
- package/InfoBlock/InfoBlock.stories.js.map +1 -0
- package/InfoBlock/InfoBlock.types.d.ts +8 -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 +26 -0
- package/InfoBlock/infoBlockVariants.js.map +1 -0
- package/Input/Input.js +1 -1
- package/Input/Input.js.map +1 -1
- package/Input/inputVariants.d.ts.map +1 -1
- package/Input/inputVariants.js +5 -4
- package/Input/inputVariants.js.map +1 -1
- package/LoadedIcon/LoadedIcon.d.ts.map +1 -1
- package/LoadedIcon/LoadedIcon.js +3 -1
- package/LoadedIcon/LoadedIcon.js.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/Resizable/Resizable.d.ts +5 -20
- package/Resizable/Resizable.d.ts.map +1 -1
- package/Resizable/Resizable.js +48 -31
- package/Resizable/Resizable.js.map +1 -1
- package/Resizable/Resizable.stories.js +140 -0
- package/Resizable/Resizable.stories.js.map +1 -0
- package/Search/Search.d.ts.map +1 -1
- package/Search/Search.js +41 -32
- package/Search/Search.js.map +1 -1
- package/Search/Search.stories.js +17 -0
- package/Search/Search.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 +48 -43
- package/Textarea/Textarea.js.map +1 -1
- package/Textarea/Textarea.stories.js +1 -1
- package/Textarea/Textarea.stories.js.map +1 -1
- package/Textarea/Textarea.types.d.ts +3 -1
- package/Textarea/Textarea.types.d.ts.map +1 -1
- package/Tooltip/Tooltip.d.ts.map +1 -1
- package/Tooltip/Tooltip.js +41 -29
- package/Tooltip/Tooltip.js.map +1 -1
- package/Tooltip/Tooltip.types.d.ts +1 -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 +23 -0
- package/Tooltip/tooltipVariants.js.map +1 -0
- package/index.d.ts +1 -0
- package/index.d.ts.map +1 -1
- package/index.js +335 -330
- package/index.js.map +1 -1
- package/package.json +4 -4
package/Calendar/Calendar.js
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { ChevronRight as
|
|
2
|
+
import { ChevronRight as c, ChevronLeft as l } from "lucide-react";
|
|
3
3
|
import { DayPicker as m } from "react-day-picker";
|
|
4
4
|
import { cn as e } from "@oneplatformdev/utils";
|
|
5
5
|
import "../Button/Button.js";
|
|
6
6
|
import { buttonVariants as o } from "../Button/buttonVariants.js";
|
|
7
|
+
import "react";
|
|
7
8
|
function u({
|
|
8
9
|
className: n,
|
|
9
10
|
classNames: s,
|
|
10
|
-
showOutsideDays:
|
|
11
|
+
showOutsideDays: i = !0,
|
|
11
12
|
...d
|
|
12
13
|
}) {
|
|
13
14
|
return /* @__PURE__ */ r(
|
|
14
15
|
m,
|
|
15
16
|
{
|
|
16
|
-
showOutsideDays:
|
|
17
|
+
showOutsideDays: i,
|
|
17
18
|
className: e("p-3", n),
|
|
18
19
|
classNames: {
|
|
19
20
|
caption_dropdowns: "flex flex-col gap-1",
|
|
@@ -52,7 +53,7 @@ function u({
|
|
|
52
53
|
},
|
|
53
54
|
components: {
|
|
54
55
|
IconLeft: ({ className: a, ...t }) => /* @__PURE__ */ r(l, { className: e("h-4 w-4", a), ...t }),
|
|
55
|
-
IconRight: ({ className: a, ...t }) => /* @__PURE__ */ r(
|
|
56
|
+
IconRight: ({ className: a, ...t }) => /* @__PURE__ */ r(c, { className: e("h-4 w-4", a), ...t })
|
|
56
57
|
},
|
|
57
58
|
...d
|
|
58
59
|
}
|
package/Calendar/Calendar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.js","sources":["../../src/Calendar/Calendar.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { buttonVariants } from \"../Button\";\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n className={cn(\"p-3\", className)}\n classNames={{\n caption_dropdowns:\"flex flex-col gap-1\",\n months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n month: \"space-y-4\",\n caption: \"flex justify-center pt-1 relative items-center gap-4\",\n caption_label: \"text-sm font-medium hidden\",\n nav: \"space-x-1 flex items-center\",\n nav_button: cn(\n buttonVariants({ variant: \"outline-solid\" }),\n \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n ),\n nav_button_previous: \"absolute left-1\",\n nav_button_next: \"absolute right-1\",\n table: \"w-full border-collapse space-y-1\",\n head_row: \"flex\",\n head_cell:\n \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n row: \"flex w-full mt-2\",\n cell: cn(\n \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md\",\n props.mode === \"range\"\n ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n : \"[&:has([aria-selected])]:rounded-md\"\n ),\n day: cn(\n buttonVariants({ variant: \"ghost\" }),\n \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n ),\n day_range_start: \"day-range-start\",\n day_range_end: \"day-range-end\",\n day_selected:\n \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n day_today: \"bg-accent text-accent-foreground\",\n day_outside:\n \"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground\",\n day_disabled: \"text-muted-foreground opacity-50\",\n day_range_middle:\n \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n day_hidden: \"invisible\",\n ...classNames,\n }}\n components={{\n IconLeft: ({ className, ...props }) => (\n <ChevronLeft className={cn(\"h-4 w-4\", className)} {...props} />\n ),\n IconRight: ({ className, ...props }) => (\n <ChevronRight className={cn(\"h-4 w-4\", className)} {...props} />\n ),\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"],"names":["Calendar","className","classNames","showOutsideDays","props","jsx","DayPicker","cn","buttonVariants","ChevronLeft","ChevronRight"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Calendar.js","sources":["../../src/Calendar/Calendar.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { buttonVariants } from \"../Button\";\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n className={cn(\"p-3\", className)}\n classNames={{\n caption_dropdowns:\"flex flex-col gap-1\",\n months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n month: \"space-y-4\",\n caption: \"flex justify-center pt-1 relative items-center gap-4\",\n caption_label: \"text-sm font-medium hidden\",\n nav: \"space-x-1 flex items-center\",\n nav_button: cn(\n buttonVariants({ variant: \"outline-solid\" }),\n \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n ),\n nav_button_previous: \"absolute left-1\",\n nav_button_next: \"absolute right-1\",\n table: \"w-full border-collapse space-y-1\",\n head_row: \"flex\",\n head_cell:\n \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n row: \"flex w-full mt-2\",\n cell: cn(\n \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md\",\n props.mode === \"range\"\n ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n : \"[&:has([aria-selected])]:rounded-md\"\n ),\n day: cn(\n buttonVariants({ variant: \"ghost\" }),\n \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n ),\n day_range_start: \"day-range-start\",\n day_range_end: \"day-range-end\",\n day_selected:\n \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n day_today: \"bg-accent text-accent-foreground\",\n day_outside:\n \"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground\",\n day_disabled: \"text-muted-foreground opacity-50\",\n day_range_middle:\n \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n day_hidden: \"invisible\",\n ...classNames,\n }}\n components={{\n IconLeft: ({ className, ...props }) => (\n <ChevronLeft className={cn(\"h-4 w-4\", className)} {...props} />\n ),\n IconRight: ({ className, ...props }) => (\n <ChevronRight className={cn(\"h-4 w-4\", className)} {...props} />\n ),\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"],"names":["Calendar","className","classNames","showOutsideDays","props","jsx","DayPicker","cn","buttonVariants","ChevronLeft","ChevronRight"],"mappings":";;;;;;;AAWA,SAASA,EAAS;AAAA,EAChB,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,GAAGC;AACL,GAAkB;AAChB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,iBAAAH;AAAA,MACA,WAAWI,EAAG,OAAON,CAAS;AAAA,MAC9B,YAAY;AAAA,QACV,mBAAkB;AAAA,QAClB,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK;AAAA,QACL,YAAYM;AAAA,UACVC,EAAe,EAAE,SAAS,iBAAiB;AAAA,UAC3C;AAAA,QAAA;AAAA,QAEF,qBAAqB;AAAA,QACrB,iBAAiB;AAAA,QACjB,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WACE;AAAA,QACF,KAAK;AAAA,QACL,MAAMD;AAAA,UACJ;AAAA,UACAH,EAAM,SAAS,UACX,yKACA;AAAA,QAAA;AAAA,QAEN,KAAKG;AAAA,UACHC,EAAe,EAAE,SAAS,SAAS;AAAA,UACnC;AAAA,QAAA;AAAA,QAEF,iBAAiB;AAAA,QACjB,eAAe;AAAA,QACf,cACE;AAAA,QACF,WAAW;AAAA,QACX,aACE;AAAA,QACF,cAAc;AAAA,QACd,kBACE;AAAA,QACF,YAAY;AAAA,QACZ,GAAGN;AAAA,MAAA;AAAA,MAEL,YAAY;AAAA,QACV,UAAU,CAAC,EAAE,WAAAD,GAAW,GAAGG,EAAAA,MACzB,gBAAAC,EAACI,GAAA,EAAY,WAAWF,EAAG,WAAWN,CAAS,GAAI,GAAGG,GAAO;AAAA,QAE/D,WAAW,CAAC,EAAE,WAAAH,GAAW,GAAGG,EAAAA,MAC1B,gBAAAC,EAACK,GAAA,EAAa,WAAWH,EAAG,WAAWN,CAAS,GAAI,GAAGG,EAAAA,CAAO;AAAA,MAAA;AAAA,MAGjE,GAAGA;AAAA,IAAA;AAAA,EAAA;AAGV;AACAJ,EAAS,cAAc;"}
|
package/Combobox/Combobox.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ComboboxProps } from './Combobox.types';
|
|
2
|
-
export declare const Combobox:
|
|
2
|
+
export declare const Combobox: <Data extends object>(props: ComboboxProps<Data>) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
//# sourceMappingURL=Combobox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAGL,aAAa,EACd,MAAM,kBAAkB,CAAC;AAqB1B,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAGL,aAAa,EACd,MAAM,kBAAkB,CAAC;AAqB1B,eAAO,MAAM,QAAQ,GAAI,IAAI,SAAS,MAAM,EAAI,OAAO,aAAa,CAAC,IAAI,CAAC,4CAiRzE,CAAA"}
|
package/Combobox/Combobox.js
CHANGED
|
@@ -1,203 +1,218 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import {
|
|
3
|
-
import { LoadingMask as
|
|
1
|
+
import { jsx as e, jsxs as p, Fragment as j } from "react/jsx-runtime";
|
|
2
|
+
import { useState as l, useCallback as f, useEffect as le, useMemo as A, useLayoutEffect as se } from "react";
|
|
3
|
+
import { LoadingMask as X } from "../LoadingMask/LoadingMask.js";
|
|
4
4
|
import "../LoadingMask/RenderLoadingMask.js";
|
|
5
|
-
import { Popover as
|
|
6
|
-
import { Button as
|
|
5
|
+
import { Popover as ce, PopoverTrigger as de, PopoverContent as pe } from "../Popover/Popover.js";
|
|
6
|
+
import { Button as fe } from "../Button/Button.js";
|
|
7
7
|
import "../Button/buttonVariants.js";
|
|
8
|
-
import { Command as
|
|
9
|
-
import { cn as
|
|
10
|
-
import { useDebounceCallback as
|
|
11
|
-
import { X as
|
|
12
|
-
import { ComboboxOptions as
|
|
13
|
-
const
|
|
14
|
-
const { value:
|
|
15
|
-
if (!
|
|
16
|
-
const y = [
|
|
17
|
-
return y ||
|
|
18
|
-
},
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
if (O) return [O, ...i];
|
|
44
|
-
}
|
|
45
|
-
return i;
|
|
46
|
-
});
|
|
8
|
+
import { Command as me, CommandInput as ue, CommandList as he, CommandGroup as ge, CommandEmpty as _, CommandItem as be } from "../Command/Command.js";
|
|
9
|
+
import { cn as F } from "@oneplatformdev/utils";
|
|
10
|
+
import { useDebounceCallback as ye } from "@oneplatformdev/hooks";
|
|
11
|
+
import { X as ve, ChevronsUpDown as Ce } from "lucide-react";
|
|
12
|
+
import { ComboboxOptions as we } from "./ComboboxOptions.js";
|
|
13
|
+
const xe = (O) => {
|
|
14
|
+
const { value: n, flattenOptions: S = [], selectedOption: L } = O;
|
|
15
|
+
if (!n) return "No value for render label";
|
|
16
|
+
const y = [S.find((m) => String(m.value).toLowerCase() === String(n).toLowerCase()), L].filter(Boolean).map((m) => m.label).find(Boolean);
|
|
17
|
+
return y || n;
|
|
18
|
+
}, Ae = (O) => {
|
|
19
|
+
const {
|
|
20
|
+
value: n,
|
|
21
|
+
onChange: S,
|
|
22
|
+
placeholder: L,
|
|
23
|
+
disabled: T,
|
|
24
|
+
searchLabel: y = "Type to search...",
|
|
25
|
+
fetchOptions: m,
|
|
26
|
+
options: I,
|
|
27
|
+
emptyLabel: R = "No options",
|
|
28
|
+
emptyAction: v,
|
|
29
|
+
commandInputAction: B,
|
|
30
|
+
listHeadAction: C,
|
|
31
|
+
listFooterAction: w,
|
|
32
|
+
onMount: k,
|
|
33
|
+
defaultNodeDisabled: J,
|
|
34
|
+
defaultNodeMatched: K,
|
|
35
|
+
defaultNodeMuted: Q,
|
|
36
|
+
defaultNodeInteractive: Y
|
|
37
|
+
} = O, [G, U] = l(!1), [s, D] = l(!1), [r, M] = l(""), [u, P] = l(), [a, c] = l(!1), [o, Z] = l([]), [$, ee] = l([]), h = f((t) => {
|
|
38
|
+
const g = (E) => {
|
|
39
|
+
const i = [], V = (x) => {
|
|
40
|
+
if (x)
|
|
41
|
+
for (const b of x)
|
|
42
|
+
i.push(b), b.items && b.items.length && V(b.items);
|
|
47
43
|
};
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
44
|
+
V(E), ee((x) => {
|
|
45
|
+
if (!i.find((N) => !!n && String(N.value) === String(n))) {
|
|
46
|
+
const N = u || x.find((ie) => !!n && String(ie.value) === String(n));
|
|
47
|
+
if (N) return [N, ...i];
|
|
48
|
+
}
|
|
49
|
+
return i;
|
|
51
50
|
});
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
51
|
+
};
|
|
52
|
+
Z((E) => {
|
|
53
|
+
const i = typeof t == "function" ? t(E) : t;
|
|
54
|
+
return g(i), i;
|
|
55
|
+
});
|
|
56
|
+
}, [u, n]);
|
|
57
|
+
le(() => {
|
|
58
|
+
I?.length && h(I);
|
|
59
|
+
}, [I]);
|
|
60
|
+
const te = async () => {
|
|
61
|
+
s || (W(), M(""));
|
|
62
|
+
}, W = f(async (t) => {
|
|
63
|
+
c(!0);
|
|
64
|
+
try {
|
|
65
|
+
const g = await m(t);
|
|
66
|
+
h(g);
|
|
67
|
+
} catch (g) {
|
|
68
|
+
console.error("Unexpected error while get option:", g);
|
|
69
|
+
} finally {
|
|
70
|
+
c(!1);
|
|
71
|
+
}
|
|
72
|
+
}, [h]), ne = ye(W, 1e3, {
|
|
73
|
+
leading: !1,
|
|
74
|
+
trailing: !0
|
|
75
|
+
}), oe = f((t) => {
|
|
76
|
+
c(!0), M(t), ne(t);
|
|
77
|
+
}, []), q = f((t) => {
|
|
78
|
+
S(t.value), P(t), c(!1);
|
|
79
|
+
}, []), ae = f(() => {
|
|
80
|
+
q({ value: "", label: "" }), P(void 0), c(!1);
|
|
81
|
+
}, []), z = A(() => !!r && !o.length && !a, [a, o.length, r]), H = A(() => !o.length && !a, [a, o.length, r]), d = A(() => ({
|
|
82
|
+
options: o,
|
|
83
|
+
setOptions: h,
|
|
84
|
+
selectedOption: u,
|
|
85
|
+
setSelectedOption: P,
|
|
86
|
+
search: r || "",
|
|
87
|
+
setSearch: M,
|
|
88
|
+
open: s,
|
|
89
|
+
setOpen: D,
|
|
90
|
+
loading: a,
|
|
91
|
+
setLoading: c,
|
|
92
|
+
isEmptyList: H,
|
|
93
|
+
isSearchedEmptyList: z
|
|
94
|
+
}), [a, s, o, r, u, H, z, h]), re = f(async () => {
|
|
95
|
+
if (k) {
|
|
96
|
+
U(!0);
|
|
60
97
|
try {
|
|
61
|
-
|
|
62
|
-
h(b);
|
|
63
|
-
} catch (b) {
|
|
64
|
-
console.error("Unexpected error while get option:", b);
|
|
98
|
+
await k(d);
|
|
65
99
|
} finally {
|
|
66
|
-
|
|
100
|
+
U(!1);
|
|
67
101
|
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
return ae(() => {
|
|
101
|
-
te();
|
|
102
|
-
}, []), /* @__PURE__ */ e("div", { className: "w-full", ref: m, children: /* @__PURE__ */ d(
|
|
103
|
-
ie,
|
|
104
|
-
{
|
|
105
|
-
open: l,
|
|
106
|
-
onOpenChange: (t) => {
|
|
107
|
-
B(t), t && Y();
|
|
108
|
-
},
|
|
109
|
-
children: [
|
|
110
|
-
/* @__PURE__ */ e(se, { asChild: !0, className: "border-input", children: /* @__PURE__ */ e(
|
|
111
|
-
ce,
|
|
112
|
-
{
|
|
113
|
-
variant: "outline",
|
|
114
|
-
role: "combobox",
|
|
115
|
-
size: "lg",
|
|
116
|
-
"aria-expanded": l,
|
|
117
|
-
className: R(
|
|
118
|
-
"relative w-full justify-between font-normal text-sm bg-transparent relative p-3",
|
|
119
|
-
"border border-border",
|
|
120
|
-
l && "border-2 outline-hidden ring-1 ring-ring",
|
|
121
|
-
"focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
|
|
102
|
+
}
|
|
103
|
+
}, [k, d]);
|
|
104
|
+
return se(() => {
|
|
105
|
+
re();
|
|
106
|
+
}, []), /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ p(
|
|
107
|
+
ce,
|
|
108
|
+
{
|
|
109
|
+
open: s,
|
|
110
|
+
onOpenChange: (t) => {
|
|
111
|
+
D(t), t && te();
|
|
112
|
+
},
|
|
113
|
+
children: [
|
|
114
|
+
/* @__PURE__ */ e(de, { asChild: !0, className: "border-input", children: /* @__PURE__ */ e(
|
|
115
|
+
fe,
|
|
116
|
+
{
|
|
117
|
+
color: "secondary",
|
|
118
|
+
role: "combobox",
|
|
119
|
+
"aria-expanded": s,
|
|
120
|
+
className: F(
|
|
121
|
+
"relative w-full justify-between font-normal text-sm bg-transparent",
|
|
122
|
+
"border border-border",
|
|
123
|
+
s && "border-2 outline-hidden ring-1 ring-ring",
|
|
124
|
+
"focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
|
|
125
|
+
),
|
|
126
|
+
disabled: T || G,
|
|
127
|
+
children: G ? /* @__PURE__ */ e(X, { fullWidth: !0 }) : /* @__PURE__ */ p(j, { children: [
|
|
128
|
+
/* @__PURE__ */ e(
|
|
129
|
+
"span",
|
|
130
|
+
{
|
|
131
|
+
className: "truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap",
|
|
132
|
+
children: n ? xe({ value: n, flattenOptions: $, selectedOption: u }) : /* @__PURE__ */ e("span", { className: "text-gray-400", children: L })
|
|
133
|
+
}
|
|
122
134
|
),
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
135
|
+
n ? /* @__PURE__ */ e(
|
|
136
|
+
"div",
|
|
137
|
+
{
|
|
138
|
+
className: F(
|
|
139
|
+
"absolute top-0 right-1",
|
|
140
|
+
"flex items-center justify-center",
|
|
141
|
+
"w-9 aspect-square [&_svg]:size-5",
|
|
142
|
+
"opacity-50 cursor-pointer hover:opacity-100"
|
|
143
|
+
),
|
|
144
|
+
onClick: (t) => {
|
|
145
|
+
t.stopPropagation(), ae();
|
|
146
|
+
},
|
|
147
|
+
children: /* @__PURE__ */ e(ve, {})
|
|
148
|
+
}
|
|
149
|
+
) : /* @__PURE__ */ e(Ce, { className: "opacity-50 w-4 h-4" })
|
|
150
|
+
] })
|
|
151
|
+
}
|
|
152
|
+
) }),
|
|
153
|
+
/* @__PURE__ */ e(
|
|
154
|
+
pe,
|
|
155
|
+
{
|
|
156
|
+
className: "w-(--radix-popper-anchor-width) max-w-none p-0",
|
|
157
|
+
align: "start",
|
|
158
|
+
children: /* @__PURE__ */ p(me, { shouldFilter: !1, children: [
|
|
159
|
+
/* @__PURE__ */ e(
|
|
160
|
+
ue,
|
|
161
|
+
{
|
|
162
|
+
placeholder: y,
|
|
163
|
+
value: r,
|
|
164
|
+
onValueChange: oe
|
|
165
|
+
}
|
|
166
|
+
),
|
|
167
|
+
typeof B == "function" ? B(d) : B,
|
|
168
|
+
/* @__PURE__ */ e(he, { children: /* @__PURE__ */ p(ge, { className: F(!o.length && "p-0 shadow-none"), children: [
|
|
169
|
+
a && /* @__PURE__ */ e(X, { fullWidth: !0 }),
|
|
170
|
+
!a && !!r && /* @__PURE__ */ e(j, { children: v ? /* @__PURE__ */ p(_, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
|
|
171
|
+
/* @__PURE__ */ e("span", { children: R }),
|
|
172
|
+
typeof v == "function" ? v(d) : v
|
|
173
|
+
] }) : /* @__PURE__ */ e(_, { children: R }) }),
|
|
174
|
+
!a && /* @__PURE__ */ p(j, { children: [
|
|
175
|
+
!!o.length && C && /* @__PURE__ */ e(
|
|
176
|
+
be,
|
|
177
|
+
{
|
|
178
|
+
asChild: !0,
|
|
179
|
+
className: "w-full",
|
|
180
|
+
children: typeof C == "function" ? C(d) : C
|
|
137
181
|
},
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
ue,
|
|
172
|
-
{
|
|
173
|
-
asChild: !0,
|
|
174
|
-
className: "w-full",
|
|
175
|
-
children: typeof w == "function" ? w(g) : w
|
|
176
|
-
},
|
|
177
|
-
"combobox-list-head-action"
|
|
178
|
-
),
|
|
179
|
-
/* @__PURE__ */ e(
|
|
180
|
-
ve,
|
|
181
|
-
{
|
|
182
|
-
value: n,
|
|
183
|
-
options: r,
|
|
184
|
-
onChangeOption: U,
|
|
185
|
-
setOpen: B
|
|
186
|
-
}
|
|
187
|
-
)
|
|
188
|
-
] })
|
|
189
|
-
]
|
|
190
|
-
}
|
|
191
|
-
) })
|
|
192
|
-
] })
|
|
193
|
-
}
|
|
194
|
-
)
|
|
195
|
-
]
|
|
196
|
-
}
|
|
197
|
-
) });
|
|
198
|
-
}
|
|
199
|
-
);
|
|
182
|
+
"combobox-list-head-action"
|
|
183
|
+
),
|
|
184
|
+
/* @__PURE__ */ e(
|
|
185
|
+
we,
|
|
186
|
+
{
|
|
187
|
+
searchTerm: r,
|
|
188
|
+
value: n,
|
|
189
|
+
options: o,
|
|
190
|
+
onChangeOption: q,
|
|
191
|
+
setOpen: D,
|
|
192
|
+
defaultNodeDisabled: J,
|
|
193
|
+
defaultNodeMatched: K,
|
|
194
|
+
defaultNodeMuted: Q,
|
|
195
|
+
defaultNodeInteractive: Y
|
|
196
|
+
}
|
|
197
|
+
)
|
|
198
|
+
] })
|
|
199
|
+
] }) }),
|
|
200
|
+
!!o.length && w && /* @__PURE__ */ e(
|
|
201
|
+
"div",
|
|
202
|
+
{
|
|
203
|
+
"data-slot": "command-footer-wrapper",
|
|
204
|
+
className: "flex w-full min-h-9 items-center gap-2 border-t px-3",
|
|
205
|
+
children: typeof w == "function" ? w(d) : w
|
|
206
|
+
}
|
|
207
|
+
)
|
|
208
|
+
] })
|
|
209
|
+
}
|
|
210
|
+
)
|
|
211
|
+
]
|
|
212
|
+
}
|
|
213
|
+
) });
|
|
214
|
+
};
|
|
200
215
|
export {
|
|
201
|
-
|
|
216
|
+
Ae as Combobox
|
|
202
217
|
};
|
|
203
218
|
//# sourceMappingURL=Combobox.js.map
|
package/Combobox/Combobox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.js","sources":["../../src/Combobox/Combobox.tsx"],"sourcesContent":["import {\n Dispatch,\n forwardRef, SetStateAction,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useState,\n} from 'react';\nimport { LoadingMask } from '../LoadingMask';\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover';\nimport { Button } from '../Button';\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from '../Command';\nimport { cn } from '@oneplatformdev/utils';\nimport { useDebounceCallback } from '@oneplatformdev/hooks';\nimport { ChevronsUpDown, X } from 'lucide-react';\nimport {\n ComboboxCallbackStateParams,\n ComboboxOption,\n ComboboxProps,\n} from './Combobox.types';\nimport { ComboboxOptions } from './ComboboxOptions'; // TODO: refactor next component | nlt code\n\n\nconst getSelectRenderLabel = (params: {\n value: ComboboxProps['value'];\n flattenOptions: ComboboxOption[];\n selectedOption?: ComboboxOption;\n}): string => {\n const { value, flattenOptions = [], selectedOption } = params;\n if(!value) return 'No value for render label';\n const flattenedOption = flattenOptions.find(o => String(o.value).toLowerCase() === String(value).toLowerCase());\n const label = [flattenedOption, selectedOption]\n .filter(Boolean)\n .map(o => o!.label)\n .find(Boolean);\n if(!label) return value;\n return label;\n}\n\n// TODO: refactor next component | nlt code\nexport const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(\n (props, ref) => {\n const {\n value,\n onChange,\n placeholder,\n disabled,\n searchLabel = 'Type to search...',\n fetchOptions,\n options: itemOptions,\n emptyLabel = 'No options',\n emptyAction,\n commandInputAction,\n listHeadAction,\n onMount,\n } = props;\n const [initialLoading, setInitialLoading] = useState(false);\n const [open, setOpen] = useState(false);\n const [searchTerm, setSearchTerm] = useState('');\n const [selectedOption, setSelectedOption] = useState<ComboboxOption>();\n const [loading, setLoading] = useState(false);\n\n const [options, setOptionsDispatch] = useState<ComboboxOption[]>([]);\n const [flattenOptions, setFlattenOptions] = useState<ComboboxOption[]>([]);\n const setOptions: Dispatch<SetStateAction<ComboboxOption[]>> = useCallback((stater) => {\n const flatten = (next: ComboboxOption[]) => {\n const res: ComboboxOption[] = [];\n const walk = (nodes?: ComboboxOption[]) => {\n if (!nodes) return;\n for (const node of nodes) {\n res.push(node);\n if (node.items && node.items.length) walk(node.items);\n }\n };\n walk(next);\n setFlattenOptions((prev) => {\n const isIncludedInRes = res.find(o => !!value && String(o.value) === String(value));\n\n if(!isIncludedInRes) {\n const current = selectedOption || prev.find(o => !!value && String(o.value) === String(value))\n if(current) return [current, ...res];\n }\n\n return res;\n });\n }\n setOptionsDispatch((prev) => {\n const next: ComboboxOption[] = typeof stater === 'function' ? stater(prev) : stater;\n flatten(next);\n return next;\n });\n }, [selectedOption, value])\n\n useEffect(() => {\n itemOptions?.length && setOptions(itemOptions);\n }, [itemOptions]);\n\n const handlePopoverOpen = async () => {\n if (!open) {\n void getData();\n setSearchTerm('');\n }\n };\n\n const getData = useCallback(async (search?: string) => {\n setLoading(true);\n try {\n const fetchedOptions = await fetchOptions(search);\n setOptions(fetchedOptions);\n } catch (error) {\n console.error('Unexpected error while get option:', error);\n } finally {\n setLoading(false);\n }\n }, [setOptions]);\n\n const debouncedGetData = useDebounceCallback(getData, 1000, {\n leading: false,\n trailing: true,\n });\n\n const handleSearchChange = useCallback((value: string) => {\n setLoading(true);\n setSearchTerm(value);\n debouncedGetData(value);\n }, []);\n\n const onChangeOption = useCallback((option: ComboboxOption) => {\n onChange(option.value);\n setSelectedOption(option);\n setLoading(false);\n }, []);\n\n const handleClearSelection = useCallback(() => {\n onChangeOption({ value: '', label: '' });\n setSelectedOption(undefined);\n setLoading(false);\n }, []);\n\n const isSearchedEmptyList = useMemo(() => {\n return Boolean(searchTerm) && !options.length && !loading;\n }, [loading, options.length, searchTerm])\n\n const isEmptyList = useMemo(() => {\n return !options.length && !loading;\n }, [loading, options.length, searchTerm])\n\n const comboboxCallbackStateParams =\n useMemo((): ComboboxCallbackStateParams => {\n return {\n options,\n setOptions,\n selectedOption,\n setSelectedOption,\n search: searchTerm || '',\n setSearch: setSearchTerm,\n open,\n setOpen,\n loading,\n setLoading,\n isEmptyList,\n isSearchedEmptyList,\n };\n }, [loading, open, options, searchTerm, selectedOption, isEmptyList, isSearchedEmptyList, setOptions]);\n\n const runOnMount = useCallback(async () => {\n if (!onMount) return;\n setInitialLoading(true);\n try {\n await onMount(comboboxCallbackStateParams);\n } finally {\n setInitialLoading(false);\n }\n }, [onMount, comboboxCallbackStateParams]);\n\n useLayoutEffect(() => {\n runOnMount();\n }, []);\n\n return (\n <div className=\"w-full\" ref={ref}>\n <Popover\n open={open}\n onOpenChange={(newOpen) => {\n setOpen(newOpen);\n if (newOpen) handlePopoverOpen();\n }}\n >\n <PopoverTrigger asChild className=\"border-input\">\n <Button\n variant=\"outline\"\n role=\"combobox\"\n size=\"lg\"\n aria-expanded={open}\n className={cn(\n 'relative w-full justify-between font-normal text-sm bg-transparent relative p-3',\n 'border border-border',\n open && 'border-2 outline-hidden ring-1 ring-ring',\n 'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring'\n )}\n disabled={disabled || initialLoading}\n >\n {initialLoading ? (\n <LoadingMask fullWidth />\n ) : (\n <>\n <span className=\"truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap\">\n {value\n ? getSelectRenderLabel({ value, flattenOptions, selectedOption })\n : <span className=\"text-gray-400\">{placeholder}</span>\n }\n </span>\n {value ? (\n <div\n className={cn(\n 'absolute top-0 right-1',\n 'flex items-center justify-center',\n 'w-9 aspect-square [&_svg]:size-5',\n 'opacity-50 cursor-pointer hover:opacity-100'\n )}\n onClick={(e) => {\n e.stopPropagation();\n handleClearSelection();\n }}\n >\n <X />\n </div>\n ) : (\n <ChevronsUpDown className=\"opacity-50 w-4 h-4\" />\n )}\n </>\n )}\n </Button>\n </PopoverTrigger>\n <PopoverContent\n className=\"w-(--radix-popper-anchor-width) max-w-none p-0\"\n align=\"start\"\n >\n <Command shouldFilter={false}>\n <CommandInput\n placeholder={searchLabel}\n value={searchTerm}\n onValueChange={handleSearchChange}\n />\n {typeof commandInputAction === 'function'\n ? commandInputAction(comboboxCallbackStateParams)\n : commandInputAction}\n <CommandList>\n <CommandGroup\n className={cn(!options.length && 'p-0 shadow-none')}\n >\n {loading && <LoadingMask fullWidth />}\n {!loading && Boolean(searchTerm) && (\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(comboboxCallbackStateParams)\n : emptyAction}\n </CommandEmpty>\n ) : (\n <CommandEmpty>{emptyLabel}</CommandEmpty>\n )}\n </>\n )}\n {!loading && (\n <>\n {Boolean(options.length) && listHeadAction && (\n <CommandItem\n key='combobox-list-head-action'\n asChild\n className='w-full'\n >\n {typeof listHeadAction === 'function'\n ? listHeadAction(comboboxCallbackStateParams)\n : listHeadAction}\n </CommandItem>\n )}\n <ComboboxOptions\n value={value}\n options={options}\n onChangeOption={onChangeOption}\n setOpen={setOpen}\n />\n </>\n )}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n </div>\n );\n }\n);\n"],"names":["getSelectRenderLabel","params","value","flattenOptions","selectedOption","label","o","Combobox","forwardRef","props","ref","onChange","placeholder","disabled","searchLabel","fetchOptions","itemOptions","emptyLabel","emptyAction","commandInputAction","listHeadAction","onMount","initialLoading","setInitialLoading","useState","open","setOpen","searchTerm","setSearchTerm","setSelectedOption","loading","setLoading","options","setOptionsDispatch","setFlattenOptions","setOptions","useCallback","stater","flatten","next","res","walk","nodes","node","prev","current","useEffect","handlePopoverOpen","getData","search","fetchedOptions","error","debouncedGetData","useDebounceCallback","handleSearchChange","onChangeOption","option","handleClearSelection","isSearchedEmptyList","useMemo","isEmptyList","comboboxCallbackStateParams","runOnMount","useLayoutEffect","jsx","jsxs","Popover","newOpen","PopoverTrigger","Button","cn","LoadingMask","Fragment","e","X","ChevronsUpDown","PopoverContent","Command","CommandInput","CommandList","CommandGroup","CommandEmpty","CommandItem","ComboboxOptions"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Combobox.js","sources":["../../src/Combobox/Combobox.tsx"],"sourcesContent":["import {\n Dispatch,\n SetStateAction,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useState,\n} from 'react';\nimport { LoadingMask } from '../LoadingMask';\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover';\nimport { Button } from '../Button';\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from '../Command';\nimport { cn } from '@oneplatformdev/utils';\nimport { useDebounceCallback } from '@oneplatformdev/hooks';\nimport { ChevronsUpDown, X } from 'lucide-react';\nimport {\n ComboboxCallbackStateParams,\n ComboboxOption,\n ComboboxProps,\n} from './Combobox.types';\nimport { ComboboxOptions } from './ComboboxOptions';\n\n// TODO: refactor next component | nlt code\nconst getSelectRenderLabel = <Data extends object>(params: {\n value: ComboboxProps<Data>['value'];\n flattenOptions: ComboboxOption<Data>[];\n selectedOption?: ComboboxOption<Data>;\n}): string => {\n const { value, flattenOptions = [], selectedOption } = params;\n if (!value) return 'No value for render label';\n const flattenedOption = flattenOptions.find(o => String(o.value).toLowerCase() === String(value).toLowerCase());\n const label = [ flattenedOption, selectedOption ]\n .filter(Boolean)\n .map(o => o!.label)\n .find(Boolean);\n if (!label) return value;\n return label;\n}\n\n// TODO: refactor next component | nlt code\nexport const Combobox = <Data extends object, >(props: ComboboxProps<Data>) => {\n const {\n value,\n onChange,\n placeholder,\n disabled,\n searchLabel = 'Type to search...',\n fetchOptions,\n options: itemOptions,\n emptyLabel = 'No options',\n emptyAction,\n commandInputAction,\n listHeadAction,\n listFooterAction,\n onMount,\n defaultNodeDisabled,\n defaultNodeMatched,\n defaultNodeMuted,\n defaultNodeInteractive,\n } = props;\n const [ initialLoading, setInitialLoading ] = useState(false);\n const [ open, setOpen ] = useState(false);\n const [ searchTerm, setSearchTerm ] = useState('');\n const [ selectedOption, setSelectedOption ] = useState<ComboboxOption<Data>>();\n const [ loading, setLoading ] = useState(false);\n\n const [ options, setOptionsDispatch ] = useState<ComboboxOption<Data>[]>([]);\n const [ flattenOptions, setFlattenOptions ] = useState<ComboboxOption<Data>[]>([]);\n const setOptions: Dispatch<SetStateAction<ComboboxOption<Data>[]>> = useCallback((stater) => {\n const flatten = (next: ComboboxOption<Data>[]) => {\n const res: ComboboxOption<Data>[] = [];\n const walk = (nodes?: ComboboxOption<Data>[]) => {\n if (!nodes) return;\n for (const node of nodes) {\n res.push(node);\n if (node.items && node.items.length) walk(node.items);\n }\n };\n walk(next);\n setFlattenOptions((prev) => {\n const isIncludedInRes = res.find(o => !!value && String(o.value) === String(value));\n\n if (!isIncludedInRes) {\n const current = selectedOption || prev.find(o => !!value && String(o.value) === String(value))\n if (current) return [ current, ...res ];\n }\n\n return res;\n });\n }\n setOptionsDispatch((prev) => {\n const next: ComboboxOption<Data>[] = typeof stater === 'function' ? stater(prev) : stater;\n flatten(next);\n return next;\n });\n }, [ selectedOption, value ])\n\n useEffect(() => {\n itemOptions?.length && setOptions(itemOptions);\n }, [ itemOptions ]);\n\n const handlePopoverOpen = async () => {\n if (!open) {\n void getData();\n setSearchTerm('');\n }\n };\n\n const getData = useCallback(async (search?: string) => {\n setLoading(true);\n try {\n const fetchedOptions = await fetchOptions(search);\n setOptions(fetchedOptions);\n } catch (error) {\n console.error('Unexpected error while get option:', error);\n } finally {\n setLoading(false);\n }\n }, [ setOptions ]);\n\n const debouncedGetData = useDebounceCallback(getData, 1000, {\n leading: false,\n trailing: true,\n });\n\n const handleSearchChange = useCallback((value: string) => {\n setLoading(true);\n setSearchTerm(value);\n debouncedGetData(value);\n }, []);\n\n const onChangeOption = useCallback((option: ComboboxOption<Data>) => {\n onChange(option.value);\n setSelectedOption(option);\n setLoading(false);\n }, []);\n\n const handleClearSelection = useCallback(() => {\n onChangeOption({ value: '', label: '' });\n setSelectedOption(undefined);\n setLoading(false);\n }, []);\n\n const isSearchedEmptyList = useMemo(() => {\n return Boolean(searchTerm) && !options.length && !loading;\n }, [ loading, options.length, searchTerm ])\n\n const isEmptyList = useMemo(() => {\n return !options.length && !loading;\n }, [ loading, options.length, searchTerm ])\n\n const comboboxCallbackStateParams =\n useMemo((): ComboboxCallbackStateParams<Data> => {\n return {\n options,\n setOptions,\n selectedOption,\n setSelectedOption,\n search: searchTerm || '',\n setSearch: setSearchTerm,\n open,\n setOpen,\n loading,\n setLoading,\n isEmptyList,\n isSearchedEmptyList,\n };\n }, [ loading, open, options, searchTerm, selectedOption, isEmptyList, isSearchedEmptyList, setOptions ]);\n\n const runOnMount = useCallback(async () => {\n if (!onMount) return;\n setInitialLoading(true);\n try {\n await onMount(comboboxCallbackStateParams);\n } finally {\n setInitialLoading(false);\n }\n }, [ onMount, comboboxCallbackStateParams ]);\n\n useLayoutEffect(() => {\n runOnMount();\n }, []);\n\n return (\n <div className=\"w-full\">\n <Popover\n open={open}\n onOpenChange={(newOpen) => {\n setOpen(newOpen);\n if (newOpen) handlePopoverOpen();\n }}\n >\n <PopoverTrigger asChild className=\"border-input\">\n <Button\n color='secondary'\n role=\"combobox\"\n aria-expanded={open}\n className={cn(\n 'relative w-full justify-between font-normal text-sm bg-transparent',\n 'border border-border',\n open && 'border-2 outline-hidden ring-1 ring-ring',\n 'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring'\n )}\n disabled={disabled || initialLoading}\n >\n {initialLoading ? (\n <LoadingMask fullWidth/>\n ) : (\n <>\n <span\n className=\"truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap\">\n {value\n ? getSelectRenderLabel({ value, flattenOptions, selectedOption })\n : <span className=\"text-gray-400\">{placeholder}</span>\n }\n </span>\n {value ? (\n <div\n className={cn(\n 'absolute top-0 right-1',\n 'flex items-center justify-center',\n 'w-9 aspect-square [&_svg]:size-5',\n 'opacity-50 cursor-pointer hover:opacity-100'\n )}\n onClick={(e) => {\n e.stopPropagation();\n handleClearSelection();\n }}\n >\n <X/>\n </div>\n ) : (\n <ChevronsUpDown className=\"opacity-50 w-4 h-4\"/>\n )}\n </>\n )}\n </Button>\n </PopoverTrigger>\n <PopoverContent\n className=\"w-(--radix-popper-anchor-width) max-w-none p-0\"\n align=\"start\"\n >\n <Command shouldFilter={false}>\n <CommandInput\n placeholder={searchLabel}\n value={searchTerm}\n onValueChange={handleSearchChange}\n />\n {typeof commandInputAction === 'function'\n ? commandInputAction(comboboxCallbackStateParams)\n : commandInputAction}\n <CommandList>\n <CommandGroup className={cn(!options.length && 'p-0 shadow-none')}>\n {loading && <LoadingMask fullWidth/>}\n {!loading && Boolean(searchTerm) && (\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(comboboxCallbackStateParams)\n : emptyAction}\n </CommandEmpty>\n ) : (\n <CommandEmpty>{emptyLabel}</CommandEmpty>\n )}\n </>\n )}\n {!loading && (\n <>\n {Boolean(options.length) && listHeadAction && (\n <CommandItem\n key='combobox-list-head-action'\n asChild\n className='w-full'\n >\n {typeof listHeadAction === 'function'\n ? listHeadAction(comboboxCallbackStateParams)\n : listHeadAction}\n </CommandItem>\n )}\n <ComboboxOptions\n searchTerm={searchTerm}\n value={value}\n options={options}\n onChangeOption={onChangeOption}\n setOpen={setOpen}\n defaultNodeDisabled={defaultNodeDisabled}\n defaultNodeMatched={defaultNodeMatched}\n defaultNodeMuted={defaultNodeMuted}\n defaultNodeInteractive={defaultNodeInteractive}\n />\n </>\n )}\n </CommandGroup>\n </CommandList>\n\n {/*LIST FOOTER ACTION*/}\n {Boolean(options.length) && listFooterAction && (\n <div\n data-slot=\"command-footer-wrapper\"\n className=\"flex w-full min-h-9 items-center gap-2 border-t px-3\"\n >\n {typeof listFooterAction === 'function'\n ? listFooterAction(comboboxCallbackStateParams)\n : listFooterAction}\n </div>\n )}\n </Command>\n </PopoverContent>\n </Popover>\n </div>\n );\n}\n"],"names":["getSelectRenderLabel","params","value","flattenOptions","selectedOption","label","o","Combobox","props","onChange","placeholder","disabled","searchLabel","fetchOptions","itemOptions","emptyLabel","emptyAction","commandInputAction","listHeadAction","listFooterAction","onMount","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","initialLoading","setInitialLoading","useState","open","setOpen","searchTerm","setSearchTerm","setSelectedOption","loading","setLoading","options","setOptionsDispatch","setFlattenOptions","setOptions","useCallback","stater","flatten","next","res","walk","nodes","node","prev","current","useEffect","handlePopoverOpen","getData","search","fetchedOptions","error","debouncedGetData","useDebounceCallback","handleSearchChange","onChangeOption","option","handleClearSelection","isSearchedEmptyList","useMemo","isEmptyList","comboboxCallbackStateParams","runOnMount","useLayoutEffect","jsx","jsxs","Popover","newOpen","PopoverTrigger","Button","cn","LoadingMask","Fragment","e","X","ChevronsUpDown","PopoverContent","Command","CommandInput","CommandList","CommandGroup","CommandEmpty","CommandItem","ComboboxOptions"],"mappings":";;;;;;;;;;;;AA+BA,MAAMA,KAAuB,CAAsBC,MAIrC;AACZ,QAAM,EAAE,OAAAC,GAAO,gBAAAC,IAAiB,CAAA,GAAI,gBAAAC,MAAmBH;AACvD,MAAI,CAACC,EAAO,QAAO;AAEnB,QAAMG,IAAQ,CADUF,EAAe,KAAK,CAAAG,MAAK,OAAOA,EAAE,KAAK,EAAE,YAAA,MAAkB,OAAOJ,CAAK,EAAE,aAAa,GAC7EE,CAAe,EAC7C,OAAO,OAAO,EACd,IAAI,CAAAE,MAAKA,EAAG,KAAK,EACjB,KAAK,OAAO;AACf,SAAKD,KAAcH;AAErB,GAGaK,KAAW,CAAwBC,MAA+B;AAC7E,QAAM;AAAA,IACJ,OAAAN;AAAA,IACA,UAAAO;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,cAAAC;AAAA,IACA,SAASC;AAAA,IACT,YAAAC,IAAa;AAAA,IACb,aAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,wBAAAC;AAAA,EAAA,IACEhB,GACE,CAAEiB,GAAgBC,CAAkB,IAAIC,EAAS,EAAK,GACtD,CAAEC,GAAMC,CAAQ,IAAIF,EAAS,EAAK,GAClC,CAAEG,GAAYC,CAAc,IAAIJ,EAAS,EAAE,GAC3C,CAAEvB,GAAgB4B,CAAkB,IAAIL,EAAA,GACxC,CAAEM,GAASC,CAAW,IAAIP,EAAS,EAAK,GAExC,CAAEQ,GAASC,CAAmB,IAAIT,EAAiC,CAAA,CAAE,GACrE,CAAExB,GAAgBkC,EAAkB,IAAIV,EAAiC,CAAA,CAAE,GAC3EW,IAA+DC,EAAY,CAACC,MAAW;AAC3F,UAAMC,IAAU,CAACC,MAAiC;AAChD,YAAMC,IAA8B,CAAA,GAC9BC,IAAO,CAACC,MAAmC;AAC/C,YAAKA;AACL,qBAAWC,KAAQD;AACjB,YAAAF,EAAI,KAAKG,CAAI,GACTA,EAAK,SAASA,EAAK,MAAM,UAAQF,EAAKE,EAAK,KAAK;AAAA,MAExD;AACA,MAAAF,EAAKF,CAAI,GACTL,GAAkB,CAACU,MAAS;AAG1B,YAAI,CAFoBJ,EAAI,KAAK,CAAArC,MAAK,CAAC,CAACJ,KAAS,OAAOI,EAAE,KAAK,MAAM,OAAOJ,CAAK,CAAC,GAE5D;AACpB,gBAAM8C,IAAU5C,KAAkB2C,EAAK,KAAK,QAAK,CAAC,CAAC7C,KAAS,OAAOI,GAAE,KAAK,MAAM,OAAOJ,CAAK,CAAC;AAC7F,cAAI8C,EAAS,QAAO,CAAEA,GAAS,GAAGL,CAAI;AAAA,QACxC;AAEA,eAAOA;AAAA,MACT,CAAC;AAAA,IACH;AACA,IAAAP,EAAmB,CAACW,MAAS;AAC3B,YAAML,IAA+B,OAAOF,KAAW,aAAaA,EAAOO,CAAI,IAAIP;AACnF,aAAAC,EAAQC,CAAI,GACLA;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAEtC,GAAgBF,CAAM,CAAC;AAE5B,EAAA+C,GAAU,MAAM;AACd,IAAAnC,GAAa,UAAUwB,EAAWxB,CAAW;AAAA,EAC/C,GAAG,CAAEA,CAAY,CAAC;AAElB,QAAMoC,KAAoB,YAAY;AACpC,IAAKtB,MACEuB,EAAA,GACLpB,EAAc,EAAE;AAAA,EAEpB,GAEMoB,IAAUZ,EAAY,OAAOa,MAAoB;AACrD,IAAAlB,EAAW,EAAI;AACf,QAAI;AACF,YAAMmB,IAAiB,MAAMxC,EAAauC,CAAM;AAChD,MAAAd,EAAWe,CAAc;AAAA,IAC3B,SAASC,GAAO;AACd,cAAQ,MAAM,sCAAsCA,CAAK;AAAA,IAC3D,UAAA;AACE,MAAApB,EAAW,EAAK;AAAA,IAClB;AAAA,EACF,GAAG,CAAEI,CAAW,CAAC,GAEXiB,KAAmBC,GAAoBL,GAAS,KAAM;AAAA,IAC1D,SAAS;AAAA,IACT,UAAU;AAAA,EAAA,CACX,GAEKM,KAAqBlB,EAAY,CAACrC,MAAkB;AACxD,IAAAgC,EAAW,EAAI,GACfH,EAAc7B,CAAK,GACnBqD,GAAiBrD,CAAK;AAAA,EACxB,GAAG,CAAA,CAAE,GAECwD,IAAiBnB,EAAY,CAACoB,MAAiC;AACnE,IAAAlD,EAASkD,EAAO,KAAK,GACrB3B,EAAkB2B,CAAM,GACxBzB,EAAW,EAAK;AAAA,EAClB,GAAG,CAAA,CAAE,GAEC0B,KAAuBrB,EAAY,MAAM;AAC7C,IAAAmB,EAAe,EAAE,OAAO,IAAI,OAAO,IAAI,GACvC1B,EAAkB,MAAS,GAC3BE,EAAW,EAAK;AAAA,EAClB,GAAG,CAAA,CAAE,GAEC2B,IAAsBC,EAAQ,MAC3B,EAAQhC,KAAe,CAACK,EAAQ,UAAU,CAACF,GACjD,CAAEA,GAASE,EAAQ,QAAQL,CAAW,CAAC,GAEpCiC,IAAcD,EAAQ,MACnB,CAAC3B,EAAQ,UAAU,CAACF,GAC1B,CAAEA,GAASE,EAAQ,QAAQL,CAAW,CAAC,GAEpCkC,IACJF,EAAQ,OACC;AAAA,IACL,SAAA3B;AAAA,IACA,YAAAG;AAAA,IACA,gBAAAlC;AAAA,IACA,mBAAA4B;AAAA,IACA,QAAQF,KAAc;AAAA,IACtB,WAAWC;AAAA,IACX,MAAAH;AAAA,IACA,SAAAC;AAAA,IACA,SAAAI;AAAA,IACA,YAAAC;AAAA,IACA,aAAA6B;AAAA,IACA,qBAAAF;AAAA,EAAA,IAED,CAAE5B,GAASL,GAAMO,GAASL,GAAY1B,GAAgB2D,GAAaF,GAAqBvB,CAAW,CAAC,GAEnG2B,KAAa1B,EAAY,YAAY;AACzC,QAAKnB,GACL;AAAA,MAAAM,EAAkB,EAAI;AACtB,UAAI;AACF,cAAMN,EAAQ4C,CAA2B;AAAA,MAC3C,UAAA;AACE,QAAAtC,EAAkB,EAAK;AAAA,MACzB;AAAA;AAAA,EACF,GAAG,CAAEN,GAAS4C,CAA4B,CAAC;AAE3C,SAAAE,GAAgB,MAAM;AACpB,IAAAD,GAAA;AAAA,EACF,GAAG,CAAA,CAAE,GAGH,gBAAAE,EAAC,OAAA,EAAI,WAAU,UACb,UAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAzC;AAAA,MACA,cAAc,CAAC0C,MAAY;AACzB,QAAAzC,EAAQyC,CAAO,GACXA,KAASpB,GAAA;AAAA,MACf;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAiB,EAACI,IAAA,EAAe,SAAO,IAAC,WAAU,gBAChC,UAAA,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,MAAK;AAAA,YACL,iBAAe5C;AAAA,YACf,WAAW6C;AAAA,cACT;AAAA,cACA;AAAA,cACA7C,KAAQ;AAAA,cACR;AAAA,YAAA;AAAA,YAEF,UAAUjB,KAAYc;AAAA,YAErB,UAAAA,IACC,gBAAA0C,EAACO,GAAA,EAAY,WAAS,QAEtB,gBAAAN,EAAAO,GAAA,EACI,UAAA;AAAA,cAAA,gBAAAR;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACT,UAAAjE,IACGF,GAAqB,EAAE,OAAAE,GAAO,gBAAAC,GAAgB,gBAAAC,EAAA,CAAgB,IAC9D,gBAAA+D,EAAC,QAAA,EAAK,WAAU,iBAAiB,UAAAzD,EAAA,CAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGpDR,IACC,gBAAAiE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWM;AAAA,oBACT;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,kBAAA;AAAA,kBAEF,SAAS,CAACG,MAAM;AACd,oBAAAA,EAAE,gBAAA,GACFhB,GAAA;AAAA,kBACF;AAAA,kBAEA,4BAACiB,IAAA,CAAA,CAAC;AAAA,gBAAA;AAAA,cAAA,IAGJ,gBAAAV,EAACW,IAAA,EAAe,WAAU,qBAAA,CAAoB;AAAA,YAAA,EAAA,CAElD;AAAA,UAAA;AAAA,QAAA,GAGN;AAAA,QACA,gBAAAX;AAAA,UAACY;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAM;AAAA,YAEN,UAAA,gBAAAX,EAACY,IAAA,EAAQ,cAAc,IACrB,UAAA;AAAA,cAAA,gBAAAb;AAAA,gBAACc;AAAA,gBAAA;AAAA,kBACC,aAAarE;AAAA,kBACb,OAAOkB;AAAA,kBACP,eAAe2B;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEhB,OAAOxC,KAAuB,aAC3BA,EAAmB+C,CAA2B,IAC9C/C;AAAA,cACJ,gBAAAkD,EAACe,IAAA,EACC,UAAA,gBAAAd,EAACe,IAAA,EAAa,WAAWV,EAAG,CAACtC,EAAQ,UAAU,iBAAiB,GAC7D,UAAA;AAAA,gBAAAF,KAAW,gBAAAkC,EAACO,KAAY,WAAS,GAAA,CAAA;AAAA,gBACjC,CAACzC,KAAW,EAAQH,4BAEhB,UAAAd,IACC,gBAAAoD,EAACgB,GAAA,EAAa,WAAU,8CACtB,UAAA;AAAA,kBAAA,gBAAAjB,EAAC,UAAM,UAAApD,EAAA,CAAW;AAAA,kBACjB,OAAOC,KAAgB,aACpBA,EAAYgD,CAA2B,IACvChD;AAAA,gBAAA,EAAA,CACN,IAEA,gBAAAmD,EAACiB,GAAA,EAAc,UAAArE,EAAA,CAAW,GAE9B;AAAA,gBAED,CAACkB,KACA,gBAAAmC,EAAAO,GAAA,EACG,UAAA;AAAA,kBAAA,EAAQxC,EAAQ,UAAWjB,KAC1B,gBAAAiD;AAAA,oBAACkB;AAAA,oBAAA;AAAA,sBAEC,SAAO;AAAA,sBACP,WAAU;AAAA,sBAET,UAAA,OAAOnE,KAAmB,aACvBA,EAAe8C,CAA2B,IAC1C9C;AAAA,oBAAA;AAAA,oBANA;AAAA,kBAAA;AAAA,kBASR,gBAAAiD;AAAA,oBAACmB;AAAA,oBAAA;AAAA,sBACC,YAAAxD;AAAA,sBACA,OAAA5B;AAAA,sBACA,SAAAiC;AAAA,sBACA,gBAAAuB;AAAA,sBACA,SAAA7B;AAAA,sBACA,qBAAAR;AAAA,sBACA,oBAAAC;AAAA,sBACA,kBAAAC;AAAA,sBACA,wBAAAC;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACF,EAAA,CACF;AAAA,cAAA,EAAA,CAEJ,EAAA,CACF;AAAA,cAGC,EAAQW,EAAQ,UAAWhB,KAC1B,gBAAAgD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,aAAU;AAAA,kBACV,WAAU;AAAA,kBAET,UAAA,OAAOhD,KAAqB,aACzBA,EAAiB6C,CAA2B,IAC5C7C;AAAA,gBAAA;AAAA,cAAA;AAAA,YACN,EAAA,CAEJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
|