indas-ui 0.0.1 → 0.1.0

package/dist/cjs/components/forms/dropdown/Dropdown.js

@@ -0,0 +1,427 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDropdownClassName = exports.dropdownSharedStyles = void 0;
+exports.isBase64Image = isBase64Image;
+exports.getImageSrc = getImageSrc;
+exports.OptionImage = OptionImage;
+exports.ClearButton = ClearButton;
+exports.DropdownSearch = DropdownSearch;
+exports.DropdownTrigger = DropdownTrigger;
+exports.Dropdown = Dropdown;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const Popover = __importStar(require("@radix-ui/react-popover"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils.js");
+const MultiSelect_1 = require("./MultiSelect.js");
+const SingleSelect_1 = require("./SingleSelect.js");
+const useDropdownState_1 = require("./hooks/useDropdownState.js");
+const useDropdownCreate_1 = require("./hooks/useDropdownCreate.js");
+const useDropdownFiltering_1 = require("./hooks/useDropdownFiltering.js");
+const ImageModal_1 = require("../../modals/ImageModal.js");
+/**
+ * Utility: Check if a string is a base64 image
+ * Detects both data URI format and raw base64 strings
+ */
+function isBase64Image(str) {
+    if (!str)
+        return false;
+    // Check for data URI format: data:image/...;base64,
+    if (str.startsWith('data:image/'))
+        return true;
+    // Check for raw base64 string (starts with common base64 image prefixes)
+    // Common base64 image starts: /9j/ (JPEG), iVBOR (PNG), R0lG (GIF), UklG (WebP)
+    const base64ImagePrefixes = ['/9j/', 'iVBOR', 'R0lG', 'UklG'];
+    return base64ImagePrefixes.some(prefix => str.startsWith(prefix));
+}
+/**
+ * Utility: Convert raw base64 string to data URI
+ * If already a data URI, returns as-is
+ */
+function getImageSrc(imageString) {
+    if (!imageString)
+        return undefined;
+    // Skip if it looks like regular text (not base64)
+    if (imageString.length < 20 || /^[a-zA-Z\s]+$/.test(imageString)) {
+        return undefined;
+    }
+    // Already a data URI, return as-is
+    if (imageString.startsWith('data:'))
+        return imageString;
+    // Already a URL (http/https), return as-is
+    if (imageString.startsWith('http://') || imageString.startsWith('https://'))
+        return imageString;
+    // Assume it's a raw base64 string - convert to data URI
+    // Try to detect image type from base64 prefix
+    if (imageString.startsWith('/9j/')) {
+        return `data:image/jpeg;base64,${imageString}`;
+    }
+    else if (imageString.startsWith('iVBOR')) {
+        return `data:image/png;base64,${imageString}`;
+    }
+    else if (imageString.startsWith('R0lG')) {
+        return `data:image/gif;base64,${imageString}`;
+    }
+    else if (imageString.startsWith('UklG')) {
+        return `data:image/webp;base64,${imageString}`;
+    }
+    // Default to PNG for unknown base64 (most common for backend-generated images)
+    return `data:image/png;base64,${imageString}`;
+}
+function OptionImage({ image, alt, className, expandable = true }) {
+    const [isModalOpen, setIsModalOpen] = React.useState(false);
+    const imageSrc = getImageSrc(image);
+    if (!imageSrc)
+        return null;
+    const handleImageClick = (e) => {
+        if (expandable) {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsModalOpen(true);
+        }
+    };
+    if (!expandable) {
+        return ((0, jsx_runtime_1.jsx)("img", { src: imageSrc, alt: alt, className: (0, utils_1.cn)("h-6 w-6 rounded object-cover flex-shrink-0", className), onError: (e) => {
+                e.currentTarget.style.display = 'none';
+            } }));
+    }
+    return ((0, jsx_runtime_1.jsx)(ImageModal_1.ImageModal, { title: alt, isOpen: isModalOpen, onClose: () => setIsModalOpen(false), preview: (0, jsx_runtime_1.jsx)("img", { src: imageSrc, alt: alt, className: (0, utils_1.cn)("h-6 w-6 rounded object-cover flex-shrink-0 cursor-pointer hover:ring-2 hover:ring-[rgb(var(--color-primary))] transition-all", className), onClick: handleImageClick, onError: (e) => {
+                e.currentTarget.style.display = 'none';
+            } }), previewContainerClassName: "!border-0 !bg-transparent !h-auto !p-0", children: (0, jsx_runtime_1.jsx)("img", { src: imageSrc, alt: alt, className: "max-w-full max-h-full object-contain", style: { maxHeight: '70vh' } }) }));
+}
+function ClearButton({ onClear, disabled = false, className }) {
+    return ((0, jsx_runtime_1.jsx)("div", { tabIndex: -1, "aria-label": "Clear selection", onPointerDown: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (!disabled) {
+                onClear(e);
+            }
+        }, onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!disabled) {
+                    const syntheticEvent = {
+                        ...e,
+                        preventDefault: () => e.preventDefault(),
+                        stopPropagation: () => e.stopPropagation()
+                    };
+                    onClear(syntheticEvent);
+                }
+            }
+        }, className: (0, utils_1.cn)("p-0.5 hover:bg-[rgb(var(--bg-hover))] rounded cursor-pointer", disabled && "opacity-50 pointer-events-none", className), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-2.5 w-2.5 text-[rgb(var(--fg-muted))]" }) }));
+}
+/**
+ * Shared styles for Dropdown components
+ * Centralized styling to ensure consistency across SingleSelect and MultiSelect
+ */
+exports.dropdownSharedStyles = {
+    // Trigger (button) styles
+    trigger: {
+        base: "flex items-center justify-between rounded-md border bg-bg-surface cursor-pointer transition-all duration-200",
+        focus: "focus-within:outline-none focus-within:border-[rgb(var(--color-primary))]",
+        error: "border-[rgb(var(--color-error))] focus-within:border-[rgb(var(--color-error))]",
+        normal: "border-[rgb(var(--bd-default))] hover:border-[rgb(var(--bd-hover))]",
+        disabled: "cursor-not-allowed opacity-50",
+        autoWidth: "w-fit max-w-80",
+        fullWidth: "w-full",
+        // Size variants
+        sizes: {
+            sm: "h-7 text-xs",
+            md: "h-10 text-sm",
+            lg: "h-12 text-base"
+        },
+        // Visual variants
+        variants: {
+            default: "",
+            compact: "px-2",
+            detailed: "shadow-sm"
+        }
+    },
+    // Tag styles (for multi-select tags)
+    tag: {
+        base: "inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-[rgb(var(--color-primary)/0.1)] text-[rgb(var(--color-primary))] rounded-md border border-[rgb(var(--color-primary)/0.2)] flex-shrink-0",
+        removeButton: "hover:bg-[rgb(var(--color-primary)/0.2)] rounded-full p-0.5 flex-shrink-0"
+    },
+    // Clear button
+    clearButton: "absolute right-8 top-1/2 -translate-y-1/2 p-0.5 hover:bg-[rgb(var(--bg-hover))] rounded z-10",
+    // Chevron icon
+    chevron: {
+        base: "h-4 w-4 text-[rgb(var(--fg-muted))] transition-transform duration-200",
+        open: "rotate-180"
+    },
+    // Content (popup) styles
+    content: {
+        base: "relative z-[350] w-auto max-w-80 overflow-hidden rounded-xl border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] shadow-xl",
+        animations: {
+            open: "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-98 data-[state=open]:duration-75",
+            close: "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-98 data-[state=closed]:duration-50",
+            slide: "data-[side=bottom]:slide-in-from-top-0.5 data-[side=left]:slide-in-from-right-0.5 data-[side=right]:slide-in-from-left-0.5 data-[side=top]:slide-in-from-bottom-0.5"
+        }
+    },
+    // Viewport (scrollable area) styles
+    viewport: "p-1 bg-bg-surface max-h-60 overflow-y-auto scrollbar-thin",
+    // Option/Item styles (for single-select)
+    item: {
+        base: "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-xs outline-none",
+        states: "focus:bg-[rgb(var(--bg-hover))] focus:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-hover))] transition-colors duration-150",
+        disabled: "data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed",
+        colors: "bg-bg-surface text-fg-default"
+    },
+    // Checkbox item styles (for multi-select)
+    checkboxItem: {
+        base: "relative flex w-full cursor-pointer select-none items-start rounded-sm py-1.5 px-2 text-xs transition-colors duration-150",
+        states: "hover:bg-[rgb(var(--bg-hover))]",
+        disabled: "disabled:opacity-50 disabled:cursor-not-allowed"
+    },
+    // Create option button
+    createButton: "w-full text-left px-2 py-1.5 text-xs text-[rgb(var(--color-primary))] hover:bg-[rgb(var(--color-primary)/0.05)] rounded-sm flex items-center gap-2 border-b border-[rgb(var(--bd-default))] mb-1",
+    // Empty state
+    empty: "py-6 text-center text-xs text-[rgb(var(--fg-muted))]"
+};
+/**
+ * Helper functions to get full classNames
+ */
+exports.getDropdownClassName = {
+    content: () => {
+        const { base, animations } = exports.dropdownSharedStyles.content;
+        return `${base} ${animations.open} ${animations.close} ${animations.slide}`;
+    },
+    item: () => {
+        const { base, states, disabled, colors } = exports.dropdownSharedStyles.item;
+        return `${base} ${states} ${disabled} ${colors}`;
+    },
+    checkboxItem: () => {
+        const { base, states, disabled } = exports.dropdownSharedStyles.checkboxItem;
+        return `${base} ${states} ${disabled}`;
+    }
+};
+function DropdownSearch({ searchTerm, setSearchTerm, placeholder = "Type to search...", stopAllKeyPropagation = false, resultCount, inputRef, onKeyDown }) {
+    const internalRef = React.useRef(null);
+    const searchInputRef = inputRef || internalRef;
+    // Sync callback ref to pass to <input>
+    const setRef = React.useCallback((el) => {
+        searchInputRef.current = el;
+    }, [searchInputRef]);
+    // Auto-focus search input when component mounts — desktop only
+    // On mobile/touch devices, focusing opens the virtual keyboard which causes
+    // viewport resize and Radix to detect it as an outside interaction, closing the dropdown
+    React.useEffect(() => {
+        const isTouchDevice = typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0);
+        if (isTouchDevice)
+            return;
+        const timer = setTimeout(() => {
+            searchInputRef.current?.focus();
+        }, 100);
+        return () => clearTimeout(timer);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "px-3 py-2 border-b border-[rgb(var(--bd-default))]", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 px-2 py-1.5 rounded-lg border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] transition-all", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "w-3.5 h-3.5 text-[rgb(var(--fg-muted))] flex-shrink-0" }), (0, jsx_runtime_1.jsx)("input", { ref: setRef, type: "text", placeholder: placeholder, className: "w-full text-xs bg-transparent text-[rgb(var(--fg-default))] placeholder:text-[rgb(var(--fg-muted))] focus:outline-none", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onKeyDown: (e) => {
+                        // When the consumer owns keydown (single-select), let it drive nav + commit.
+                        if (onKeyDown) {
+                            onKeyDown(e);
+                            return;
+                        }
+                        if (stopAllKeyPropagation) {
+                            // In multi-select: stop all propagation except Escape (to close the dropdown)
+                            if (e.key !== 'Escape') {
+                                e.stopPropagation();
+                            }
+                            return;
+                        }
+                        // Single-select (Radix): allow arrow keys and Enter to propagate for Radix UI navigation
+                        if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
+                            return;
+                        }
+                        e.stopPropagation();
+                    } }), resultCount != null && ((0, jsx_runtime_1.jsxs)("span", { className: "text-[0.625rem] font-medium text-[rgb(var(--fg-muted))] bg-[rgb(var(--bg-subtle))] px-1.5 py-0.5 rounded-md flex-shrink-0 tabular-nums whitespace-nowrap", children: [resultCount, " ", resultCount === 1 ? 'result' : 'results'] })), searchTerm && ((0, jsx_runtime_1.jsx)("button", { onMouseDown: (e) => {
+                        // Use mousedown + preventDefault to avoid blurring the input
+                        e.preventDefault();
+                        setSearchTerm('');
+                        searchInputRef.current?.focus();
+                    }, className: "p-0.5 hover:bg-[rgb(var(--bg-hover))] rounded cursor-pointer flex-shrink-0", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-3 w-3 text-[rgb(var(--fg-muted))]" }) }))] }) }));
+}
+function DropdownTrigger({ selectedValues, selectedOptions, placeholder, disabled, error, clearable, autoWidth, triggerClassName, className, id, 'aria-label': ariaLabel, showAsTags, showSelectedCount, open, onToggle, onClear, onRemoveTag, variant = 'default', size = 'md', trailingAction, formatSelectedCount }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsxs)("div", { id: id, role: "button", "aria-label": ariaLabel, "aria-expanded": open, "aria-haspopup": "listbox", tabIndex: disabled ? -1 : 0, className: (0, utils_1.cn)("group", exports.dropdownSharedStyles.trigger.base, exports.dropdownSharedStyles.trigger.sizes[size], exports.dropdownSharedStyles.trigger.variants[variant], exports.dropdownSharedStyles.trigger.focus, error ? exports.dropdownSharedStyles.trigger.error : exports.dropdownSharedStyles.trigger.normal, autoWidth ? exports.dropdownSharedStyles.trigger.autoWidth : exports.dropdownSharedStyles.trigger.fullWidth, disabled && exports.dropdownSharedStyles.trigger.disabled, triggerClassName, className), onClick: () => {
+                if (!disabled) {
+                    onToggle();
+                }
+            }, onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    if (!disabled) {
+                        onToggle();
+                    }
+                }
+            }, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("min-w-0 px-3 h-full", autoWidth ? "flex-shrink" : "flex-1", showAsTags ? "flex gap-1 items-center overflow-hidden flex-nowrap" : "flex items-center"), children: showAsTags ? (selectedValues.length > 0 ? (selectedValues.length <= 3 ? (
+                    // Show individual tags for 1-3 selections
+                    selectedOptions.map((option) => ((0, jsx_runtime_1.jsxs)("span", { className: exports.dropdownSharedStyles.tag.base, children: [option.image && ((0, jsx_runtime_1.jsx)(OptionImage, { image: option.image, alt: option.label, className: "h-4 w-4" })), (0, jsx_runtime_1.jsx)("span", { className: "max-w-[10rem] truncate", children: option.label }), (0, jsx_runtime_1.jsx)(ClearButton, { onClear: (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    onRemoveTag(option.value);
+                                }, disabled: disabled, className: exports.dropdownSharedStyles.tag.removeButton })] }, option.value)))) : (
+                    // Show compact count for 4+ selections
+                    (0, jsx_runtime_1.jsxs)("span", { className: (0, utils_1.cn)(exports.dropdownSharedStyles.tag.base, "cursor-default"), title: selectedOptions.map(opt => opt.label).join(', '), children: [(0, jsx_runtime_1.jsx)("span", { children: formatSelectedCount ? formatSelectedCount(selectedValues.length) : `${selectedValues.length} selected` }), (0, jsx_runtime_1.jsx)(ClearButton, { onClear: onClear, disabled: disabled, className: exports.dropdownSharedStyles.tag.removeButton })] }))) : ((0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))] text-xs truncate", children: placeholder }))) : (
+                    // Always show count for multi-select
+                    selectedValues.length > 0 ? ((0, jsx_runtime_1.jsx)("span", { className: "text-xs truncate text-fg-default", children: formatSelectedCount ? formatSelectedCount(selectedValues.length) : `${selectedValues.length} selected` })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-xs truncate text-[rgb(var(--fg-muted))]", children: placeholder }))) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-0.5 pr-2 pl-1 flex-shrink-0", children: [clearable && selectedValues.length > 0 && !disabled && ((0, jsx_runtime_1.jsx)(ClearButton, { onClear: onClear, disabled: disabled })), trailingAction && (
+                        // Stop click/keydown bubbling so interacting with the trailing action
+                        // (e.g. opening a side popover) doesn't toggle the dropdown itself.
+                        (0, jsx_runtime_1.jsx)("div", { className: "flex items-center", onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: trailingAction })), (0, jsx_runtime_1.jsx)("div", { onClick: (e) => {
+                                e.stopPropagation();
+                                if (!disabled) {
+                                    onToggle();
+                                }
+                            }, className: "hover:bg-[rgb(var(--bg-hover))] rounded transition-colors cursor-pointer pr-0.5", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: (0, utils_1.cn)(exports.dropdownSharedStyles.chevron.base, open && exports.dropdownSharedStyles.chevron.open) }) })] })] }) }));
+}
+function Dropdown({ options = [], value, placeholder = "Select an option", onValueChange, onOpen, disabled = false, loading = false, searchable = true, clearable = true, className, error = false, label, labelExtra, required = false, emptyMessage = "No options found", triggerClassName, id, 'aria-label': ariaLabel, autoWidth = false, customFooter, multiSelect = false, maxSelections, showSelectedCount = true, showAsTags = false, allowTextInput = false, onCreateOption, createOptionLabel = "Create", allowCustomValues = false, allowCustomInput = false, variant = 'default', size = 'md', contentClassName, selectAllLabel, hideSelectAll = false, showOnlyButton = false, customTrigger, trailingAction, formatSelectedCount, preserveOrder = false }) {
+    const [open, setOpen] = React.useState(false);
+    const [searchTerm, setSearchTerm] = React.useState('');
+    const containerRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const dropdownContentRef = React.useRef(null);
+    // Custom hooks
+    const { createdOptions, isCreating, enableTextInput, effectiveCreateOption, handleCreateOption: createOption } = (0, useDropdownCreate_1.useDropdownCreate)(allowTextInput, allowCustomInput, onCreateOption);
+    const { allOptions, selectedValues, selectedOptions, selectedOption } = (0, useDropdownState_1.useDropdownState)(value, multiSelect, options, createdOptions);
+    // Multiselect: selected options render at the top of the list. The selected set
+    // is frozen at the moment the list OPENS, so ticking doesn't reorder rows
+    // mid-interaction — the new order applies on the next open.
+    const [pinSnapshot, setPinSnapshot] = React.useState(undefined);
+    React.useEffect(() => {
+        if (!multiSelect)
+            return;
+        if (open)
+            setPinSnapshot(selectedValues.map(String));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, multiSelect]);
+    const { filteredOptions, showCreateOption } = (0, useDropdownFiltering_1.useDropdownFiltering)(allOptions, searchTerm, enableTextInput, multiSelect ? pinSnapshot : undefined, preserveOrder);
+    // Smart positioning to prevent modal overflow
+    const [dropdownAlign, setDropdownAlign] = React.useState('left');
+    React.useEffect(() => {
+        if (!open || !multiSelect || !containerRef.current)
+            return;
+        const container = containerRef.current;
+        const rect = container.getBoundingClientRect();
+        const viewport = { width: window.innerWidth, height: window.innerHeight };
+        // Check if dropdown would overflow on the right
+        const dropdownWidth = Math.max(rect.width, 320); // min 20rem = 320px
+        const spaceRight = viewport.width - rect.left;
+        // If there's not enough space on the right, align to the right edge of input
+        setDropdownAlign(spaceRight >= dropdownWidth ? 'left' : 'right');
+    }, [open, multiSelect]);
+    // Handle click outside to close dropdown for multi-select
+    React.useEffect(() => {
+        if (!open || !multiSelect)
+            return;
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            // Check if click is outside both the container AND the dropdown content
+            const isOutsideContainer = containerRef.current && !containerRef.current.contains(target);
+            const isOutsideDropdown = dropdownContentRef.current && !dropdownContentRef.current.contains(target);
+            if (isOutsideContainer && isOutsideDropdown) {
+                setOpen(false);
+                setSearchTerm('');
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [open, multiSelect]);
+    const handleOpenChange = React.useCallback((newOpen) => {
+        setOpen(newOpen);
+        if (newOpen && onOpen) {
+            onOpen();
+        }
+        if (!newOpen) {
+            // If allowCustomValues is enabled and there's a search term, accept it as the value
+            if (allowCustomValues && searchTerm.trim()) {
+                // Check if it's not already in the options
+                const existingOption = allOptions.find(opt => String(opt.label ?? '').toLowerCase() === searchTerm.toLowerCase());
+                if (!existingOption) {
+                    // Accept the custom value directly
+                    onValueChange(searchTerm.trim());
+                }
+            }
+            setSearchTerm('');
+        }
+    }, [onOpen, allowCustomValues, searchTerm, allOptions, onValueChange]);
+    const handleClear = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (multiSelect) {
+            onValueChange([]);
+        }
+        else {
+            onValueChange('');
+        }
+    }, [multiSelect, onValueChange]);
+    const handleToggleOption = React.useCallback((optionValue) => {
+        if (!multiSelect)
+            return;
+        // Handle bulk selection (for Select All / Deselect All)
+        if (Array.isArray(optionValue)) {
+            onValueChange(optionValue);
+            return;
+        }
+        const stringValue = optionValue.toString();
+        const currentValues = Array.isArray(value) ? value.map(v => v.toString()) : [];
+        let newValues;
+        if (currentValues.includes(stringValue)) {
+            newValues = currentValues.filter(v => v !== stringValue);
+        }
+        else {
+            if (maxSelections && currentValues.length >= maxSelections) {
+                return; // Don't add if max selections reached
+            }
+            newValues = [...currentValues, stringValue];
+        }
+        onValueChange(newValues);
+    }, [multiSelect, value, maxSelections, onValueChange]);
+    const handleRemoveTag = React.useCallback((optionValue) => {
+        if (!multiSelect)
+            return;
+        const stringValue = optionValue.toString();
+        const currentValues = Array.isArray(value) ? value.map(v => v.toString()) : [];
+        const newValues = currentValues.filter(v => v !== stringValue);
+        onValueChange(newValues);
+    }, [multiSelect, value, onValueChange]);
+    const handleCreateOption = React.useCallback(() => {
+        createOption(searchTerm, multiSelect, value, onValueChange, setSearchTerm, setOpen);
+    }, [createOption, searchTerm, multiSelect, value, onValueChange]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: "w-full", children: [label && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [(0, jsx_runtime_1.jsxs)("label", { className: "block text-xs font-medium text-[rgb(var(--fg-default))]", children: [label, required && (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-default))] ml-1", children: "*" })] }), labelExtra] })), multiSelect ? (
+            // Multi-select implementation with Radix Popover (same positioning as SingleSelect)
+            (0, jsx_runtime_1.jsxs)(Popover.Root, { open: open, onOpenChange: handleOpenChange, children: [(0, jsx_runtime_1.jsx)(Popover.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("div", { ref: triggerRef, children: customTrigger || ((0, jsx_runtime_1.jsx)(DropdownTrigger, { selectedValues: selectedValues, selectedOptions: selectedOptions, placeholder: placeholder, disabled: disabled, error: !!error, clearable: clearable, autoWidth: autoWidth, triggerClassName: triggerClassName, className: className, id: id, "aria-label": ariaLabel, showAsTags: showAsTags, showSelectedCount: showSelectedCount, open: open, onToggle: () => handleOpenChange(!open), onClear: handleClear, onRemoveTag: handleRemoveTag, variant: variant, size: size, trailingAction: trailingAction, formatSelectedCount: formatSelectedCount })) }) }), (0, jsx_runtime_1.jsx)(Popover.Portal, { container: typeof document !== 'undefined' ? document.body : undefined, children: (0, jsx_runtime_1.jsx)(Popover.Content, { ref: dropdownContentRef, className: (0, utils_1.cn)(exports.getDropdownClassName.content(), "flex flex-col"), side: "bottom", align: "start", sideOffset: 4, avoidCollisions: true, sticky: "always", collisionPadding: 16, onOpenAutoFocus: (e) => e.preventDefault(), children: (0, jsx_runtime_1.jsx)(MultiSelect_1.MultiSelect, { filteredOptions: filteredOptions, selectedValues: selectedValues, searchable: searchable, searchTerm: searchTerm, setSearchTerm: setSearchTerm, loading: loading, emptyMessage: emptyMessage, showCreateOption: showCreateOption, effectiveCreateOption: effectiveCreateOption, isCreating: isCreating, allowCustomInput: allowCustomInput, createOptionLabel: createOptionLabel, handleCreateOption: handleCreateOption, handleToggleOption: handleToggleOption, customFooter: customFooter, selectAllLabel: selectAllLabel, hideSelectAll: hideSelectAll, showOnlyButton: showOnlyButton, onClose: () => setOpen(false) }) }) })] })) : (
+            // Single-select implementation using Radix
+            (0, jsx_runtime_1.jsx)(SingleSelect_1.SingleSelect, { value: value, onValueChange: onValueChange, open: open, onOpenChange: handleOpenChange, disabled: disabled, placeholder: placeholder, error: !!error, clearable: clearable, autoWidth: autoWidth, triggerClassName: triggerClassName, className: className, id: id, "aria-label": ariaLabel, searchable: searchable, searchTerm: searchTerm, setSearchTerm: setSearchTerm, filteredOptions: filteredOptions, allOptions: allOptions, loading: loading, emptyMessage: emptyMessage, showCreateOption: showCreateOption, effectiveCreateOption: effectiveCreateOption, isCreating: isCreating, allowCustomInput: allowCustomInput, createOptionLabel: createOptionLabel, handleCreateOption: handleCreateOption, handleClear: handleClear, customFooter: customFooter, variant: variant, size: size, trailingAction: trailingAction, customTrigger: customTrigger, contentClassName: contentClassName }))] }));
+}

