@konstructio/ui 0.1.2-alpha.67 → 0.1.2-alpha.69

package/dist/components/Select/components/List/List.js

@@ -1,182 +1,181 @@
-import { jsxs as Z, jsx as r } from "react/jsx-runtime";
-import { S as B } from "../../../../index-BvoZGpli.js";
-import { d as G } from "../../../../debounce-DJveWHr_.js";
-import { forwardRef as J, useRef as C, useState as K, useImperativeHandle as M, useMemo as Q, useEffect as R } from "react";
-import { Loading as W } from "../../../Loading/Loading.js";
-import { cn as o } from "../../../../utils/index.js";
-import { useNavigationUlList as X } from "../../hooks/useNavigationList.js";
-import { ListItem as b } from "../ListItem/ListItem.js";
-import { listVariants as Y } from "./List.variants.js";
-import { DEFAULT_LIST_SIZE as $ } from "../../constants/pagination.js";
-import { useSelectContext as ee } from "../../contexts/select.hook.js";
-const me = J(
+import { jsxs as N, jsx as o } from "react/jsx-runtime";
+import { d as K } from "../../../../debounce-DJveWHr_.js";
+import { forwardRef as Q, useRef as O, useState as W, useImperativeHandle as X, useMemo as j, useEffect as Y, Fragment as $ } from "react";
+import { Loading as R } from "../../../Loading/Loading.js";
+import { cn as s } from "../../../../utils/index.js";
+import { useNavigationUlList as ee } from "../../hooks/useNavigationList.js";
+import { A as te, i as re } from "../../../../AdditionalOptions-C2FDVZhu.js";
+import { ListItem as g } from "../ListItem/ListItem.js";
+import { listGroupLabelVariants as oe, listVariants as ne } from "./List.variants.js";
+import { DEFAULT_LIST_SIZE as se } from "../../constants/pagination.js";
+import { useSelectContext as ae } from "../../contexts/select.hook.js";
+const Le = Q(
   ({
-    additionalOptions: F,
-    className: N,
-    inputRef: l,
-    isLoading: E,
-    itemClassName: i,
-    name: I,
-    searchable: x = !1,
-    listItemSecondRowClassName: c,
-    wrapperInputRef: O,
-    isInfiniteScrollEnabled: u,
-    onFetchMoreOptions: f,
-    noOptionsText: y
-  }, S) => {
-    const n = C(null), m = C(null), [p, L] = K(!1), {
-      canContinueFetching: a,
-      canFilter: j,
-      isOpen: P,
-      isTyping: k,
-      options: w,
-      page: g,
-      searchTerm: d,
-      setCanContinueFetching: T,
-      setOptions: U,
-      setPage: _,
-      toggleOpen: q
-    } = ee();
-    M(S, () => n.current, [n]);
-    const h = x && j ? w.filter((e) => {
-      const t = d.toLowerCase();
+    additionalOptions: A,
+    className: I,
+    groupedOptions: l,
+    inputRef: c,
+    isLoading: P,
+    itemClassName: u,
+    name: T,
+    searchable: f = !1,
+    listItemSecondRowClassName: p,
+    wrapperInputRef: U,
+    isInfiniteScrollEnabled: h,
+    noOptionsText: F,
+    onFetchMoreOptions: b
+  }, V) => {
+    const m = O(null), L = O(null), [v, k] = W(!1), {
+      canContinueFetching: d,
+      canFilter: y,
+      isOpen: _,
+      isTyping: E,
+      options: G,
+      page: w,
+      searchTerm: n,
+      setCanContinueFetching: q,
+      setOptions: z,
+      setPage: D
+    } = ae();
+    X(V, () => m.current, [m]);
+    const a = l.length > 0 && re(l[0]), x = f && y ? G.filter((e) => {
+      const t = n.toLowerCase();
       return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(t);
-    }) : w;
-    X({
-      ulRef: n,
-      wrapperInputRef: O,
-      searchable: x,
-      filteredOptions: h
+    }) : G, C = j(() => {
+      if (!a)
+        return [];
+      const e = l;
+      if (!f || !y || !n)
+        return e;
+      const t = n.toLowerCase();
+      return e.map((r) => ({
+        ...r,
+        options: r.options.filter(
+          (i) => i.label.toLowerCase().includes(t)
+        )
+      })).filter((r) => r.options.length > 0);
+    }, [a, l, f, y, n]), H = a ? C.flatMap((e) => e.options) : x;
+    ee({
+      ulRef: m,
+      wrapperInputRef: U,
+      searchable: f,
+      filteredOptions: H
     });
-    const z = h.filter(
-      (e, t, s) => t === s.findIndex((v) => v.value === e.value)
-    ), A = h.length === 0, D = Q(
-      () => G(async (e) => {
+    const M = x.filter(
+      (e, t, r) => t === r.findIndex((i) => i.value === e.value)
+    ), S = a ? C.length === 0 : x.length === 0, Z = j(
+      () => K(async (e) => {
         const [t] = e;
-        if (t.isIntersecting && !p && f && a)
+        if (t.isIntersecting && !v && b && d)
           try {
-            L(!0);
-            const s = g + 1, { data: v, hasMore: H } = await f({
-              page: s,
-              pageSize: $,
-              termOfSearch: d
+            k(!0);
+            const r = w + 1, { data: i, hasMore: B } = await b({
+              page: r,
+              pageSize: se,
+              termOfSearch: n
             });
-            _(s), T(H), U((V) => [...V, ...v]);
+            D(r), q(B), z((J) => [...J, ...i]);
           } catch {
             console.error("Error fetching more options");
           } finally {
-            L(!1);
+            k(!1);
           }
       }, 100),
-      [p, f, d, g]
+      [v, b, n, w]
     );
-    return R(() => {
-      if (u && a && m.current && !k) {
-        const e = new IntersectionObserver(D, {
+    return Y(() => {
+      if (h && d && L.current && !E) {
+        const e = new IntersectionObserver(Z, {
           threshold: 0.1
         });
-        return e.observe(m.current), () => e.disconnect();
+        return e.observe(L.current), () => e.disconnect();
       }
     }, [
-      u,
-      a,
-      p,
-      k,
-      g
-    ]), /* @__PURE__ */ Z(
+      h,
+      d,
+      v,
+      E,
+      w
+    ]), /* @__PURE__ */ N(
       "ul",
       {
-        ref: n,
-        title: I,
+        ref: m,
+        title: T,
         role: "listbox",
-        className: o(Y({ className: N })),
-        "data-state": P ? "open" : "closed",
+        className: s(ne({ className: I })),
+        "data-state": _ ? "open" : "closed",
         children: [
-          E ? /* @__PURE__ */ r(
-            b,
+          P ? /* @__PURE__ */ o(
+            g,
             {
-              className: o("select-none", i),
+              className: s("select-none", u),
               isClickable: !1,
-              inputRef: l,
+              inputRef: c,
               value: "Loading...",
               label: "Loading...",
-              listItemSecondRowClassName: c
+              listItemSecondRowClassName: p
             }
-          ) : A ? /* @__PURE__ */ r(
-            b,
+          ) : S ? /* @__PURE__ */ o(
+            g,
             {
               isEmpty: !0,
-              className: o("select-none", i),
+              className: s("select-none", u),
               isClickable: !1,
-              inputRef: l,
-              value: y ?? "",
-              label: y ?? "No options",
-              listItemSecondRowClassName: c
+              inputRef: c,
+              value: F ?? "",
+              label: F ?? "No options",
+              listItemSecondRowClassName: p
             }
-          ) : z.map((e) => /* @__PURE__ */ r(
-            b,
+          ) : a ? C.map((e) => /* @__PURE__ */ N($, { children: [
+            /* @__PURE__ */ o(
+              "li",
+              {
+                role: "presentation",
+                "aria-hidden": "true",
+                "data-action": "true",
+                className: s(oe()),
+                children: e.groupLabel
+              }
+            ),
+            e.options.map((t) => /* @__PURE__ */ o(
+              g,
+              {
+                className: s("select-none", u),
+                isClickable: !0,
+                inputRef: c,
+                listItemSecondRowClassName: p,
+                ...t
+              },
+              t.value
+            ))
+          ] }, e.groupLabel)) : M.map((e) => /* @__PURE__ */ o(
+            g,
             {
-              className: o("select-none", i),
+              className: s("select-none", u),
               isClickable: !0,
-              inputRef: l,
-              listItemSecondRowClassName: c,
+              inputRef: c,
+              listItemSecondRowClassName: p,
               ...e
             },
             e.value
           )),
-          u && a && /* @__PURE__ */ r(
+          h && d && /* @__PURE__ */ o(
             "li",
             {
-              ref: m,
+              ref: L,
               role: "option",
               "data-action": "true",
               className: "flex items-center justify-center py-3",
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ r(W, { className: "w-4 h-4 text-aurora-500 select-none" })
+              children: /* @__PURE__ */ o(R, { className: "w-4 h-4 text-aurora-500 select-none" })
             }
           ),
-          F?.map((e, t) => /* @__PURE__ */ r(
-            "li",
-            {
-              role: "option",
-              "data-action": "true",
-              onClick: () => q(!1),
-              children: /* @__PURE__ */ r(
-                B,
-                {
-                  className: o(
-                    "flex",
-                    "min-h-10",
-                    "py-2",
-                    "px-6",
-                    "w-full",
-                    "h-full",
-                    "gap-1",
-                    "items-center",
-                    "text-sm",
-                    "[&>svg]:-ml-1",
-                    "[&>svg]:w-3.5",
-                    "[&>svg]:h-3.5",
-                    "[&>svg]:shrink-0",
-                    "cursor-pointer",
-                    "select-none",
-                    "hover:bg-gray-50",
-                    "hover:dark:bg-metal-700",
-                    "focus:outline-0",
-                    "text-blue-600",
-                    "dark:text-aurora-500"
-                  ),
-                  children: e
-                }
-              )
-            },
-            t
-          ))
+          /* @__PURE__ */ o(te, { additionalOptions: A })
         ]
       }
     );
   }
 );
 export {
-  me as List
+  Le as List
 };

package/dist/components/Select/components/List/List.types.d.ts

@@ -2,6 +2,7 @@ import { ComponentRef, RefObject } from 'react';
 import { SelectProps } from '../../Select.types';
 export type ListProps = Pick<SelectProps, 'name' | 'options' | 'theme' | 'additionalOptions'> & {
     className?: string;
+    groupedOptions: SelectProps['options'];
     inputRef?: RefObject<ComponentRef<'input'> | null>;
     isLoading: boolean;
     itemClassName?: string;

package/dist/components/Select/components/List/List.variants.d.ts

@@ -1 +1,2 @@
+export declare const listGroupLabelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const listVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Select/components/List/List.variants.js

@@ -1,5 +1,19 @@
 import { c as t } from "../../../../index-D29mdTf5.js";
-const o = t([
+const r = t([
+  "flex",
+  "items-center",
+  "h-8",
+  "px-6",
+  "py-1.5",
+  "text-[11px]",
+  "font-medium",
+  "uppercase",
+  "tracking-[0.25px]",
+  "text-metal-50",
+  "pointer-events-none",
+  "select-none",
+  "cursor-default"
+]), a = t([
   "scrollbar",
   "absolute",
   "bg-white",
@@ -7,7 +21,7 @@ const o = t([
   "flex-col",
   "mt-1",
   "overflow-hidden",
-  "rounded-md",
+  "rounded",
   "shadow-2xs",
   "top-full",
   "w-full",
@@ -27,5 +41,6 @@ const o = t([
   "[&>li:last-child]:mb-2"
 ]);
 export {
-  o as listVariants
+  r as listGroupLabelVariants,
+  a as listVariants
 };

package/dist/components/Select/components/Wrapper.d.ts

@@ -1,3 +1,5 @@
 import { ComponentRef, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { SelectProps } from '../Select.types';
-export declare const Wrapper: ForwardRefExoticComponent<Omit<SelectProps, 'options'> & RefAttributes<ComponentRef<'input'>>>;
+export declare const Wrapper: ForwardRefExoticComponent<Omit<SelectProps, 'options'> & {
+    groupedOptions: SelectProps['options'];
+} & RefAttributes<ComponentRef<'input'>>>;

package/dist/components/Select/components/Wrapper.js

@@ -1,98 +1,99 @@
 import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { forwardRef as te, useId as ae, useRef as w, useMemo as re, useImperativeHandle as ne, useEffect as le } from "react";
-import { Typography as se } from "../../Typography/Typography.js";
+import { forwardRef as ae, useId as re, useRef as w, useMemo as ne, useImperativeHandle as le, useEffect as se } from "react";
+import { Typography as oe } from "../../Typography/Typography.js";
 import { cn as n } from "../../../utils/index.js";
-import { labelVariants as oe, inputVariants as ce, selectVariants as ie } from "../Select.variants.js";
-import { useSelect as me } from "../hooks/useSelect.js";
-import { List as pe } from "./List/List.js";
-import { c as ue } from "../../../createLucideIcon-CP-mMPfa.js";
-import { LoaderIcon as fe } from "../../../assets/icons/components/Loader.js";
-import { C as de } from "../../../chevron-up-IlDPxR7j.js";
-import { useSelectContext as xe } from "../contexts/select.hook.js";
-const he = [
+import { labelVariants as ce, inputVariants as ie, selectVariants as me } from "../Select.variants.js";
+import { useSelect as pe } from "../hooks/useSelect.js";
+import { List as ue } from "./List/List.js";
+import { c as fe } from "../../../createLucideIcon-CP-mMPfa.js";
+import { LoaderIcon as de } from "../../../assets/icons/components/Loader.js";
+import { C as xe } from "../../../chevron-up-IlDPxR7j.js";
+import { useSelectContext as he } from "../contexts/select.hook.js";
+const ve = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], ve = ue("search", he), ze = te(
+], Ne = fe("search", ve), Oe = ae(
   ({
     additionalOptions: z,
     className: O,
     defaultValue: x,
     disabled: t = !1,
     error: f,
-    iconClassName: R,
-    inputClassName: F,
-    isInfiniteScrollEnabled: S = !1,
+    groupedOptions: R,
+    iconClassName: F,
+    inputClassName: S,
+    isInfiniteScrollEnabled: T = !1,
     isLoading: g,
     isRequired: h,
     label: v,
-    labelAction: T,
-    labelClassName: E,
-    labelWrapperClassName: M,
-    listClassName: W,
-    listItemClassName: _,
-    listItemSecondRowClassName: $,
+    labelAction: E,
+    labelClassName: M,
+    labelWrapperClassName: W,
+    listClassName: _,
+    listItemClassName: $,
+    listItemSecondRowClassName: H,
     name: d,
-    noOptionsText: H,
+    noOptionsText: P,
     placeholder: N,
     searchable: k = !1,
     showSearchIcon: C,
-    theme: P,
-    wrapperClassName: U,
-    onFetchMoreOptions: q,
-    onBlur: A,
-    onSearchChange: B,
+    theme: U,
+    wrapperClassName: q,
+    onFetchMoreOptions: A,
+    onBlur: B,
+    onSearchChange: D,
     ...y
-  }, D) => {
-    const I = ae(), c = w(null), j = w(null), G = w(0), {
+  }, G) => {
+    const I = re(), c = w(null), j = w(null), J = w(0), {
       isOpen: i,
       options: l,
-      searchTerm: J,
+      searchTerm: K,
       value: s,
-      setCanFilter: K,
-      setSearchTerm: Q,
+      setCanFilter: Q,
+      setSearchTerm: X,
       setValue: m,
-      toggleOpen: X
-    } = xe(), e = re(() => l.find(({ value: a }) => a === s), [l, s]), { wrapperRef: Y, wrapperInputRef: L, handleOpen: V } = me({
+      toggleOpen: Y
+    } = he(), e = ne(() => l.find(({ value: a }) => a === s), [l, s]), { wrapperRef: Z, wrapperInputRef: L, handleOpen: V } = pe({
       ulRef: j,
       inputRef: c,
       disabled: t,
       internalValue: e,
-      onBlur: A
+      onBlur: B
     }), p = d ? `${I}-${d}` : I;
-    ne(D, () => c.current, [c]), le(() => {
+    le(G, () => c.current, [c]), se(() => {
       if (x && !s) {
         const a = l && l.find((u) => u.value === x);
         a && m(a.value);
       }
     }, [x, l, m, s]);
-    const Z = (a) => {
+    const ee = (a) => {
       const u = a.target.value;
-      K(!0), m(""), Q(u ?? ""), B?.(u);
+      Q(!0), m(""), X(u ?? ""), D?.(u);
       const b = l.find(
-        (ee) => ee.value.toLocaleLowerCase() === u.toLocaleLowerCase()
+        (te) => te.value.toLocaleLowerCase() === u.toLocaleLowerCase()
       );
       m(b ? b.value : e?.value ?? "");
     };
     return /* @__PURE__ */ o(
       "div",
       {
-        ref: Y,
-        className: n("flex flex-col gap-2 w-full relative", U),
-        "data-theme": P,
+        ref: Z,
+        className: n("flex flex-col gap-2 w-full relative", q),
+        "data-theme": U,
         children: [
           v ? /* @__PURE__ */ o(
             "div",
             {
               className: n(
                 "flex items-center justify-between",
-                M
+                W
               ),
               children: [
                 /* @__PURE__ */ o(
                   "label",
                   {
                     id: p,
-                    className: n(oe({ className: E })),
+                    className: n(ce({ className: M })),
                     htmlFor: p,
                     onClick: () => !t && V(),
                     children: [
@@ -101,7 +102,7 @@ const he = [
                     ]
                   }
                 ),
-                T
+                E
               ]
             }
           ) : null,
@@ -111,18 +112,18 @@ const he = [
               ref: L,
               id: p,
               className: n(
-                ie({ className: O, hasError: !!f, disabled: t })
+                me({ className: O, hasError: !!f, disabled: t })
               ),
               role: "combobox",
-              onClick: () => !t && X(!i),
+              onClick: () => !t && Y(!i),
               "aria-expanded": i,
-              tabIndex: G.current,
+              tabIndex: J.current,
               "aria-labelledby": p,
               children: [
                 /* @__PURE__ */ o("div", { className: "flex gap-2.5 items-center flex-1", children: [
                   e?.leftIcon && !C && /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center dark:text-metal-50", children: e.leftIcon }),
                   C && /* @__PURE__ */ r(
-                    ve,
+                    Ne,
                     {
                       className: n(
                         "w-4",
@@ -140,10 +141,10 @@ const he = [
                     "input",
                     {
                       type: "text",
-                      value: i ? J : e?.label ?? s ?? "",
-                      onChange: Z,
+                      value: i ? K : e?.label ?? s ?? "",
+                      onChange: ee,
                       placeholder: N,
-                      className: n(ce({ className: F }), {
+                      className: n(ie({ className: S }), {
                         "text-red-700 placeholder:text-red-700": !!f
                       }),
                       onClick: (a) => {
@@ -159,7 +160,7 @@ const he = [
                       ...y
                     }
                   ) : /* @__PURE__ */ o(
-                    se,
+                    oe,
                     {
                       variant: "body2",
                       className: n(
@@ -181,18 +182,18 @@ const he = [
                   )
                 ] }),
                 g ? /* @__PURE__ */ r(
-                  fe,
+                  de,
                   {
                     size: 16,
                     className: "text-metal-400 animate-spin select-none"
                   }
                 ) : !C && /* @__PURE__ */ r(
-                  de,
+                  xe,
                   {
                     "data-state": i ? "open" : "closed",
                     className: n(
                       "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-metal-50",
-                      R,
+                      F,
                       {
                         "text-red-700": !!f,
                         "text-metal-400/50 dark:group-focus-within:text-zinc-500": t
@@ -218,22 +219,23 @@ const he = [
             }
           ),
           i && /* @__PURE__ */ r(
-            pe,
+            ue,
             {
               ref: j,
               additionalOptions: z,
-              className: W,
-              itemClassName: _,
+              className: _,
+              groupedOptions: R,
+              itemClassName: $,
               name: d,
               wrapperInputRef: L,
               inputRef: c,
               options: l,
               isLoading: !!g,
               searchable: k,
-              listItemSecondRowClassName: $,
-              isInfiniteScrollEnabled: S,
-              onFetchMoreOptions: q,
-              noOptionsText: H
+              listItemSecondRowClassName: H,
+              isInfiniteScrollEnabled: T,
+              onFetchMoreOptions: A,
+              noOptionsText: P
             }
           )
         ]
@@ -242,5 +244,5 @@ const he = [
   }
 );
 export {
-  ze as Wrapper
+  Oe as Wrapper
 };

package/dist/components/Select/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './AdditionalOptions/AdditionalOptions';
 export * from './EmptyList';
 export * from './List/List';
 export * from './Wrapper';

package/dist/components/Select/components/index.js

@@ -1,8 +1,10 @@
-import { EmptyList as p } from "./EmptyList.js";
-import { List as e } from "./List/List.js";
-import { Wrapper as f } from "./Wrapper.js";
+import { A as t } from "../../../AdditionalOptions-C2FDVZhu.js";
+import { EmptyList as e } from "./EmptyList.js";
+import { List as m } from "./List/List.js";
+import { Wrapper as s } from "./Wrapper.js";
 export {
-  p as EmptyList,
-  e as List,
-  f as Wrapper
+  t as AdditionalOptions,
+  e as EmptyList,
+  m as List,
+  s as Wrapper
 };

package/dist/components/index.js

@@ -17,7 +17,7 @@ import { Filter as k } from "./Filter/Filter.js";
 import { ImageUpload as F } from "./ImageUpload/ImageUpload.js";
 import { Input as M } from "./Input/Input.js";
 import { Loading as y } from "./Loading/Loading.js";
-import { M as U } from "../Modal--z642-Wv.js";
+import { M as U } from "../Modal-BGcucTHv.js";
 import { MultiSelectDropdown as j } from "./MultiSelectDropdown/MultiSelectDropdown.js";
 import { PhoneNumberInput as H } from "./PhoneNumberInput/PhoneNumberInput.js";
 import { PieChart as K } from "./PieChart/PieChart.js";