@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":"ComboboxOptionItem.js","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"sourcesContent":["import { CSSProperties, PropsWithChildren } from 'react';\nimport { CommandItem } from '../Command';\nimport { DEFAULT_COMBOBOX_TYPE, IComboboxOptionsNodeProps } from './Combobox.types';\nimport { CheckIcon, ChevronRightIcon } from 'lucide-react';\nimport { cn } from '@oneplatformdev/utils';\nimport { Checkbox } from \"../Checkbox\";\nimport { ButtonIcon } from \"../ButtonIcon\";\n\nconst DEEP_OFFSET = 24;\nconst DEEP_PADDING_DELTA = 8;\nconst calcDeepSpace = (deep: number) => {\n if(!deep) return 0;\n const space = Math.max(deep - 1, 0) * DEEP_OFFSET;\n return space - DEEP_PADDING_DELTA;\n}\n\nexport const ComboboxOptionItem = <Data extends object>(\n props: PropsWithChildren<IComboboxOptionsNodeProps<Data>> & {\n onCollapseToggle?: () => void;\n expanded?: boolean;\n }\n) => {\n const {\n type = DEFAULT_COMBOBOX_TYPE,\n expanded,\n option,\n onSelect,\n value = '',\n deep = 0,\n onCollapseToggle,\n defaultNodeDisabled,\n defaultNodeMatched,\n defaultNodeMuted,\n defaultNodeInteractive,\n forcePointerSelect,\n } = props;\n\n const isSelected = Array.isArray(value)\n ? value.includes(option.value)\n : value === option.value;\n\n const handleSelect = () => {\n const interactive = typeof defaultNodeInteractive === \"function\"\n ? defaultNodeInteractive(option, deep)\n : defaultNodeInteractive ?? true;\n if (!interactive) return onCollapseToggle?.();\n onSelect?.(option);\n };\n\n return (\n <CommandItem\n key={option.value}\n value={option.value}\n data-matched={option.matched ?? true}\n onSelect={forcePointerSelect ? undefined : handleSelect}\n onPointerUp={forcePointerSelect ? handleSelect : undefined}\n onClick={(e) => {\n const interactive = typeof defaultNodeInteractive === \"function\"\n ? defaultNodeInteractive(option, deep)\n : defaultNodeInteractive ?? true\n\n if(!interactive) {\n e?.preventDefault();\n e?.stopPropagation();\n }\n }}\n className={cn('py-0 gap-0', deep && 'pl-0')}\n style={{\n '--deep-space': `${calcDeepSpace(deep)}px`,\n } as CSSProperties}\n disabled={typeof defaultNodeDisabled === \"function\"\n ? defaultNodeDisabled(option, deep)\n : defaultNodeDisabled ?? false}\n >\n {!!deep && (\n <div\n style={{ paddingLeft: 'var(--deep-space)' }}\n className='relative box-border min-w-10 h-10'\n onClick={(e) => {\n if(!onCollapseToggle) return;\n e?.preventDefault();\n e?.stopPropagation();\n onCollapseToggle?.();\n }}\n >\n <div className='w-10 aspect-square shrink-0'>\n {onCollapseToggle && (\n <ButtonIcon\n type=\"button\"\n variant=\"ghost\"\n color='secondary'\n className={cn(\n 'bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent'\n )}\n icon={(\n <ChevronRightIcon\n strokeWidth={2}\n className={cn(\n 'text-[#06080D]',\n 'transition-transform duration-200',\n expanded && 'rotate-90',\n )}\n />\n )}\n />\n )}\n </div>\n </div>\n )}\n {type === 'multi' && <Checkbox checked={isSelected} className='mr-2 shrink-0'/>}\n <span\n className={cn(\n 'overflow-hidden whitespace-wrap text-ellipsis line-clamp-2 grow',\n (() => {\n return typeof defaultNodeMatched === \"function\"\n ? defaultNodeMatched(option, deep)\n : defaultNodeMatched ?? false\n })() && 'font-bold',\n (() => {\n return typeof defaultNodeMuted === \"function\"\n ? defaultNodeMuted(option, deep)\n : defaultNodeMuted ?? false\n })() && 'opacity-60',\n (() => {\n const res = typeof defaultNodeInteractive === \"function\"\n ? defaultNodeInteractive(option, deep)\n : defaultNodeInteractive ?? true\n return !res;\n })() && 'pointer-events-none',\n )}\n >\n {option.label}\n </span>\n {type === 'single' && (\n <CheckIcon\n className={cn(\n 'ml-2 shrink-0',\n isSelected ? 'opacity-100' : 'opacity-0'\n )}\n />\n )}\n </CommandItem>\n );\n}\n"],"names":["DEEP_OFFSET","DEEP_PADDING_DELTA","calcDeepSpace","deep","ComboboxOptionItem","props","type","DEFAULT_COMBOBOX_TYPE","expanded","option","onSelect","value","onCollapseToggle","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","forcePointerSelect","isSelected","handleSelect","jsxs","CommandItem","e","cn","jsx","ButtonIcon","ChevronRightIcon","Checkbox","CheckIcon"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ComboboxOptionItem.js","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"sourcesContent":["import { CSSProperties, PropsWithChildren } from 'react';\r\nimport { CommandItem } from '../Command';\r\nimport { DEFAULT_COMBOBOX_TYPE, IComboboxOptionsNodeProps } from './Combobox.types';\r\nimport { CheckIcon, ChevronRightIcon } from 'lucide-react';\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport { Checkbox } from \"../Checkbox\";\r\nimport { ButtonIcon } from \"../ButtonIcon\";\r\n\r\nconst DEEP_OFFSET = 24;\r\nconst DEEP_PADDING_DELTA = 8;\r\nconst calcDeepSpace = (deep: number) => {\r\n if(!deep) return 0;\r\n const space = Math.max(deep - 1, 0) * DEEP_OFFSET;\r\n return space - DEEP_PADDING_DELTA;\r\n}\r\n\r\nexport const ComboboxOptionItem = <Data extends object>(\r\n props: PropsWithChildren<IComboboxOptionsNodeProps<Data>> & {\r\n onCollapseToggle?: () => void;\r\n expanded?: boolean;\r\n }\r\n) => {\r\n const {\r\n type = DEFAULT_COMBOBOX_TYPE,\r\n expanded,\r\n option,\r\n onSelect,\r\n value = '',\r\n deep = 0,\r\n onCollapseToggle,\r\n defaultNodeDisabled,\r\n defaultNodeMatched,\r\n defaultNodeMuted,\r\n defaultNodeInteractive,\r\n forcePointerSelect,\r\n } = props;\r\n\r\n const isSelected = Array.isArray(value)\r\n ? value.includes(option.value)\r\n : value === option.value;\r\n\r\n const handleSelect = () => {\r\n const interactive = typeof defaultNodeInteractive === \"function\"\r\n ? defaultNodeInteractive(option, deep)\r\n : defaultNodeInteractive ?? true;\r\n if (!interactive) return onCollapseToggle?.();\r\n onSelect?.(option);\r\n };\r\n\r\n return (\r\n <CommandItem\r\n key={option.value}\r\n value={option.value}\r\n data-matched={option.matched ?? true}\r\n onSelect={forcePointerSelect ? undefined : handleSelect}\r\n onPointerUp={forcePointerSelect ? handleSelect : undefined}\r\n onClick={(e) => {\r\n const interactive = typeof defaultNodeInteractive === \"function\"\r\n ? defaultNodeInteractive(option, deep)\r\n : defaultNodeInteractive ?? true\r\n\r\n if(!interactive) {\r\n e?.preventDefault();\r\n e?.stopPropagation();\r\n }\r\n }}\r\n className={cn('py-0 gap-0', deep && 'pl-0')}\r\n style={{\r\n '--deep-space': `${calcDeepSpace(deep)}px`,\r\n } as CSSProperties}\r\n disabled={typeof defaultNodeDisabled === \"function\"\r\n ? defaultNodeDisabled(option, deep)\r\n : defaultNodeDisabled ?? false}\r\n >\r\n {!!deep && (\r\n <div\r\n style={{ paddingLeft: 'var(--deep-space)' }}\r\n className='relative box-border min-w-10 h-10'\r\n onClick={(e) => {\r\n if(!onCollapseToggle) return;\r\n e?.preventDefault();\r\n e?.stopPropagation();\r\n onCollapseToggle?.();\r\n }}\r\n >\r\n <div className='w-10 aspect-square shrink-0'>\r\n {onCollapseToggle && (\r\n <ButtonIcon\r\n type=\"button\"\r\n variant=\"ghost\"\r\n color='secondary'\r\n className={cn(\r\n 'bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent'\r\n )}\r\n icon={(\r\n <ChevronRightIcon\r\n strokeWidth={2}\r\n className={cn(\r\n 'text-[#06080D]',\r\n 'transition-transform duration-200',\r\n expanded && 'rotate-90',\r\n )}\r\n />\r\n )}\r\n />\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {type === 'multi' && <Checkbox checked={isSelected} className='mr-2 shrink-0'/>}\r\n <span\r\n className={cn(\r\n 'overflow-hidden whitespace-wrap text-ellipsis line-clamp-2 grow',\r\n (() => {\r\n return typeof defaultNodeMatched === \"function\"\r\n ? defaultNodeMatched(option, deep)\r\n : defaultNodeMatched ?? false\r\n })() && 'font-bold',\r\n (() => {\r\n return typeof defaultNodeMuted === \"function\"\r\n ? defaultNodeMuted(option, deep)\r\n : defaultNodeMuted ?? false\r\n })() && 'opacity-60',\r\n (() => {\r\n const res = typeof defaultNodeInteractive === \"function\"\r\n ? defaultNodeInteractive(option, deep)\r\n : defaultNodeInteractive ?? true\r\n return !res;\r\n })() && 'pointer-events-none',\r\n )}\r\n >\r\n {option.label}\r\n </span>\r\n {type === 'single' && (\r\n <CheckIcon\r\n className={cn(\r\n 'ml-2 shrink-0',\r\n isSelected ? 'opacity-100' : 'opacity-0'\r\n )}\r\n />\r\n )}\r\n </CommandItem>\r\n );\r\n}\r\n"],"names":["DEEP_OFFSET","DEEP_PADDING_DELTA","calcDeepSpace","deep","ComboboxOptionItem","props","type","DEFAULT_COMBOBOX_TYPE","expanded","option","onSelect","value","onCollapseToggle","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","forcePointerSelect","isSelected","handleSelect","jsxs","CommandItem","e","cn","jsx","ButtonIcon","ChevronRightIcon","Checkbox","CheckIcon"],"mappings":"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"}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { jsx as e, jsxs as i, Fragment as v } from "react/jsx-runtime";
|
|
2
|
-
import { LoadingMask as G } from "../LoadingMask/LoadingMask.js";
|
|
3
|
-
import "../LoadingMask/RenderLoadingMask.js";
|
|
4
|
-
import { PopoverContent as H } from "../Popover/Popover.js";
|
|
5
|
-
import { Command as J, CommandInput as T, CommandList as _, CommandGroup as q, CommandEmpty as w, CommandItem as z } from "../Command/Command.js";
|
|
6
2
|
import { cn as s } from "@oneplatformdev/utils";
|
|
7
|
-
import { ComboboxRenderOptions as
|
|
8
|
-
import { useRef as
|
|
9
|
-
import { useInView as
|
|
3
|
+
import { ComboboxRenderOptions as G } from "./ComboboxRenderOptions.js";
|
|
4
|
+
import { useRef as H, useEffect as J } from "react";
|
|
5
|
+
import { useInView as T } from "react-intersection-observer";
|
|
6
|
+
import { Command as _, CommandInput as q, CommandList as z, CommandGroup as B, CommandEmpty as w, CommandItem as K } from "../Command/Command.js";
|
|
7
|
+
import { LoadingMask as Q } from "../LoadingMask/LoadingMask.js";
|
|
8
|
+
import { PopoverContent as U } from "../Popover/Popover.js";
|
|
10
9
|
import { Skeleton as W } from "../Skeleton/Skeleton.js";
|
|
11
10
|
const X = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap-0", children: Array.from({ length: t.length || 2 }).map((c, m) => /* @__PURE__ */ e(
|
|
12
11
|
"div",
|
|
@@ -15,7 +14,7 @@ const X = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap
|
|
|
15
14
|
children: /* @__PURE__ */ e("div", { className: s("flex items-center w-full", t.className), children: /* @__PURE__ */ e(W, { className: "h-4 w-full" }) })
|
|
16
15
|
},
|
|
17
16
|
m
|
|
18
|
-
)) }),
|
|
17
|
+
)) }), ae = (t) => {
|
|
19
18
|
const {
|
|
20
19
|
open: c,
|
|
21
20
|
type: m,
|
|
@@ -44,15 +43,15 @@ const X = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap
|
|
|
44
43
|
popoverContainer: E,
|
|
45
44
|
renderList: h,
|
|
46
45
|
onLoadMore: V
|
|
47
|
-
} = t, b =
|
|
46
|
+
} = t, b = H(null), { ref: j, inView: g } = T({
|
|
48
47
|
root: b.current,
|
|
49
48
|
rootMargin: "0px 0px 200px 0px",
|
|
50
49
|
threshold: 0
|
|
51
50
|
});
|
|
52
|
-
return
|
|
51
|
+
return J(() => {
|
|
53
52
|
c && g && V?.();
|
|
54
53
|
}, [g, c]), /* @__PURE__ */ e(
|
|
55
|
-
|
|
54
|
+
U,
|
|
56
55
|
{
|
|
57
56
|
className: s(
|
|
58
57
|
"w-(--radix-popper-anchor-width) max-w-none p-2",
|
|
@@ -62,9 +61,9 @@ const X = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap
|
|
|
62
61
|
align: "start",
|
|
63
62
|
collisionPadding: 8,
|
|
64
63
|
container: E,
|
|
65
|
-
children: /* @__PURE__ */ i(
|
|
64
|
+
children: /* @__PURE__ */ i(_, { shouldFilter: !1, className: "flex min-h-0 flex-1 flex-col", children: [
|
|
66
65
|
/* @__PURE__ */ e(
|
|
67
|
-
|
|
66
|
+
q,
|
|
68
67
|
{
|
|
69
68
|
placeholder: F,
|
|
70
69
|
value: u,
|
|
@@ -72,22 +71,22 @@ const X = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap
|
|
|
72
71
|
}
|
|
73
72
|
),
|
|
74
73
|
typeof p == "function" ? p(o) : p,
|
|
75
|
-
/* @__PURE__ */ e(
|
|
76
|
-
|
|
74
|
+
/* @__PURE__ */ e(z, { ref: b, className: "min-h-0 flex-1", children: /* @__PURE__ */ i(
|
|
75
|
+
B,
|
|
77
76
|
{
|
|
78
77
|
className: s(
|
|
79
78
|
!x.length && "p-0 shadow-none",
|
|
80
79
|
"px-0 py-2"
|
|
81
80
|
),
|
|
82
81
|
children: [
|
|
83
|
-
n && /* @__PURE__ */ e("div", { className: "pt-2 pb-0", children: /* @__PURE__ */ e(
|
|
82
|
+
n && /* @__PURE__ */ e("div", { className: "pt-2 pb-0", children: /* @__PURE__ */ e(Q, {}) }),
|
|
84
83
|
!n && d && /* @__PURE__ */ e(v, { children: l ? /* @__PURE__ */ i(w, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
|
|
85
84
|
/* @__PURE__ */ e("span", { children: N }),
|
|
86
85
|
typeof l == "function" ? l(o) : l
|
|
87
86
|
] }) : /* @__PURE__ */ e(w, { children: N }) }),
|
|
88
87
|
!n && !d && /* @__PURE__ */ i(v, { children: [
|
|
89
88
|
r && /* @__PURE__ */ e(
|
|
90
|
-
|
|
89
|
+
K,
|
|
91
90
|
{
|
|
92
91
|
asChild: !0,
|
|
93
92
|
className: "w-full",
|
|
@@ -97,7 +96,7 @@ const X = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap
|
|
|
97
96
|
),
|
|
98
97
|
h && h(o),
|
|
99
98
|
!h && /* @__PURE__ */ e(
|
|
100
|
-
|
|
99
|
+
G,
|
|
101
100
|
{
|
|
102
101
|
type: m,
|
|
103
102
|
search: u,
|
|
@@ -141,6 +140,6 @@ const X = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap
|
|
|
141
140
|
);
|
|
142
141
|
};
|
|
143
142
|
export {
|
|
144
|
-
|
|
143
|
+
ae as ComboboxRenderContent
|
|
145
144
|
};
|
|
146
145
|
//# sourceMappingURL=ComboboxRenderContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxRenderContent.js","sources":["../../src/Combobox/ComboboxRenderContent.tsx"],"sourcesContent":["import { LoadingMask } from '../LoadingMask';\nimport { PopoverContent } from '../Popover';\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from '../Command';\nimport { cn } from '@oneplatformdev/utils';\nimport {\n ComboboxCallbackStateParamsRenderHandler,\n ComboboxCallbackStateParamsUnion,\n ComboboxOption, ComboboxProps,\n ComboboxSelectedType, IComboboxOptionsNodeHandlersProps,\n ISlotProps,\n} from './Combobox.types';\nimport { ComboboxRenderOptions } from './ComboboxRenderOptions';\nimport { HTMLAttributes, useEffect, useRef } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport { Skeleton } from \"../Skeleton\";\n\ntype ComboboxRenderContentProps<Data extends object = object> =\n IComboboxOptionsNodeHandlersProps<Data>\n & {\n open?: boolean;\n\n type: ComboboxSelectedType,\n value: ComboboxProps<Data, 'single'>['value'] | ComboboxProps<Data, 'multi'>['value'];\n\n hasNext: boolean;\n\n loading: boolean;\n loadingMore: boolean;\n\n options: ComboboxOption<Data>[];\n search?: string;\n onSearch?: (term: string) => void;\n isEmptyList?: boolean;\n onSelect?: (option: ComboboxOption<Data>) => void;\n\n searchLabel?: string;\n emptyLabel?: string;\n\n callbackStateParams: ComboboxCallbackStateParamsUnion<Data>;\n\n commandInputAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n renderList?: ComboboxCallbackStateParamsRenderHandler<Data>;\n listHeadAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n listFooterAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n emptyAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n\n slotProps?: ISlotProps;\n\n popoverContainer?: HTMLElement | null;\n\n onLoadMore?: () => Promise<void>;\n}\n\nconst SkeletonItems = (props: HTMLAttributes<HTMLDivElement> & { length?: number }) => (\n <div className=\"flex w-full flex-col gap-0\">\n {Array.from({ length: props.length || 2 }).map((_, i) => (\n <div\n key={i}\n className='flex items-center min-h-10 w-full px-4'\n >\n <div className={cn('flex items-center w-full', props.className)}>\n <Skeleton className='h-4 w-full'/>\n </div>\n </div>\n ))}\n </div>\n);\n\n\nexport const ComboboxRenderContent = <Data extends object = object>(\n props: ComboboxRenderContentProps<Data>\n) => {\n const {\n open,\n type,\n search,\n onSearch,\n hasNext,\n loading,\n loadingMore,\n isEmptyList,\n onSelect,\n options = [],\n callbackStateParams,\n value,\n searchLabel = 'Type to search...',\n emptyLabel = 'No options',\n emptyAction,\n commandInputAction,\n listHeadAction,\n listFooterAction,\n slotProps = {},\n defaultNodeDisabled,\n defaultNodeMatched,\n defaultNodeMuted,\n defaultNodeInteractive,\n forcePointerSelect,\n popoverContainer,\n renderList,\n onLoadMore,\n } = props;\n\n const scrollRootRef = useRef<HTMLDivElement>(null);\n const { ref: sentinelRef, inView } = useInView({\n root: scrollRootRef.current,\n rootMargin: \"0px 0px 200px 0px\",\n threshold: 0,\n });\n\n useEffect(() => {\n if (!open) return;\n if (!inView) return;\n void onLoadMore?.();\n }, [ inView, open ]);\n\n return (\n <PopoverContent\n className={cn(\n \"w-(--radix-popper-anchor-width) max-w-none p-2\",\n \"flex flex-col\",\n \"max-h-(--radix-popover-content-available-height)\",\n )}\n align=\"start\"\n collisionPadding={8}\n container={popoverContainer}\n >\n <Command shouldFilter={false} className=\"flex min-h-0 flex-1 flex-col\">\n <CommandInput\n placeholder={searchLabel}\n value={search}\n onValueChange={onSearch}\n />\n {typeof commandInputAction === 'function'\n ? commandInputAction(callbackStateParams)\n : commandInputAction}\n\n <CommandList ref={scrollRootRef} className=\"min-h-0 flex-1\">\n <CommandGroup\n className={cn(\n !options.length && 'p-0 shadow-none',\n 'px-0 py-2',\n )}\n >\n {loading && (\n <div className=\"pt-2 pb-0\">\n <LoadingMask />\n </div>\n )}\n {!loading && isEmptyList && (\n <>\n {emptyAction ? (\n <CommandEmpty className=\"flex flex-col gap-3 py-5 px-3 items-center\">\n <span>{emptyLabel}</span>\n {typeof emptyAction === 'function'\n ? emptyAction(callbackStateParams)\n : emptyAction}\n </CommandEmpty>\n ) : (\n <CommandEmpty>{emptyLabel}</CommandEmpty>\n )}\n </>\n )}\n\n {!loading && !isEmptyList && (\n <>\n {listHeadAction && (\n <CommandItem\n key='combobox-list-head-action'\n asChild\n className='w-full'\n >\n {typeof listHeadAction === 'function'\n ? listHeadAction(callbackStateParams)\n : listHeadAction}\n </CommandItem>\n )}\n\n {renderList && renderList(callbackStateParams)}\n\n {!renderList && (\n <ComboboxRenderOptions\n type={type}\n search={search}\n value={value}\n options={options}\n onSelect={onSelect}\n defaultNodeDisabled={defaultNodeDisabled}\n defaultNodeMatched={defaultNodeMatched}\n defaultNodeMuted={defaultNodeMuted}\n defaultNodeInteractive={defaultNodeInteractive}\n forcePointerSelect={forcePointerSelect}/>\n )}\n\n {hasNext && <div ref={sentinelRef} className=\"h-px w-full\"/>}\n {loadingMore && <SkeletonItems />}\n </>\n )}\n\n </CommandGroup>\n </CommandList>\n\n {/*LIST FOOTER ACTION*/}\n {!loading && listFooterAction && !isEmptyList && (\n <div\n data-slot=\"command-footer-wrapper\"\n {...((() => {\n const { bordered = true, ...rest } = slotProps?.listFooterAction || {};\n return {\n ...rest,\n 'data-slot-bordered': JSON.stringify(bordered)\n }\n })())}\n className={cn(\n \"flex w-full items-center gap-2 px-0\",\n (slotProps?.listFooterAction?.bordered ?? true) && 'border-t px-0 pt-2',\n slotProps?.listFooterAction?.className,\n )}\n >\n {typeof listFooterAction === 'function'\n ? listFooterAction(callbackStateParams)\n : listFooterAction}\n </div>\n )}\n </Command>\n </PopoverContent>\n );\n}\n"],"names":["SkeletonItems","props","_","i","jsx","cn","Skeleton","ComboboxRenderContent","open","type","search","onSearch","hasNext","loading","loadingMore","isEmptyList","onSelect","options","callbackStateParams","value","searchLabel","emptyLabel","emptyAction","commandInputAction","listHeadAction","listFooterAction","slotProps","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","forcePointerSelect","popoverContainer","renderList","onLoadMore","scrollRootRef","useRef","sentinelRef","inView","useInView","useEffect","PopoverContent","jsxs","Command","CommandInput","CommandList","CommandGroup","LoadingMask","Fragment","CommandEmpty","CommandItem","ComboboxRenderOptions","bordered","rest"],"mappings":";;;;;;;;;;AA4DA,MAAMA,IAAgB,CAACC,wBACpB,OAAA,EAAI,WAAU,8BACZ,UAAA,MAAM,KAAK,EAAE,QAAQA,EAAM,UAAU,EAAA,CAAG,EAAE,IAAI,CAACC,GAAGC,MACjD,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IAEC,WAAU;AAAA,IAEV,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAWC,EAAG,4BAA4BJ,EAAM,SAAS,GAC5D,UAAA,gBAAAG,EAACE,GAAA,EAAS,WAAU,aAAA,CAAY,EAAA,CAClC;AAAA,EAAA;AAAA,EALKH;AAMP,CACD,GACH,GAIWI,KAAwB,CACnCN,MACG;AACH,QAAM;AAAA,IACJ,MAAAO;AAAA,IACA,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU,CAAA;AAAA,IACV,qBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,aAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,WAAAC,IAAY,CAAA;AAAA,IACZ,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,EAAA,IACEjC,GAEEkC,IAAgBC,EAAuB,IAAI,GAC3C,EAAE,KAAKC,GAAa,QAAAC,EAAA,IAAWC,EAAU;AAAA,IAC7C,MAAMJ,EAAc;AAAA,IACpB,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA,CACZ;AAED,SAAAK,EAAU,MAAM;AACd,IAAKhC,KACA8B,KACAJ,IAAA;AAAA,EACP,GAAG,CAAEI,GAAQ9B,CAAK,CAAC,GAGjB,gBAAAJ;AAAA,IAACqC;AAAA,IAAA;AAAA,MACC,WAAWpC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAM;AAAA,MACN,kBAAkB;AAAA,MAClB,WAAW2B;AAAA,MAEX,UAAA,gBAAAU,EAACC,GAAA,EAAQ,cAAc,IAAO,WAAU,gCACtC,UAAA;AAAA,QAAA,gBAAAvC;AAAA,UAACwC;AAAA,UAAA;AAAA,YACC,aAAaxB;AAAA,YACb,OAAOV;AAAA,YACP,eAAeC;AAAA,UAAA;AAAA,QAAA;AAAA,QAEhB,OAAOY,KAAuB,aAC3BA,EAAmBL,CAAmB,IACtCK;AAAA,QAEJ,gBAAAnB,EAACyC,GAAA,EAAY,KAAKV,GAAe,WAAU,kBACzC,UAAA,gBAAAO;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,WAAWzC;AAAA,cACT,CAACY,EAAQ,UAAU;AAAA,cACnB;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,cAAAJ,uBACE,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAT,EAAC2C,KAAY,GACf;AAAA,cAED,CAAClC,KAAWE,KACX,gBAAAX,EAAA4C,GAAA,EACG,cACC,gBAAAN,EAACO,GAAA,EAAa,WAAU,8CACtB,UAAA;AAAA,gBAAA,gBAAA7C,EAAC,UAAM,UAAAiB,EAAA,CAAW;AAAA,gBACjB,OAAOC,KAAgB,aACpBA,EAAYJ,CAAmB,IAC/BI;AAAA,cAAA,EAAA,CACN,IAEA,gBAAAlB,EAAC6C,GAAA,EAAc,UAAA5B,EAAA,CAAW,GAE9B;AAAA,cAGD,CAACR,KAAW,CAACE,KACZ,gBAAA2B,EAAAM,GAAA,EACG,UAAA;AAAA,gBAAAxB,KACC,gBAAApB;AAAA,kBAAC8C;AAAA,kBAAA;AAAA,oBAEC,SAAO;AAAA,oBACP,WAAU;AAAA,oBAET,UAAA,OAAO1B,KAAmB,aACvBA,EAAeN,CAAmB,IAClCM;AAAA,kBAAA;AAAA,kBANA;AAAA,gBAAA;AAAA,gBAUPS,KAAcA,EAAWf,CAAmB;AAAA,gBAE5C,CAACe,KACA,gBAAA7B;AAAA,kBAAC+C;AAAA,kBAAA;AAAA,oBACC,MAAA1C;AAAA,oBACA,QAAAC;AAAA,oBACA,OAAAS;AAAA,oBACA,SAAAF;AAAA,oBACA,UAAAD;AAAA,oBACA,qBAAAW;AAAA,oBACA,oBAAAC;AAAA,oBACA,kBAAAC;AAAA,oBACA,wBAAAC;AAAA,oBACA,oBAAAC;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGHnB,KAAW,gBAAAR,EAAC,OAAA,EAAI,KAAKiC,GAAa,WAAU,eAAa;AAAA,gBACzDvB,uBAAgBd,GAAA,CAAA,CAAc;AAAA,cAAA,EAAA,CACjC;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAIN;AAAA,QAGC,CAACa,KAAWY,KAAoB,CAACV,KAChC,gBAAAX;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACT,IAAK,MAAM;AACV,oBAAM,EAAE,UAAAgD,IAAW,IAAM,GAAGC,MAAS3B,GAAW,oBAAoB,CAAA;AACpE,qBAAO;AAAA,gBACL,GAAG2B;AAAA,gBACH,sBAAsB,KAAK,UAAUD,CAAQ;AAAA,cAAA;AAAA,YAEjD,GAAA;AAAA,YACA,WAAW/C;AAAA,cACT;AAAA,eACCqB,GAAW,kBAAkB,YAAY,OAAS;AAAA,cACnDA,GAAW,kBAAkB;AAAA,YAAA;AAAA,YAG9B,UAAA,OAAOD,KAAqB,aACzBA,EAAiBP,CAAmB,IACpCO;AAAA,UAAA;AAAA,QAAA;AAAA,MACN,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
1
|
+
{"version":3,"file":"ComboboxRenderContent.js","sources":["../../src/Combobox/ComboboxRenderContent.tsx"],"sourcesContent":["import { LoadingMask } from '../LoadingMask';\r\nimport { PopoverContent } from '../Popover';\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from '../Command';\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport {\r\n ComboboxCallbackStateParamsRenderHandler,\r\n ComboboxCallbackStateParamsUnion,\r\n ComboboxOption, ComboboxProps,\r\n ComboboxSelectedType, IComboboxOptionsNodeHandlersProps,\r\n ISlotProps,\r\n} from './Combobox.types';\r\nimport { ComboboxRenderOptions } from './ComboboxRenderOptions';\r\nimport { HTMLAttributes, useEffect, useRef } from \"react\";\r\nimport { useInView } from \"react-intersection-observer\";\r\nimport { Skeleton } from \"../Skeleton\";\r\n\r\ntype ComboboxRenderContentProps<Data extends object = object> =\r\n IComboboxOptionsNodeHandlersProps<Data>\r\n & {\r\n open?: boolean;\r\n\r\n type: ComboboxSelectedType,\r\n value: ComboboxProps<Data, 'single'>['value'] | ComboboxProps<Data, 'multi'>['value'];\r\n\r\n hasNext: boolean;\r\n\r\n loading: boolean;\r\n loadingMore: boolean;\r\n\r\n options: ComboboxOption<Data>[];\r\n search?: string;\r\n onSearch?: (term: string) => void;\r\n isEmptyList?: boolean;\r\n onSelect?: (option: ComboboxOption<Data>) => void;\r\n\r\n searchLabel?: string;\r\n emptyLabel?: string;\r\n\r\n callbackStateParams: ComboboxCallbackStateParamsUnion<Data>;\r\n\r\n commandInputAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n renderList?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n listHeadAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n listFooterAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n emptyAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n\r\n slotProps?: ISlotProps;\r\n\r\n popoverContainer?: HTMLElement | null;\r\n\r\n onLoadMore?: () => Promise<void>;\r\n}\r\n\r\nconst SkeletonItems = (props: HTMLAttributes<HTMLDivElement> & { length?: number }) => (\r\n <div className=\"flex w-full flex-col gap-0\">\r\n {Array.from({ length: props.length || 2 }).map((_, i) => (\r\n <div\r\n key={i}\r\n className='flex items-center min-h-10 w-full px-4'\r\n >\r\n <div className={cn('flex items-center w-full', props.className)}>\r\n <Skeleton className='h-4 w-full'/>\r\n </div>\r\n </div>\r\n ))}\r\n </div>\r\n);\r\n\r\n\r\nexport const ComboboxRenderContent = <Data extends object = object>(\r\n props: ComboboxRenderContentProps<Data>\r\n) => {\r\n const {\r\n open,\r\n type,\r\n search,\r\n onSearch,\r\n hasNext,\r\n loading,\r\n loadingMore,\r\n isEmptyList,\r\n onSelect,\r\n options = [],\r\n callbackStateParams,\r\n value,\r\n searchLabel = 'Type to search...',\r\n emptyLabel = 'No options',\r\n emptyAction,\r\n commandInputAction,\r\n listHeadAction,\r\n listFooterAction,\r\n slotProps = {},\r\n defaultNodeDisabled,\r\n defaultNodeMatched,\r\n defaultNodeMuted,\r\n defaultNodeInteractive,\r\n forcePointerSelect,\r\n popoverContainer,\r\n renderList,\r\n onLoadMore,\r\n } = props;\r\n\r\n const scrollRootRef = useRef<HTMLDivElement>(null);\r\n const { ref: sentinelRef, inView } = useInView({\r\n root: scrollRootRef.current,\r\n rootMargin: \"0px 0px 200px 0px\",\r\n threshold: 0,\r\n });\r\n\r\n useEffect(() => {\r\n if (!open) return;\r\n if (!inView) return;\r\n void onLoadMore?.();\r\n }, [ inView, open ]);\r\n\r\n return (\r\n <PopoverContent\r\n className={cn(\r\n \"w-(--radix-popper-anchor-width) max-w-none p-2\",\r\n \"flex flex-col\",\r\n \"max-h-(--radix-popover-content-available-height)\",\r\n )}\r\n align=\"start\"\r\n collisionPadding={8}\r\n container={popoverContainer}\r\n >\r\n <Command shouldFilter={false} className=\"flex min-h-0 flex-1 flex-col\">\r\n <CommandInput\r\n placeholder={searchLabel}\r\n value={search}\r\n onValueChange={onSearch}\r\n />\r\n {typeof commandInputAction === 'function'\r\n ? commandInputAction(callbackStateParams)\r\n : commandInputAction}\r\n\r\n <CommandList ref={scrollRootRef} className=\"min-h-0 flex-1\">\r\n <CommandGroup\r\n className={cn(\r\n !options.length && 'p-0 shadow-none',\r\n 'px-0 py-2',\r\n )}\r\n >\r\n {loading && (\r\n <div className=\"pt-2 pb-0\">\r\n <LoadingMask />\r\n </div>\r\n )}\r\n {!loading && isEmptyList && (\r\n <>\r\n {emptyAction ? (\r\n <CommandEmpty className=\"flex flex-col gap-3 py-5 px-3 items-center\">\r\n <span>{emptyLabel}</span>\r\n {typeof emptyAction === 'function'\r\n ? emptyAction(callbackStateParams)\r\n : emptyAction}\r\n </CommandEmpty>\r\n ) : (\r\n <CommandEmpty>{emptyLabel}</CommandEmpty>\r\n )}\r\n </>\r\n )}\r\n\r\n {!loading && !isEmptyList && (\r\n <>\r\n {listHeadAction && (\r\n <CommandItem\r\n key='combobox-list-head-action'\r\n asChild\r\n className='w-full'\r\n >\r\n {typeof listHeadAction === 'function'\r\n ? listHeadAction(callbackStateParams)\r\n : listHeadAction}\r\n </CommandItem>\r\n )}\r\n\r\n {renderList && renderList(callbackStateParams)}\r\n\r\n {!renderList && (\r\n <ComboboxRenderOptions\r\n type={type}\r\n search={search}\r\n value={value}\r\n options={options}\r\n onSelect={onSelect}\r\n defaultNodeDisabled={defaultNodeDisabled}\r\n defaultNodeMatched={defaultNodeMatched}\r\n defaultNodeMuted={defaultNodeMuted}\r\n defaultNodeInteractive={defaultNodeInteractive}\r\n forcePointerSelect={forcePointerSelect}/>\r\n )}\r\n\r\n {hasNext && <div ref={sentinelRef} className=\"h-px w-full\"/>}\r\n {loadingMore && <SkeletonItems />}\r\n </>\r\n )}\r\n\r\n </CommandGroup>\r\n </CommandList>\r\n\r\n {/*LIST FOOTER ACTION*/}\r\n {!loading && listFooterAction && !isEmptyList && (\r\n <div\r\n data-slot=\"command-footer-wrapper\"\r\n {...((() => {\r\n const { bordered = true, ...rest } = slotProps?.listFooterAction || {};\r\n return {\r\n ...rest,\r\n 'data-slot-bordered': JSON.stringify(bordered)\r\n }\r\n })())}\r\n className={cn(\r\n \"flex w-full items-center gap-2 px-0\",\r\n (slotProps?.listFooterAction?.bordered ?? true) && 'border-t px-0 pt-2',\r\n slotProps?.listFooterAction?.className,\r\n )}\r\n >\r\n {typeof listFooterAction === 'function'\r\n ? listFooterAction(callbackStateParams)\r\n : listFooterAction}\r\n </div>\r\n )}\r\n </Command>\r\n </PopoverContent>\r\n );\r\n}\r\n"],"names":["SkeletonItems","props","_","i","jsx","cn","Skeleton","ComboboxRenderContent","open","type","search","onSearch","hasNext","loading","loadingMore","isEmptyList","onSelect","options","callbackStateParams","value","searchLabel","emptyLabel","emptyAction","commandInputAction","listHeadAction","listFooterAction","slotProps","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","forcePointerSelect","popoverContainer","renderList","onLoadMore","scrollRootRef","useRef","sentinelRef","inView","useInView","useEffect","PopoverContent","jsxs","Command","CommandInput","CommandList","CommandGroup","LoadingMask","Fragment","CommandEmpty","CommandItem","ComboboxRenderOptions","bordered","rest"],"mappings":"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"}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { jsx as t, jsxs as c } from "react/jsx-runtime";
|
|
2
2
|
import { useState as f, useMemo as u } from "react";
|
|
3
|
-
import { Collapsible as b, CollapsibleContent as x } from "../Collapsible/Collapsible.js";
|
|
4
3
|
import { ComboboxOptionItem as m } from "./ComboboxOptionItem.js";
|
|
5
|
-
import { cn as
|
|
4
|
+
import { cn as b } from "@oneplatformdev/utils";
|
|
5
|
+
import { Collapsible as x, CollapsibleContent as h } from "../Collapsible/Collapsible.js";
|
|
6
6
|
const d = (n) => {
|
|
7
7
|
const { option: e, deep: l = 0, defaultNodeOpen: s, defaultNodeDisabled: o, search: p } = n, [r, i] = f(() => typeof s == "function" ? s(e, l) : s ?? (!!p || !l));
|
|
8
8
|
return e?.items?.length ? /* @__PURE__ */ c(
|
|
9
|
-
|
|
9
|
+
x,
|
|
10
10
|
{
|
|
11
11
|
open: r,
|
|
12
12
|
onOpenChange: i,
|
|
13
13
|
"data-opened": r,
|
|
14
|
-
className:
|
|
14
|
+
className: b("group/collapsible"),
|
|
15
15
|
disabled: typeof o == "function" ? o(e, l) : o ?? !1,
|
|
16
16
|
children: [
|
|
17
17
|
/* @__PURE__ */ t(
|
|
@@ -22,7 +22,7 @@ const d = (n) => {
|
|
|
22
22
|
onCollapseToggle: () => i((a) => !a)
|
|
23
23
|
}
|
|
24
24
|
),
|
|
25
|
-
/* @__PURE__ */ t(
|
|
25
|
+
/* @__PURE__ */ t(h, { children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-0", children: e?.items.map((a) => /* @__PURE__ */ t(
|
|
26
26
|
d,
|
|
27
27
|
{
|
|
28
28
|
...n,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxRenderOptions.js","sources":["../../src/Combobox/ComboboxRenderOptions.tsx"],"sourcesContent":["import {\n IComboboxOptionsNodeProps,\n IComboboxOptionsProps,\n} from './Combobox.types';\nimport { useMemo, useState } from 'react';\nimport {\n Collapsible,\n CollapsibleContent,\n} from '../Collapsible';\nimport { ComboboxOptionItem } from './ComboboxOptionItem';\nimport { cn } from '@oneplatformdev/utils';\n\nexport const ComboboxOptionsNode = <Data extends object>(props: IComboboxOptionsNodeProps<Data>) => {\n const { option, deep = 0, defaultNodeOpen, defaultNodeDisabled, search } = props;\n\n const [open, onOpenChange] = useState(() => {\n const def = !!search || !deep;\n return typeof defaultNodeOpen === \"function\"\n ? defaultNodeOpen(option, deep)\n : defaultNodeOpen ?? def\n });\n\n if (!option?.items?.length) return <ComboboxOptionItem {...props} />;\n return (\n <Collapsible\n open={open}\n onOpenChange={onOpenChange}\n data-opened={open}\n className={cn('group/collapsible')}\n disabled={typeof defaultNodeDisabled === \"function\"\n ? defaultNodeDisabled(option, deep)\n : defaultNodeDisabled ?? false}\n >\n <ComboboxOptionItem\n {...props}\n expanded={open}\n onCollapseToggle={() => onOpenChange(prev => !prev)}\n />\n\n <CollapsibleContent>\n <div className=\"flex flex-col gap-0\">\n {option?.items.map((opt) => {\n return (\n <ComboboxOptionsNode\n key={opt.value}\n {...props}\n deep={deep + 1}\n option={opt}\n />\n );\n })}\n </div>\n </CollapsibleContent>\n </Collapsible>\n );\n}\n\nexport const ComboboxRenderOptions = <Data extends object>(props: IComboboxOptionsProps<Data>) => {\n const { options = [], ...rest } = props;\n const hasTree = useMemo(() => options.some(o => o.items?.length), [options]);\n return (\n <div className=\"flex flex-col gap-0\">\n {options.map((option) => (\n <ComboboxOptionsNode\n key={option.value}\n {...rest}\n option={option}\n deep={Number(hasTree)}\n />\n ))}\n </div>\n );\n}\n"],"names":["ComboboxOptionsNode","props","option","deep","defaultNodeOpen","defaultNodeDisabled","search","open","onOpenChange","useState","jsxs","Collapsible","cn","jsx","ComboboxOptionItem","prev","CollapsibleContent","opt","ComboboxRenderOptions","options","rest","hasTree","useMemo"],"mappings":";;;;;AAYO,MAAMA,IAAsB,CAAsBC,MAA2C;AAClG,QAAM,EAAE,QAAAC,GAAQ,MAAAC,IAAO,GAAG,iBAAAC,GAAiB,qBAAAC,GAAqB,QAAAC,MAAWL,GAErE,CAACM,GAAMC,CAAY,IAAIC,EAAS,MAE7B,OAAOL,KAAoB,aAC9BA,EAAgBF,GAAQC,CAAI,IAC5BC,MAHQ,CAAC,CAACE,KAAU,CAACH,EAI1B;AAED,SAAKD,GAAQ,OAAO,SAElB,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAJ;AAAA,MACA,cAAAC;AAAA,MACA,eAAaD;AAAA,MACb,WAAWK,EAAG,mBAAmB;AAAA,MACjC,UAAU,OAAOP,KAAwB,aACrCA,EAAoBH,GAAQC,CAAI,IAChCE,KAAuB;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAQ;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGb;AAAA,YACJ,UAAUM;AAAA,YACV,kBAAkB,MAAMC,EAAa,CAAAO,MAAQ,CAACA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGpD,gBAAAF,EAACG,GAAA,EACC,UAAA,gBAAAH,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAAX,GAAQ,MAAM,IAAI,CAACe,MAEhB,gBAAAJ;AAAA,UAACb;AAAA,UAAA;AAAA,YAEE,GAAGC;AAAA,YACJ,MAAME,IAAO;AAAA,YACb,QAAQc;AAAA,UAAA;AAAA,UAHHA,EAAI;AAAA,QAAA,CAMd,GACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IA9B+B,gBAAAJ,EAACC,GAAA,EAAoB,GAAGb,GAAO;AAiCpE,GAEaiB,IAAwB,CAAsBjB,MAAuC;AAChG,QAAM,EAAE,SAAAkB,IAAU,CAAA,GAAI,GAAGC,MAASnB,GAC5BoB,IAAUC,EAAQ,MAAMH,EAAQ,KAAK,CAAA,MAAK,EAAE,OAAO,MAAM,GAAG,CAACA,CAAO,CAAC;AAC3E,2BACG,OAAA,EAAI,WAAU,uBACZ,UAAAA,EAAQ,IAAI,CAACjB,MACZ,gBAAAW;AAAA,IAACb;AAAA,IAAA;AAAA,MAEE,GAAGoB;AAAA,MACJ,QAAAlB;AAAA,MACA,MAAM,OAAOmB,CAAO;AAAA,IAAA;AAAA,IAHfnB,EAAO;AAAA,EAAA,CAKf,GACH;AAEJ;"}
|
|
1
|
+
{"version":3,"file":"ComboboxRenderOptions.js","sources":["../../src/Combobox/ComboboxRenderOptions.tsx"],"sourcesContent":["import {\r\n IComboboxOptionsNodeProps,\r\n IComboboxOptionsProps,\r\n} from './Combobox.types';\r\nimport { useMemo, useState } from 'react';\r\nimport {\r\n Collapsible,\r\n CollapsibleContent,\r\n} from '../Collapsible';\r\nimport { ComboboxOptionItem } from './ComboboxOptionItem';\r\nimport { cn } from '@oneplatformdev/utils';\r\n\r\nexport const ComboboxOptionsNode = <Data extends object>(props: IComboboxOptionsNodeProps<Data>) => {\r\n const { option, deep = 0, defaultNodeOpen, defaultNodeDisabled, search } = props;\r\n\r\n const [open, onOpenChange] = useState(() => {\r\n const def = !!search || !deep;\r\n return typeof defaultNodeOpen === \"function\"\r\n ? defaultNodeOpen(option, deep)\r\n : defaultNodeOpen ?? def\r\n });\r\n\r\n if (!option?.items?.length) return <ComboboxOptionItem {...props} />;\r\n return (\r\n <Collapsible\r\n open={open}\r\n onOpenChange={onOpenChange}\r\n data-opened={open}\r\n className={cn('group/collapsible')}\r\n disabled={typeof defaultNodeDisabled === \"function\"\r\n ? defaultNodeDisabled(option, deep)\r\n : defaultNodeDisabled ?? false}\r\n >\r\n <ComboboxOptionItem\r\n {...props}\r\n expanded={open}\r\n onCollapseToggle={() => onOpenChange(prev => !prev)}\r\n />\r\n\r\n <CollapsibleContent>\r\n <div className=\"flex flex-col gap-0\">\r\n {option?.items.map((opt) => {\r\n return (\r\n <ComboboxOptionsNode\r\n key={opt.value}\r\n {...props}\r\n deep={deep + 1}\r\n option={opt}\r\n />\r\n );\r\n })}\r\n </div>\r\n </CollapsibleContent>\r\n </Collapsible>\r\n );\r\n}\r\n\r\nexport const ComboboxRenderOptions = <Data extends object>(props: IComboboxOptionsProps<Data>) => {\r\n const { options = [], ...rest } = props;\r\n const hasTree = useMemo(() => options.some(o => o.items?.length), [options]);\r\n return (\r\n <div className=\"flex flex-col gap-0\">\r\n {options.map((option) => (\r\n <ComboboxOptionsNode\r\n key={option.value}\r\n {...rest}\r\n option={option}\r\n deep={Number(hasTree)}\r\n />\r\n ))}\r\n </div>\r\n );\r\n}\r\n"],"names":["ComboboxOptionsNode","props","option","deep","defaultNodeOpen","defaultNodeDisabled","search","open","onOpenChange","useState","jsxs","Collapsible","cn","jsx","ComboboxOptionItem","prev","CollapsibleContent","opt","ComboboxRenderOptions","options","rest","hasTree","useMemo"],"mappings":";;;;;AAYO,MAAMA,IAAsB,CAAsBC,MAA2C;AAClG,QAAM,EAAE,QAAAC,GAAQ,MAAAC,IAAO,GAAG,iBAAAC,GAAiB,qBAAAC,GAAqB,QAAAC,MAAWL,GAErE,CAACM,GAAMC,CAAY,IAAIC,EAAS,MAE7B,OAAOL,KAAoB,aAC9BA,EAAgBF,GAAQC,CAAI,IAC5BC,MAHQ,CAAC,CAACE,KAAU,CAACH,EAI1B;AAED,SAAKD,GAAQ,OAAO,SAElB,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAJ;AAAA,MACA,cAAAC;AAAA,MACA,eAAaD;AAAA,MACb,WAAWK,EAAG,mBAAmB;AAAA,MACjC,UAAU,OAAOP,KAAwB,aACrCA,EAAoBH,GAAQC,CAAI,IAChCE,KAAuB;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAQ;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGb;AAAA,YACJ,UAAUM;AAAA,YACV,kBAAkB,MAAMC,EAAa,CAAAO,MAAQ,CAACA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGpD,gBAAAF,EAACG,GAAA,EACC,UAAA,gBAAAH,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAAX,GAAQ,MAAM,IAAI,CAACe,MAEhB,gBAAAJ;AAAA,UAACb;AAAA,UAAA;AAAA,YAEE,GAAGC;AAAA,YACJ,MAAME,IAAO;AAAA,YACb,QAAQc;AAAA,UAAA;AAAA,UAHHA,EAAI;AAAA,QAAA,CAMd,GACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IA9B+B,gBAAAJ,EAACC,GAAA,EAAoB,GAAGb,GAAO;AAiCpE,GAEaiB,IAAwB,CAAsBjB,MAAuC;AAChG,QAAM,EAAE,SAAAkB,IAAU,CAAA,GAAI,GAAGC,MAASnB,GAC5BoB,IAAUC,EAAQ,MAAMH,EAAQ,KAAK,CAAA,MAAK,EAAE,OAAO,MAAM,GAAG,CAACA,CAAO,CAAC;AAC3E,2BACG,OAAA,EAAI,WAAU,uBACZ,UAAAA,EAAQ,IAAI,CAACjB,MACZ,gBAAAW;AAAA,IAACb;AAAA,IAAA;AAAA,MAEE,GAAGoB;AAAA,MACJ,QAAAlB;AAAA,MACA,MAAM,OAAOmB,CAAO;AAAA,IAAA;AAAA,IAHfnB,EAAO;AAAA,EAAA,CAKf,GACH;AAEJ;"}
|
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
import { jsx as r, jsxs as
|
|
1
|
+
import { jsx as r, jsxs as p, Fragment as h } from "react/jsx-runtime";
|
|
2
2
|
import { DEFAULT_COMBOBOX_TYPE as g } from "./Combobox.types.js";
|
|
3
|
-
import {
|
|
4
|
-
import "
|
|
3
|
+
import { cn as u } from "@oneplatformdev/utils";
|
|
4
|
+
import { XIcon as f, ChevronDown as v } from "lucide-react";
|
|
5
5
|
import { useMemo as w } from "react";
|
|
6
|
-
import {
|
|
7
|
-
import { LoadingMask as
|
|
8
|
-
import "../
|
|
9
|
-
import {
|
|
10
|
-
import { PopoverTrigger as C } from "../Popover/Popover.js";
|
|
11
|
-
import { ScrollArea as F } from "../ScrollArea/ScrollArea.js";
|
|
6
|
+
import { Button as x } from "../Button/Button.js";
|
|
7
|
+
import { LoadingMask as y } from "../LoadingMask/LoadingMask.js";
|
|
8
|
+
import { ScrollArea as C } from "../ScrollArea/ScrollArea.js";
|
|
9
|
+
import { PopoverTrigger as F } from "../Popover/Popover.js";
|
|
12
10
|
const b = (o) => {
|
|
13
11
|
const { value: n, flattenOptions: a = [], selectedOptions: t = /* @__PURE__ */ new Map() } = o;
|
|
14
12
|
return w(() => {
|
|
@@ -19,9 +17,9 @@ const b = (o) => {
|
|
|
19
17
|
}, N = (o) => {
|
|
20
18
|
const { type: n = g, placeholder: a, onSelect: t, open: c } = o, l = b(o);
|
|
21
19
|
return l.length ? n === "single" ? /* @__PURE__ */ r("span", { className: "truncate overflow-hidden whitespace-nowrap break-words line-clamp-1 pr-8", children: l[0].label }) : n === "multi" ? /* @__PURE__ */ r(
|
|
22
|
-
|
|
20
|
+
C,
|
|
23
21
|
{
|
|
24
|
-
className:
|
|
22
|
+
className: u(
|
|
25
23
|
"w-full h-auto min-h-5 max-h-20.25",
|
|
26
24
|
"overflow-y-auto overflow-x-hidden"
|
|
27
25
|
),
|
|
@@ -30,10 +28,10 @@ const b = (o) => {
|
|
|
30
28
|
className: "[&>div]:block!"
|
|
31
29
|
}
|
|
32
30
|
},
|
|
33
|
-
children: /* @__PURE__ */ r("div", { className: "p-0 gap-1 flex flex-wrap w-full pr-11", children: l.map((e) => e ? /* @__PURE__ */
|
|
31
|
+
children: /* @__PURE__ */ r("div", { className: "p-0 gap-1 flex flex-wrap w-full pr-11", children: l.map((e) => e ? /* @__PURE__ */ p(
|
|
34
32
|
"div",
|
|
35
33
|
{
|
|
36
|
-
className:
|
|
34
|
+
className: u(
|
|
37
35
|
"flex items-center justify-center",
|
|
38
36
|
"py-1 px-2 min-h-5 w-fit gap-1",
|
|
39
37
|
"bg-[#9368FF] rounded-sm",
|
|
@@ -59,7 +57,7 @@ const b = (o) => {
|
|
|
59
57
|
"div",
|
|
60
58
|
{
|
|
61
59
|
...l,
|
|
62
|
-
className:
|
|
60
|
+
className: u(
|
|
63
61
|
"absolute top-1/2 -translate-y-1/2 right-1",
|
|
64
62
|
"flex items-center justify-center",
|
|
65
63
|
"w-10 h-10 [&_svg]:size-5!",
|
|
@@ -75,8 +73,8 @@ const b = (o) => {
|
|
|
75
73
|
);
|
|
76
74
|
}, k = (o) => {
|
|
77
75
|
const { open: n, onClearSelections: a } = o, t = b(o);
|
|
78
|
-
return n ? t.length ? /* @__PURE__ */ r(m, { onClick: () => a?.(), children: /* @__PURE__ */ r(f, {}) }) : null : /* @__PURE__ */ r(m, { prevented: !1, children: /* @__PURE__ */ r(
|
|
79
|
-
},
|
|
76
|
+
return n ? t.length ? /* @__PURE__ */ r(m, { onClick: () => a?.(), children: /* @__PURE__ */ r(f, {}) }) : null : /* @__PURE__ */ r(m, { prevented: !1, children: /* @__PURE__ */ r(v, {}) });
|
|
77
|
+
}, E = (o) => {
|
|
80
78
|
const {
|
|
81
79
|
type: n,
|
|
82
80
|
open: a,
|
|
@@ -85,14 +83,14 @@ const b = (o) => {
|
|
|
85
83
|
disabled: l,
|
|
86
84
|
renderTrigger: e
|
|
87
85
|
} = o;
|
|
88
|
-
return /* @__PURE__ */ r(
|
|
89
|
-
|
|
86
|
+
return /* @__PURE__ */ r(F, { asChild: !0, className: "border-input", children: /* @__PURE__ */ p(
|
|
87
|
+
x,
|
|
90
88
|
{
|
|
91
89
|
variant: e ? "none" : "contained",
|
|
92
90
|
color: "secondary",
|
|
93
91
|
role: "combobox",
|
|
94
92
|
"aria-expanded": a,
|
|
95
|
-
className:
|
|
93
|
+
className: u(
|
|
96
94
|
"relative w-full justify-between bg-transparent",
|
|
97
95
|
!e && "font-normal text-sm",
|
|
98
96
|
"border border-border",
|
|
@@ -104,9 +102,9 @@ const b = (o) => {
|
|
|
104
102
|
),
|
|
105
103
|
disabled: l || t,
|
|
106
104
|
children: [
|
|
107
|
-
t && /* @__PURE__ */ r(
|
|
105
|
+
t && /* @__PURE__ */ r(y, { fullWidth: !0 }),
|
|
108
106
|
!t && e && e(c),
|
|
109
|
-
!t && !e && /* @__PURE__ */
|
|
107
|
+
!t && !e && /* @__PURE__ */ p(h, { children: [
|
|
110
108
|
/* @__PURE__ */ r(N, { ...o }),
|
|
111
109
|
/* @__PURE__ */ r(k, { ...o })
|
|
112
110
|
] })
|
|
@@ -115,6 +113,6 @@ const b = (o) => {
|
|
|
115
113
|
) });
|
|
116
114
|
};
|
|
117
115
|
export {
|
|
118
|
-
|
|
116
|
+
E as ComboboxRenderTrigger
|
|
119
117
|
};
|
|
120
118
|
//# sourceMappingURL=ComboboxRenderTrigger.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxRenderTrigger.js","sources":["../../src/Combobox/ComboboxRenderTrigger.tsx"],"sourcesContent":["import {\n ComboboxCallbackStateParamsRenderHandler,\n ComboboxCallbackStateParamsUnion,\n ComboboxOption,\n ComboboxProps, ComboboxSelectedType,\n DEFAULT_COMBOBOX_TYPE\n} from \"./Combobox.types\";\nimport { Button } from \"../Button\";\nimport { cn } from \"@oneplatformdev/utils\";\nimport { LoadingMask } from \"../LoadingMask\";\nimport { ChevronDown, XIcon } from \"lucide-react\";\nimport { PopoverTrigger } from \"../Popover\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { ScrollArea } from \"../ScrollArea\";\n\ntype ComboboxRenderTriggerProps<Data extends object = object> = {\n type: ComboboxSelectedType,\n value: ComboboxProps<Data, 'single'>['value'] | ComboboxProps<Data, 'multi'>['value'];\n open: boolean;\n initialLoading: boolean;\n flattenOptions: ComboboxOption<Data>[];\n selectedOptions?: Map<ComboboxOption<Data>['value'], ComboboxOption<Data>>;\n onSelect?: (option: ComboboxOption<Data>) => void;\n onClearSelections?: () => void;\n\n callbackStateParams: ComboboxCallbackStateParamsUnion<Data>;\n renderTrigger?: ComboboxCallbackStateParamsRenderHandler<Data>;\n\n placeholder?: string;\n disabled?: boolean;\n}\n\nconst useValues = <Data extends object>(\n props: ComboboxRenderTriggerProps<Data>\n): ComboboxOption<Data>[] => {\n const { value, flattenOptions = [], selectedOptions = new Map() } = props;\n return useMemo(() => {\n if (!value) return [];\n const selectedOption = Array.from(selectedOptions.values());\n const vls = Array.isArray(value) ? value : [ value ];\n const flattenedOptionValues = flattenOptions.filter(o => {\n return vls.find(v => String(v).toLowerCase() === String(o.value).toLowerCase())\n });\n\n const labels = [ ...flattenedOptionValues, ...selectedOption ]\n .reduce<Map<ComboboxOption<Data>['value'], ComboboxOption<Data>>>((acc, o) => {\n if (!o) return acc;\n if (acc.has(o.value)) return acc;\n acc.set(o.value, { ...o, label: o.label || o.value });\n return acc;\n }, new Map())\n if (!labels.size) return vls.map(v => ({ value: v, label: String(v) }));\n return Array.from(labels.values());\n }, [ value, flattenOptions, selectedOptions ])\n}\n\nconst ComboboxRenderTriggerLabel = <Data extends object = object>(\n props: ComboboxRenderTriggerProps<Data>\n) => {\n const { type = DEFAULT_COMBOBOX_TYPE, placeholder, onSelect, open } = props;\n const values = useValues(props);\n\n if (!values.length) {\n return (\n <span className=\"text-gray-400 whitespace-pre-wrap break-words line-clamp-1 pr-11\">\n {placeholder}\n </span>\n )\n }\n\n if (type === 'single') {\n return (\n <span className=\"truncate overflow-hidden whitespace-nowrap break-words line-clamp-1 pr-8\">\n {values[0].label}\n </span>\n )\n }\n\n if (type === 'multi') {\n return (\n <ScrollArea\n className={cn(\n \"w-full h-auto min-h-5 max-h-20.25\",\n 'overflow-y-auto overflow-x-hidden',\n )}\n slotProps={{\n viewport: {\n className: '[&>div]:block!',\n }\n }}\n >\n <div className=\"p-0 gap-1 flex flex-wrap w-full pr-11\">\n {values.map((item) => {\n if (!item) return null;\n return (\n <div\n key={item.value}\n className={cn(\n 'flex items-center justify-center',\n 'py-1 px-2 min-h-5 w-fit gap-1',\n 'bg-[#9368FF] rounded-sm',\n 'text-[#FCFCFC] leading-none text-xs font-semibold',\n 'cursor-pointer',\n 'truncate',\n )}\n onClick={(e) => {\n if(!open) return;\n e.preventDefault();\n e.stopPropagation();\n onSelect?.(item)\n }}\n >\n <span className='whitespace-pre-wrap wrap-break-word line-clamp-1'>\n {item.label}\n </span>\n <XIcon className='size-3! shrink-0 text-white!'/>\n </div>\n );\n })}\n </div>\n </ScrollArea>\n )\n }\n\n return 'No supported to render'\n}\n\nconst EndAdornmentWrapper = (\n props: HTMLAttributes<HTMLDivElement> & {\n prevented?: boolean;\n }\n) => {\n const { children, prevented = true, onClick, className, ...rest } = props;\n return (\n <div\n {...rest}\n className={cn(\n 'absolute top-1/2 -translate-y-1/2 right-1',\n 'flex items-center justify-center',\n 'w-10 h-10 [&_svg]:size-5!',\n 'opacity-50 cursor-pointer hover:opacity-100',\n className,\n )}\n onClick={(e) => {\n if (!prevented) return onClick?.(e);\n e.stopPropagation();\n e.preventDefault();\n onClick?.(e);\n }}\n >\n {children}\n </div>\n )\n}\nconst ComboboxRenderTriggerEndAdornment = <Data extends object = object>(\n props: ComboboxRenderTriggerProps<Data>\n) => {\n const { open, onClearSelections } = props;\n const values = useValues(props);\n\n if (!open) {\n return (\n <EndAdornmentWrapper prevented={false}>\n <ChevronDown/>\n </EndAdornmentWrapper>\n )\n }\n\n if (!values.length) return null\n\n return (\n <EndAdornmentWrapper onClick={() => onClearSelections?.()}>\n <XIcon/>\n </EndAdornmentWrapper>\n )\n}\n\nexport const ComboboxRenderTrigger = <Data extends object>(\n props: ComboboxRenderTriggerProps<Data>\n) => {\n const {\n type,\n open,\n initialLoading,\n callbackStateParams,\n disabled,\n renderTrigger,\n } = props;\n\n return (\n <PopoverTrigger asChild className=\"border-input\">\n <Button\n variant={renderTrigger ? 'none' : 'contained'}\n color='secondary'\n role=\"combobox\"\n aria-expanded={open}\n className={cn(\n 'relative w-full justify-between bg-transparent',\n !renderTrigger && 'font-normal text-sm',\n 'border border-border',\n open && 'border-1 border-[#9368FF] outline-hidden ring-0 hover:border-[#9368FF] hover:bg-transparent',\n type === 'multi' && 'pr-0',\n 'focus-visible:outline-hidden focus-visible:ring-0 focus-visible:border-[#9368FF]',\n renderTrigger && 'p-0',\n renderTrigger && open && 'p-0 border-1 ring-0 ring-transparent',\n )}\n disabled={disabled || initialLoading}\n >\n {initialLoading && <LoadingMask fullWidth/>}\n {!initialLoading && renderTrigger && renderTrigger(callbackStateParams)}\n {!initialLoading && !renderTrigger && (\n <>\n <ComboboxRenderTriggerLabel {...props} />\n <ComboboxRenderTriggerEndAdornment {...props} />\n </>\n )}\n </Button>\n </PopoverTrigger>\n )\n}\n"],"names":["useValues","props","value","flattenOptions","selectedOptions","useMemo","selectedOption","vls","labels","o","v","acc","ComboboxRenderTriggerLabel","type","DEFAULT_COMBOBOX_TYPE","placeholder","onSelect","open","values","jsx","ScrollArea","cn","item","jsxs","e","XIcon","EndAdornmentWrapper","children","prevented","onClick","className","rest","ComboboxRenderTriggerEndAdornment","onClearSelections","ChevronDown","ComboboxRenderTrigger","initialLoading","callbackStateParams","disabled","renderTrigger","PopoverTrigger","Button","LoadingMask","Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ComboboxRenderTrigger.js","sources":["../../src/Combobox/ComboboxRenderTrigger.tsx"],"sourcesContent":["import {\r\n ComboboxCallbackStateParamsRenderHandler,\r\n ComboboxCallbackStateParamsUnion,\r\n ComboboxOption,\r\n ComboboxProps, ComboboxSelectedType,\r\n DEFAULT_COMBOBOX_TYPE\r\n} from \"./Combobox.types\";\r\nimport { Button } from \"../Button\";\r\nimport { cn } from \"@oneplatformdev/utils\";\r\nimport { LoadingMask } from \"../LoadingMask\";\r\nimport { ChevronDown, XIcon } from \"lucide-react\";\r\nimport { PopoverTrigger } from \"../Popover\";\r\nimport { HTMLAttributes, useMemo } from \"react\";\r\nimport { ScrollArea } from \"../ScrollArea\";\r\n\r\ntype ComboboxRenderTriggerProps<Data extends object = object> = {\r\n type: ComboboxSelectedType,\r\n value: ComboboxProps<Data, 'single'>['value'] | ComboboxProps<Data, 'multi'>['value'];\r\n open: boolean;\r\n initialLoading: boolean;\r\n flattenOptions: ComboboxOption<Data>[];\r\n selectedOptions?: Map<ComboboxOption<Data>['value'], ComboboxOption<Data>>;\r\n onSelect?: (option: ComboboxOption<Data>) => void;\r\n onClearSelections?: () => void;\r\n\r\n callbackStateParams: ComboboxCallbackStateParamsUnion<Data>;\r\n renderTrigger?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n\r\n placeholder?: string;\r\n disabled?: boolean;\r\n}\r\n\r\nconst useValues = <Data extends object>(\r\n props: ComboboxRenderTriggerProps<Data>\r\n): ComboboxOption<Data>[] => {\r\n const { value, flattenOptions = [], selectedOptions = new Map() } = props;\r\n return useMemo(() => {\r\n if (!value) return [];\r\n const selectedOption = Array.from(selectedOptions.values());\r\n const vls = Array.isArray(value) ? value : [ value ];\r\n const flattenedOptionValues = flattenOptions.filter(o => {\r\n return vls.find(v => String(v).toLowerCase() === String(o.value).toLowerCase())\r\n });\r\n\r\n const labels = [ ...flattenedOptionValues, ...selectedOption ]\r\n .reduce<Map<ComboboxOption<Data>['value'], ComboboxOption<Data>>>((acc, o) => {\r\n if (!o) return acc;\r\n if (acc.has(o.value)) return acc;\r\n acc.set(o.value, { ...o, label: o.label || o.value });\r\n return acc;\r\n }, new Map())\r\n if (!labels.size) return vls.map(v => ({ value: v, label: String(v) }));\r\n return Array.from(labels.values());\r\n }, [ value, flattenOptions, selectedOptions ])\r\n}\r\n\r\nconst ComboboxRenderTriggerLabel = <Data extends object = object>(\r\n props: ComboboxRenderTriggerProps<Data>\r\n) => {\r\n const { type = DEFAULT_COMBOBOX_TYPE, placeholder, onSelect, open } = props;\r\n const values = useValues(props);\r\n\r\n if (!values.length) {\r\n return (\r\n <span className=\"text-gray-400 whitespace-pre-wrap break-words line-clamp-1 pr-11\">\r\n {placeholder}\r\n </span>\r\n )\r\n }\r\n\r\n if (type === 'single') {\r\n return (\r\n <span className=\"truncate overflow-hidden whitespace-nowrap break-words line-clamp-1 pr-8\">\r\n {values[0].label}\r\n </span>\r\n )\r\n }\r\n\r\n if (type === 'multi') {\r\n return (\r\n <ScrollArea\r\n className={cn(\r\n \"w-full h-auto min-h-5 max-h-20.25\",\r\n 'overflow-y-auto overflow-x-hidden',\r\n )}\r\n slotProps={{\r\n viewport: {\r\n className: '[&>div]:block!',\r\n }\r\n }}\r\n >\r\n <div className=\"p-0 gap-1 flex flex-wrap w-full pr-11\">\r\n {values.map((item) => {\r\n if (!item) return null;\r\n return (\r\n <div\r\n key={item.value}\r\n className={cn(\r\n 'flex items-center justify-center',\r\n 'py-1 px-2 min-h-5 w-fit gap-1',\r\n 'bg-[#9368FF] rounded-sm',\r\n 'text-[#FCFCFC] leading-none text-xs font-semibold',\r\n 'cursor-pointer',\r\n 'truncate',\r\n )}\r\n onClick={(e) => {\r\n if(!open) return;\r\n e.preventDefault();\r\n e.stopPropagation();\r\n onSelect?.(item)\r\n }}\r\n >\r\n <span className='whitespace-pre-wrap wrap-break-word line-clamp-1'>\r\n {item.label}\r\n </span>\r\n <XIcon className='size-3! shrink-0 text-white!'/>\r\n </div>\r\n );\r\n })}\r\n </div>\r\n </ScrollArea>\r\n )\r\n }\r\n\r\n return 'No supported to render'\r\n}\r\n\r\nconst EndAdornmentWrapper = (\r\n props: HTMLAttributes<HTMLDivElement> & {\r\n prevented?: boolean;\r\n }\r\n) => {\r\n const { children, prevented = true, onClick, className, ...rest } = props;\r\n return (\r\n <div\r\n {...rest}\r\n className={cn(\r\n 'absolute top-1/2 -translate-y-1/2 right-1',\r\n 'flex items-center justify-center',\r\n 'w-10 h-10 [&_svg]:size-5!',\r\n 'opacity-50 cursor-pointer hover:opacity-100',\r\n className,\r\n )}\r\n onClick={(e) => {\r\n if (!prevented) return onClick?.(e);\r\n e.stopPropagation();\r\n e.preventDefault();\r\n onClick?.(e);\r\n }}\r\n >\r\n {children}\r\n </div>\r\n )\r\n}\r\nconst ComboboxRenderTriggerEndAdornment = <Data extends object = object>(\r\n props: ComboboxRenderTriggerProps<Data>\r\n) => {\r\n const { open, onClearSelections } = props;\r\n const values = useValues(props);\r\n\r\n if (!open) {\r\n return (\r\n <EndAdornmentWrapper prevented={false}>\r\n <ChevronDown/>\r\n </EndAdornmentWrapper>\r\n )\r\n }\r\n\r\n if (!values.length) return null\r\n\r\n return (\r\n <EndAdornmentWrapper onClick={() => onClearSelections?.()}>\r\n <XIcon/>\r\n </EndAdornmentWrapper>\r\n )\r\n}\r\n\r\nexport const ComboboxRenderTrigger = <Data extends object>(\r\n props: ComboboxRenderTriggerProps<Data>\r\n) => {\r\n const {\r\n type,\r\n open,\r\n initialLoading,\r\n callbackStateParams,\r\n disabled,\r\n renderTrigger,\r\n } = props;\r\n\r\n return (\r\n <PopoverTrigger asChild className=\"border-input\">\r\n <Button\r\n variant={renderTrigger ? 'none' : 'contained'}\r\n color='secondary'\r\n role=\"combobox\"\r\n aria-expanded={open}\r\n className={cn(\r\n 'relative w-full justify-between bg-transparent',\r\n !renderTrigger && 'font-normal text-sm',\r\n 'border border-border',\r\n open && 'border-1 border-[#9368FF] outline-hidden ring-0 hover:border-[#9368FF] hover:bg-transparent',\r\n type === 'multi' && 'pr-0',\r\n 'focus-visible:outline-hidden focus-visible:ring-0 focus-visible:border-[#9368FF]',\r\n renderTrigger && 'p-0',\r\n renderTrigger && open && 'p-0 border-1 ring-0 ring-transparent',\r\n )}\r\n disabled={disabled || initialLoading}\r\n >\r\n {initialLoading && <LoadingMask fullWidth/>}\r\n {!initialLoading && renderTrigger && renderTrigger(callbackStateParams)}\r\n {!initialLoading && !renderTrigger && (\r\n <>\r\n <ComboboxRenderTriggerLabel {...props} />\r\n <ComboboxRenderTriggerEndAdornment {...props} />\r\n </>\r\n )}\r\n </Button>\r\n </PopoverTrigger>\r\n )\r\n}\r\n"],"names":["useValues","props","value","flattenOptions","selectedOptions","useMemo","selectedOption","vls","labels","o","v","acc","ComboboxRenderTriggerLabel","type","DEFAULT_COMBOBOX_TYPE","placeholder","onSelect","open","values","jsx","ScrollArea","cn","item","jsxs","e","XIcon","EndAdornmentWrapper","children","prevented","onClick","className","rest","ComboboxRenderTriggerEndAdornment","onClearSelections","ChevronDown","ComboboxRenderTrigger","initialLoading","callbackStateParams","disabled","renderTrigger","PopoverTrigger","Button","LoadingMask","Fragment"],"mappings":"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"}
|
package/Command/Command.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { jsx as o, jsxs as m } from "react/jsx-runtime";
|
|
2
2
|
import { Command as r } from "cmdk";
|
|
3
|
-
import { Command as
|
|
3
|
+
import { Command as P } from "cmdk";
|
|
4
4
|
import { SearchIcon as c } from "lucide-react";
|
|
5
5
|
import { cn as a } from "@oneplatformdev/utils";
|
|
6
|
-
import { Dialog as
|
|
7
|
-
import "../Dialog/DialogOverlayScope.js";
|
|
6
|
+
import { Dialog as l, DialogHeader as p, DialogTitle as u, DialogDescription as g, DialogContent as h } from "../Dialog/Dialog.js";
|
|
8
7
|
function f({
|
|
9
8
|
className: e,
|
|
10
9
|
...t
|
|
@@ -21,7 +20,7 @@ function f({
|
|
|
21
20
|
}
|
|
22
21
|
);
|
|
23
22
|
}
|
|
24
|
-
function
|
|
23
|
+
function N({
|
|
25
24
|
title: e = "Command Palette",
|
|
26
25
|
description: t = "Search for a command to run...",
|
|
27
26
|
children: n,
|
|
@@ -29,8 +28,8 @@ function C({
|
|
|
29
28
|
showCloseButton: s = !0,
|
|
30
29
|
...i
|
|
31
30
|
}) {
|
|
32
|
-
return /* @__PURE__ */ m(
|
|
33
|
-
/* @__PURE__ */ m(
|
|
31
|
+
return /* @__PURE__ */ m(l, { ...i, children: [
|
|
32
|
+
/* @__PURE__ */ m(p, { className: "sr-only", children: [
|
|
34
33
|
/* @__PURE__ */ o(u, { children: e }),
|
|
35
34
|
/* @__PURE__ */ o(g, { children: t })
|
|
36
35
|
] }),
|
|
@@ -44,7 +43,7 @@ function C({
|
|
|
44
43
|
)
|
|
45
44
|
] });
|
|
46
45
|
}
|
|
47
|
-
function
|
|
46
|
+
function C(e) {
|
|
48
47
|
const {
|
|
49
48
|
className: t,
|
|
50
49
|
slotProps: n,
|
|
@@ -85,7 +84,7 @@ function b(e) {
|
|
|
85
84
|
}
|
|
86
85
|
);
|
|
87
86
|
}
|
|
88
|
-
function
|
|
87
|
+
function b({
|
|
89
88
|
className: e,
|
|
90
89
|
...t
|
|
91
90
|
}) {
|
|
@@ -101,7 +100,7 @@ function y({
|
|
|
101
100
|
}
|
|
102
101
|
);
|
|
103
102
|
}
|
|
104
|
-
function
|
|
103
|
+
function y({
|
|
105
104
|
...e
|
|
106
105
|
}) {
|
|
107
106
|
return /* @__PURE__ */ o(
|
|
@@ -113,7 +112,7 @@ function D({
|
|
|
113
112
|
}
|
|
114
113
|
);
|
|
115
114
|
}
|
|
116
|
-
function
|
|
115
|
+
function D({
|
|
117
116
|
className: e,
|
|
118
117
|
...t
|
|
119
118
|
}) {
|
|
@@ -129,7 +128,7 @@ function E({
|
|
|
129
128
|
}
|
|
130
129
|
);
|
|
131
130
|
}
|
|
132
|
-
function
|
|
131
|
+
function E({
|
|
133
132
|
className: e,
|
|
134
133
|
...t
|
|
135
134
|
}) {
|
|
@@ -142,7 +141,7 @@ function I({
|
|
|
142
141
|
}
|
|
143
142
|
);
|
|
144
143
|
}
|
|
145
|
-
function
|
|
144
|
+
function I({
|
|
146
145
|
className: e,
|
|
147
146
|
...t
|
|
148
147
|
}) {
|
|
@@ -161,7 +160,7 @@ function S({
|
|
|
161
160
|
}
|
|
162
161
|
);
|
|
163
162
|
}
|
|
164
|
-
function
|
|
163
|
+
function S({
|
|
165
164
|
className: e,
|
|
166
165
|
...t
|
|
167
166
|
}) {
|
|
@@ -179,14 +178,14 @@ function j({
|
|
|
179
178
|
}
|
|
180
179
|
export {
|
|
181
180
|
f as Command,
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
181
|
+
N as CommandDialog,
|
|
182
|
+
y as CommandEmpty,
|
|
183
|
+
D as CommandGroup,
|
|
184
|
+
C as CommandInput,
|
|
185
|
+
I as CommandItem,
|
|
186
|
+
b as CommandList,
|
|
187
|
+
P as CommandPrimitive,
|
|
188
|
+
E as CommandSeparator,
|
|
189
|
+
S as CommandShortcut
|
|
191
190
|
};
|
|
192
191
|
//# sourceMappingURL=Command.js.map
|
package/Command/Command.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Command.js","sources":["../../src/Command/Command.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { SearchIcon } from \"lucide-react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from \"../Dialog\"\nimport { HTMLAttributes } from \"react\";\n\nfunction Command({\n className,\n ...props\n }: React.ComponentProps<typeof CommandPrimitive>) {\n return (\n <CommandPrimitive\n data-slot=\"command\"\n className={cn(\n \"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CommandDialog({\n title = \"Command Palette\",\n description = \"Search for a command to run...\",\n children,\n className,\n showCloseButton = true,\n ...props\n }: React.ComponentProps<typeof Dialog> & {\n title?: string\n description?: string\n className?: string\n showCloseButton?: boolean\n}) {\n return (\n <Dialog {...props}>\n <DialogHeader className=\"sr-only\">\n <DialogTitle>{title}</DialogTitle>\n <DialogDescription>{description}</DialogDescription>\n </DialogHeader>\n <DialogContent\n className={cn(\"overflow-hidden p-0\", className)}\n showCloseButton={showCloseButton}\n >\n <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n {children}\n </Command>\n </DialogContent>\n </Dialog>\n )\n}\n\nfunction CommandInput(\n props: React.ComponentProps<typeof CommandPrimitive.Input> & {\n slotProps?: {\n wrapper?: HTMLAttributes<HTMLDivElement>,\n }\n }\n) {\n const {\n className,\n slotProps,\n ...rest\n } = props;\n return (\n <div\n data-slot=\"command-input-wrapper\"\n {...slotProps?.wrapper}\n className={cn(\n \"flex min-h-10 items-center gap-0 border-b border-[#E8E9EB] p-0 pb-2\",\n slotProps?.wrapper?.className\n )}\n >\n <div className='flex items-center justify-center h-10 px-2'>\n <SearchIcon\n strokeWidth={1.5}\n className=\"size-6 shrink-0 text-[#666A78]\"\n />\n </div>\n <CommandPrimitive.Input\n data-slot=\"command-input\"\n className={cn(\n 'flex h-10 w-full',\n 'placeholder:text-[#666A78] text-base',\n 'bg-transparent rounded-md outline-hidden',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n className\n )}\n {...rest}\n />\n </div>\n )\n}\n\n\nfunction CommandList({\n className,\n ...props\n }: React.ComponentProps<typeof CommandPrimitive.List>) {\n return (\n <CommandPrimitive.List\n data-slot=\"command-list\"\n className={cn(\n \"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CommandEmpty({\n ...props\n }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n return (\n <CommandPrimitive.Empty\n data-slot=\"command-empty\"\n className=\"py-6 text-center text-sm\"\n {...props}\n />\n )\n}\n\nfunction CommandGroup({\n className,\n ...props\n }: React.ComponentProps<typeof CommandPrimitive.Group>) {\n return (\n <CommandPrimitive.Group\n data-slot=\"command-group\"\n className={cn(\n \"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CommandSeparator({\n className,\n ...props\n }: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n return (\n <CommandPrimitive.Separator\n data-slot=\"command-separator\"\n className={cn(\"bg-border -mx-1 h-px\", className)}\n {...props}\n />\n )\n}\n\nfunction CommandItem({\n className,\n ...props\n }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n return (\n <CommandPrimitive.Item\n data-slot=\"command-item\"\n className={cn(\n 'relative flex items-center gap-2 rounded-md px-2 py-1.5 min-h-10 text-sm',\n 'cursor-pointer select-none',\n 'outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\\'size-\\'])]:size-4',\n \"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CommandShortcut({\n className,\n ...props\n }: React.ComponentProps<\"span\">) {\n return (\n <span\n data-slot=\"command-shortcut\"\n className={cn(\n \"text-muted-foreground ml-auto text-xs tracking-widest\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandShortcut,\n CommandSeparator,\n CommandPrimitive\n}\n"],"names":["Command","className","props","jsx","CommandPrimitive","cn","CommandDialog","title","description","children","showCloseButton","jsxs","Dialog","DialogHeader","DialogTitle","DialogDescription","DialogContent","CommandInput","slotProps","rest","SearchIcon","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Command.js","sources":["../../src/Command/Command.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Command as CommandPrimitive } from \"cmdk\"\r\nimport { SearchIcon } from \"lucide-react\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\nimport {\r\n Dialog,\r\n DialogContent,\r\n DialogDescription,\r\n DialogHeader,\r\n DialogTitle,\r\n} from \"../Dialog\"\r\nimport { HTMLAttributes } from \"react\";\r\n\r\nfunction Command({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof CommandPrimitive>) {\r\n return (\r\n <CommandPrimitive\r\n data-slot=\"command\"\r\n className={cn(\r\n \"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction CommandDialog({\r\n title = \"Command Palette\",\r\n description = \"Search for a command to run...\",\r\n children,\r\n className,\r\n showCloseButton = true,\r\n ...props\r\n }: React.ComponentProps<typeof Dialog> & {\r\n title?: string\r\n description?: string\r\n className?: string\r\n showCloseButton?: boolean\r\n}) {\r\n return (\r\n <Dialog {...props}>\r\n <DialogHeader className=\"sr-only\">\r\n <DialogTitle>{title}</DialogTitle>\r\n <DialogDescription>{description}</DialogDescription>\r\n </DialogHeader>\r\n <DialogContent\r\n className={cn(\"overflow-hidden p-0\", className)}\r\n showCloseButton={showCloseButton}\r\n >\r\n <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\r\n {children}\r\n </Command>\r\n </DialogContent>\r\n </Dialog>\r\n )\r\n}\r\n\r\nfunction CommandInput(\r\n props: React.ComponentProps<typeof CommandPrimitive.Input> & {\r\n slotProps?: {\r\n wrapper?: HTMLAttributes<HTMLDivElement>,\r\n }\r\n }\r\n) {\r\n const {\r\n className,\r\n slotProps,\r\n ...rest\r\n } = props;\r\n return (\r\n <div\r\n data-slot=\"command-input-wrapper\"\r\n {...slotProps?.wrapper}\r\n className={cn(\r\n \"flex min-h-10 items-center gap-0 border-b border-[#E8E9EB] p-0 pb-2\",\r\n slotProps?.wrapper?.className\r\n )}\r\n >\r\n <div className='flex items-center justify-center h-10 px-2'>\r\n <SearchIcon\r\n strokeWidth={1.5}\r\n className=\"size-6 shrink-0 text-[#666A78]\"\r\n />\r\n </div>\r\n <CommandPrimitive.Input\r\n data-slot=\"command-input\"\r\n className={cn(\r\n 'flex h-10 w-full',\r\n 'placeholder:text-[#666A78] text-base',\r\n 'bg-transparent rounded-md outline-hidden',\r\n 'disabled:cursor-not-allowed disabled:opacity-50',\r\n className\r\n )}\r\n {...rest}\r\n />\r\n </div>\r\n )\r\n}\r\n\r\n\r\nfunction CommandList({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof CommandPrimitive.List>) {\r\n return (\r\n <CommandPrimitive.List\r\n data-slot=\"command-list\"\r\n className={cn(\r\n \"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction CommandEmpty({\r\n ...props\r\n }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\r\n return (\r\n <CommandPrimitive.Empty\r\n data-slot=\"command-empty\"\r\n className=\"py-6 text-center text-sm\"\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction CommandGroup({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof CommandPrimitive.Group>) {\r\n return (\r\n <CommandPrimitive.Group\r\n data-slot=\"command-group\"\r\n className={cn(\r\n \"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction CommandSeparator({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof CommandPrimitive.Separator>) {\r\n return (\r\n <CommandPrimitive.Separator\r\n data-slot=\"command-separator\"\r\n className={cn(\"bg-border -mx-1 h-px\", className)}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction CommandItem({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof CommandPrimitive.Item>) {\r\n return (\r\n <CommandPrimitive.Item\r\n data-slot=\"command-item\"\r\n className={cn(\r\n 'relative flex items-center gap-2 rounded-md px-2 py-1.5 min-h-10 text-sm',\r\n 'cursor-pointer select-none',\r\n 'outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\\'size-\\'])]:size-4',\r\n \"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction CommandShortcut({\r\n className,\r\n ...props\r\n }: React.ComponentProps<\"span\">) {\r\n return (\r\n <span\r\n data-slot=\"command-shortcut\"\r\n className={cn(\r\n \"text-muted-foreground ml-auto text-xs tracking-widest\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nexport {\r\n Command,\r\n CommandDialog,\r\n CommandInput,\r\n CommandList,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandItem,\r\n CommandShortcut,\r\n CommandSeparator,\r\n CommandPrimitive\r\n}\r\n"],"names":["Command","className","props","jsx","CommandPrimitive","cn","CommandDialog","title","description","children","showCloseButton","jsxs","Dialog","DialogHeader","DialogTitle","DialogDescription","DialogContent","CommandInput","slotProps","rest","SearchIcon","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextDropdownMenu.js","sources":["../../src/ContextPopover/ContextDropdownMenu.tsx"],"sourcesContent":["'use client';\n\nimport { ComponentPropsWithoutRef, forwardRef, PropsWithChildren } from \"react\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuTrigger\n} from \"../DropdownMenu\";\n\nexport interface IContextDropdownMenuProps\n\textends ComponentPropsWithoutRef<typeof DropdownMenu> {\n\tcoords: { x: number; y: number };\n}\n\nexport const ContextDropdownMenu = forwardRef<\n\tHTMLDivElement,\n\tPropsWithChildren<IContextDropdownMenuProps>\n>((props, ref) => {\n\tconst { coords, children, ...rest } = props;\n\tconst virtualTriggerRect = new DOMRect(coords.x, coords.y, 0, 0);\n\treturn (\n\t\t<DropdownMenu {...rest}>\n\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t<div\n\t\t\t\t\tref={(node) => {\n\t\t\t\t\t\tif (node) {\n\t\t\t\t\t\t\tObject.defineProperty(node, 'getBoundingClientRect', {\n\t\t\t\t\t\t\t\tvalue: () => virtualTriggerRect,\n\t\t\t\t\t\t\t\twritable: true,\n\t\t\t\t\t\t\t\tconfigurable: true,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\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</DropdownMenuTrigger>\n\t\t\t<DropdownMenuContent\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\tonCloseAutoFocus={(event) => event.preventDefault()}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</DropdownMenuContent>\n\t\t</DropdownMenu>\n\t)\n})\n\nContextDropdownMenu.displayName = 'ContextDropdownMenu'\n"],"names":["ContextDropdownMenu","forwardRef","props","ref","coords","children","rest","virtualTriggerRect","jsxs","DropdownMenu","jsx","DropdownMenuTrigger","node","DropdownMenuContent","event"],"mappings":";;;AAcO,MAAMA,IAAsBC,EAGjC,CAACC,GAAOC,MAAQ;AACjB,QAAM,EAAE,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,MAASJ,GAChCK,IAAqB,IAAI,QAAQH,EAAO,GAAGA,EAAO,GAAG,GAAG,CAAC;AAC/D,SACC,gBAAAI,EAACC,GAAA,EAAc,GAAGH,GACjB,UAAA;AAAA,IAAA,gBAAAI,EAACC,GAAA,EAAoB,SAAO,IAC3B,UAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,KAAK,CAACE,MAAS;AACd,UAAIA,KACH,OAAO,eAAeA,GAAM,yBAAyB;AAAA,YACpD,OAAO,MAAML;AAAA,YACb,UAAU;AAAA,YACV,cAAc;AAAA,UAAA,CACd;AAAA,QAEH;AAAA,QACA,WAAU;AAAA,QACV,OAAO;AAAA,UACN,MAAMH,GAAQ,KAAK;AAAA,UACnB,KAAKA,GAAQ,KAAK;AAAA,QAAA;AAAA,MACnB;AAAA,IAAA,GAEF;AAAA,IACA,gBAAAM;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,KAAAV;AAAA,QACA,WAAU;AAAA,QACV,OAAM;AAAA,QACN,YAAY;AAAA,QACZ,kBAAkB,CAACW,MAAUA,EAAM,eAAA;AAAA,QAElC,UAAAT;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACD;AAEF,CAAC;AAEDL,EAAoB,cAAc;"}
|
|
1
|
+
{"version":3,"file":"ContextDropdownMenu.js","sources":["../../src/ContextPopover/ContextDropdownMenu.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ComponentPropsWithoutRef, forwardRef, PropsWithChildren } from \"react\";\r\nimport {\r\n\tDropdownMenu,\r\n\tDropdownMenuContent,\r\n\tDropdownMenuTrigger\r\n} from \"../DropdownMenu\";\r\n\r\nexport interface IContextDropdownMenuProps\r\n\textends ComponentPropsWithoutRef<typeof DropdownMenu> {\r\n\tcoords: { x: number; y: number };\r\n}\r\n\r\nexport const ContextDropdownMenu = forwardRef<\r\n\tHTMLDivElement,\r\n\tPropsWithChildren<IContextDropdownMenuProps>\r\n>((props, ref) => {\r\n\tconst { coords, children, ...rest } = props;\r\n\tconst virtualTriggerRect = new DOMRect(coords.x, coords.y, 0, 0);\r\n\treturn (\r\n\t\t<DropdownMenu {...rest}>\r\n\t\t\t<DropdownMenuTrigger asChild>\r\n\t\t\t\t<div\r\n\t\t\t\t\tref={(node) => {\r\n\t\t\t\t\t\tif (node) {\r\n\t\t\t\t\t\t\tObject.defineProperty(node, 'getBoundingClientRect', {\r\n\t\t\t\t\t\t\t\tvalue: () => virtualTriggerRect,\r\n\t\t\t\t\t\t\t\twritable: true,\r\n\t\t\t\t\t\t\t\tconfigurable: true,\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}}\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</DropdownMenuTrigger>\r\n\t\t\t<DropdownMenuContent\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\tonCloseAutoFocus={(event) => event.preventDefault()}\r\n\t\t\t>\r\n\t\t\t\t{children}\r\n\t\t\t</DropdownMenuContent>\r\n\t\t</DropdownMenu>\r\n\t)\r\n})\r\n\r\nContextDropdownMenu.displayName = 'ContextDropdownMenu'\r\n"],"names":["ContextDropdownMenu","forwardRef","props","ref","coords","children","rest","virtualTriggerRect","jsxs","DropdownMenu","jsx","DropdownMenuTrigger","node","DropdownMenuContent","event"],"mappings":";;;AAcO,MAAMA,IAAsBC,EAGjC,CAACC,GAAOC,MAAQ;AACjB,QAAM,EAAE,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,MAASJ,GAChCK,IAAqB,IAAI,QAAQH,EAAO,GAAGA,EAAO,GAAG,GAAG,CAAC;AAC/D,SACC,gBAAAI,EAACC,GAAA,EAAc,GAAGH,GACjB,UAAA;AAAA,IAAA,gBAAAI,EAACC,GAAA,EAAoB,SAAO,IAC3B,UAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,KAAK,CAACE,MAAS;AACd,UAAIA,KACH,OAAO,eAAeA,GAAM,yBAAyB;AAAA,YACpD,OAAO,MAAML;AAAA,YACb,UAAU;AAAA,YACV,cAAc;AAAA,UAAA,CACd;AAAA,QAEH;AAAA,QACA,WAAU;AAAA,QACV,OAAO;AAAA,UACN,MAAMH,GAAQ,KAAK;AAAA,UACnB,KAAKA,GAAQ,KAAK;AAAA,QAAA;AAAA,MACnB;AAAA,IAAA,GAEF;AAAA,IACA,gBAAAM;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,KAAAV;AAAA,QACA,WAAU;AAAA,QACV,OAAM;AAAA,QACN,YAAY;AAAA,QACZ,kBAAkB,CAACW,MAAUA,EAAM,eAAA;AAAA,QAElC,UAAAT;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACD;AAEF,CAAC;AAEDL,EAAoB,cAAc;"}
|