@addsign/moje-agenda-shared-lib 2.0.67 → 2.0.68

package/dist/components/ui/multi-select.js.map

@@ -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      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":";;;;;;;;;;;;;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,MAAM,QAAQ,SAAS,IAAI,YAAY,gBAAgB,CAAC;AAAA,IAAA;AAE1D,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,KAAK;AAG9D,UAAM,UAAU,MAAM;AACpB,UACE,cAAc,UACd,cAAc,QACd,MAAM,QAAQ,SAAS,GACvB;AACkB,0BAAA,aAAa,CAAA,CAAE;AAAA,MAAA,OAC5B;AACL,0BAAkB,CAAE,CAAA;AAAA,MACtB;AAAA,IAAA,GACC,CAAC,SAAS,CAAC;AAER,UAAA,oBAAoB,CAAC,cAAwB;AAC/B,wBAAA,aAAa,CAAA,CAAE;AACxB,eAAA,aAAa,CAAA,CAAE;AAAA,IAAA;AAG1B,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;AAEM,YAAA,IAAI,kBAAkB,mBAAmB,cAAc;AAE7D,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,kBAAkB,eAAe,WAAW,QAAQ,SAChD,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;AACrC,4BAAM,cACJ,iDAAgB,SAAS,eAAc;AAEvC,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]}
+{"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\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { CheckIcon, XCircle, ChevronDown, XIcon } from \"lucide-react\";\n\nimport { cn } from \"../../utils/utils\";\nimport { Separator } from \"./separator\";\nimport { Button } from \"./button\";\nimport { Badge } from \"./badge\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"./command\";\nimport { IOptionItem } from \"../../types\";\n\n/**\n * Variants for the multi-select component to handle different styles.\n * Uses class-variance-authority (cva) to define different styles based on \"variant\" prop.\n */\nconst multiSelectVariants = cva(\"m-1 transition ease-in-out delay-150 \", {\n  variants: {\n    variant: {\n      default:\n        \"border-foreground/10 text-foreground bg-card hover:bg-card/80 font-normal\",\n      secondary:\n        \"border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80 font-normal\",\n      destructive:\n        \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80 font-normal\",\n      inverted: \"inverted\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\n/**\n * Props for MultiSelect component\n */\ninterface MultiSelectProps\n  extends Omit<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      \"onChange\" | \"value\"\n    >,\n    VariantProps<typeof multiSelectVariants> {\n  /**\n   * An array of option objects to be displayed in the multi-select component.\n   * Each option object has a label, value, and an optional icon.\n   */\n  options: IOptionItem[];\n\n  /**\n   * Callback function triggered when the selected values change.\n   * Receives an array of the new selected values.\n   */\n  onChange: (value: string[]) => void;\n\n  /** The controlled value of the component */\n  value?: string[];\n\n  /** The default selected values when the component mounts (uncontrolled mode) */\n  defaultValue?: string[];\n\n  /**\n   * Placeholder text to be displayed when no values are selected.\n   * Optional, defaults to \"Select options\".\n   */\n  placeholder?: string;\n\n  /**\n   * Placeholder text to be displayed when no values are selected.\n   * Optional, defaults to \"Select options\".\n   */\n  placeholderSearch?: string;\n\n  /**\n   * Maximum number of items to display. Extra selected items will be summarized.\n   * Optional, defaults to 3.\n   */\n  maxCount?: number;\n\n  /**\n   * The modality of the popover. When set to true, interaction with outside elements\n   * will be disabled and only popover content will be visible to screen readers.\n   * Optional, defaults to false.\n   */\n  modalPopover?: boolean;\n\n  /**\n   * If true, renders the multi-select component as a child of another component.\n   * Optional, defaults to false.\n   */\n  asChild?: boolean;\n\n  /**\n   * Additional class names to apply custom styles to the multi-select component.\n   * Optional, can be used to add custom styles.\n   */\n  className?: string;\n\n  /**\n   * If true, the multi-select component will be disabled.\n   * Optional, defaults to false.\n   */\n  disabled?: boolean;\n\n  /**\n   *   value?: string;\n  onChange?: (value: string | undefined) => void;\n   */\n}\n\nexport const MultiSelect = React.forwardRef<\n  HTMLButtonElement,\n  MultiSelectProps\n>(\n  (\n    {\n      options,\n      onChange,\n      value: propValue,\n      variant,\n      defaultValue = [],\n      placeholder = \"Vyberte možnosti\",\n      placeholderSearch = \"Vyhledejte\",\n      maxCount = 3,\n      modalPopover = false,\n      asChild = false,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const [selectedValues, setSelectedValues] = React.useState<string[]>(\n      Array.isArray(propValue) ? propValue : defaultValue || []\n    );\n    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n\n    // Update internal state when controlled value changes\n    React.useEffect(() => {\n      if (\n        propValue !== undefined &&\n        propValue !== null &&\n        Array.isArray(propValue)\n      ) {\n        setSelectedValues(propValue || []);\n      } else {\n        setSelectedValues([]);\n      }\n    }, [propValue]);\n\n    const handleValueChange = (newValues: string[]) => {\n      setSelectedValues(newValues ?? []);\n      onChange(newValues ?? []);\n    };\n\n    const handleTogglePopover = () => {\n      setIsPopoverOpen((prev) => !prev);\n    };\n\n    const toggleOption = (option: string | number | null) => {\n      if (option === null) return;\n      const optionStr = String(option);\n      const newSelectedValues = selectedValues.includes(optionStr)\n        ? selectedValues.filter((value) => value !== optionStr)\n        : [...selectedValues, optionStr];\n      handleValueChange(newSelectedValues);\n    };\n\n    const handleClear = () => {\n      handleValueChange([]);\n    };\n\n    const clearExtraOptions = () => {\n      const newSelectedValues = selectedValues.slice(0, maxCount);\n      handleValueChange(newSelectedValues);\n    };\n\n    const toggleAll = () => {\n      if (selectedValues.length === options.length) {\n        handleClear();\n      } else {\n        const allValues = options.map((option) => option.value as string);\n        handleValueChange(allValues);\n      }\n    };\n    console.log(\"selectedValues\", \"color: #007acc;\", selectedValues);\n    return (\n      <Popover\n        open={isPopoverOpen}\n        onOpenChange={setIsPopoverOpen}\n        modal={modalPopover}\n      >\n        <PopoverTrigger asChild>\n          <Button\n            ref={ref}\n            {...props}\n            onClick={handleTogglePopover}\n            className={cn(\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\",\n              className\n            )}\n          >\n            {selectedValues.length > 0 ? (\n              <div className=\"flex justify-between items-center w-full\">\n                <div className=\"flex flex-wrap items-center\">\n                  {maxCount === 0 && selectedValues.length == 1 && (\n                    <span className=\"px-2\">\n                      {\n                        options.find((o) => o.value === selectedValues[0])\n                          ?.label\n                      }\n                    </span>\n                  )}\n                  {maxCount === 0 && selectedValues.length > 1 && (\n                    <span className=\"px-2\">\n                      {`Více (${selectedValues.length})`}\n                    </span>\n                  )}\n                  {maxCount > 0 &&\n                    selectedValues.slice(0, maxCount).map((value) => {\n                      const option = options.find((o) => o.value === value);\n                      return (\n                        <Badge\n                          key={value}\n                          className={cn(multiSelectVariants({ variant }))}\n                        >\n                          {option?.label}\n                          <XCircle\n                            className=\"ml-2 h-4 w-4 cursor-pointer text-muted-foreground\"\n                            onClick={(event) => {\n                              event.stopPropagation();\n                              toggleOption(value);\n                            }}\n                          />\n                        </Badge>\n                      );\n                    })}\n\n                  {maxCount > 0 && selectedValues.length > maxCount && (\n                    <Badge\n                      className={cn(\n                        \"bg-transparent text-foreground border-foreground/1 hover:bg-transparent\",\n                        multiSelectVariants({ variant })\n                      )}\n                    >\n                      {`Více (${selectedValues.length - maxCount})`}\n                      <XCircle\n                        className=\"ml-2 h-4 w-4 cursor-pointer text-muted-foreground\"\n                        onClick={(event) => {\n                          event.stopPropagation();\n                          clearExtraOptions();\n                        }}\n                      />\n                    </Badge>\n                  )}\n                </div>\n                <div className=\"flex items-center justify-between\">\n                  <XIcon\n                    className=\"h-4 mx-2 cursor-pointer text-muted-foreground\"\n                    onClick={(event) => {\n                      event.stopPropagation();\n                      handleClear();\n                    }}\n                  />\n                  <Separator\n                    orientation=\"vertical\"\n                    className=\"flex min-h-6 h-full\"\n                  />\n                  <ChevronDown className=\"h-4 mx-2 cursor-pointer text-muted-foreground\" />\n                </div>\n              </div>\n            ) : (\n              <div className=\"flex items-center justify-between w-full mx-auto\">\n                <span className=\"text-sm text-muted-foreground mx-3\">\n                  {placeholder}\n                </span>\n                <ChevronDown className=\"h-4 cursor-pointer text-muted-foreground mx-2\" />\n              </div>\n            )}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-auto p-0\"\n          align=\"start\"\n          onEscapeKeyDown={() => setIsPopoverOpen(false)}\n        >\n          <Command>\n            <CommandInput\n              placeholder={placeholderSearch}\n              onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n                if (e.key === \"Enter\") {\n                  setIsPopoverOpen(true);\n                } else if (e.key === \"Backspace\" && !e.currentTarget.value) {\n                  const newSelectedValues = [...selectedValues];\n                  newSelectedValues.pop();\n                  handleValueChange(newSelectedValues);\n                }\n              }}\n            />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                <CommandItem\n                  key=\"all\"\n                  onSelect={toggleAll}\n                  className=\"cursor-pointer\"\n                >\n                  <div\n                    className={cn(\n                      \"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary\",\n                      selectedValues && selectedValues.length === options.length\n                        ? \"bg-primary text-primary-foreground\"\n                        : \"opacity-50 [&_svg]:invisible\"\n                    )}\n                  >\n                    <CheckIcon className=\"h-4 w-4\" />\n                  </div>\n                  <span>(Vyberte vše)</span>\n                </CommandItem>\n                {options.map((option) => {\n                  const optionStr = String(option.value);\n                  const isSelected =\n                    selectedValues?.includes(optionStr) || false;\n                  return (\n                    <CommandItem\n                      key={optionStr}\n                      onSelect={() => toggleOption(option.value)}\n                      className=\"cursor-pointer\"\n                    >\n                      <div\n                        className={cn(\n                          \"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary\",\n                          isSelected\n                            ? \"bg-primary text-primary-foreground\"\n                            : \"opacity-50 [&_svg]:invisible\"\n                        )}\n                      >\n                        <CheckIcon className=\"h-4 w-4\" />\n                      </div>\n\n                      <span>{option.label}</span>\n                    </CommandItem>\n                  );\n                })}\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup>\n                <div className=\"flex items-center justify-between\">\n                  {selectedValues.length > 0 && (\n                    <>\n                      <CommandItem\n                        onSelect={handleClear}\n                        className=\"flex-1 justify-center cursor-pointer\"\n                      >\n                        Odebrat vše\n                      </CommandItem>\n                      <Separator\n                        orientation=\"vertical\"\n                        className=\"flex min-h-6 h-full\"\n                      />\n                    </>\n                  )}\n                  <CommandItem\n                    onSelect={() => setIsPopoverOpen(false)}\n                    className=\"flex-1 justify-center cursor-pointer max-w-full\"\n                  >\n                    Zavřít\n                  </CommandItem>\n                </div>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    );\n  }\n);\n\nMultiSelect.displayName = \"MultiSelect\";\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,MAAM,QAAQ,SAAS,IAAI,YAAY,gBAAgB,CAAC;AAAA,IAAA;AAE1D,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,KAAK;AAG9D,UAAM,UAAU,MAAM;AACpB,UACE,cAAc,UACd,cAAc,QACd,MAAM,QAAQ,SAAS,GACvB;AACkB,0BAAA,aAAa,CAAA,CAAE;AAAA,MAAA,OAC5B;AACL,0BAAkB,CAAE,CAAA;AAAA,MACtB;AAAA,IAAA,GACC,CAAC,SAAS,CAAC;AAER,UAAA,oBAAoB,CAAC,cAAwB;AAC/B,wBAAA,aAAa,CAAA,CAAE;AACxB,eAAA,aAAa,CAAA,CAAE;AAAA,IAAA;AAG1B,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;AAEM,YAAA,IAAI,kBAAkB,mBAAmB,cAAc;AAE7D,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,kBAAkB,eAAe,WAAW,QAAQ,SAChD,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;AACrC,4BAAM,cACJ,iDAAgB,SAAS,eAAc;AAEvC,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]}

package/lib/components/datatable/DataTableServer.tsx

@@ -362,12 +362,46 @@ function DataTableServer<T extends DataTableInternalItems>({
               column.filterSource
             );
 
-            const options = response.data.map((item: any) => ({
-              value:
-                item[column.filterValueKey as keyof typeof item]?.toString(),
-              label:
-                item[column.filterLabelKey as keyof typeof item]?.toString(),
-            }));
+            const options: IOptionItem[] = [];
+
+            response.data.forEach((item: any) => {
+              const categoryId =
+                item[column.filterValueKey as keyof typeof item]?.toString();
+              const categoryLabel =
+                item[column.filterLabelKey as keyof typeof item]?.toString();
+              const subcategories = item.subcategories;
+
+              if (
+                Array.isArray(subcategories) &&
+                subcategories.length > 0 &&
+                column.filterParam2
+              ) {
+                //add parent categoriz without subcategiries
+                options.push({
+                  value: categoryId,
+                  label: categoryLabel,
+                });
+                // Multiply options by subcategories
+                subcategories.forEach((subcategory: any) => {
+                  const subcategoryId = subcategory.id?.toString();
+                  const subcategoryLabel = subcategory.name?.toString();
+
+                  if (subcategoryId && subcategoryLabel) {
+                    options.push({
+                      value: `${categoryId}-${subcategoryId}`,
+                      label: `${categoryLabel} - ${subcategoryLabel}`,
+                    });
+                  }
+                });
+              } else {
+                // No subcategories, use category only
+                options.push({
+                  value: categoryId,
+                  label: categoryLabel,
+                });
+              }
+            });
+
             return options;
           } catch (error) {
             console.error("Error fetching filter options:", error);
@@ -514,8 +548,79 @@ function DataTableServer<T extends DataTableInternalItems>({
   // Pagination display logic
   const paginationDisplay = `Strana ${(currentPage || 0) + 1} z ${data?.totalPages || 1}`;
 
-  const filterHandler = (filterParam: keyof T, value: string | string[]) => {
-    setColumnFilters((prev) => ({ ...prev, [filterParam]: value }));
+  const filterHandler = (
+    filterParam: keyof T,
+    value: string | string[],
+    filterParam2?: string,
+    clearFilterParam2?: boolean
+  ) => {
+    setColumnFilters((prev) => {
+      const newFilters = { ...prev };
+
+      // Handle clearing both filters
+      if (
+        value === "" ||
+        value === "__clear__" ||
+        (Array.isArray(value) && value.length === 0)
+      ) {
+        delete newFilters[String(filterParam)];
+        if (filterParam2) {
+          delete newFilters[filterParam2];
+        }
+        return newFilters;
+      }
+
+      // Handle filterParam2 logic
+      if (filterParam2) {
+        // Check if we should clear filterParam2
+        if (clearFilterParam2) {
+          newFilters[String(filterParam)] = value;
+          delete newFilters[filterParam2];
+          return newFilters;
+        }
+
+        // Handle combined values with delimiter
+        if (typeof value === "string" && value.includes("-")) {
+          const parts = value.split("-");
+          if (parts.length === 2) {
+            newFilters[String(filterParam)] = parts[0];
+            newFilters[filterParam2] = parts[1];
+            return newFilters;
+          }
+        }
+
+        // Handle array values (multi-select) with subcategories
+        if (Array.isArray(value)) {
+          const subcategoryIds: string[] = [];
+          value.forEach((val: string) => {
+            if (val.includes("-")) {
+              const parts = val.split("-");
+              if (parts.length === 2) {
+                subcategoryIds.push(parts[1]);
+              }
+            }
+          });
+
+          newFilters[String(filterParam)] =
+            value.length > 0 ? value : undefined;
+          if (subcategoryIds.length > 0) {
+            newFilters[filterParam2] = subcategoryIds;
+          } else {
+            delete newFilters[filterParam2];
+          }
+          return newFilters;
+        }
+
+        // Value without subcategory - clear filterParam2
+        newFilters[String(filterParam)] = value;
+        delete newFilters[filterParam2];
+        return newFilters;
+      }
+
+      // Regular case without filterParam2
+      newFilters[String(filterParam)] = value;
+      return newFilters;
+    });
     setCurrentPage(0);
   };
   const handleToggleShowColFilters = () => {
@@ -837,7 +942,7 @@ function DataTableServer<T extends DataTableInternalItems>({
             </div>
           )}
           {!isLoading && (!data || data?.content?.length === 0) && (
-            <div className="absolute inset-0 flex items-center justify-center h-full py-2 text-gray-600 font-medium text-xs z-10">
+            <div className="absolute inset-0 flex items-center justify-center  py-2 text-gray-600 font-medium text-xs top-[90px]">
               Žádná data
             </div>
           )}
@@ -929,18 +1034,38 @@ function DataTableServer<T extends DataTableInternalItems>({
                                 <Select
                                   onValueChange={(value) => {
                                     if (value === "__clear__") {
-                                      filterHandler(filterParam as keyof T, "");
-                                    } else {
                                       filterHandler(
                                         filterParam as keyof T,
-                                        value
+                                        "",
+                                        filterParam2
                                       );
+                                    } else {
+                                      // Check if value contains delimiter (has subcategory)
+                                      if (value.includes("-") && filterParam2) {
+                                        filterHandler(
+                                          filterParam as keyof T,
+                                          value,
+                                          filterParam2
+                                        );
+                                      } else {
+                                        // Value without subcategory - clear filterParam2 if it exists
+                                        filterHandler(
+                                          filterParam as keyof T,
+                                          value,
+                                          filterParam2,
+                                          true
+                                        );
+                                      }
                                     }
                                   }}
                                   value={
-                                    mergedFilters?.[
-                                      String(filterParam)
-                                    ]?.toString() || "__clear__"
+                                    filterParam2 &&
+                                    mergedFilters?.[String(filterParam)] &&
+                                    mergedFilters?.[String(filterParam2)]
+                                      ? `${mergedFilters[String(filterParam)]}-${mergedFilters[String(filterParam2)]}`
+                                      : mergedFilters?.[
+                                          String(filterParam)
+                                        ]?.toString() || "__clear__"
                                   }
                                   disabled={Object.keys(
                                     (filters as object) || {}
@@ -976,14 +1101,21 @@ function DataTableServer<T extends DataTableInternalItems>({
                                   options={
                                     filterOptions[String(filterParam)] || []
                                   }
-                                  onChange={(values) =>
+                                  onChange={(values) => {
                                     filterHandler(
                                       filterParam as keyof T,
-                                      values
-                                    )
-                                  }
+                                      values,
+                                      filterParam2
+                                    );
+                                  }}
                                   value={
-                                    mergedFilters?.[String(filterParam)] || []
+                                    Array.isArray(
+                                      mergedFilters?.[String(filterParam)]
+                                    )
+                                      ? mergedFilters[String(filterParam)]
+                                      : mergedFilters?.[String(filterParam)]
+                                        ? [mergedFilters[String(filterParam)]]
+                                        : []
                                   }
                                   placeholder={"Zadejte filtr"}
                                   className="px-0"