package/dist/cjs/components/forms/dropdown/MultiSelect.js

@@ -0,0 +1,136 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiSelect = MultiSelect;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils.js");
+const Dropdown_1 = require("./Dropdown.js");
+function MultiSelect({ filteredOptions, selectedValues, searchable, searchTerm, setSearchTerm, loading, emptyMessage, showCreateOption, effectiveCreateOption, isCreating, allowCustomInput, createOptionLabel, handleCreateOption, handleToggleOption, customFooter, selectAllLabel, hideSelectAll = false, showOnlyButton = false, onClose }) {
+    const [highlightedIndex, setHighlightedIndex] = React.useState(0);
+    const optionRefs = React.useRef([]);
+    const scrollContainerRef = React.useRef(null);
+    const searchInputRef = React.useRef(null);
+    // Reset highlighted index when filtered options change
+    React.useEffect(() => {
+        setHighlightedIndex(0);
+    }, [filteredOptions.length, searchTerm]);
+    // Scroll highlighted option into view
+    React.useEffect(() => {
+        if (highlightedIndex >= 0 && optionRefs.current[highlightedIndex]) {
+            optionRefs.current[highlightedIndex]?.scrollIntoView({
+                block: 'nearest',
+                behavior: 'smooth'
+            });
+        }
+    }, [highlightedIndex]);
+    // Handle keyboard navigation
+    const handleKeyDown = React.useCallback((e) => {
+        if (!filteredOptions.length)
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                setHighlightedIndex(prev => prev < filteredOptions.length - 1 ? prev + 1 : 0);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setHighlightedIndex(prev => prev > 0 ? prev - 1 : filteredOptions.length - 1);
+                break;
+            case 'Tab':
+            case 'Enter':
+                e.preventDefault();
+                if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
+                    const option = filteredOptions[highlightedIndex];
+                    if (!option.disabled) {
+                        handleToggleOption(option.value);
+                    }
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                // Let parent handle close
+                break;
+        }
+    }, [filteredOptions, highlightedIndex, handleToggleOption]);
+    // Handle Select All / Deselect All
+    const handleSelectAll = React.useCallback(() => {
+        const allValues = filteredOptions
+            .filter(option => !option.disabled && option.value !== '')
+            .map(option => option.value.toString());
+        // If all are selected, deselect all. Otherwise, select all.
+        const allSelected = allValues.every(value => selectedValues.includes(value));
+        if (allSelected) {
+            // Deselect all from filtered options
+            const newValues = selectedValues.filter(val => !allValues.includes(val));
+            handleToggleOption(newValues);
+        }
+        else {
+            // Select all filtered options
+            const newValues = Array.from(new Set([...selectedValues, ...allValues]));
+            handleToggleOption(newValues);
+        }
+    }, [filteredOptions, selectedValues, handleToggleOption]);
+    // Handle mouse wheel scrolling - prevent Radix Popover from blocking wheel events
+    const handleWheel = React.useCallback((e) => {
+        // Don't prevent default - let browser handle native scrolling
+        // Just stop propagation to prevent Popover from interfering
+        e.stopPropagation();
+    }, []);
+    const allSelected = filteredOptions.filter(opt => !opt.disabled && opt.value !== '').length > 0 &&
+        filteredOptions
+            .filter(opt => !opt.disabled && opt.value !== '')
+            .every(opt => selectedValues.includes(opt.value.toString()));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col overflow-hidden", onKeyDown: handleKeyDown, children: [!hideSelectAll && !loading && filteredOptions.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "bg-[rgb(var(--bg-subtle))] border-b border-[rgb(var(--bd-default))] px-3 py-2.5 flex-shrink-0", onMouseDown: (e) => e.preventDefault(), children: (0, jsx_runtime_1.jsxs)("label", { className: "flex items-center gap-2.5 cursor-pointer group", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative flex items-center justify-center flex-shrink-0", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: allSelected, onChange: handleSelectAll, className: "peer sr-only" }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("w-4 h-4 rounded border-2 transition-all duration-150 flex items-center justify-center", allSelected
+                                        ? "bg-[rgb(var(--color-primary))] border-[rgb(var(--color-primary))]"
+                                        : "border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] group-hover:border-[rgb(var(--color-primary))]"), children: allSelected && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "w-3 h-3 text-white", strokeWidth: 3 })) })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: selectAllLabel || (allSelected ? 'Deselect All' : 'Select All') })] }) })), searchable && ((0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0", children: (0, jsx_runtime_1.jsx)(Dropdown_1.DropdownSearch, { searchTerm: searchTerm, setSearchTerm: setSearchTerm, stopAllKeyPropagation: true, resultCount: filteredOptions.filter(o => o.value !== '').length, inputRef: searchInputRef }) })), (0, jsx_runtime_1.jsxs)("div", { ref: scrollContainerRef, className: "p-1 bg-bg-surface flex-1 min-h-0 max-h-60 overflow-y-auto scrollbar-thin", onWheel: handleWheel, onMouseDown: (e) => {
+                    // Prevent focus from leaving the search input when clicking options
+                    e.preventDefault();
+                }, children: [showCreateOption && effectiveCreateOption && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleCreateOption, disabled: isCreating, className: "w-full text-left px-2 py-1.5 text-sm text-primary hover:bg-blue-50 rounded-sm flex items-center gap-2 border-b border-gray-200 mb-1", children: isCreating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "h-4 w-4 border-2 border-primary border-t-transparent rounded-full animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Creating..." })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-lg", children: "+" }), (0, jsx_runtime_1.jsxs)("span", { children: [allowCustomInput ? 'Add' : createOptionLabel, " \"", searchTerm, "\""] })] })) })), loading ? ((0, jsx_runtime_1.jsx)("div", { className: "py-6 text-center text-sm text-fg-muted bg-bg-surface", children: "Loading..." })) : filteredOptions.length === 0 && !showCreateOption ? ((0, jsx_runtime_1.jsx)("div", { className: "py-6 text-center text-sm text-fg-muted bg-bg-surface", children: searchTerm ? emptyMessage : "No options available" })) : (filteredOptions
+                        .filter(option => option.value !== '') // Filter out empty values
+                        .map((option, index) => {
+                        const isChecked = selectedValues.includes(option.value.toString());
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("relative flex w-full items-center justify-between rounded-md py-2 px-3 text-xs transition-colors duration-150 group", "hover:bg-[rgb(var(--bg-subtle))]", highlightedIndex === index && "bg-[rgb(var(--bg-subtle))]", option.disabled && "pointer-events-none opacity-50"), children: [(0, jsx_runtime_1.jsxs)("label", { ref: (el) => { optionRefs.current[index] = el; }, className: "flex items-center gap-2.5 flex-1 cursor-pointer select-none", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative flex items-center justify-center flex-shrink-0", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isChecked, onChange: () => !option.disabled && handleToggleOption(option.value), className: "peer sr-only", disabled: option.disabled }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("w-4 h-4 rounded border-2 transition-all duration-150 flex items-center justify-center", isChecked
+                                                        ? "bg-[rgb(var(--color-primary))] border-[rgb(var(--color-primary))]"
+                                                        : "border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] group-hover:border-[rgb(var(--color-primary))]"), children: isChecked && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "w-3 h-3 text-white", strokeWidth: 3 })) })] }), option.image && ((0, jsx_runtime_1.jsx)(Dropdown_1.OptionImage, { image: option.image, alt: option.label, className: "ml-2" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-[rgb(var(--fg-default))] truncate", children: option.label }), option.description && ((0, jsx_runtime_1.jsx)("div", { className: "text-[0.625rem] text-[rgb(var(--fg-muted))] mt-0.5 truncate", children: option.description }))] })] }), showOnlyButton && !option.disabled && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                                        e.stopPropagation();
+                                        // Select ONLY this option and close dropdown
+                                        handleToggleOption([option.value.toString()]);
+                                        onClose?.();
+                                    }, className: (0, utils_1.cn)("text-[0.625rem] font-semibold px-2 py-0.5 rounded flex-shrink-0 ml-2", "border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))]", "text-[rgb(var(--fg-muted))]", "opacity-0 group-hover:opacity-100 transition-opacity", "hover:bg-[rgb(var(--color-primary))] hover:text-white hover:border-[rgb(var(--color-primary))]"), children: "ONLY" }))] }, option.key || `${option.value}-${index}`));
+                    }))] }), customFooter && ((0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0", children: customFooter }))] }));
+}