flikkui 0.1.0-beta.8 → 0.2.0-beta.1

package/dist/components/forms/Select/Select.js

@@ -1,99 +1,184 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { createContext, useState, useRef, useEffect, useContext } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { createPortal } from 'react-dom';
 import { selectTheme } from './Select.theme.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { Input } from '../Input/Input.js';
 import '../Input/Input.theme.js';
-import '../../../icons/core/PlusIcon.js';
-import '../../../icons/core/MinusIcon.js';
-import { SearchIcon } from '../../../icons/core/SearchIcon.js';
-import '../../../icons/core/LockIcon.js';
-import '../../../icons/core/DollarIcon.js';
-import '../../../icons/core/TickIcon.js';
-import { dropdownAnimations } from './Select.animations.js';
+import { createDropdownAnimations } from './Select.animations.js';
 import { ChevronUpDownIcon } from '../../../icons/core/ChevronUpDown.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
+import { cn } from '../../../utils/cn.js';
+import { isValidTypeaheadChar, findNextMatchingOption, TYPEAHEAD_TIMEOUT_MS } from '../../../utils/typeaheadUtils.js';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 
-var SelectContext = createContext(undefined);
-var useSelectContext = function () {
-    var context = useContext(SelectContext);
+/**
+ * Hook to detect dark mode state from document
+ */
+const useDarkMode = () => {
+    const [isDark, setIsDark] = useState(false);
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const checkDarkMode = () => {
+            const hasDarkClass = document.documentElement.classList.contains("dark") ||
+                document.body.classList.contains("dark") ||
+                document.querySelector(".dark") !== null;
+            setIsDark(hasDarkClass);
+        };
+        checkDarkMode();
+        // Observe class changes on html and body
+        const observer = new MutationObserver(checkDarkMode);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return isDark;
+};
+const SelectContext = createContext(undefined);
+const useSelectContext = () => {
+    const context = useContext(SelectContext);
     if (!context) {
         throw new Error("Select components must be used within a SelectContainer");
     }
     return context;
 };
-/**
- * Select Label Component
- */
-var SelectLabel = function (_a) {
-    var htmlFor = _a.htmlFor, required = _a.required, _b = _a.className, className = _b === void 0 ? "" : _b, children = _a.children;
-    var theme = useSelectContext().theme;
-    var labelStyle = theme.labelStyle || "";
-    return (React__default.createElement("label", { htmlFor: htmlFor, className: "".concat(labelStyle, " ").concat(className) },
-        children,
-        required && React__default.createElement("span", { className: "text-danger-base ml-1" }, "*")));
-};
 /**
  * Select Button Component
  */
-var SelectButton = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var id = _a.id, disabled = _a.disabled, isOpen = _a.isOpen, _h = _a.state, state = _h === void 0 ? "default" : _h, _j = _a.size, size = _j === void 0 ? "md" : _j, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, _k = _a.className, className = _k === void 0 ? "" : _k, onClick = _a.onClick, onFocus = _a.onFocus, onBlur = _a.onBlur, children = _a.children;
-    var _l = useSelectContext(), theme = _l.theme, buttonRef = _l.buttonRef;
-    var baseStyle = theme.baseStyle || "";
-    var sizeStyle = ((_b = theme.sizes) === null || _b === void 0 ? void 0 : _b[size]) || "";
-    var stateStyle = ((_c = theme.states) === null || _c === void 0 ? void 0 : _c[state]) || "";
-    var hoverStateStyle = ((_d = theme.hoverStates) === null || _d === void 0 ? void 0 : _d[state]) || "";
-    var focusStateStyle = ((_e = theme.focusStates) === null || _e === void 0 ? void 0 : _e[state]) || "";
-    var buttonWrapperStyle = theme.buttonWrapperStyle || "";
-    var buttonStyle = theme.buttonStyle || "";
-    var leftIconStyle = theme.leftIconStyle || "";
-    var rightIconStyle = theme.rightIconStyle || "";
-    var leftIconPadding = leftIcon ? ((_f = theme.iconPadding) === null || _f === void 0 ? void 0 : _f.left) || "" : "";
-    var rightIconPadding = rightIcon ? ((_g = theme.iconPadding) === null || _g === void 0 ? void 0 : _g.right) || "" : "";
+const SelectButton = ({ id, disabled, isOpen, state = "default", size = "md", iconStart, iconEnd, className = "", onClick, onFocus, onBlur, children, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { theme, buttonRef } = useSelectContext();
+    const baseStyle = theme.baseStyle || "";
+    const sizeStyle = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || "";
+    const stateStyle = ((_b = theme.states) === null || _b === void 0 ? void 0 : _b[state]) || "";
+    const hoverStateStyle = ((_c = theme.hoverStates) === null || _c === void 0 ? void 0 : _c[state]) || "";
+    const focusStateStyle = ((_d = theme.focusStates) === null || _d === void 0 ? void 0 : _d[state]) || "";
+    const buttonWrapperStyle = theme.buttonWrapperStyle || "";
+    const buttonStyle = theme.buttonStyle || "";
+    const iconStartStyle = theme.iconStartStyle || "";
+    const iconEndStyle = theme.iconEndStyle || "";
+    const iconStartPadding = iconStart ? ((_e = theme.iconPadding) === null || _e === void 0 ? void 0 : _e.left) || "" : "";
+    const iconEndPadding = iconEnd ? ((_f = theme.iconPadding) === null || _f === void 0 ? void 0 : _f.right) || "" : "";
     // Use either the themed focus state or directly apply the focus classes if the theme is not working
-    var activeFocusState = isOpen
-        ? focusStateStyle || "outline-2 outline-primary-600 -outline-offset-1 ring-4 ring-primary-base/10"
+    const activeFocusState = isOpen
+        ? focusStateStyle ||
+            "outline-2 outline-[var(--color-primary)] -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
         : "";
-    return (React__default.createElement("div", { className: "".concat(buttonWrapperStyle) },
-        React__default.createElement("button", { ref: buttonRef, id: id, type: "button", className: "".concat(baseStyle, " ").concat(sizeStyle, " ").concat(stateStyle, " ").concat(hoverStateStyle, " ").concat(activeFocusState, " ").concat(leftIconPadding, " ").concat(rightIconPadding, " ").concat(buttonStyle, " ").concat(className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox" },
-            leftIcon && React__default.createElement("span", { className: leftIconStyle }, leftIcon),
+    return (React__default.createElement("div", { className: cn(buttonWrapperStyle) },
+        React__default.createElement("button", { ref: buttonRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconStartPadding, iconEndPadding, buttonStyle, className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox" },
+            iconStart && React__default.createElement("span", { className: iconStartStyle }, iconStart),
             children,
-            rightIcon && React__default.createElement("span", { className: rightIconStyle }, rightIcon))));
+            iconEnd && React__default.createElement("span", { className: iconEndStyle }, iconEnd))));
 };
 /**
  * Select Options Component
  */
-var SelectOptions = function (_a) {
-    var isOpen = _a.isOpen, _b = _a.maxHeight, maxHeight = _b === void 0 ? "15rem" : _b, _c = _a.className, className = _c === void 0 ? "" : _c, onClose = _a.onClose, children = _a.children;
-    var _d = useSelectContext(), optionsRef = _d.optionsRef, buttonRef = _d.buttonRef, highlightedIndex = _d.highlightedIndex, setHighlightedIndex = _d.setHighlightedIndex; _d.options; var filteredOptions = _d.filteredOptions, searchable = _d.searchable, searchValue = _d.searchValue, setSearchValue = _d.setSearchValue, theme = _d.theme;
-    var optionsContainerStyle = theme.optionsContainerStyle || "";
-    var searchInputStyle = theme.searchInputStyle || "";
+const SelectOptions = ({ isOpen, maxHeight = "15rem", className = "", onClose, children, portal = true, placement = "bottom-start", offset = 4, }) => {
+    var _a;
+    const { optionsRef, buttonRef, highlightedIndex, setHighlightedIndex, options, filteredOptions, searchable, searchValue, setSearchValue, enableTypeahead, typeaheadValue, setTypeaheadValue, typeaheadTimeoutRef, theme, } = useSelectContext();
+    // Detect dark mode for portal content
+    const isDarkMode = useDarkMode();
+    const searchInputRef = useRef(null);
+    // Use enhanced dropdown positioning hook with direction-aware animations
+    // Pass trigger width so dropdown matches trigger size
+    const triggerWidth = ((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+    const { position, cssVariables, contentRef, isFlipped } = useSelectPortal({
+        triggerRef: buttonRef,
+        isOpen: isOpen || false,
+        placement,
+        offset,
+        estimatedWidth: triggerWidth,
+    });
+    // Create direction-aware animations based on actual placement
+    const animations = createDropdownAnimations(isFlipped);
+    const optionsContainerStyle = theme.optionsContainerStyle || "";
+    const searchInputStyle = theme.searchInputStyle || "";
     // Convert maxHeight to a valid CSS value
-    var maxHeightValue = typeof maxHeight === "number" ? "".concat(maxHeight, "px") : maxHeight;
+    const maxHeightValue = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+    // Combine refs for portal and legacy usage
+    const combinedRef = React__default.useCallback((el) => {
+        if (optionsRef &&
+            typeof optionsRef === "object" &&
+            "current" in optionsRef) {
+            optionsRef.current =
+                el;
+        }
+        if (contentRef &&
+            typeof contentRef === "object" &&
+            "current" in contentRef) {
+            contentRef.current = el;
+        }
+    }, [optionsRef, contentRef]);
     // Handle click outside to close options
-    useEffect(function () {
+    useEffect(() => {
         if (!isOpen)
             return;
-        var handleClickOutside = function (event) {
-            if (optionsRef.current &&
-                !optionsRef.current.contains(event.target) &&
+        const handleClickOutside = (event) => {
+            const currentContentRef = portal
+                ? contentRef.current
+                : optionsRef.current;
+            if (currentContentRef &&
+                !currentContentRef.contains(event.target) &&
                 buttonRef.current &&
                 !buttonRef.current.contains(event.target)) {
                 onClose === null || onClose === void 0 ? void 0 : onClose();
             }
         };
         document.addEventListener("mousedown", handleClickOutside);
-        return function () {
+        return () => {
             document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, [isOpen, onClose, optionsRef, buttonRef]);
+    }, [isOpen, onClose, optionsRef, buttonRef, contentRef, portal]);
     // Handle keyboard navigation
-    useEffect(function () {
+    useEffect(() => {
         if (!isOpen)
             return;
-        var handleKeyDown = function (event) {
+        const handleKeyDown = (event) => {
+            // Handle typeahead if enabled and not in search input
+            if (enableTypeahead && isValidTypeaheadChar(event.key)) {
+                // Only do typeahead when not typing in search input
+                if (!(event.target instanceof HTMLInputElement)) {
+                    event.preventDefault();
+                    // Clear existing timeout
+                    if (typeaheadTimeoutRef.current) {
+                        clearTimeout(typeaheadTimeoutRef.current);
+                    }
+                    // Build search string
+                    const newTypeaheadValue = typeaheadValue + event.key.toLowerCase();
+                    setTypeaheadValue(newTypeaheadValue);
+                    // Find matching option
+                    const matchingIndex = findNextMatchingOption({
+                        options: filteredOptions,
+                        searchChar: event.key.toLowerCase(),
+                        currentIndex: highlightedIndex,
+                        previousSearch: typeaheadValue,
+                    });
+                    if (matchingIndex >= 0) {
+                        setHighlightedIndex(matchingIndex);
+                        // Scroll to highlighted option
+                        setTimeout(() => {
+                            var _a;
+                            const optionElement = (_a = optionsRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-option-index="${matchingIndex}"]`);
+                            if (optionElement) {
+                                optionElement.scrollIntoView({ block: "nearest" });
+                            }
+                        }, 0);
+                    }
+                    // Set timeout to reset typeahead
+                    typeaheadTimeoutRef.current = setTimeout(() => {
+                        setTypeaheadValue("");
+                    }, TYPEAHEAD_TIMEOUT_MS);
+                    return;
+                }
+            }
+            // Handle navigation keys
             if (!["ArrowUp", "ArrowDown", "Enter", "Escape", "Tab"].includes(event.key))
                 return;
             if (event.target instanceof HTMLInputElement) {
@@ -108,22 +193,18 @@ var SelectOptions = function (_a) {
                 return;
             }
             if (event.key === "ArrowUp") {
-                setHighlightedIndex(function (prev) {
-                    return prev <= 0 ? filteredOptions.length - 1 : prev - 1;
-                });
+                setHighlightedIndex((prev) => prev <= 0 ? filteredOptions.length - 1 : prev - 1);
             }
             else if (event.key === "ArrowDown") {
-                setHighlightedIndex(function (prev) {
-                    return prev >= filteredOptions.length - 1 ? 0 : prev + 1;
-                });
+                setHighlightedIndex((prev) => prev >= filteredOptions.length - 1 ? 0 : prev + 1);
             }
             else if (event.key === "Enter") {
                 if (highlightedIndex >= 0 &&
                     highlightedIndex < filteredOptions.length) {
-                    var highlightedOption = filteredOptions[highlightedIndex];
+                    const highlightedOption = filteredOptions[highlightedIndex];
                     if (!highlightedOption.disabled) {
-                        var value = highlightedOption.value;
-                        var context = useSelectContext();
+                        const { value } = highlightedOption;
+                        const context = useSelectContext();
                         context.selectOption(value);
                         onClose === null || onClose === void 0 ? void 0 : onClose();
                     }
@@ -131,139 +212,240 @@ var SelectOptions = function (_a) {
             }
         };
         document.addEventListener("keydown", handleKeyDown);
-        return function () {
+        return () => {
             document.removeEventListener("keydown", handleKeyDown);
         };
-    }, [isOpen, onClose, highlightedIndex, filteredOptions, setHighlightedIndex]);
+    }, [
+        isOpen,
+        onClose,
+        highlightedIndex,
+        filteredOptions,
+        setHighlightedIndex,
+        enableTypeahead,
+        typeaheadValue,
+        setTypeaheadValue,
+        typeaheadTimeoutRef,
+        optionsRef,
+    ]);
     // Reset search and highlighted index when closing
-    useEffect(function () {
+    useEffect(() => {
         if (!isOpen) {
             setSearchValue("");
             setHighlightedIndex(-1);
+            setTypeaheadValue("");
+            // Clear any pending typeahead timeout
+            if (typeaheadTimeoutRef.current) {
+                clearTimeout(typeaheadTimeoutRef.current);
+                typeaheadTimeoutRef.current = null;
+            }
+        }
+    }, [
+        isOpen,
+        setSearchValue,
+        setHighlightedIndex,
+        setTypeaheadValue,
+        typeaheadTimeoutRef,
+    ]);
+    // Autofocus search input on open for searchable selects
+    useEffect(() => {
+        if (isOpen && searchable && searchInputRef.current) {
+            searchInputRef.current.focus({ preventScroll: true });
+            searchInputRef.current.select();
+        }
+    }, [isOpen, searchable]);
+    // Add effect to measure content after render for improved positioning
+    useEffect(() => {
+        if (isOpen && contentRef.current) {
+            // Trigger recalculation after content renders
+            const timer = setTimeout(() => {
+                // Hook will remeasure automatically due to contentRef dependency
+            }, 0);
+            return () => clearTimeout(timer);
         }
-    }, [isOpen, setSearchValue, setHighlightedIndex]);
+    }, [isOpen, children, filteredOptions.length]);
     // Handle search input change
-    var handleSearchChange = function (e) {
+    const handleSearchChange = (e) => {
         setSearchValue(e.target.value);
         setHighlightedIndex(-1); // Reset highlighted index when search changes
     };
-    return (React__default.createElement(AnimatePresence, { mode: "wait" }, isOpen && (React__default.createElement(motion.div, { ref: optionsRef, className: "".concat(optionsContainerStyle, " ").concat(className), style: { maxHeight: searchable ? "none" : maxHeightValue }, role: "listbox", tabIndex: -1, variants: dropdownAnimations, initial: "initial", animate: "visible", exit: "exit" },
-        searchable && (React__default.createElement("div", { className: "sticky top-0 py-1 bg-white z-10 border-b border-neutral-100 ".concat(searchInputStyle), style: {
-                '--form-rounded': '0',
+    const optionsContent = (React__default.createElement(AnimatePresence, { mode: "wait" }, isOpen && (React__default.createElement(motion.div, { ref: combinedRef, className: cn(optionsContainerStyle, className), style: {
+            ...cssVariables,
+            overscrollBehavior: "contain",
+            ...(portal
+                ? {
+                    top: `${position.top}px`,
+                    left: `${position.left}px`,
+                    width: `${position.width}px`,
+                    maxHeight: maxHeightValue,
+                }
+                : {
+                    maxHeight: searchable ? "none" : maxHeightValue,
+                }),
+        }, role: "listbox", tabIndex: -1, variants: animations, initial: "initial", animate: "visible", exit: "exit" },
+        searchable && (React__default.createElement("div", { className: `sticky top-0 py-1 bg-white z-[10000] border-b border-[var(--color-border)] ${searchInputStyle}`, style: {
+                "--form-rounded": "0",
             } },
-            React__default.createElement(Input, { placeholder: "Search...", value: searchValue, onChange: handleSearchChange, type: "search", className: "w-full block bg-white border-none outline-none ring-0 shadow-none [&:focus]:outline-none [&:focus]:ring-0 [&:focus]:border-none [&:focus-visible]:outline-none [&:focus-visible]:ring-0 [&:focus-visible]:border-none", leftIcon: React__default.createElement(SearchIcon, { size: "sm", className: "text-neutral-400 group-focus-within:text-neutral-900" }), wrapperClassName: "!border-none !outline-none !ring-0 !shadow-none", inputGroupClassName: "!border-none !outline-none !ring-0 !shadow-none flex items-center", style: {
+            React__default.createElement(Input, { placeholder: "Search...", value: searchValue, onChange: handleSearchChange, type: "search", ref: searchInputRef, className: "w-full block bg-white border-none outline-none !min-h-8 py-2 ring-0 shadow-none [&:focus]:outline-none [&:focus]:ring-0 [&:focus]:border-none [&:focus-visible]:outline-none [&:focus-visible]:ring-0 [&:focus-visible]:border-none", iconStart: React__default.createElement(MagnifyingGlassIcon, { strokeWidth: 2, className: "size-4 text-[var(--color-text-muted)] group-focus-within:text-[var(--color-primary)]" }), wrapperClassName: "!border-none !outline-none !ring-0 !shadow-none", inputGroupClassName: "!border-none !outline-none !ring-0 !shadow-none flex items-center", style: {
                     border: "none",
                     outline: "none",
-                    boxShadow: "none"
+                    boxShadow: "none",
                 } }))),
-        React__default.createElement("div", { style: { maxHeight: maxHeightValue, overflow: "auto" } }, children)))));
+        children))));
+    // Use portal if enabled and client-side - wrap with dark class for dark mode support
+    if (portal && typeof document !== "undefined") {
+        return createPortal(React__default.createElement("div", { className: isDarkMode ? "dark" : undefined }, optionsContent), document.body);
+    }
+    return optionsContent;
 };
 /**
  * Select Option Component
  */
-var SelectOption = function (_a) {
-    var value = _a.value, isSelected = _a.isSelected, disabled = _a.disabled, _b = _a.className, className = _b === void 0 ? "" : _b, onSelect = _a.onSelect, children = _a.children;
-    var _c = useSelectContext(), highlightedIndex = _c.highlightedIndex, setHighlightedIndex = _c.setHighlightedIndex, options = _c.options, theme = _c.theme, selectOption = _c.selectOption;
-    var optionStyle = theme.optionStyle || "";
-    var selectedOptionStyle = theme.selectedOptionStyle || "";
-    var disabledOptionStyle = theme.disabledOptionStyle || "";
-    // Find index of this option
-    var optionIndex = options.findIndex(function (option) { return option.value === value; });
-    var isHighlighted = optionIndex === highlightedIndex;
-    var handleClick = function () {
+const SelectOption = ({ value, isSelected, disabled, className = "", onSelect, children, }) => {
+    var _a;
+    const { highlightedIndex, setHighlightedIndex, options, filteredOptions, theme, selectOption, } = useSelectContext();
+    const optionStyle = theme.optionStyle || "";
+    const selectedOptionStyle = theme.selectedOptionStyle || "";
+    const disabledOptionStyle = theme.disabledOptionStyle || "";
+    // Find index of this option in filteredOptions (not options, to support create option)
+    const optionIndex = filteredOptions.findIndex((option) => option.value === value);
+    const isHighlighted = optionIndex === highlightedIndex;
+    // Check if this is the create option
+    const isCreateOption = ((_a = filteredOptions[optionIndex]) === null || _a === void 0 ? void 0 : _a.id) === "__create__";
+    const handleClick = () => {
         if (disabled)
             return;
-        selectOption(value);
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(value);
+        selectOption(value, isCreateOption);
+        if (onSelect) {
+            onSelect(value);
+        }
     };
     // Apply the hover style directly when keyboard navigating
-    var keyboardHighlightStyle = isHighlighted ? "text-primary-base bg-primary-50/50" : "";
-    return (React__default.createElement("div", { className: "\n        ".concat(optionStyle, "\n        ").concat(isSelected ? selectedOptionStyle : "", "\n        ").concat(disabled ? disabledOptionStyle : "", "\n        ").concat(keyboardHighlightStyle, "\n        ").concat(className, "\n      "), role: "option", "aria-selected": isSelected, "aria-disabled": disabled, onMouseEnter: function () { return !disabled && setHighlightedIndex(optionIndex); }, onClick: handleClick }, children));
+    const keyboardHighlightStyle = isHighlighted
+        ? "text-[var(--color-primary)] bg-[var(--color-primary-50)]/50"
+        : "";
+    // Style create option differently
+    const createOptionStyle = isCreateOption
+        ? "font-medium text-[var(--color-primary)]"
+        : "";
+    return (React__default.createElement("div", { className: cn(optionStyle, isSelected && selectedOptionStyle, disabled && disabledOptionStyle, keyboardHighlightStyle, createOptionStyle, className), role: "option", "aria-selected": isSelected, "aria-disabled": disabled, "data-option-index": optionIndex, onMouseEnter: () => !disabled && setHighlightedIndex(optionIndex), onClick: handleClick }, children));
 };
 /**
  * Main Select Component
  */
-var Select = function (_a) {
-    var _b;
-    var id = _a.id, name = _a.name, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.state, state = _d === void 0 ? "default" : _d, value = _a.value, _e = _a.placeholder, placeholder = _e === void 0 ? "Select an option" : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.required, required = _g === void 0 ? false : _g, _h = _a.options, options = _h === void 0 ? [] : _h, label = _a.label, helperText = _a.helperText, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, themeOverrides = _a.theme, _j = _a.className, className = _j === void 0 ? "" : _j, _k = _a.searchable, searchable = _k === void 0 ? false : _k; _a.searchPlaceholder; var children = _a.children;
+const Select = ({ id, name, size = "md", state = "default", value, displayValue, placeholder = "Select an option", disabled = false, required = false, options = [], label, helperText, onChange, onFocus, onBlur, iconStart, iconEnd, theme: themeOverrides, className = "", wrapperClassName = "", searchable = false, searchPlaceholder = "Search options...", portal = true, placement = "bottom-start", offset = 8, enableTypeahead = true, creatable = false, onCreateOption, createLabel, children, }) => {
+    var _a;
     // Merge theme with overrides
-    var theme = __assign(__assign({}, selectTheme), (themeOverrides || {}));
+    const theme = { ...selectTheme, ...(themeOverrides || {}) };
     // State
-    var _m = useState(false), isOpen = _m[0], setIsOpen = _m[1];
-    var _o = useState(value), selectedValue = _o[0], setSelectedValue = _o[1];
-    var _p = useState(-1), highlightedIndex = _p[0], setHighlightedIndex = _p[1];
-    var _q = useState(""), searchValue = _q[0], setSearchValue = _q[1];
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValue, setSelectedValue] = useState(value);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [searchValue, setSearchValue] = useState("");
+    // Typeahead state
+    const [typeaheadValue, setTypeaheadValue] = useState("");
+    const typeaheadTimeoutRef = useRef(null);
     // Refs
-    var buttonRef = useRef(null);
-    var optionsRef = useRef(null);
+    const buttonRef = useRef(null);
+    const optionsRef = useRef(null);
     // Update internal state when prop value changes
-    useEffect(function () {
+    useEffect(() => {
         setSelectedValue(value);
     }, [value]);
     // Get display value for the selected option
-    var getOptionByValue = function (searchValue) {
-        return options.find(function (option) { return option.value === searchValue; });
+    const getOptionByValue = (searchValue) => {
+        return options.find((option) => option.value === searchValue);
     };
     // Filter options based on search query
-    var filteredOptions = searchValue
-        ? options.filter(function (option) {
-            return option.label.toLowerCase().includes(searchValue.toLowerCase());
-        })
+    const baseFilteredOptions = searchValue
+        ? options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase()))
         : options;
-    var selectedOption = getOptionByValue(selectedValue);
-    var displayValue = selectedOption ? selectedOption.label : placeholder;
+    // Check if we should show the create option
+    const shouldShowCreateOption = creatable &&
+        searchable &&
+        searchValue.trim() !== "" &&
+        !baseFilteredOptions.some((option) => option.label.toLowerCase() === searchValue.toLowerCase());
+    // Add create option if needed
+    const filteredOptions = shouldShowCreateOption
+        ? [
+            {
+                id: "__create__",
+                label: typeof createLabel === "function"
+                    ? createLabel(searchValue)
+                    : createLabel || `Create "${searchValue}"`,
+                value: searchValue,
+            },
+            ...baseFilteredOptions,
+        ]
+        : baseFilteredOptions;
+    const selectedOption = getOptionByValue(selectedValue);
+    const computedDisplayValue = displayValue || (selectedOption ? selectedOption.label : placeholder);
     // Function to select an option
-    var selectOption = function (newValue) {
+    const selectOption = (newValue, isCreateAction = false) => {
+        if (isCreateAction && onCreateOption) {
+            // Call onCreateOption callback if provided
+            onCreateOption(String(newValue));
+        }
         if (newValue !== selectedValue) {
             setSelectedValue(newValue);
             onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
         }
         setIsOpen(false);
+        setSearchValue(""); // Clear search value after selection
     };
     // Button click handler
-    var handleButtonClick = function () {
+    const handleButtonClick = () => {
         if (!disabled) {
-            setIsOpen(function (prev) { return !prev; });
+            setIsOpen((prev) => !prev);
         }
     };
     // Helper text state style
-    var helperTextStateStyle = ((_b = theme.helperTextStates) === null || _b === void 0 ? void 0 : _b[state]) || "";
-    var helperTextStyle = theme.helperTextStyle || "";
+    const helperTextStateStyle = ((_a = theme.helperTextStates) === null || _a === void 0 ? void 0 : _a[state]) || "";
+    const helperTextStyle = theme.helperTextStyle || "";
     // Container style
-    var containerStyle = theme.containerStyle || "";
-    // Default chevron icon if no rightIcon provided
-    var defaultChevronIcon = (React__default.createElement(ChevronUpDownIcon, { size: 16, className: "" }));
+    const containerStyle = theme.containerStyle || "";
+    // Default chevron icon if no iconEnd provided
+    const defaultChevronIcon = React__default.createElement(ChevronUpDownIcon, { size: 16, className: "" });
     // Generate a unique ID if not provided
-    var selectId = id || "select-".concat(Math.random().toString(36).substring(2, 9));
+    const selectId = id || `select-${Math.random().toString(36).substring(2, 9)}`;
     return (React__default.createElement(SelectContext.Provider, { value: {
-            isOpen: isOpen,
-            setIsOpen: setIsOpen,
-            selectedValue: selectedValue,
-            setSelectedValue: setSelectedValue,
-            highlightedIndex: highlightedIndex,
-            setHighlightedIndex: setHighlightedIndex,
-            options: options,
-            filteredOptions: filteredOptions,
-            searchValue: searchValue,
-            setSearchValue: setSearchValue,
-            getOptionByValue: getOptionByValue,
-            selectOption: selectOption,
-            size: size,
-            state: state,
-            theme: theme,
-            searchable: searchable,
-            buttonRef: buttonRef,
-            optionsRef: optionsRef,
+            isOpen,
+            setIsOpen,
+            selectedValue,
+            setSelectedValue,
+            highlightedIndex,
+            setHighlightedIndex,
+            options,
+            filteredOptions,
+            searchValue,
+            setSearchValue,
+            getOptionByValue,
+            selectOption,
+            size,
+            state,
+            theme,
+            searchable,
+            enableTypeahead,
+            typeaheadValue,
+            setTypeaheadValue,
+            typeaheadTimeoutRef,
+            buttonRef,
+            optionsRef,
+            creatable,
+            createLabel,
+            onCreateOption,
+            hasCreateOption: shouldShowCreateOption,
         } },
-        React__default.createElement("div", { className: "relative ".concat(containerStyle, " ").concat(className) },
+        React__default.createElement("div", { className: cn("relative", containerStyle, wrapperClassName) },
             label && (React__default.createElement(FormLabel, { htmlFor: selectId, required: required }, label)),
-            React__default.createElement(SelectButton, { id: selectId, disabled: disabled, isOpen: isOpen, state: state, size: size, leftIcon: leftIcon, rightIcon: rightIcon || defaultChevronIcon, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur },
-                React__default.createElement("span", { className: "block truncate" }, displayValue)),
-            React__default.createElement(SelectOptions, { isOpen: isOpen, onClose: function () { return setIsOpen(false); } }, children ||
-                filteredOptions.map(function (option) { return (React__default.createElement(SelectOption, { key: option.id, value: option.value, isSelected: option.value === selectedValue, disabled: option.disabled || false },
-                    React__default.createElement("span", { className: "block truncate" }, option.label))); })),
-            helperText && (React__default.createElement("p", { className: "".concat(helperTextStyle, " ").concat(helperTextStateStyle) }, helperText)),
+            React__default.createElement(SelectButton, { id: selectId, disabled: disabled, isOpen: isOpen, state: state, size: size, iconStart: iconStart, iconEnd: iconEnd || defaultChevronIcon, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className },
+                React__default.createElement("span", { className: cn("block truncate", selectedOption
+                        ? theme.valueTextStyle
+                        : theme.placeholderTextStyle) }, computedDisplayValue)),
+            React__default.createElement(SelectOptions, { isOpen: isOpen, onClose: () => setIsOpen(false), portal: portal, placement: placement, offset: offset }, children ||
+                filteredOptions.map((option) => (React__default.createElement(SelectOption, { key: option.id, value: option.value, isSelected: option.value === selectedValue, disabled: option.disabled || false },
+                    React__default.createElement("span", { className: "block truncate" }, option.label))))),
+            helperText && (React__default.createElement("p", { className: cn(helperTextStyle, helperTextStateStyle) }, helperText)),
             name && (React__default.createElement("input", { type: "hidden", name: name, value: selectedValue !== undefined ? String(selectedValue) : "" })))));
 };
 
-export { Select, SelectButton, SelectLabel, SelectOption, SelectOptions };
+export { Select, SelectButton, SelectOption, SelectOptions };

package/dist/components/forms/Select/Select.theme.d.ts

@@ -1,4 +1,4 @@
-import { SelectThemeOverrides } from './Select.types';
+import { SelectThemeOverrides } from "./Select.types";
 /**
  * Default theme for the Select component
  * Extends the common forms base theme