@konstructio/ui 0.1.2-alpha.66 → 0.1.2-alpha.68

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

@@ -33,6 +33,22 @@ export type Option = {
     /** Unique value for the option */
     value: string;
 };
+/**
+ * A group of options with a non-interactive header label.
+ */
+export type OptionGroup = {
+    groupLabel: string;
+    options: Option[];
+};
+/**
+ * A group of additional options with a non-interactive header label.
+ */
+export type AdditionalOptionGroup = {
+    groupLabel: string;
+    options: ReactNode[];
+};
+export declare const isOptionGroup: (item: Option | OptionGroup) => item is OptionGroup;
+export declare const isAdditionalOptionGroup: (item: unknown) => item is AdditionalOptionGroup;
 type OnChangeFn = (params: {
     target: {
         value: string;
@@ -74,7 +90,7 @@ type OnChangeFn = (params: {
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-select--docs Storybook}
  */
 export type SelectProps = VariantProps<typeof selectVariants> & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
-    additionalOptions?: ReactNode[] | string[];
+    additionalOptions?: ReactNode[] | string[] | AdditionalOptionGroup[];
     className?: string;
     disabled?: boolean;
     error?: string;
@@ -95,7 +111,7 @@ export type SelectProps = VariantProps<typeof selectVariants> & Omit<InputHTMLAt
     listItemSecondRowClassName?: string;
     mainWrapperClassName?: string;
     noOptionsText?: string;
-    options: Option[];
+    options: Option[] | OptionGroup[];
     searchable?: boolean;
     showSearchIcon?: boolean;
     theme?: Theme;

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './AdditionalOptions.types';
+export declare const AdditionalOptions: FC<Props>;

package/dist/components/Select/components/AdditionalOptions/AdditionalOptions.js

@@ -0,0 +1,11 @@
+import "react/jsx-runtime";
+import "../../../../index-BvoZGpli.js";
+import "react";
+import "../../../../utils/index.js";
+import { A as s } from "../../../../AdditionalOptions-C2FDVZhu.js";
+import "../List/List.variants.js";
+import "./AdditionalOptions.variants.js";
+import "../../contexts/select.hook.js";
+export {
+  s as AdditionalOptions
+};

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

@@ -0,0 +1,4 @@
+import { SelectProps } from '../../Select.types';
+export type Props = {
+    additionalOptions?: SelectProps['additionalOptions'];
+};

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

@@ -0,0 +1 @@
+export declare const additionalOptionSlotClassName: string;

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

@@ -0,0 +1,26 @@
+import { cn as e } from "../../../../utils/index.js";
+const o = e(
+  "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"
+);
+export {
+  o as additionalOptionSlotClassName
+};

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",
@@ -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'>>>;