@oneplatformdev/ui 0.1.99-beta.304 → 0.1.99-beta.305
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 +2 -4
- package/AlertDialog/AlertDialog.stories.js.map +1 -1
- package/AlertDialog/AlertDialogRoot.js +18 -20
- 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 +10 -11
- 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 +19 -22
- 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 +3487 -3487
- package/Calendar/Calendar.js +4 -6
- package/Calendar/Calendar.js.map +1 -1
- package/Card/Card.js.map +1 -1
- package/Carousel/Carousel.js +6 -7
- package/Carousel/Carousel.js.map +1 -1
- package/Chart/Chart.js.map +1 -1
- package/Checkbox/Checkbox.js +0 -1
- package/Checkbox/Checkbox.js.map +1 -1
- package/Checkbox/Checkbox.stories.js.map +1 -1
- package/Collapsible/Collapsible.js.map +1 -1
- package/ColorInput/ColorInput.d.ts +10 -0
- package/ColorInput/ColorInput.d.ts.map +1 -0
- package/ColorInput/ColorInput.js +103 -0
- package/ColorInput/ColorInput.js.map +1 -0
- package/ColorInput/ColorInput.stories.js +78 -0
- package/ColorInput/ColorInput.stories.js.map +1 -0
- package/ColorInput/ColorInput.types.d.ts +46 -0
- package/ColorInput/ColorInput.types.d.ts.map +1 -0
- package/ColorInput/ColorInput.types.js +2 -0
- package/ColorInput/ColorInput.types.js.map +1 -0
- package/ColorInput/ColorPicker.d.ts +28 -0
- package/ColorInput/ColorPicker.d.ts.map +1 -0
- package/ColorInput/ColorPicker.js +322 -0
- package/ColorInput/ColorPicker.js.map +1 -0
- package/ColorInput/color.utils.d.ts +42 -0
- package/ColorInput/color.utils.d.ts.map +1 -0
- package/ColorInput/color.utils.js +129 -0
- package/ColorInput/color.utils.js.map +1 -0
- package/ColorInput/index.d.ts +6 -0
- package/ColorInput/index.d.ts.map +1 -0
- package/ColorInput/index.js +25 -0
- package/ColorInput/index.js.map +1 -0
- package/ColorInput/useSavedColors.d.ts +13 -0
- package/ColorInput/useSavedColors.d.ts.map +1 -0
- package/ColorInput/useSavedColors.js +53 -0
- package/ColorInput/useSavedColors.js.map +1 -0
- package/Combobox/Combobox.js +10 -10
- package/Combobox/Combobox.js.map +1 -1
- package/Combobox/Combobox.stories.js.map +1 -1
- package/Combobox/Combobox.types.js.map +1 -1
- package/Combobox/ComboboxOptionItem.js +18 -19
- package/Combobox/ComboboxOptionItem.js.map +1 -1
- package/Combobox/ComboboxRenderContent.js +18 -19
- package/Combobox/ComboboxRenderContent.js.map +1 -1
- package/Combobox/ComboboxRenderOptions.js +5 -5
- package/Combobox/ComboboxRenderOptions.js.map +1 -1
- package/Combobox/ComboboxRenderTrigger.js +20 -22
- package/Combobox/ComboboxRenderTrigger.js.map +1 -1
- package/Command/Command.js +21 -22
- package/Command/Command.js.map +1 -1
- package/ContextPopover/ContextDropdownMenu.js.map +1 -1
- package/ContextPopover/ContextPopover.js.map +1 -1
- package/ContextPopover/useContextPopoverHandler.js.map +1 -1
- package/DataTable/DataTable.js +24 -26
- package/DataTable/DataTable.js.map +1 -1
- package/DataTable/DataTableColumnFilter.js +6 -7
- package/DataTable/DataTableColumnFilter.js.map +1 -1
- package/DataTable/useDataTable.js.map +1 -1
- package/DatePicker/DatePicker.js +1 -2
- package/DatePicker/DatePicker.js.map +1 -1
- package/Dialog/Dialog.js +20 -21
- package/Dialog/Dialog.js.map +1 -1
- package/Dialog/Dialog.stories.js +14 -15
- package/Dialog/Dialog.stories.js.map +1 -1
- package/Dialog/DialogOverlayScope.js.map +1 -1
- package/Dialog/useDialogClosePosition.js.map +1 -1
- package/Drawer/Drawer.js.map +1 -1
- package/DropdownMenu/DropdownMenu.js.map +1 -1
- package/Dropzone/Dropzone.js +80 -81
- 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/DropzoneCoverPreview.js.map +1 -1
- package/Dropzone/DropzoneFilePreview.js.map +1 -1
- package/Dropzone/DropzoneSinglePickPreview.js +2 -3
- package/Dropzone/DropzoneSinglePickPreview.js.map +1 -1
- package/Dropzone/DropzoneUtils.js.map +1 -1
- package/Form/Form.js +14 -15
- package/Form/Form.js.map +1 -1
- package/Form/FormRenderControl.js +6 -7
- package/Form/FormRenderControl.js.map +1 -1
- package/Form/Form_old.js +4 -5
- package/Form/Form_old.js.map +1 -1
- package/FormCheckbox/FormCheckbox.js +4 -4
- package/FormCheckbox/FormCheckbox.js.map +1 -1
- package/FormColorInput/FormColorInput.d.ts +7 -0
- package/FormColorInput/FormColorInput.d.ts.map +1 -0
- package/FormColorInput/FormColorInput.js +38 -0
- package/FormColorInput/FormColorInput.js.map +1 -0
- package/FormColorInput/FormColorInput.stories.js +95 -0
- package/FormColorInput/FormColorInput.stories.js.map +1 -0
- package/FormColorInput/FormColorInput.types.d.ts +6 -0
- package/FormColorInput/FormColorInput.types.d.ts.map +1 -0
- package/FormColorInput/FormColorInput.types.js +2 -0
- package/FormColorInput/FormColorInput.types.js.map +1 -0
- package/FormColorInput/index.d.ts +3 -0
- package/FormColorInput/index.d.ts.map +1 -0
- package/FormColorInput/index.js +5 -0
- package/FormColorInput/index.js.map +1 -0
- package/FormCombobox/FormCombobox.js +4 -4
- package/FormCombobox/FormCombobox.js.map +1 -1
- package/FormCombobox/FormCombobox.stories.js +17 -19
- package/FormCombobox/FormCombobox.stories.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 +12 -13
- package/FormInput/FormInput.stories.js.map +1 -1
- package/FormRadio/FormRadio.js.map +1 -1
- package/FormSelect/FormSelect.js +12 -15
- 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/Input.stories.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 +4 -5
- 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 +0 -1
- package/Pagination/Pagination.js.map +1 -1
- 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 +6 -7
- 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 +20 -21
- 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/Switch/Switch.stories.js.map +1 -1
- package/Table/Table.js.map +1 -1
- package/TablePagination/TablePagination.js +21 -26
- 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 +3 -4
- 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.d.ts +2 -0
- package/index.d.ts.map +1 -1
- package/index.js +366 -342
- package/index.js.map +1 -1
- package/package.json +3 -3
- package/vite-env.d.ts +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextPopover.js","sources":["../../src/ContextPopover/ContextPopover.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, PropsWithChildren } from \"react\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../Popover\";\n\nexport interface IContextPopoverProps\n\textends ComponentPropsWithoutRef<typeof Popover> {\n\tcoords: { x: number; y: number };\n}\n\nexport const ContextPopover = forwardRef<\n\tHTMLDivElement,\n\tPropsWithChildren<IContextPopoverProps>\n>((props, ref) => {\n\tconst { coords, children, ...rest } = props;\n\treturn (\n\t\t<Popover {...rest}>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<div\n\t\t\t\t\tclassName='fixed w-[1px] h-[1px] opacity-0 pointer-events-none z-50'\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tleft: coords?.x || 0,\n\t\t\t\t\t\ttop: coords?.y || 0,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent\n\t\t\t\tref={ref}\n\t\t\t\tclassName=\"p-2 relative w-auto h-fit min-w-[150px] max-h-[300px] overflow-y-auto\"\n\t\t\t\talign=\"start\"\n\t\t\t\tsideOffset={5}\n\t\t\t\tonOpenAutoFocus={(event) => event.preventDefault()}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t)\n})\n\nContextPopover.displayName = 'ContextPopover'\n"],"names":["ContextPopover","forwardRef","props","ref","coords","children","rest","jsxs","Popover","jsx","PopoverTrigger","PopoverContent","event"],"mappings":";;;AAQO,MAAMA,IAAiBC,EAG5B,CAACC,GAAOC,MAAQ;AACjB,QAAM,EAAE,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,MAASJ;AACtC,SACC,gBAAAK,EAACC,GAAA,EAAS,GAAGF,GACZ,UAAA;AAAA,IAAA,gBAAAG,EAACC,GAAA,EAAe,SAAO,IACtB,UAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO;AAAA,UACN,MAAML,GAAQ,KAAK;AAAA,UACnB,KAAKA,GAAQ,KAAK;AAAA,QAAA;AAAA,MACnB;AAAA,IAAA,GAEF;AAAA,IACA,gBAAAK;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,KAAAR;AAAA,QACA,WAAU;AAAA,QACV,OAAM;AAAA,QACN,YAAY;AAAA,QACZ,iBAAiB,CAACS,MAAUA,EAAM,eAAA;AAAA,QAEjC,UAAAP;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACD;AAEF,CAAC;AAEDL,EAAe,cAAc;"}
|
|
1
|
+
{"version":3,"file":"ContextPopover.js","sources":["../../src/ContextPopover/ContextPopover.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, PropsWithChildren } from \"react\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../Popover\";\r\n\r\nexport interface IContextPopoverProps\r\n\textends ComponentPropsWithoutRef<typeof Popover> {\r\n\tcoords: { x: number; y: number };\r\n}\r\n\r\nexport const ContextPopover = forwardRef<\r\n\tHTMLDivElement,\r\n\tPropsWithChildren<IContextPopoverProps>\r\n>((props, ref) => {\r\n\tconst { coords, children, ...rest } = props;\r\n\treturn (\r\n\t\t<Popover {...rest}>\r\n\t\t\t<PopoverTrigger asChild>\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName='fixed w-[1px] h-[1px] opacity-0 pointer-events-none z-50'\r\n\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\tleft: coords?.x || 0,\r\n\t\t\t\t\t\ttop: coords?.y || 0,\r\n\t\t\t\t\t}}\r\n\t\t\t\t/>\r\n\t\t\t</PopoverTrigger>\r\n\t\t\t<PopoverContent\r\n\t\t\t\tref={ref}\r\n\t\t\t\tclassName=\"p-2 relative w-auto h-fit min-w-[150px] max-h-[300px] overflow-y-auto\"\r\n\t\t\t\talign=\"start\"\r\n\t\t\t\tsideOffset={5}\r\n\t\t\t\tonOpenAutoFocus={(event) => event.preventDefault()}\r\n\t\t\t>\r\n\t\t\t\t{children}\r\n\t\t\t</PopoverContent>\r\n\t\t</Popover>\r\n\t)\r\n})\r\n\r\nContextPopover.displayName = 'ContextPopover'\r\n"],"names":["ContextPopover","forwardRef","props","ref","coords","children","rest","jsxs","Popover","jsx","PopoverTrigger","PopoverContent","event"],"mappings":";;;AAQO,MAAMA,IAAiBC,EAG5B,CAACC,GAAOC,MAAQ;AACjB,QAAM,EAAE,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,MAASJ;AACtC,SACC,gBAAAK,EAACC,GAAA,EAAS,GAAGF,GACZ,UAAA;AAAA,IAAA,gBAAAG,EAACC,GAAA,EAAe,SAAO,IACtB,UAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO;AAAA,UACN,MAAML,GAAQ,KAAK;AAAA,UACnB,KAAKA,GAAQ,KAAK;AAAA,QAAA;AAAA,MACnB;AAAA,IAAA,GAEF;AAAA,IACA,gBAAAK;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,KAAAR;AAAA,QACA,WAAU;AAAA,QACV,OAAM;AAAA,QACN,YAAY;AAAA,QACZ,iBAAiB,CAACS,MAAUA,EAAM,eAAA;AAAA,QAEjC,UAAAP;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACD;AAEF,CAAC;AAEDL,EAAe,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useContextPopoverHandler.js","sources":["../../src/ContextPopover/useContextPopoverHandler.ts"],"sourcesContent":["import { MouseEvent, useCallback, useRef, useState } from \"react\";\nimport { useOnClickOutside } from \"@oneplatformdev/hooks\";\n\nexport const useContextPopoverHandler = <\n\tData,\n\tElement extends HTMLDivElement = HTMLDivElement\n>() => {\n\tconst [ open, setOpen ] = useState(false);\n\tconst [ coords, setCoords ] = useState({ x: 0, y: 0 });\n\tconst [ data, setData ] = useState<Data | null>(null);\n\n\tconst ref = useRef<Element>(null!);\n\n\tuseOnClickOutside(ref, () => {\n\t\tif (open) {\n\t\t\tsetOpen(false);\n\t\t\tsetData(null);\n\t\t}\n\t});\n\n\tconst onContext = useCallback((event: MouseEvent, data: Data) => {\n\t\tevent.preventDefault()\n\n\t\tsetCoords({ x: event.clientX, y: event.clientY });\n\t\tsetData(data);\n\t\tsetOpen(true);\n\t}, [])\n\n\treturn {\n\t\tonContext,\n\t\tref,\n\t\topen,\n\t\tsetOpen,\n\t\tcoords,\n\t\tdata,\n\t}\n}\n\nexport type IUseContextPopoverHandler<Data> = ReturnType<typeof useContextPopoverHandler<Data>>;\n"],"names":["useContextPopoverHandler","open","setOpen","useState","coords","setCoords","data","setData","ref","useRef","useOnClickOutside","useCallback","event"],"mappings":";;AAGO,MAAMA,IAA2B,MAGjC;AACN,QAAM,CAAEC,GAAMC,CAAQ,IAAIC,EAAS,EAAK,GAClC,CAAEC,GAAQC,CAAU,IAAIF,EAAS,EAAE,GAAG,GAAG,GAAG,GAAG,GAC/C,CAAEG,GAAMC,CAAQ,IAAIJ,EAAsB,IAAI,GAE9CK,IAAMC,EAAgB,IAAK;AAEjC,SAAAC,EAAkBF,GAAK,MAAM;AAC5B,IAAIP,MACHC,EAAQ,EAAK,GACbK,EAAQ,IAAI;AAAA,EAEd,CAAC,GAUM;AAAA,IACN,WATiBI,EAAY,CAACC,GAAmBN,MAAe;AAChE,MAAAM,EAAM,eAAA,GAENP,EAAU,EAAE,GAAGO,EAAM,SAAS,GAAGA,EAAM,SAAS,GAChDL,EAAQD,CAAI,GACZJ,EAAQ,EAAI;AAAA,IACb,GAAG,CAAA,CAAE;AAAA,IAIJ,KAAAM;AAAA,IACA,MAAAP;AAAA,IACA,SAAAC;AAAA,IACA,QAAAE;AAAA,IACA,MAAAE;AAAA,EAAA;AAEF;"}
|
|
1
|
+
{"version":3,"file":"useContextPopoverHandler.js","sources":["../../src/ContextPopover/useContextPopoverHandler.ts"],"sourcesContent":["import { MouseEvent, useCallback, useRef, useState } from \"react\";\r\nimport { useOnClickOutside } from \"@oneplatformdev/hooks\";\r\n\r\nexport const useContextPopoverHandler = <\r\n\tData,\r\n\tElement extends HTMLDivElement = HTMLDivElement\r\n>() => {\r\n\tconst [ open, setOpen ] = useState(false);\r\n\tconst [ coords, setCoords ] = useState({ x: 0, y: 0 });\r\n\tconst [ data, setData ] = useState<Data | null>(null);\r\n\r\n\tconst ref = useRef<Element>(null!);\r\n\r\n\tuseOnClickOutside(ref, () => {\r\n\t\tif (open) {\r\n\t\t\tsetOpen(false);\r\n\t\t\tsetData(null);\r\n\t\t}\r\n\t});\r\n\r\n\tconst onContext = useCallback((event: MouseEvent, data: Data) => {\r\n\t\tevent.preventDefault()\r\n\r\n\t\tsetCoords({ x: event.clientX, y: event.clientY });\r\n\t\tsetData(data);\r\n\t\tsetOpen(true);\r\n\t}, [])\r\n\r\n\treturn {\r\n\t\tonContext,\r\n\t\tref,\r\n\t\topen,\r\n\t\tsetOpen,\r\n\t\tcoords,\r\n\t\tdata,\r\n\t}\r\n}\r\n\r\nexport type IUseContextPopoverHandler<Data> = ReturnType<typeof useContextPopoverHandler<Data>>;\r\n"],"names":["useContextPopoverHandler","open","setOpen","useState","coords","setCoords","data","setData","ref","useRef","useOnClickOutside","useCallback","event"],"mappings":";;AAGO,MAAMA,IAA2B,MAGjC;AACN,QAAM,CAAEC,GAAMC,CAAQ,IAAIC,EAAS,EAAK,GAClC,CAAEC,GAAQC,CAAU,IAAIF,EAAS,EAAE,GAAG,GAAG,GAAG,GAAG,GAC/C,CAAEG,GAAMC,CAAQ,IAAIJ,EAAsB,IAAI,GAE9CK,IAAMC,EAAgB,IAAK;AAEjC,SAAAC,EAAkBF,GAAK,MAAM;AAC5B,IAAIP,MACHC,EAAQ,EAAK,GACbK,EAAQ,IAAI;AAAA,EAEd,CAAC,GAUM;AAAA,IACN,WATiBI,EAAY,CAACC,GAAmBN,MAAe;AAChE,MAAAM,EAAM,eAAA,GAENP,EAAU,EAAE,GAAGO,EAAM,SAAS,GAAGA,EAAM,SAAS,GAChDL,EAAQD,CAAI,GACZJ,EAAQ,EAAI;AAAA,IACb,GAAG,CAAA,CAAE;AAAA,IAIJ,KAAAM;AAAA,IACA,MAAAP;AAAA,IACA,SAAAC;AAAA,IACA,QAAAE;AAAA,IACA,MAAAE;AAAA,EAAA;AAEF;"}
|
package/DataTable/DataTable.js
CHANGED
|
@@ -1,56 +1,54 @@
|
|
|
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";
|
|
7
2
|
import { flexRender as d } from "@tanstack/react-table";
|
|
8
|
-
import { ChevronDown as
|
|
9
|
-
|
|
10
|
-
|
|
3
|
+
import { ChevronDown as m } from "lucide-react";
|
|
4
|
+
import { Button as h } from "../Button/Button.js";
|
|
5
|
+
import { DropdownMenu as g, DropdownMenuTrigger as p, DropdownMenuContent as u, DropdownMenuCheckboxItem as C } from "../DropdownMenu/DropdownMenu.js";
|
|
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,
|
|
11
9
|
ToolBar: a,
|
|
12
10
|
tColumns: s = "Columns",
|
|
13
11
|
tNoResults: c = "No results"
|
|
14
12
|
}) => /* @__PURE__ */ i("div", { className: "w-full", children: [
|
|
15
13
|
/* @__PURE__ */ i("div", { className: "flex items-center py-4", children: [
|
|
16
14
|
a,
|
|
17
|
-
/* @__PURE__ */ i(
|
|
18
|
-
/* @__PURE__ */ l(p, { asChild: !0, children: /* @__PURE__ */ i(
|
|
15
|
+
/* @__PURE__ */ i(g, { children: [
|
|
16
|
+
/* @__PURE__ */ l(p, { asChild: !0, children: /* @__PURE__ */ i(h, { variant: "outline", className: "ml-auto", children: [
|
|
19
17
|
s,
|
|
20
18
|
" ",
|
|
21
|
-
/* @__PURE__ */ l(
|
|
19
|
+
/* @__PURE__ */ l(m, { className: "ml-2 h-4 w-4" })
|
|
22
20
|
] }) }),
|
|
23
|
-
/* @__PURE__ */ l(
|
|
24
|
-
|
|
21
|
+
/* @__PURE__ */ l(u, { align: "end", children: r.getAllColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ l(
|
|
22
|
+
C,
|
|
25
23
|
{
|
|
26
24
|
className: "capitalize",
|
|
27
25
|
checked: e.getIsVisible(),
|
|
28
|
-
onCheckedChange: (
|
|
26
|
+
onCheckedChange: (n) => e.toggleVisibility(!!n),
|
|
29
27
|
children: e.id
|
|
30
28
|
},
|
|
31
29
|
e.id
|
|
32
30
|
)) })
|
|
33
31
|
] })
|
|
34
32
|
] }),
|
|
35
|
-
/* @__PURE__ */ l("div", { className: "rounded-md border", children: /* @__PURE__ */ i(
|
|
36
|
-
/* @__PURE__ */ l(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
) },
|
|
40
|
-
/* @__PURE__ */ l(
|
|
33
|
+
/* @__PURE__ */ l("div", { className: "rounded-md border", children: /* @__PURE__ */ i(f, { children: [
|
|
34
|
+
/* @__PURE__ */ l(w, { children: r.getHeaderGroups().map((e) => /* @__PURE__ */ l(t, { children: e.headers.map((n) => /* @__PURE__ */ l(x, { children: n.isPlaceholder ? null : d(
|
|
35
|
+
n.column.columnDef.header,
|
|
36
|
+
n.getContext()
|
|
37
|
+
) }, n.id)) }, e.id)) }),
|
|
38
|
+
/* @__PURE__ */ l(b, { children: r.getRowModel().rows?.length ? r.getRowModel().rows.map((e) => /* @__PURE__ */ l(
|
|
41
39
|
t,
|
|
42
40
|
{
|
|
43
41
|
"data-state": e.getIsSelected() && "selected",
|
|
44
|
-
children: e.getVisibleCells().map((
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
) },
|
|
42
|
+
children: e.getVisibleCells().map((n) => /* @__PURE__ */ l(o, { children: d(
|
|
43
|
+
n.column.columnDef.cell,
|
|
44
|
+
n.getContext()
|
|
45
|
+
) }, n.id))
|
|
48
46
|
},
|
|
49
47
|
e.id
|
|
50
48
|
)) : /* @__PURE__ */ l(t, { children: /* @__PURE__ */ l(
|
|
51
49
|
o,
|
|
52
50
|
{
|
|
53
|
-
colSpan:
|
|
51
|
+
colSpan: r.getAllColumns().length,
|
|
54
52
|
className: "h-24 text-center",
|
|
55
53
|
children: c
|
|
56
54
|
}
|
|
@@ -58,6 +56,6 @@ const y = ({
|
|
|
58
56
|
] }) })
|
|
59
57
|
] });
|
|
60
58
|
export {
|
|
61
|
-
|
|
59
|
+
R as DataTable
|
|
62
60
|
};
|
|
63
61
|
//# sourceMappingURL=DataTable.js.map
|
|
@@ -1 +1 @@
|
|
|
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":"
|
|
1
|
+
{"version":3,"file":"DataTable.js","sources":["../../src/DataTable/DataTable.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Button } from '../Button';\r\nimport {\r\n DropdownMenu,\r\n DropdownMenuCheckboxItem,\r\n DropdownMenuContent,\r\n DropdownMenuTrigger,\r\n} from '../DropdownMenu';\r\nimport {\r\n Table,\r\n TableBody,\r\n TableCell,\r\n TableHead,\r\n TableHeader,\r\n TableRow,\r\n} from '../Table';\r\nimport { flexRender, type Table as ReactTable } from '@tanstack/react-table';\r\nimport { ChevronDown } from 'lucide-react';\r\nimport React, { FC } from 'react';\r\n\r\ninterface IProps {\r\n table: ReactTable<any>;\r\n ToolBar?: React.ReactNode;\r\n tColumns?: string;\r\n tNoResults?: string;\r\n}\r\n\r\nexport const DataTable: FC<IProps> = ({\r\n table,\r\n ToolBar,\r\n tColumns = 'Columns',\r\n tNoResults = 'No results',\r\n}) => {\r\n return (\r\n <div className=\"w-full\">\r\n <div className=\"flex items-center py-4\">\r\n {ToolBar}\r\n <DropdownMenu>\r\n <DropdownMenuTrigger asChild>\r\n <Button variant=\"outline\" className=\"ml-auto\">\r\n {tColumns} <ChevronDown className=\"ml-2 h-4 w-4\" />\r\n </Button>\r\n </DropdownMenuTrigger>\r\n <DropdownMenuContent align=\"end\">\r\n {table\r\n .getAllColumns()\r\n .filter((column) => column.getCanHide())\r\n .map((column) => {\r\n return (\r\n <DropdownMenuCheckboxItem\r\n key={column.id}\r\n className=\"capitalize\"\r\n checked={column.getIsVisible()}\r\n onCheckedChange={(value) =>\r\n column.toggleVisibility(!!value)\r\n }\r\n >\r\n {column.id}\r\n </DropdownMenuCheckboxItem>\r\n );\r\n })}\r\n </DropdownMenuContent>\r\n </DropdownMenu>\r\n </div>\r\n <div className=\"rounded-md border\">\r\n <Table>\r\n <TableHeader>\r\n {table.getHeaderGroups().map((headerGroup) => (\r\n <TableRow key={headerGroup.id}>\r\n {headerGroup.headers.map((header) => {\r\n return (\r\n <TableHead key={header.id}>\r\n {header.isPlaceholder\r\n ? null\r\n : flexRender(\r\n header.column.columnDef.header,\r\n header.getContext()\r\n )}\r\n </TableHead>\r\n );\r\n })}\r\n </TableRow>\r\n ))}\r\n </TableHeader>\r\n <TableBody>\r\n {table.getRowModel().rows?.length ? (\r\n table.getRowModel().rows.map((row) => (\r\n <TableRow\r\n key={row.id}\r\n data-state={row.getIsSelected() && 'selected'}\r\n >\r\n {row.getVisibleCells().map((cell) => (\r\n <TableCell key={cell.id}>\r\n {flexRender(\r\n cell.column.columnDef.cell,\r\n cell.getContext()\r\n )}\r\n </TableCell>\r\n ))}\r\n </TableRow>\r\n ))\r\n ) : (\r\n <TableRow>\r\n <TableCell\r\n colSpan={table.getAllColumns().length}\r\n className=\"h-24 text-center\"\r\n >\r\n {tNoResults}\r\n </TableCell>\r\n </TableRow>\r\n )}\r\n </TableBody>\r\n </Table>\r\n </div>\r\n </div>\r\n );\r\n};\r\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,14 +1,13 @@
|
|
|
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 s } from "lucide-react";
|
|
3
|
+
import { useMemo as m } from "react";
|
|
4
4
|
import { Button as d } from "../Button/Button.js";
|
|
5
|
-
import "../Button/buttonVariants.js";
|
|
6
5
|
import { DropdownMenuCheckboxItem as c, DropdownMenu as u, DropdownMenuTrigger as h, DropdownMenuContent as p } from "../DropdownMenu/DropdownMenu.js";
|
|
7
|
-
const
|
|
6
|
+
const D = (i) => {
|
|
8
7
|
const {
|
|
9
8
|
table: r,
|
|
10
9
|
columnsLabel: l = "Columns"
|
|
11
|
-
} = i, o =
|
|
10
|
+
} = i, o = m(() => r.getAllColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ n(
|
|
12
11
|
c,
|
|
13
12
|
{
|
|
14
13
|
className: "capitalize",
|
|
@@ -21,12 +20,12 @@ const x = (i) => {
|
|
|
21
20
|
return o.length ? /* @__PURE__ */ t(u, { children: [
|
|
22
21
|
/* @__PURE__ */ n(h, { asChild: !0, children: /* @__PURE__ */ t(d, { variant: "outline", className: "ml-auto", children: [
|
|
23
22
|
l,
|
|
24
|
-
/* @__PURE__ */ n(
|
|
23
|
+
/* @__PURE__ */ n(s, { className: "ml-2 h-4 w-4" })
|
|
25
24
|
] }) }),
|
|
26
25
|
/* @__PURE__ */ n(p, { align: "end", children: o })
|
|
27
26
|
] }) : null;
|
|
28
27
|
};
|
|
29
28
|
export {
|
|
30
|
-
|
|
29
|
+
D as DataTableColumnFilter
|
|
31
30
|
};
|
|
32
31
|
//# sourceMappingURL=DataTableColumnFilter.js.map
|
|
@@ -1 +1 @@
|
|
|
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":"
|
|
1
|
+
{"version":3,"file":"DataTableColumnFilter.js","sources":["../../src/DataTable/DataTableColumnFilter.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ChevronDown } from 'lucide-react';\r\nimport React, { FC, useMemo } from 'react';\r\n\r\nimport { Button } from '../Button';\r\nimport {\r\n DropdownMenu,\r\n DropdownMenuCheckboxItem,\r\n DropdownMenuContent,\r\n DropdownMenuTrigger,\r\n} from '../DropdownMenu';\r\nimport { DataTableProps } from './DataTable.types';\r\n\r\n// TODO: refactor this component to use the new Table component\r\nexport const DataTableColumnFilter: FC<DataTableProps> = (props) => {\r\n const {\r\n table,\r\n columnsLabel = 'Columns',\r\n } = props;\r\n\r\n const columnsCheckboxRender = useMemo(() => {\r\n return table\r\n .getAllColumns()\r\n .filter((column) => column.getCanHide())\r\n .map((column) => {\r\n return (\r\n <DropdownMenuCheckboxItem\r\n key={column.id}\r\n className=\"capitalize\"\r\n checked={column.getIsVisible()}\r\n onCheckedChange={(value) =>\r\n column.toggleVisibility(!!value)\r\n }\r\n >\r\n {column.id}\r\n </DropdownMenuCheckboxItem>\r\n );\r\n })\r\n }, [table])\r\n\r\n if(!columnsCheckboxRender.length) return null;\r\n\r\n return (\r\n <DropdownMenu>\r\n <DropdownMenuTrigger asChild>\r\n <Button variant=\"outline\" className=\"ml-auto\">\r\n {columnsLabel}\r\n <ChevronDown className=\"ml-2 h-4 w-4\" />\r\n </Button>\r\n </DropdownMenuTrigger>\r\n <DropdownMenuContent align=\"end\">\r\n {columnsCheckboxRender}\r\n </DropdownMenuContent>\r\n </DropdownMenu>\r\n );\r\n};\r\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';\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;"}
|
|
1
|
+
{"version":3,"file":"useDataTable.js","sources":["../../src/DataTable/useDataTable.ts"],"sourcesContent":["import React from 'react';\r\nimport {\r\n ColumnFiltersState,\r\n SortingState,\r\n VisibilityState,\r\n getCoreRowModel,\r\n getFilteredRowModel,\r\n getPaginationRowModel,\r\n getSortedRowModel,\r\n useReactTable,\r\n} from '@tanstack/react-table';\r\n\r\n// TODO: refactor any type\r\nexport const useDataTable = (data: any, columns: any) => {\r\n const [sorting, setSorting] = React.useState<SortingState>([]);\r\n const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\r\n []\r\n );\r\n const [columnVisibility, setColumnVisibility] =\r\n React.useState<VisibilityState>({});\r\n\r\n const table = useReactTable({\r\n data,\r\n columns,\r\n onSortingChange: setSorting,\r\n onColumnFiltersChange: setColumnFilters,\r\n getCoreRowModel: getCoreRowModel(),\r\n getPaginationRowModel: getPaginationRowModel(),\r\n getSortedRowModel: getSortedRowModel(),\r\n getFilteredRowModel: getFilteredRowModel(),\r\n onColumnVisibilityChange: setColumnVisibility,\r\n enableRowSelection: true,\r\n manualPagination: true,\r\n manualSorting: true,\r\n manualFiltering: true,\r\n state: {\r\n sorting,\r\n columnFilters,\r\n columnVisibility,\r\n },\r\n });\r\n\r\n return { table };\r\n};\r\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
|
@@ -3,11 +3,10 @@ import * as a from "react";
|
|
|
3
3
|
import { format as c } from "date-fns";
|
|
4
4
|
import { Calendar as f } from "lucide-react";
|
|
5
5
|
import { cn as p } from "@oneplatformdev/utils";
|
|
6
|
+
import { uk as n } from "date-fns/locale";
|
|
6
7
|
import { Button as u } from "../Button/Button.js";
|
|
7
|
-
import "../Button/buttonVariants.js";
|
|
8
8
|
import { Calendar as h } from "../Calendar/Calendar.js";
|
|
9
9
|
import { Popover as g, PopoverTrigger as b, PopoverContent as y } from "../Popover/Popover.js";
|
|
10
|
-
import { uk as n } from "date-fns/locale";
|
|
11
10
|
const v = a.forwardRef(
|
|
12
11
|
(i, l) => {
|
|
13
12
|
const {
|
|
@@ -1 +1 @@
|
|
|
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 const [open, setOpen] = React.useState(false);\n return (\n <Popover open={open} onOpenChange={setOpen}>\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 'focus-visible:outline-hidden focus-visible:ring-0 focus-visible:border-[#9368FF]',\n open && 'outline-hidden ring-0 border-[#9368FF]'\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\n"],"names":["DatePicker","React","props","ref","selectedDate","onDateChange","disabled","open","setOpen","jsxs","Popover","jsx","PopoverTrigger","Button","cn","format","uk","CalendarIcon","PopoverContent","Calendar"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client';\r\n\r\nimport * as React from 'react';\r\nimport { format } from 'date-fns';\r\nimport { Calendar as CalendarIcon } from 'lucide-react';\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport { Button } from '../Button';\r\nimport { Calendar } from '../Calendar';\r\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover';\r\nimport { uk } from 'date-fns/locale';\r\nimport { DatePickerProps } from './DatePicker.types';\r\n\r\nexport const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(\r\n (props, ref) => {\r\n const {\r\n selectedDate,\r\n onDateChange,\r\n disabled = false\r\n } = props;\r\n const [open, setOpen] = React.useState(false);\r\n return (\r\n <Popover open={open} onOpenChange={setOpen}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n ref={ref}\r\n disabled={disabled}\r\n variant={'outline-solid'}\r\n className={cn(\r\n 'w-full justify-start text-left font-normal border h-10',\r\n !selectedDate && 'text-muted-foreground',\r\n 'focus-visible:outline-hidden focus-visible:ring-0 focus-visible:border-[#9368FF]',\r\n open && 'outline-hidden ring-0 border-[#9368FF]'\r\n )}\r\n >\r\n {selectedDate ? (\r\n format(selectedDate, 'LLL dd, y', { locale: uk })\r\n ) : (\r\n <span>dd/mm/yyyy</span>\r\n )}\r\n <CalendarIcon className=\"mr-2 h-4 w-4 ml-auto\" />\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent align=\"start\" className=\"w-auto p-0\">\r\n <Calendar\r\n mode=\"single\"\r\n captionLayout=\"dropdown-buttons\"\r\n selected={selectedDate}\r\n onSelect={onDateChange}\r\n fromYear={1960}\r\n toYear={2030}\r\n locale={uk}\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n }\r\n);\r\n\r\nDatePicker.displayName = 'DatePicker';\r\n\r\n"],"names":["DatePicker","React","props","ref","selectedDate","onDateChange","disabled","open","setOpen","jsxs","Popover","jsx","PopoverTrigger","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,GACE,CAACK,GAAMC,CAAO,IAAIP,EAAM,SAAS,EAAK;AAC5C,WACE,gBAAAQ,EAACC,GAAA,EAAQ,MAAAH,GAAY,cAAcC,GACjC,UAAA;AAAA,MAAA,gBAAAG,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,KAAAV;AAAA,UACA,UAAAG;AAAA,UACA,SAAS;AAAA,UACT,WAAWQ;AAAA,YACT;AAAA,YACA,CAACV,KAAgB;AAAA,YACjB;AAAA,YACAG,KAAQ;AAAA,UAAA;AAAA,UAGT,UAAA;AAAA,YAAAH,IACCW,EAAOX,GAAc,aAAa,EAAE,QAAQY,GAAI,IAEhD,gBAAAL,EAAC,QAAA,EAAK,UAAA,aAAA,CAAU;AAAA,YAElB,gBAAAA,EAACM,GAAA,EAAa,WAAU,uBAAA,CAAuB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEnD;AAAA,MACA,gBAAAN,EAACO,GAAA,EAAe,OAAM,SAAQ,WAAU,cACtC,UAAA,gBAAAP;AAAA,QAACQ;AAAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,eAAc;AAAA,UACd,UAAUf;AAAA,UACV,UAAUC;AAAA,UACV,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,QAAQW;AAAA,QAAA;AAAA,MAAA,EACV,CACF;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AAEAhB,EAAW,cAAc;"}
|
package/Dialog/Dialog.js
CHANGED
|
@@ -3,15 +3,14 @@ import * as p from "react";
|
|
|
3
3
|
import * as a from "@radix-ui/react-dialog";
|
|
4
4
|
import { XIcon as m } from "lucide-react";
|
|
5
5
|
import { cn as n } from "@oneplatformdev/utils";
|
|
6
|
-
import {
|
|
7
|
-
import "../ButtonIcon/
|
|
8
|
-
|
|
9
|
-
function P({
|
|
6
|
+
import { useDialogClosePosition as x } from "./useDialogClosePosition.js";
|
|
7
|
+
import { ButtonIcon as h } from "../ButtonIcon/ButtonIcon.js";
|
|
8
|
+
function z({
|
|
10
9
|
...t
|
|
11
10
|
}) {
|
|
12
11
|
return /* @__PURE__ */ e(a.Root, { "data-slot": "dialog", ...t });
|
|
13
12
|
}
|
|
14
|
-
function
|
|
13
|
+
function P({
|
|
15
14
|
...t
|
|
16
15
|
}) {
|
|
17
16
|
return /* @__PURE__ */ e(a.Trigger, { "data-slot": "dialog-trigger", ...t });
|
|
@@ -21,7 +20,7 @@ function v({
|
|
|
21
20
|
}) {
|
|
22
21
|
return /* @__PURE__ */ e(a.Portal, { "data-slot": "dialog-portal", ...t });
|
|
23
22
|
}
|
|
24
|
-
function
|
|
23
|
+
function k({
|
|
25
24
|
...t
|
|
26
25
|
}) {
|
|
27
26
|
return /* @__PURE__ */ e(a.Close, { "data-slot": "dialog-close", ...t });
|
|
@@ -42,7 +41,7 @@ function b({
|
|
|
42
41
|
}
|
|
43
42
|
);
|
|
44
43
|
}
|
|
45
|
-
function
|
|
44
|
+
function j(t) {
|
|
46
45
|
const {
|
|
47
46
|
className: o,
|
|
48
47
|
children: i,
|
|
@@ -50,7 +49,7 @@ function T(t) {
|
|
|
50
49
|
style: c,
|
|
51
50
|
slotProps: d,
|
|
52
51
|
...u
|
|
53
|
-
} = t, [f, g] = p.useState(null), l =
|
|
52
|
+
} = t, [f, g] = p.useState(null), l = x(f, {
|
|
54
53
|
enabled: s
|
|
55
54
|
});
|
|
56
55
|
return /* @__PURE__ */ e(v, { "data-slot": "dialog-portal", children: /* @__PURE__ */ e(b, { ...d?.overlay, children: /* @__PURE__ */ r(
|
|
@@ -96,7 +95,7 @@ function T(t) {
|
|
|
96
95
|
},
|
|
97
96
|
children: [
|
|
98
97
|
/* @__PURE__ */ e(
|
|
99
|
-
|
|
98
|
+
h,
|
|
100
99
|
{
|
|
101
100
|
variant: "ghost",
|
|
102
101
|
color: "secondary",
|
|
@@ -111,7 +110,7 @@ function T(t) {
|
|
|
111
110
|
}
|
|
112
111
|
) }) });
|
|
113
112
|
}
|
|
114
|
-
function
|
|
113
|
+
function T({ className: t, ...o }) {
|
|
115
114
|
return /* @__PURE__ */ e(
|
|
116
115
|
"div",
|
|
117
116
|
{
|
|
@@ -121,7 +120,7 @@ function E({ className: t, ...o }) {
|
|
|
121
120
|
}
|
|
122
121
|
);
|
|
123
122
|
}
|
|
124
|
-
function
|
|
123
|
+
function E({ className: t, ...o }) {
|
|
125
124
|
return /* @__PURE__ */ e(
|
|
126
125
|
"div",
|
|
127
126
|
{
|
|
@@ -134,7 +133,7 @@ function O({ className: t, ...o }) {
|
|
|
134
133
|
}
|
|
135
134
|
);
|
|
136
135
|
}
|
|
137
|
-
function
|
|
136
|
+
function O(t) {
|
|
138
137
|
const {
|
|
139
138
|
className: o,
|
|
140
139
|
children: i,
|
|
@@ -164,7 +163,7 @@ function S(t) {
|
|
|
164
163
|
}
|
|
165
164
|
);
|
|
166
165
|
}
|
|
167
|
-
function
|
|
166
|
+
function S({
|
|
168
167
|
className: t,
|
|
169
168
|
...o
|
|
170
169
|
}) {
|
|
@@ -182,16 +181,16 @@ function _({
|
|
|
182
181
|
);
|
|
183
182
|
}
|
|
184
183
|
export {
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
184
|
+
z as Dialog,
|
|
185
|
+
k as DialogClose,
|
|
186
|
+
j as DialogContent,
|
|
187
|
+
S as DialogDescription,
|
|
188
|
+
E as DialogFooter,
|
|
189
|
+
T as DialogHeader,
|
|
191
190
|
b as DialogOverlay,
|
|
192
191
|
v as DialogPortal,
|
|
193
192
|
a as DialogPrimitive,
|
|
194
|
-
|
|
195
|
-
|
|
193
|
+
O as DialogTitle,
|
|
194
|
+
P as DialogTrigger
|
|
196
195
|
};
|
|
197
196
|
//# 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\"\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\";\nimport { useDialogClosePosition } from \"./useDialogClosePosition\";\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 const [contentEl, setContentEl] = React.useState<HTMLDivElement | null>(null);\n\n const closePosition = useDialogClosePosition(contentEl, {\n enabled: showCloseButton,\n });\n\n\n return (\n <DialogPortal data-slot=\"dialog-portal\">\n <DialogOverlay {...slotProps?.overlay}>\n <DialogPrimitive.Content\n ref={setContentEl}\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 style={{\n top: closePosition.top,\n right: closePosition.right,\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","contentEl","setContentEl","React","closePosition","useDialogClosePosition","jsxs","ButtonIcon","XIcon","DialogHeader","DialogFooter","DialogTitle","DialogDescription"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Dialog.js","sources":["../../src/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\r\nimport { XIcon } from \"lucide-react\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\nimport { ButtonIcon } from \"../ButtonIcon\";\r\nimport { useDialogClosePosition } from \"./useDialogClosePosition\";\r\n\r\nfunction Dialog({\r\n ...props\r\n }: React.ComponentProps<typeof DialogPrimitive.Root>) {\r\n return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\r\n}\r\n\r\nfunction DialogTrigger({\r\n ...props\r\n }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\r\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\r\n}\r\n\r\nfunction DialogPortal({\r\n ...props\r\n }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\r\n return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\r\n}\r\n\r\nfunction DialogClose({\r\n ...props\r\n }: React.ComponentProps<typeof DialogPrimitive.Close>) {\r\n return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\r\n}\r\n\r\nfunction DialogOverlay({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\r\n return (\r\n <DialogPrimitive.Overlay\r\n data-slot=\"dialog-overlay\"\r\n className={cn(\r\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\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction DialogContent(props: React.ComponentProps<typeof DialogPrimitive.Content> & {\r\n showCloseButton?: boolean;\r\n slotProps?: {\r\n overlay?: React.ComponentProps<typeof DialogPrimitive.Overlay>;\r\n }\r\n}) {\r\n const {\r\n className,\r\n children,\r\n showCloseButton = true,\r\n style,\r\n slotProps,\r\n ...rest\r\n } = props;\r\n const [contentEl, setContentEl] = React.useState<HTMLDivElement | null>(null);\r\n\r\n const closePosition = useDialogClosePosition(contentEl, {\r\n enabled: showCloseButton,\r\n });\r\n\r\n\r\n return (\r\n <DialogPortal data-slot=\"dialog-portal\">\r\n <DialogOverlay {...slotProps?.overlay}>\r\n <DialogPrimitive.Content\r\n ref={setContentEl}\r\n data-slot=\"dialog-content\"\r\n data-closable={JSON.stringify(showCloseButton)}\r\n className={cn(\r\n 'group group/content',\r\n 'fixed top-[50%] left-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',\r\n 'flex flex-col w-full max-w-[calc(100%-2rem)] sm:max-w-2xl gap-3',\r\n 'max-h-[90%] overflow-auto overscroll-none',\r\n 'bg-background rounded-lg border shadow-lg duration-200 p-6',\r\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',\r\n \"focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 focus:ring-transparent\",\r\n 'outline-none focus:outline-none focus-visible:outline-none',\r\n className\r\n )}\r\n {...rest}\r\n style={{\r\n pointerEvents: 'auto',\r\n ...(style || {}),\r\n }}\r\n >\r\n {children}\r\n {showCloseButton && (\r\n <DialogPrimitive.Close\r\n data-slot=\"dialog-close\"\r\n className={cn(\r\n 'absolute top-6 right-6 rounded-2xl opacity-70 transition-opacity hover:opacity-100',\r\n 'data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',\r\n 'ring-offset-background focus:ring-transparent focus:ring-0 focus:ring-offset-0 focus:outline-hidden',\r\n 'focus:outline-none focus:ring-0',\r\n 'disabled:pointer-events-none [&_svg]:pointer-events-none',\r\n '[&_svg]:shrink-0 [&_svg:not([class*=\"size-\"])]:size-5',\r\n 'cursor-pointer size-10 flex items-center justify-center',\r\n )}\r\n style={{\r\n top: closePosition.top,\r\n right: closePosition.right,\r\n }}\r\n >\r\n <ButtonIcon\r\n variant='ghost'\r\n color='secondary'\r\n icon={XIcon}\r\n />\r\n <span className=\"sr-only\">Close</span>\r\n </DialogPrimitive.Close>\r\n )}\r\n </DialogPrimitive.Content>\r\n </DialogOverlay>\r\n </DialogPortal>\r\n )\r\n}\r\n\r\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\r\n return (\r\n <div\r\n data-slot=\"dialog-header\"\r\n className={cn(\"flex flex-col gap-4 justify-center text-center sm:text-left min-h-10\", className)}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\r\n return (\r\n <div\r\n data-slot=\"dialog-footer\"\r\n className={cn(\r\n \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end pt-4\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction DialogTitle(props: React.ComponentProps<typeof DialogPrimitive.Title>) {\r\n const {\r\n className,\r\n children,\r\n ...rest\r\n } = props;\r\n return (\r\n <DialogPrimitive.Title\r\n asChild\r\n data-slot=\"dialog-title\"\r\n className={cn(\r\n \"flex items-center min-h-10\",\r\n \"group-data-[closable='true']/content:pr-13\",\r\n className\r\n )}\r\n {...rest}\r\n >\r\n <span\r\n className={cn(\r\n \"text-lg leading-[1.2] font-bold text-[#06080D]\",\r\n 'whitespace-pre-wrap wrap-break-word line-clamp-10',\r\n )}\r\n >\r\n {children}\r\n </span>\r\n </DialogPrimitive.Title>\r\n )\r\n}\r\n\r\nfunction DialogDescription({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof DialogPrimitive.Description>) {\r\n return (\r\n <DialogPrimitive.Description\r\n data-slot=\"dialog-description\"\r\n className={cn(\r\n \"text-[#06080D] font-medium text-base\",\r\n 'whitespace-pre-wrap wrap-break-word line-clamp-10',\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nexport {\r\n Dialog,\r\n DialogClose,\r\n DialogContent,\r\n DialogDescription,\r\n DialogFooter,\r\n DialogHeader,\r\n DialogOverlay,\r\n DialogPortal,\r\n DialogTitle,\r\n DialogTrigger,\r\n DialogPrimitive\r\n}\r\n"],"names":["Dialog","props","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","className","jsx","cn","DialogContent","children","showCloseButton","style","slotProps","rest","contentEl","setContentEl","React","closePosition","useDialogClosePosition","jsxs","ButtonIcon","XIcon","DialogHeader","DialogFooter","DialogTitle","DialogDescription"],"mappings":";;;;;;;AAUA,SAASA,EAAO;AAAA,EACE,GAAGC;AACL,GAAsD;AACpE,2BAAQC,EAAgB,MAAhB,EAAqB,aAAU,UAAU,GAAGD,GAAO;AAC7D;AAEA,SAASE,EAAc;AAAA,EACE,GAAGF;AACL,GAAyD;AAC9E,2BAAQC,EAAgB,SAAhB,EAAwB,aAAU,kBAAkB,GAAGD,GAAO;AACxE;AAEA,SAASG,EAAa;AAAA,EACE,GAAGH;AACL,GAAwD;AAC5E,2BAAQC,EAAgB,QAAhB,EAAuB,aAAU,iBAAiB,GAAGD,GAAO;AACtE;AAEA,SAASI,EAAY;AAAA,EACE,GAAGJ;AACL,GAAuD;AAC1E,2BAAQC,EAAgB,OAAhB,EAAsB,aAAU,gBAAgB,GAAGD,GAAO;AACpE;AAEA,SAASK,EAAc;AAAA,EACE,WAAAC;AAAA,EACA,GAAGN;AACL,GAAyD;AAC9E,SACE,gBAAAO;AAAA,IAACN,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWO;AAAA,QACT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASS,EAAcT,GAKpB;AACD,QAAM;AAAA,IACJ,WAAAM;AAAA,IACA,UAAAI;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GACE,CAACe,GAAWC,CAAY,IAAIC,EAAM,SAAgC,IAAI,GAEtEC,IAAgBC,EAAuBJ,GAAW;AAAA,IACtD,SAASJ;AAAA,EAAA,CACV;AAGD,SACE,gBAAAJ,EAACJ,KAAa,aAAU,iBACtB,4BAACE,GAAA,EAAe,GAAGQ,GAAW,SAC5B,UAAA,gBAAAO;AAAA,IAACnB,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAKe;AAAA,MACL,aAAU;AAAA,MACV,iBAAe,KAAK,UAAUL,CAAe;AAAA,MAC7C,WAAWH;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGQ;AAAA,MACJ,OAAO;AAAA,QACL,eAAe;AAAA,QACf,GAAIF,KAAS,CAAA;AAAA,MAAC;AAAA,MAGf,UAAA;AAAA,QAAAF;AAAA,QACAC,KACC,gBAAAS;AAAA,UAACnB,EAAgB;AAAA,UAAhB;AAAA,YACC,aAAU;AAAA,YACV,WAAWO;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,OAAO;AAAA,cACL,KAAKU,EAAc;AAAA,cACnB,OAAOA,EAAc;AAAA,YAAA;AAAA,YAGvB,UAAA;AAAA,cAAA,gBAAAX;AAAA,gBAACc;AAAA,gBAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,MAAMC;AAAA,gBAAA;AAAA,cAAA;AAAA,cAER,gBAAAf,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,QAAA,CAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACjC;AAAA,IAAA;AAAA,EAAA,GAGN,EAAA,CACF;AAEJ;AAEA,SAASgB,EAAa,EAAE,WAAAjB,GAAW,GAAGN,KAAsC;AAC1E,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,wEAAwEF,CAAS;AAAA,MAC9F,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASwB,EAAa,EAAE,WAAAlB,GAAW,GAAGN,KAAsC;AAC1E,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASyB,EAAYzB,GAA2D;AAC9E,QAAM;AAAA,IACJ,WAAAM;AAAA,IACA,UAAAI;AAAA,IACA,GAAGI;AAAA,EAAA,IACDd;AACJ,SACE,gBAAAO;AAAA,IAACN,EAAgB;AAAA,IAAhB;AAAA,MACC,SAAO;AAAA,MACP,aAAU;AAAA,MACV,WAAWO;AAAA,QACT;AAAA,QACA;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGQ;AAAA,MAEJ,UAAA,gBAAAP;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC;AAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAGD,UAAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,SAASgB,EAAkB;AAAA,EACE,WAAApB;AAAA,EACA,GAAGN;AACL,GAA6D;AACtF,SACE,gBAAAO;AAAA,IAACN,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWO;AAAA,QACT;AAAA,QACA;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
package/Dialog/Dialog.stories.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
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 N, DialogFooter as T, DialogClose as F } from "./Dialog.js";
|
|
3
|
-
import { Button as l } from "../Button/Button.js";
|
|
4
|
-
import "../Button/buttonVariants.js";
|
|
5
3
|
import { useState as L, useCallback as S } from "react";
|
|
4
|
+
import { Button as l } from "../Button/Button.js";
|
|
6
5
|
function I(p) {
|
|
7
6
|
const {
|
|
8
7
|
open: i,
|
|
@@ -49,7 +48,7 @@ function I(p) {
|
|
|
49
48
|
)
|
|
50
49
|
] }) });
|
|
51
50
|
}
|
|
52
|
-
const
|
|
51
|
+
const U = {
|
|
53
52
|
title: "UI/Dialog",
|
|
54
53
|
component: I,
|
|
55
54
|
parameters: {
|
|
@@ -75,35 +74,35 @@ const W = {
|
|
|
75
74
|
bodyText: "Some content inside dialog…",
|
|
76
75
|
longBody: !1
|
|
77
76
|
}
|
|
78
|
-
},
|
|
77
|
+
}, W = {}, _ = {
|
|
79
78
|
args: {
|
|
80
79
|
description: ""
|
|
81
80
|
}
|
|
82
|
-
},
|
|
81
|
+
}, q = {
|
|
83
82
|
args: {
|
|
84
83
|
showCloseButton: !1
|
|
85
84
|
}
|
|
86
|
-
},
|
|
85
|
+
}, z = {
|
|
87
86
|
args: {
|
|
88
87
|
withFooter: !1
|
|
89
88
|
}
|
|
90
|
-
},
|
|
89
|
+
}, E = {
|
|
91
90
|
args: {
|
|
92
91
|
longBody: !0,
|
|
93
92
|
bodyText: "Long text line"
|
|
94
93
|
}
|
|
95
|
-
},
|
|
94
|
+
}, G = {
|
|
96
95
|
args: {
|
|
97
96
|
initialOpen: !0
|
|
98
97
|
}
|
|
99
98
|
};
|
|
100
99
|
export {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
100
|
+
W as Default,
|
|
101
|
+
G as InitiallyOpen,
|
|
102
|
+
E as LongContentScrollable,
|
|
103
|
+
q as NoCloseButton,
|
|
104
|
+
z as NoFooter,
|
|
105
|
+
_ as WithoutDescription,
|
|
106
|
+
U as default
|
|
108
107
|
};
|
|
109
108
|
//# 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\";\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\n showCloseButton={showCloseButton}\n className='p-12'\n >\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":"
|
|
1
|
+
{"version":3,"file":"Dialog.stories.js","sources":["../../src/Dialog/Dialog.stories.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport type { Meta, StoryObj } from \"@storybook/react\";\r\n\r\nimport {\r\n Dialog,\r\n DialogTrigger,\r\n DialogContent,\r\n DialogHeader,\r\n DialogTitle,\r\n DialogDescription,\r\n DialogFooter,\r\n DialogClose,\r\n} from \"./Dialog\";\r\nimport { Button } from \"../Button\";\r\nimport { useCallback, useState } from \"react\";\r\nimport { DialogControlsProps } from \"./Dialog.types\";\r\n\r\ntype DialogDemoProps = DialogControlsProps & {\r\n title: string;\r\n description?: string;\r\n showCloseButton?: boolean;\r\n withFooter?: boolean;\r\n initialOpen?: boolean;\r\n triggerLabel?: string;\r\n bodyText?: string;\r\n longBody?: boolean;\r\n};\r\n\r\n// TODO: create cmp like alert\r\nfunction DialogDemo(props: DialogDemoProps) {\r\n const {\r\n open: controlledOpen,\r\n onOpenChange,\r\n title,\r\n description,\r\n showCloseButton = true,\r\n withFooter = true,\r\n initialOpen = false,\r\n triggerLabel = \"Open dialog\",\r\n bodyText = \"Some content inside dialog…\",\r\n longBody = false,\r\n } = props;\r\n\r\n const [ internalOpen, setInternalOpen ] = useState(initialOpen);\r\n const isControlled = controlledOpen !== undefined;\r\n const open = isControlled ? controlledOpen : internalOpen;\r\n const setOpen = useCallback((next: boolean) => {\r\n if (!isControlled) setInternalOpen(next);\r\n onOpenChange?.(next);\r\n }, [ isControlled, onOpenChange ]);\r\n\r\n return (\r\n <div className=\"p-10\">\r\n <Dialog open={open} onOpenChange={setOpen}>\r\n <DialogTrigger asChild>\r\n <Button variant='outlined'>\r\n {triggerLabel}\r\n </Button>\r\n </DialogTrigger>\r\n\r\n <DialogContent\r\n showCloseButton={showCloseButton}\r\n className='p-12'\r\n >\r\n <DialogHeader>\r\n <DialogTitle>{title} 123</DialogTitle>\r\n {description ? <DialogDescription>{description}</DialogDescription> : null}\r\n </DialogHeader>\r\n\r\n <div className={longBody ? \"max-h-[50vh] overflow-auto pr-1\" : undefined}>\r\n {longBody ? (\r\n <div className=\"space-y-3 text-sm leading-6\">\r\n {Array.from({ length: 30 }).map((_, i) => (\r\n <p key={i}>\r\n #{i + 1}. {bodyText} Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n </p>\r\n ))}\r\n </div>\r\n ) : (\r\n <p className=\"text-sm leading-6\">{bodyText}</p>\r\n )}\r\n </div>\r\n\r\n {withFooter ? (\r\n <DialogFooter>\r\n <DialogClose asChild>\r\n <Button color='secondary'>\r\n Cancel\r\n </Button>\r\n </DialogClose>\r\n\r\n <Button onClick={() => setOpen(false)}>\r\n Save\r\n </Button>\r\n </DialogFooter>\r\n ) : null}\r\n </DialogContent>\r\n </Dialog>\r\n </div>\r\n );\r\n}\r\n\r\nconst meta: Meta<typeof DialogDemo> = {\r\n title: \"UI/Dialog\",\r\n component: DialogDemo,\r\n parameters: {\r\n layout: \"fullscreen\",\r\n },\r\n argTypes: {\r\n title: { control: \"text\" },\r\n description: { control: \"text\" },\r\n showCloseButton: { control: \"boolean\" },\r\n withFooter: { control: \"boolean\" },\r\n initialOpen: { control: \"boolean\" },\r\n triggerLabel: { control: \"text\" },\r\n bodyText: { control: \"text\" },\r\n longBody: { control: \"boolean\" },\r\n },\r\n args: {\r\n title: \"Dialog title\",\r\n description: \"Dialog description\",\r\n showCloseButton: true,\r\n withFooter: true,\r\n initialOpen: false,\r\n triggerLabel: \"Open dialog\",\r\n bodyText: \"Some content inside dialog…\",\r\n longBody: false,\r\n },\r\n};\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof DialogDemo>;\r\n\r\nexport const Default: Story = {};\r\n\r\nexport const WithoutDescription: Story = {\r\n args: {\r\n description: \"\",\r\n },\r\n};\r\n\r\nexport const NoCloseButton: Story = {\r\n args: {\r\n showCloseButton: false,\r\n },\r\n};\r\n\r\nexport const NoFooter: Story = {\r\n args: {\r\n withFooter: false,\r\n },\r\n};\r\n\r\nexport const LongContentScrollable: Story = {\r\n args: {\r\n longBody: true,\r\n bodyText: \"Long text line\",\r\n },\r\n};\r\n\r\nexport const InitiallyOpen: Story = {\r\n args: {\r\n initialOpen: true,\r\n },\r\n};\r\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":";;;;AA6BA,SAASA,EAAWC,GAAwB;AAC1C,QAAM;AAAA,IACJ,MAAMC;AAAA,IACN,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,YAAAC,IAAa;AAAA,IACb,aAAAC,IAAc;AAAA,IACd,cAAAC,IAAe;AAAA,IACf,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,EAAA,IACTV,GAEE,CAAEW,GAAcC,CAAgB,IAAIC,EAASN,CAAW,GACxDO,IAAeb,MAAmB,QAClCc,IAAOD,IAAeb,IAAiBU,GACvCK,IAAUC,EAAY,CAACC,MAAkB;AAC7C,IAAKJ,KAAcF,EAAgBM,CAAI,GACvChB,IAAegB,CAAI;AAAA,EACrB,GAAG,CAAEJ,GAAcZ,CAAa,CAAC;AAEjC,SACE,gBAAAiB,EAAC,SAAI,WAAU,QACb,4BAACC,GAAA,EAAO,MAAAL,GAAY,cAAcC,GAChC,UAAA;AAAA,IAAA,gBAAAG,EAACE,GAAA,EAAc,SAAO,IACpB,UAAA,gBAAAF,EAACG,KAAO,SAAQ,YACb,aACH,EAAA,CACF;AAAA,IAEA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,iBAAAnB;AAAA,QACA,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAkB,EAACE,GAAA,EACC,UAAA;AAAA,YAAA,gBAAAF,EAACG,GAAA,EAAa,UAAA;AAAA,cAAAvB;AAAA,cAAM;AAAA,YAAA,GAAI;AAAA,YACvBC,IAAc,gBAAAe,EAACQ,GAAA,EAAmB,UAAAvB,EAAA,CAAY,IAAuB;AAAA,UAAA,GACxE;AAAA,UAEA,gBAAAe,EAAC,SAAI,WAAWT,IAAW,oCAAoC,QAC5D,UAAAA,IACC,gBAAAS,EAAC,OAAA,EAAI,WAAU,+BACZ,gBAAM,KAAK,EAAE,QAAQ,GAAA,CAAI,EAAE,IAAI,CAACS,GAAGC,MAClC,gBAAAN,EAAC,KAAA,EAAU,UAAA;AAAA,YAAA;AAAA,YACPM,IAAI;AAAA,YAAE;AAAA,YAAGpB;AAAA,YAAS;AAAA,UAAA,EAAA,GADdoB,CAER,CACD,EAAA,CACH,sBAEC,KAAA,EAAE,WAAU,qBAAqB,UAAApB,EAAA,CAAS,EAAA,CAE/C;AAAA,UAECH,sBACEwB,GAAA,EACC,UAAA;AAAA,YAAA,gBAAAX,EAACY,GAAA,EAAY,SAAO,IAClB,UAAA,gBAAAZ,EAACG,KAAO,OAAM,aAAY,oBAE1B,EAAA,CACF;AAAA,8BAECA,GAAA,EAAO,SAAS,MAAMN,EAAQ,EAAK,GAAG,UAAA,OAAA,CAEvC;AAAA,UAAA,EAAA,CACF,IACE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,MAAMgB,IAAgC;AAAA,EACpC,OAAO;AAAA,EACP,WAAWjC;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,UAAU;AAAA,IACR,OAAO,EAAE,SAAS,OAAA;AAAA,IAClB,aAAa,EAAE,SAAS,OAAA;AAAA,IACxB,iBAAiB,EAAE,SAAS,UAAA;AAAA,IAC5B,YAAY,EAAE,SAAS,UAAA;AAAA,IACvB,aAAa,EAAE,SAAS,UAAA;AAAA,IACxB,cAAc,EAAE,SAAS,OAAA;AAAA,IACzB,UAAU,EAAE,SAAS,OAAA;AAAA,IACrB,UAAU,EAAE,SAAS,UAAA;AAAA,EAAU;AAAA,EAEjC,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,cAAc;AAAA,IACd,UAAU;AAAA,IACV,UAAU;AAAA,EAAA;AAEd,GAKakC,IAAiB,CAAA,GAEjBC,IAA4B;AAAA,EACvC,MAAM;AAAA,IACJ,aAAa;AAAA,EAAA;AAEjB,GAEaC,IAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,iBAAiB;AAAA,EAAA;AAErB,GAEaC,IAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,YAAY;AAAA,EAAA;AAEhB,GAEaC,IAA+B;AAAA,EAC1C,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,EAAA;AAEd,GAEaC,IAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,aAAa;AAAA,EAAA;AAEjB;"}
|
|
@@ -1 +1 @@
|
|
|
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;"}
|
|
1
|
+
{"version":3,"file":"DialogOverlayScope.js","sources":["../../src/Dialog/DialogOverlayScope.tsx"],"sourcesContent":["import { createContext, PropsWithChildren, useContext } from 'react';\r\n\r\nexport const DialogOverlayContainerContext = createContext<HTMLElement | null>(\r\n null\r\n);\r\nexport const useDialogOverlayContainer = () => useContext(DialogOverlayContainerContext);\r\n\r\ninterface IDialogOverlayScopeProps\r\n extends PropsWithChildren {\r\n value: HTMLElement | null;\r\n}\r\n\r\nexport const DialogOverlayScope = ({ value, children }: IDialogOverlayScopeProps) => {\r\n return (\r\n <DialogOverlayContainerContext.Provider value={value}>\r\n {children}\r\n </DialogOverlayContainerContext.Provider>\r\n );\r\n}\r\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;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDialogClosePosition.js","sources":["../../src/Dialog/useDialogClosePosition.ts"],"sourcesContent":["import * as React from 'react';\n\ntype UseDialogClosePositionOptions = {\n enabled?: boolean;\n titleSelector?: string;\n};\n\ntype DialogClosePosition = {\n top?: number;\n right?: number;\n};\n\nexport function useDialogClosePosition(\n contentEl: HTMLElement | null,\n options?: UseDialogClosePositionOptions,\n) {\n const {\n enabled = true,\n titleSelector = '[data-slot=\"dialog-title\"]',\n } = options ?? {};\n\n const [position, setPosition] = React.useState<DialogClosePosition>({});\n\n const setIfChanged = React.useCallback((next: DialogClosePosition) => {\n setPosition((prev) => {\n if (prev.top === next.top && prev.right === next.right) {\n return prev;\n }\n\n return next;\n });\n }, []);\n\n const measure = React.useCallback(() => {\n if (!enabled || !contentEl) {\n setIfChanged({});\n return;\n }\n\n const titleEl = contentEl.querySelector<HTMLElement>(titleSelector);\n\n if (!titleEl) {\n setIfChanged({});\n return;\n }\n\n const contentRect = contentEl.getBoundingClientRect();\n const titleRect = titleEl.getBoundingClientRect();\n\n if (\n contentRect.width <= 0 ||\n contentRect.height <= 0 ||\n titleRect.width <= 0 ||\n titleRect.height <= 0\n ) {\n setIfChanged({});\n return;\n }\n\n setIfChanged({\n top: Math.round(titleRect.top - contentRect.top),\n right: Math.round(contentRect.right - titleRect.right),\n });\n }, [contentEl, enabled, setIfChanged, titleSelector]);\n\n React.useEffect(() => {\n if (!enabled || !contentEl) {\n setIfChanged({});\n return;\n }\n\n let raf1 = 0;\n let raf2 = 0;\n\n raf1 = requestAnimationFrame(() => {\n raf2 = requestAnimationFrame(() => {\n measure();\n });\n });\n\n const resizeObserver = new ResizeObserver(() => {\n measure();\n });\n\n resizeObserver.observe(contentEl);\n window.addEventListener('resize', measure);\n\n return () => {\n cancelAnimationFrame(raf1);\n cancelAnimationFrame(raf2);\n resizeObserver.disconnect();\n window.removeEventListener('resize', measure);\n };\n }, [contentEl, enabled, measure, setIfChanged]);\n\n return position;\n}\n"],"names":["useDialogClosePosition","contentEl","options","enabled","titleSelector","position","setPosition","React","setIfChanged","next","prev","measure","titleEl","contentRect","titleRect","raf1","raf2","resizeObserver"],"mappings":";AAYO,SAASA,EACdC,GACAC,GACA;AACA,QAAM;AAAA,IACJ,SAAAC,IAAU;AAAA,IACV,eAAAC,IAAgB;AAAA,EAAA,IACdF,KAAW,CAAA,GAET,CAACG,GAAUC,CAAW,IAAIC,EAAM,SAA8B,CAAA,CAAE,GAEhEC,IAAeD,EAAM,YAAY,CAACE,MAA8B;AACpE,IAAAH,EAAY,CAACI,MACPA,EAAK,QAAQD,EAAK,OAAOC,EAAK,UAAUD,EAAK,QACxCC,IAGFD,CACR;AAAA,EACH,GAAG,CAAA,CAAE,GAECE,IAAUJ,EAAM,YAAY,MAAM;AACtC,QAAI,CAACJ,KAAW,CAACF,GAAW;AAC1B,MAAAO,EAAa,CAAA,CAAE;AACf;AAAA,IACF;AAEA,UAAMI,IAAUX,EAAU,cAA2BG,CAAa;AAElE,QAAI,CAACQ,GAAS;AACZ,MAAAJ,EAAa,CAAA,CAAE;AACf;AAAA,IACF;AAEA,UAAMK,IAAcZ,EAAU,sBAAA,GACxBa,IAAYF,EAAQ,sBAAA;AAE1B,QACEC,EAAY,SAAS,KACrBA,EAAY,UAAU,KACtBC,EAAU,SAAS,KACnBA,EAAU,UAAU,GACpB;AACA,MAAAN,EAAa,CAAA,CAAE;AACf;AAAA,IACF;AAEA,IAAAA,EAAa;AAAA,MACX,KAAK,KAAK,MAAMM,EAAU,MAAMD,EAAY,GAAG;AAAA,MAC/C,OAAO,KAAK,MAAMA,EAAY,QAAQC,EAAU,KAAK;AAAA,IAAA,CACtD;AAAA,EACH,GAAG,CAACb,GAAWE,GAASK,GAAcJ,CAAa,CAAC;AAEpD,SAAAG,EAAM,UAAU,MAAM;AACpB,QAAI,CAACJ,KAAW,CAACF,GAAW;AAC1B,MAAAO,EAAa,CAAA,CAAE;AACf;AAAA,IACF;AAEA,QAAIO,IAAO,GACPC,IAAO;AAEX,IAAAD,IAAO,sBAAsB,MAAM;AACjC,MAAAC,IAAO,sBAAsB,MAAM;AACjC,QAAAL,EAAA;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,UAAMM,IAAiB,IAAI,eAAe,MAAM;AAC9C,MAAAN,EAAA;AAAA,IACF,CAAC;AAED,WAAAM,EAAe,QAAQhB,CAAS,GAChC,OAAO,iBAAiB,UAAUU,CAAO,GAElC,MAAM;AACX,2BAAqBI,CAAI,GACzB,qBAAqBC,CAAI,GACzBC,EAAe,WAAA,GACf,OAAO,oBAAoB,UAAUN,CAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAACV,GAAWE,GAASQ,GAASH,CAAY,CAAC,GAEvCH;AACT;"}
|
|
1
|
+
{"version":3,"file":"useDialogClosePosition.js","sources":["../../src/Dialog/useDialogClosePosition.ts"],"sourcesContent":["import * as React from 'react';\r\n\r\ntype UseDialogClosePositionOptions = {\r\n enabled?: boolean;\r\n titleSelector?: string;\r\n};\r\n\r\ntype DialogClosePosition = {\r\n top?: number;\r\n right?: number;\r\n};\r\n\r\nexport function useDialogClosePosition(\r\n contentEl: HTMLElement | null,\r\n options?: UseDialogClosePositionOptions,\r\n) {\r\n const {\r\n enabled = true,\r\n titleSelector = '[data-slot=\"dialog-title\"]',\r\n } = options ?? {};\r\n\r\n const [position, setPosition] = React.useState<DialogClosePosition>({});\r\n\r\n const setIfChanged = React.useCallback((next: DialogClosePosition) => {\r\n setPosition((prev) => {\r\n if (prev.top === next.top && prev.right === next.right) {\r\n return prev;\r\n }\r\n\r\n return next;\r\n });\r\n }, []);\r\n\r\n const measure = React.useCallback(() => {\r\n if (!enabled || !contentEl) {\r\n setIfChanged({});\r\n return;\r\n }\r\n\r\n const titleEl = contentEl.querySelector<HTMLElement>(titleSelector);\r\n\r\n if (!titleEl) {\r\n setIfChanged({});\r\n return;\r\n }\r\n\r\n const contentRect = contentEl.getBoundingClientRect();\r\n const titleRect = titleEl.getBoundingClientRect();\r\n\r\n if (\r\n contentRect.width <= 0 ||\r\n contentRect.height <= 0 ||\r\n titleRect.width <= 0 ||\r\n titleRect.height <= 0\r\n ) {\r\n setIfChanged({});\r\n return;\r\n }\r\n\r\n setIfChanged({\r\n top: Math.round(titleRect.top - contentRect.top),\r\n right: Math.round(contentRect.right - titleRect.right),\r\n });\r\n }, [contentEl, enabled, setIfChanged, titleSelector]);\r\n\r\n React.useEffect(() => {\r\n if (!enabled || !contentEl) {\r\n setIfChanged({});\r\n return;\r\n }\r\n\r\n let raf1 = 0;\r\n let raf2 = 0;\r\n\r\n raf1 = requestAnimationFrame(() => {\r\n raf2 = requestAnimationFrame(() => {\r\n measure();\r\n });\r\n });\r\n\r\n const resizeObserver = new ResizeObserver(() => {\r\n measure();\r\n });\r\n\r\n resizeObserver.observe(contentEl);\r\n window.addEventListener('resize', measure);\r\n\r\n return () => {\r\n cancelAnimationFrame(raf1);\r\n cancelAnimationFrame(raf2);\r\n resizeObserver.disconnect();\r\n window.removeEventListener('resize', measure);\r\n };\r\n }, [contentEl, enabled, measure, setIfChanged]);\r\n\r\n return position;\r\n}\r\n"],"names":["useDialogClosePosition","contentEl","options","enabled","titleSelector","position","setPosition","React","setIfChanged","next","prev","measure","titleEl","contentRect","titleRect","raf1","raf2","resizeObserver"],"mappings":";AAYO,SAASA,EACdC,GACAC,GACA;AACA,QAAM;AAAA,IACJ,SAAAC,IAAU;AAAA,IACV,eAAAC,IAAgB;AAAA,EAAA,IACdF,KAAW,CAAA,GAET,CAACG,GAAUC,CAAW,IAAIC,EAAM,SAA8B,CAAA,CAAE,GAEhEC,IAAeD,EAAM,YAAY,CAACE,MAA8B;AACpE,IAAAH,EAAY,CAACI,MACPA,EAAK,QAAQD,EAAK,OAAOC,EAAK,UAAUD,EAAK,QACxCC,IAGFD,CACR;AAAA,EACH,GAAG,CAAA,CAAE,GAECE,IAAUJ,EAAM,YAAY,MAAM;AACtC,QAAI,CAACJ,KAAW,CAACF,GAAW;AAC1B,MAAAO,EAAa,CAAA,CAAE;AACf;AAAA,IACF;AAEA,UAAMI,IAAUX,EAAU,cAA2BG,CAAa;AAElE,QAAI,CAACQ,GAAS;AACZ,MAAAJ,EAAa,CAAA,CAAE;AACf;AAAA,IACF;AAEA,UAAMK,IAAcZ,EAAU,sBAAA,GACxBa,IAAYF,EAAQ,sBAAA;AAE1B,QACEC,EAAY,SAAS,KACrBA,EAAY,UAAU,KACtBC,EAAU,SAAS,KACnBA,EAAU,UAAU,GACpB;AACA,MAAAN,EAAa,CAAA,CAAE;AACf;AAAA,IACF;AAEA,IAAAA,EAAa;AAAA,MACX,KAAK,KAAK,MAAMM,EAAU,MAAMD,EAAY,GAAG;AAAA,MAC/C,OAAO,KAAK,MAAMA,EAAY,QAAQC,EAAU,KAAK;AAAA,IAAA,CACtD;AAAA,EACH,GAAG,CAACb,GAAWE,GAASK,GAAcJ,CAAa,CAAC;AAEpD,SAAAG,EAAM,UAAU,MAAM;AACpB,QAAI,CAACJ,KAAW,CAACF,GAAW;AAC1B,MAAAO,EAAa,CAAA,CAAE;AACf;AAAA,IACF;AAEA,QAAIO,IAAO,GACPC,IAAO;AAEX,IAAAD,IAAO,sBAAsB,MAAM;AACjC,MAAAC,IAAO,sBAAsB,MAAM;AACjC,QAAAL,EAAA;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,UAAMM,IAAiB,IAAI,eAAe,MAAM;AAC9C,MAAAN,EAAA;AAAA,IACF,CAAC;AAED,WAAAM,EAAe,QAAQhB,CAAS,GAChC,OAAO,iBAAiB,UAAUU,CAAO,GAElC,MAAM;AACX,2BAAqBI,CAAI,GACzB,qBAAqBC,CAAI,GACzBC,EAAe,WAAA,GACf,OAAO,oBAAoB,UAAUN,CAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAACV,GAAWE,GAASQ,GAASH,CAAY,CAAC,GAEvCH;AACT;"}
|
package/Drawer/Drawer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@oneplatformdev/utils\";\n\nconst Drawer = ({\n shouldScaleBackground = true,\n ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (\n <DrawerPrimitive.Root\n shouldScaleBackground={shouldScaleBackground}\n {...props}\n />\n)\nDrawer.displayName = \"Drawer\"\n\nconst DrawerTrigger = DrawerPrimitive.Trigger\n\nconst DrawerPortal = DrawerPrimitive.Portal\n\nconst DrawerClose = DrawerPrimitive.Close\n\nconst DrawerOverlay = React.forwardRef<\n React.ElementRef<typeof DrawerPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DrawerPrimitive.Overlay\n ref={ref}\n className={cn(\"fixed inset-0 z-50 bg-black/80\", className)}\n {...props}\n />\n))\nDrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName\n\nconst DrawerContent = React.forwardRef<\n React.ElementRef<typeof DrawerPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n <DrawerPortal>\n <DrawerOverlay />\n <DrawerPrimitive.Content\n ref={ref}\n className={cn(\n \"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background\",\n className\n )}\n {...props}\n >\n <div className=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n {children}\n </DrawerPrimitive.Content>\n </DrawerPortal>\n))\nDrawerContent.displayName = \"DrawerContent\"\n\nconst DrawerHeader = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n {...props}\n />\n)\nDrawerHeader.displayName = \"DrawerHeader\"\n\nconst DrawerFooter = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n {...props}\n />\n)\nDrawerFooter.displayName = \"DrawerFooter\"\n\nconst DrawerTitle = React.forwardRef<\n React.ElementRef<typeof DrawerPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DrawerPrimitive.Title\n ref={ref}\n className={cn(\n \"text-lg font-semibold leading-none tracking-tight\",\n className\n )}\n {...props}\n />\n))\nDrawerTitle.displayName = DrawerPrimitive.Title.displayName\n\nconst DrawerDescription = React.forwardRef<\n React.ElementRef<typeof DrawerPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DrawerPrimitive.Description\n ref={ref}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n))\nDrawerDescription.displayName = DrawerPrimitive.Description.displayName\n\nexport {\n Drawer,\n DrawerPortal,\n DrawerOverlay,\n DrawerTrigger,\n DrawerClose,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerTitle,\n DrawerDescription,\n}\n"],"names":["Drawer","shouldScaleBackground","props","jsx","DrawerPrimitive","DrawerTrigger","DrawerPortal","DrawerClose","DrawerOverlay","React","className","ref","cn","DrawerContent","children","jsxs","DrawerHeader","DrawerFooter","DrawerTitle","DrawerDescription"],"mappings":";;;;AAOA,MAAMA,IAAS,CAAC;AAAA,EACd,uBAAAC,IAAwB;AAAA,EACxB,GAAGC;AACL,MACE,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,uBAAAH;AAAA,IACC,GAAGC;AAAA,EAAA;AACN;AAEFF,EAAO,cAAc;AAErB,MAAMK,IAAgBD,EAAgB,SAEhCE,IAAeF,EAAgB,QAE/BG,IAAcH,EAAgB,OAE9BI,IAAgBC,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGR,EAAA,GAASS,MAC1B,gBAAAR;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAO;AAAA,IACA,WAAWC,EAAG,kCAAkCF,CAAS;AAAA,IACxD,GAAGR;AAAA,EAAA;AACN,CACD;AACDM,EAAc,cAAcJ,EAAgB,QAAQ;AAEpD,MAAMS,IAAgBJ,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,UAAAI,GAAU,GAAGZ,EAAA,GAASS,MACpC,gBAAAI,EAACT,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAH,EAACK,GAAA,EAAc;AAAA,EACf,gBAAAO;AAAA,IAACX,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAO;AAAA,MACA,WAAWC;AAAA,QACT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGR;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,mDAAA,CAAmD;AAAA,QACjEW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AACH,GACF,CACD;AACDD,EAAc,cAAc;AAE5B,MAAMG,IAAe,CAAC;AAAA,EACpB,WAAAN;AAAA,EACA,GAAGR;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWS,EAAG,6CAA6CF,CAAS;AAAA,IACnE,GAAGR;AAAA,EAAA;AACN;AAEFc,EAAa,cAAc;AAE3B,MAAMC,IAAe,CAAC;AAAA,EACpB,WAAAP;AAAA,EACA,GAAGR;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWS,EAAG,mCAAmCF,CAAS;AAAA,IACzD,GAAGR;AAAA,EAAA;AACN;AAEFe,EAAa,cAAc;AAE3B,MAAMC,IAAcT,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGR,EAAA,GAASS,MAC1B,gBAAAR;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAO;AAAA,IACA,WAAWC;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGR;AAAA,EAAA;AACN,CACD;AACDgB,EAAY,cAAcd,EAAgB,MAAM;AAEhD,MAAMe,IAAoBV,EAAM,WAG9B,CAAC,EAAE,WAAAC,GAAW,GAAGR,EAAA,GAASS,MAC1B,gBAAAR;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAO;AAAA,IACA,WAAWC,EAAG,iCAAiCF,CAAS;AAAA,IACvD,GAAGR;AAAA,EAAA;AACN,CACD;AACDiB,EAAkB,cAAcf,EAAgB,YAAY;"}
|
|
1
|
+
{"version":3,"file":"Drawer.js","sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Drawer as DrawerPrimitive } from \"vaul\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\";\r\n\r\nconst Drawer = ({\r\n shouldScaleBackground = true,\r\n ...props\r\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (\r\n <DrawerPrimitive.Root\r\n shouldScaleBackground={shouldScaleBackground}\r\n {...props}\r\n />\r\n)\r\nDrawer.displayName = \"Drawer\"\r\n\r\nconst DrawerTrigger = DrawerPrimitive.Trigger\r\n\r\nconst DrawerPortal = DrawerPrimitive.Portal\r\n\r\nconst DrawerClose = DrawerPrimitive.Close\r\n\r\nconst DrawerOverlay = React.forwardRef<\r\n React.ElementRef<typeof DrawerPrimitive.Overlay>,\r\n React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\r\n>(({ className, ...props }, ref) => (\r\n <DrawerPrimitive.Overlay\r\n ref={ref}\r\n className={cn(\"fixed inset-0 z-50 bg-black/80\", className)}\r\n {...props}\r\n />\r\n))\r\nDrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName\r\n\r\nconst DrawerContent = React.forwardRef<\r\n React.ElementRef<typeof DrawerPrimitive.Content>,\r\n React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>\r\n>(({ className, children, ...props }, ref) => (\r\n <DrawerPortal>\r\n <DrawerOverlay />\r\n <DrawerPrimitive.Content\r\n ref={ref}\r\n className={cn(\r\n \"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <div className=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\r\n {children}\r\n </DrawerPrimitive.Content>\r\n </DrawerPortal>\r\n))\r\nDrawerContent.displayName = \"DrawerContent\"\r\n\r\nconst DrawerHeader = ({\r\n className,\r\n ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) => (\r\n <div\r\n className={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\r\n {...props}\r\n />\r\n)\r\nDrawerHeader.displayName = \"DrawerHeader\"\r\n\r\nconst DrawerFooter = ({\r\n className,\r\n ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) => (\r\n <div\r\n className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\r\n {...props}\r\n />\r\n)\r\nDrawerFooter.displayName = \"DrawerFooter\"\r\n\r\nconst DrawerTitle = React.forwardRef<\r\n React.ElementRef<typeof DrawerPrimitive.Title>,\r\n React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\r\n>(({ className, ...props }, ref) => (\r\n <DrawerPrimitive.Title\r\n ref={ref}\r\n className={cn(\r\n \"text-lg font-semibold leading-none tracking-tight\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nDrawerTitle.displayName = DrawerPrimitive.Title.displayName\r\n\r\nconst DrawerDescription = React.forwardRef<\r\n React.ElementRef<typeof DrawerPrimitive.Description>,\r\n React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\r\n>(({ className, ...props }, ref) => (\r\n <DrawerPrimitive.Description\r\n ref={ref}\r\n className={cn(\"text-sm text-muted-foreground\", className)}\r\n {...props}\r\n />\r\n))\r\nDrawerDescription.displayName = DrawerPrimitive.Description.displayName\r\n\r\nexport {\r\n Drawer,\r\n DrawerPortal,\r\n DrawerOverlay,\r\n DrawerTrigger,\r\n DrawerClose,\r\n DrawerContent,\r\n DrawerHeader,\r\n DrawerFooter,\r\n DrawerTitle,\r\n DrawerDescription,\r\n}\r\n"],"names":["Drawer","shouldScaleBackground","props","jsx","DrawerPrimitive","DrawerTrigger","DrawerPortal","DrawerClose","DrawerOverlay","React","className","ref","cn","DrawerContent","children","jsxs","DrawerHeader","DrawerFooter","DrawerTitle","DrawerDescription"],"mappings":";;;;AAOA,MAAMA,IAAS,CAAC;AAAA,EACd,uBAAAC,IAAwB;AAAA,EACxB,GAAGC;AACL,MACE,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,uBAAAH;AAAA,IACC,GAAGC;AAAA,EAAA;AACN;AAEFF,EAAO,cAAc;AAErB,MAAMK,IAAgBD,EAAgB,SAEhCE,IAAeF,EAAgB,QAE/BG,IAAcH,EAAgB,OAE9BI,IAAgBC,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGR,EAAA,GAASS,MAC1B,gBAAAR;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAO;AAAA,IACA,WAAWC,EAAG,kCAAkCF,CAAS;AAAA,IACxD,GAAGR;AAAA,EAAA;AACN,CACD;AACDM,EAAc,cAAcJ,EAAgB,QAAQ;AAEpD,MAAMS,IAAgBJ,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,UAAAI,GAAU,GAAGZ,EAAA,GAASS,MACpC,gBAAAI,EAACT,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAH,EAACK,GAAA,EAAc;AAAA,EACf,gBAAAO;AAAA,IAACX,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAO;AAAA,MACA,WAAWC;AAAA,QACT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGR;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,mDAAA,CAAmD;AAAA,QACjEW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AACH,GACF,CACD;AACDD,EAAc,cAAc;AAE5B,MAAMG,IAAe,CAAC;AAAA,EACpB,WAAAN;AAAA,EACA,GAAGR;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWS,EAAG,6CAA6CF,CAAS;AAAA,IACnE,GAAGR;AAAA,EAAA;AACN;AAEFc,EAAa,cAAc;AAE3B,MAAMC,IAAe,CAAC;AAAA,EACpB,WAAAP;AAAA,EACA,GAAGR;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWS,EAAG,mCAAmCF,CAAS;AAAA,IACzD,GAAGR;AAAA,EAAA;AACN;AAEFe,EAAa,cAAc;AAE3B,MAAMC,IAAcT,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGR,EAAA,GAASS,MAC1B,gBAAAR;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAO;AAAA,IACA,WAAWC;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGR;AAAA,EAAA;AACN,CACD;AACDgB,EAAY,cAAcd,EAAgB,MAAM;AAEhD,MAAMe,IAAoBV,EAAM,WAG9B,CAAC,EAAE,WAAAC,GAAW,GAAGR,EAAA,GAASS,MAC1B,gBAAAR;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAO;AAAA,IACA,WAAWC,EAAG,iCAAiCF,CAAS;AAAA,IACvD,GAAGR;AAAA,EAAA;AACN,CACD;AACDiB,EAAkB,cAAcf,EAAgB,YAAY;"}
|