@oneplatformdev/ui 0.1.99-beta.304 → 0.1.99-beta.306
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.d.ts.map +1 -1
- package/Dropzone/Dropzone.js +121 -122
- 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 +1 -1
- package/vite-env.d.ts +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropzoneUtils.js","sources":["../../src/Dropzone/DropzoneUtils.tsx"],"sourcesContent":["import { DropzoneValueItem } from './Dropzone.types';\n\nexport function isFile(item: DropzoneValueItem): item is File {\n return item instanceof File;\n}\n\nconst VIDEO_EXTENSIONS = ['.mp4', '.mov', '.avi', '.webm', '.mkv', '.m4v'];\n\nexport function isVideoUrl(item: DropzoneValueItem): boolean {\n if (typeof item !== 'string') return false;\n try {\n const path = new URL(item).pathname.toLowerCase();\n return VIDEO_EXTENSIONS.some((ext) => path.endsWith(ext));\n } catch {\n return false;\n }\n}\n\nexport function extractName(url: string) {\n try {\n const parts = url.split('?')[0].split('#')[0].split('/');\n return parts[parts.length - 1] || url;\n } catch {\n return url;\n }\n}\n\nexport const DefaultFileIcon = () => {\n return (\n <svg width=\"55\" height=\"55\" viewBox=\"0 0 55 55\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <mask id=\"mask0_2430_114601\" maskUnits=\"userSpaceOnUse\" x=\"7\" y=\"4\" width=\"39\" height=\"46\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.25 4.68359H45.6174V49.354H7.25V4.68359Z\" fill=\"white\"/>\n </mask>\n <g mask=\"url(#mask0_2430_114601)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17.5386 8.05859C13.8103 8.05859 10.7143 11.0781 10.6266 14.8018V38.9196C10.5456 42.7468 13.5606 45.8968 17.3518 45.9801H35.5386C39.2938 45.8451 42.2661 42.7468 42.2413 38.9308V18.9216L31.8148 8.05859H17.5656H17.5386ZM17.5664 49.3551H17.2829C11.6309 49.2336 7.1309 44.5356 7.2524 38.8836V14.7613C7.38515 9.17909 11.9932 4.68359 17.5327 4.68359H17.5732H32.5334C32.9924 4.68359 33.4312 4.87034 33.7507 5.20109L45.1492 17.0743C45.4484 17.3871 45.6172 17.8078 45.6172 18.2421V38.9196C45.6532 44.5648 41.2522 49.1526 35.5979 49.3551H17.5664Z\" fill=\"#0D0E2B\" fill-opacity=\"0.7\"/>\n </g>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M43.9198 20.3703H37.7233C33.6036 20.359 30.2578 17.002 30.2578 12.889V6.34375C30.2578 5.41225 31.0138 4.65625 31.9453 4.65625C32.8768 4.65625 33.6328 5.41225 33.6328 6.34375V12.889C33.6328 15.148 35.4688 16.9885 37.7278 16.9953H43.9198C44.8513 16.9953 45.6073 17.7513 45.6073 18.6828C45.6073 19.6143 44.8513 20.3703 43.9198 20.3703Z\" fill=\"#0D0E2B\" fill-opacity=\"0.7\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M25.5708 37.729C24.6393 37.729 23.8833 36.973 23.8833 36.0415V22.4492C23.8833 21.5177 24.6393 20.7617 25.5708 20.7617C26.5023 20.7617 27.2583 21.5177 27.2583 22.4492V36.0415C27.2583 36.973 26.5023 37.729 25.5708 37.729Z\" fill=\"#0D0E2B\" fill-opacity=\"0.7\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M25.5678 37.7279C25.1201 37.7279 24.6881 37.5501 24.3731 37.2306L19.0968 31.9341C18.4398 31.2726 18.4421 30.2039 19.1013 29.5469C19.7628 28.8899 20.8316 28.8899 21.4886 29.5514L25.5678 33.6509L29.6471 29.5514C30.3041 28.8899 31.3728 28.8899 32.0343 29.5469C32.6936 30.2039 32.6958 31.2726 32.0388 31.9341L26.7626 37.2306C26.4476 37.5501 26.0156 37.7279 25.5678 37.7279Z\" fill=\"#0D0E2B\" fill-opacity=\"0.7\"/>\n </svg>\n \n );\n};\n"],"names":["isFile","item","VIDEO_EXTENSIONS","isVideoUrl","path","ext","extractName","url","parts","DefaultFileIcon","jsxs","jsx"],"mappings":";AAEO,SAASA,EAAOC,GAAuC;AAC5D,SAAOA,aAAgB;AACzB;AAEA,MAAMC,IAAmB,CAAC,QAAQ,QAAQ,QAAQ,SAAS,QAAQ,MAAM;AAElE,SAASC,EAAWF,GAAkC;AAC3D,MAAI,OAAOA,KAAS,SAAU,QAAO;AACrC,MAAI;AACF,UAAMG,IAAO,IAAI,IAAIH,CAAI,EAAE,SAAS,YAAA;AACpC,WAAOC,EAAiB,KAAK,CAACG,MAAQD,EAAK,SAASC,CAAG,CAAC;AAAA,EAC1D,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEO,SAASC,EAAYC,GAAa;AACvC,MAAI;AACF,UAAMC,IAAQD,EAAI,MAAM,GAAG,EAAE,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC,EAAE,MAAM,GAAG;AACvD,WAAOC,EAAMA,EAAM,SAAS,CAAC,KAAKD;AAAA,EACpC,QAAQ;AACN,WAAOA;AAAA,EACT;AACF;AAEO,MAAME,IAAkB,MAE3B,gBAAAC,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,OAAM,8BAClE,UAAA;AAAA,EAAA,gBAAAC,EAAC,QAAA,EAAK,IAAG,qBAAoB,WAAU,kBAAiB,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MACtF,UAAA,gBAAAA,EAAC,QAAA,EAAK,aAAU,WAAU,aAAU,WAAU,GAAE,8CAA6C,MAAK,QAAA,CAAO,EAAA,CACzG;AAAA,oBACC,KAAA,EAAE,MAAK,2BACR,UAAA,gBAAAA,EAAC,UAAK,aAAU,WAAU,aAAU,WAAU,GAAE,4hBAA2hB,MAAK,WAAU,gBAAa,OAAK,GAC5mB;AAAA,EACA,gBAAAA,EAAC,QAAA,EAAK,aAAU,WAAU,aAAU,WAAU,GAAE,gVAA+U,MAAK,WAAU,gBAAa,MAAA,CAAK;AAAA,EACha,gBAAAA,EAAC,QAAA,EAAK,aAAU,WAAU,aAAU,WAAU,GAAE,+NAA8N,MAAK,WAAU,gBAAa,MAAA,CAAK;AAAA,EAC/S,gBAAAA,EAAC,QAAA,EAAK,aAAU,WAAU,aAAU,WAAU,GAAE,qXAAoX,MAAK,WAAU,gBAAa,MAAA,CAAK;AAAA,GACrc;"}
|
|
1
|
+
{"version":3,"file":"DropzoneUtils.js","sources":["../../src/Dropzone/DropzoneUtils.tsx"],"sourcesContent":["import { DropzoneValueItem } from './Dropzone.types';\r\n\r\nexport function isFile(item: DropzoneValueItem): item is File {\r\n return item instanceof File;\r\n}\r\n\r\nconst VIDEO_EXTENSIONS = ['.mp4', '.mov', '.avi', '.webm', '.mkv', '.m4v'];\r\n\r\nexport function isVideoUrl(item: DropzoneValueItem): boolean {\r\n if (typeof item !== 'string') return false;\r\n try {\r\n const path = new URL(item).pathname.toLowerCase();\r\n return VIDEO_EXTENSIONS.some((ext) => path.endsWith(ext));\r\n } catch {\r\n return false;\r\n }\r\n}\r\n\r\nexport function extractName(url: string) {\r\n try {\r\n const parts = url.split('?')[0].split('#')[0].split('/');\r\n return parts[parts.length - 1] || url;\r\n } catch {\r\n return url;\r\n }\r\n}\r\n\r\nexport const DefaultFileIcon = () => {\r\n return (\r\n <svg width=\"55\" height=\"55\" viewBox=\"0 0 55 55\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <mask id=\"mask0_2430_114601\" maskUnits=\"userSpaceOnUse\" x=\"7\" y=\"4\" width=\"39\" height=\"46\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.25 4.68359H45.6174V49.354H7.25V4.68359Z\" fill=\"white\"/>\r\n </mask>\r\n <g mask=\"url(#mask0_2430_114601)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17.5386 8.05859C13.8103 8.05859 10.7143 11.0781 10.6266 14.8018V38.9196C10.5456 42.7468 13.5606 45.8968 17.3518 45.9801H35.5386C39.2938 45.8451 42.2661 42.7468 42.2413 38.9308V18.9216L31.8148 8.05859H17.5656H17.5386ZM17.5664 49.3551H17.2829C11.6309 49.2336 7.1309 44.5356 7.2524 38.8836V14.7613C7.38515 9.17909 11.9932 4.68359 17.5327 4.68359H17.5732H32.5334C32.9924 4.68359 33.4312 4.87034 33.7507 5.20109L45.1492 17.0743C45.4484 17.3871 45.6172 17.8078 45.6172 18.2421V38.9196C45.6532 44.5648 41.2522 49.1526 35.5979 49.3551H17.5664Z\" fill=\"#0D0E2B\" fill-opacity=\"0.7\"/>\r\n </g>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M43.9198 20.3703H37.7233C33.6036 20.359 30.2578 17.002 30.2578 12.889V6.34375C30.2578 5.41225 31.0138 4.65625 31.9453 4.65625C32.8768 4.65625 33.6328 5.41225 33.6328 6.34375V12.889C33.6328 15.148 35.4688 16.9885 37.7278 16.9953H43.9198C44.8513 16.9953 45.6073 17.7513 45.6073 18.6828C45.6073 19.6143 44.8513 20.3703 43.9198 20.3703Z\" fill=\"#0D0E2B\" fill-opacity=\"0.7\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M25.5708 37.729C24.6393 37.729 23.8833 36.973 23.8833 36.0415V22.4492C23.8833 21.5177 24.6393 20.7617 25.5708 20.7617C26.5023 20.7617 27.2583 21.5177 27.2583 22.4492V36.0415C27.2583 36.973 26.5023 37.729 25.5708 37.729Z\" fill=\"#0D0E2B\" fill-opacity=\"0.7\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M25.5678 37.7279C25.1201 37.7279 24.6881 37.5501 24.3731 37.2306L19.0968 31.9341C18.4398 31.2726 18.4421 30.2039 19.1013 29.5469C19.7628 28.8899 20.8316 28.8899 21.4886 29.5514L25.5678 33.6509L29.6471 29.5514C30.3041 28.8899 31.3728 28.8899 32.0343 29.5469C32.6936 30.2039 32.6958 31.2726 32.0388 31.9341L26.7626 37.2306C26.4476 37.5501 26.0156 37.7279 25.5678 37.7279Z\" fill=\"#0D0E2B\" fill-opacity=\"0.7\"/>\r\n </svg>\r\n \r\n );\r\n};\r\n"],"names":["isFile","item","VIDEO_EXTENSIONS","isVideoUrl","path","ext","extractName","url","parts","DefaultFileIcon","jsxs","jsx"],"mappings":";AAEO,SAASA,EAAOC,GAAuC;AAC5D,SAAOA,aAAgB;AACzB;AAEA,MAAMC,IAAmB,CAAC,QAAQ,QAAQ,QAAQ,SAAS,QAAQ,MAAM;AAElE,SAASC,EAAWF,GAAkC;AAC3D,MAAI,OAAOA,KAAS,SAAU,QAAO;AACrC,MAAI;AACF,UAAMG,IAAO,IAAI,IAAIH,CAAI,EAAE,SAAS,YAAA;AACpC,WAAOC,EAAiB,KAAK,CAACG,MAAQD,EAAK,SAASC,CAAG,CAAC;AAAA,EAC1D,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEO,SAASC,EAAYC,GAAa;AACvC,MAAI;AACF,UAAMC,IAAQD,EAAI,MAAM,GAAG,EAAE,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC,EAAE,MAAM,GAAG;AACvD,WAAOC,EAAMA,EAAM,SAAS,CAAC,KAAKD;AAAA,EACpC,QAAQ;AACN,WAAOA;AAAA,EACT;AACF;AAEO,MAAME,IAAkB,MAE3B,gBAAAC,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,OAAM,8BAClE,UAAA;AAAA,EAAA,gBAAAC,EAAC,QAAA,EAAK,IAAG,qBAAoB,WAAU,kBAAiB,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MACtF,UAAA,gBAAAA,EAAC,QAAA,EAAK,aAAU,WAAU,aAAU,WAAU,GAAE,8CAA6C,MAAK,QAAA,CAAO,EAAA,CACzG;AAAA,oBACC,KAAA,EAAE,MAAK,2BACR,UAAA,gBAAAA,EAAC,UAAK,aAAU,WAAU,aAAU,WAAU,GAAE,4hBAA2hB,MAAK,WAAU,gBAAa,OAAK,GAC5mB;AAAA,EACA,gBAAAA,EAAC,QAAA,EAAK,aAAU,WAAU,aAAU,WAAU,GAAE,gVAA+U,MAAK,WAAU,gBAAa,MAAA,CAAK;AAAA,EACha,gBAAAA,EAAC,QAAA,EAAK,aAAU,WAAU,aAAU,WAAU,GAAE,+NAA8N,MAAK,WAAU,gBAAa,MAAA,CAAK;AAAA,EAC/S,gBAAAA,EAAC,QAAA,EAAK,aAAU,WAAU,aAAU,WAAU,GAAE,qXAAoX,MAAK,WAAU,gBAAa,MAAA,CAAK;AAAA,GACrc;"}
|
package/Form/Form.js
CHANGED
|
@@ -4,10 +4,9 @@ import { Slot as f } from "@radix-ui/react-slot";
|
|
|
4
4
|
import { Controller as u, useFormContext as F, useFormState as x, FormProvider as I } from "react-hook-form";
|
|
5
5
|
import { cn as a } from "@oneplatformdev/utils";
|
|
6
6
|
import { Label as p } from "../Label/Label.js";
|
|
7
|
-
|
|
8
|
-
const $ = I, c = s.createContext(
|
|
7
|
+
const S = I, c = s.createContext(
|
|
9
8
|
{}
|
|
10
|
-
),
|
|
9
|
+
), $ = ({
|
|
11
10
|
...e
|
|
12
11
|
}) => /* @__PURE__ */ m(c.Provider, { value: { name: e.name }, children: /* @__PURE__ */ m(u, { ...e }) }), d = () => {
|
|
13
12
|
const e = s.useContext(c), t = s.useContext(l), { getFieldState: o } = F(), r = x({ name: e.name }), n = o(e.name, r);
|
|
@@ -25,7 +24,7 @@ const $ = I, c = s.createContext(
|
|
|
25
24
|
}, l = s.createContext(
|
|
26
25
|
{}
|
|
27
26
|
);
|
|
28
|
-
function
|
|
27
|
+
function D({ className: e, ...t }) {
|
|
29
28
|
const o = s.useId();
|
|
30
29
|
return /* @__PURE__ */ m(l.Provider, { value: { id: o }, children: /* @__PURE__ */ m(
|
|
31
30
|
"div",
|
|
@@ -36,7 +35,7 @@ function M({ className: e, ...t }) {
|
|
|
36
35
|
}
|
|
37
36
|
) });
|
|
38
37
|
}
|
|
39
|
-
function
|
|
38
|
+
function M({
|
|
40
39
|
className: e,
|
|
41
40
|
...t
|
|
42
41
|
}) {
|
|
@@ -52,7 +51,7 @@ function N({
|
|
|
52
51
|
}
|
|
53
52
|
);
|
|
54
53
|
}
|
|
55
|
-
function
|
|
54
|
+
function N({ ...e }) {
|
|
56
55
|
const { error: t, formItemId: o, formDescriptionId: r, formMessageId: n } = d();
|
|
57
56
|
return /* @__PURE__ */ m(
|
|
58
57
|
f,
|
|
@@ -65,7 +64,7 @@ function w({ ...e }) {
|
|
|
65
64
|
}
|
|
66
65
|
);
|
|
67
66
|
}
|
|
68
|
-
function
|
|
67
|
+
function w({ className: e, ...t }) {
|
|
69
68
|
const { formDescriptionId: o } = d();
|
|
70
69
|
return /* @__PURE__ */ m(
|
|
71
70
|
"p",
|
|
@@ -77,7 +76,7 @@ function P({ className: e, ...t }) {
|
|
|
77
76
|
}
|
|
78
77
|
);
|
|
79
78
|
}
|
|
80
|
-
function
|
|
79
|
+
function P({ className: e, ...t }) {
|
|
81
80
|
const { error: o, formMessageId: r } = d(), n = o ? String(o?.message ?? "") : t.children;
|
|
82
81
|
return n ? /* @__PURE__ */ m(
|
|
83
82
|
"p",
|
|
@@ -91,13 +90,13 @@ function y({ className: e, ...t }) {
|
|
|
91
90
|
) : null;
|
|
92
91
|
}
|
|
93
92
|
export {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
93
|
+
S as Form,
|
|
94
|
+
N as FormControl,
|
|
95
|
+
w as FormDescription,
|
|
96
|
+
$ as FormField,
|
|
97
|
+
D as FormItem,
|
|
98
|
+
M as FormLabel,
|
|
99
|
+
P as FormMessage,
|
|
101
100
|
d as useFormField
|
|
102
101
|
};
|
|
103
102
|
//# sourceMappingURL=Form.js.map
|
package/Form/Form.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sources":["../../src/Form/Form.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n Controller,\n FormProvider,\n useFormContext,\n useFormState,\n type ControllerProps,\n type FieldPath,\n type FieldValues,\n} from \"react-hook-form\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { Label } from \"../Label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n {} as FormFieldContextValue\n)\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n ...props\n }: ControllerProps<TFieldValues, TName>) => {\n return (\n <FormFieldContext.Provider value={{ name: props.name }}>\n <Controller {...props} />\n </FormFieldContext.Provider>\n )\n}\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext)\n const itemContext = React.useContext(FormItemContext)\n const { getFieldState } = useFormContext()\n const formState = useFormState({ name: fieldContext.name })\n const fieldState = getFieldState(fieldContext.name, formState)\n\n if (!fieldContext) {\n throw new Error(\"useFormField should be used within <FormField>\")\n }\n\n const { id } = itemContext\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n }\n}\n\ntype FormItemContextValue = {\n id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n {} as FormItemContextValue\n)\n\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\n const id = React.useId()\n\n return (\n <FormItemContext.Provider value={{ id }}>\n <div\n data-slot=\"form-item\"\n className={cn(\"flex flex-col gap-2\", className)}\n {...props}\n />\n </FormItemContext.Provider>\n )\n}\n\nfunction FormLabel({\n className,\n ...props\n }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n const { error, formItemId } = useFormField()\n\n return (\n <Label\n data-slot=\"form-label\"\n data-error={!!error}\n className={cn(className)}\n htmlFor={formItemId}\n {...props}\n />\n )\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n return (\n <Slot\n data-slot=\"form-control\"\n id={formItemId}\n aria-describedby={\n !error\n ? `${formDescriptionId}`\n : `${formDescriptionId} ${formMessageId}`\n }\n aria-invalid={!!error}\n {...props}\n />\n )\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n const { formDescriptionId } = useFormField()\n\n return (\n <p\n data-slot=\"form-description\"\n id={formDescriptionId}\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n )\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\n const { error, formMessageId } = useFormField()\n const body = error ? String(error?.message ?? \"\") : props.children\n\n if (!body) {\n return null\n }\n\n return (\n <p\n data-slot=\"form-message\"\n id={formMessageId}\n className={cn(\"text-destructive text-sm\", className)}\n {...props}\n >\n {body}\n </p>\n )\n}\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField,\n}\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","useFormContext","formState","useFormState","fieldState","id","FormItem","className","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","body"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Form.js","sources":["../../src/Form/Form.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\r\nimport { Slot } from \"@radix-ui/react-slot\"\r\nimport {\r\n Controller,\r\n FormProvider,\r\n useFormContext,\r\n useFormState,\r\n type ControllerProps,\r\n type FieldPath,\r\n type FieldValues,\r\n} from \"react-hook-form\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\nimport { Label } from \"../Label\"\r\n\r\nconst Form = FormProvider\r\n\r\ntype FormFieldContextValue<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n> = {\r\n name: TName\r\n}\r\n\r\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\r\n {} as FormFieldContextValue\r\n)\r\n\r\nconst FormField = <\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n>({\r\n ...props\r\n }: ControllerProps<TFieldValues, TName>) => {\r\n return (\r\n <FormFieldContext.Provider value={{ name: props.name }}>\r\n <Controller {...props} />\r\n </FormFieldContext.Provider>\r\n )\r\n}\r\n\r\nconst useFormField = () => {\r\n const fieldContext = React.useContext(FormFieldContext)\r\n const itemContext = React.useContext(FormItemContext)\r\n const { getFieldState } = useFormContext()\r\n const formState = useFormState({ name: fieldContext.name })\r\n const fieldState = getFieldState(fieldContext.name, formState)\r\n\r\n if (!fieldContext) {\r\n throw new Error(\"useFormField should be used within <FormField>\")\r\n }\r\n\r\n const { id } = itemContext\r\n\r\n return {\r\n id,\r\n name: fieldContext.name,\r\n formItemId: `${id}-form-item`,\r\n formDescriptionId: `${id}-form-item-description`,\r\n formMessageId: `${id}-form-item-message`,\r\n ...fieldState,\r\n }\r\n}\r\n\r\ntype FormItemContextValue = {\r\n id: string\r\n}\r\n\r\nconst FormItemContext = React.createContext<FormItemContextValue>(\r\n {} as FormItemContextValue\r\n)\r\n\r\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\r\n const id = React.useId()\r\n\r\n return (\r\n <FormItemContext.Provider value={{ id }}>\r\n <div\r\n data-slot=\"form-item\"\r\n className={cn(\"flex flex-col gap-2\", className)}\r\n {...props}\r\n />\r\n </FormItemContext.Provider>\r\n )\r\n}\r\n\r\nfunction FormLabel({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof LabelPrimitive.Root>) {\r\n const { error, formItemId } = useFormField()\r\n\r\n return (\r\n <Label\r\n data-slot=\"form-label\"\r\n data-error={!!error}\r\n className={cn(className)}\r\n htmlFor={formItemId}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\r\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\r\n\r\n return (\r\n <Slot\r\n data-slot=\"form-control\"\r\n id={formItemId}\r\n aria-describedby={\r\n !error\r\n ? `${formDescriptionId}`\r\n : `${formDescriptionId} ${formMessageId}`\r\n }\r\n aria-invalid={!!error}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\r\n const { formDescriptionId } = useFormField()\r\n\r\n return (\r\n <p\r\n data-slot=\"form-description\"\r\n id={formDescriptionId}\r\n className={cn(\"text-muted-foreground text-sm\", className)}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\r\n const { error, formMessageId } = useFormField()\r\n const body = error ? String(error?.message ?? \"\") : props.children\r\n\r\n if (!body) {\r\n return null\r\n }\r\n\r\n return (\r\n <p\r\n data-slot=\"form-message\"\r\n id={formMessageId}\r\n className={cn(\"text-destructive text-sm\", className)}\r\n {...props}\r\n >\r\n {body}\r\n </p>\r\n )\r\n}\r\n\r\nexport {\r\n useFormField,\r\n Form,\r\n FormItem,\r\n FormLabel,\r\n FormControl,\r\n FormDescription,\r\n FormMessage,\r\n FormField,\r\n}\r\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","useFormContext","formState","useFormState","fieldState","id","FormItem","className","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","body"],"mappings":"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"}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { jsx as e, jsxs as u } from "react/jsx-runtime";
|
|
2
2
|
import { FormField as h, FormItem as d, FormMessage as f, FormLabel as F } from "./Form.js";
|
|
3
|
-
import "
|
|
3
|
+
import { cloneElement as P } from "react";
|
|
4
4
|
import { cn as l } from "@oneplatformdev/utils";
|
|
5
|
-
import { Tooltip as
|
|
6
|
-
import { cloneElement as b } from "react";
|
|
5
|
+
import { Tooltip as b } from "../Tooltip/Tooltip.js";
|
|
7
6
|
const N = (n) => {
|
|
8
7
|
const { label: t, tooltip: s, tooltipProps: r } = n, o = /* @__PURE__ */ e(F, { children: t });
|
|
9
8
|
return t ? s ? /* @__PURE__ */ e(
|
|
10
|
-
|
|
9
|
+
b,
|
|
11
10
|
{
|
|
12
11
|
message: s,
|
|
13
12
|
showQuestionMark: !0,
|
|
@@ -21,10 +20,10 @@ const N = (n) => {
|
|
|
21
20
|
...r?.triggerProps,
|
|
22
21
|
className: l("cursor-help", r?.triggerProps?.className)
|
|
23
22
|
},
|
|
24
|
-
children:
|
|
23
|
+
children: P(o, { className: l("cursor-help", o.props.classNames) })
|
|
25
24
|
}
|
|
26
25
|
) : o : null;
|
|
27
|
-
},
|
|
26
|
+
}, I = (n) => {
|
|
28
27
|
const {
|
|
29
28
|
form: t,
|
|
30
29
|
name: s,
|
|
@@ -58,6 +57,6 @@ const N = (n) => {
|
|
|
58
57
|
);
|
|
59
58
|
};
|
|
60
59
|
export {
|
|
61
|
-
|
|
60
|
+
I as FormRenderControl
|
|
62
61
|
};
|
|
63
62
|
//# sourceMappingURL=FormRenderControl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormRenderControl.js","sources":["../../src/Form/FormRenderControl.tsx"],"sourcesContent":["import { FieldValues } from \"react-hook-form\";\n\nimport { FormField, FormItem, FormLabel, FormMessage } from \"./Form\";\nimport { FormRenderControlProps } from \"./FormRenderControl.types\";\nimport { Tooltip } from \"../Tooltip\";\nimport { cloneElement } from \"react\";\nimport { cn } from \"@oneplatformdev/utils\";\n\ninterface IFormLabelWithTooltipProps<\n Data extends FieldValues = FieldValues,\n> extends Pick<FormRenderControlProps<Data>, 'label' | 'tooltip' | 'tooltipProps'> {\n}\n\nconst FormLabelWithTooltip = <\n Data extends FieldValues = FieldValues,\n>(props: IFormLabelWithTooltipProps<Data>) => {\n const { label, tooltip, tooltipProps } = props;\n const cmp = <FormLabel>{label}</FormLabel>;\n if (!label) return null;\n if (!tooltip) return cmp;\n return (\n <Tooltip\n message={tooltip}\n showQuestionMark\n questionIconSize=\"sm\"\n contentProps={{\n side: \"right\",\n align: \"center\"\n }}\n {...tooltipProps}\n triggerProps={{\n ...tooltipProps?.triggerProps,\n className: cn('cursor-help', tooltipProps?.triggerProps?.className),\n }}\n >\n {cloneElement(cmp, { className: cn('cursor-help', cmp.props.classNames) })}\n </Tooltip>\n )\n}\n\nexport const FormRenderControl = <\n Data extends FieldValues = FieldValues,\n>(\n props: FormRenderControlProps<Data>\n) => {\n const {\n form,\n name,\n label,\n tooltip,\n tooltipProps,\n render,\n containerProps = {},\n showErrorMessages = true,\n ...rest\n } = props;\n return (\n <FormField\n control={form.control}\n name={name}\n render={(params) => (\n <FormItem {...containerProps}>\n <FormLabelWithTooltip\n label={label}\n tooltip={tooltip}\n tooltipProps={tooltipProps}\n />\n {/*{(label || tooltip) && (*/}\n {/* <FormLabel className={cn(\"flex items-center gap-1\")}>*/}\n {/* {label && <span>{label}</span>}*/}\n {/* {tooltip && (*/}\n {/* <Tooltip*/}\n {/* message={tooltip}*/}\n {/* showQuestionMark*/}\n {/* questionIconSize=\"xs\"*/}\n {/* contentProps={{*/}\n {/* side: \"right\",*/}\n {/* align: \"center\"*/}\n {/* }}*/}\n {/* {...props.tooltipProps}*/}\n {/* />*/}\n {/* )}*/}\n {/* </FormLabel>*/}\n {/*)}*/}\n {render(params)}\n {showErrorMessages && <FormMessage/>}\n </FormItem>\n )}\n {...rest}\n />\n );\n};\n"],"names":["FormLabelWithTooltip","props","label","tooltip","tooltipProps","cmp","jsx","FormLabel","Tooltip","cn","cloneElement","FormRenderControl","form","name","render","containerProps","showErrorMessages","rest","FormField","params","jsxs","FormItem","FormMessage"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormRenderControl.js","sources":["../../src/Form/FormRenderControl.tsx"],"sourcesContent":["import { FieldValues } from \"react-hook-form\";\r\n\r\nimport { FormField, FormItem, FormLabel, FormMessage } from \"./Form\";\r\nimport { FormRenderControlProps } from \"./FormRenderControl.types\";\r\nimport { Tooltip } from \"../Tooltip\";\r\nimport { cloneElement } from \"react\";\r\nimport { cn } from \"@oneplatformdev/utils\";\r\n\r\ninterface IFormLabelWithTooltipProps<\r\n Data extends FieldValues = FieldValues,\r\n> extends Pick<FormRenderControlProps<Data>, 'label' | 'tooltip' | 'tooltipProps'> {\r\n}\r\n\r\nconst FormLabelWithTooltip = <\r\n Data extends FieldValues = FieldValues,\r\n>(props: IFormLabelWithTooltipProps<Data>) => {\r\n const { label, tooltip, tooltipProps } = props;\r\n const cmp = <FormLabel>{label}</FormLabel>;\r\n if (!label) return null;\r\n if (!tooltip) return cmp;\r\n return (\r\n <Tooltip\r\n message={tooltip}\r\n showQuestionMark\r\n questionIconSize=\"sm\"\r\n contentProps={{\r\n side: \"right\",\r\n align: \"center\"\r\n }}\r\n {...tooltipProps}\r\n triggerProps={{\r\n ...tooltipProps?.triggerProps,\r\n className: cn('cursor-help', tooltipProps?.triggerProps?.className),\r\n }}\r\n >\r\n {cloneElement(cmp, { className: cn('cursor-help', cmp.props.classNames) })}\r\n </Tooltip>\r\n )\r\n}\r\n\r\nexport const FormRenderControl = <\r\n Data extends FieldValues = FieldValues,\r\n>(\r\n props: FormRenderControlProps<Data>\r\n) => {\r\n const {\r\n form,\r\n name,\r\n label,\r\n tooltip,\r\n tooltipProps,\r\n render,\r\n containerProps = {},\r\n showErrorMessages = true,\r\n ...rest\r\n } = props;\r\n return (\r\n <FormField\r\n control={form.control}\r\n name={name}\r\n render={(params) => (\r\n <FormItem {...containerProps}>\r\n <FormLabelWithTooltip\r\n label={label}\r\n tooltip={tooltip}\r\n tooltipProps={tooltipProps}\r\n />\r\n {/*{(label || tooltip) && (*/}\r\n {/* <FormLabel className={cn(\"flex items-center gap-1\")}>*/}\r\n {/* {label && <span>{label}</span>}*/}\r\n {/* {tooltip && (*/}\r\n {/* <Tooltip*/}\r\n {/* message={tooltip}*/}\r\n {/* showQuestionMark*/}\r\n {/* questionIconSize=\"xs\"*/}\r\n {/* contentProps={{*/}\r\n {/* side: \"right\",*/}\r\n {/* align: \"center\"*/}\r\n {/* }}*/}\r\n {/* {...props.tooltipProps}*/}\r\n {/* />*/}\r\n {/* )}*/}\r\n {/* </FormLabel>*/}\r\n {/*)}*/}\r\n {render(params)}\r\n {showErrorMessages && <FormMessage/>}\r\n </FormItem>\r\n )}\r\n {...rest}\r\n />\r\n );\r\n};\r\n"],"names":["FormLabelWithTooltip","props","label","tooltip","tooltipProps","cmp","jsx","FormLabel","Tooltip","cn","cloneElement","FormRenderControl","form","name","render","containerProps","showErrorMessages","rest","FormField","params","jsxs","FormItem","FormMessage"],"mappings":";;;;;AAaA,MAAMA,IAAuB,CAE3BC,MAA4C;AAC5C,QAAM,EAAE,OAAAC,GAAO,SAAAC,GAAS,cAAAC,EAAA,IAAiBH,GACnCI,IAAM,gBAAAC,EAACC,GAAA,EAAW,UAAAL,EAAA,CAAM;AAC9B,SAAKA,IACAC,IAEH,gBAAAG;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,SAASL;AAAA,MACT,kBAAgB;AAAA,MAChB,kBAAiB;AAAA,MACjB,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,MAER,GAAGC;AAAA,MACJ,cAAc;AAAA,QACZ,GAAGA,GAAc;AAAA,QACjB,WAAWK,EAAG,eAAeL,GAAc,cAAc,SAAS;AAAA,MAAA;AAAA,MAGnE,UAAAM,EAAaL,GAAK,EAAE,WAAWI,EAAG,eAAeJ,EAAI,MAAM,UAAU,EAAA,CAAG;AAAA,IAAA;AAAA,EAAA,IAhBxDA,IADF;AAoBrB,GAEaM,IAAoB,CAG/BV,MACG;AACH,QAAM;AAAA,IACJ,MAAAW;AAAA,IACA,MAAAC;AAAA,IACA,OAAAX;AAAA,IACA,SAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAU;AAAA,IACA,gBAAAC,IAAiB,CAAA;AAAA,IACjB,mBAAAC,IAAoB;AAAA,IACpB,GAAGC;AAAA,EAAA,IACDhB;AACJ,SACE,gBAAAK;AAAA,IAACY;AAAA,IAAA;AAAA,MACC,SAASN,EAAK;AAAA,MACd,MAAAC;AAAA,MACA,QAAQ,CAACM,MACP,gBAAAC,EAACC,GAAA,EAAU,GAAGN,GACZ,UAAA;AAAA,QAAA,gBAAAT;AAAA,UAACN;AAAA,UAAA;AAAA,YACC,OAAAE;AAAA,YACA,SAAAC;AAAA,YACA,cAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAmBDU,EAAOK,CAAM;AAAA,QACbH,uBAAsBM,GAAA,CAAA,CAAW;AAAA,MAAA,GACpC;AAAA,MAED,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
package/Form/Form_old.js
CHANGED
|
@@ -4,10 +4,9 @@ import { Slot as F } from "@radix-ui/react-slot";
|
|
|
4
4
|
import { useFormContext as u, FormProvider as p, Controller as x } from "react-hook-form";
|
|
5
5
|
import { cn as a } from "@oneplatformdev/utils";
|
|
6
6
|
import { Label as I } from "../Label/Label.js";
|
|
7
|
-
|
|
8
|
-
const M = p, l = m.createContext(
|
|
7
|
+
const D = p, l = m.createContext(
|
|
9
8
|
{}
|
|
10
|
-
),
|
|
9
|
+
), M = ({
|
|
11
10
|
...e
|
|
12
11
|
}) => /* @__PURE__ */ n(l.Provider, { value: { name: e.name }, children: /* @__PURE__ */ n(x, { ...e }) }), c = () => {
|
|
13
12
|
const e = m.useContext(l), t = m.useContext(f), { getFieldState: o, formState: r } = u(), i = o(e.name, r);
|
|
@@ -87,10 +86,10 @@ const w = m.forwardRef(({ className: e, children: t, ...o }, r) => {
|
|
|
87
86
|
});
|
|
88
87
|
w.displayName = "FormMessage";
|
|
89
88
|
export {
|
|
90
|
-
|
|
89
|
+
D as Form,
|
|
91
90
|
g as FormControl,
|
|
92
91
|
N as FormDescription,
|
|
93
|
-
|
|
92
|
+
M as FormField,
|
|
94
93
|
v as FormItem,
|
|
95
94
|
C as FormLabel,
|
|
96
95
|
w as FormMessage,
|
package/Form/Form_old.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form_old.js","sources":["../../src/Form/Form_old.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { Slot } from '@radix-ui/react-slot';\nimport {\n Controller,\n ControllerProps,\n FieldPath,\n FieldValues,\n FormProvider,\n useFormContext,\n} from 'react-hook-form';\n\nimport { cn } from '@oneplatformdev/utils';\nimport { Label } from '../Label';\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n {} as FormFieldContextValue\n)\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n ...props\n}: ControllerProps<TFieldValues, TName>) => {\n return (\n <FormFieldContext.Provider value={{ name: props.name }}>\n <Controller {...props} />\n </FormFieldContext.Provider>\n )\n}\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext)\n const itemContext = React.useContext(FormItemContext)\n const { getFieldState, formState } = useFormContext()\n\n const fieldState = getFieldState(fieldContext.name, formState)\n\n if (!fieldContext) {\n throw new Error(\"useFormField should be used within <FormField>\")\n }\n\n const { id } = itemContext\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n }\n}\n\ntype FormItemContextValue = {\n id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n {} as FormItemContextValue\n)\n\nconst FormItem = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const id = React.useId()\n\n return (\n <FormItemContext.Provider value={{ id }}>\n <div ref={ref} className={cn(\"space-y-1\", className)} {...props} />\n </FormItemContext.Provider>\n )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n React.ElementRef<typeof LabelPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n const { error, formItemId } = useFormField()\n\n return (\n <Label\n ref={ref}\n data-state={error ? \"invalid\" : \"valid\"}\n className={cn(error && \"text-destructive\", className)}\n htmlFor={formItemId}\n {...props}\n />\n )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n React.ElementRef<typeof Slot>,\n React.ComponentPropsWithoutRef<typeof Slot>\n>(({ className, ...props }, ref) => {\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n return (\n <Slot\n ref={ref}\n id={formItemId}\n data-state={error ? \"invalid\" : \"valid\"}\n aria-describedby={\n !error\n ? `${formDescriptionId}`\n : `${formDescriptionId} ${formMessageId}`\n }\n aria-invalid={!!error}\n className={cn('group/form-control', className)}\n {...props}\n />\n )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n const { formDescriptionId } = useFormField()\n\n return (\n <p\n ref={ref}\n id={formDescriptionId}\n className={cn(\"text-[0.8rem] text-muted-foreground\", className)}\n {...props}\n />\n )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n const { error, formMessageId } = useFormField()\n const body = error ? String(error?.message) : children\n\n if (!body) {\n return null\n }\n\n return (\n <p\n ref={ref}\n id={formMessageId}\n className={cn(\"text-[0.8rem] font-medium text-destructive\", className)}\n {...props}\n >\n {body}\n </p>\n )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField,\n}\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","fieldState","id","FormItem","className","ref","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","children","body"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Form_old.js","sources":["../../src/Form/Form_old.tsx"],"sourcesContent":["'use client';\r\n\r\nimport * as React from 'react';\r\nimport * as LabelPrimitive from '@radix-ui/react-label';\r\nimport { Slot } from '@radix-ui/react-slot';\r\nimport {\r\n Controller,\r\n ControllerProps,\r\n FieldPath,\r\n FieldValues,\r\n FormProvider,\r\n useFormContext,\r\n} from 'react-hook-form';\r\n\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport { Label } from '../Label';\r\n\r\nconst Form = FormProvider;\r\n\r\ntype FormFieldContextValue<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> = {\r\n name: TName\r\n}\r\n\r\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\r\n {} as FormFieldContextValue\r\n)\r\n\r\nconst FormField = <\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>({\r\n ...props\r\n}: ControllerProps<TFieldValues, TName>) => {\r\n return (\r\n <FormFieldContext.Provider value={{ name: props.name }}>\r\n <Controller {...props} />\r\n </FormFieldContext.Provider>\r\n )\r\n}\r\n\r\nconst useFormField = () => {\r\n const fieldContext = React.useContext(FormFieldContext)\r\n const itemContext = React.useContext(FormItemContext)\r\n const { getFieldState, formState } = useFormContext()\r\n\r\n const fieldState = getFieldState(fieldContext.name, formState)\r\n\r\n if (!fieldContext) {\r\n throw new Error(\"useFormField should be used within <FormField>\")\r\n }\r\n\r\n const { id } = itemContext\r\n\r\n return {\r\n id,\r\n name: fieldContext.name,\r\n formItemId: `${id}-form-item`,\r\n formDescriptionId: `${id}-form-item-description`,\r\n formMessageId: `${id}-form-item-message`,\r\n ...fieldState,\r\n }\r\n}\r\n\r\ntype FormItemContextValue = {\r\n id: string\r\n}\r\n\r\nconst FormItemContext = React.createContext<FormItemContextValue>(\r\n {} as FormItemContextValue\r\n)\r\n\r\nconst FormItem = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n const id = React.useId()\r\n\r\n return (\r\n <FormItemContext.Provider value={{ id }}>\r\n <div ref={ref} className={cn(\"space-y-1\", className)} {...props} />\r\n </FormItemContext.Provider>\r\n )\r\n})\r\nFormItem.displayName = \"FormItem\"\r\n\r\nconst FormLabel = React.forwardRef<\r\n React.ElementRef<typeof LabelPrimitive.Root>,\r\n React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\r\n>(({ className, ...props }, ref) => {\r\n const { error, formItemId } = useFormField()\r\n\r\n return (\r\n <Label\r\n ref={ref}\r\n data-state={error ? \"invalid\" : \"valid\"}\r\n className={cn(error && \"text-destructive\", className)}\r\n htmlFor={formItemId}\r\n {...props}\r\n />\r\n )\r\n})\r\nFormLabel.displayName = \"FormLabel\"\r\n\r\nconst FormControl = React.forwardRef<\r\n React.ElementRef<typeof Slot>,\r\n React.ComponentPropsWithoutRef<typeof Slot>\r\n>(({ className, ...props }, ref) => {\r\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\r\n\r\n return (\r\n <Slot\r\n ref={ref}\r\n id={formItemId}\r\n data-state={error ? \"invalid\" : \"valid\"}\r\n aria-describedby={\r\n !error\r\n ? `${formDescriptionId}`\r\n : `${formDescriptionId} ${formMessageId}`\r\n }\r\n aria-invalid={!!error}\r\n className={cn('group/form-control', className)}\r\n {...props}\r\n />\r\n )\r\n})\r\nFormControl.displayName = \"FormControl\"\r\n\r\nconst FormDescription = React.forwardRef<\r\n HTMLParagraphElement,\r\n React.HTMLAttributes<HTMLParagraphElement>\r\n>(({ className, ...props }, ref) => {\r\n const { formDescriptionId } = useFormField()\r\n\r\n return (\r\n <p\r\n ref={ref}\r\n id={formDescriptionId}\r\n className={cn(\"text-[0.8rem] text-muted-foreground\", className)}\r\n {...props}\r\n />\r\n )\r\n})\r\nFormDescription.displayName = \"FormDescription\"\r\n\r\nconst FormMessage = React.forwardRef<\r\n HTMLParagraphElement,\r\n React.HTMLAttributes<HTMLParagraphElement>\r\n>(({ className, children, ...props }, ref) => {\r\n const { error, formMessageId } = useFormField()\r\n const body = error ? String(error?.message) : children\r\n\r\n if (!body) {\r\n return null\r\n }\r\n\r\n return (\r\n <p\r\n ref={ref}\r\n id={formMessageId}\r\n className={cn(\"text-[0.8rem] font-medium text-destructive\", className)}\r\n {...props}\r\n >\r\n {body}\r\n </p>\r\n )\r\n})\r\nFormMessage.displayName = \"FormMessage\"\r\n\r\nexport {\r\n useFormField,\r\n Form,\r\n FormItem,\r\n FormLabel,\r\n FormControl,\r\n FormDescription,\r\n FormMessage,\r\n FormField,\r\n}\r\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","fieldState","id","FormItem","className","ref","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","children","body"],"mappings":"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"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { FormRenderControl as a } from "../Form/FormRenderControl.js";
|
|
3
|
+
import { FormControl as l } from "../Form/Form.js";
|
|
4
4
|
import { CheckboxLabel as k } from "../Checkbox/Checkbox.js";
|
|
5
5
|
const f = (m) => {
|
|
6
6
|
const { form: t, label: c, name: h, onCheckedChange: C, ...r } = m;
|
|
7
7
|
return /* @__PURE__ */ e(
|
|
8
|
-
|
|
8
|
+
a,
|
|
9
9
|
{
|
|
10
10
|
form: t,
|
|
11
11
|
name: h,
|
|
12
|
-
render: ({ field: o }) => /* @__PURE__ */ e(
|
|
12
|
+
render: ({ field: o }) => /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(
|
|
13
13
|
k,
|
|
14
14
|
{
|
|
15
15
|
...o,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormCheckbox.js","sources":["../../src/FormCheckbox/FormCheckbox.tsx"],"sourcesContent":["import { FieldValues } from 'react-hook-form';\n\nimport { FormControl, FormRenderControl } from '../Form';\n\nimport { FormCheckboxProps } from './FormCheckbox.types';\nimport { CheckboxLabel } from '../Checkbox';\n\n// TODO: move to @oneplatformdev/ui/FormCheckbox\nexport const FormCheckbox = <Data extends FieldValues>(\n\tprops: FormCheckboxProps<Data>\n) => {\n\tconst { form, label, name, onCheckedChange, ...rest } = props;\n\treturn (\n\t\t<FormRenderControl\n\t\t\tform={form}\n\t\t\tname={name}\n\t\t\trender={({ field }) => (\n\t\t\t\t<FormControl>\n\t\t\t\t\t<CheckboxLabel\n\t\t\t\t\t\t{...field}\n\t\t\t\t\t\t{...rest}\n\t\t\t\t\t\tlabel={label}\n\t\t\t\t\t\tchecked={field.value || false}\n\t\t\t\t\t\tonCheckedChange={(v) => {\n\t\t\t\t\t\t\tfield.onChange(v);\n\t\t\t\t\t\t\tonCheckedChange?.(v);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</FormControl>\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n"],"names":["FormCheckbox","props","form","label","name","onCheckedChange","rest","jsx","FormRenderControl","field","FormControl","CheckboxLabel","v"],"mappings":";;;;AAQO,MAAMA,IAAe,CAC3BC,MACI;AACJ,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,MAAAC,GAAM,iBAAAC,GAAiB,GAAGC,MAASL;AACxD,SACC,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAAN;AAAA,MACA,MAAAE;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAK,EAAA,wBACTC,GAAA,EACA,UAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,GAAGF;AAAA,UACH,GAAGH;AAAA,UACJ,OAAAH;AAAA,UACA,SAASM,EAAM,SAAS;AAAA,UACxB,iBAAiB,CAACG,MAAM;AACvB,YAAAH,EAAM,SAASG,CAAC,GAChBP,IAAkBO,CAAC;AAAA,UACpB;AAAA,QAAA;AAAA,MAAA,GAEF;AAAA,MAEA,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
1
|
+
{"version":3,"file":"FormCheckbox.js","sources":["../../src/FormCheckbox/FormCheckbox.tsx"],"sourcesContent":["import { FieldValues } from 'react-hook-form';\r\n\r\nimport { FormControl, FormRenderControl } from '../Form';\r\n\r\nimport { FormCheckboxProps } from './FormCheckbox.types';\r\nimport { CheckboxLabel } from '../Checkbox';\r\n\r\n// TODO: move to @oneplatformdev/ui/FormCheckbox\r\nexport const FormCheckbox = <Data extends FieldValues>(\r\n\tprops: FormCheckboxProps<Data>\r\n) => {\r\n\tconst { form, label, name, onCheckedChange, ...rest } = props;\r\n\treturn (\r\n\t\t<FormRenderControl\r\n\t\t\tform={form}\r\n\t\t\tname={name}\r\n\t\t\trender={({ field }) => (\r\n\t\t\t\t<FormControl>\r\n\t\t\t\t\t<CheckboxLabel\r\n\t\t\t\t\t\t{...field}\r\n\t\t\t\t\t\t{...rest}\r\n\t\t\t\t\t\tlabel={label}\r\n\t\t\t\t\t\tchecked={field.value || false}\r\n\t\t\t\t\t\tonCheckedChange={(v) => {\r\n\t\t\t\t\t\t\tfield.onChange(v);\r\n\t\t\t\t\t\t\tonCheckedChange?.(v);\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t/>\r\n\t\t\t\t</FormControl>\r\n\t\t\t)}\r\n\t\t\t{...rest}\r\n\t\t/>\r\n\t);\r\n};\r\n"],"names":["FormCheckbox","props","form","label","name","onCheckedChange","rest","jsx","FormRenderControl","field","FormControl","CheckboxLabel","v"],"mappings":";;;;AAQO,MAAMA,IAAe,CAC3BC,MACI;AACJ,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,MAAAC,GAAM,iBAAAC,GAAiB,GAAGC,MAASL;AACxD,SACC,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAAN;AAAA,MACA,MAAAE;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAK,EAAA,wBACTC,GAAA,EACA,UAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,GAAGF;AAAA,UACH,GAAGH;AAAA,UACJ,OAAAH;AAAA,UACA,SAASM,EAAM,SAAS;AAAA,UACxB,iBAAiB,CAACG,MAAM;AACvB,YAAAH,EAAM,SAASG,CAAC,GAChBP,IAAkBO,CAAC;AAAA,UACpB;AAAA,QAAA;AAAA,MAAA,GAEF;AAAA,MAEA,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ReactElement, Ref } from 'react';
|
|
2
|
+
import { FieldValues } from 'react-hook-form';
|
|
3
|
+
import { FormColorInputProps } from './FormColorInput.types';
|
|
4
|
+
export declare const FormColorInput: <Data extends FieldValues>(props: FormColorInputProps<Data> & {
|
|
5
|
+
ref?: Ref<HTMLInputElement>;
|
|
6
|
+
}) => ReactElement;
|
|
7
|
+
//# sourceMappingURL=FormColorInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormColorInput.d.ts","sourceRoot":"","sources":["../../src/FormColorInput/FormColorInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,YAAY,EAAE,GAAG,EAAa,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAI9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAwC7D,eAAO,MAAM,cAAc,EAAsC,CAC/D,IAAI,SAAS,WAAW,EAExB,KAAK,EAAE,mBAAmB,CAAC,IAAI,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KAC/D,YAAY,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as c } from "react";
|
|
3
|
+
import { ColorInput as s } from "../ColorInput/ColorInput.js";
|
|
4
|
+
import { FormRenderControl as F } from "../Form/FormRenderControl.js";
|
|
5
|
+
import { FormControl as I } from "../Form/Form.js";
|
|
6
|
+
function h(e, r) {
|
|
7
|
+
const { form: m, tooltip: p, tooltipProps: u, label: l, name: f, onBlur: i, ...a } = e;
|
|
8
|
+
return /* @__PURE__ */ t(
|
|
9
|
+
F,
|
|
10
|
+
{
|
|
11
|
+
form: m,
|
|
12
|
+
name: f,
|
|
13
|
+
tooltip: p,
|
|
14
|
+
tooltipProps: u,
|
|
15
|
+
label: l,
|
|
16
|
+
render: ({ field: n, fieldState: C }) => /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(
|
|
17
|
+
s,
|
|
18
|
+
{
|
|
19
|
+
...a,
|
|
20
|
+
ref: (o) => {
|
|
21
|
+
n.ref(o), typeof r == "function" ? r(o) : r && (r.current = o);
|
|
22
|
+
},
|
|
23
|
+
error: !!C.error,
|
|
24
|
+
value: n.value || "",
|
|
25
|
+
onChange: (o) => n.onChange(o),
|
|
26
|
+
onBlur: (...o) => {
|
|
27
|
+
n.onBlur?.(), i?.(...o);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
) })
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
const b = c(h);
|
|
35
|
+
export {
|
|
36
|
+
b as FormColorInput
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=FormColorInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormColorInput.js","sources":["../../src/FormColorInput/FormColorInput.tsx"],"sourcesContent":["import { forwardRef, ReactElement, Ref, RefObject } from 'react';\r\nimport { FieldValues } from 'react-hook-form';\r\n\r\nimport { ColorInput } from '../ColorInput';\r\nimport { FormControl, FormRenderControl } from '../Form';\r\nimport { FormColorInputProps } from './FormColorInput.types';\r\n\r\nfunction FormColorInputInner<Data extends FieldValues>(\r\n props: FormColorInputProps<Data>,\r\n ref: Ref<HTMLInputElement>,\r\n) {\r\n const { form, tooltip, tooltipProps, label, name, onBlur, ...rest } = props;\r\n return (\r\n <FormRenderControl\r\n form={form}\r\n name={name}\r\n tooltip={tooltip}\r\n tooltipProps={tooltipProps}\r\n label={label}\r\n render={({ field, fieldState }) => (\r\n <FormControl>\r\n <ColorInput\r\n {...rest}\r\n ref={(el) => {\r\n field.ref(el);\r\n if (typeof ref === 'function') {\r\n ref(el);\r\n } else if (ref) {\r\n (ref as RefObject<HTMLInputElement | null>).current = el;\r\n }\r\n }}\r\n error={!!fieldState.error}\r\n value={field.value || ''}\r\n onChange={(hex) => field.onChange(hex)}\r\n onBlur={(...args) => {\r\n field.onBlur?.();\r\n onBlur?.(...args);\r\n }}\r\n />\r\n </FormControl>\r\n )}\r\n />\r\n );\r\n}\r\n\r\nexport const FormColorInput = forwardRef(FormColorInputInner) as <\r\n Data extends FieldValues,\r\n>(\r\n props: FormColorInputProps<Data> & { ref?: Ref<HTMLInputElement> },\r\n) => ReactElement;\r\n"],"names":["FormColorInputInner","props","ref","form","tooltip","tooltipProps","label","name","onBlur","rest","jsx","FormRenderControl","field","fieldState","FormControl","ColorInput","el","hex","args","FormColorInput","forwardRef"],"mappings":";;;;;AAOA,SAASA,EACPC,GACAC,GACA;AACA,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,OAAAC,GAAO,MAAAC,GAAM,QAAAC,GAAQ,GAAGC,EAAA,IAASR;AACtE,SACE,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAR;AAAA,MACA,MAAAI;AAAA,MACA,SAAAH;AAAA,MACA,cAAAC;AAAA,MACA,OAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAM,GAAO,YAAAC,EAAA,wBACfC,GAAA,EACC,UAAA,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UACE,GAAGN;AAAA,UACJ,KAAK,CAACO,MAAO;AACX,YAAAJ,EAAM,IAAII,CAAE,GACR,OAAOd,KAAQ,aACjBA,EAAIc,CAAE,IACGd,MACRA,EAA2C,UAAUc;AAAA,UAE1D;AAAA,UACA,OAAO,CAAC,CAACH,EAAW;AAAA,UACpB,OAAOD,EAAM,SAAS;AAAA,UACtB,UAAU,CAACK,MAAQL,EAAM,SAASK,CAAG;AAAA,UACrC,QAAQ,IAAIC,MAAS;AACnB,YAAAN,EAAM,SAAA,GACNJ,IAAS,GAAGU,CAAI;AAAA,UAClB;AAAA,QAAA;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAEO,MAAMC,IAAiBC,EAAWpB,CAAmB;"}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { jsx as o, jsxs as a } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect as i } from "react";
|
|
3
|
+
import { useForm as n, FormProvider as s } from "react-hook-form";
|
|
4
|
+
import { FormColorInput as l } from "./FormColorInput.js";
|
|
5
|
+
import { Button as d } from "../Button/Button.js";
|
|
6
|
+
function c({ initialValue: r = "#9368FF", ...e }) {
|
|
7
|
+
const t = n({ defaultValues: { color: r } }), m = t.watch("color");
|
|
8
|
+
return /* @__PURE__ */ o(s, { ...t, children: /* @__PURE__ */ a("div", { className: "max-w-sm space-y-3", children: [
|
|
9
|
+
/* @__PURE__ */ o(
|
|
10
|
+
l,
|
|
11
|
+
{
|
|
12
|
+
form: t,
|
|
13
|
+
name: "color",
|
|
14
|
+
label: "Колір бокової панелі",
|
|
15
|
+
...e
|
|
16
|
+
}
|
|
17
|
+
),
|
|
18
|
+
/* @__PURE__ */ a("div", { className: "text-xs text-muted-foreground", children: [
|
|
19
|
+
"value: ",
|
|
20
|
+
/* @__PURE__ */ o("span", { className: "font-mono", children: m })
|
|
21
|
+
] })
|
|
22
|
+
] }) });
|
|
23
|
+
}
|
|
24
|
+
const y = {
|
|
25
|
+
title: "FormColorInput",
|
|
26
|
+
component: l,
|
|
27
|
+
parameters: { layout: "centered" },
|
|
28
|
+
args: {
|
|
29
|
+
label: "Колір",
|
|
30
|
+
withAlpha: !1
|
|
31
|
+
},
|
|
32
|
+
argTypes: {
|
|
33
|
+
form: { control: !1 },
|
|
34
|
+
name: { control: !1 },
|
|
35
|
+
onChange: { control: !1 },
|
|
36
|
+
onBlur: { control: !1 }
|
|
37
|
+
},
|
|
38
|
+
decorators: [
|
|
39
|
+
(r) => /* @__PURE__ */ o("div", { className: "p-6 w-[420px]", children: /* @__PURE__ */ o(r, {}) })
|
|
40
|
+
]
|
|
41
|
+
}, w = {
|
|
42
|
+
render: (r) => /* @__PURE__ */ o(c, { ...r })
|
|
43
|
+
}, v = {
|
|
44
|
+
args: { withAlpha: !0 },
|
|
45
|
+
render: (r) => /* @__PURE__ */ o(c, { ...r, initialValue: "#9368FFcc" })
|
|
46
|
+
};
|
|
47
|
+
function u(r) {
|
|
48
|
+
const e = n({ defaultValues: { color: "" } });
|
|
49
|
+
return i(() => {
|
|
50
|
+
e.setError("color", { message: "Оберіть колір" });
|
|
51
|
+
}, []), /* @__PURE__ */ o(s, { ...e, children: /* @__PURE__ */ o("div", { className: "max-w-sm", children: /* @__PURE__ */ o(
|
|
52
|
+
l,
|
|
53
|
+
{
|
|
54
|
+
form: e,
|
|
55
|
+
name: "color",
|
|
56
|
+
label: "Колір",
|
|
57
|
+
...r
|
|
58
|
+
}
|
|
59
|
+
) }) });
|
|
60
|
+
}
|
|
61
|
+
const N = {
|
|
62
|
+
render: (r) => /* @__PURE__ */ o(u, { ...r })
|
|
63
|
+
}, f = (r) => {
|
|
64
|
+
const e = {};
|
|
65
|
+
return r.color?.trim() ? /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(r.color.trim()) || (e.color = { type: "pattern", message: "Невірний формат кольору" }) : e.color = { type: "required", message: "Обовʼязкове поле" }, { values: Object.keys(e).length ? {} : r, errors: e };
|
|
66
|
+
};
|
|
67
|
+
function p() {
|
|
68
|
+
const r = n({
|
|
69
|
+
mode: "onTouched",
|
|
70
|
+
resolver: f,
|
|
71
|
+
defaultValues: { color: "" }
|
|
72
|
+
}), { isValid: e, isSubmitting: t } = r.formState;
|
|
73
|
+
return /* @__PURE__ */ o(s, { ...r, children: /* @__PURE__ */ a(
|
|
74
|
+
"form",
|
|
75
|
+
{
|
|
76
|
+
className: "max-w-sm space-y-4",
|
|
77
|
+
onSubmit: r.handleSubmit(() => alert("Збережено ✅")),
|
|
78
|
+
children: [
|
|
79
|
+
/* @__PURE__ */ o(l, { form: r, name: "color", label: "Колір" }),
|
|
80
|
+
/* @__PURE__ */ o(d, { type: "submit", disabled: !e || t, className: "w-full", children: "Зберегти" })
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
) });
|
|
84
|
+
}
|
|
85
|
+
const C = {
|
|
86
|
+
render: () => /* @__PURE__ */ o(p, {})
|
|
87
|
+
};
|
|
88
|
+
export {
|
|
89
|
+
w as Default,
|
|
90
|
+
C as HybridValidation,
|
|
91
|
+
v as WithAlpha,
|
|
92
|
+
N as WithError,
|
|
93
|
+
y as default
|
|
94
|
+
};
|
|
95
|
+
//# sourceMappingURL=FormColorInput.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormColorInput.stories.js","sources":["../../src/FormColorInput/FormColorInput.stories.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\nimport { FormProvider, useForm } from 'react-hook-form';\r\n\r\nimport { FormColorInput } from './FormColorInput';\r\nimport { Button } from '../Button';\r\n\r\ntype FormValues = {\r\n color: string;\r\n};\r\n\r\ntype ControlledProps = Omit<\r\n React.ComponentProps<typeof FormColorInput<FormValues>>,\r\n 'form' | 'name'\r\n> & {\r\n initialValue?: string;\r\n};\r\n\r\nfunction ControlledFormColorInput({ initialValue = '#9368FF', ...args }: ControlledProps) {\r\n const form = useForm<FormValues>({ defaultValues: { color: initialValue } });\r\n const value = form.watch('color');\r\n\r\n return (\r\n <FormProvider {...form}>\r\n <div className=\"max-w-sm space-y-3\">\r\n <FormColorInput<FormValues>\r\n form={form}\r\n name=\"color\"\r\n label=\"Колір бокової панелі\"\r\n {...args}\r\n />\r\n <div className=\"text-xs text-muted-foreground\">\r\n value: <span className=\"font-mono\">{value}</span>\r\n </div>\r\n </div>\r\n </FormProvider>\r\n );\r\n}\r\n\r\nconst meta = {\r\n title: 'FormColorInput',\r\n component: FormColorInput,\r\n parameters: { layout: 'centered' },\r\n args: {\r\n label: 'Колір',\r\n withAlpha: false,\r\n },\r\n argTypes: {\r\n form: { control: false },\r\n name: { control: false },\r\n onChange: { control: false },\r\n onBlur: { control: false },\r\n },\r\n decorators: [\r\n (Story) => (\r\n <div className=\"p-6 w-[420px]\">\r\n <Story />\r\n </div>\r\n ),\r\n ],\r\n} satisfies Meta<typeof FormColorInput>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const Default: Story = {\r\n render: (args) => <ControlledFormColorInput {...args} />,\r\n};\r\n\r\nexport const WithAlpha: Story = {\r\n args: { withAlpha: true },\r\n render: (args) => <ControlledFormColorInput {...args} initialValue=\"#9368FFcc\" />,\r\n};\r\n\r\nfunction FormColorInputWithError(args: ControlledProps) {\r\n const form = useForm<FormValues>({ defaultValues: { color: '' } });\r\n\r\n useEffect(() => {\r\n form.setError('color', { message: 'Оберіть колір' });\r\n }, []);\r\n\r\n return (\r\n <FormProvider {...form}>\r\n <div className=\"max-w-sm\">\r\n <FormColorInput<FormValues>\r\n form={form}\r\n name=\"color\"\r\n label=\"Колір\"\r\n {...args}\r\n />\r\n </div>\r\n </FormProvider>\r\n );\r\n}\r\n\r\nexport const WithError: Story = {\r\n render: (args) => <FormColorInputWithError {...args} />,\r\n};\r\n\r\n// Валідація onTouched + disabled submit (стандарт feat/1856).\r\nconst resolver = (values: FormValues) => {\r\n const errors: Record<string, { type: string; message: string }> = {};\r\n if (!values.color?.trim()) {\r\n errors.color = { type: 'required', message: 'Обовʼязкове поле' };\r\n } else if (!/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(values.color.trim())) {\r\n errors.color = { type: 'pattern', message: 'Невірний формат кольору' };\r\n }\r\n return { values: Object.keys(errors).length ? {} : values, errors };\r\n};\r\n\r\nfunction HybridForm() {\r\n const form = useForm<FormValues>({\r\n mode: 'onTouched',\r\n resolver,\r\n defaultValues: { color: '' },\r\n });\r\n const { isValid, isSubmitting } = form.formState;\r\n\r\n return (\r\n <FormProvider {...form}>\r\n <form\r\n className=\"max-w-sm space-y-4\"\r\n onSubmit={form.handleSubmit(() => alert('Збережено ✅'))}\r\n >\r\n <FormColorInput<FormValues> form={form} name=\"color\" label=\"Колір\" />\r\n <Button type=\"submit\" disabled={!isValid || isSubmitting} className=\"w-full\">\r\n Зберегти\r\n </Button>\r\n </form>\r\n </FormProvider>\r\n );\r\n}\r\n\r\nexport const HybridValidation: Story = {\r\n render: () => <HybridForm />,\r\n};\r\n"],"names":["ControlledFormColorInput","initialValue","args","form","useForm","value","FormProvider","jsxs","jsx","FormColorInput","meta","Story","Default","WithAlpha","FormColorInputWithError","useEffect","WithError","resolver","values","errors","HybridForm","isValid","isSubmitting","Button","HybridValidation"],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { FieldValues } from 'react-hook-form';
|
|
2
|
+
import { ColorInputProps } from '../ColorInput';
|
|
3
|
+
import { FormRenderControlExtendProps } from '../Form';
|
|
4
|
+
export interface FormColorInputProps<Data extends FieldValues> extends FormRenderControlExtendProps<Data>, Omit<ColorInputProps, 'value' | 'onChange' | 'form' | 'name'> {
|
|
5
|
+
}
|
|
6
|
+
//# sourceMappingURL=FormColorInput.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormColorInput.types.d.ts","sourceRoot":"","sources":["../../src/FormColorInput/FormColorInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAEvD,MAAM,WAAW,mBAAmB,CAAC,IAAI,SAAS,WAAW,CAC3D,SAAQ,4BAA4B,CAAC,IAAI,CAAC,EACxC,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;CAAG"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormColorInput.types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormColorInput/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,mBAAmB,wBAAwB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { FormControl as s } from "../Form/Form.js";
|
|
3
|
-
import { FormRenderControl as b } from "../Form/FormRenderControl.js";
|
|
4
2
|
import { Combobox as m } from "../Combobox/Combobox.js";
|
|
3
|
+
import { FormRenderControl as s } from "../Form/FormRenderControl.js";
|
|
4
|
+
import { FormControl as b } from "../Form/Form.js";
|
|
5
5
|
function x(t) {
|
|
6
6
|
const { form: i, label: p, tooltip: l, tooltipProps: C, name: a, imperativeRef: n, ...e } = t, g = t.type ?? "single";
|
|
7
7
|
return /* @__PURE__ */ r(
|
|
8
|
-
|
|
8
|
+
s,
|
|
9
9
|
{
|
|
10
10
|
form: i,
|
|
11
11
|
label: p,
|
|
12
12
|
tooltip: l,
|
|
13
13
|
tooltipProps: C,
|
|
14
14
|
name: a,
|
|
15
|
-
render: ({ field: o }) => /* @__PURE__ */ r(
|
|
15
|
+
render: ({ field: o }) => /* @__PURE__ */ r(b, { children: g === "multi" ? /* @__PURE__ */ r(
|
|
16
16
|
m,
|
|
17
17
|
{
|
|
18
18
|
...e,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormCombobox.js","sources":["../../src/FormCombobox/FormCombobox.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\nimport { Combobox, ComboboxSelectedType } from '../Combobox';\nimport {\n FormComboboxMultiProps, FormComboboxProps,\n FormComboboxSingleProps\n} from './FormCombobox.types';\nimport { FieldValues } from 'react-hook-form';\nimport { JSX } from \"react\";\n\ntype RestOmitedType<T> = Omit<T, 'form' | 'label' | 'tooltip' | 'tooltipProps' | 'name'>;\n\ntype RestPropsType<\n T extends ComboboxSelectedType,\n Data extends FieldValues,\n Node extends object = object,\n> = T extends 'single'\n ? RestOmitedType<FormComboboxSingleProps<Data, Node>>\n : RestOmitedType<FormComboboxMultiProps<Data, Node>>\n\nexport function FormCombobox<\n Data extends FieldValues,\n Node extends object = object\n>(props: FormComboboxSingleProps<Data, Node>): JSX.Element;\nexport function FormCombobox<\n Data extends FieldValues,\n Node extends object = object\n>(props: FormComboboxMultiProps<Data, Node>): JSX.Element;\n\nexport function FormCombobox<\n Data extends object = object,\n Node extends object = object\n>(\n props: FormComboboxProps<Data, Node>\n): JSX.Element {\n const { form, label, tooltip, tooltipProps, name, imperativeRef, ...rest } = props;\n const type = (props.type ?? 'single') as 'single' | 'multi';\n return (\n <FormRenderControl\n form={form}\n label={label}\n tooltip={tooltip}\n tooltipProps={tooltipProps}\n name={name}\n render={({ field }) => (\n <FormControl>\n {type === 'multi' ? (\n <Combobox<Node>\n {...(rest as RestPropsType<'multi', Data, Node>)}\n {...field}\n type=\"multi\"\n imperativeRef={imperativeRef}\n onChange={field.onChange}\n />\n ) : (\n <Combobox<Node>\n {...(rest as RestPropsType<'single', Data, Node>)}\n {...field}\n type=\"single\"\n imperativeRef={imperativeRef}\n onChange={field.onChange}\n />\n )}\n </FormControl>\n )}\n />\n );\n};\n"],"names":["FormCombobox","props","form","label","tooltip","tooltipProps","name","imperativeRef","rest","type","jsx","FormRenderControl","field","FormControl","Combobox"],"mappings":";;;;AA4BO,SAASA,EAIdC,GACa;AACb,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,cAAAC,GAAc,MAAAC,GAAM,eAAAC,GAAe,GAAGC,EAAA,IAASP,GACvEQ,IAAQR,EAAM,QAAQ;AAC5B,SACE,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,MAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAM,EAAA,MACT,gBAAAF,EAACG,GAAA,EACE,gBAAS,UACR,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,GAAIN;AAAA,UACJ,GAAGI;AAAA,UACJ,MAAK;AAAA,UACL,eAAAL;AAAA,UACA,UAAUK,EAAM;AAAA,QAAA;AAAA,MAAA,IAGlB,gBAAAF;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,GAAIN;AAAA,UACJ,GAAGI;AAAA,UACJ,MAAK;AAAA,UACL,eAAAL;AAAA,UACA,UAAUK,EAAM;AAAA,QAAA;AAAA,MAAA,EAClB,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
|
1
|
+
{"version":3,"file":"FormCombobox.js","sources":["../../src/FormCombobox/FormCombobox.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\r\nimport { Combobox, ComboboxSelectedType } from '../Combobox';\r\nimport {\r\n FormComboboxMultiProps, FormComboboxProps,\r\n FormComboboxSingleProps\r\n} from './FormCombobox.types';\r\nimport { FieldValues } from 'react-hook-form';\r\nimport { JSX } from \"react\";\r\n\r\ntype RestOmitedType<T> = Omit<T, 'form' | 'label' | 'tooltip' | 'tooltipProps' | 'name'>;\r\n\r\ntype RestPropsType<\r\n T extends ComboboxSelectedType,\r\n Data extends FieldValues,\r\n Node extends object = object,\r\n> = T extends 'single'\r\n ? RestOmitedType<FormComboboxSingleProps<Data, Node>>\r\n : RestOmitedType<FormComboboxMultiProps<Data, Node>>\r\n\r\nexport function FormCombobox<\r\n Data extends FieldValues,\r\n Node extends object = object\r\n>(props: FormComboboxSingleProps<Data, Node>): JSX.Element;\r\nexport function FormCombobox<\r\n Data extends FieldValues,\r\n Node extends object = object\r\n>(props: FormComboboxMultiProps<Data, Node>): JSX.Element;\r\n\r\nexport function FormCombobox<\r\n Data extends object = object,\r\n Node extends object = object\r\n>(\r\n props: FormComboboxProps<Data, Node>\r\n): JSX.Element {\r\n const { form, label, tooltip, tooltipProps, name, imperativeRef, ...rest } = props;\r\n const type = (props.type ?? 'single') as 'single' | 'multi';\r\n return (\r\n <FormRenderControl\r\n form={form}\r\n label={label}\r\n tooltip={tooltip}\r\n tooltipProps={tooltipProps}\r\n name={name}\r\n render={({ field }) => (\r\n <FormControl>\r\n {type === 'multi' ? (\r\n <Combobox<Node>\r\n {...(rest as RestPropsType<'multi', Data, Node>)}\r\n {...field}\r\n type=\"multi\"\r\n imperativeRef={imperativeRef}\r\n onChange={field.onChange}\r\n />\r\n ) : (\r\n <Combobox<Node>\r\n {...(rest as RestPropsType<'single', Data, Node>)}\r\n {...field}\r\n type=\"single\"\r\n imperativeRef={imperativeRef}\r\n onChange={field.onChange}\r\n />\r\n )}\r\n </FormControl>\r\n )}\r\n />\r\n );\r\n};\r\n"],"names":["FormCombobox","props","form","label","tooltip","tooltipProps","name","imperativeRef","rest","type","jsx","FormRenderControl","field","FormControl","Combobox"],"mappings":";;;;AA4BO,SAASA,EAIdC,GACa;AACb,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,cAAAC,GAAc,MAAAC,GAAM,eAAAC,GAAe,GAAGC,EAAA,IAASP,GACvEQ,IAAQR,EAAM,QAAQ;AAC5B,SACE,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,MAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAM,EAAA,MACT,gBAAAF,EAACG,GAAA,EACE,gBAAS,UACR,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,GAAIN;AAAA,UACJ,GAAGI;AAAA,UACJ,MAAK;AAAA,UACL,eAAAL;AAAA,UACA,UAAUK,EAAM;AAAA,QAAA;AAAA,MAAA,IAGlB,gBAAAF;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,GAAIN;AAAA,UACJ,GAAGI;AAAA,UACJ,MAAK;AAAA,UACL,eAAAL;AAAA,UACA,UAAUK,EAAM;AAAA,QAAA;AAAA,MAAA,EAClB,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|