@metropolle/design-system 1.0.0-beta.2025.12.14.1932.93a1534 → 1.0.0-beta.2025.12.29.1122.b256706

package/dist/react/index.esm.js

@@ -1,4 +1,4 @@
-import require$$0, { forwardRef, useState, useEffect, useMemo, useRef } from 'react';
+import require$$0, { forwardRef, useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 
 var jsxRuntime = {exports: {}};
@@ -1520,22 +1520,241 @@ const LoadingSpinner = () => (jsxRuntimeExports.jsxs("svg", { className: "mds-sp
 /**
  * Select Component (Design System)
  *
- * Provides a themed select element with multiple variants:
- * - `base`: Standard form select with mds-input styling
- * - `themed`: Generic themed select with dashboard control styling (recommended)
- * - `dashboard`: Legacy alias for themed variant (backward compatibility)
+ * Custom dropdown select that renders consistently across all browsers.
+ * Unlike native <select>, this component renders the dropdown via JavaScript,
+ * ensuring proper theming support on Edge/Chrome Windows.
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   options={[
+ *     { label: 'Option 1', value: '1' },
+ *     { label: 'Option 2', value: '2' },
+ *   ]}
+ *   value={selectedValue}
+ *   onChange={setSelectedValue}
+ *   placeholder="Select an option..."
+ * />
+ * ```
  */
-const Select = forwardRef(({ options, children, className, containerClassName, variant = 'themed', ...rest }, ref) => {
-    const isThemed = variant === 'themed' || variant === 'dashboard';
-    const selectEl = (jsxRuntimeExports.jsx("select", { ref: ref, className: cn(isThemed
-            ? 'mds-select-themed'
-            : 'mds-input mds-select', className), ...rest, children: options
-            ? options.map(opt => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))
-            : children }));
-    if (isThemed) {
-        return (jsxRuntimeExports.jsx("div", { className: cn('mds-dropdown', containerClassName), children: selectEl }));
-    }
-    return selectEl;
+const Select = forwardRef(({ options, value, onChange, placeholder = 'Select...', variant = 'themed', size = 'md', disabled = false, loading = false, error = false, className, dropdownClassName, id, name, 'aria-label': ariaLabel, fullWidth = false, searchable = false, searchPlaceholder = 'Search...', maxHeight = 300, zIndex = 1050, }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [mounted, setMounted] = useState(false);
+    const triggerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const listRef = useRef(null);
+    // Combine refs
+    const combinedRef = (el) => {
+        triggerRef.current = el;
+        if (typeof ref === 'function') {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    };
+    // Client-side only
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    // Filter options based on search
+    const filteredOptions = useMemo(() => {
+        if (!searchTerm)
+            return options;
+        const term = searchTerm.toLowerCase();
+        return options.filter(opt => {
+            const label = typeof opt.label === 'string' ? opt.label : String(opt.value);
+            return label.toLowerCase().includes(term);
+        });
+    }, [options, searchTerm]);
+    // Get selected option label
+    const selectedOption = useMemo(() => {
+        return options.find(opt => opt.value === value);
+    }, [options, value]);
+    // Handle dropdown positioning
+    const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
+    const updateDropdownPosition = useCallback(() => {
+        if (!triggerRef.current)
+            return;
+        const rect = triggerRef.current.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const spaceBelow = viewportHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        // Determine if dropdown should open above or below
+        const dropdownHeight = Math.min(maxHeight, filteredOptions.length * 40 + (searchable ? 48 : 0));
+        const openAbove = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
+        setDropdownPosition({
+            top: openAbove ? rect.top - dropdownHeight : rect.bottom + 4,
+            left: rect.left,
+            width: rect.width,
+        });
+    }, [maxHeight, filteredOptions.length, searchable]);
+    // Open dropdown
+    const openDropdown = useCallback(() => {
+        if (disabled || loading)
+            return;
+        updateDropdownPosition();
+        setIsOpen(true);
+        setSearchTerm('');
+        setHighlightedIndex(value ? filteredOptions.findIndex(opt => opt.value === value) : 0);
+    }, [disabled, loading, updateDropdownPosition, value, filteredOptions]);
+    // Close dropdown
+    const closeDropdown = useCallback(() => {
+        setIsOpen(false);
+        setSearchTerm('');
+        setHighlightedIndex(-1);
+        triggerRef.current?.focus();
+    }, []);
+    // Handle option select
+    const handleSelect = useCallback((optionValue) => {
+        // Safety check: ensure we're passing a string, not an object
+        const safeValue = typeof optionValue === 'string' ? optionValue : String(optionValue);
+        onChange?.(safeValue);
+        closeDropdown();
+    }, [onChange, closeDropdown]);
+    // Keyboard navigation
+    const handleKeyDown = useCallback((e) => {
+        if (disabled || loading)
+            return;
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (isOpen && highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+                    const opt = filteredOptions[highlightedIndex];
+                    if (!opt.disabled) {
+                        handleSelect(opt.value);
+                    }
+                }
+                else if (!isOpen) {
+                    openDropdown();
+                }
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!isOpen) {
+                    openDropdown();
+                }
+                else {
+                    setHighlightedIndex(prev => {
+                        const next = prev + 1;
+                        return next >= filteredOptions.length ? 0 : next;
+                    });
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (isOpen) {
+                    setHighlightedIndex(prev => {
+                        const next = prev - 1;
+                        return next < 0 ? filteredOptions.length - 1 : next;
+                    });
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                closeDropdown();
+                break;
+            case 'Tab':
+                if (isOpen) {
+                    closeDropdown();
+                }
+                break;
+            case 'Home':
+                if (isOpen) {
+                    e.preventDefault();
+                    setHighlightedIndex(0);
+                }
+                break;
+            case 'End':
+                if (isOpen) {
+                    e.preventDefault();
+                    setHighlightedIndex(filteredOptions.length - 1);
+                }
+                break;
+        }
+    }, [disabled, loading, isOpen, highlightedIndex, filteredOptions, handleSelect, openDropdown, closeDropdown]);
+    // Click outside to close
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (e) => {
+            if (triggerRef.current?.contains(e.target) ||
+                dropdownRef.current?.contains(e.target)) {
+                return;
+            }
+            closeDropdown();
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen, closeDropdown]);
+    // Update position on scroll/resize
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleUpdate = () => updateDropdownPosition();
+        window.addEventListener('scroll', handleUpdate, true);
+        window.addEventListener('resize', handleUpdate);
+        return () => {
+            window.removeEventListener('scroll', handleUpdate, true);
+            window.removeEventListener('resize', handleUpdate);
+        };
+    }, [isOpen, updateDropdownPosition]);
+    // Focus search input when dropdown opens
+    useEffect(() => {
+        if (isOpen && searchable && searchInputRef.current) {
+            searchInputRef.current.focus();
+        }
+    }, [isOpen, searchable]);
+    // Scroll highlighted option into view
+    useEffect(() => {
+        if (!isOpen || highlightedIndex < 0 || !listRef.current)
+            return;
+        const highlighted = listRef.current.children[highlightedIndex];
+        if (highlighted) {
+            highlighted.scrollIntoView({ block: 'nearest' });
+        }
+    }, [isOpen, highlightedIndex]);
+    // Size classes
+    const sizeClasses = {
+        sm: 'mds-select--sm',
+        md: 'mds-select--md',
+        lg: 'mds-select--lg',
+    };
+    // Variant classes
+    const variantClasses = {
+        base: 'mds-select--base',
+        themed: 'mds-select--themed',
+        dashboard: 'mds-select--themed',
+    };
+    const triggerClasses = cn('mds-select-trigger', sizeClasses[size], variantClasses[variant], isOpen && 'mds-select-trigger--open', disabled && 'mds-select-trigger--disabled', loading && 'mds-select-trigger--loading', error && 'mds-select-trigger--error', fullWidth && 'mds-select-trigger--full-width', className);
+    const dropdownClasses = cn('mds-select-dropdown', variantClasses[variant], dropdownClassName);
+    // Hidden input for form submission
+    const hiddenInput = name ? (jsxRuntimeExports.jsx("input", { type: "hidden", name: name, value: value || '' })) : null;
+    // Dropdown portal content
+    const dropdownContent = isOpen && mounted ? createPortal(jsxRuntimeExports.jsxs("div", { ref: dropdownRef, className: dropdownClasses, style: {
+            position: 'fixed',
+            top: dropdownPosition.top,
+            left: dropdownPosition.left,
+            width: dropdownPosition.width,
+            maxHeight,
+            zIndex,
+        }, role: "listbox", "aria-label": ariaLabel || placeholder, children: [searchable && (jsxRuntimeExports.jsxs("div", { className: "mds-select-search", children: [jsxRuntimeExports.jsx("input", { ref: searchInputRef, type: "text", className: "mds-select-search__input", placeholder: searchPlaceholder, value: searchTerm, onChange: (e) => {
+                            setSearchTerm(e.target.value);
+                            setHighlightedIndex(0);
+                        }, onKeyDown: handleKeyDown, "aria-label": "Search options" }), jsxRuntimeExports.jsx("svg", { className: "mds-select-search__icon", viewBox: "0 0 20 20", fill: "currentColor", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z", clipRule: "evenodd" }) })] })), jsxRuntimeExports.jsx("ul", { ref: listRef, className: "mds-select-options", children: filteredOptions.length === 0 ? (jsxRuntimeExports.jsx("li", { className: "mds-select-option mds-select-option--empty", children: "No options found" })) : (filteredOptions.map((option, index) => (jsxRuntimeExports.jsxs("li", { className: cn('mds-select-option', option.value === value && 'mds-select-option--selected', index === highlightedIndex && 'mds-select-option--highlighted', option.disabled && 'mds-select-option--disabled'), role: "option", "aria-selected": option.value === value, "aria-disabled": option.disabled, onClick: () => {
+                        if (!option.disabled) {
+                            handleSelect(option.value);
+                        }
+                    }, onMouseEnter: () => {
+                        if (!option.disabled) {
+                            setHighlightedIndex(index);
+                        }
+                    }, children: [jsxRuntimeExports.jsx("span", { className: "mds-select-option__label", children: option.label }), option.value === value && (jsxRuntimeExports.jsx("svg", { className: "mds-select-option__check", viewBox: "0 0 20 20", fill: "currentColor", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }))] }, option.value)))) })] }), document.body) : null;
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [hiddenInput, jsxRuntimeExports.jsxs("button", { ref: combinedRef, type: "button", id: id, className: triggerClasses, onClick: () => isOpen ? closeDropdown() : openDropdown(), onKeyDown: handleKeyDown, disabled: disabled || loading, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-label": ariaLabel, "aria-invalid": error, children: [jsxRuntimeExports.jsx("span", { className: cn('mds-select-trigger__value', !selectedOption && 'mds-select-trigger__placeholder'), children: loading ? 'Loading...' : (selectedOption?.label || placeholder) }), jsxRuntimeExports.jsx("span", { className: "mds-select-trigger__icon", children: loading ? (jsxRuntimeExports.jsx("svg", { className: "mds-select-spinner", viewBox: "0 0 24 24", fill: "none", children: jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeDasharray: "32", strokeDashoffset: "32", children: jsxRuntimeExports.jsx("animate", { attributeName: "stroke-dashoffset", values: "32;0", dur: "1s", repeatCount: "indefinite" }) }) })) : (jsxRuntimeExports.jsx("svg", { className: "mds-select-chevron", viewBox: "0 0 20 20", fill: "currentColor", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) })) })] }), dropdownContent] }));
 });
 Select.displayName = 'Select';