@herca/r-kit 0.0.75 → 0.0.77

package/dist/clients.cjs

@@ -11500,7 +11500,7 @@ function useUrlSearchParams() {
       const next = updater(readParams());
       const query = next.toString();
       const url = `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash}`;
-      if (options?.replace) {
+      if (options?.replace == true) {
         window.history.replaceState(window.history.state, "", url);
       } else {
         window.history.pushState(window.history.state, "", url);
@@ -17042,26 +17042,21 @@ function RoundedSpinner({
 // src/components/select/select.tsx
 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,
   onChange,
   isMulti = false,
-  multiple = false,
   placeholder = "Select...",
   isSearchable = true,
   isClearable = true,
   isDisabled = false,
-  disabled = false,
   renderOption = null,
   renderValue = null,
   className,
   label,
   description,
   hint,
-  tooltip,
   errorMessages,
   isLoadingMore,
   onLoadMore,
@@ -17075,8 +17070,7 @@ function Select({
   isSelectOpen,
   onOpenChange,
   searchOptions,
-  searchPlaceholder = "Search...",
-  icon
+  searchPlaceholder = "Search..."
 }) {
   const [isOpen, setIsOpen] = (0, import_react415.useState)(false);
   const [searchTerm, setSearchTerm] = (0, import_react415.useState)("");
@@ -17085,12 +17079,6 @@ 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;
@@ -17099,39 +17087,20 @@ function Select({
       onLoadMore?.();
     }
   };
-  const { filteredOptions, renderEntries } = import_react415.default.useMemo(() => {
-    const flat = [];
-    const entries = [];
-    const term = searchTerm.toLowerCase();
-    const matches2 = (o) => getSearchText(o).toLowerCase().includes(term);
-    for (const item of options) {
-      if (isGroup(item)) {
-        const matched = item.options.filter(matches2);
-        if (matched.length === 0) continue;
-        const items = matched.map((option) => {
-          const index = flat.length;
-          flat.push(option);
-          return { option, index };
-        });
-        entries.push({ kind: "group", label: item.label, items });
-      } else {
-        if (!matches2(item)) continue;
-        const index = flat.length;
-        flat.push(item);
-        entries.push({ kind: "option", option: item, index });
-      }
-    }
-    return { filteredOptions: flat, renderEntries: entries };
+  const filteredOptions = import_react415.default.useMemo(() => {
+    return options.filter(
+      (option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()) === true
+    );
   }, [options, searchTerm]);
   const asArray = (val) => Array.isArray(val) ? val : val ? [val] : [];
   const isSelected = (option) => {
-    if (isMulti || multiple) {
+    if (isMulti) {
       return asArray(value).some((v3) => v3.value === option.value);
     }
     return value?.value === option.value;
   };
   const handleSelect = (option) => {
-    if (isMulti || multiple) {
+    if (isMulti) {
       const arr = asArray(value);
       const exists = arr.some((v3) => v3.value === option.value);
       const newValue = exists ? arr.filter((v3) => v3.value !== option.value) : [...arr, option];
@@ -17147,7 +17116,7 @@ function Select({
   };
   const handleRemove = (option, e) => {
     e.stopPropagation();
-    if (isMulti || multiple) {
+    if (isMulti) {
       const arr = asArray(value);
       onChange?.(arr.filter((v3) => v3.value !== option.value));
     } else {
@@ -17156,7 +17125,7 @@ function Select({
   };
   const handleClear = (e) => {
     e.stopPropagation();
-    onChange?.(isMulti || multiple ? [] : null);
+    onChange?.(isMulti ? [] : null);
   };
   const handleKeyDown2 = (e) => {
     if (!isOpen) {
@@ -17183,7 +17152,7 @@ function Select({
         e.preventDefault();
         try {
           const opt = filteredOptions[highlightedIndex];
-          if (opt != void 0) handleSelect(opt);
+          if (opt) handleSelect(opt);
         } catch (error) {
           console.error(error);
         }
@@ -17199,9 +17168,6 @@ 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) {
@@ -17228,7 +17194,7 @@ function Select({
     }
   }, [isOpen, isSearchable]);
   (0, import_react415.useEffect)(() => {
-    onOptionsChangeRef.current?.(filteredOptions);
+    onOptionsChange?.(filteredOptions);
   }, [filteredOptions]);
   (0, import_react415.useEffect)(() => {
     if (isSelectOpen !== void 0) {
@@ -17236,7 +17202,7 @@ function Select({
     }
   }, [isSelectOpen]);
   (0, import_react415.useEffect)(() => {
-    onOpenChangeRef.current?.(isOpen);
+    onOpenChange?.(isOpen);
   }, [isOpen]);
   (0, import_react415.useEffect)(() => {
     if (searchOptions !== void 0) {
@@ -17244,11 +17210,11 @@ function Select({
     }
   }, [searchOptions]);
   const getDisplayValue = () => {
-    const isEmpty = value == null || (isMulti || multiple) && asArray(value).length === 0;
+    const isEmpty = value == null || isMulti && asArray(value).length === 0;
     if (isEmpty) {
       return /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("span", { className: "text-gray-500", children: placeholder });
     }
-    if (isMulti || multiple) {
+    if (isMulti) {
       return /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("div", { className: "flex flex-wrap gap-1", children: asArray(value).map((item) => /* @__PURE__ */ (0, import_jsx_runtime435.jsxs)(
         "div",
         {
@@ -17270,33 +17236,8 @@ function Select({
     }
     return renderValue !== void 0 && renderValue !== null ? renderValue?.(value) : value.label;
   };
-  const showClearButton = isClearable && ((isMulti || multiple) && asArray(value).length > 0 || (!isMulti || !multiple) && value !== null);
+  const showClearButton = isClearable && (isMulti && asArray(value).length > 0 || !isMulti && value !== null);
   const hasError = fieldHasError(errorMessages);
-  const renderOptionItem = (option, index) => {
-    const selected = isSelected(option);
-    const highlighted = index === highlightedIndex;
-    return /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
-      "div",
-      {
-        ref: (el) => {
-          optionRefs.current[index] = el;
-        },
-        onMouseEnter: () => setHighlightedIndex(index),
-        onClick: () => handleSelect(option),
-        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,
     {
@@ -17305,7 +17246,6 @@ function Select({
       description,
       hint,
       required,
-      tooltip,
       children: /* @__PURE__ */ (0, import_jsx_runtime435.jsxs)(
         "div",
         {
@@ -17318,8 +17258,8 @@ function Select({
               "div",
               {
                 "aria-selected": isOpen,
-                onClick: hanldeOnClickInput,
-                tabIndex: isDisabled || disabled ? -1 : 0,
+                onClick: () => !isDisabled && setIsOpen(!isOpen),
+                tabIndex: isDisabled ? -1 : 0,
                 className: triggerClassName,
                 children: trigger
               }
@@ -17329,36 +17269,33 @@ function Select({
               {
                 "aria-selected": isOpen,
                 className: cn(
-                  "focus:ring-primary-300 flex min-h-10 cursor-pointer rounded-lg border bg-white text-gray-900 transition-all focus-within:outline-none focus:ring",
-                  (isDisabled || disabled) && "cursor-not-allowed bg-gray-100",
+                  "focus:ring-primary-300 flex min-h-10 cursor-pointer items-center justify-between rounded-lg border bg-white px-3 py-2 text-gray-900 transition-all focus-within:outline-none focus:ring",
+                  isDisabled && "cursor-not-allowed bg-gray-100",
                   isOpen ? "border-primary-300 ring-0" : "border-gray-200",
                   hasError && "border-danger-500"
                 ),
-                onClick: hanldeOnClickInput,
-                tabIndex: isDisabled && disabled ? -1 : 0,
+                onClick: () => !isDisabled && setIsOpen(!isOpen),
+                tabIndex: isDisabled ? -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" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime435.jsxs)("div", { className: "flex w-full flex-1 items-center justify-between px-3 py-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("div", { className: "min-w-0 flex-1 text-xs font-medium text-gray-900", children: getDisplayValue() }),
-                    /* @__PURE__ */ (0, import_jsx_runtime435.jsxs)("div", { className: "ml-2 flex shrink-0 items-start gap-1 self-start pt-0.5", children: [
-                      showClearButton && /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: handleClear,
-                          className: "cursor-pointer rounded text-center text-gray-700",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(Icon_default, { name: "times-circle", size: 20 })
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
-                        Icon_default,
-                        {
-                          className: "text-gray-700",
-                          name: isOpen ? "angle-up-small" : "angle-down-small",
-                          size: 20
-                        }
-                      )
-                    ] })
+                  /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("div", { className: "flex-1 overflow-hidden text-xs font-medium text-gray-900", children: getDisplayValue() }),
+                  /* @__PURE__ */ (0, import_jsx_runtime435.jsxs)("div", { className: "ml-2 flex items-center gap-1", children: [
+                    showClearButton && /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleClear,
+                        className: "cursor-pointer rounded text-center text-gray-700",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(Icon_default, { name: "times-circle", size: 20 })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
+                      Icon_default,
+                      {
+                        className: "text-gray-700",
+                        name: isOpen ? "angle-up-small" : "angle-down-small",
+                        size: 20
+                      }
+                    )
                   ] })
                 ]
               }
@@ -17397,22 +17334,27 @@ function Select({
                       onScroll: onLoadMore !== void 0 ? handleScroll : void 0,
                       children: [
                         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)(
-                                Text,
-                                {
-                                  variant: "t2",
-                                  weight: "semibold",
-                                  className: "text-gray-900",
-                                  children: entry.label
-                                }
-                              ),
-                              entry.items.map(
-                                ({ option, index }) => renderOptionItem(option, index)
-                              )
-                            ] }, `grp-${i}`) : renderOptionItem(entry.option, entry.index)
-                          ),
+                          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" }) : filteredOptions.map((option, index) => {
+                            const selected = isSelected(option);
+                            const highlighted = index === highlightedIndex;
+                            return /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
+                              "div",
+                              {
+                                ref: (el) => {
+                                  optionRefs.current[index] = el;
+                                },
+                                onMouseEnter: () => setHighlightedIndex(index),
+                                onClick: () => handleSelect(option),
+                                className: cn(
+                                  "flex cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm font-medium text-gray-900 transition-colors focus:outline-none",
+                                  highlighted && "bg-primary-100",
+                                  selected ? "bg-primary-50 border-primary-300" : "hover:bg-gray-50"
+                                ),
+                                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 }) })
+                              },
+                              option.value
+                            );
+                          }),
                           onLoadMore !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
                             "div",
                             {