@addsign/moje-agenda-shared-lib 2.0.65 → 2.0.66
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.
|
@@ -52,12 +52,14 @@ const MultiSelect = React.forwardRef(
|
|
|
52
52
|
}, ref) => {
|
|
53
53
|
var _a;
|
|
54
54
|
const [selectedValues, setSelectedValues] = React.useState(
|
|
55
|
-
propValue
|
|
55
|
+
Array.isArray(propValue) ? propValue : defaultValue || []
|
|
56
56
|
);
|
|
57
57
|
const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
|
|
58
58
|
React.useEffect(() => {
|
|
59
|
-
if (propValue !== void 0) {
|
|
60
|
-
setSelectedValues(propValue
|
|
59
|
+
if (propValue !== void 0 && propValue !== null && Array.isArray(propValue)) {
|
|
60
|
+
setSelectedValues(propValue || []);
|
|
61
|
+
} else {
|
|
62
|
+
setSelectedValues([]);
|
|
61
63
|
}
|
|
62
64
|
}, [propValue]);
|
|
63
65
|
const handleValueChange = (newValues) => {
|
|
@@ -89,6 +91,7 @@ const MultiSelect = React.forwardRef(
|
|
|
89
91
|
handleValueChange(allValues);
|
|
90
92
|
}
|
|
91
93
|
};
|
|
94
|
+
console.log("selectedValues", "color: #007acc;", selectedValues);
|
|
92
95
|
return /* @__PURE__ */ jsxs(
|
|
93
96
|
Popover,
|
|
94
97
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multi-select.js","sources":["../../../node_modules/lucide-react/dist/esm/icons/circle-x.js","../../../lib/components/ui/multi-select.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.456.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst CircleX = createLucideIcon(\"CircleX\", [\n [\"circle\", { cx: \"12\", cy: \"12\", r: \"10\", key: \"1mglay\" }],\n [\"path\", { d: \"m15 9-6 6\", key: \"1uzhvr\" }],\n [\"path\", { d: \"m9 9 6 6\", key: \"z0biqf\" }]\n]);\n\nexport { CircleX as default };\n//# sourceMappingURL=circle-x.js.map\n","// src/components/multi-select.tsx\r\n\r\nimport * as React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { CheckIcon, XCircle, ChevronDown, XIcon } from \"lucide-react\";\r\n\r\nimport { cn } from \"../../utils/utils\";\r\nimport { Separator } from \"./separator\";\r\nimport { Button } from \"./button\";\r\nimport { Badge } from \"./badge\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n CommandSeparator,\r\n} from \"./command\";\r\nimport { IOptionItem } from \"../../types\";\r\n\r\n/**\r\n * Variants for the multi-select component to handle different styles.\r\n * Uses class-variance-authority (cva) to define different styles based on \"variant\" prop.\r\n */\r\nconst multiSelectVariants = cva(\"m-1 transition ease-in-out delay-150 \", {\r\n variants: {\r\n variant: {\r\n default:\r\n \"border-foreground/10 text-foreground bg-card hover:bg-card/80 font-normal\",\r\n secondary:\r\n \"border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80 font-normal\",\r\n destructive:\r\n \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80 font-normal\",\r\n inverted: \"inverted\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n },\r\n});\r\n\r\n/**\r\n * Props for MultiSelect component\r\n */\r\ninterface MultiSelectProps\r\n extends Omit<\r\n React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n \"onChange\" | \"value\"\r\n >,\r\n VariantProps<typeof multiSelectVariants> {\r\n /**\r\n * An array of option objects to be displayed in the multi-select component.\r\n * Each option object has a label, value, and an optional icon.\r\n */\r\n options: IOptionItem[];\r\n\r\n /**\r\n * Callback function triggered when the selected values change.\r\n * Receives an array of the new selected values.\r\n */\r\n onChange: (value: string[]) => void;\r\n\r\n /** The controlled value of the component */\r\n value?: string[];\r\n\r\n /** The default selected values when the component mounts (uncontrolled mode) */\r\n defaultValue?: string[];\r\n\r\n /**\r\n * Placeholder text to be displayed when no values are selected.\r\n * Optional, defaults to \"Select options\".\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Placeholder text to be displayed when no values are selected.\r\n * Optional, defaults to \"Select options\".\r\n */\r\n placeholderSearch?: string;\r\n\r\n /**\r\n * Maximum number of items to display. Extra selected items will be summarized.\r\n * Optional, defaults to 3.\r\n */\r\n maxCount?: number;\r\n\r\n /**\r\n * The modality of the popover. When set to true, interaction with outside elements\r\n * will be disabled and only popover content will be visible to screen readers.\r\n * Optional, defaults to false.\r\n */\r\n modalPopover?: boolean;\r\n\r\n /**\r\n * If true, renders the multi-select component as a child of another component.\r\n * Optional, defaults to false.\r\n */\r\n asChild?: boolean;\r\n\r\n /**\r\n * Additional class names to apply custom styles to the multi-select component.\r\n * Optional, can be used to add custom styles.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * If true, the multi-select component will be disabled.\r\n * Optional, defaults to false.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * value?: string;\r\n onChange?: (value: string | undefined) => void;\r\n */\r\n}\r\n\r\nexport const MultiSelect = React.forwardRef<\r\n HTMLButtonElement,\r\n MultiSelectProps\r\n>(\r\n (\r\n {\r\n options,\r\n onChange,\r\n value: propValue,\r\n variant,\r\n defaultValue = [],\r\n placeholder = \"Vyberte možnosti\",\r\n placeholderSearch = \"Vyhledejte\",\r\n maxCount = 3,\r\n modalPopover = false,\r\n asChild = false,\r\n className,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const [selectedValues, setSelectedValues] = React.useState<string[]>(\r\n propValue ?? defaultValue ?? []\r\n );\r\n const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n\r\n // Update internal state when controlled value changes\r\n React.useEffect(() => {\r\n if (propValue !== undefined) {\r\n setSelectedValues(propValue ?? []);\r\n }\r\n }, [propValue]);\r\n\r\n const handleValueChange = (newValues: string[]) => {\r\n setSelectedValues(newValues ?? []);\r\n onChange(newValues ?? []);\r\n };\r\n\r\n const handleTogglePopover = () => {\r\n setIsPopoverOpen((prev) => !prev);\r\n };\r\n\r\n const toggleOption = (option: string | number | null) => {\r\n if (option === null) return;\r\n const optionStr = String(option);\r\n const newSelectedValues = selectedValues.includes(optionStr)\r\n ? selectedValues.filter((value) => value !== optionStr)\r\n : [...selectedValues, optionStr];\r\n handleValueChange(newSelectedValues);\r\n };\r\n\r\n const handleClear = () => {\r\n handleValueChange([]);\r\n };\r\n\r\n const clearExtraOptions = () => {\r\n const newSelectedValues = selectedValues.slice(0, maxCount);\r\n handleValueChange(newSelectedValues);\r\n };\r\n\r\n const toggleAll = () => {\r\n if (selectedValues.length === options.length) {\r\n handleClear();\r\n } else {\r\n const allValues = options.map((option) => option.value as string);\r\n handleValueChange(allValues);\r\n }\r\n };\r\n\r\n return (\r\n <Popover\r\n open={isPopoverOpen}\r\n onOpenChange={setIsPopoverOpen}\r\n modal={modalPopover}\r\n >\r\n <PopoverTrigger asChild>\r\n <Button\r\n ref={ref}\r\n {...props}\r\n onClick={handleTogglePopover}\r\n className={cn(\r\n \"flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between hover:bg-inherit [&_svg]:pointer-events-auto font-normal bg-background text-muted-foreground\",\r\n className\r\n )}\r\n >\r\n {selectedValues.length > 0 ? (\r\n <div className=\"flex justify-between items-center w-full\">\r\n <div className=\"flex flex-wrap items-center\">\r\n {maxCount === 0 && selectedValues.length == 1 && (\r\n <span className=\"px-2\">\r\n {\r\n options.find((o) => o.value === selectedValues[0])\r\n ?.label\r\n }\r\n </span>\r\n )}\r\n {maxCount === 0 && selectedValues.length > 1 && (\r\n <span className=\"px-2\">\r\n {`Více (${selectedValues.length})`}\r\n </span>\r\n )}\r\n {maxCount > 0 &&\r\n selectedValues.slice(0, maxCount).map((value) => {\r\n const option = options.find((o) => o.value === value);\r\n return (\r\n <Badge\r\n key={value}\r\n className={cn(multiSelectVariants({ variant }))}\r\n >\r\n {option?.label}\r\n <XCircle\r\n className=\"ml-2 h-4 w-4 cursor-pointer text-muted-foreground\"\r\n onClick={(event) => {\r\n event.stopPropagation();\r\n toggleOption(value);\r\n }}\r\n />\r\n </Badge>\r\n );\r\n })}\r\n\r\n {maxCount > 0 && selectedValues.length > maxCount && (\r\n <Badge\r\n className={cn(\r\n \"bg-transparent text-foreground border-foreground/1 hover:bg-transparent\",\r\n multiSelectVariants({ variant })\r\n )}\r\n >\r\n {`Více (${selectedValues.length - maxCount})`}\r\n <XCircle\r\n className=\"ml-2 h-4 w-4 cursor-pointer text-muted-foreground\"\r\n onClick={(event) => {\r\n event.stopPropagation();\r\n clearExtraOptions();\r\n }}\r\n />\r\n </Badge>\r\n )}\r\n </div>\r\n <div className=\"flex items-center justify-between\">\r\n <XIcon\r\n className=\"h-4 mx-2 cursor-pointer text-muted-foreground\"\r\n onClick={(event) => {\r\n event.stopPropagation();\r\n handleClear();\r\n }}\r\n />\r\n <Separator\r\n orientation=\"vertical\"\r\n className=\"flex min-h-6 h-full\"\r\n />\r\n <ChevronDown className=\"h-4 mx-2 cursor-pointer text-muted-foreground\" />\r\n </div>\r\n </div>\r\n ) : (\r\n <div className=\"flex items-center justify-between w-full mx-auto\">\r\n <span className=\"text-sm text-muted-foreground mx-3\">\r\n {placeholder}\r\n </span>\r\n <ChevronDown className=\"h-4 cursor-pointer text-muted-foreground mx-2\" />\r\n </div>\r\n )}\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent\r\n className=\"w-auto p-0\"\r\n align=\"start\"\r\n onEscapeKeyDown={() => setIsPopoverOpen(false)}\r\n >\r\n <Command>\r\n <CommandInput\r\n placeholder={placeholderSearch}\r\n onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (e.key === \"Enter\") {\r\n setIsPopoverOpen(true);\r\n } else if (e.key === \"Backspace\" && !e.currentTarget.value) {\r\n const newSelectedValues = [...selectedValues];\r\n newSelectedValues.pop();\r\n handleValueChange(newSelectedValues);\r\n }\r\n }}\r\n />\r\n <CommandList>\r\n <CommandEmpty>No results found.</CommandEmpty>\r\n <CommandGroup>\r\n <CommandItem\r\n key=\"all\"\r\n onSelect={toggleAll}\r\n className=\"cursor-pointer\"\r\n >\r\n <div\r\n className={cn(\r\n \"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary\",\r\n selectedValues && selectedValues.length === options.length\r\n ? \"bg-primary text-primary-foreground\"\r\n : \"opacity-50 [&_svg]:invisible\"\r\n )}\r\n >\r\n <CheckIcon className=\"h-4 w-4\" />\r\n </div>\r\n <span>(Vyberte vše)</span>\r\n </CommandItem>\r\n {options.map((option) => {\r\n const optionStr = String(option.value);\r\n const isSelected =\r\n selectedValues?.includes(optionStr) || false;\r\n return (\r\n <CommandItem\r\n key={optionStr}\r\n onSelect={() => toggleOption(option.value)}\r\n className=\"cursor-pointer\"\r\n >\r\n <div\r\n className={cn(\r\n \"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary\",\r\n isSelected\r\n ? \"bg-primary text-primary-foreground\"\r\n : \"opacity-50 [&_svg]:invisible\"\r\n )}\r\n >\r\n <CheckIcon className=\"h-4 w-4\" />\r\n </div>\r\n\r\n <span>{option.label}</span>\r\n </CommandItem>\r\n );\r\n })}\r\n </CommandGroup>\r\n <CommandSeparator />\r\n <CommandGroup>\r\n <div className=\"flex items-center justify-between\">\r\n {selectedValues.length > 0 && (\r\n <>\r\n <CommandItem\r\n onSelect={handleClear}\r\n className=\"flex-1 justify-center cursor-pointer\"\r\n >\r\n Odebrat vše\r\n </CommandItem>\r\n <Separator\r\n orientation=\"vertical\"\r\n className=\"flex min-h-6 h-full\"\r\n />\r\n </>\r\n )}\r\n <CommandItem\r\n onSelect={() => setIsPopoverOpen(false)}\r\n className=\"flex-1 justify-center cursor-pointer max-w-full\"\r\n >\r\n Zavřít\r\n </CommandItem>\r\n </div>\r\n </CommandGroup>\r\n </CommandList>\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n }\r\n);\r\n\r\nMultiSelect.displayName = \"MultiSelect\";\r\n"],"names":["XCircle","XIcon","CheckIcon"],"mappings":"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","x_google_ignoreList":[0]}
|
|
1
|
+
{"version":3,"file":"multi-select.js","sources":["../../../node_modules/lucide-react/dist/esm/icons/circle-x.js","../../../lib/components/ui/multi-select.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.456.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst CircleX = createLucideIcon(\"CircleX\", [\n [\"circle\", { cx: \"12\", cy: \"12\", r: \"10\", key: \"1mglay\" }],\n [\"path\", { d: \"m15 9-6 6\", key: \"1uzhvr\" }],\n [\"path\", { d: \"m9 9 6 6\", key: \"z0biqf\" }]\n]);\n\nexport { CircleX as default };\n//# sourceMappingURL=circle-x.js.map\n","// src/components/multi-select.tsx\r\n\r\nimport * as React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { CheckIcon, XCircle, ChevronDown, XIcon } from \"lucide-react\";\r\n\r\nimport { cn } from \"../../utils/utils\";\r\nimport { Separator } from \"./separator\";\r\nimport { Button } from \"./button\";\r\nimport { Badge } from \"./badge\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n CommandSeparator,\r\n} from \"./command\";\r\nimport { IOptionItem } from \"../../types\";\r\n\r\n/**\r\n * Variants for the multi-select component to handle different styles.\r\n * Uses class-variance-authority (cva) to define different styles based on \"variant\" prop.\r\n */\r\nconst multiSelectVariants = cva(\"m-1 transition ease-in-out delay-150 \", {\r\n variants: {\r\n variant: {\r\n default:\r\n \"border-foreground/10 text-foreground bg-card hover:bg-card/80 font-normal\",\r\n secondary:\r\n \"border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80 font-normal\",\r\n destructive:\r\n \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80 font-normal\",\r\n inverted: \"inverted\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n },\r\n});\r\n\r\n/**\r\n * Props for MultiSelect component\r\n */\r\ninterface MultiSelectProps\r\n extends Omit<\r\n React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n \"onChange\" | \"value\"\r\n >,\r\n VariantProps<typeof multiSelectVariants> {\r\n /**\r\n * An array of option objects to be displayed in the multi-select component.\r\n * Each option object has a label, value, and an optional icon.\r\n */\r\n options: IOptionItem[];\r\n\r\n /**\r\n * Callback function triggered when the selected values change.\r\n * Receives an array of the new selected values.\r\n */\r\n onChange: (value: string[]) => void;\r\n\r\n /** The controlled value of the component */\r\n value?: string[];\r\n\r\n /** The default selected values when the component mounts (uncontrolled mode) */\r\n defaultValue?: string[];\r\n\r\n /**\r\n * Placeholder text to be displayed when no values are selected.\r\n * Optional, defaults to \"Select options\".\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Placeholder text to be displayed when no values are selected.\r\n * Optional, defaults to \"Select options\".\r\n */\r\n placeholderSearch?: string;\r\n\r\n /**\r\n * Maximum number of items to display. Extra selected items will be summarized.\r\n * Optional, defaults to 3.\r\n */\r\n maxCount?: number;\r\n\r\n /**\r\n * The modality of the popover. When set to true, interaction with outside elements\r\n * will be disabled and only popover content will be visible to screen readers.\r\n * Optional, defaults to false.\r\n */\r\n modalPopover?: boolean;\r\n\r\n /**\r\n * If true, renders the multi-select component as a child of another component.\r\n * Optional, defaults to false.\r\n */\r\n asChild?: boolean;\r\n\r\n /**\r\n * Additional class names to apply custom styles to the multi-select component.\r\n * Optional, can be used to add custom styles.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * If true, the multi-select component will be disabled.\r\n * Optional, defaults to false.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * value?: string;\r\n onChange?: (value: string | undefined) => void;\r\n */\r\n}\r\n\r\nexport const MultiSelect = React.forwardRef<\r\n HTMLButtonElement,\r\n MultiSelectProps\r\n>(\r\n (\r\n {\r\n options,\r\n onChange,\r\n value: propValue,\r\n variant,\r\n defaultValue = [],\r\n placeholder = \"Vyberte možnosti\",\r\n placeholderSearch = \"Vyhledejte\",\r\n maxCount = 3,\r\n modalPopover = false,\r\n asChild = false,\r\n className,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const [selectedValues, setSelectedValues] = React.useState<string[]>(\r\n Array.isArray(propValue) ? propValue : defaultValue || []\r\n );\r\n const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n\r\n // Update internal state when controlled value changes\r\n React.useEffect(() => {\r\n if (\r\n propValue !== undefined &&\r\n propValue !== null &&\r\n Array.isArray(propValue)\r\n ) {\r\n setSelectedValues(propValue || []);\r\n } else {\r\n setSelectedValues([]);\r\n }\r\n }, [propValue]);\r\n\r\n const handleValueChange = (newValues: string[]) => {\r\n setSelectedValues(newValues ?? []);\r\n onChange(newValues ?? []);\r\n };\r\n\r\n const handleTogglePopover = () => {\r\n setIsPopoverOpen((prev) => !prev);\r\n };\r\n\r\n const toggleOption = (option: string | number | null) => {\r\n if (option === null) return;\r\n const optionStr = String(option);\r\n const newSelectedValues = selectedValues.includes(optionStr)\r\n ? selectedValues.filter((value) => value !== optionStr)\r\n : [...selectedValues, optionStr];\r\n handleValueChange(newSelectedValues);\r\n };\r\n\r\n const handleClear = () => {\r\n handleValueChange([]);\r\n };\r\n\r\n const clearExtraOptions = () => {\r\n const newSelectedValues = selectedValues.slice(0, maxCount);\r\n handleValueChange(newSelectedValues);\r\n };\r\n\r\n const toggleAll = () => {\r\n if (selectedValues.length === options.length) {\r\n handleClear();\r\n } else {\r\n const allValues = options.map((option) => option.value as string);\r\n handleValueChange(allValues);\r\n }\r\n };\r\n console.log(\"selectedValues\", \"color: #007acc;\", selectedValues);\r\n return (\r\n <Popover\r\n open={isPopoverOpen}\r\n onOpenChange={setIsPopoverOpen}\r\n modal={modalPopover}\r\n >\r\n <PopoverTrigger asChild>\r\n <Button\r\n ref={ref}\r\n {...props}\r\n onClick={handleTogglePopover}\r\n className={cn(\r\n \"flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between hover:bg-inherit [&_svg]:pointer-events-auto font-normal bg-background text-muted-foreground\",\r\n className\r\n )}\r\n >\r\n {selectedValues.length > 0 ? (\r\n <div className=\"flex justify-between items-center w-full\">\r\n <div className=\"flex flex-wrap items-center\">\r\n {maxCount === 0 && selectedValues.length == 1 && (\r\n <span className=\"px-2\">\r\n {\r\n options.find((o) => o.value === selectedValues[0])\r\n ?.label\r\n }\r\n </span>\r\n )}\r\n {maxCount === 0 && selectedValues.length > 1 && (\r\n <span className=\"px-2\">\r\n {`Více (${selectedValues.length})`}\r\n </span>\r\n )}\r\n {maxCount > 0 &&\r\n selectedValues.slice(0, maxCount).map((value) => {\r\n const option = options.find((o) => o.value === value);\r\n return (\r\n <Badge\r\n key={value}\r\n className={cn(multiSelectVariants({ variant }))}\r\n >\r\n {option?.label}\r\n <XCircle\r\n className=\"ml-2 h-4 w-4 cursor-pointer text-muted-foreground\"\r\n onClick={(event) => {\r\n event.stopPropagation();\r\n toggleOption(value);\r\n }}\r\n />\r\n </Badge>\r\n );\r\n })}\r\n\r\n {maxCount > 0 && selectedValues.length > maxCount && (\r\n <Badge\r\n className={cn(\r\n \"bg-transparent text-foreground border-foreground/1 hover:bg-transparent\",\r\n multiSelectVariants({ variant })\r\n )}\r\n >\r\n {`Více (${selectedValues.length - maxCount})`}\r\n <XCircle\r\n className=\"ml-2 h-4 w-4 cursor-pointer text-muted-foreground\"\r\n onClick={(event) => {\r\n event.stopPropagation();\r\n clearExtraOptions();\r\n }}\r\n />\r\n </Badge>\r\n )}\r\n </div>\r\n <div className=\"flex items-center justify-between\">\r\n <XIcon\r\n className=\"h-4 mx-2 cursor-pointer text-muted-foreground\"\r\n onClick={(event) => {\r\n event.stopPropagation();\r\n handleClear();\r\n }}\r\n />\r\n <Separator\r\n orientation=\"vertical\"\r\n className=\"flex min-h-6 h-full\"\r\n />\r\n <ChevronDown className=\"h-4 mx-2 cursor-pointer text-muted-foreground\" />\r\n </div>\r\n </div>\r\n ) : (\r\n <div className=\"flex items-center justify-between w-full mx-auto\">\r\n <span className=\"text-sm text-muted-foreground mx-3\">\r\n {placeholder}\r\n </span>\r\n <ChevronDown className=\"h-4 cursor-pointer text-muted-foreground mx-2\" />\r\n </div>\r\n )}\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent\r\n className=\"w-auto p-0\"\r\n align=\"start\"\r\n onEscapeKeyDown={() => setIsPopoverOpen(false)}\r\n >\r\n <Command>\r\n <CommandInput\r\n placeholder={placeholderSearch}\r\n onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (e.key === \"Enter\") {\r\n setIsPopoverOpen(true);\r\n } else if (e.key === \"Backspace\" && !e.currentTarget.value) {\r\n const newSelectedValues = [...selectedValues];\r\n newSelectedValues.pop();\r\n handleValueChange(newSelectedValues);\r\n }\r\n }}\r\n />\r\n <CommandList>\r\n <CommandEmpty>No results found.</CommandEmpty>\r\n <CommandGroup>\r\n <CommandItem\r\n key=\"all\"\r\n onSelect={toggleAll}\r\n className=\"cursor-pointer\"\r\n >\r\n <div\r\n className={cn(\r\n \"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary\",\r\n selectedValues && selectedValues.length === options.length\r\n ? \"bg-primary text-primary-foreground\"\r\n : \"opacity-50 [&_svg]:invisible\"\r\n )}\r\n >\r\n <CheckIcon className=\"h-4 w-4\" />\r\n </div>\r\n <span>(Vyberte vše)</span>\r\n </CommandItem>\r\n {options.map((option) => {\r\n const optionStr = String(option.value);\r\n const isSelected =\r\n selectedValues?.includes(optionStr) || false;\r\n return (\r\n <CommandItem\r\n key={optionStr}\r\n onSelect={() => toggleOption(option.value)}\r\n className=\"cursor-pointer\"\r\n >\r\n <div\r\n className={cn(\r\n \"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary\",\r\n isSelected\r\n ? \"bg-primary text-primary-foreground\"\r\n : \"opacity-50 [&_svg]:invisible\"\r\n )}\r\n >\r\n <CheckIcon className=\"h-4 w-4\" />\r\n </div>\r\n\r\n <span>{option.label}</span>\r\n </CommandItem>\r\n );\r\n })}\r\n </CommandGroup>\r\n <CommandSeparator />\r\n <CommandGroup>\r\n <div className=\"flex items-center justify-between\">\r\n {selectedValues.length > 0 && (\r\n <>\r\n <CommandItem\r\n onSelect={handleClear}\r\n className=\"flex-1 justify-center cursor-pointer\"\r\n >\r\n Odebrat vše\r\n </CommandItem>\r\n <Separator\r\n orientation=\"vertical\"\r\n className=\"flex min-h-6 h-full\"\r\n />\r\n </>\r\n )}\r\n <CommandItem\r\n onSelect={() => setIsPopoverOpen(false)}\r\n className=\"flex-1 justify-center cursor-pointer max-w-full\"\r\n >\r\n Zavřít\r\n </CommandItem>\r\n </div>\r\n </CommandGroup>\r\n </CommandList>\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n }\r\n);\r\n\r\nMultiSelect.displayName = \"MultiSelect\";\r\n"],"names":["XCircle","XIcon","CheckIcon"],"mappings":"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","x_google_ignoreList":[0]}
|
|
@@ -139,14 +139,20 @@ export const MultiSelect = React.forwardRef<
|
|
|
139
139
|
ref
|
|
140
140
|
) => {
|
|
141
141
|
const [selectedValues, setSelectedValues] = React.useState<string[]>(
|
|
142
|
-
propValue
|
|
142
|
+
Array.isArray(propValue) ? propValue : defaultValue || []
|
|
143
143
|
);
|
|
144
144
|
const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
|
|
145
145
|
|
|
146
146
|
// Update internal state when controlled value changes
|
|
147
147
|
React.useEffect(() => {
|
|
148
|
-
if (
|
|
149
|
-
|
|
148
|
+
if (
|
|
149
|
+
propValue !== undefined &&
|
|
150
|
+
propValue !== null &&
|
|
151
|
+
Array.isArray(propValue)
|
|
152
|
+
) {
|
|
153
|
+
setSelectedValues(propValue || []);
|
|
154
|
+
} else {
|
|
155
|
+
setSelectedValues([]);
|
|
150
156
|
}
|
|
151
157
|
}, [propValue]);
|
|
152
158
|
|
|
@@ -185,7 +191,7 @@ export const MultiSelect = React.forwardRef<
|
|
|
185
191
|
handleValueChange(allValues);
|
|
186
192
|
}
|
|
187
193
|
};
|
|
188
|
-
|
|
194
|
+
console.log("selectedValues", "color: #007acc;", selectedValues);
|
|
189
195
|
return (
|
|
190
196
|
<Popover
|
|
191
197
|
open={isPopoverOpen}
|