@herca/r-kit 0.0.74 → 0.0.75

package/dist/clients.d.cts

@@ -918,6 +918,7 @@ interface BaseOption {
     value: string | number;
     label: string;
     description?: string;
+    icon?: string;
 }
 type EmptyObject = Record<string, never>;
 type SelectOption<Extra extends object = object> = BaseOption & Extra;

package/dist/clients.d.ts

@@ -918,6 +918,7 @@ interface BaseOption {
     value: string | number;
     label: string;
     description?: string;
+    icon?: string;
 }
 type EmptyObject = Record<string, never>;
 type SelectOption<Extra extends object = object> = BaseOption & Extra;

package/dist/clients.js

@@ -16902,6 +16902,7 @@ function RoundedSpinner({
 import clsx14 from "clsx";
 import { Fragment as Fragment10, jsx as jsx435, jsxs as jsxs94 } from "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,
@@ -16943,6 +16944,12 @@ function Select({
   const searchInputRef = useRef8(null);
   const optionRefs = useRef8([]);
   const listContainerRef = useRef8(null);
+  const onOptionsChangeRef = useRef8(onOptionsChange);
+  const onOpenChangeRef = useRef8(onOpenChange);
+  useEffect13(() => {
+    onOptionsChangeRef.current = onOptionsChange;
+    onOpenChangeRef.current = onOpenChange;
+  });
   const handleScroll = () => {
     const el = listContainerRef.current;
     if (!el || Boolean(isLoadingMore)) return;
@@ -16951,7 +16958,6 @@ function Select({
       onLoadMore?.();
     }
   };
-  const getSearchText = (option) => typeof option.label === "string" ? option.label : String(option.value ?? "");
   const { filteredOptions, renderEntries } = React404.useMemo(() => {
     const flat = [];
     const entries = [];
@@ -17036,7 +17042,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);
         }
@@ -17052,6 +17058,9 @@ function Select({
   useEffect13(() => {
     setHighlightedIndex(0);
   }, [searchTerm]);
+  useEffect13(() => {
+    optionRefs.current.length = filteredOptions.length;
+  }, [filteredOptions]);
   useEffect13(() => {
     const el = optionRefs.current[highlightedIndex];
     if (el) {
@@ -17078,7 +17087,7 @@ function Select({
     }
   }, [isOpen, isSearchable]);
   useEffect13(() => {
-    onOptionsChange?.(filteredOptions);
+    onOptionsChangeRef.current?.(filteredOptions);
   }, [filteredOptions]);
   useEffect13(() => {
     if (isSelectOpen !== void 0) {
@@ -17086,7 +17095,7 @@ function Select({
     }
   }, [isSelectOpen]);
   useEffect13(() => {
-    onOpenChange?.(isOpen);
+    onOpenChangeRef.current?.(isOpen);
   }, [isOpen]);
   useEffect13(() => {
     if (searchOptions !== void 0) {
@@ -17124,6 +17133,7 @@ function Select({
   const hasError = fieldHasError(errorMessages);
   const renderOptionItem = (option, index) => {
     const selected = isSelected(option);
+    const highlighted = index === highlightedIndex;
     return /* @__PURE__ */ jsx435(
       "div",
       {
@@ -17132,11 +17142,20 @@ function Select({
         },
         onMouseEnter: () => setHighlightedIndex(index),
         onClick: () => handleSelect(option),
-        children: /* @__PURE__ */ jsx435(Chip, { className: "text-left", block: true, selected, children: /* @__PURE__ */ jsx435("div", { className: "flex-1", children: renderOption !== void 0 && renderOption !== null ? renderOption?.(option, { selected }) : /* @__PURE__ */ jsx435("div", { className: cn(selected && "font-medium"), children: option.label }) }) })
+        children: /* @__PURE__ */ jsx435(Chip, { className: "text-left", block: true, selected: highlighted, children: /* @__PURE__ */ jsx435("div", { className: "flex-1", children: renderOption !== void 0 && renderOption !== null ? renderOption?.(option, { selected }) : /* @__PURE__ */ jsxs94("div", { className: "flex items-center gap-2", children: [
+          option?.icon != void 0 && /* @__PURE__ */ jsx435(Icon_default, { name: "user", size: 12 }),
+          /* @__PURE__ */ jsx435(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__ */ jsx435(
     FormField,
     {
@@ -17158,7 +17177,7 @@ function Select({
               "div",
               {
                 "aria-selected": isOpen,
-                onClick: () => (!isDisabled || !disabled) && setIsOpen(!isOpen),
+                onClick: hanldeOnClickInput,
                 tabIndex: isDisabled || disabled ? -1 : 0,
                 className: triggerClassName,
                 children: trigger
@@ -17174,7 +17193,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__ */ jsx435("div", { className: "flex items-center border-r border-gray-200 px-3 py-2", children: /* @__PURE__ */ jsx435(Icon_default, { name: icon, size: 22, className: "text-gray-600" }) }),
@@ -17239,7 +17258,15 @@ function Select({
                         renderOptions === void 0 && /* @__PURE__ */ jsxs94(Fragment10, { children: [
                           filteredOptions.length === 0 ? /* @__PURE__ */ jsx435("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__ */ jsxs94("div", { className: "space-y-2", children: [
-                              /* @__PURE__ */ jsx435("div", { className: "px-3 pt-1 pb-0.5 text-xs font-semibold tracking-wide text-gray-400 uppercase", children: entry.label }),
+                              /* @__PURE__ */ jsx435(
+                                Text,
+                                {
+                                  variant: "t2",
+                                  weight: "semibold",
+                                  className: "text-gray-900",
+                                  children: entry.label
+                                }
+                              ),
                               entry.items.map(
                                 ({ option, index }) => renderOptionItem(option, index)
                               )