@addsign/moje-agenda-shared-lib 2.0.45 → 2.0.47
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/dist/components/datatable/DataTableServer.js +263 -242
- package/dist/components/datatable/DataTableServer.js.map +1 -1
- package/dist/components/datatable/DatatableSettings.js +3 -0
- package/dist/components/datatable/DatatableSettings.js.map +1 -1
- package/dist/components/form/InputField.js.map +1 -1
- package/dist/components/ui/multi-select.js +6 -3
- package/dist/components/ui/multi-select.js.map +1 -1
- package/lib/components/datatable/DataTableServer.tsx +17 -4
- package/lib/components/datatable/DatatableSettings.tsx +3 -0
- package/lib/components/form/InputField.tsx +1 -0
- package/lib/components/ui/multi-select.tsx +35 -20
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputField.js","sources":["../../../lib/components/form/InputField.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { IFormFieldGlobalProps } from \"../../types\";\r\nimport { MdClose } from \"react-icons/md\";\r\nimport { useClickAway } from \"react-use\";\r\nimport { FaSpinner } from \"react-icons/fa\";\r\nimport SpinnerIcon from \"../SpinnerIcon\";\r\n\r\nexport interface IInputFieldProps extends IFormFieldGlobalProps {\r\n maxLength?: number;\r\n debounceTimeout?: number;\r\n manualRef?: React.RefObject<HTMLInputElement>;\r\n disableAutocomplete?: boolean;\r\n}\r\n\r\nexport default function InputField({\r\n label,\r\n name,\r\n value,\r\n description,\r\n onInputChange,\r\n placeholder,\r\n className,\r\n register,\r\n type,\r\n disabled,\r\n maxLength,\r\n errors = {},\r\n rounded = true,\r\n debounceTimeout,\r\n required,\r\n onFocus = () => {},\r\n onBlur = () => {},\r\n children,\r\n disableAutocomplete,\r\n}: IInputFieldProps) {\r\n const wrapperRef = React.useRef(null);\r\n const [isFocused, setIsFocused] = React.useState(false);\r\n const [inputValue, setInputValue] = React.useState(value || \"\"); // Local state for input value\r\n const debounceTimeoutRef = React.useRef<NodeJS.Timeout | null>(null); // Ref to hold the debounce timeout\r\n const [inputIsChanging, setInputIsChanging] = React.useState(false);\r\n\r\n React.useEffect(() => {\r\n setInputValue(value || \"\");\r\n }, [value]);\r\n const handleClear = (e: any) => {\r\n setInputValue(\"\"); // Clear local state\r\n onInputChange({\r\n ...e,\r\n target: {\r\n value: \"\",\r\n name: name,\r\n },\r\n });\r\n };\r\n const fallbackRef = React.useRef(null);\r\n const {\r\n ref: registeredRef = fallbackRef,\r\n onBlur: formOnBlur = () => {} /* default function */,\r\n ...rest\r\n } = register ? register(name) : {};\r\n\r\n const ref = registeredRef || fallbackRef;\r\n const handleSetFocus = () => {\r\n setIsFocused(true);\r\n ref?.current?.focus();\r\n };\r\n useClickAway(wrapperRef, () => {\r\n if (isFocused) {\r\n setIsFocused(false);\r\n }\r\n });\r\n\r\n const handleDebouncedChange = React.useCallback(\r\n (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n const { value } = e.target;\r\n setInputValue(value); // Update local state\r\n setInputIsChanging(true);\r\n\r\n if (debounceTimeout) {\r\n // Clear any previous debounce timeout\r\n if (debounceTimeoutRef.current)\r\n clearTimeout(debounceTimeoutRef.current);\r\n\r\n // Set a new debounce timeout\r\n debounceTimeoutRef.current = setTimeout(() => {\r\n onInputChange(e);\r\n setInputIsChanging(false);\r\n }, debounceTimeout);\r\n } else {\r\n onInputChange(e);\r\n setInputIsChanging(false);\r\n }\r\n },\r\n [debounceTimeout, debounceTimeoutRef, onInputChange, setInputValue]\r\n );\r\n\r\n const handleBlur = (\r\n e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>\r\n ) => {\r\n formOnBlur(e); // Call React Hook Form's onBlur\r\n setIsFocused(false); // Then call your custom onBlur logic\r\n\r\n if (debounceTimeoutRef.current && inputIsChanging) {\r\n clearTimeout(debounceTimeoutRef.current);\r\n onInputChange(e);\r\n setInputIsChanging(false);\r\n }\r\n };\r\n\r\n const renderInput = () => {\r\n switch (type) {\r\n case \"textarea\":\r\n return (\r\n <textarea\r\n id={name}\r\n name={name}\r\n className=\"grow shrink basis-0 text-muted-foreground text-sm font-normal leading-tight focus:border-none outline-none shadow-none\r\n bg-white \"\r\n disabled={disabled}\r\n value={inputValue}\r\n rows={3}\r\n {...rest} // Spread the rest of register's return value\r\n // ref={ref}\r\n onChange={(e) => handleDebouncedChange(e)}\r\n onFocus={() => {\r\n setIsFocused(true);\r\n onFocus();\r\n }}\r\n onBlur={(e) => {\r\n handleBlur(e);\r\n onBlur();\r\n }}\r\n maxLength={maxLength || 4000}\r\n />\r\n );\r\n default:\r\n return (\r\n <>\r\n <input\r\n className={`text-muted-foreground text-sm font-normal leading-normal outline-none shadow-none \r\n placeholder-muted-foreground\r\n text-ellipsis overflow-hidden w-full disabled:cursor-not-allowed bg-white`}\r\n id={name}\r\n name={name}\r\n disabled={disabled}\r\n type={type}\r\n {...rest}\r\n // ref={ref}\r\n value={inputValue} // Controlled value\r\n placeholder={placeholder}\r\n onChange={(e) => handleDebouncedChange(e)}\r\n onFocus={() => {\r\n setIsFocused(true);\r\n onFocus();\r\n }}\r\n onBlur={(e) => {\r\n handleBlur(e);\r\n onBlur();\r\n }}\r\n autoComplete={disableAutocomplete ? \"off\" : \"on\"}\r\n />\r\n </>\r\n );\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n <div\r\n className={\r\n \"min-h-30 flex-col justify-start items-start gap-1.5 w-full relative \" +\r\n className\r\n }\r\n ref={wrapperRef}\r\n id=\"component\"\r\n >\r\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex\">\r\n {label && (\r\n <div className=\"text-slate-700 text-sm font-medium leading-tight\">\r\n {label} {required ? \"*\" : \"\"}\r\n </div>\r\n )}\r\n <div\r\n className={`self-stretch w-full pl-3 pr-2 py-1 border justify-between items-center gap-0 inline-flex outline-none bg-white\r\n ${isFocused ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 \" : \"\"}\r\n ${rounded ? \" rounded-lg \" : \" rounded-none \"}\r\n ${disabled ? \" !opacity-80 cursor-not-allowed \" : \"\"}`}\r\n onClick={handleSetFocus}\r\n >\r\n <div className=\"flex-grow basis-0 min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] \">\r\n {renderInput()}\r\n </div>\r\n <div className=\"items-center content-center flex-shrink flex\">\r\n {inputIsChanging === true && (\r\n <div className=\"w-6 h-6 relative flex items-center justify-center align-middle\">\r\n <SpinnerIcon icon={<FaSpinner />} />\r\n </div>\r\n )}\r\n {value && !disabled && (\r\n <div\r\n className=\"w-6 h-6 relative flex cursor-pointer items-center justify-center align-middle hover:bg-gray-100 rounded-full text-lg\"\r\n onClick={handleClear}\r\n id={name + \":clear\"}\r\n >\r\n <MdClose />\r\n </div>\r\n )}\r\n {children}\r\n </div>\r\n </div>\r\n </div>\r\n {description && !isFocused && (\r\n <div\r\n className=\"self-stretch text-slate-600 text-sm font-normal leading-tight\"\r\n id={name + \":description\"}\r\n >\r\n {description}\r\n </div>\r\n )}{\" \"}\r\n {errors[name] && (\r\n <div\r\n className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight mt-1\"\r\n id={name + \":error\"}\r\n >\r\n {errors[name]?.message}\r\n </div>\r\n )}\r\n </div>\r\n </>\r\n );\r\n}\r\n"],"names":["_a","value"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"InputField.js","sources":["../../../lib/components/form/InputField.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { IFormFieldGlobalProps } from \"../../types\";\r\nimport { MdClose } from \"react-icons/md\";\r\nimport { useClickAway } from \"react-use\";\r\nimport { FaSpinner } from \"react-icons/fa\";\r\nimport SpinnerIcon from \"../SpinnerIcon\";\r\n\r\nexport interface IInputFieldProps extends IFormFieldGlobalProps {\r\n maxLength?: number;\r\n debounceTimeout?: number;\r\n manualRef?: React.RefObject<HTMLInputElement>;\r\n disableAutocomplete?: boolean;\r\n}\r\n\r\nexport default function InputField({\r\n label,\r\n name,\r\n value,\r\n description,\r\n onInputChange,\r\n placeholder,\r\n className,\r\n register,\r\n type,\r\n disabled,\r\n maxLength,\r\n errors = {},\r\n rounded = true,\r\n debounceTimeout,\r\n required,\r\n onFocus = () => {},\r\n onBlur = () => {},\r\n children,\r\n disableAutocomplete,\r\n}: IInputFieldProps) {\r\n const wrapperRef = React.useRef(null);\r\n const [isFocused, setIsFocused] = React.useState(false);\r\n const [inputValue, setInputValue] = React.useState(value || \"\"); // Local state for input value\r\n const debounceTimeoutRef = React.useRef<NodeJS.Timeout | null>(null); // Ref to hold the debounce timeout\r\n const [inputIsChanging, setInputIsChanging] = React.useState(false);\r\n\r\n React.useEffect(() => {\r\n setInputValue(value || \"\");\r\n }, [value]);\r\n const handleClear = (e: any) => {\r\n setInputValue(\"\"); // Clear local state\r\n onInputChange({\r\n ...e,\r\n target: {\r\n value: \"\",\r\n name: name,\r\n },\r\n });\r\n };\r\n const fallbackRef = React.useRef(null);\r\n const {\r\n ref: registeredRef = fallbackRef,\r\n onBlur: formOnBlur = () => {} /* default function */,\r\n ...rest\r\n } = register ? register(name) : {};\r\n\r\n const ref = registeredRef || fallbackRef;\r\n const handleSetFocus = () => {\r\n setIsFocused(true);\r\n ref?.current?.focus();\r\n };\r\n useClickAway(wrapperRef, () => {\r\n if (isFocused) {\r\n setIsFocused(false);\r\n }\r\n });\r\n\r\n const handleDebouncedChange = React.useCallback(\r\n (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n const { value } = e.target;\r\n setInputValue(value); // Update local state\r\n setInputIsChanging(true);\r\n\r\n if (debounceTimeout) {\r\n // Clear any previous debounce timeout\r\n if (debounceTimeoutRef.current)\r\n clearTimeout(debounceTimeoutRef.current);\r\n\r\n // Set a new debounce timeout\r\n debounceTimeoutRef.current = setTimeout(() => {\r\n onInputChange(e);\r\n setInputIsChanging(false);\r\n }, debounceTimeout);\r\n } else {\r\n onInputChange(e);\r\n setInputIsChanging(false);\r\n }\r\n },\r\n [debounceTimeout, debounceTimeoutRef, onInputChange, setInputValue]\r\n );\r\n\r\n const handleBlur = (\r\n e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>\r\n ) => {\r\n formOnBlur(e); // Call React Hook Form's onBlur\r\n setIsFocused(false); // Then call your custom onBlur logic\r\n\r\n if (debounceTimeoutRef.current && inputIsChanging) {\r\n clearTimeout(debounceTimeoutRef.current);\r\n onInputChange(e);\r\n setInputIsChanging(false);\r\n }\r\n };\r\n\r\n const renderInput = () => {\r\n switch (type) {\r\n case \"textarea\":\r\n return (\r\n <textarea\r\n id={name}\r\n name={name}\r\n className=\"grow shrink basis-0 text-muted-foreground text-sm font-normal leading-tight focus:border-none outline-none shadow-none\r\n bg-white \"\r\n disabled={disabled}\r\n value={inputValue}\r\n rows={3}\r\n {...rest} // Spread the rest of register's return value\r\n // ref={ref}\r\n onChange={(e) => handleDebouncedChange(e)}\r\n onFocus={() => {\r\n setIsFocused(true);\r\n onFocus();\r\n }}\r\n onBlur={(e) => {\r\n handleBlur(e);\r\n onBlur();\r\n }}\r\n maxLength={maxLength || 4000}\r\n />\r\n );\r\n default:\r\n return (\r\n <>\r\n <input\r\n className={`text-muted-foreground text-sm font-normal leading-normal outline-none shadow-none \r\n placeholder-muted-foreground\r\n text-ellipsis overflow-hidden w-full disabled:cursor-not-allowed bg-white`}\r\n id={name}\r\n name={name}\r\n disabled={disabled}\r\n type={type}\r\n {...rest}\r\n // ref={ref}\r\n value={inputValue} // Controlled value\r\n placeholder={placeholder}\r\n onChange={(e) => handleDebouncedChange(e)}\r\n onFocus={() => {\r\n setIsFocused(true);\r\n onFocus();\r\n }}\r\n onBlur={(e) => {\r\n handleBlur(e);\r\n onBlur();\r\n }}\r\n autoComplete={disableAutocomplete ? \"off\" : \"on\"}\r\n />\r\n </>\r\n );\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n <div\r\n className={\r\n \"min-h-30 flex-col justify-start items-start gap-1.5 w-full relative \" +\r\n className\r\n }\r\n ref={wrapperRef}\r\n id=\"component\"\r\n \r\n >\r\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex\">\r\n {label && (\r\n <div className=\"text-slate-700 text-sm font-medium leading-tight\">\r\n {label} {required ? \"*\" : \"\"}\r\n </div>\r\n )}\r\n <div\r\n className={`self-stretch w-full pl-3 pr-2 py-1 border justify-between items-center gap-0 inline-flex outline-none bg-white\r\n ${isFocused ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 \" : \"\"}\r\n ${rounded ? \" rounded-lg \" : \" rounded-none \"}\r\n ${disabled ? \" !opacity-80 cursor-not-allowed \" : \"\"}`}\r\n onClick={handleSetFocus}\r\n >\r\n <div className=\"flex-grow basis-0 min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] \">\r\n {renderInput()}\r\n </div>\r\n <div className=\"items-center content-center flex-shrink flex\">\r\n {inputIsChanging === true && (\r\n <div className=\"w-6 h-6 relative flex items-center justify-center align-middle\">\r\n <SpinnerIcon icon={<FaSpinner />} />\r\n </div>\r\n )}\r\n {value && !disabled && (\r\n <div\r\n className=\"w-6 h-6 relative flex cursor-pointer items-center justify-center align-middle hover:bg-gray-100 rounded-full text-lg\"\r\n onClick={handleClear}\r\n id={name + \":clear\"}\r\n >\r\n <MdClose />\r\n </div>\r\n )}\r\n {children}\r\n </div>\r\n </div>\r\n </div>\r\n {description && !isFocused && (\r\n <div\r\n className=\"self-stretch text-slate-600 text-sm font-normal leading-tight\"\r\n id={name + \":description\"}\r\n >\r\n {description}\r\n </div>\r\n )}{\" \"}\r\n {errors[name] && (\r\n <div\r\n className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight mt-1\"\r\n id={name + \":error\"}\r\n >\r\n {errors[name]?.message}\r\n </div>\r\n )}\r\n </div>\r\n </>\r\n );\r\n}\r\n"],"names":["_a","value"],"mappings":"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"}
|
|
@@ -50,6 +50,7 @@ const MultiSelect = React.forwardRef(
|
|
|
50
50
|
className,
|
|
51
51
|
...props
|
|
52
52
|
}, ref) => {
|
|
53
|
+
var _a;
|
|
53
54
|
const [selectedValues, setSelectedValues] = React.useState(
|
|
54
55
|
propValue ?? defaultValue
|
|
55
56
|
);
|
|
@@ -107,7 +108,9 @@ const MultiSelect = React.forwardRef(
|
|
|
107
108
|
),
|
|
108
109
|
children: selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
|
|
109
110
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center", children: [
|
|
110
|
-
selectedValues.
|
|
111
|
+
maxCount === 0 && selectedValues.length == 1 && /* @__PURE__ */ jsx("span", { className: "px-2", children: (_a = options.find((o) => o.value === selectedValues[0])) == null ? void 0 : _a.label }),
|
|
112
|
+
maxCount === 0 && selectedValues.length > 1 && /* @__PURE__ */ jsx("span", { className: "px-2", children: `Více (${selectedValues.length})` }),
|
|
113
|
+
maxCount > 0 && selectedValues.slice(0, maxCount).map((value) => {
|
|
111
114
|
const option = options.find((o) => o.value === value);
|
|
112
115
|
return /* @__PURE__ */ jsxs(
|
|
113
116
|
Badge,
|
|
@@ -130,7 +133,7 @@ const MultiSelect = React.forwardRef(
|
|
|
130
133
|
value
|
|
131
134
|
);
|
|
132
135
|
}),
|
|
133
|
-
selectedValues.length > maxCount && /* @__PURE__ */ jsxs(
|
|
136
|
+
maxCount > 0 && selectedValues.length > maxCount && /* @__PURE__ */ jsxs(
|
|
134
137
|
Badge,
|
|
135
138
|
{
|
|
136
139
|
className: cn(
|
|
@@ -138,7 +141,7 @@ const MultiSelect = React.forwardRef(
|
|
|
138
141
|
multiSelectVariants({ variant })
|
|
139
142
|
),
|
|
140
143
|
children: [
|
|
141
|
-
|
|
144
|
+
`Více (${selectedValues.length - maxCount})`,
|
|
142
145
|
/* @__PURE__ */ jsx(
|
|
143
146
|
CircleX,
|
|
144
147
|
{
|
|
@@ -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 {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 {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 {`+ ${selectedValues.length - maxCount} další`}\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.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 = selectedValues.includes(optionStr);\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 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.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 = selectedValues.includes(optionStr);\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":";;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,MAAM,UAAU,iBAAiB,WAAW;AAAA,EAC1C,CAAC,UAAU,EAAE,IAAI,MAAM,IAAI,MAAM,GAAG,MAAM,KAAK,UAAU;AAAA,EACzD,CAAC,QAAQ,EAAE,GAAG,aAAa,KAAK,SAAQ,CAAE;AAAA,EAC1C,CAAC,QAAQ,EAAE,GAAG,YAAY,KAAK,SAAQ,CAAE;AAC3C,CAAC;ACaD,MAAM,sBAAsB,IAAI,yCAAyC;AAAA,EACvE,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SACE;AAAA,MACF,WACE;AAAA,MACF,aACE;AAAA,MACF,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC;AA8EM,MAAM,cAAc,MAAM;AAAA,EAI/B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,cAAc;AAAA,IACd,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,eAAe;AAAA,IACf,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,KAEL,QACG;;AACH,UAAM,CAAC,gBAAgB,iBAAiB,IAAI,MAAM;AAAA,MAChD,aAAa;AAAA,IAAA;AAEf,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,KAAK;AAG9D,UAAM,UAAU,MAAM;AACpB,UAAI,cAAc,QAAW;AAC3B,0BAAkB,SAAS;AAAA,MAC7B;AAAA,IAAA,GACC,CAAC,SAAS,CAAC;AAER,UAAA,oBAAoB,CAAC,cAAwB;AACjD,wBAAkB,SAAS;AAC3B,eAAS,SAAS;AAAA,IAAA;AAGpB,UAAM,sBAAsB,MAAM;AACf,uBAAA,CAAC,SAAS,CAAC,IAAI;AAAA,IAAA;AAG5B,UAAA,eAAe,CAAC,WAAmC;AACvD,UAAI,WAAW;AAAM;AACf,YAAA,YAAY,OAAO,MAAM;AAC/B,YAAM,oBAAoB,eAAe,SAAS,SAAS,IACvD,eAAe,OAAO,CAAC,UAAU,UAAU,SAAS,IACpD,CAAC,GAAG,gBAAgB,SAAS;AACjC,wBAAkB,iBAAiB;AAAA,IAAA;AAGrC,UAAM,cAAc,MAAM;AACxB,wBAAkB,CAAE,CAAA;AAAA,IAAA;AAGtB,UAAM,oBAAoB,MAAM;AAC9B,YAAM,oBAAoB,eAAe,MAAM,GAAG,QAAQ;AAC1D,wBAAkB,iBAAiB;AAAA,IAAA;AAGrC,UAAM,YAAY,MAAM;AAClB,UAAA,eAAe,WAAW,QAAQ,QAAQ;AAChC;MAAA,OACP;AACL,cAAM,YAAY,QAAQ,IAAI,CAAC,WAAW,OAAO,KAAe;AAChE,0BAAkB,SAAS;AAAA,MAC7B;AAAA,IAAA;AAIA,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,cAAc;AAAA,QACd,OAAO;AAAA,QAEP,UAAA;AAAA,UAAC,oBAAA,gBAAA,EAAe,SAAO,MACrB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACC,GAAG;AAAA,cACJ,SAAS;AAAA,cACT,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cACF;AAAA,cAEC,yBAAe,SAAS,IACtB,qBAAA,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,gBAAC,qBAAA,OAAA,EAAI,WAAU,+BACZ,UAAA;AAAA,kBAAA,aAAa,KAAK,eAAe,UAAU,KACzC,oBAAA,QAAA,EAAK,WAAU,QAEZ,WAAA,aAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,eAAe,CAAC,CAAC,MAAjD,mBACI,OAER;AAAA,kBAED,aAAa,KAAK,eAAe,SAAS,KACzC,oBAAC,QAAK,EAAA,WAAU,QACb,UAAA,SAAS,eAAe,MAAM,KACjC;AAAA,kBAED,WAAW,KACV,eAAe,MAAM,GAAG,QAAQ,EAAE,IAAI,CAAC,UAAU;AAC/C,0BAAM,SAAS,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,KAAK;AAElD,2BAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBAEC,WAAW,GAAG,oBAAoB,EAAE,QAAS,CAAA,CAAC;AAAA,wBAE7C,UAAA;AAAA,0BAAQ,iCAAA;AAAA,0BACT;AAAA,4BAACA;AAAAA,4BAAA;AAAA,8BACC,WAAU;AAAA,8BACV,SAAS,CAAC,UAAU;AAClB,sCAAM,gBAAgB;AACtB,6CAAa,KAAK;AAAA,8BACpB;AAAA,4BAAA;AAAA,0BACF;AAAA,wBAAA;AAAA,sBAAA;AAAA,sBAVK;AAAA,oBAAA;AAAA,kBAWP,CAEH;AAAA,kBAEF,WAAW,KAAK,eAAe,SAAS,YACvC;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAW;AAAA,wBACT;AAAA,wBACA,oBAAoB,EAAE,SAAS;AAAA,sBACjC;AAAA,sBAEC,UAAA;AAAA,wBAAS,SAAA,eAAe,SAAS,QAAQ;AAAA,wBAC1C;AAAA,0BAACA;AAAAA,0BAAA;AAAA,4BACC,WAAU;AAAA,4BACV,SAAS,CAAC,UAAU;AAClB,oCAAM,gBAAgB;AACJ;4BACpB;AAAA,0BAAA;AAAA,wBACF;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACF;AAAA,gBAAA,GAEJ;AAAA,gBACA,qBAAC,OAAI,EAAA,WAAU,qCACb,UAAA;AAAA,kBAAA;AAAA,oBAACC;AAAAA,oBAAA;AAAA,sBACC,WAAU;AAAA,sBACV,SAAS,CAAC,UAAU;AAClB,8BAAM,gBAAgB;AACV;sBACd;AAAA,oBAAA;AAAA,kBACF;AAAA,kBACA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,aAAY;AAAA,sBACZ,WAAU;AAAA,oBAAA;AAAA,kBACZ;AAAA,kBACA,oBAAC,aAAY,EAAA,WAAU,gDAAgD,CAAA;AAAA,gBAAA,GACzE;AAAA,cAAA,EACF,CAAA,IAEA,qBAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,gBAAC,oBAAA,QAAA,EAAK,WAAU,sCACb,UACH,aAAA;AAAA,gBACA,oBAAC,aAAY,EAAA,WAAU,gDAAgD,CAAA;AAAA,cAAA,GACzE;AAAA,YAAA;AAAA,UAAA,GAGN;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAM;AAAA,cACN,iBAAiB,MAAM,iBAAiB,KAAK;AAAA,cAE7C,+BAAC,SACC,EAAA,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,aAAa;AAAA,oBACb,WAAW,CAAC,MAA6C;AACnD,0BAAA,EAAE,QAAQ,SAAS;AACrB,yCAAiB,IAAI;AAAA,sBAAA,WACZ,EAAE,QAAQ,eAAe,CAAC,EAAE,cAAc,OAAO;AACpD,8BAAA,oBAAoB,CAAC,GAAG,cAAc;AAC5C,0CAAkB,IAAI;AACtB,0CAAkB,iBAAiB;AAAA,sBACrC;AAAA,oBACF;AAAA,kBAAA;AAAA,gBACF;AAAA,qCACC,aACC,EAAA,UAAA;AAAA,kBAAA,oBAAC,gBAAa,UAAiB,oBAAA,CAAA;AAAA,uCAC9B,cACC,EAAA,UAAA;AAAA,oBAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBAEC,UAAU;AAAA,wBACV,WAAU;AAAA,wBAEV,UAAA;AAAA,0BAAA;AAAA,4BAAC;AAAA,4BAAA;AAAA,8BACC,WAAW;AAAA,gCACT;AAAA,gCACA,eAAe,WAAW,QAAQ,SAC9B,uCACA;AAAA,8BACN;AAAA,8BAEA,UAAA,oBAACC,OAAU,EAAA,WAAU,UAAU,CAAA;AAAA,4BAAA;AAAA,0BACjC;AAAA,0BACA,oBAAC,UAAK,UAAa,gBAAA,CAAA;AAAA,wBAAA;AAAA,sBAAA;AAAA,sBAdf;AAAA,oBAeN;AAAA,oBACC,QAAQ,IAAI,CAAC,WAAW;AACjB,4BAAA,YAAY,OAAO,OAAO,KAAK;AAC/B,4BAAA,aAAa,eAAe,SAAS,SAAS;AAElD,6BAAA;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BAEC,UAAU,MAAM,aAAa,OAAO,KAAK;AAAA,0BACzC,WAAU;AAAA,0BAEV,UAAA;AAAA,4BAAA;AAAA,8BAAC;AAAA,8BAAA;AAAA,gCACC,WAAW;AAAA,kCACT;AAAA,kCACA,aACI,uCACA;AAAA,gCACN;AAAA,gCAEA,UAAA,oBAACA,OAAU,EAAA,WAAU,UAAU,CAAA;AAAA,8BAAA;AAAA,4BACjC;AAAA,4BAEA,oBAAC,QAAM,EAAA,UAAA,OAAO,MAAM,CAAA;AAAA,0BAAA;AAAA,wBAAA;AAAA,wBAff;AAAA,sBAAA;AAAA,oBAgBP,CAEH;AAAA,kBAAA,GACH;AAAA,sCACC,kBAAiB,EAAA;AAAA,kBACjB,oBAAA,cAAA,EACC,UAAC,qBAAA,OAAA,EAAI,WAAU,qCACZ,UAAA;AAAA,oBAAe,eAAA,SAAS,KAErB,qBAAA,UAAA,EAAA,UAAA;AAAA,sBAAA;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,UAAU;AAAA,0BACV,WAAU;AAAA,0BACX,UAAA;AAAA,wBAAA;AAAA,sBAED;AAAA,sBACA;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,aAAY;AAAA,0BACZ,WAAU;AAAA,wBAAA;AAAA,sBACZ;AAAA,oBAAA,GACF;AAAA,oBAEF;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,UAAU,MAAM,iBAAiB,KAAK;AAAA,wBACtC,WAAU;AAAA,wBACX,UAAA;AAAA,sBAAA;AAAA,oBAED;AAAA,kBAAA,EAAA,CACF,EACF,CAAA;AAAA,gBAAA,GACF;AAAA,cAAA,GACF;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;","x_google_ignoreList":[0]}
|
|
@@ -622,6 +622,7 @@ function DataTableServer<T extends DataTableInternalItems>({
|
|
|
622
622
|
<div
|
|
623
623
|
className="shadow-lg border border-gray-200 rounded-xl"
|
|
624
624
|
style={{ overflowY: "visible" }}
|
|
625
|
+
data-cy={"datatable-container-" + id}
|
|
625
626
|
>
|
|
626
627
|
{showHeader && (
|
|
627
628
|
<div className="p-4 leading-9 flex ">
|
|
@@ -653,6 +654,7 @@ function DataTableServer<T extends DataTableInternalItems>({
|
|
|
653
654
|
: "Filtrovat podle sloupců"
|
|
654
655
|
}
|
|
655
656
|
onClick={handleToggleShowColFilters}
|
|
657
|
+
data-cy="datatable-filter-toggle"
|
|
656
658
|
>
|
|
657
659
|
{!showColFilters && <MdOutlineFilterAlt />}
|
|
658
660
|
{showColFilters && (
|
|
@@ -681,7 +683,11 @@ function DataTableServer<T extends DataTableInternalItems>({
|
|
|
681
683
|
</div>
|
|
682
684
|
)}
|
|
683
685
|
<div className="overflow-auto min-h-[500px]">
|
|
684
|
-
<table
|
|
686
|
+
<table
|
|
687
|
+
className="w-full leading-normal"
|
|
688
|
+
key={tableKey}
|
|
689
|
+
data-cy={"datatable-table-" + id}
|
|
690
|
+
>
|
|
685
691
|
<thead>
|
|
686
692
|
<tr>
|
|
687
693
|
{data && bulkAction && (
|
|
@@ -731,6 +737,7 @@ function DataTableServer<T extends DataTableInternalItems>({
|
|
|
731
737
|
onClick={() =>
|
|
732
738
|
sortParam ? requestSort(sortParam) : undefined
|
|
733
739
|
}
|
|
740
|
+
data-cy={"datatable-header-" + id + "-" + String(key)}
|
|
734
741
|
>
|
|
735
742
|
<span className="inline-flex items-center gap-2 group select-none w-full">
|
|
736
743
|
{header}{" "}
|
|
@@ -798,6 +805,7 @@ function DataTableServer<T extends DataTableInternalItems>({
|
|
|
798
805
|
(filters as object) || {}
|
|
799
806
|
).includes(String(filterParam))}
|
|
800
807
|
variant="secondary"
|
|
808
|
+
maxCount={0}
|
|
801
809
|
/>
|
|
802
810
|
) : filterType === "dateRange" ? (
|
|
803
811
|
<DateRangeField
|
|
@@ -914,8 +922,8 @@ function DataTableServer<T extends DataTableInternalItems>({
|
|
|
914
922
|
onClick={
|
|
915
923
|
rowAction ? () => rowAction(item) : undefined
|
|
916
924
|
}
|
|
917
|
-
className={`px-3 py-2 text-gray-
|
|
918
|
-
colIndex === 0 ? "font-
|
|
925
|
+
className={`px-3 py-2 text-gray-800 ${rowAction ? "cursor-pointer" : ""} ${
|
|
926
|
+
colIndex === 0 ? "font-bold " : ""
|
|
919
927
|
} ${classes || ""}`}
|
|
920
928
|
>
|
|
921
929
|
{render ? render(item) : ""}
|
|
@@ -1007,6 +1015,7 @@ function DataTableServer<T extends DataTableInternalItems>({
|
|
|
1007
1015
|
onClick={prevPage}
|
|
1008
1016
|
className="flex items-center"
|
|
1009
1017
|
disabled={data.first || isLoading}
|
|
1018
|
+
data-cy="prev-page"
|
|
1010
1019
|
>
|
|
1011
1020
|
<MdArrowBack className="mr-1.5" /> Předchozí
|
|
1012
1021
|
</Button>
|
|
@@ -1017,6 +1026,7 @@ function DataTableServer<T extends DataTableInternalItems>({
|
|
|
1017
1026
|
onClick={nextPage}
|
|
1018
1027
|
className="flex items-center"
|
|
1019
1028
|
disabled={data.last || isLoading}
|
|
1029
|
+
data-cy="next-page"
|
|
1020
1030
|
>
|
|
1021
1031
|
Následující <MdArrowForward className="ml-2" size={20} />
|
|
1022
1032
|
</Button>
|
|
@@ -1025,7 +1035,10 @@ function DataTableServer<T extends DataTableInternalItems>({
|
|
|
1025
1035
|
<div className="flex items-center justify-center text-gray-800">
|
|
1026
1036
|
{paginationDisplay}
|
|
1027
1037
|
</div>
|
|
1028
|
-
<div
|
|
1038
|
+
<div
|
|
1039
|
+
className="content-center w-auto items-center justify-end flex-row gap-5 flex md:mt-0 mt-5"
|
|
1040
|
+
data-cy="items-per-page"
|
|
1041
|
+
>
|
|
1029
1042
|
<span className=" whitespace-nowrap flex-grow">
|
|
1030
1043
|
Počet řádků na stránku:
|
|
1031
1044
|
</span>
|
|
@@ -26,6 +26,7 @@ export function DatatableSettings({
|
|
|
26
26
|
className=" text-xl h-full cursor-pointer text-gray-600 hover:text-black"
|
|
27
27
|
title="Obnovit Data"
|
|
28
28
|
onClick={onSuccess}
|
|
29
|
+
data-cy="datatable-refresh"
|
|
29
30
|
>
|
|
30
31
|
<MdRefresh />
|
|
31
32
|
</div>
|
|
@@ -33,6 +34,7 @@ export function DatatableSettings({
|
|
|
33
34
|
className=" text-xl h-full cursor-pointer text-gray-600 hover:text-black"
|
|
34
35
|
title="Obnovit výchozí nastavení tabulky"
|
|
35
36
|
onClick={() => refreshTable()}
|
|
37
|
+
data-cy="datatable-refresh-default"
|
|
36
38
|
>
|
|
37
39
|
<TiArrowBackOutline />
|
|
38
40
|
</div>
|
|
@@ -40,6 +42,7 @@ export function DatatableSettings({
|
|
|
40
42
|
className=" text-xl h-full cursor-pointer text-gray-600 hover:text-black"
|
|
41
43
|
title="Stáhnout jako XLS soubor"
|
|
42
44
|
onClick={onExport}
|
|
45
|
+
data-cy="datatable-export"
|
|
43
46
|
>
|
|
44
47
|
<PiFileXlsLight />
|
|
45
48
|
</div>{" "}
|
|
@@ -205,32 +205,47 @@ export const MultiSelect = React.forwardRef<
|
|
|
205
205
|
{selectedValues.length > 0 ? (
|
|
206
206
|
<div className="flex justify-between items-center w-full">
|
|
207
207
|
<div className="flex flex-wrap items-center">
|
|
208
|
-
{
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
208
|
+
{maxCount === 0 && selectedValues.length == 1 && (
|
|
209
|
+
<span className="px-2">
|
|
210
|
+
{
|
|
211
|
+
options.find((o) => o.value === selectedValues[0])
|
|
212
|
+
?.label
|
|
213
|
+
}
|
|
214
|
+
</span>
|
|
215
|
+
)}
|
|
216
|
+
{maxCount === 0 && selectedValues.length > 1 && (
|
|
217
|
+
<span className="px-2">
|
|
218
|
+
{`Více (${selectedValues.length})`}
|
|
219
|
+
</span>
|
|
220
|
+
)}
|
|
221
|
+
{maxCount > 0 &&
|
|
222
|
+
selectedValues.slice(0, maxCount).map((value) => {
|
|
223
|
+
const option = options.find((o) => o.value === value);
|
|
224
|
+
return (
|
|
225
|
+
<Badge
|
|
226
|
+
key={value}
|
|
227
|
+
className={cn(multiSelectVariants({ variant }))}
|
|
228
|
+
>
|
|
229
|
+
{option?.label}
|
|
230
|
+
<XCircle
|
|
231
|
+
className="ml-2 h-4 w-4 cursor-pointer text-muted-foreground"
|
|
232
|
+
onClick={(event) => {
|
|
233
|
+
event.stopPropagation();
|
|
234
|
+
toggleOption(value);
|
|
235
|
+
}}
|
|
236
|
+
/>
|
|
237
|
+
</Badge>
|
|
238
|
+
);
|
|
239
|
+
})}
|
|
240
|
+
|
|
241
|
+
{maxCount > 0 && selectedValues.length > maxCount && (
|
|
227
242
|
<Badge
|
|
228
243
|
className={cn(
|
|
229
244
|
"bg-transparent text-foreground border-foreground/1 hover:bg-transparent",
|
|
230
245
|
multiSelectVariants({ variant })
|
|
231
246
|
)}
|
|
232
247
|
>
|
|
233
|
-
{
|
|
248
|
+
{`Více (${selectedValues.length - maxCount})`}
|
|
234
249
|
<XCircle
|
|
235
250
|
className="ml-2 h-4 w-4 cursor-pointer text-muted-foreground"
|
|
236
251
|
onClick={(event) => {
|