@solostylist/ui-kit 1.0.196 → 1.0.197

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { SelectProps } from '@mui/material';
 /** Base type constraint for select options - can be primitives or objects */
 type BaseOption = string | number | Record<string, unknown>;
@@ -29,6 +30,8 @@ export type SSelectProps<T extends BaseOption = string> = Omit<SelectProps, 'err
     searchable?: boolean;
     /** Placeholder text for the search input */
     searchPlaceholder?: string;
+    /** Custom render function for options */
+    renderOption?: (option: T) => ReactNode;
 };
 /**
  * A flexible select component that handles both primitive and object options with form integration.

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

@@ -1,40 +1,41 @@
 import { j as t } from "../jsx-runtime-tc70JA_2.js";
-import { forwardRef as A, useState as f } from "react";
-import { c as E } from "../createSvgIcon-DTNHY3_v.js";
-import { Select as F, ListSubheader as M, TextField as T, InputAdornment as B, MenuItem as c, Box as p } from "@mui/material";
-import { SForm as D } from "../s-form/s-form.js";
-const K = E(/* @__PURE__ */ t.jsx("path", {
+import { forwardRef as F, useState as p } from "react";
+import { c as M } from "../createSvgIcon-DTNHY3_v.js";
+import { Select as T, ListSubheader as B, TextField as D, InputAdornment as K, MenuItem as f, Box as x } from "@mui/material";
+import { SForm as N } from "../s-form/s-form.js";
+const R = M(/* @__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"), N = A(
+}), "Search"), W = F(
   ({
-    options: r = [],
-    optionLabel: m = "name",
-    optionValue: y = "id",
-    placeholder: x,
-    label: C = "",
-    error: b,
-    required: I = !1,
-    simple: w = !1,
-    htmlFor: g,
-    searchable: l = !1,
-    searchPlaceholder: P = "",
+    options: o = [],
+    optionLabel: y = "name",
+    optionValue: C = "id",
+    placeholder: g,
+    label: b = "",
+    error: I,
+    required: w = !1,
+    simple: P = !1,
+    htmlFor: v,
+    searchable: r = !1,
+    searchPlaceholder: V = "",
+    renderOption: u,
     ...s
-  }, O) => {
-    const v = s.value !== void 0, [V, $] = f(s.multiple ? [] : null), L = v ? s.value : V, [u, h] = f(""), [k, j] = f(!1), a = (e) => String(typeof e == "string" || typeof e == "number" ? e : e[m]), o = (e) => typeof e == "string" || typeof e == "number" ? e : e[y], S = l && u ? r.filter((e) => a(e).toLowerCase().includes(u.toLowerCase())) : r;
-    return /* @__PURE__ */ t.jsx(D, { error: b, label: C, required: I, htmlFor: g, children: /* @__PURE__ */ t.jsxs(
-      F,
+  }, $) => {
+    const h = s.value !== void 0, [L, k] = p(s.multiple ? [] : null), z = h ? s.value : L, [i, j] = p(""), [A, S] = p(!1), a = (e) => String(typeof e == "string" || typeof e == "number" ? e : e[y]), l = (e) => typeof e == "string" || typeof e == "number" ? e : e[C], m = r && i ? o.filter((e) => a(e).toLowerCase().includes(i.toLowerCase())) : o;
+    return /* @__PURE__ */ t.jsx(N, { error: I, label: b, required: w, htmlFor: v, children: /* @__PURE__ */ t.jsxs(
+      T,
       {
-        id: g,
+        id: v,
         displayEmpty: !0,
         fullWidth: !0,
         defaultValue: "",
-        ref: O,
-        open: l ? k : void 0,
-        onOpen: l ? () => j(!0) : void 0,
-        onClose: l ? () => {
-          j(!1), h("");
+        ref: $,
+        open: r ? A : void 0,
+        onOpen: r ? () => S(!0) : void 0,
+        onClose: r ? () => {
+          S(!1), j("");
         } : void 0,
-        MenuProps: l ? {
+        MenuProps: r ? {
           autoFocus: !1,
           PaperProps: {
             onKeyDown: (e) => {
@@ -44,38 +45,38 @@ const K = E(/* @__PURE__ */ t.jsx("path", {
         } : void 0,
         renderValue: s.multiple ? (e) => {
           const n = e;
-          return n.length === 0 ? /* @__PURE__ */ t.jsx(p, { component: "span", sx: { color: "divider" }, children: x }) : n?.map((i) => {
-            const d = r.find((z) => o(z) === o(i));
-            return d ? a(d) : "";
+          return n.length === 0 ? /* @__PURE__ */ t.jsx(x, { component: "span", sx: { color: "divider" }, children: g }) : n?.map((d) => {
+            const c = o.find((E) => l(E) === l(d));
+            return c ? a(c) : "";
           }).filter(Boolean).join(", ");
         } : (e) => {
           const n = e;
           if (n == null || n === "")
-            return /* @__PURE__ */ t.jsx(p, { component: "span", sx: { color: "divider" }, children: x });
-          if (w)
+            return /* @__PURE__ */ t.jsx(x, { component: "span", sx: { color: "divider" }, children: g });
+          if (P)
             return a(n);
-          const i = r.find((d) => o(d) === o(n));
-          return i ? a(i) : "";
+          const d = o.find((c) => l(c) === l(n));
+          return d ? a(d) : "";
         },
         ...s,
-        value: r.length ? L ?? "" : "",
+        value: o.length ? z ?? "" : "",
         onChange: (e, n) => {
           if (s.onChange)
             s.onChange(e, n);
-          else if (!v) {
-            const i = e.target.value;
-            $(i);
+          else if (!h) {
+            const d = e.target.value;
+            k(d);
           }
         },
         children: [
-          l && /* @__PURE__ */ t.jsx(M, { sx: { px: 2, py: 1, position: "sticky", top: 0, bgcolor: "background.paper", zIndex: 1 }, children: /* @__PURE__ */ t.jsx(
-            T,
+          r && /* @__PURE__ */ t.jsx(B, { sx: { px: 2, py: 1, position: "sticky", top: 0, bgcolor: "background.paper", zIndex: 1 }, children: /* @__PURE__ */ t.jsx(
+            D,
             {
               fullWidth: !0,
               autoFocus: !0,
-              placeholder: P,
-              value: u,
-              onChange: (e) => h(e.target.value),
+              placeholder: V,
+              value: i,
+              onChange: (e) => j(e.target.value),
               onKeyDown: (e) => {
                 e.key !== "Escape" && e.stopPropagation();
               },
@@ -83,42 +84,42 @@ const K = E(/* @__PURE__ */ t.jsx("path", {
                 e.stopPropagation();
               },
               InputProps: {
-                startAdornment: /* @__PURE__ */ t.jsx(B, { position: "start", children: /* @__PURE__ */ t.jsx(K, { fontSize: "small" }) })
+                startAdornment: /* @__PURE__ */ t.jsx(K, { position: "start", children: /* @__PURE__ */ t.jsx(R, { fontSize: "small" }) })
               }
             }
           ) }),
-          l ? S?.length > 0 ? S.map((e, n) => /* @__PURE__ */ t.jsx(
-            c,
+          r ? m?.length > 0 ? m.map((e, n) => /* @__PURE__ */ t.jsx(
+            f,
             {
               disabled: e?.disabled ?? !1,
-              value: o(e),
-              children: a(e)
+              value: l(e),
+              children: u ? u(e) : a(e)
             },
-            `${o(e)}-${n}`
-          )) : u ? /* @__PURE__ */ t.jsx(c, { disabled: !0, children: /* @__PURE__ */ t.jsx(p, { sx: { color: "text.secondary", textAlign: "center", width: "100%" }, children: "No results found" }) }) : r?.map((e, n) => /* @__PURE__ */ t.jsx(
-            c,
+            `${l(e)}-${n}`
+          )) : i ? /* @__PURE__ */ t.jsx(f, { disabled: !0, children: /* @__PURE__ */ t.jsx(x, { sx: { color: "text.secondary", textAlign: "center", width: "100%" }, children: "No results found" }) }) : o?.map((e, n) => /* @__PURE__ */ t.jsx(
+            f,
             {
               disabled: e?.disabled ?? !1,
-              value: o(e),
-              children: a(e)
+              value: l(e),
+              children: u ? u(e) : a(e)
             },
-            `${o(e)}-${n}`
-          )) : r?.map((e, n) => /* @__PURE__ */ t.jsx(
-            c,
+            `${l(e)}-${n}`
+          )) : o?.map((e, n) => /* @__PURE__ */ t.jsx(
+            f,
             {
               disabled: e?.disabled ?? !1,
-              value: o(e),
-              children: a(e)
+              value: l(e),
+              children: u ? u(e) : a(e)
             },
-            `${o(e)}-${n}`
+            `${l(e)}-${n}`
           ))
         ]
       }
     ) });
   }
 );
-N.displayName = "SSelect";
+W.displayName = "SSelect";
 export {
-  N as SSelect,
-  N as default
+  W as SSelect,
+  W as default
 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.196",
+  "version": "1.0.197",
   "description": "advanced ui kit for solostylist",
   "type": "module",
   "main": "dist/main.js",