@solostylist/ui-kit 1.0.131 → 1.0.133

package/dist/s-select/s-select.d.ts

@@ -28,6 +28,10 @@ export type SSelectProps<T extends BaseOption = string> = Omit<SelectProps, 'err
     simple?: boolean;
     /** HTML id attribute for the select element */
     htmlFor?: string;
+    /** Enable search/filter functionality in the dropdown */
+    searchable?: boolean;
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
 };
 /**
  * SSelect - A flexible select component that handles both primitive and object options
@@ -37,6 +41,7 @@ export type SSelectProps<T extends BaseOption = string> = Omit<SelectProps, 'err
  * - Generic typing for type-safe option handling
  * - Support for both primitive (string/number) and object options
  * - Configurable option label and value extraction for objects
+ * - Optional search/filter functionality for large option lists
  * - Placeholder support with proper styling
  * - Single and multiple selection modes
  * - Simple mode for primitive value rendering

package/dist/s-select/s-select.js

@@ -1,68 +1,117 @@
-import { j as u } from "../jsx-runtime-OVHDjVDe.js";
-import { forwardRef as C, useState as w } from "react";
-import { Select as B, MenuItem as E, Box as i } from "@mui/material";
-import I from "../s-form/s-form.js";
-const W = C(
+import { j as t } from "../jsx-runtime-OVHDjVDe.js";
+import { forwardRef as E, useState as f } from "react";
+import { c as F } from "../createSvgIcon-By5UWB4_.js";
+import { Select as M, ListSubheader as T, TextField as A, InputAdornment as B, MenuItem as p, Box as x } from "@mui/material";
+import D from "../s-form/s-form.js";
+const K = F(/* @__PURE__ */ t.jsx("path", {
+  d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
+}), "Search"), J = E(
   ({
-    options: t = [],
-    optionLabel: x = "name",
-    optionValue: g = "id",
-    placeholder: d,
-    label: h = "",
-    error: v,
-    required: j = !1,
-    variant: O = "outlined",
-    simple: y = !1,
-    htmlFor: s,
-    ...r
-  }, m) => {
-    const c = r.value !== void 0, [S, V] = w(r.multiple ? [] : null), b = c ? r.value : S, o = (e) => String(typeof e == "string" || typeof e == "number" ? e : e[x]), l = (e) => typeof e == "string" || typeof e == "number" ? e : e[g];
-    return /* @__PURE__ */ u.jsx(I, { error: v, label: h, required: j, htmlFor: s, children: /* @__PURE__ */ u.jsx(
-      B,
+    options: o = [],
+    optionLabel: y = "name",
+    optionValue: C = "id",
+    placeholder: g,
+    label: m = "",
+    error: I,
+    required: P = !1,
+    variant: R = "outlined",
+    simple: b = !1,
+    htmlFor: h,
+    searchable: r = !1,
+    searchPlaceholder: w = "",
+    ...a
+  }, V) => {
+    const v = a.value !== void 0, [L, k] = f(a.multiple ? [] : null), z = v ? a.value : L, [d, j] = f(""), [O, S] = f(!1), s = (e) => String(typeof e == "string" || typeof e == "number" ? e : e[y]), l = (e) => typeof e == "string" || typeof e == "number" ? e : e[C], c = r && d ? o.filter((e) => s(e).toLowerCase().includes(d.toLowerCase())) : o;
+    return /* @__PURE__ */ t.jsx(D, { error: I, label: m, required: P, htmlFor: h, children: /* @__PURE__ */ t.jsxs(
+      M,
       {
-        id: s,
+        id: h,
         displayEmpty: !0,
         fullWidth: !0,
         defaultValue: "",
-        ref: m,
-        renderValue: r.multiple ? (e) => {
+        ref: V,
+        open: r ? O : void 0,
+        onOpen: r ? () => S(!0) : void 0,
+        onClose: r ? () => {
+          S(!1), j("");
+        } : void 0,
+        MenuProps: r ? {
+          autoFocus: !1,
+          PaperProps: {
+            onKeyDown: (e) => {
+              e.stopPropagation();
+            }
+          }
+        } : void 0,
+        renderValue: a.multiple ? (e) => {
           const n = e;
-          return n.length === 0 ? /* @__PURE__ */ u.jsx(i, { component: "span", sx: { color: "text.secondary" }, children: d }) : n == null ? void 0 : n.map((a) => {
-            const f = t.find((p) => l(p) === l(a));
-            return f ? o(f) : "";
+          return n.length === 0 ? /* @__PURE__ */ t.jsx(x, { component: "span", sx: { color: "text.secondary" }, children: g }) : n == null ? void 0 : n.map((u) => {
+            const i = o.find(($) => l($) === l(u));
+            return i ? s(i) : "";
           }).filter(Boolean).join(", ");
         } : (e) => {
           const n = e;
           if (n == null || n === "")
-            return /* @__PURE__ */ u.jsx(i, { component: "span", sx: { color: "text.secondary" }, children: d });
-          if (y)
-            return o(n);
-          const a = t.find((f) => l(f) === l(n));
-          return a ? o(a) : "";
+            return /* @__PURE__ */ t.jsx(x, { component: "span", sx: { color: "text.secondary" }, children: g });
+          if (b)
+            return s(n);
+          const u = o.find((i) => l(i) === l(n));
+          return u ? s(u) : "";
         },
-        ...r,
-        value: t.length ? b ?? "" : "",
+        ...a,
+        value: o.length ? z ?? "" : "",
         onChange: (e, n) => {
-          if (r.onChange)
-            r.onChange(e, n);
-          else if (!c) {
-            const a = e.target.value;
-            V(a);
+          if (a.onChange)
+            a.onChange(e, n);
+          else if (!v) {
+            const u = e.target.value;
+            k(u);
           }
         },
-        children: t == null ? void 0 : t.map((e, n) => /* @__PURE__ */ u.jsx(
-          E,
-          {
-            disabled: (e == null ? void 0 : e.disabled) ?? !1,
-            value: l(e),
-            children: o(e)
-          },
-          `${l(e)}-${n}`
-        ))
+        children: [
+          r && /* @__PURE__ */ t.jsx(T, { sx: { px: 2, py: 1, position: "sticky", top: 0, bgcolor: "background.paper", zIndex: 1 }, children: /* @__PURE__ */ t.jsx(
+            A,
+            {
+              size: "small",
+              fullWidth: !0,
+              autoFocus: !0,
+              placeholder: w,
+              value: d,
+              onChange: (e) => j(e.target.value),
+              onKeyDown: (e) => {
+                e.key !== "Escape" && e.stopPropagation();
+              },
+              onClick: (e) => {
+                e.stopPropagation();
+              },
+              InputProps: {
+                startAdornment: /* @__PURE__ */ t.jsx(B, { position: "start", children: /* @__PURE__ */ t.jsx(K, { fontSize: "small" }) })
+              }
+            }
+          ) }),
+          (c == null ? void 0 : c.length) > 0 ? c.map((e, n) => /* @__PURE__ */ t.jsx(
+            p,
+            {
+              disabled: (e == null ? void 0 : e.disabled) ?? !1,
+              value: l(e),
+              children: s(e)
+            },
+            `${l(e)}-${n}`
+          )) : r && d && /* @__PURE__ */ t.jsx(p, { disabled: !0, children: /* @__PURE__ */ t.jsx(x, { sx: { color: "text.secondary", fontStyle: "italic" }, children: "No results found" }) }),
+          !r && (o == null ? void 0 : o.map((e, n) => /* @__PURE__ */ t.jsx(
+            p,
+            {
+              disabled: (e == null ? void 0 : e.disabled) ?? !1,
+              value: l(e),
+              children: s(e)
+            },
+            `${l(e)}-${n}`
+          )))
+        ]
       }
     ) });
   }
 );
 export {
-  W as default
+  J as default
 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.131",
+  "version": "1.0.133",
   "description": "advanced ui kit for solostylist",
   "private": false,
   "type": "module",