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

package/lib/components/ui/multi-select.tsx

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