@inferencesh/ui 0.0.0-stage → 0.1.1

package/src/components/multi-select.tsx

@@ -0,0 +1,721 @@
+// src/components/multi-select.tsx
+
+import { cva } from "class-variance-authority";
+import {
+  CheckIcon,
+  ChevronDown,
+  ChevronRight
+} from "lucide-react";
+import * as React from "react";
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator
+} from "../shadcn/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../shadcn/popover";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./tooltip";
+import { cn } from "cn";
+
+/**
+ * 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 hover:-translate-y-1 hover:scale-110 duration-300",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-foreground/10 text-foreground bg-card hover:bg-card/80",
+        secondary:
+          "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        inverted: "inverted",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface MultiSelectOption {
+  label: React.ReactNode;
+  value: string;
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+  children?: MultiSelectOption[];
+  disabled?: boolean;
+  tooltip?: React.ReactNode;
+  isSection?: boolean;
+  hideChildren?: boolean;
+}
+
+interface MultiSelectContextValue {
+  value: string[];
+  options: MultiSelectOption[];
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  findOptionByValue: (value: string) => MultiSelectOption | undefined;
+  placeholder?: string;
+}
+
+const MultiSelectContext = React.createContext<MultiSelectContextValue | undefined>(undefined);
+
+function useMultiSelect() {
+  const context = React.useContext(MultiSelectContext);
+  if (!context) {
+    throw new Error("useMultiSelect must be used within a MultiSelect");
+  }
+  return context;
+}
+
+export interface MultiSelectTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  placeholder?: string;
+}
+
+export const MultiSelectTrigger = React.forwardRef<HTMLDivElement, MultiSelectTriggerProps>(
+  ({ className, children, placeholder, ...props }, ref) => {
+    const { isOpen } = useMultiSelect();
+
+    return (
+      <PopoverTrigger>
+        <div
+          ref={ref}
+          className={cn(
+            "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <ChevronDown className={cn("h-4 w-4 shrink-0 opacity-50", isOpen && "rotate-180 transition-transform")} />
+        </div>
+      </PopoverTrigger>
+    );
+  }
+);
+MultiSelectTrigger.displayName = "MultiSelectTrigger";
+
+export const MultiSelectValue = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, ...props }, ref) => {
+    const { value, findOptionByValue, placeholder, options } = useMultiSelect();
+
+    // Helper function to find parent option
+    const findParentOption = (childValue: string): MultiSelectOption | undefined => {
+      for (const option of options) {
+        if (option.isSection) {
+          for (const child of option.children || []) {
+            if (child.children?.some(c => c.value === childValue)) {
+              return child;
+            }
+          }
+        }
+      }
+      return undefined;
+    };
+
+    // Check if all selected values are from the same parent
+    const getCommonParent = () => {
+      const firstParent = findParentOption(value[0]);
+      if (!firstParent) return null;
+
+      if (value.length <= 1) return firstParent;
+
+      const allFromSameParent = value.every(val => {
+        const parent = findParentOption(val);
+        return parent?.value === firstParent.value;
+      });
+
+      return allFromSameParent ? firstParent : null;
+    };
+
+    return (
+      <span ref={ref} className={cn("w-full", className)} {...props}>
+        {value.length === 0 && placeholder}
+        {/* {value.length === 1 && (findOptionByValue(value[0])?.label || value[0])} */}
+        {value.length > 0 && (() => {
+          const commonParent = getCommonParent();
+          return commonParent
+            ? `${commonParent.label} ${value.length > 1 ? `(${value.length})` : ""}`
+            : `${value.length} selected`;
+        })()}
+      </span>
+    );
+  }
+);
+MultiSelectValue.displayName = "MultiSelectValue";
+
+/** 
+ * Props for MultiSelect component
+ */
+interface MultiSelectProps {
+  options: MultiSelectOption[];
+  value: string[];
+  onValueChange: (value: string[]) => void;
+  placeholder?: string;
+  maxCount?: number;
+  modalPopover?: boolean;
+  children: React.ReactNode;
+}
+
+export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
+  ({
+    options,
+    value,
+    onValueChange,
+    placeholder = "Select options",
+    maxCount = 3,
+    modalPopover = false,
+    children,
+  }, ref) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [expandedItems, setExpandedItems] = React.useState<Set<string>>(new Set());
+
+    // Controlled: selectedValues comes from props
+    const selectedValues = value;
+
+    const handleInputKeyDown = (
+      event: React.KeyboardEvent<HTMLInputElement>
+    ) => {
+      if (event.key === "Enter") {
+        setIsOpen(true);
+      } else if (event.key === "Backspace" && !event.currentTarget.value) {
+        const newSelectedValues = [...selectedValues];
+        newSelectedValues.pop();
+        onValueChange(newSelectedValues);
+      }
+    };
+
+    // Helper: flatten all child values for easy lookup
+    const getAllChildValues = (option: MultiSelectOption): string[] => {
+      if (option.children && option.children.length > 0) {
+        return option.children.map((child) => child.value);
+      }
+      return [];
+    };
+
+    // Helper: recursively find an option by value
+    const findOptionByValue = React.useCallback(
+      (val: string): MultiSelectOption | undefined => {
+        const findInOptions = (opts: MultiSelectOption[]): MultiSelectOption | undefined => {
+          for (const opt of opts) {
+            if (opt.value === val) return opt;
+            if (opt.children) {
+              const found = findInOptions(opt.children);
+              if (found) return found;
+            }
+          }
+          return undefined;
+        };
+        return findInOptions(options);
+      },
+      [options]
+    );
+
+    // Helper: flatten all values (for select all)
+    const getAllValues = (opts: MultiSelectOption[]): string[] => {
+      let values: string[] = [];
+      for (const opt of opts) {
+        if (opt.children && opt.children.length > 0) {
+          values = values.concat(opt.children.map((c) => c.value));
+        } else {
+          values.push(opt.value);
+        }
+      }
+      return values;
+    };
+
+    // Updated toggleOption to handle parent/child
+    const toggleOption = (option: MultiSelectOption, isParent = false) => {
+      let newSelectedValues = [...selectedValues];
+      if (option.children && option.children.length > 0) {
+        // Parent: toggle all children
+        const childValues = getAllChildValues(option);
+        const allSelected = childValues.every((v) => newSelectedValues.includes(v));
+        if (allSelected) {
+          newSelectedValues = newSelectedValues.filter((v) => !childValues.includes(v));
+        } else {
+          newSelectedValues = Array.from(new Set([...newSelectedValues, ...childValues]));
+        }
+      } else {
+        // Child or flat
+        if (newSelectedValues.includes(option.value)) {
+          newSelectedValues = newSelectedValues.filter((v) => v !== option.value);
+        } else {
+          newSelectedValues.push(option.value);
+        }
+        // If this is a child, check if all siblings are selected, then select parent
+        if (isParent && option.children && option.children.length > 0) {
+          // handled above
+        }
+      }
+      onValueChange(newSelectedValues);
+    };
+
+    const handleClear = () => {
+      onValueChange([]);
+    };
+
+    const handleTogglePopover = () => {
+      setIsOpen((prev) => !prev);
+    };
+
+    const clearExtraOptions = () => {
+      const newSelectedValues = selectedValues.slice(0, maxCount);
+      onValueChange(newSelectedValues);
+    };
+
+    // Updated toggleAll for nested
+    const toggleAll = () => {
+      const allValues = getAllValues(options);
+      if (selectedValues.length === allValues.length) {
+        handleClear();
+      } else {
+        onValueChange(allValues);
+      }
+    };
+
+    const toggleExpanded = (optionValue: string, event: React.MouseEvent) => {
+      event.stopPropagation();
+      const option = options.find(opt => opt.value === optionValue) ||
+        options.flatMap(opt => opt.children || []).find(opt => opt.value === optionValue);
+
+      if (option?.hideChildren) return;
+
+      setExpandedItems(prev => {
+        const next = new Set(prev);
+        if (next.has(optionValue)) {
+          next.delete(optionValue);
+        } else {
+          next.add(optionValue);
+        }
+        return next;
+      });
+    };
+
+    return (
+      <MultiSelectContext.Provider
+        value={{
+          value,
+          options,
+          isOpen,
+          onOpenChange: setIsOpen,
+          findOptionByValue,
+          placeholder,
+        }}
+      >
+        <TooltipProvider delay={100}>
+          <Popover open={isOpen} onOpenChange={setIsOpen} modal={modalPopover}>
+            {children}
+            <PopoverContent
+              className="w-auto p-0"
+              align="start"
+            >
+              <Command>
+                <CommandInput
+                  placeholder="search..."
+                  onKeyDown={handleInputKeyDown}
+                />
+                <CommandList>
+                  <CommandEmpty>no results found.</CommandEmpty>
+                  {options.map((section) => {
+                    if (section.isSection) {
+                      // Render section
+                      return (
+                        <React.Fragment key={section.value}>
+                          <CommandGroup heading={section.label}>
+                            {section.children?.map((option) => {
+                              if (option.children && option.children.length > 0) {
+                                // Parent with children
+                                const childValues = getAllChildValues(option);
+                                const allChildrenSelected = childValues.every((v) => selectedValues.includes(v));
+                                const someChildrenSelected = childValues.some((v) => selectedValues.includes(v));
+                                const isExpanded = expandedItems.has(option.value);
+                                const allChildrenDisabled = option.children?.every(child => child.disabled) ?? false;
+                                let parentTooltip = option.tooltip;
+                                if (allChildrenDisabled && (!parentTooltip || parentTooltip === "")) {
+                                  parentTooltip = "no option in this group meets requirements";
+                                }
+                                const parentContent = (
+                                  <CommandItem
+                                    onSelect={() => !allChildrenDisabled && toggleOption(option, true)}
+                                    className={cn(
+                                      "cursor-pointer font-semibold",
+                                      allChildrenDisabled && "opacity-50 cursor-not-allowed"
+                                    )}
+                                  >
+                                    <div className="flex flex-col w-full">
+                                      <div className="flex items-center">
+                                        <div
+                                          className={cn(
+                                            "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                                            allChildrenSelected
+                                              ? "bg-primary text-primary-foreground"
+                                              : someChildrenSelected
+                                                ? "bg-primary/30 text-primary-foreground"
+                                                : "opacity-50 [&_svg]:invisible",
+                                            allChildrenDisabled && "opacity-30"
+                                          )}
+                                        >
+                                          <CheckIcon className="h-4 w-4" />
+                                        </div>
+
+                                        {option.icon && option.icon}
+                                        <span>{option.label}</span>
+                                        {option.children && option.children.length > 0 && !option.hideChildren && (
+                                          <button
+                                            onClick={(e) => toggleExpanded(option.value, e)}
+                                            className="p-1 ml-1 hover:bg-foreground/10 rounded-sm cursor-pointer"
+                                          >
+                                            {isExpanded ? (
+                                              <ChevronDown className="h-4 w-4" />
+                                            ) : (
+                                              <ChevronRight className="h-4 w-4" />
+                                            )}
+                                          </button>
+                                        )}
+                                      </div>
+                                      {option.description && (
+                                        <div className="text-xs text-muted-foreground pl-6">
+                                          {option.description}
+                                        </div>
+                                      )}
+                                    </div>
+                                  </CommandItem>
+                                );
+
+                                return (
+                                  <React.Fragment key={option.value}>
+                                    {parentTooltip ? (
+                                      <Tooltip>
+                                        <TooltipTrigger>
+                                          <div>
+                                            {parentContent}
+                                          </div>
+                                        </TooltipTrigger>
+                                        <TooltipContent className="max-w-sm border-brand-orange">
+                                          {parentTooltip}
+                                        </TooltipContent>
+                                      </Tooltip>
+                                    ) : parentContent}
+                                    {/* Render children if expanded and not hidden */}
+                                    {isExpanded && !option.hideChildren && option.children.map((child) => {
+                                      const isSelected = selectedValues.includes(child.value);
+                                      const childContent = (
+                                        <CommandItem
+                                          key={child.value}
+                                          onSelect={() => !child.disabled && toggleOption(child)}
+                                          className={cn(
+                                            "cursor-pointer relative pl-6",
+                                            child.disabled && "opacity-50 cursor-not-allowed"
+                                          )}
+                                        >
+                                          <div className="absolute left-4 top-0 bottom-0 w-px bg-muted-foreground/20" />
+                                          <div className="flex flex-col w-full">
+                                            <div className="flex items-center">
+                                              <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",
+                                                  child.disabled && "opacity-30"
+                                                )}
+                                              >
+                                                <CheckIcon className="h-4 w-4" />
+                                              </div>
+                                              {child.icon && child.icon}
+                                              <span>{child.label}</span>
+                                            </div>
+                                            {child.description && (
+                                              <div className="text-xs text-muted-foreground pl-6">
+                                                {child.description}
+                                              </div>
+                                            )}
+                                          </div>
+                                        </CommandItem>
+                                      );
+
+                                      return child.tooltip ? (
+                                        <Tooltip key={child.value}>
+                                          <TooltipTrigger>
+                                            <div>
+                                              {childContent}
+                                            </div>
+                                          </TooltipTrigger>
+                                          <TooltipContent className="max-w-sm border-brand-orange">
+                                            {child.tooltip}
+                                          </TooltipContent>
+                                        </Tooltip>
+                                      ) : childContent;
+                                    })}
+                                  </React.Fragment>
+                                );
+                              } else {
+                                // Flat option
+                                const isSelected = selectedValues.includes(option.value);
+                                const optionContent = (
+                                  <CommandItem
+                                    key={option.value}
+                                    onSelect={() => !option.disabled && toggleOption(option)}
+                                    className={cn(
+                                      "cursor-pointer",
+                                      option.disabled && "opacity-50 cursor-not-allowed"
+                                    )}
+                                  >
+                                    <div className="flex flex-col w-full">
+                                      <div className="flex items-center">
+                                        <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",
+                                            option.disabled && "opacity-30"
+                                          )}
+                                        >
+                                          <CheckIcon className="h-4 w-4" />
+                                        </div>
+                                        {option.icon && option.icon}
+                                        <span>{option.label}</span>
+                                      </div>
+                                      {option.description && (
+                                        <div className="text-xs text-muted-foreground pl-6">
+                                          {option.description}
+                                        </div>
+                                      )}
+                                    </div>
+                                  </CommandItem>
+                                );
+
+                                return option.tooltip ? (
+                                  <Tooltip key={option.value}>
+                                    <TooltipTrigger>
+                                      <div>
+                                        {optionContent}
+                                      </div>
+                                    </TooltipTrigger>
+                                    <TooltipContent className="max-w-sm border-brand-orange">
+                                      {option.tooltip}
+                                    </TooltipContent>
+                                  </Tooltip>
+                                ) : optionContent;
+                              }
+                            })}
+                          </CommandGroup>
+                          <CommandSeparator />
+                        </React.Fragment>
+                      );
+                    } else {
+                      // Render regular options (existing code)
+                      return (
+                        <CommandGroup key={section.value}>
+                          {options.map((option) => {
+                            if (option.children && option.children.length > 0) {
+                              // Parent with children
+                              const childValues = getAllChildValues(option);
+                              const allChildrenSelected = childValues.every((v) => selectedValues.includes(v));
+                              const someChildrenSelected = childValues.some((v) => selectedValues.includes(v));
+                              const isExpanded = expandedItems.has(option.value);
+                              const allChildrenDisabled = option.children?.every(child => child.disabled) ?? false;
+                              let parentTooltip = option.tooltip;
+                              if (allChildrenDisabled && (!parentTooltip || parentTooltip === "")) {
+                                parentTooltip = "no option in this group meets requirements";
+                              }
+                              const parentContent = (
+                                <CommandItem
+                                  onSelect={() => !allChildrenDisabled && toggleOption(option, true)}
+                                  className={cn(
+                                    "cursor-pointer font-semibold",
+                                    allChildrenDisabled && "opacity-50 cursor-not-allowed"
+                                  )}
+                                >
+                                  <div className="flex flex-col w-full">
+                                    <div className="flex items-center">
+                                      <div
+                                        className={cn(
+                                          "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                                          allChildrenSelected
+                                            ? "bg-primary text-primary-foreground"
+                                            : someChildrenSelected
+                                              ? "bg-primary/30 text-primary-foreground"
+                                              : "opacity-50 [&_svg]:invisible",
+                                          allChildrenDisabled && "opacity-30"
+                                        )}
+                                      >
+                                        <CheckIcon className="h-4 w-4" />
+                                      </div>
+                                      {option.children && option.children.length > 0 && !option.hideChildren && (
+                                        <button
+                                          onClick={(e) => toggleExpanded(option.value, e)}
+                                          className="p-1 hover:bg-accent rounded-sm"
+                                        >
+                                          {isExpanded ? (
+                                            <ChevronDown className="h-4 w-4" />
+                                          ) : (
+                                            <ChevronRight className="h-4 w-4" />
+                                          )}
+                                        </button>
+                                      )}
+                                      {option.icon && option.icon}
+                                      <span>{option.label}</span>
+                                    </div>
+                                    {option.description && (
+                                      <div className="text-xs text-muted-foreground pl-6">
+                                        {option.description}
+                                      </div>
+                                    )}
+                                  </div>
+                                </CommandItem>
+                              );
+
+                              return (
+                                <React.Fragment key={option.value}>
+                                  {parentTooltip ? (
+                                    <Tooltip>
+                                      <TooltipTrigger>
+                                        <div>
+                                          {parentContent}
+                                        </div>
+                                      </TooltipTrigger>
+                                      <TooltipContent className="max-w-sm border-brand-orange">
+                                        {parentTooltip}
+                                      </TooltipContent>
+                                    </Tooltip>
+                                  ) : parentContent}
+                                  {/* Render children if expanded and not hidden */}
+                                  {isExpanded && !option.hideChildren && option.children.map((child) => {
+                                    const isSelected = selectedValues.includes(child.value);
+                                    const childContent = (
+                                      <CommandItem
+                                        key={child.value}
+                                        onSelect={() => !child.disabled && toggleOption(child)}
+                                        className={cn(
+                                          "cursor-pointer relative pl-6",
+                                          child.disabled && "opacity-50 cursor-not-allowed"
+                                        )}
+                                      >
+                                        <div className="absolute left-4 top-0 bottom-0 w-px bg-muted-foreground/20" />
+                                        <div className="flex flex-col w-full">
+                                          <div className="flex items-center">
+                                            <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",
+                                                child.disabled && "opacity-30"
+                                              )}
+                                            >
+                                              <CheckIcon className="h-4 w-4" />
+                                            </div>
+                                            {child.icon && child.icon}
+                                            <span>{child.label}</span>
+                                          </div>
+                                          {child.description && (
+                                            <div className="text-xs text-muted-foreground pl-6">
+                                              {child.description}
+                                            </div>
+                                          )}
+                                        </div>
+                                      </CommandItem>
+                                    );
+
+                                    return child.tooltip ? (
+                                      <Tooltip key={child.value}>
+                                        <TooltipTrigger>
+                                          <div>
+                                            {childContent}
+                                          </div>
+                                        </TooltipTrigger>
+                                        <TooltipContent className="max-w-sm border-brand-orange">
+                                          {child.tooltip}
+                                        </TooltipContent>
+                                      </Tooltip>
+                                    ) : childContent;
+                                  })}
+                                </React.Fragment>
+                              );
+                            } else {
+                              // Flat option
+                              const isSelected = selectedValues.includes(option.value);
+                              const optionContent = (
+                                <CommandItem
+                                  key={option.value}
+                                  onSelect={() => !option.disabled && toggleOption(option)}
+                                  className={cn(
+                                    "cursor-pointer",
+                                    option.disabled && "opacity-50 cursor-not-allowed"
+                                  )}
+                                >
+                                  <div className="flex flex-col w-full">
+                                    <div className="flex items-center">
+                                      <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",
+                                          option.disabled && "opacity-30"
+                                        )}
+                                      >
+                                        <CheckIcon className="h-4 w-4" />
+                                      </div>
+                                      {option.icon && option.icon}
+                                      <span>{option.label}</span>
+                                    </div>
+                                    {option.description && (
+                                      <div className="text-xs text-muted-foreground pl-6">
+                                        {option.description}
+                                      </div>
+                                    )}
+                                  </div>
+                                </CommandItem>
+                              );
+
+                              return option.tooltip ? (
+                                <Tooltip key={option.value}>
+                                  <TooltipTrigger>
+                                    <div>
+                                      {optionContent}
+                                    </div>
+                                  </TooltipTrigger>
+                                  <TooltipContent className="max-w-sm border-brand-orange">
+                                    {option.tooltip}
+                                  </TooltipContent>
+                                </Tooltip>
+                              ) : optionContent;
+                            }
+                          })}
+                        </CommandGroup>
+                      );
+                    }
+                  })}
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </TooltipProvider>
+      </MultiSelectContext.Provider>
+    );
+  }
+);
+
+MultiSelect.displayName = "MultiSelect";