@herca/r-kit 0.0.74 → 0.0.75

package/dist/clients.cjs

@@ -17043,6 +17043,7 @@ function RoundedSpinner({
 var import_clsx14 = __toESM(require("clsx"), 1);
 var import_jsx_runtime435 = require("react/jsx-runtime");
 var isGroup = (item) => item != null && Array.isArray(item.options);
+var getSearchText = (option) => typeof option.label === "string" ? option.label : String(option.value ?? "");
 function Select({
   options = [],
   value = null,
@@ -17084,6 +17085,12 @@ function Select({
   const searchInputRef = (0, import_react415.useRef)(null);
   const optionRefs = (0, import_react415.useRef)([]);
   const listContainerRef = (0, import_react415.useRef)(null);
+  const onOptionsChangeRef = (0, import_react415.useRef)(onOptionsChange);
+  const onOpenChangeRef = (0, import_react415.useRef)(onOpenChange);
+  (0, import_react415.useEffect)(() => {
+    onOptionsChangeRef.current = onOptionsChange;
+    onOpenChangeRef.current = onOpenChange;
+  });
   const handleScroll = () => {
     const el = listContainerRef.current;
     if (!el || Boolean(isLoadingMore)) return;
@@ -17092,7 +17099,6 @@ function Select({
       onLoadMore?.();
     }
   };
-  const getSearchText = (option) => typeof option.label === "string" ? option.label : String(option.value ?? "");
   const { filteredOptions, renderEntries } = import_react415.default.useMemo(() => {
     const flat = [];
     const entries = [];
@@ -17177,7 +17183,7 @@ function Select({
         e.preventDefault();
         try {
           const opt = filteredOptions[highlightedIndex];
-          if (opt) handleSelect(opt);
+          if (opt != void 0) handleSelect(opt);
         } catch (error) {
           console.error(error);
         }
@@ -17193,6 +17199,9 @@ function Select({
   (0, import_react415.useEffect)(() => {
     setHighlightedIndex(0);
   }, [searchTerm]);
+  (0, import_react415.useEffect)(() => {
+    optionRefs.current.length = filteredOptions.length;
+  }, [filteredOptions]);
   (0, import_react415.useEffect)(() => {
     const el = optionRefs.current[highlightedIndex];
     if (el) {
@@ -17219,7 +17228,7 @@ function Select({
     }
   }, [isOpen, isSearchable]);
   (0, import_react415.useEffect)(() => {
-    onOptionsChange?.(filteredOptions);
+    onOptionsChangeRef.current?.(filteredOptions);
   }, [filteredOptions]);
   (0, import_react415.useEffect)(() => {
     if (isSelectOpen !== void 0) {
@@ -17227,7 +17236,7 @@ function Select({
     }
   }, [isSelectOpen]);
   (0, import_react415.useEffect)(() => {
-    onOpenChange?.(isOpen);
+    onOpenChangeRef.current?.(isOpen);
   }, [isOpen]);
   (0, import_react415.useEffect)(() => {
     if (searchOptions !== void 0) {
@@ -17265,6 +17274,7 @@ function Select({
   const hasError = fieldHasError(errorMessages);
   const renderOptionItem = (option, index) => {
     const selected = isSelected(option);
+    const highlighted = index === highlightedIndex;
     return /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
       "div",
       {
@@ -17273,11 +17283,20 @@ function Select({
         },
         onMouseEnter: () => setHighlightedIndex(index),
         onClick: () => handleSelect(option),
-        children: /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(Chip, { className: "text-left", block: true, selected, children: /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("div", { className: "flex-1", children: renderOption !== void 0 && renderOption !== null ? renderOption?.(option, { selected }) : /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("div", { className: cn(selected && "font-medium"), children: option.label }) }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(Chip, { className: "text-left", block: true, selected: highlighted, children: /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("div", { className: "flex-1", children: renderOption !== void 0 && renderOption !== null ? renderOption?.(option, { selected }) : /* @__PURE__ */ (0, import_jsx_runtime435.jsxs)("div", { className: "flex items-center gap-2", children: [
+          option?.icon != void 0 && /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(Icon_default, { name: "user", size: 12 }),
+          /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(Text, { variant: "t2", weight: "medium", className: "text-gray-900", children: option.label })
+        ] }) }) })
       },
       option.value
     );
   };
+  const hanldeOnClickInput = () => {
+    if (disabled || isDisabled) {
+      return false;
+    }
+    setIsOpen(!isOpen);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
     FormField,
     {
@@ -17299,7 +17318,7 @@ function Select({
               "div",
               {
                 "aria-selected": isOpen,
-                onClick: () => (!isDisabled || !disabled) && setIsOpen(!isOpen),
+                onClick: hanldeOnClickInput,
                 tabIndex: isDisabled || disabled ? -1 : 0,
                 className: triggerClassName,
                 children: trigger
@@ -17315,7 +17334,7 @@ function Select({
                   isOpen ? "border-primary-300 ring-0" : "border-gray-200",
                   hasError && "border-danger-500"
                 ),
-                onClick: () => (!isDisabled || !disabled) && setIsOpen(!isOpen),
+                onClick: hanldeOnClickInput,
                 tabIndex: isDisabled && disabled ? -1 : 0,
                 children: [
                   icon && /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("div", { className: "flex items-center border-r border-gray-200 px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(Icon_default, { name: icon, size: 22, className: "text-gray-600" }) }),
@@ -17380,7 +17399,15 @@ function Select({
                         renderOptions === void 0 && /* @__PURE__ */ (0, import_jsx_runtime435.jsxs)(import_jsx_runtime435.Fragment, { children: [
                           filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("div", { className: "px-3 py-8 text-center text-sm text-gray-500", children: "No options found" }) : renderEntries.map(
                             (entry, i) => entry.kind === "group" ? /* @__PURE__ */ (0, import_jsx_runtime435.jsxs)("div", { className: "space-y-2", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("div", { className: "px-3 pt-1 pb-0.5 text-xs font-semibold tracking-wide text-gray-400 uppercase", children: entry.label }),
+                              /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
+                                Text,
+                                {
+                                  variant: "t2",
+                                  weight: "semibold",
+                                  className: "text-gray-900",
+                                  children: entry.label
+                                }
+                              ),
                               entry.items.map(
                                 ({ option, index }) => renderOptionItem(option, index)
                               )