@mdigital_ui/ui 0.1.0

package/dist/chunk-W7BQYIXF.js

@@ -0,0 +1,687 @@
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-3PFA3YG6.js';
+import { cn, iconSizes } from './chunk-YNNAOXU5.js';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { X, Loader2, Search, ChevronDown, ChevronUp, Check } from 'lucide-react';
+import React, { useCallback } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var multiSelectTriggerVariants = cva(
+  "w-full flex items-center justify-between rounded-md bg-background text-text-primary border focus:border-primary outline-none disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-1",
+  {
+    variants: {
+      status: {
+        default: "border-border",
+        error: "border-error",
+        warning: "border-warning",
+        info: "border-info",
+        success: "border-success"
+      },
+      size: {
+        xs: "h-8 pl-1 pr-2 text-xs",
+        sm: "h-[var(--input-height-sm)] px-1.5 text-sm",
+        md: "h-[var(--input-height-md)] px-2 text-base",
+        lg: "h-[var(--input-height-lg)] px-2 text-lg"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: "max-w-full"
+      }
+    },
+    defaultVariants: {
+      status: "default",
+      size: "md",
+      fullWidth: true
+    }
+  }
+);
+cva(
+  "absolute z-50 mt-1 overflow-auto rounded-md border border-border bg-background"
+);
+var multiSelectOptionVariants = cva(
+  "relative cursor-pointer select-none px-3 py-2 text-text-primary",
+  {
+    variants: {
+      selected: {
+        true: "bg-primary/10 text-primary font-medium",
+        false: "hover:bg-surface"
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      selected: false,
+      disabled: false
+    }
+  }
+);
+var multiSelectGroupVariants = cva(
+  "px-3 py-2 text-xs font-semibold text-text-secondary uppercase tracking-wider bg-surface"
+);
+var MultiSelect = React.memo(
+  ({
+    size = "md",
+    label,
+    helperText,
+    error,
+    warning,
+    info,
+    success,
+    options = [],
+    placeholder = "Select options",
+    loading = false,
+    fullWidth = true,
+    maxChipsVisible = 3,
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    required,
+    clearable = false,
+    virtualizeThreshold = 50,
+    maxDropdownHeight = 300,
+    className,
+    ref,
+    ...props
+  }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState(
+      defaultValue || []
+    );
+    const [parentNode, setParentNode] = React.useState(
+      null
+    );
+    const [searchQuery, setSearchQuery] = React.useState("");
+    const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
+    const [visibleChipsCount, setVisibleChipsCount] = React.useState(maxChipsVisible);
+    const [showTopArrow, setShowTopArrow] = React.useState(false);
+    const [showBottomArrow, setShowBottomArrow] = React.useState(false);
+    const triggerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const scrollContainerRef = React.useRef(null);
+    const currentValue = value !== void 0 ? value : internalValue;
+    let status = "default";
+    const helperMessage = error || warning || info || success || helperText;
+    if (error) {
+      status = "error";
+    } else if (warning) {
+      status = "warning";
+    } else if (success) {
+      status = "success";
+    } else if (info) {
+      status = "info";
+    }
+    const groupedOptions = React.useMemo(() => {
+      const groups = {};
+      const ungrouped = [];
+      options.forEach((option) => {
+        if (option.group) {
+          if (!groups[option.group]) {
+            groups[option.group] = [];
+          }
+          groups[option.group].push(option);
+        } else {
+          ungrouped.push(option);
+        }
+      });
+      return { groups, ungrouped };
+    }, [options]);
+    const flattenedOptions = React.useMemo(() => {
+      const items = [];
+      groupedOptions.ungrouped.forEach((option) => {
+        items.push({ type: "option", data: option });
+      });
+      Object.entries(groupedOptions.groups).forEach(
+        ([groupName, groupOptions]) => {
+          items.push({ type: "group", data: groupName });
+          groupOptions.forEach((option) => {
+            items.push({ type: "option", data: option });
+          });
+        }
+      );
+      return items;
+    }, [groupedOptions]);
+    const filteredOptions = React.useMemo(() => {
+      if (!searchQuery) return flattenedOptions;
+      return flattenedOptions.filter((item) => {
+        if (item.type === "group") return true;
+        const option = item.data;
+        return option.label.toLowerCase().includes(searchQuery.toLowerCase());
+      });
+    }, [flattenedOptions, searchQuery]);
+    const shouldVirtualize = filteredOptions.length > virtualizeThreshold;
+    const virtualizer = useVirtualizer({
+      count: filteredOptions.length,
+      getScrollElement: () => parentNode,
+      estimateSize: () => 40,
+      enabled: shouldVirtualize
+    });
+    const virtualizerRef = React.useRef(virtualizer);
+    React.useEffect(() => {
+      virtualizerRef.current = virtualizer;
+    }, [virtualizer]);
+    const refCallback = useCallback((node) => {
+      if (node) {
+        setParentNode(node);
+        scrollContainerRef.current = node;
+      }
+    }, []);
+    const selectedOptions = options.filter(
+      (opt) => currentValue.includes(opt.value)
+    );
+    const handleSelect = React.useCallback(
+      (optionValue) => {
+        const newValue = currentValue.includes(optionValue) ? currentValue.filter((v) => v !== optionValue) : [...currentValue, optionValue];
+        if (value === void 0) {
+          setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+        setHighlightedIndex(-1);
+      },
+      [value, onChange, currentValue]
+    );
+    const handleRemoveChip = React.useCallback(
+      (optionValue, e) => {
+        e.stopPropagation();
+        const newValue = currentValue.filter((v) => v !== optionValue);
+        if (value === void 0) {
+          setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+      },
+      [value, onChange, currentValue]
+    );
+    const handleClear = React.useCallback(
+      (e) => {
+        e.stopPropagation();
+        if (value === void 0) {
+          setInternalValue([]);
+        }
+        onChange?.([]);
+      },
+      [value, onChange]
+    );
+    const handleInputChange = React.useCallback(
+      (e) => {
+        setSearchQuery(e.target.value);
+        if (!isOpen) setIsOpen(true);
+      },
+      [isOpen]
+    );
+    const handleInputFocus = React.useCallback(() => {
+      setIsOpen(true);
+    }, []);
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        if (!isOpen && e.key !== "Tab") {
+          if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+            e.preventDefault();
+            setIsOpen(true);
+          }
+          return;
+        }
+        const selectableOptions = filteredOptions.filter(
+          (item) => item.type === "option" && !item.data.disabled
+        );
+        switch (e.key) {
+          case "Escape":
+            e.preventDefault();
+            setIsOpen(false);
+            setSearchQuery("");
+            setHighlightedIndex(-1);
+            inputRef.current?.blur();
+            break;
+          case "ArrowDown":
+            e.preventDefault();
+            setHighlightedIndex((prev) => {
+              const nextIndex = Math.min(prev + 1, selectableOptions.length - 1);
+              const optionIndex = filteredOptions.indexOf(
+                selectableOptions[nextIndex]
+              );
+              if (shouldVirtualize && virtualizerRef.current) {
+                virtualizerRef.current.scrollToIndex(optionIndex, {
+                  align: "auto"
+                });
+              }
+              return nextIndex;
+            });
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            setHighlightedIndex((prev) => {
+              const nextIndex = Math.max(prev - 1, 0);
+              const optionIndex = filteredOptions.indexOf(
+                selectableOptions[nextIndex]
+              );
+              if (shouldVirtualize && virtualizerRef.current) {
+                virtualizerRef.current.scrollToIndex(optionIndex, {
+                  align: "auto"
+                });
+              }
+              return nextIndex;
+            });
+            break;
+          case "Enter":
+            e.preventDefault();
+            if (highlightedIndex >= 0 && highlightedIndex < selectableOptions.length) {
+              const option = selectableOptions[highlightedIndex].data;
+              handleSelect(option.value);
+            }
+            break;
+          case "Home":
+            e.preventDefault();
+            setHighlightedIndex(0);
+            if (shouldVirtualize && virtualizerRef.current) {
+              virtualizerRef.current.scrollToIndex(0);
+            }
+            break;
+          case "End":
+            e.preventDefault();
+            setHighlightedIndex(selectableOptions.length - 1);
+            if (shouldVirtualize && virtualizerRef.current) {
+              virtualizerRef.current.scrollToIndex(filteredOptions.length - 1);
+            }
+            break;
+        }
+      },
+      [
+        isOpen,
+        filteredOptions,
+        highlightedIndex,
+        handleSelect,
+        shouldVirtualize
+      ]
+    );
+    const handleInputKeyDown = React.useCallback(
+      (e) => {
+        if (e.key === "Backspace" && !searchQuery && currentValue.length > 0) {
+          e.preventDefault();
+          const lastValue = currentValue[currentValue.length - 1];
+          handleRemoveChip(lastValue, e);
+        } else {
+          handleKeyDown(e);
+        }
+      },
+      [searchQuery, currentValue, handleRemoveChip, handleKeyDown]
+    );
+    React.useEffect(() => {
+      if (selectedOptions.length === 0 || !triggerRef.current) {
+        setVisibleChipsCount(maxChipsVisible);
+        return;
+      }
+      const calculateVisibleChips = () => {
+        const container = triggerRef.current;
+        if (!container) return;
+        const hiddenChips = container.querySelectorAll("[data-hidden-chip]");
+        if (hiddenChips.length === 0) return;
+        const containerWidth = container.offsetWidth;
+        const padding = size === "sm" ? 12 : size === "md" ? 16 : size === "lg" ? 20 : 24;
+        const chevronWidth = 32;
+        const gap = 4;
+        const plusIndicatorWidth = 50;
+        const availableWidth = containerWidth - padding * 2 - chevronWidth;
+        let totalWidth = 0;
+        let visibleCount = 0;
+        for (let i = 0; i < hiddenChips.length; i++) {
+          const chipWidth = hiddenChips[i].getBoundingClientRect().width;
+          const requiredSpace = totalWidth + chipWidth + (visibleCount > 0 ? gap : 0);
+          const needsPlusIndicator = i < hiddenChips.length - 1;
+          const spaceWithIndicator = requiredSpace + (needsPlusIndicator ? gap + plusIndicatorWidth : 0);
+          if (spaceWithIndicator <= availableWidth) {
+            totalWidth = requiredSpace;
+            visibleCount++;
+          } else {
+            break;
+          }
+        }
+        setVisibleChipsCount(Math.max(1, visibleCount));
+      };
+      const timeoutId = setTimeout(calculateVisibleChips, 0);
+      const resizeObserver = new ResizeObserver(() => {
+        calculateVisibleChips();
+      });
+      if (triggerRef.current) {
+        resizeObserver.observe(triggerRef.current);
+      }
+      return () => {
+        clearTimeout(timeoutId);
+        resizeObserver.disconnect();
+      };
+    }, [selectedOptions, size, maxChipsVisible]);
+    const handleScroll = React.useCallback(
+      (e) => {
+        const element = e.currentTarget;
+        const { scrollTop, scrollHeight, clientHeight } = element;
+        setShowTopArrow(scrollTop > 0);
+        setShowBottomArrow(scrollTop + clientHeight < scrollHeight - 1);
+      },
+      []
+    );
+    React.useEffect(() => {
+      if (isOpen) {
+        const timeoutId = setTimeout(() => {
+          const element = scrollContainerRef.current;
+          if (element) {
+            const { scrollTop, scrollHeight, clientHeight } = element;
+            setShowTopArrow(scrollTop > 0);
+            setShowBottomArrow(scrollTop + clientHeight < scrollHeight - 1);
+          }
+        }, 50);
+        return () => clearTimeout(timeoutId);
+      } else {
+        setShowTopArrow(false);
+        setShowBottomArrow(false);
+        return;
+      }
+    }, [isOpen, filteredOptions, shouldVirtualize]);
+    const renderOptionsList = () => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      showTopArrow && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4 text-text-primary" }) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: scrollContainerRef,
+          className: "overflow-auto relative",
+          style: { maxHeight: maxDropdownHeight },
+          role: "listbox",
+          "aria-labelledby": label ? "multiselect-label" : void 0,
+          onScroll: handleScroll,
+          children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-sm text-text-muted", children: "No options found" }) : shouldVirtualize ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: refCallback,
+              style: {
+                height: `${Math.min(virtualizer.getTotalSize(), maxDropdownHeight)}px`,
+                overflow: "auto"
+              },
+              onScroll: handleScroll,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    height: `${virtualizer.getTotalSize()}px`,
+                    width: "100%",
+                    position: "relative"
+                  },
+                  children: virtualizer.getVirtualItems().map((virtualItem) => {
+                    const item = filteredOptions[virtualItem.index];
+                    if (item?.type === "group") {
+                      return /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            position: "absolute",
+                            top: 0,
+                            left: 0,
+                            width: "100%",
+                            height: `${virtualItem.size}px`,
+                            transform: `translateY(${virtualItem.start}px)`
+                          },
+                          className: multiSelectGroupVariants(),
+                          children: item?.data
+                        },
+                        `group-${virtualItem.index}`
+                      );
+                    }
+                    const option = item?.data;
+                    const isSelected = currentValue.includes(option.value);
+                    const selectableOptions = filteredOptions.filter(
+                      (i) => i.type === "option" && !i.data.disabled
+                    );
+                    const selectableIndex = selectableOptions.findIndex(
+                      (i) => i === item
+                    );
+                    const isHighlighted = selectableIndex === highlightedIndex;
+                    return /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          top: 0,
+                          left: 0,
+                          width: "100%",
+                          height: `${virtualItem.size}px`,
+                          transform: `translateY(${virtualItem.start}px)`
+                        },
+                        className: cn(
+                          multiSelectOptionVariants({
+                            selected: isSelected,
+                            disabled: !!option.disabled
+                          }),
+                          isHighlighted && "bg-surface"
+                        ),
+                        onClick: () => !option.disabled && handleSelect(option.value),
+                        role: "option",
+                        "aria-selected": isSelected,
+                        "aria-disabled": option.disabled,
+                        children: [
+                          option.label,
+                          isSelected && /* @__PURE__ */ jsx("span", { className: "absolute right-3 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(
+                            Check,
+                            {
+                              className: cn("text-primary", iconSizes[size])
+                            }
+                          ) })
+                        ]
+                      },
+                      option.value
+                    );
+                  })
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "py-1", children: filteredOptions.map((item, index) => {
+            if (item.type === "group") {
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: multiSelectGroupVariants(),
+                  children: item.data
+                },
+                `group-${index}`
+              );
+            }
+            const option = item.data;
+            const isSelected = currentValue.includes(option.value);
+            const selectableOptions = filteredOptions.filter(
+              (i) => i.type === "option" && !i.data.disabled
+            );
+            const selectableIndex = selectableOptions.findIndex(
+              (i) => i === item
+            );
+            const isHighlighted = selectableIndex === highlightedIndex;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  multiSelectOptionVariants({
+                    selected: isSelected,
+                    disabled: !!option.disabled
+                  }),
+                  isHighlighted && "bg-surface"
+                ),
+                onClick: () => !option.disabled && handleSelect(option.value),
+                role: "option",
+                "aria-selected": isSelected,
+                "aria-disabled": option.disabled,
+                children: [
+                  option.label,
+                  isSelected && /* @__PURE__ */ jsx("span", { className: "absolute right-3 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(
+                    Check,
+                    {
+                      className: cn("text-primary", iconSizes[size])
+                    }
+                  ) })
+                ]
+              },
+              option.value
+            );
+          }) })
+        }
+      ),
+      showBottomArrow && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-text-primary" }) })
+    ] });
+    const triggerButton = /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: cn(
+          multiSelectTriggerVariants({ status, size, fullWidth }),
+          loading && "opacity-50",
+          className
+        ),
+        disabled: disabled || loading,
+        "aria-haspopup": "listbox",
+        "aria-expanded": isOpen,
+        "aria-labelledby": label ? "multiselect-label" : void 0,
+        onClick: () => setIsOpen(!isOpen),
+        children: [
+          selectedOptions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex gap-1 flex-shrink-0", children: [
+            selectedOptions.slice(0, visibleChipsCount).map((option) => /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-1 px-2 py-0.5 bg-primary/10 text-primary rounded text-sm whitespace-nowrap",
+                children: [
+                  option.label,
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => handleRemoveChip(option.value, e),
+                      className: "hover:text-error",
+                      disabled,
+                      children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+                    }
+                  )
+                ]
+              },
+              option.value
+            )),
+            selectedOptions.length > visibleChipsCount && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center px-2 py-0.5 bg-surface text-text-muted rounded text-sm whitespace-nowrap", children: [
+              "+",
+              selectedOptions.length - visibleChipsCount
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute opacity-0 pointer-events-none whitespace-nowrap",
+              "aria-hidden": "true",
+              children: selectedOptions.map((option) => /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  "data-hidden-chip": true,
+                  className: "inline-flex items-center gap-1 px-2 py-0.5 bg-primary/10 text-primary rounded text-sm whitespace-nowrap",
+                  children: [
+                    option.label,
+                    /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+                  ]
+                },
+                option.value
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              className: "bg-transparent outline-none cursor-pointer placeholder:text-text-muted flex-1 min-w-0 pointer-events-none",
+              placeholder: selectedOptions.length > 0 ? "" : placeholder,
+              value: searchQuery,
+              onChange: handleInputChange,
+              onFocus: handleInputFocus,
+              onKeyDown: handleInputKeyDown,
+              disabled: disabled || loading,
+              readOnly: !isOpen,
+              tabIndex: -1
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 text-text-muted", children: loading ? /* @__PURE__ */ jsx(Loader2, { className: cn("animate-spin", iconSizes[size]) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            clearable && selectedOptions.length > 0 && !disabled && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleClear,
+                className: "hover:text-text-primary transition-colors",
+                "aria-label": "Clear selection",
+                children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] })
+              }
+            ),
+            isOpen ? /* @__PURE__ */ jsx(Search, { className: iconSizes[size] }) : /* @__PURE__ */ jsx(ChevronDown, { className: iconSizes[size] })
+          ] }) })
+        ]
+      }
+    );
+    const selectElement = /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("relative group", fullWidth ? "w-full" : "inline-block"),
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          Popover,
+          {
+            open: isOpen,
+            onOpenChange: setIsOpen,
+            children: [
+              /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: triggerButton }),
+              /* @__PURE__ */ jsx(
+                PopoverContent,
+                {
+                  className: "p-0 w-[var(--radix-popover-trigger-width)]",
+                  align: "start",
+                  sideOffset: 4,
+                  onOpenAutoFocus: (e) => {
+                    e.preventDefault();
+                    inputRef.current?.focus();
+                  },
+                  children: renderOptionsList()
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+    if (!label && !helperMessage) return selectElement;
+    return /* @__PURE__ */ jsxs("div", { className: cn("w-full flex flex-col", !fullWidth && "inline-block"), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
+        label && /* @__PURE__ */ jsx(
+          "label",
+          {
+            id: "multiselect-label",
+            className: "block mb-0.5",
+            children: /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-text-muted", children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { className: "text-error ml-1", children: "*" })
+            ] })
+          }
+        ),
+        helperMessage && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "text-xs",
+              status === "error" && "text-error",
+              status === "warning" && "text-warning",
+              status === "info" && "text-info",
+              status === "success" && "text-success",
+              status === "default" && "text-text-muted"
+            ),
+            children: helperMessage
+          }
+        )
+      ] }),
+      selectElement
+    ] });
+  }
+);
+MultiSelect.displayName = "MultiSelect";
+var multi_select_default = MultiSelect;
+
+export { multi_select_default };
+//# sourceMappingURL=chunk-W7BQYIXF.js.map
+//# sourceMappingURL=chunk-W7BQYIXF.js.map