@oneplatformdev/ui 0.1.99-beta.201 → 0.1.99-beta.203
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/.storybook/Wrappers.js.map +1 -1
- package/Accordion/Accordion.js.map +1 -1
- package/Alert/Alert.js.map +1 -1
- package/Alert/alertVariants.js.map +1 -1
- package/AlertDialog/AlertDialog.js.map +1 -1
- package/AlertDialog/AlertDialog.stories.js +4 -2
- package/AlertDialog/AlertDialog.stories.js.map +1 -1
- package/AlertDialog/AlertDialogRoot.js +20 -18
- package/AlertDialog/AlertDialogRoot.js.map +1 -1
- package/AreaChart/AreaChart.js.map +1 -1
- package/Aside/Aside.js.map +1 -1
- package/Aside/AsideSidebar.js.map +1 -1
- package/AspectRatio/AspectRatio.js.map +1 -1
- package/Avatar/Avatar.js.map +1 -1
- package/Badge/Badge.js.map +1 -1
- package/Badge/badgeVariants.js.map +1 -1
- package/Breadcrumb/Breadcrumb.js.map +1 -1
- package/Button/Button.js +11 -10
- package/Button/Button.js.map +1 -1
- package/Button/Button.stories.js.map +1 -1
- package/Button/Button.utils.js.map +1 -1
- package/Button/ButtonCounterBadge.js.map +1 -1
- package/Button/buttonVariants.js.map +1 -1
- package/ButtonIcon/ButtonIcon.js +22 -19
- package/ButtonIcon/ButtonIcon.js.map +1 -1
- package/ButtonIcon/ButtonIcon.stories.js.map +1 -1
- package/ButtonIcon/buttonIconVariants.js.map +1 -1
- package/CHANGELOG.md +2698 -2674
- package/Calendar/Calendar.js +6 -4
- package/Calendar/Calendar.js.map +1 -1
- package/Card/Card.js.map +1 -1
- package/Carousel/Carousel.js +7 -6
- package/Carousel/Carousel.js.map +1 -1
- package/Chart/Chart.js.map +1 -1
- package/Checkbox/Checkbox.js +5 -4
- package/Checkbox/Checkbox.js.map +1 -1
- package/Checkbox/Checkbox.stories.js.map +1 -1
- package/Collapsible/Collapsible.js.map +1 -1
- package/Combobox/Combobox.d.ts.map +1 -1
- package/Combobox/Combobox.js +198 -165
- package/Combobox/Combobox.js.map +1 -1
- package/Combobox/Combobox.stories.js +47 -33
- package/Combobox/Combobox.stories.js.map +1 -1
- package/Combobox/Combobox.types.d.ts +8 -1
- package/Combobox/Combobox.types.d.ts.map +1 -1
- package/Combobox/ComboboxOptionItem.js +4 -4
- package/Combobox/ComboboxOptionItem.js.map +1 -1
- package/Combobox/ComboboxOptions.js +15 -14
- package/Combobox/ComboboxOptions.js.map +1 -1
- package/Command/Command.d.ts.map +1 -1
- package/Command/Command.js +30 -26
- package/Command/Command.js.map +1 -1
- package/DataTable/DataTable.js +24 -22
- package/DataTable/DataTable.js.map +1 -1
- package/DataTable/DataTableColumnFilter.js +7 -6
- package/DataTable/DataTableColumnFilter.js.map +1 -1
- package/DataTable/useDataTable.js.map +1 -1
- package/DatePicker/DatePicker.js +13 -12
- package/DatePicker/DatePicker.js.map +1 -1
- package/Dialog/Dialog.js +17 -16
- package/Dialog/Dialog.js.map +1 -1
- package/Dialog/Dialog.stories.js +15 -14
- package/Dialog/Dialog.stories.js.map +1 -1
- package/Dialog/DialogOverlayScope.js.map +1 -1
- package/Drawer/Drawer.js.map +1 -1
- package/DropdownMenu/DropdownMenu.js.map +1 -1
- package/Dropzone/Dropzone.js.map +1 -1
- package/Dropzone/Dropzone.stories.js.map +1 -1
- package/Dropzone/Dropzone.types.js.map +1 -1
- package/Dropzone/DropzoneFilePreview.js.map +1 -1
- package/Dropzone/DropzoneSinglePickPreview.js.map +1 -1
- package/Dropzone/DropzoneUtils.js.map +1 -1
- package/Form/Form.js +15 -14
- package/Form/Form.js.map +1 -1
- package/Form/FormRenderControl.js +7 -6
- package/Form/FormRenderControl.js.map +1 -1
- package/Form/Form_old.js +5 -4
- package/Form/Form_old.js.map +1 -1
- package/FormCheckbox/FormCheckbox.js +4 -4
- package/FormCheckbox/FormCheckbox.js.map +1 -1
- package/FormCombobox/FormCombobox.js +4 -4
- package/FormCombobox/FormCombobox.js.map +1 -1
- package/FormDatePicker/FormDatePicker.js +4 -4
- package/FormDatePicker/FormDatePicker.js.map +1 -1
- package/FormDropzone/FormDropzone.js +3 -3
- package/FormDropzone/FormDropzone.js.map +1 -1
- package/FormInput/FormInput.js +6 -6
- package/FormInput/FormInput.js.map +1 -1
- package/FormInput/FormInput.stories.js.map +1 -1
- package/FormRadio/FormRadio.js.map +1 -1
- package/FormSelect/FormSelect.js +9 -6
- package/FormSelect/FormSelect.js.map +1 -1
- package/FormTextarea/FormTextarea.js +4 -4
- package/FormTextarea/FormTextarea.js.map +1 -1
- package/Header/Header.js.map +1 -1
- package/HoverCard/HoverCard.js.map +1 -1
- package/InfoBlock/InfoBlock.js.map +1 -1
- package/InfoBlock/InfoBlock.stories.js.map +1 -1
- package/InfoBlock/infoBlockVariants.js.map +1 -1
- package/Input/Input.js.map +1 -1
- package/Input/inputVariants.js.map +1 -1
- package/InputOTP/InputOTP.d.ts.map +1 -1
- package/InputOTP/InputOTP.js.map +1 -1
- package/LICENSE +21 -21
- package/Label/Label.js.map +1 -1
- package/Label/labelVariants.js.map +1 -1
- package/LazyLoader/LazyLoader.js +5 -4
- package/LazyLoader/LazyLoader.js.map +1 -1
- package/LoadedIcon/LoadedIcon.js.map +1 -1
- package/LoadingMask/LoadingMask.js.map +1 -1
- package/LoadingMask/RenderLoadingMask.js.map +1 -1
- package/LoadingProgress/LoadingProgress.js.map +1 -1
- package/LoadingProgress/loadingProgressVariants.js.map +1 -1
- package/Menubar/Menubar.js.map +1 -1
- package/NavigationMenu/NavigationMenu.js.map +1 -1
- package/NavigationMenu/navigationMenuVariants.js.map +1 -1
- package/Pagination/Pagination.js +1 -0
- package/Pagination/Pagination.js.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/Progress/Progress.js.map +1 -1
- package/README.md +7 -7
- package/Radio/Radio.js.map +1 -1
- package/RadioGroup/RadioGroup.js.map +1 -1
- package/Resizable/Resizable.js.map +1 -1
- package/Resizable/Resizable.stories.js.map +1 -1
- package/ScrollArea/ScrollArea.js.map +1 -1
- package/Search/Search.js +9 -9
- package/Search/Search.js.map +1 -1
- package/Search/Search.stories.js.map +1 -1
- package/Select/Select.js +7 -6
- package/Select/Select.js.map +1 -1
- package/Select/Select.stories.js.map +1 -1
- package/Select/SelectRoot.js.map +1 -1
- package/Separator/Separator.js.map +1 -1
- package/Sheet/Sheet.js.map +1 -1
- package/Sidebar/Sidebar.js +21 -20
- package/Sidebar/Sidebar.js.map +1 -1
- package/Skeleton/Skeleton.js.map +1 -1
- package/Slider/Slider.js.map +1 -1
- package/Sonner/Sonner.js.map +1 -1
- package/Switch/Switch.js.map +1 -1
- package/Table/Table.js.map +1 -1
- package/TablePagination/TablePagination.js +26 -21
- package/TablePagination/TablePagination.js.map +1 -1
- package/Tabs/Tabs.js.map +1 -1
- package/Tabs/TabsRoot.js.map +1 -1
- package/Textarea/Textarea.js.map +1 -1
- package/Textarea/Textarea.stories.js.map +1 -1
- package/Textarea/useAutosizeTextArea.js.map +1 -1
- package/Theme/ThemeModeToggle.js +4 -3
- package/Theme/ThemeModeToggle.js.map +1 -1
- package/Theme/ThemeProvider.js.map +1 -1
- package/Toast/Toast.js.map +1 -1
- package/Toast/toast.constants.js.map +1 -1
- package/Toast/toastVariants.js.map +1 -1
- package/Toast/useToast.js.map +1 -1
- package/Toaster/Toaster.js.map +1 -1
- package/Toggle/Toggle.js.map +1 -1
- package/ToggleGroup/ToggleGroup.js.map +1 -1
- package/Tooltip/Tooltip.js.map +1 -1
- package/Tooltip/TooltipRoot.js.map +1 -1
- package/Tooltip/tooltipVariants.js.map +1 -1
- package/index.js +280 -280
- package/package.json +4 -4
package/Command/Command.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Command.js","sources":["../../src/Command/Command.tsx"],"sourcesContent":["\"use client\"\
|
|
1
|
+
{"version":3,"file":"Command.js","sources":["../../src/Command/Command.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { SearchIcon } from \"lucide-react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from \"../Dialog\"\nimport { HTMLAttributes } from \"react\";\n\nfunction Command({\n className,\n ...props\n }: React.ComponentProps<typeof CommandPrimitive>) {\n return (\n <CommandPrimitive\n data-slot=\"command\"\n className={cn(\n \"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CommandDialog({\n title = \"Command Palette\",\n description = \"Search for a command to run...\",\n children,\n className,\n showCloseButton = true,\n ...props\n }: React.ComponentProps<typeof Dialog> & {\n title?: string\n description?: string\n className?: string\n showCloseButton?: boolean\n}) {\n return (\n <Dialog {...props}>\n <DialogHeader className=\"sr-only\">\n <DialogTitle>{title}</DialogTitle>\n <DialogDescription>{description}</DialogDescription>\n </DialogHeader>\n <DialogContent\n className={cn(\"overflow-hidden p-0\", className)}\n showCloseButton={showCloseButton}\n >\n <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n {children}\n </Command>\n </DialogContent>\n </Dialog>\n )\n}\n\nfunction CommandInput(\n props: React.ComponentProps<typeof CommandPrimitive.Input> & {\n slotProps?: {\n wrapper?: HTMLAttributes<HTMLDivElement>,\n }\n }\n) {\n const {\n className,\n slotProps,\n ...rest\n } = props;\n return (\n <div\n data-slot=\"command-input-wrapper\"\n {...slotProps?.wrapper}\n className={cn(\n \"flex min-h-10 items-center gap-0 border-b border-[#E8E9EB] p-0 pb-2\",\n slotProps?.wrapper?.className\n )}\n >\n <div className='flex items-center justify-center h-10 px-2'>\n <SearchIcon\n strokeWidth={1.5}\n className=\"size-6 shrink-0 text-[#666A78]\"\n />\n </div>\n <CommandPrimitive.Input\n data-slot=\"command-input\"\n className={cn(\n 'flex h-10 w-full',\n 'placeholder:text-[#666A78] text-base',\n 'bg-transparent rounded-md outline-hidden',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n className\n )}\n {...rest}\n />\n </div>\n )\n}\n\n\nfunction CommandList({\n className,\n ...props\n }: React.ComponentProps<typeof CommandPrimitive.List>) {\n return (\n <CommandPrimitive.List\n data-slot=\"command-list\"\n className={cn(\n \"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CommandEmpty({\n ...props\n }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n return (\n <CommandPrimitive.Empty\n data-slot=\"command-empty\"\n className=\"py-6 text-center text-sm\"\n {...props}\n />\n )\n}\n\nfunction CommandGroup({\n className,\n ...props\n }: React.ComponentProps<typeof CommandPrimitive.Group>) {\n return (\n <CommandPrimitive.Group\n data-slot=\"command-group\"\n className={cn(\n \"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CommandSeparator({\n className,\n ...props\n }: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n return (\n <CommandPrimitive.Separator\n data-slot=\"command-separator\"\n className={cn(\"bg-border -mx-1 h-px\", className)}\n {...props}\n />\n )\n}\n\nfunction CommandItem({\n className,\n ...props\n }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n return (\n <CommandPrimitive.Item\n data-slot=\"command-item\"\n className={cn(\n 'relative flex items-center gap-2 rounded-md px-2 py-1.5 min-h-10 text-sm',\n 'cursor-pointer select-none',\n 'outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\\'size-\\'])]:size-4',\n \"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CommandShortcut({\n className,\n ...props\n }: React.ComponentProps<\"span\">) {\n return (\n <span\n data-slot=\"command-shortcut\"\n className={cn(\n \"text-muted-foreground ml-auto text-xs tracking-widest\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandShortcut,\n CommandSeparator,\n CommandPrimitive\n}\n"],"names":["Command","className","props","jsx","CommandPrimitive","cn","CommandDialog","title","description","children","showCloseButton","jsxs","Dialog","DialogHeader","DialogTitle","DialogDescription","DialogContent","CommandInput","slotProps","rest","SearchIcon","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut"],"mappings":";;;;;;;AAgBA,SAASA,EAAQ;AAAA,EACE,WAAAC;AAAA,EACA,GAAGC;AACL,GAAkD;AACjE,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASI,EAAc;AAAA,EACE,OAAAC,IAAQ;AAAA,EACR,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,WAAAR;AAAA,EACA,iBAAAS,IAAkB;AAAA,EAClB,GAAGR;AACL,GAKpB;AACD,SACE,gBAAAS,EAACC,GAAA,EAAQ,GAAGV,GACV,UAAA;AAAA,IAAA,gBAAAS,EAACE,GAAA,EAAa,WAAU,WACtB,UAAA;AAAA,MAAA,gBAAAV,EAACW,KAAa,UAAAP,EAAA,CAAM;AAAA,MACpB,gBAAAJ,EAACY,KAAmB,UAAAP,EAAA,CAAY;AAAA,IAAA,GAClC;AAAA,IACA,gBAAAL;AAAA,MAACa;AAAA,MAAA;AAAA,QACC,WAAWX,EAAG,uBAAuBJ,CAAS;AAAA,QAC9C,iBAAAS;AAAA,QAEA,UAAA,gBAAAP,EAACH,GAAA,EAAQ,WAAU,yZAChB,UAAAS,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEA,SAASQ,EACPf,GAKA;AACA,QAAM;AAAA,IACJ,WAAAD;AAAA,IACA,WAAAiB;AAAA,IACA,GAAGC;AAAA,EAAA,IACDjB;AACJ,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACT,GAAGO,GAAW;AAAA,MACf,WAAWb;AAAA,QACT;AAAA,QACAa,GAAW,SAAS;AAAA,MAAA;AAAA,MAGtB,UAAA;AAAA,QAAA,gBAAAf,EAAC,OAAA,EAAI,WAAU,8CACb,UAAA,gBAAAA;AAAA,UAACiB;AAAA,UAAA;AAAA,YACC,aAAa;AAAA,YACb,WAAU;AAAA,UAAA;AAAA,QAAA,GAEd;AAAA,QACA,gBAAAjB;AAAA,UAACC,EAAiB;AAAA,UAAjB;AAAA,YACC,aAAU;AAAA,YACV,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACAJ;AAAA,YAAA;AAAA,YAED,GAAGkB;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAAA;AAGN;AAGA,SAASE,EAAY;AAAA,EACE,WAAApB;AAAA,EACA,GAAGC;AACL,GAAuD;AAC1E,SACE,gBAAAC;AAAA,IAACC,EAAiB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASoB,EAAa;AAAA,EACE,GAAGpB;AACL,GAAwD;AAC5E,SACE,gBAAAC;AAAA,IAACC,EAAiB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV,WAAU;AAAA,MACT,GAAGF;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASqB,EAAa;AAAA,EACE,WAAAtB;AAAA,EACA,GAAGC;AACL,GAAwD;AAC5E,SACE,gBAAAC;AAAA,IAACC,EAAiB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASsB,EAAiB;AAAA,EACE,WAAAvB;AAAA,EACA,GAAGC;AACL,GAA4D;AACpF,SACE,gBAAAC;AAAA,IAACC,EAAiB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,wBAAwBJ,CAAS;AAAA,MAC9C,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASuB,EAAY;AAAA,EACE,WAAAxB;AAAA,EACA,GAAGC;AACL,GAAuD;AAC1E,SACE,gBAAAC;AAAA,IAACC,EAAiB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASwB,EAAgB;AAAA,EACE,WAAAzB;AAAA,EACA,GAAGC;AACL,GAAiC;AACxD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
package/DataTable/DataTable.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { jsxs as i, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { Button as m } from "../Button/Button.js";
|
|
3
|
+
import "../Button/buttonVariants.js";
|
|
4
|
+
import "react";
|
|
5
|
+
import { DropdownMenu as h, DropdownMenuTrigger as p, DropdownMenuContent as g, DropdownMenuCheckboxItem as u } from "../DropdownMenu/DropdownMenu.js";
|
|
6
|
+
import { Table as C, TableHeader as f, TableRow as t, TableHead as w, TableBody as x, TableCell as o } from "../Table/Table.js";
|
|
2
7
|
import { flexRender as d } from "@tanstack/react-table";
|
|
3
|
-
import { ChevronDown as
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
import { Table as f, TableHeader as w, TableRow as t, TableHead as x, TableBody as b, TableCell as o } from "../Table/Table.js";
|
|
7
|
-
const R = ({
|
|
8
|
-
table: r,
|
|
8
|
+
import { ChevronDown as b } from "lucide-react";
|
|
9
|
+
const y = ({
|
|
10
|
+
table: n,
|
|
9
11
|
ToolBar: a,
|
|
10
12
|
tColumns: s = "Columns",
|
|
11
13
|
tNoResults: c = "No results"
|
|
@@ -13,42 +15,42 @@ const R = ({
|
|
|
13
15
|
/* @__PURE__ */ i("div", { className: "flex items-center py-4", children: [
|
|
14
16
|
a,
|
|
15
17
|
/* @__PURE__ */ i(h, { children: [
|
|
16
|
-
/* @__PURE__ */ l(
|
|
18
|
+
/* @__PURE__ */ l(p, { asChild: !0, children: /* @__PURE__ */ i(m, { variant: "outline", className: "ml-auto", children: [
|
|
17
19
|
s,
|
|
18
20
|
" ",
|
|
19
|
-
/* @__PURE__ */ l(
|
|
21
|
+
/* @__PURE__ */ l(b, { className: "ml-2 h-4 w-4" })
|
|
20
22
|
] }) }),
|
|
21
|
-
/* @__PURE__ */ l(
|
|
23
|
+
/* @__PURE__ */ l(g, { align: "end", children: n.getAllColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ l(
|
|
22
24
|
u,
|
|
23
25
|
{
|
|
24
26
|
className: "capitalize",
|
|
25
27
|
checked: e.getIsVisible(),
|
|
26
|
-
onCheckedChange: (
|
|
28
|
+
onCheckedChange: (r) => e.toggleVisibility(!!r),
|
|
27
29
|
children: e.id
|
|
28
30
|
},
|
|
29
31
|
e.id
|
|
30
32
|
)) })
|
|
31
33
|
] })
|
|
32
34
|
] }),
|
|
33
|
-
/* @__PURE__ */ l("div", { className: "rounded-md border", children: /* @__PURE__ */ i(
|
|
34
|
-
/* @__PURE__ */ l(
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
) },
|
|
38
|
-
/* @__PURE__ */ l(
|
|
35
|
+
/* @__PURE__ */ l("div", { className: "rounded-md border", children: /* @__PURE__ */ i(C, { children: [
|
|
36
|
+
/* @__PURE__ */ l(f, { children: n.getHeaderGroups().map((e) => /* @__PURE__ */ l(t, { children: e.headers.map((r) => /* @__PURE__ */ l(w, { children: r.isPlaceholder ? null : d(
|
|
37
|
+
r.column.columnDef.header,
|
|
38
|
+
r.getContext()
|
|
39
|
+
) }, r.id)) }, e.id)) }),
|
|
40
|
+
/* @__PURE__ */ l(x, { children: n.getRowModel().rows?.length ? n.getRowModel().rows.map((e) => /* @__PURE__ */ l(
|
|
39
41
|
t,
|
|
40
42
|
{
|
|
41
43
|
"data-state": e.getIsSelected() && "selected",
|
|
42
|
-
children: e.getVisibleCells().map((
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
) },
|
|
44
|
+
children: e.getVisibleCells().map((r) => /* @__PURE__ */ l(o, { children: d(
|
|
45
|
+
r.column.columnDef.cell,
|
|
46
|
+
r.getContext()
|
|
47
|
+
) }, r.id))
|
|
46
48
|
},
|
|
47
49
|
e.id
|
|
48
50
|
)) : /* @__PURE__ */ l(t, { children: /* @__PURE__ */ l(
|
|
49
51
|
o,
|
|
50
52
|
{
|
|
51
|
-
colSpan:
|
|
53
|
+
colSpan: n.getAllColumns().length,
|
|
52
54
|
className: "h-24 text-center",
|
|
53
55
|
children: c
|
|
54
56
|
}
|
|
@@ -56,6 +58,6 @@ const R = ({
|
|
|
56
58
|
] }) })
|
|
57
59
|
] });
|
|
58
60
|
export {
|
|
59
|
-
|
|
61
|
+
y as DataTable
|
|
60
62
|
};
|
|
61
63
|
//# sourceMappingURL=DataTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.js","sources":["../../src/DataTable/DataTable.tsx"],"sourcesContent":["'use client';\
|
|
1
|
+
{"version":3,"file":"DataTable.js","sources":["../../src/DataTable/DataTable.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '../Button';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuTrigger,\n} from '../DropdownMenu';\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '../Table';\nimport { flexRender, type Table as ReactTable } from '@tanstack/react-table';\nimport { ChevronDown } from 'lucide-react';\nimport React, { FC } from 'react';\n\ninterface IProps {\n table: ReactTable<any>;\n ToolBar?: React.ReactNode;\n tColumns?: string;\n tNoResults?: string;\n}\n\nexport const DataTable: FC<IProps> = ({\n table,\n ToolBar,\n tColumns = 'Columns',\n tNoResults = 'No results',\n}) => {\n return (\n <div className=\"w-full\">\n <div className=\"flex items-center py-4\">\n {ToolBar}\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" className=\"ml-auto\">\n {tColumns} <ChevronDown className=\"ml-2 h-4 w-4\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n {table\n .getAllColumns()\n .filter((column) => column.getCanHide())\n .map((column) => {\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n className=\"capitalize\"\n checked={column.getIsVisible()}\n onCheckedChange={(value) =>\n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n </DropdownMenuCheckboxItem>\n );\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <div className=\"rounded-md border\">\n <Table>\n <TableHeader>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map((header) => {\n return (\n <TableHead key={header.id}>\n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n </TableHead>\n );\n })}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {table.getRowModel().rows?.length ? (\n table.getRowModel().rows.map((row) => (\n <TableRow\n key={row.id}\n data-state={row.getIsSelected() && 'selected'}\n >\n {row.getVisibleCells().map((cell) => (\n <TableCell key={cell.id}>\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n </TableCell>\n ))}\n </TableRow>\n ))\n ) : (\n <TableRow>\n <TableCell\n colSpan={table.getAllColumns().length}\n className=\"h-24 text-center\"\n >\n {tNoResults}\n </TableCell>\n </TableRow>\n )}\n </TableBody>\n </Table>\n </div>\n </div>\n );\n};\n"],"names":["DataTable","table","ToolBar","tColumns","tNoResults","jsxs","DropdownMenu","jsx","DropdownMenuTrigger","Button","ChevronDown","DropdownMenuContent","column","DropdownMenuCheckboxItem","value","Table","TableHeader","headerGroup","TableRow","header","TableHead","flexRender","TableBody","row","cell","TableCell"],"mappings":";;;;;;;;AA4BO,MAAMA,IAAwB,CAAC;AAAA,EACpC,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AACf,MAEI,gBAAAC,EAAC,OAAA,EAAI,WAAU,UACb,UAAA;AAAA,EAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,0BACZ,UAAA;AAAA,IAAAH;AAAA,sBACAI,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAoB,SAAO,IAC1B,UAAA,gBAAAH,EAACI,KAAO,SAAQ,WAAU,WAAU,WACjC,UAAA;AAAA,QAAAN;AAAA,QAAS;AAAA,QAAC,gBAAAI,EAACG,GAAA,EAAY,WAAU,eAAA,CAAe;AAAA,MAAA,EAAA,CACnD,EAAA,CACF;AAAA,wBACCC,GAAA,EAAoB,OAAM,OACxB,UAAAV,EACE,gBACA,OAAO,CAACW,MAAWA,EAAO,WAAA,CAAY,EACtC,IAAI,CAACA,MAEF,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,SAASD,EAAO,aAAA;AAAA,UAChB,iBAAiB,CAACE,MAChBF,EAAO,iBAAiB,CAAC,CAACE,CAAK;AAAA,UAGhC,UAAAF,EAAO;AAAA,QAAA;AAAA,QAPHA,EAAO;AAAA,MAAA,CAUjB,EAAA,CACL;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAAA,EACA,gBAAAL,EAAC,OAAA,EAAI,WAAU,qBACb,4BAACQ,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAR,EAACS,GAAA,EACE,UAAAf,EAAM,gBAAA,EAAkB,IAAI,CAACgB,MAC5B,gBAAAV,EAACW,GAAA,EACE,UAAAD,EAAY,QAAQ,IAAI,CAACE,MAEtB,gBAAAZ,EAACa,GAAA,EACE,UAAAD,EAAO,gBACJ,OACAE;AAAA,MACEF,EAAO,OAAO,UAAU;AAAA,MACxBA,EAAO,WAAA;AAAA,IAAW,EACpB,GANUA,EAAO,EAOvB,CAEH,EAAA,GAZYF,EAAY,EAa3B,CACD,EAAA,CACH;AAAA,IACA,gBAAAV,EAACe,GAAA,EACE,UAAArB,EAAM,YAAA,EAAc,MAAM,SACzBA,EAAM,YAAA,EAAc,KAAK,IAAI,CAACsB,MAC5B,gBAAAhB;AAAA,MAACW;AAAA,MAAA;AAAA,QAEC,cAAYK,EAAI,cAAA,KAAmB;AAAA,QAElC,YAAI,gBAAA,EAAkB,IAAI,CAACC,wBACzBC,GAAA,EACE,UAAAJ;AAAA,UACCG,EAAK,OAAO,UAAU;AAAA,UACtBA,EAAK,WAAA;AAAA,QAAW,EAClB,GAJcA,EAAK,EAKrB,CACD;AAAA,MAAA;AAAA,MAVID,EAAI;AAAA,IAAA,CAYZ,IAED,gBAAAhB,EAACW,GAAA,EACC,UAAA,gBAAAX;AAAA,MAACkB;AAAA,MAAA;AAAA,QACC,SAASxB,EAAM,cAAA,EAAgB;AAAA,QAC/B,WAAU;AAAA,QAET,UAAAG;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CAEJ;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAAA,GACF;"}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { jsx as n, jsxs as t } from "react/jsx-runtime";
|
|
2
|
-
import { ChevronDown as
|
|
3
|
-
import { useMemo as
|
|
2
|
+
import { ChevronDown as m } from "lucide-react";
|
|
3
|
+
import { useMemo as s } from "react";
|
|
4
4
|
import { Button as d } from "../Button/Button.js";
|
|
5
|
+
import "../Button/buttonVariants.js";
|
|
5
6
|
import { DropdownMenuCheckboxItem as c, DropdownMenu as u, DropdownMenuTrigger as h, DropdownMenuContent as p } from "../DropdownMenu/DropdownMenu.js";
|
|
6
|
-
const
|
|
7
|
+
const x = (i) => {
|
|
7
8
|
const {
|
|
8
9
|
table: r,
|
|
9
10
|
columnsLabel: l = "Columns"
|
|
10
|
-
} = i, o =
|
|
11
|
+
} = i, o = s(() => r.getAllColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ n(
|
|
11
12
|
c,
|
|
12
13
|
{
|
|
13
14
|
className: "capitalize",
|
|
@@ -20,12 +21,12 @@ const D = (i) => {
|
|
|
20
21
|
return o.length ? /* @__PURE__ */ t(u, { children: [
|
|
21
22
|
/* @__PURE__ */ n(h, { asChild: !0, children: /* @__PURE__ */ t(d, { variant: "outline", className: "ml-auto", children: [
|
|
22
23
|
l,
|
|
23
|
-
/* @__PURE__ */ n(
|
|
24
|
+
/* @__PURE__ */ n(m, { className: "ml-2 h-4 w-4" })
|
|
24
25
|
] }) }),
|
|
25
26
|
/* @__PURE__ */ n(p, { align: "end", children: o })
|
|
26
27
|
] }) : null;
|
|
27
28
|
};
|
|
28
29
|
export {
|
|
29
|
-
|
|
30
|
+
x as DataTableColumnFilter
|
|
30
31
|
};
|
|
31
32
|
//# sourceMappingURL=DataTableColumnFilter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableColumnFilter.js","sources":["../../src/DataTable/DataTableColumnFilter.tsx"],"sourcesContent":["'use client';\
|
|
1
|
+
{"version":3,"file":"DataTableColumnFilter.js","sources":["../../src/DataTable/DataTableColumnFilter.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport React, { FC, useMemo } from 'react';\n\nimport { Button } from '../Button';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuTrigger,\n} from '../DropdownMenu';\nimport { DataTableProps } from './DataTable.types';\n\n// TODO: refactor this component to use the new Table component\nexport const DataTableColumnFilter: FC<DataTableProps> = (props) => {\n const {\n table,\n columnsLabel = 'Columns',\n } = props;\n\n const columnsCheckboxRender = useMemo(() => {\n return table\n .getAllColumns()\n .filter((column) => column.getCanHide())\n .map((column) => {\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n className=\"capitalize\"\n checked={column.getIsVisible()}\n onCheckedChange={(value) =>\n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n </DropdownMenuCheckboxItem>\n );\n })\n }, [table])\n\n if(!columnsCheckboxRender.length) return null;\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" className=\"ml-auto\">\n {columnsLabel}\n <ChevronDown className=\"ml-2 h-4 w-4\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n {columnsCheckboxRender}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n};\n"],"names":["DataTableColumnFilter","props","table","columnsLabel","columnsCheckboxRender","useMemo","column","jsx","DropdownMenuCheckboxItem","value","DropdownMenu","DropdownMenuTrigger","jsxs","Button","ChevronDown","DropdownMenuContent"],"mappings":";;;;;;AAeO,MAAMA,IAA4C,CAACC,MAAU;AAClE,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,EAAA,IACbF,GAEEG,IAAwBC,EAAQ,MAC7BH,EACJ,gBACA,OAAO,CAACI,MAAWA,EAAO,WAAA,CAAY,EACtC,IAAI,CAACA,MAEF,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,WAAU;AAAA,MACV,SAASF,EAAO,aAAA;AAAA,MAChB,iBAAiB,CAACG,MAChBH,EAAO,iBAAiB,CAAC,CAACG,CAAK;AAAA,MAGhC,UAAAH,EAAO;AAAA,IAAA;AAAA,IAPHA,EAAO;AAAA,EAAA,CAUjB,GACF,CAACJ,CAAK,CAAC;AAEV,SAAIE,EAAsB,2BAGvBM,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAH,EAACI,GAAA,EAAoB,SAAO,IAC1B,UAAA,gBAAAC,EAACC,KAAO,SAAQ,WAAU,WAAU,WACjC,UAAA;AAAA,MAAAV;AAAA,MACD,gBAAAI,EAACO,GAAA,EAAY,WAAU,eAAA,CAAe;AAAA,IAAA,EAAA,CACxC,EAAA,CACF;AAAA,IACA,gBAAAP,EAACQ,GAAA,EAAoB,OAAM,OACxB,UAAAX,EAAA,CACH;AAAA,EAAA,GACF,IAbuC;AAe3C;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDataTable.js","sources":["../../src/DataTable/useDataTable.ts"],"sourcesContent":["import React from 'react';\
|
|
1
|
+
{"version":3,"file":"useDataTable.js","sources":["../../src/DataTable/useDataTable.ts"],"sourcesContent":["import React from 'react';\nimport {\n ColumnFiltersState,\n SortingState,\n VisibilityState,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\n\n// TODO: refactor any type\nexport const useDataTable = (data: any, columns: any) => {\n const [sorting, setSorting] = React.useState<SortingState>([]);\n const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n []\n );\n const [columnVisibility, setColumnVisibility] =\n React.useState<VisibilityState>({});\n\n const table = useReactTable({\n data,\n columns,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n onColumnVisibilityChange: setColumnVisibility,\n enableRowSelection: true,\n manualPagination: true,\n manualSorting: true,\n manualFiltering: true,\n state: {\n sorting,\n columnFilters,\n columnVisibility,\n },\n });\n\n return { table };\n};\n"],"names":["useDataTable","data","columns","sorting","setSorting","React","columnFilters","setColumnFilters","columnVisibility","setColumnVisibility","useReactTable","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel"],"mappings":";;AAaO,MAAMA,IAAe,CAACC,GAAWC,MAAiB;AACvD,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAM,SAAuB,CAAA,CAAE,GACvD,CAACC,GAAeC,CAAgB,IAAIF,EAAM;AAAA,IAC9C,CAAA;AAAA,EAAC,GAEG,CAACG,GAAkBC,CAAmB,IAC1CJ,EAAM,SAA0B,CAAA,CAAE;AAuBpC,SAAO,EAAE,OArBKK,EAAc;AAAA,IAC1B,MAAAT;AAAA,IACA,SAAAC;AAAA,IACA,iBAAiBE;AAAA,IACjB,uBAAuBG;AAAA,IACvB,iBAAiBI,EAAA;AAAA,IACjB,uBAAuBC,EAAA;AAAA,IACvB,mBAAmBC,EAAA;AAAA,IACnB,qBAAqBC,EAAA;AAAA,IACrB,0BAA0BL;AAAA,IAC1B,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,OAAO;AAAA,MACL,SAAAN;AAAA,MACA,eAAAG;AAAA,MACA,kBAAAE;AAAA,IAAA;AAAA,EACF,CACD,EAEQ;AACX;"}
|
package/DatePicker/DatePicker.js
CHANGED
|
@@ -1,32 +1,33 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as e, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import * as i from "react";
|
|
3
3
|
import { format as d } from "date-fns";
|
|
4
4
|
import { Calendar as s } from "lucide-react";
|
|
5
5
|
import { cn as c } from "@oneplatformdev/utils";
|
|
6
|
-
import { uk as t } from "date-fns/locale";
|
|
7
6
|
import { Button as f } from "../Button/Button.js";
|
|
7
|
+
import "../Button/buttonVariants.js";
|
|
8
8
|
import { Calendar as p } from "../Calendar/Calendar.js";
|
|
9
9
|
import { Popover as u, PopoverTrigger as h, PopoverContent as y } from "../Popover/Popover.js";
|
|
10
|
+
import { uk as t } from "date-fns/locale";
|
|
10
11
|
const g = i.forwardRef(
|
|
11
|
-
(a,
|
|
12
|
+
(a, m) => {
|
|
12
13
|
const {
|
|
13
|
-
selectedDate:
|
|
14
|
-
onDateChange:
|
|
14
|
+
selectedDate: o,
|
|
15
|
+
onDateChange: l,
|
|
15
16
|
disabled: n = !1
|
|
16
17
|
} = a;
|
|
17
|
-
return /* @__PURE__ */
|
|
18
|
-
/* @__PURE__ */ r(h, { asChild: !0, children: /* @__PURE__ */
|
|
18
|
+
return /* @__PURE__ */ e(u, { children: [
|
|
19
|
+
/* @__PURE__ */ r(h, { asChild: !0, children: /* @__PURE__ */ e(
|
|
19
20
|
f,
|
|
20
21
|
{
|
|
21
|
-
ref:
|
|
22
|
+
ref: m,
|
|
22
23
|
disabled: n,
|
|
23
24
|
variant: "outline-solid",
|
|
24
25
|
className: c(
|
|
25
26
|
"w-full justify-start text-left font-normal border h-10",
|
|
26
|
-
!
|
|
27
|
+
!o && "text-muted-foreground"
|
|
27
28
|
),
|
|
28
29
|
children: [
|
|
29
|
-
|
|
30
|
+
o ? d(o, "LLL dd, y", { locale: t }) : /* @__PURE__ */ r("span", { children: "dd/mm/yyyy" }),
|
|
30
31
|
/* @__PURE__ */ r(s, { className: "mr-2 h-4 w-4 ml-auto" })
|
|
31
32
|
]
|
|
32
33
|
}
|
|
@@ -36,8 +37,8 @@ const g = i.forwardRef(
|
|
|
36
37
|
{
|
|
37
38
|
mode: "single",
|
|
38
39
|
captionLayout: "dropdown-buttons",
|
|
39
|
-
selected:
|
|
40
|
-
onSelect:
|
|
40
|
+
selected: o,
|
|
41
|
+
onSelect: l,
|
|
41
42
|
fromYear: 1960,
|
|
42
43
|
toYear: 2030,
|
|
43
44
|
locale: t
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client';\
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { format } from 'date-fns';\nimport { Calendar as CalendarIcon } from 'lucide-react';\nimport { cn } from '@oneplatformdev/utils';\nimport { Button } from '../Button';\nimport { Calendar } from '../Calendar';\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover';\nimport { uk } from 'date-fns/locale';\nimport { DatePickerProps } from './DatePicker.types';\n\nexport const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(\n (props, ref) => {\n const {\n selectedDate,\n onDateChange,\n disabled = false\n } = props;\n return (\n <Popover>\n <PopoverTrigger asChild>\n <Button\n ref={ref}\n disabled={disabled}\n variant={'outline-solid'}\n className={cn(\n 'w-full justify-start text-left font-normal border h-10',\n !selectedDate && 'text-muted-foreground'\n )}\n >\n {selectedDate ? (\n format(selectedDate, 'LLL dd, y', { locale: uk })\n ) : (\n <span>dd/mm/yyyy</span>\n )}\n <CalendarIcon className=\"mr-2 h-4 w-4 ml-auto\" />\n </Button>\n </PopoverTrigger>\n <PopoverContent align=\"start\" className=\"w-auto p-0\">\n <Calendar\n mode=\"single\"\n captionLayout=\"dropdown-buttons\"\n selected={selectedDate}\n onSelect={onDateChange}\n fromYear={1960}\n toYear={2030}\n locale={uk}\n />\n </PopoverContent>\n </Popover>\n );\n }\n);\n\nDatePicker.displayName = 'DatePicker';\n"],"names":["DatePicker","React","props","ref","selectedDate","onDateChange","disabled","Popover","jsx","PopoverTrigger","jsxs","Button","cn","format","uk","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;;;AAYO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,UAAAC,IAAW;AAAA,IAAA,IACTJ;AACJ,6BACGK,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,KAAAR;AAAA,UACA,UAAAG;AAAA,UACA,SAAS;AAAA,UACT,WAAWM;AAAA,YACT;AAAA,YACA,CAACR,KAAgB;AAAA,UAAA;AAAA,UAGlB,UAAA;AAAA,YAAAA,IACCS,EAAOT,GAAc,aAAa,EAAE,QAAQU,GAAI,IAEhD,gBAAAN,EAAC,QAAA,EAAK,UAAA,aAAA,CAAU;AAAA,YAElB,gBAAAA,EAACO,GAAA,EAAa,WAAU,uBAAA,CAAuB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEnD;AAAA,MACA,gBAAAP,EAACQ,GAAA,EAAe,OAAM,SAAQ,WAAU,cACtC,UAAA,gBAAAR;AAAA,QAACS;AAAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,eAAc;AAAA,UACd,UAAUb;AAAA,UACV,UAAUC;AAAA,UACV,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,QAAQS;AAAA,QAAA;AAAA,MAAA,EACV,CACF;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AAEAd,EAAW,cAAc;"}
|
package/Dialog/Dialog.js
CHANGED
|
@@ -3,12 +3,13 @@ import * as a from "@radix-ui/react-dialog";
|
|
|
3
3
|
import { XIcon as u } from "lucide-react";
|
|
4
4
|
import { cn as n } from "@oneplatformdev/utils";
|
|
5
5
|
import { ButtonIcon as f } from "../ButtonIcon/ButtonIcon.js";
|
|
6
|
-
|
|
6
|
+
import "../ButtonIcon/buttonIconVariants.js";
|
|
7
|
+
function y({
|
|
7
8
|
...t
|
|
8
9
|
}) {
|
|
9
10
|
return /* @__PURE__ */ e(a.Root, { "data-slot": "dialog", ...t });
|
|
10
11
|
}
|
|
11
|
-
function
|
|
12
|
+
function w({
|
|
12
13
|
...t
|
|
13
14
|
}) {
|
|
14
15
|
return /* @__PURE__ */ e(a.Trigger, { "data-slot": "dialog-trigger", ...t });
|
|
@@ -18,7 +19,7 @@ function g({
|
|
|
18
19
|
}) {
|
|
19
20
|
return /* @__PURE__ */ e(a.Portal, { "data-slot": "dialog-portal", ...t });
|
|
20
21
|
}
|
|
21
|
-
function
|
|
22
|
+
function D({
|
|
22
23
|
...t
|
|
23
24
|
}) {
|
|
24
25
|
return /* @__PURE__ */ e(a.Close, { "data-slot": "dialog-close", ...t });
|
|
@@ -39,7 +40,7 @@ function p({
|
|
|
39
40
|
}
|
|
40
41
|
);
|
|
41
42
|
}
|
|
42
|
-
function
|
|
43
|
+
function N(t) {
|
|
43
44
|
const {
|
|
44
45
|
className: o,
|
|
45
46
|
children: i,
|
|
@@ -101,7 +102,7 @@ function D(t) {
|
|
|
101
102
|
}
|
|
102
103
|
) }) });
|
|
103
104
|
}
|
|
104
|
-
function
|
|
105
|
+
function C({ className: t, ...o }) {
|
|
105
106
|
return /* @__PURE__ */ e(
|
|
106
107
|
"div",
|
|
107
108
|
{
|
|
@@ -111,7 +112,7 @@ function N({ className: t, ...o }) {
|
|
|
111
112
|
}
|
|
112
113
|
);
|
|
113
114
|
}
|
|
114
|
-
function
|
|
115
|
+
function z({ className: t, ...o }) {
|
|
115
116
|
return /* @__PURE__ */ e(
|
|
116
117
|
"div",
|
|
117
118
|
{
|
|
@@ -124,7 +125,7 @@ function C({ className: t, ...o }) {
|
|
|
124
125
|
}
|
|
125
126
|
);
|
|
126
127
|
}
|
|
127
|
-
function
|
|
128
|
+
function k(t) {
|
|
128
129
|
const {
|
|
129
130
|
className: o,
|
|
130
131
|
children: i,
|
|
@@ -154,7 +155,7 @@ function z(t) {
|
|
|
154
155
|
}
|
|
155
156
|
);
|
|
156
157
|
}
|
|
157
|
-
function
|
|
158
|
+
function j({
|
|
158
159
|
className: t,
|
|
159
160
|
...o
|
|
160
161
|
}) {
|
|
@@ -172,16 +173,16 @@ function k({
|
|
|
172
173
|
);
|
|
173
174
|
}
|
|
174
175
|
export {
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
176
|
+
y as Dialog,
|
|
177
|
+
D as DialogClose,
|
|
178
|
+
N as DialogContent,
|
|
179
|
+
j as DialogDescription,
|
|
180
|
+
z as DialogFooter,
|
|
181
|
+
C as DialogHeader,
|
|
181
182
|
p as DialogOverlay,
|
|
182
183
|
g as DialogPortal,
|
|
183
184
|
a as DialogPrimitive,
|
|
184
|
-
|
|
185
|
-
|
|
185
|
+
k as DialogTitle,
|
|
186
|
+
w as DialogTrigger
|
|
186
187
|
};
|
|
187
188
|
//# sourceMappingURL=Dialog.js.map
|
package/Dialog/Dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sources":["../../src/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\"\
|
|
1
|
+
{"version":3,"file":"Dialog.js","sources":["../../src/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { ButtonIcon } from \"../ButtonIcon\";\n\nfunction Dialog({\n ...props\n }: React.ComponentProps<typeof DialogPrimitive.Root>) {\n return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n ...props\n }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n ...props\n }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n ...props\n }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n className,\n ...props\n }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n return (\n <DialogPrimitive.Overlay\n data-slot=\"dialog-overlay\"\n className={cn(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DialogContent(props: React.ComponentProps<typeof DialogPrimitive.Content> & {\n showCloseButton?: boolean;\n slotProps?: {\n overlay?: React.ComponentProps<typeof DialogPrimitive.Overlay>;\n }\n}) {\n const {\n className,\n children,\n showCloseButton = true,\n style,\n slotProps,\n ...rest\n } = props;\n return (\n <DialogPortal data-slot=\"dialog-portal\">\n <DialogOverlay {...slotProps?.overlay}>\n <DialogPrimitive.Content\n data-slot=\"dialog-content\"\n data-closable={JSON.stringify(showCloseButton)}\n className={cn(\n 'group group/content',\n 'fixed top-[50%] left-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',\n 'flex flex-col w-full max-w-[calc(100%-2rem)] sm:max-w-2xl gap-3',\n 'max-h-[90%] overflow-auto overscroll-none',\n 'bg-background rounded-lg border shadow-lg duration-200 p-6',\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n \"focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 focus:ring-transparent\",\n 'outline-none focus:outline-none focus-visible:outline-none',\n className\n )}\n {...rest}\n style={{\n pointerEvents: 'auto',\n ...(style || {}),\n }}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close\n data-slot=\"dialog-close\"\n className={cn(\n 'absolute top-6 right-6 rounded-2xl opacity-70 transition-opacity hover:opacity-100',\n 'data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',\n 'ring-offset-background focus:ring-transparent focus:ring-0 focus:ring-offset-0 focus:outline-hidden',\n 'focus:outline-none focus:ring-0',\n 'disabled:pointer-events-none [&_svg]:pointer-events-none',\n '[&_svg]:shrink-0 [&_svg:not([class*=\"size-\"])]:size-5',\n 'cursor-pointer size-10 flex items-center justify-center',\n )}\n >\n <ButtonIcon\n variant='ghost'\n color='secondary'\n icon={XIcon}\n />\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n )}\n </DialogPrimitive.Content>\n </DialogOverlay>\n </DialogPortal>\n )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"dialog-header\"\n className={cn(\"flex flex-col gap-4 justify-center text-center sm:text-left min-h-10\", className)}\n {...props}\n />\n )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"dialog-footer\"\n className={cn(\n \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end pt-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DialogTitle(props: React.ComponentProps<typeof DialogPrimitive.Title>) {\n const {\n className,\n children,\n ...rest\n } = props;\n return (\n <DialogPrimitive.Title\n asChild\n data-slot=\"dialog-title\"\n className={cn(\n \"flex items-center min-h-10\",\n \"group-data-[closable='true']/content:pr-13\",\n className\n )}\n {...rest}\n >\n <span\n className={cn(\n \"text-lg leading-[1.2] font-bold text-[#06080D]\",\n 'whitespace-pre-wrap wrap-break-word line-clamp-10',\n )}\n >\n {children}\n </span>\n </DialogPrimitive.Title>\n )\n}\n\nfunction DialogDescription({\n className,\n ...props\n }: React.ComponentProps<typeof DialogPrimitive.Description>) {\n return (\n <DialogPrimitive.Description\n data-slot=\"dialog-description\"\n className={cn(\n \"text-[#06080D] font-medium text-base\",\n 'whitespace-pre-wrap wrap-break-word line-clamp-10',\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n DialogPrimitive\n}\n"],"names":["Dialog","props","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","className","jsx","cn","DialogContent","children","showCloseButton","style","slotProps","rest","jsxs","ButtonIcon","XIcon","DialogHeader","DialogFooter","DialogTitle","DialogDescription"],"mappings":"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"}
|
package/Dialog/Dialog.stories.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as o, jsxs as e } from "react/jsx-runtime";
|
|
2
2
|
import { Dialog as b, DialogTrigger as O, DialogContent as B, DialogHeader as v, DialogTitle as w, DialogDescription as T, DialogFooter as F, DialogClose as L } from "./Dialog.js";
|
|
3
|
-
import { useState as N, useCallback as S } from "react";
|
|
4
3
|
import { Button as l } from "../Button/Button.js";
|
|
4
|
+
import "../Button/buttonVariants.js";
|
|
5
|
+
import { useState as N, useCallback as S } from "react";
|
|
5
6
|
function I(p) {
|
|
6
7
|
const {
|
|
7
8
|
open: i,
|
|
@@ -41,7 +42,7 @@ function I(p) {
|
|
|
41
42
|
] })
|
|
42
43
|
] }) });
|
|
43
44
|
}
|
|
44
|
-
const
|
|
45
|
+
const W = {
|
|
45
46
|
title: "UI/Dialog",
|
|
46
47
|
component: I,
|
|
47
48
|
parameters: {
|
|
@@ -67,35 +68,35 @@ const U = {
|
|
|
67
68
|
bodyText: "Some content inside dialog…",
|
|
68
69
|
longBody: !1
|
|
69
70
|
}
|
|
70
|
-
},
|
|
71
|
+
}, _ = {}, q = {
|
|
71
72
|
args: {
|
|
72
73
|
description: ""
|
|
73
74
|
}
|
|
74
|
-
},
|
|
75
|
+
}, z = {
|
|
75
76
|
args: {
|
|
76
77
|
showCloseButton: !1
|
|
77
78
|
}
|
|
78
|
-
},
|
|
79
|
+
}, E = {
|
|
79
80
|
args: {
|
|
80
81
|
withFooter: !1
|
|
81
82
|
}
|
|
82
|
-
},
|
|
83
|
+
}, G = {
|
|
83
84
|
args: {
|
|
84
85
|
longBody: !0,
|
|
85
86
|
bodyText: "Long text line"
|
|
86
87
|
}
|
|
87
|
-
},
|
|
88
|
+
}, J = {
|
|
88
89
|
args: {
|
|
89
90
|
initialOpen: !0
|
|
90
91
|
}
|
|
91
92
|
};
|
|
92
93
|
export {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
94
|
+
_ as Default,
|
|
95
|
+
J as InitiallyOpen,
|
|
96
|
+
G as LongContentScrollable,
|
|
97
|
+
z as NoCloseButton,
|
|
98
|
+
E as NoFooter,
|
|
99
|
+
q as WithoutDescription,
|
|
100
|
+
W as default
|
|
100
101
|
};
|
|
101
102
|
//# sourceMappingURL=Dialog.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.stories.js","sources":["../../src/Dialog/Dialog.stories.tsx"],"sourcesContent":["import * as React from \"react\";\
|
|
1
|
+
{"version":3,"file":"Dialog.stories.js","sources":["../../src/Dialog/Dialog.stories.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogDescription,\n DialogFooter,\n DialogClose,\n} from \"./Dialog\";\nimport { Button } from \"../Button\";\nimport { useCallback, useState } from \"react\";\nimport { DialogControlsProps } from \"./Dialog.types\";\n\ntype DialogDemoProps = DialogControlsProps & {\n title: string;\n description?: string;\n showCloseButton?: boolean;\n withFooter?: boolean;\n initialOpen?: boolean;\n triggerLabel?: string;\n bodyText?: string;\n longBody?: boolean;\n};\n\n// TODO: create cmp like alert\nfunction DialogDemo(props: DialogDemoProps) {\n const {\n open: controlledOpen,\n onOpenChange,\n title,\n description,\n showCloseButton = true,\n withFooter = true,\n initialOpen = false,\n triggerLabel = \"Open dialog\",\n bodyText = \"Some content inside dialog…\",\n longBody = false,\n } = props;\n\n const [ internalOpen, setInternalOpen ] = useState(initialOpen);\n const isControlled = controlledOpen !== undefined;\n const open = isControlled ? controlledOpen : internalOpen;\n const setOpen = useCallback((next: boolean) => {\n if (!isControlled) setInternalOpen(next);\n onOpenChange?.(next);\n }, [ isControlled, onOpenChange ]);\n\n return (\n <div className=\"p-10\">\n <Dialog open={open} onOpenChange={setOpen}>\n <DialogTrigger asChild>\n <Button variant='outlined'>\n {triggerLabel}\n </Button>\n </DialogTrigger>\n\n <DialogContent showCloseButton={showCloseButton}>\n <DialogHeader>\n <DialogTitle>{title} 123</DialogTitle>\n {description ? <DialogDescription>{description}</DialogDescription> : null}\n </DialogHeader>\n\n <div className={longBody ? \"max-h-[50vh] overflow-auto pr-1\" : undefined}>\n {longBody ? (\n <div className=\"space-y-3 text-sm leading-6\">\n {Array.from({ length: 30 }).map((_, i) => (\n <p key={i}>\n #{i + 1}. {bodyText} Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </p>\n ))}\n </div>\n ) : (\n <p className=\"text-sm leading-6\">{bodyText}</p>\n )}\n </div>\n\n {withFooter ? (\n <DialogFooter>\n <DialogClose asChild>\n <Button color='secondary'>\n Cancel\n </Button>\n </DialogClose>\n\n <Button onClick={() => setOpen(false)}>\n Save\n </Button>\n </DialogFooter>\n ) : null}\n </DialogContent>\n </Dialog>\n </div>\n );\n}\n\nconst meta: Meta<typeof DialogDemo> = {\n title: \"UI/Dialog\",\n component: DialogDemo,\n parameters: {\n layout: \"fullscreen\",\n },\n argTypes: {\n title: { control: \"text\" },\n description: { control: \"text\" },\n showCloseButton: { control: \"boolean\" },\n withFooter: { control: \"boolean\" },\n initialOpen: { control: \"boolean\" },\n triggerLabel: { control: \"text\" },\n bodyText: { control: \"text\" },\n longBody: { control: \"boolean\" },\n },\n args: {\n title: \"Dialog title\",\n description: \"Dialog description\",\n showCloseButton: true,\n withFooter: true,\n initialOpen: false,\n triggerLabel: \"Open dialog\",\n bodyText: \"Some content inside dialog…\",\n longBody: false,\n },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof DialogDemo>;\n\nexport const Default: Story = {};\n\nexport const WithoutDescription: Story = {\n args: {\n description: \"\",\n },\n};\n\nexport const NoCloseButton: Story = {\n args: {\n showCloseButton: false,\n },\n};\n\nexport const NoFooter: Story = {\n args: {\n withFooter: false,\n },\n};\n\nexport const LongContentScrollable: Story = {\n args: {\n longBody: true,\n bodyText: \"Long text line\",\n },\n};\n\nexport const InitiallyOpen: Story = {\n args: {\n initialOpen: true,\n },\n};\n"],"names":["DialogDemo","props","controlledOpen","onOpenChange","title","description","showCloseButton","withFooter","initialOpen","triggerLabel","bodyText","longBody","internalOpen","setInternalOpen","useState","isControlled","open","setOpen","useCallback","next","jsx","Dialog","DialogTrigger","Button","jsxs","DialogContent","DialogHeader","DialogTitle","DialogDescription","_","i","DialogFooter","DialogClose","meta","Default","WithoutDescription","NoCloseButton","NoFooter","LongContentScrollable","InitiallyOpen"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogOverlayScope.js","sources":["../../src/Dialog/DialogOverlayScope.tsx"],"sourcesContent":["import { createContext, PropsWithChildren, useContext } from 'react';\
|
|
1
|
+
{"version":3,"file":"DialogOverlayScope.js","sources":["../../src/Dialog/DialogOverlayScope.tsx"],"sourcesContent":["import { createContext, PropsWithChildren, useContext } from 'react';\n\nexport const DialogOverlayContainerContext = createContext<HTMLElement | null>(\n null\n);\nexport const useDialogOverlayContainer = () => useContext(DialogOverlayContainerContext);\n\ninterface IDialogOverlayScopeProps\n extends PropsWithChildren {\n value: HTMLElement | null;\n}\n\nexport const DialogOverlayScope = ({ value, children }: IDialogOverlayScopeProps) => {\n return (\n <DialogOverlayContainerContext.Provider value={value}>\n {children}\n </DialogOverlayContainerContext.Provider>\n );\n}\n"],"names":["DialogOverlayContainerContext","createContext","useDialogOverlayContainer","useContext","DialogOverlayScope","value","children","jsx"],"mappings":";;AAEO,MAAMA,IAAgCC;AAAA,EAC3C;AACF,GACaC,IAA4B,MAAMC,EAAWH,CAA6B,GAO1EI,IAAqB,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAExC,gBAAAC,EAACP,EAA8B,UAA9B,EAAuC,OAAAK,GACrC,UAAAC,EAAA,CACH;"}
|