@konstructio/ui 0.1.2-alpha.39 → 0.1.2-alpha.40

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.js

@@ -1,21 +1,34 @@
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { MultiSelectDropdownProvider as c } from "./contexts/MultiSelectDropdown.provider.js";
-import { Wrapper as n } from "./components/Wrapper/Wrapper.js";
-const x = l(
-  ({ options: t, multiselect: p, value: e, onChange: i, onBlur: f, name: r, ...m }, d) => /* @__PURE__ */ o(
-    c,
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { MultiSelectDropdownProvider as a } from "./contexts/MultiSelectDropdown.provider.js";
+import { Wrapper as s } from "./components/Wrapper/Wrapper.js";
+const u = n(
+  ({
+    options: t,
+    multiselect: e,
+    value: p,
+    onChange: i,
+    onBlur: l,
+    name: o,
+    isLoading: d,
+    noOptionsText: m,
+    ...f
+  }, c) => /* @__PURE__ */ r(
+    a,
     {
       defaultOptions: t,
-      multiselect: p,
-      value: e,
+      multiselect: e,
+      value: p,
       onChange: i,
-      onBlur: f,
-      name: r,
-      children: /* @__PURE__ */ o(n, { ref: d, ...m, name: r })
+      onBlur: l,
+      name: o,
+      isLoading: d,
+      noOptionsText: m,
+      children: /* @__PURE__ */ r(s, { ref: c, ...f, name: o })
     }
   )
 );
+u.displayName = "MultiSelectDropdown";
 export {
-  x as MultiSelectDropdown
+  u as MultiSelectDropdown
 };

package/dist/components/MultiSelectDropdown/components/Item/Item.js

@@ -1,27 +1,32 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { cn as m } from "../../../../utils/index.js";
-import { wrapperVariants as i } from "./Item.variants.js";
-import { useMultiSelectDropdown as s } from "../../contexts/MultiSelectDropdown.hook.js";
-import { Typography as c } from "../../../Typography/Typography.js";
-import { Tag as p } from "../../../Tag/Tag.js";
-const x = ({ option: r, theme: a, isSelected: o }) => {
-  const { onSelectOption: e } = s();
-  return /* @__PURE__ */ l(
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { cn as i } from "../../../../utils/index.js";
+import { wrapperVariants as s } from "./Item.variants.js";
+import { useMultiSelectDropdown as c } from "../../contexts/MultiSelectDropdown.hook.js";
+import { Typography as p } from "../../../Typography/Typography.js";
+import { Tag as n } from "../../../Tag/Tag.js";
+const u = ({
+  option: r,
+  theme: e,
+  isSelected: a,
+  className: o
+}) => {
+  const { onSelectOption: l } = c();
+  return /* @__PURE__ */ m(
     "li",
     {
       role: "option",
-      "data-theme": a,
-      className: m(i({ isSelected: o })),
-      onClick: () => e(r),
+      "data-theme": e,
+      className: i(s({ isSelected: a }), o),
+      onClick: () => l(r),
       children: [
-        /* @__PURE__ */ t(c, { variant: "body2", className: "text-slate-800", children: r.label }),
-        /* @__PURE__ */ t(
-          p,
+        /* @__PURE__ */ t(p, { variant: "body2", className: "text-slate-800", children: r.label }),
+        r.tagLabel && /* @__PURE__ */ t(
+          n,
           {
             id: r.id,
             label: r.tagLabel,
             color: r.tagColor,
-            isSelected: o
+            isSelected: a
           }
         )
       ]
@@ -29,5 +34,5 @@ const x = ({ option: r, theme: a, isSelected: o }) => {
   );
 };
 export {
-  x as Item
+  u as Item
 };

package/dist/components/MultiSelectDropdown/components/List/List.js

@@ -1,28 +1,36 @@
 import { jsx as e } from "react/jsx-runtime";
-import { cn as s } from "../../../../utils/index.js";
-import { Item as a } from "../Item/Item.js";
+import { cn as m } from "../../../../utils/index.js";
+import { Item as i } from "../Item/Item.js";
 import { wrapperVariants as p } from "./List.variants.js";
-import { useMultiSelectDropdown as l } from "../../contexts/MultiSelectDropdown.hook.js";
-import { Typography as c } from "../../../Typography/Typography.js";
-const y = ({ theme: o }) => {
-  const { options: r, selectedOptions: i } = l();
-  return /* @__PURE__ */ e("ul", { role: "listbox", "data-theme": o, className: s(p()), children: r.length > 0 ? r.map((t) => /* @__PURE__ */ e(
-    a,
+import { useMultiSelectDropdown as c } from "../../contexts/MultiSelectDropdown.hook.js";
+import { Typography as d } from "../../../Typography/Typography.js";
+const y = ({ theme: s }) => {
+  const { options: o, selectedOptions: n, isLoading: r, noOptionsText: a } = c();
+  return /* @__PURE__ */ e("ul", { role: "listbox", "data-theme": s, className: m(p()), children: r ? /* @__PURE__ */ e(
+    i,
+    {
+      option: { id: "loading", label: "Loading..." },
+      className: "select-none pointer-events-none",
+      isSelected: !1
+    },
+    "loading"
+  ) : o.length > 0 ? o.map((t) => /* @__PURE__ */ e(
+    i,
     {
       option: t,
-      isSelected: i.some(
-        (m) => m.id === t.id
+      isSelected: n.some(
+        (l) => l.id === t.id
       )
     },
     t.id
-  )) : /* @__PURE__ */ e(
-    c,
+  )) : /* @__PURE__ */ e("li", { className: "select-none", children: /* @__PURE__ */ e(
+    d,
     {
       variant: "body2",
       className: "text-zinc-800 dark:text-slate-50 italic px-2 py-2",
-      children: "No options"
+      children: a ?? "No options"
     }
-  ) });
+  ) }) });
 };
 export {
   y as List

package/dist/components/MultiSelectDropdown/components/Wrapper/Wrapper.js

@@ -2,22 +2,30 @@ import "../Item/Item.js";
 import { List as v } from "../List/List.js";
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import * as c from "react";
-import { forwardRef as N, useId as b, useImperativeHandle as C } from "react";
-import { Tag as O } from "../../../Tag/Tag.js";
-import { cn as a } from "../../../../utils/index.js";
-import { useMultiSelectDropdown as R } from "../../hooks/useMultiSelectDropdown.js";
-import { labelVariants as S, multiSelectDropdownVariants as k, wrapperVariants as D } from "../../MultiSelectDropdown.variants.js";
-import { C as M } from "../../../../chevron-up-CRyLc5Ml.js";
-import { useMultiSelectDropdown as y } from "../../contexts/MultiSelectDropdown.hook.js";
-const I = (r) => /* @__PURE__ */ c.createElement("svg", { width: 9, height: 9, viewBox: "0 0 9 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...r }, /* @__PURE__ */ c.createElement("path", { d: "M8.16667 0.8225L7.34417 0L4.08333 3.26083L0.8225 0L0 0.8225L3.26083 4.08333L0 7.34417L0.8225 8.16667L4.08333 4.90583L7.34417 8.16667L8.16667 7.34417L4.90583 4.08333L8.16667 0.8225Z", fill: "#364153" })), Z = N(
+import { forwardRef as b, useId as S, useImperativeHandle as C } from "react";
+import { S as O } from "../../../../loader-juvMSJ9L.js";
+import { cn as t } from "../../../../utils/index.js";
+import { useMultiSelectDropdown as k } from "../../hooks/useMultiSelectDropdown.js";
+import { labelVariants as D, multiSelectDropdownVariants as M, wrapperVariants as R } from "../../MultiSelectDropdown.variants.js";
+import { C as y } from "../../../../chevron-up-CRyLc5Ml.js";
+import { useMultiSelectDropdown as I } from "../../contexts/MultiSelectDropdown.hook.js";
+import { Tag as V } from "../../../Tag/Tag.js";
+const j = (r) => /* @__PURE__ */ c.createElement("svg", { width: 9, height: 9, viewBox: "0 0 9 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...r }, /* @__PURE__ */ c.createElement("path", { d: "M8.16667 0.8225L7.34417 0L4.08333 3.26083L0.8225 0L0 0.8225L3.26083 4.08333L0 7.34417L0.8225 8.16667L4.08333 4.90583L7.34417 8.16667L8.16667 7.34417L4.90583 4.08333L8.16667 0.8225Z", fill: "#364153" })), E = b(
   ({ label: r, labelClassName: p, name: l, placeholder: d = "", theme: h, wrapperClassName: f }, u) => {
-    const i = b(), { selectedOptions: n, isOpen: o, onOpen: w, onRemoveOption: L, inputRef: s } = y(), { wrapperRef: g, handleOpen: x } = R();
-    return C(u, () => s.current, [s]), /* @__PURE__ */ m(
+    const o = S(), {
+      selectedOptions: n,
+      isOpen: s,
+      onOpen: w,
+      onRemoveOption: L,
+      inputRef: i,
+      isLoading: g
+    } = I(), { wrapperRef: x, handleOpen: N } = k();
+    return C(u, () => i.current, [i]), /* @__PURE__ */ m(
       "div",
       {
-        ref: g,
-        className: a(
-          D({
+        ref: x,
+        className: t(
+          R({
             className: f
           })
         ),
@@ -26,9 +34,9 @@ const I = (r) => /* @__PURE__ */ c.createElement("svg", { width: 9, height: 9, v
           r ? /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: l ?? i,
-              className: a(
-                S({
+              htmlFor: l ?? o,
+              className: t(
+                D({
                   className: p
                 })
               ),
@@ -39,36 +47,36 @@ const I = (r) => /* @__PURE__ */ c.createElement("svg", { width: 9, height: 9, v
           /* @__PURE__ */ m(
             "div",
             {
-              id: l ?? i,
-              className: a(k()),
+              id: l ?? o,
+              className: t(M()),
               role: "combobox",
-              onClick: x,
-              "aria-expanded": o,
+              onClick: N,
+              "aria-expanded": s,
               children: [
-                n.length === 0 ? /* @__PURE__ */ e("span", { className: "text-base text-inherit select-none", children: d }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: n.map((t) => /* @__PURE__ */ e(
-                  O,
+                n.length === 0 ? /* @__PURE__ */ e("span", { className: "text-base text-inherit select-none", children: d }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: n.map((a) => /* @__PURE__ */ e(
+                  V,
                   {
-                    id: t.id,
-                    label: t.tagLabel,
-                    color: t.tagColor || "gray-800",
+                    id: a.id,
+                    label: a.tagLabel || a.label || "",
+                    color: a.tagColor || "gray-800",
                     className: "select-none gap-2",
                     rightIcon: /* @__PURE__ */ e(
-                      I,
+                      j,
                       {
                         className: "w-2 h-2",
-                        onClick: () => L(t)
+                        onClick: () => L(a)
                       }
                     ),
-                    "data-value": t.label
+                    "data-value": a.label
                   },
-                  t.id
+                  a.id
                 )) }),
-                /* @__PURE__ */ e(
-                  M,
+                g ? /* @__PURE__ */ e(O, { className: "w-4 h-4 text-slate-400 animate-spin shrink-0" }) : /* @__PURE__ */ e(
+                  y,
                   {
-                    className: a(
+                    className: t(
                       "w-4 h-4 text-inherit transition-all duration-50 shrink-0",
-                      o ? "rotate-0" : "rotate-180"
+                      s ? "rotate-0" : "rotate-180"
                     )
                   }
                 )
@@ -78,19 +86,20 @@ const I = (r) => /* @__PURE__ */ c.createElement("svg", { width: 9, height: 9, v
           /* @__PURE__ */ e(
             "input",
             {
-              ref: s,
+              ref: i,
               type: "text",
               name: l,
               className: "hidden",
               readOnly: !0
             }
           ),
-          o ? /* @__PURE__ */ e(v, {}) : null
+          s ? /* @__PURE__ */ e(v, {}) : null
         ]
       }
     );
   }
 );
+E.displayName = "MultiSelectDropdownWrapper";
 export {
-  Z as Wrapper
+  E as Wrapper
 };

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.context.js

@@ -1,5 +1,5 @@
-import { createContext as t } from "react";
-const n = {
+import { createContext as n } from "react";
+const t = {
   options: [],
   selectedOptions: [],
   isOpen: !1,
@@ -12,8 +12,10 @@ const n = {
   },
   onOpen() {
     throw new Error("Function not implemented.");
-  }
-}, o = t(n);
+  },
+  isLoading: !1,
+  noOptionsText: void 0
+}, e = n(t);
 export {
-  o as MultiSelectDropdownContext
+  e as MultiSelectDropdownContext
 };

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.provider.js

@@ -1,119 +1,138 @@
-import { jsx as P } from "react/jsx-runtime";
-import { useRef as V, useState as R, useEffect as b, useCallback as p } from "react";
-import { MultiSelectDropdownContext as k } from "./MultiSelectDropdown.context.js";
-import { useToggle as y } from "../../../hooks/useToggle.js";
-const T = ({
+import { jsx as V } from "react/jsx-runtime";
+import { useRef as k, useState as R, useEffect as g, useCallback as S } from "react";
+import { MultiSelectDropdownContext as C } from "./MultiSelectDropdown.context.js";
+import { useToggle as E } from "../../../hooks/useToggle.js";
+const q = ({
   children: x,
-  defaultOptions: o = [],
-  multiselect: c = !0,
-  value: a,
-  onChange: f,
-  onBlur: S,
-  name: I
+  defaultOptions: r = [],
+  multiselect: i = !0,
+  value: f,
+  onChange: m,
+  onBlur: u,
+  name: h,
+  isLoading: b,
+  noOptionsText: j
 }) => {
-  const m = V(null), [u, h] = y(!1), [g, O] = R(o), [i, v] = R([]), r = a !== void 0;
-  b(() => {
-    if (r) {
-      const t = a || [];
-      v(t);
-      const n = new Set(t.map((s) => s.id));
-      O(
-        c ? o.filter((s) => !n.has(s.id)) : o.map((s) => ({
+  const d = k(null), [w, I] = E(!1), [y, p] = R(r), [c, v] = R([]), o = f !== void 0;
+  g(() => {
+    if (!o) {
+      const n = new Set(
+        c.map((e) => e.id)
+      );
+      p(
+        i ? r.filter((e) => !n.has(e.id)) : r.map((e) => ({
+          ...e,
+          isSelected: n.has(e.id)
+        }))
+      );
+    }
+  }, [r, i, o, c]), g(() => {
+    if (o) {
+      const n = f || [];
+      v(n);
+      const e = new Set(n.map((s) => s.id));
+      p(
+        i ? r.filter((s) => !e.has(s.id)) : r.map((s) => ({
           ...s,
-          isSelected: n.has(s.id)
+          isSelected: e.has(s.id)
         }))
       );
     }
-  }, [a, r, o, c]);
-  const d = p(
-    (t) => {
-      const n = t.map(({ id: e, value: w, label: M }) => ({
-        id: e,
-        value: w ?? M
-      })), s = JSON.stringify(n);
-      m.current && (m.current.value = s), f && f({
+  }, [f, o, r, i]);
+  const l = S(
+    (n) => {
+      const e = n.map(({ id: t, value: O, label: P }) => ({
+        id: t,
+        value: O ?? P
+      })), s = JSON.stringify(e);
+      d.current && (d.current.value = s), m && m({
         target: {
-          value: t,
-          name: I ?? ""
+          value: n,
+          name: h ?? ""
         }
       });
     },
-    [f, I]
-  ), l = p(
-    (t) => {
-      const n = u;
-      h(t), n && t === !1 && S && S();
+    [m, h]
+  ), a = S(
+    (n) => {
+      const e = w;
+      I(n), e && n === !1 && u && d.current && u({
+        target: d.current,
+        type: "blur"
+      });
     },
-    [u, h, S]
-  ), j = p(
-    (t) => {
-      if (r) {
-        const e = [
-          ...c ? i : [],
-          t
+    [w, I, u, d]
+  ), D = S(
+    (n) => {
+      if (o) {
+        const t = [
+          ...i ? c : [],
+          n
         ];
-        d(e), l(!1);
+        l(t), a(!1);
         return;
       }
-      const n = [
-        ...c ? i : [],
-        t
+      const e = [
+        ...i ? c : [],
+        n
       ];
-      v(n);
-      const s = n.map((e) => e.id);
-      O(() => c ? o.filter(
-        (e) => !s.includes(e.id)
-      ) : o.map((e) => ({
-        ...e,
-        isSelected: s.includes(e.id)
-      }))), d(n), l(!1);
+      v(e);
+      const s = e.map((t) => t.id);
+      p(() => i ? r.filter(
+        (t) => !s.includes(t.id)
+      ) : r.map((t) => ({
+        ...t,
+        isSelected: s.includes(t.id)
+      }))), l(e), a(!1);
     },
     [
-      o,
-      d,
-      c,
-      i,
+      r,
       l,
-      r
+      i,
+      c,
+      a,
+      o
     ]
-  ), D = p(
-    (t) => {
-      if (r) {
-        const e = i.filter(
-          (w) => w.id !== t.id
+  ), M = S(
+    (n) => {
+      if (o) {
+        const t = c.filter(
+          (O) => O.id !== n.id
         );
-        d(e);
+        l(t);
         return;
       }
-      const n = i.filter(
-        (e) => e.id !== t.id
+      const e = c.filter(
+        (t) => t.id !== n.id
       );
-      v(n);
-      const s = n.map((e) => e.id);
-      O(
-        () => o.filter(
-          (e) => !s.includes(e.id)
+      v(e);
+      const s = e.map((t) => t.id);
+      p(
+        () => r.filter(
+          (t) => !s.includes(t.id)
         )
-      ), d(n);
+      ), l(e);
     },
-    [o, d, i, r]
+    [r, l, c, o]
   );
-  return /* @__PURE__ */ P(
-    k.Provider,
+  return /* @__PURE__ */ V(
+    C.Provider,
     {
       value: {
-        options: g,
-        selectedOptions: i,
-        isOpen: u,
-        inputRef: m,
-        onSelectOption: j,
-        onRemoveOption: D,
-        onOpen: l
+        options: y,
+        selectedOptions: c,
+        isOpen: w,
+        inputRef: d,
+        onSelectOption: D,
+        onRemoveOption: M,
+        onOpen: a,
+        isLoading: b,
+        noOptionsText: j
       },
       children: x
     }
   );
 };
 export {
-  T as MultiSelectDropdownProvider
+  q as MultiSelectDropdownProvider
 };

package/dist/index.d.ts

@@ -378,7 +378,7 @@ export declare const MultiSelectDropdown: FC<MultiSelectDropdownProps>;
 declare type MultiSelectDropdownOption = {
     id: string | number;
     label: string;
-    tagLabel: string;
+    tagLabel?: string;
     tagColor?: TagProps['color'];
     value?: string;
 };
@@ -393,7 +393,9 @@ declare interface MultiSelectDropdownProps extends VariantProps<typeof multiSele
     multiselect?: boolean;
     value?: MultiSelectDropdownOption[];
     onChange?: OnChangeFn_2;
-    onBlur?: VoidFunction;
+    onBlur?: OnBlurFn;
+    isLoading?: boolean;
+    noOptionsText?: string;
 }
 
 declare const multiSelectDropdownVariants: (props?: ClassProp | undefined) => string;
@@ -486,6 +488,11 @@ declare interface NumberInputProps extends VariantProps<typeof numberInputVarian
 
 declare const numberInputVariants: (props?: ClassProp | undefined) => string;
 
+declare type OnBlurFn = (event: {
+    target: HTMLInputElement | null;
+    type?: string;
+}) => void;
+
 declare type OnChangeFn = (params: {
     target: {
         value: string;

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.38",
+  "version": "0.1.2-alpha.39",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.39",
+  "version": "0.1.2-alpha.40",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",