@itilite/lumina-ui 1.1.13 → 1.2.0

package/dist/{chunk-E4FCLHYA.mjs → chunk-GU5F7Z7I.mjs}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-FWCSY2DS.mjs";
 
 // src/atom/Select/Select.tsx
-import { memo as memo3, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, memo as memo3 } from "react";
 import clsx from "clsx";
 
 // src/icons/Chevron.tsx
@@ -97,7 +97,47 @@ var Lock = React3.memo((_a) => {
 });
 
 // src/atom/Select/Select.tsx
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+var InputWrapper = memo3(({ children, disabled, disabledTooltip }) => {
+  if (disabled && disabledTooltip)
+    return /* @__PURE__ */ jsx4(Tooltip_default, { title: disabledTooltip, children });
+  return /* @__PURE__ */ jsx4(Fragment, { children });
+});
+var OptionItem = memo3(({
+  option,
+  index,
+  isSelected,
+  isHighlighted,
+  experience,
+  size,
+  optionClassName,
+  onSelectHandler,
+  onMouseEnterHandler
+}) => {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      onClick: () => onSelectHandler(option),
+      onMouseEnter: () => onMouseEnterHandler(index),
+      className: clsx(
+        "tw-transition-all tw-duration-150",
+        { "tw-typography-body2": size !== "small" },
+        { "tw-typography-caption1": size === "small" },
+        optionClassName
+      ),
+      children: /* @__PURE__ */ jsx4(
+        "div",
+        {
+          className: clsx(
+            "tw-px-4 tw-cursor-pointer tw-py-2 tw-mx-0.5 tw-rounded-xl",
+            isSelected ? experience === "personal" ? "tw-bg-[#f1e8fa]" : "tw-bg-[#fff1e1]" : isHighlighted ? "tw-bg-[#f3f4f6] tw-text-gray-900" : "tw-text-gray-900 hover:tw-bg-[#1118270a]"
+          ),
+          children: option.label
+        }
+      )
+    }
+  );
+});
 var Select = ({
   label,
   mandatory = false,
@@ -336,6 +376,31 @@ var Select = ({
     }
     return "";
   }, [selectedValue, validatedOptions, showDisplayValue, normalizeValue]);
+  const displayValue = useMemo(() => getDisplayValue(), [getDisplayValue]);
+  const inputClasses = useMemo(() => {
+    return clsx(
+      "tw-w-full tw-rounded-xl tw-outline-none tw-transition-all tw-duration-200 tw-cursor-pointer tw-border-solid tw-text-color-text-default",
+      sizeClasses.input,
+      sizeClasses.padding,
+      variantClasses,
+      {
+        "tw-bg-white": valueSelected || displayValue || isFocused,
+        "tw-bg-color-gray-5": !valueSelected || !displayValue,
+        "!tw-bg-[#F8F7F6] tw-cursor-not-allowed tw-pointer-events-none": disabled
+      },
+      !label && "tw-flex tw-items-center",
+      {
+        "!tw-border-color-primary": isFocused && experience === "business"
+      },
+      {
+        "!tw-border-[#804D7B]": isFocused && experience === "personal"
+      },
+      error ? "!tw-border-color-text-critical " : "tw-border-[#EBE3DD] hover:tw-border-[#C5B7AC]",
+      "focus:tw-shadow-sm focus:tw-ring-offset-1",
+      className,
+      inputClassName
+    );
+  }, [sizeClasses, variantClasses, valueSelected, displayValue, isFocused, disabled, label, experience, error, className, inputClassName]);
   const filteredOptions = useMemo(() => {
     var _a;
     if (!enableSearch) {
@@ -430,7 +495,7 @@ var Select = ({
   }, [highlightedIndex]);
   useEffect(() => {
     optionRefs.current = [];
-  }, [filteredOptions]);
+  }, [filteredOptions.length]);
   const handleMouseEnter = useCallback(() => {
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current);
@@ -467,12 +532,23 @@ var Select = ({
     },
     [isOpen, handleInputInteraction]
   );
-  const InputWrapper = ({ children }) => {
-    if (disabled && disabledTooltip)
-      return /* @__PURE__ */ jsx4(Tooltip_default, { title: disabledTooltip, children });
-    return children;
-  };
-  return /* @__PURE__ */ jsx4(InputWrapper, { children: /* @__PURE__ */ jsxs(
+  const handleChevronMouseDown = useCallback(
+    (e) => {
+      if (isHovering && selectedValue && allowClear) {
+        handleClear(e);
+      } else {
+        handleChevronClick(e);
+      }
+    },
+    [isHovering, selectedValue, allowClear, handleClear, handleChevronClick]
+  );
+  const handleOptionClick = useCallback((option) => {
+    handleOptionSelect(option);
+  }, [handleOptionSelect]);
+  const handleOptionMouseEnter = useCallback((index) => {
+    setHighlightedIndex(index);
+  }, []);
+  return /* @__PURE__ */ jsx4(InputWrapper, { disabled, disabledTooltip, children: /* @__PURE__ */ jsxs(
     "div",
     {
       style,
@@ -496,35 +572,11 @@ var Select = ({
               autoCorrect: "off",
               autoCapitalize: "off",
               spellCheck: "false",
-              value: isFocused && enableSearch ? searchTerm : getDisplayValue(),
+              value: isFocused && enableSearch ? searchTerm : displayValue,
               onChange: enableSearch ? handleSearchChange : void 0,
               onClick: handleInputInteraction,
               onKeyDown: handleKeyDown,
-              className: clsx(
-                "tw-w-full tw-rounded-xl tw-outline-none tw-transition-all tw-duration-200 tw-cursor-pointer tw-border-solid tw-text-color-text-default",
-                sizeClasses.input,
-                sizeClasses.padding,
-                variantClasses,
-                {
-                  "tw-bg-white": valueSelected || getDisplayValue() || isFocused,
-                  "tw-bg-color-gray-5": !valueSelected || !getDisplayValue(),
-                  "!tw-bg-[#F8F7F6] tw-cursor-not-allowed tw-pointer-events-none": disabled
-                },
-                // Conditional padding based on label presence
-                !label && "tw-flex tw-items-center",
-                {
-                  "!tw-border-color-primary": isFocused && experience === "business"
-                },
-                {
-                  "!tw-border-[#804D7B]": isFocused && experience === "personal"
-                },
-                error ? "!tw-border-color-text-critical " : "tw-border-[#EBE3DD] hover:tw-border-[#C5B7AC]",
-                // Add focus state styling
-                "focus:tw-shadow-sm focus:tw-ring-offset-1",
-                className,
-                inputClassName
-                // Put inputClassName last so it can override default classes
-              ),
+              className: inputClasses,
               readOnly: !isFocused || !enableSearch
             }
           ),
@@ -565,13 +617,7 @@ var Select = ({
                       // Only rotate chevron when open and not showing clear icon
                       isOpen && !(isHovering && selectedValue && allowClear) && "-tw-rotate-180"
                     ),
-                    onMouseDown: (e) => {
-                      if (isHovering && selectedValue && allowClear) {
-                        handleClear(e);
-                      } else {
-                        handleChevronClick(e);
-                      }
-                    },
+                    onMouseDown: handleChevronMouseDown,
                     children: disabled ? null : isHovering && selectedValue && allowClear ? /* @__PURE__ */ jsx4(
                       CrossV2,
                       {
@@ -602,75 +648,32 @@ var Select = ({
               dropdownClassName
             ),
             ref: optionListRef,
-            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ jsx4(
-              "div",
-              {
-                ref: (el) => optionRefs.current[index] = el,
-                onClick: () => handleOptionSelect(option),
-                onMouseEnter: () => setHighlightedIndex(index),
-                className: clsx(
-                  "tw-transition-all tw-duration-150",
-                  { "tw-typography-body2": size !== "small" },
-                  { "tw-typography-caption1": size === "small" },
-                  optionClassName
-                ),
-                children: /* @__PURE__ */ jsx4(
-                  "div",
-                  {
-                    className: clsx(
-                      "tw-px-4 tw-cursor-pointer tw-py-2 tw-mx-0.5 tw-rounded-xl",
-                      normalizeValue(selectedValue) === normalizeValue(option.value) ? experience === "personal" ? "tw-bg-[#f1e8fa]" : "tw-bg-[#fff1e1]" : (
-                        // Highlighted option styling (keyboard navigation)
-                        index === highlightedIndex ? "tw-bg-[#f3f4f6] tw-text-gray-900" : (
-                          // Default option styling
-                          "tw-text-gray-900 hover:tw-bg-[#1118270a]"
-                        )
-                      )
-                    ),
-                    children: option.label
-                  }
-                )
-              },
-              doubleCharSearch ? option.label : option.value
-            )) : /* @__PURE__ */ jsx4("div", { className: "tw-px-4 tw-py-3 tw-text-gray-500 tw-text-sm", children: "No options found" })
+            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
+              const isSelected = normalizeValue(selectedValue) === normalizeValue(option.value);
+              const isHighlighted = index === highlightedIndex;
+              return /* @__PURE__ */ jsx4("div", { ref: (el) => optionRefs.current[index] = el, children: /* @__PURE__ */ jsx4(
+                OptionItem,
+                {
+                  option,
+                  index,
+                  isSelected,
+                  isHighlighted,
+                  experience,
+                  size,
+                  optionClassName,
+                  onSelectHandler: handleOptionClick,
+                  onMouseEnterHandler: handleOptionMouseEnter
+                }
+              ) }, doubleCharSearch ? option.label : option.value);
+            }) : /* @__PURE__ */ jsx4("div", { className: "tw-px-4 tw-py-3 tw-text-gray-500 tw-text-sm", children: "No options found" })
           }
         )
       ]
     }
   ) });
 };
-var arePropsEqual = (prevProps, nextProps) => {
-  var _a, _b;
-  const criticalProps = [
-    "value",
-    "valueSelected",
-    "options",
-    "error",
-    "disabled",
-    "label",
-    "mandatory"
-  ];
-  for (const prop of criticalProps) {
-    if (prevProps[prop] !== nextProps[prop]) {
-      return false;
-    }
-  }
-  if (((_a = prevProps.options) == null ? void 0 : _a.length) !== ((_b = nextProps.options) == null ? void 0 : _b.length)) {
-    return false;
-  }
-  if (prevProps.options && nextProps.options) {
-    for (let i = 0; i < prevProps.options.length; i++) {
-      const prevOpt = prevProps.options[i];
-      const nextOpt = nextProps.options[i];
-      if ((prevOpt == null ? void 0 : prevOpt.value) !== (nextOpt == null ? void 0 : nextOpt.value) || (prevOpt == null ? void 0 : prevOpt.label) !== (nextOpt == null ? void 0 : nextOpt.label)) {
-        return false;
-      }
-    }
-  }
-  return true;
-};
 Select.displayName = "Select";
-var Select_default = memo3(Select, arePropsEqual);
+var Select_default = Select;
 
 export {
   Select,