@itilite/lumina-ui 1.1.11 → 1.1.12

package/dist/index.js

@@ -761,6 +761,46 @@ var LoadingSpinner_default = LoadingSpinner;
 
 // src/atom/Select/Select.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
+var InputWrapper = (0, import_react2.memo)(({ children, disabled, disabledTooltip }) => {
+  if (disabled && disabledTooltip)
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Tooltip_default, { title: disabledTooltip, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children });
+});
+var OptionItem = (0, import_react2.memo)(({
+  option,
+  index,
+  isSelected,
+  isHighlighted,
+  experience,
+  size,
+  optionClassName,
+  onSelectHandler,
+  onMouseEnterHandler
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      onClick: () => onSelectHandler(option),
+      onMouseEnter: () => onMouseEnterHandler(index),
+      className: (0, import_clsx8.default)(
+        "tw-transition-all tw-duration-150",
+        { "tw-typography-body2": size !== "small" },
+        { "tw-typography-caption1": size === "small" },
+        optionClassName
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "div",
+        {
+          className: (0, import_clsx8.default)(
+            "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,
@@ -999,6 +1039,31 @@ var Select = ({
     }
     return "";
   }, [selectedValue, validatedOptions, showDisplayValue, normalizeValue]);
+  const displayValue = (0, import_react2.useMemo)(() => getDisplayValue(), [getDisplayValue]);
+  const inputClasses = (0, import_react2.useMemo)(() => {
+    return (0, import_clsx8.default)(
+      "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 = (0, import_react2.useMemo)(() => {
     var _a;
     if (!enableSearch) {
@@ -1093,7 +1158,7 @@ var Select = ({
   }, [highlightedIndex]);
   (0, import_react2.useEffect)(() => {
     optionRefs.current = [];
-  }, [filteredOptions]);
+  }, [filteredOptions.length]);
   const handleMouseEnter = (0, import_react2.useCallback)(() => {
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current);
@@ -1130,12 +1195,23 @@ var Select = ({
     },
     [isOpen, handleInputInteraction]
   );
-  const InputWrapper = ({ children }) => {
-    if (disabled && disabledTooltip)
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Tooltip_default, { title: disabledTooltip, children });
-    return children;
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(InputWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  const handleChevronMouseDown = (0, import_react2.useCallback)(
+    (e) => {
+      if (isHovering && selectedValue && allowClear) {
+        handleClear(e);
+      } else {
+        handleChevronClick(e);
+      }
+    },
+    [isHovering, selectedValue, allowClear, handleClear, handleChevronClick]
+  );
+  const handleOptionClick = (0, import_react2.useCallback)((option) => {
+    handleOptionSelect(option);
+  }, [handleOptionSelect]);
+  const handleOptionMouseEnter = (0, import_react2.useCallback)((index) => {
+    setHighlightedIndex(index);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(InputWrapper, { disabled, disabledTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       style,
@@ -1159,35 +1235,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: (0, import_clsx8.default)(
-                "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
             }
           ),
@@ -1228,13 +1280,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__ */ (0, import_jsx_runtime14.jsx)(
                       CrossV2,
                       {
@@ -1265,75 +1311,32 @@ var Select = ({
               dropdownClassName
             ),
             ref: optionListRef,
-            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              "div",
-              {
-                ref: (el) => optionRefs.current[index] = el,
-                onClick: () => handleOptionSelect(option),
-                onMouseEnter: () => setHighlightedIndex(index),
-                className: (0, import_clsx8.default)(
-                  "tw-transition-all tw-duration-150",
-                  { "tw-typography-body2": size !== "small" },
-                  { "tw-typography-caption1": size === "small" },
-                  optionClassName
-                ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  "div",
-                  {
-                    className: (0, import_clsx8.default)(
-                      "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__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("div", { ref: (el) => optionRefs.current[index] = el, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                OptionItem,
+                {
+                  option,
+                  index,
+                  isSelected,
+                  isHighlighted,
+                  experience,
+                  size,
+                  optionClassName,
+                  onSelectHandler: handleOptionClick,
+                  onMouseEnterHandler: handleOptionMouseEnter
+                }
+              ) }, doubleCharSearch ? option.label : option.value);
+            }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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 = (0, import_react2.memo)(Select, arePropsEqual);
+var Select_default = Select;
 
 // src/atom/RangePicker/RangePicker.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");

package/dist/index.mjs

@@ -1,40 +1,40 @@
 import {
   RangePicker_default
-} from "./chunk-W7J4GMPI.mjs";
+} from "./chunk-IIJUGDEJ.mjs";
 import "./chunk-ZTRM4HZJ.mjs";
+import {
+  Modal_default
+} from "./chunk-UQJ3BDM4.mjs";
 import {
   Switch_default
 } from "./chunk-MNARBWAJ.mjs";
-import {
-  Radio_default
-} from "./chunk-2EBPXGRY.mjs";
 import {
   Tag_default
 } from "./chunk-4VZB2KR2.mjs";
 import {
   Avatar_default
 } from "./chunk-IWO2Y5QX.mjs";
-import {
-  Modal_default
-} from "./chunk-UQJ3BDM4.mjs";
 import {
   Button_default
 } from "./chunk-AF2RKLH6.mjs";
 import {
   Checkbox_default
 } from "./chunk-UQZNUEZE.mjs";
+import {
+  Radio_default
+} from "./chunk-2EBPXGRY.mjs";
+import {
+  Slider_default
+} from "./chunk-D3N7VFER.mjs";
 import {
   Select_default
-} from "./chunk-E4FCLHYA.mjs";
+} from "./chunk-GU5F7Z7I.mjs";
 import {
   Tooltip_default
 } from "./chunk-MLCMZRUC.mjs";
 import {
   LoadingSpinner_default
 } from "./chunk-QKTMWS4J.mjs";
-import {
-  Slider_default
-} from "./chunk-D3N7VFER.mjs";
 import "./chunk-FWCSY2DS.mjs";
 export {
   Avatar_default as Avatar,