@konstructio/ui 0.1.2-alpha.61 → 0.1.2-alpha.63

package/dist/chevron-left-BHBf-gQY.js

@@ -0,0 +1,5 @@
+import { c as e } from "./createLucideIcon-CP-mMPfa.js";
+const o = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]], t = e("chevron-left", o);
+export {
+  t as C
+};

package/dist/chevron-right-DvXGOiS_.js

@@ -0,0 +1,5 @@
+import { c as o } from "./createLucideIcon-CP-mMPfa.js";
+const t = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], e = o("chevron-right", t);
+export {
+  e as C
+};

package/dist/components/DateRangePicker/components/CalendarPanel/components/NavigationButton/NavigationButton.js

@@ -1,12 +1,13 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import { cn as e } from "../../../../../../utils/index.js";
-import { calendarNavButtonDisabledVariants as p, calendarNavButtonVariants as b } from "../../CalendarPanel.variants.js";
-import { C as v, a as N } from "../../../../../../chevron-right-SUh6si0f.js";
+import { calendarNavButtonDisabledVariants as h, calendarNavButtonVariants as b } from "../../CalendarPanel.variants.js";
+import { C as v } from "../../../../../../chevron-left-BHBf-gQY.js";
+import { C as N } from "../../../../../../chevron-right-DvXGOiS_.js";
 const B = ({
   direction: n,
-  onClick: s,
-  disabled: i = !1,
-  isAnimating: r = !1,
+  onClick: r,
+  disabled: s = !1,
+  isAnimating: i = !1,
   canNavigate: t = !0,
   hideWhenDisabled: l = !1,
   className: m,
@@ -14,23 +15,23 @@ const B = ({
   ariaLabel: u,
   size: c = "medium"
 }) => {
-  const a = i || r || !t;
+  const o = s || i || !t;
   if (l && !t)
     return null;
-  const f = n === "prev" ? v : N, h = c === "small" ? "w-4 h-4" : "w-5 h-5";
-  return /* @__PURE__ */ o(
+  const f = n === "prev" ? v : N, p = c === "small" ? "w-4 h-4" : "w-5 h-5";
+  return /* @__PURE__ */ a(
     "button",
     {
       type: "button",
-      onClick: s,
-      disabled: a,
+      onClick: r,
+      disabled: o,
       className: e(
         b(),
         m,
-        a && e(p(), d)
+        o && e(h(), d)
       ),
       "aria-label": u,
-      children: /* @__PURE__ */ o(f, { className: h })
+      children: /* @__PURE__ */ a(f, { className: p })
     }
   );
 };

package/dist/components/Datepicker/DatePicker.js

@@ -4,19 +4,20 @@ import { cn as t } from "../../utils/index.js";
 import { datePickerVariants as p } from "./DatePicker.variants.js";
 import '../../style.css';/* empty css                   */
 import { D as k } from "../../DayPicker-PUEUVAST.js";
-import { C as g, a as w } from "../../chevron-right-SUh6si0f.js";
+import { C as g } from "../../chevron-left-BHBf-gQY.js";
+import { C as w } from "../../chevron-right-DvXGOiS_.js";
 const y = ({
   className: l,
   showOutsideDays: n = !0,
   animate: d = !0,
   arrowClassName: s,
   monthsClassName: i,
-  defaultSelected: u,
+  defaultSelected: m,
   onSelect: o,
-  ...m
+  ...u
 }) => {
   const [c, x] = h(
-    () => u
+    () => m
   ), b = f(
     (e) => {
       e && (x(e), o?.(e));
@@ -129,7 +130,7 @@ const y = ({
       components: {
         Chevron: ({ className: e, ...r }) => r.orientation === "left" ? /* @__PURE__ */ a(g, { className: t(e), ...r }) : /* @__PURE__ */ a(w, { className: t(e), ...r })
       },
-      ...m
+      ...u
     }
   );
 };

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

@@ -1,15 +1,15 @@
-import { jsxs as V, jsx as r } from "react/jsx-runtime";
-import { S as Z } from "../../../../index-BvoZGpli.js";
-import { d as B } from "../../../../debounce-DJveWHr_.js";
-import { forwardRef as G, useRef as C, useState as J, useImperativeHandle as K, useMemo as M, useEffect as Q } from "react";
-import { Loading as R } from "../../../Loading/Loading.js";
+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 W } from "../../hooks/useNavigationList.js";
+import { useNavigationUlList as X } from "../../hooks/useNavigationList.js";
 import { ListItem as b } from "../ListItem/ListItem.js";
-import { listVariants as X } from "./List.variants.js";
-import { DEFAULT_LIST_SIZE as Y } from "../../constants/pagination.js";
-import { useSelectContext as $ } from "../../contexts/select.hook.js";
-const fe = G(
+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(
   ({
     additionalOptions: F,
     className: N,
@@ -19,59 +19,60 @@ const fe = G(
     name: I,
     searchable: x = !1,
     listItemSecondRowClassName: c,
-    wrapperInputRef: S,
+    wrapperInputRef: O,
     isInfiniteScrollEnabled: u,
     onFetchMoreOptions: f,
     noOptionsText: y
-  }, j) => {
-    const n = C(null), m = C(null), [p, L] = J(!1), {
-      isOpen: O,
-      searchTerm: g,
-      canFilter: P,
+  }, S) => {
+    const n = C(null), m = C(null), [p, L] = K(!1), {
       canContinueFetching: a,
-      page: d,
-      options: w,
+      canFilter: j,
+      isOpen: P,
       isTyping: k,
-      setOptions: T,
-      setPage: U,
-      setCanContinueFetching: _
-    } = $();
-    K(j, () => n.current, [n]);
-    const h = x && P ? w.filter((e) => {
-      const t = g.toLowerCase();
+      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();
       return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(t);
     }) : w;
-    W({
+    X({
       ulRef: n,
-      wrapperInputRef: S,
+      wrapperInputRef: O,
       searchable: x,
       filteredOptions: h
     });
-    const q = h.filter(
+    const z = h.filter(
       (e, t, s) => t === s.findIndex((v) => v.value === e.value)
-    ), z = h.length === 0, A = M(
-      () => B(async (e) => {
+    ), A = h.length === 0, D = Q(
+      () => G(async (e) => {
         const [t] = e;
         if (t.isIntersecting && !p && f && a)
           try {
             L(!0);
-            const s = d + 1, { data: v, hasMore: D } = await f({
+            const s = g + 1, { data: v, hasMore: H } = await f({
               page: s,
-              pageSize: Y,
-              termOfSearch: g
+              pageSize: $,
+              termOfSearch: d
             });
-            U(s), _(D), T((H) => [...H, ...v]);
+            _(s), T(H), U((V) => [...V, ...v]);
           } catch {
             console.error("Error fetching more options");
           } finally {
             L(!1);
           }
       }, 100),
-      [p, f, g, d]
+      [p, f, d, g]
     );
-    return Q(() => {
+    return R(() => {
       if (u && a && m.current && !k) {
-        const e = new IntersectionObserver(A, {
+        const e = new IntersectionObserver(D, {
           threshold: 0.1
         });
         return e.observe(m.current), () => e.disconnect();
@@ -81,15 +82,15 @@ const fe = G(
       a,
       p,
       k,
-      d
-    ]), /* @__PURE__ */ V(
+      g
+    ]), /* @__PURE__ */ Z(
       "ul",
       {
         ref: n,
         title: I,
         role: "listbox",
-        className: o(X({ className: N })),
-        "data-state": O ? "open" : "closed",
+        className: o(Y({ className: N })),
+        "data-state": P ? "open" : "closed",
         children: [
           E ? /* @__PURE__ */ r(
             b,
@@ -101,7 +102,7 @@ const fe = G(
               label: "Loading...",
               listItemSecondRowClassName: c
             }
-          ) : z ? /* @__PURE__ */ r(
+          ) : A ? /* @__PURE__ */ r(
             b,
             {
               isEmpty: !0,
@@ -112,7 +113,7 @@ const fe = G(
               label: y ?? "No options",
               listItemSecondRowClassName: c
             }
-          ) : q.map((e) => /* @__PURE__ */ r(
+          ) : z.map((e) => /* @__PURE__ */ r(
             b,
             {
               className: o("select-none", i),
@@ -131,42 +132,51 @@ const fe = G(
               "data-action": "true",
               className: "flex items-center justify-center py-3",
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ r(R, { className: "w-4 h-4 text-aurora-500 select-none" })
+              children: /* @__PURE__ */ r(W, { className: "w-4 h-4 text-aurora-500 select-none" })
             }
           ),
-          F?.map((e, t) => /* @__PURE__ */ r("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ r(
-            Z,
+          F?.map((e, t) => /* @__PURE__ */ r(
+            "li",
             {
-              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))
+              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
+          ))
         ]
       }
     );
   }
 );
 export {
-  fe as List
+  me as List
 };

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -1,15 +1,15 @@
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { useMemo as I } from "react";
+import { useMemo as G } from "react";
 import { cn as c } from "../../utils/index.js";
-import { TableProvider as K } from "./contexts/table.provider.js";
-import { Filter as M } from "./components/Filter/Filter.js";
-import { WrapperBody as W } from "./components/WrapperBody/WrapperBody.js";
-import { Header as g } from "./components/Header/Header.js";
-import { Body as q } from "./components/Body/Body.js";
-import { Pagination as C } from "./components/Pagination/Pagination.js";
-import { TruncateText as F } from "./components/TruncateText/TruncateText.js";
-import { Actions as G } from "./components/Actions/Actions.js";
-const J = ({
+import { TableProvider as J } from "./contexts/table.provider.js";
+import { Filter as O } from "./components/Filter/Filter.js";
+import { WrapperBody as Q } from "./components/WrapperBody/WrapperBody.js";
+import { Header as R } from "./components/Header/Header.js";
+import { Body as S } from "./components/Body/Body.js";
+import { Pagination as U } from "./components/Pagination/Pagination.js";
+import { TruncateText as X } from "./components/TruncateText/TruncateText.js";
+import { Actions as Y } from "./components/Actions/Actions.js";
+const Z = ({
   id: n,
   ariaLabel: p,
   columns: d,
@@ -38,9 +38,18 @@ const J = ({
   multiSelectFilter: w,
   filterActions: P,
   showResetButton: E = !0,
-  resetButtonClassName: H
+  resetButtonClassName: H,
+  // Expandable rows
+  enableExpandedRow: I,
+  expandedState: K,
+  defaultExpanded: M,
+  classNameExpandedRow: W,
+  classNameExpandedCell: g,
+  classNameExpandedContent: q,
+  classNameExpandedHeader: C,
+  onExpandedChange: F
 }) => {
-  const e = I(
+  const e = G(
     () => B || [
       t,
       i,
@@ -50,7 +59,7 @@ const J = ({
     []
   );
   return /* @__PURE__ */ r(
-    K,
+    J,
     {
       id: n,
       columns: d,
@@ -59,9 +68,17 @@ const J = ({
       totalItems: u,
       queryOptions: z,
       isPaginationEnabled: e,
+      enableExpandedRow: I,
+      expandedState: K,
+      onExpandedChange: F,
+      defaultExpanded: M,
+      classNameExpandedRow: W,
+      classNameExpandedCell: g,
+      classNameExpandedContent: q,
+      classNameExpandedHeader: C,
       children: /* @__PURE__ */ s("section", { className: c("w-full min-w-fit", b), children: [
         j && /* @__PURE__ */ r(
-          M,
+          O,
           {
             actions: P,
             multiSelectFilter: w,
@@ -72,7 +89,7 @@ const J = ({
           }
         ),
         /* @__PURE__ */ r(
-          W,
+          Q,
           {
             showPagination: e,
             classNameWrapperTable: y,
@@ -88,21 +105,21 @@ const J = ({
                 "aria-label": p,
                 children: [
                   /* @__PURE__ */ r(
-                    g,
+                    R,
                     {
                       className: x,
                       classNameArrows: N,
                       classNameActiveArrows: T
                     }
                   ),
-                  /* @__PURE__ */ r(q, { isLoading: a, showPagination: e })
+                  /* @__PURE__ */ r(S, { isLoading: a, showPagination: e })
                 ]
               }
             )
           }
         ),
         e && /* @__PURE__ */ r(
-          C,
+          U,
           {
             showTotalItems: t,
             showDropdownPagination: i,
@@ -115,11 +132,11 @@ const J = ({
       ] })
     }
   );
-}, o = J;
+}, o = Z;
 o.displayName = "KonstructVirtualizedTable";
-o.TruncateText = F;
-o.Actions = G;
+o.TruncateText = X;
+o.Actions = Y;
 export {
-  F as TruncateText,
+  X as TruncateText,
   o as VirtualizedTable
 };

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

@@ -1,5 +1,6 @@
-import { ColumnDef as ColumnDefPrimitive, RowData as RowDataPrimitive } from '@tanstack/react-table';
+import { ColumnDef as ColumnDefPrimitive, ExpandedState, OnChangeFn, RowData as RowDataPrimitive } from '@tanstack/react-table';
 import { VariantProps } from 'class-variance-authority';
+import { ReactNode } from 'react';
 import { virtualizeTableVariants } from './VirtualizedTable.variants';
 import { FilterAction, Option } from './components/Filter/Filter.types';
 import { UseQueryOptions } from '@tanstack/react-query';
@@ -16,6 +17,7 @@ declare module '@tanstack/react-table' {
 export interface RowMetadata {
     className?: string;
     attributes?: Record<string, string | number | boolean>;
+    expandedRow?: ReactNode;
     [key: string]: unknown;
 }
 export type RowDataWithMeta = Record<string, unknown> & {
@@ -105,4 +107,22 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     filterActions?: FilterAction[];
     showResetButton?: never;
     resetButtonClassName?: never;
+}) & ({
+    enableExpandedRow: true;
+    expandedState?: ExpandedState;
+    defaultExpanded?: ExpandedState;
+    classNameExpandedRow?: string;
+    classNameExpandedCell?: string;
+    classNameExpandedContent?: string;
+    classNameExpandedHeader?: string;
+    onExpandedChange?: OnChangeFn<ExpandedState>;
+} | {
+    enableExpandedRow?: false | undefined;
+    expandedState?: never;
+    defaultExpanded?: never;
+    classNameExpandedRow?: never;
+    classNameExpandedCell?: never;
+    classNameExpandedContent?: never;
+    classNameExpandedHeader?: never;
+    onExpandedChange?: never;
 });

package/dist/components/VirtualizedTable/components/Body/Body.js

@@ -1,77 +1,99 @@
-import { jsx as r } from "react/jsx-runtime";
-import { f as N } from "../../../../index-CSWGJT-v.js";
-import { Skeleton as h } from "../Skeleton/Skeleton.js";
-import { cn as s } from "../../../../utils/index.js";
-import { useTableContext as y } from "../../contexts/table.hook.js";
-const S = ({
-  isLoading: f,
-  showPagination: t
+import { jsx as t, jsxs as D } from "react/jsx-runtime";
+import { f as F } from "../../../../index-CSWGJT-v.js";
+import { Fragment as S } from "react";
+import { Skeleton as j } from "../Skeleton/Skeleton.js";
+import { cn as l } from "../../../../utils/index.js";
+import { ExpandableRow as M } from "../ExpandableRow/ExpandableRow.js";
+import { useTableContext as v } from "../../contexts/table.hook.js";
+const A = ({
+  isLoading: p,
+  showPagination: a
 }) => {
-  const { table: o, pageSize: i, tableFetching: p } = y();
-  if (f || p)
-    return /* @__PURE__ */ r(h, { numberOfRows: i, table: o });
-  const a = o.getRowModel().rows ?? [];
-  return /* @__PURE__ */ r(
+  const {
+    table: n,
+    pageSize: f,
+    tableFetching: x,
+    enableExpandedRow: g,
+    classNameExpandedRow: u,
+    classNameExpandedCell: h,
+    classNameExpandedContent: N
+  } = v();
+  if (p || x)
+    return /* @__PURE__ */ t(j, { numberOfRows: f, table: n });
+  const d = n.getRowModel().rows ?? [];
+  return /* @__PURE__ */ t(
     "tbody",
     {
-      className: s(
+      className: l(
         "text-slate-800",
         "text-sm",
         "font-normal",
         "relative",
         "dark:border-x"
       ),
-      children: a.map(({ id: l, original: m, getVisibleCells: u }, d) => {
-        const { meta: b = {} } = m, n = u();
-        return /* @__PURE__ */ r(
-          "tr",
-          {
-            className: s(
-              "border-b",
-              "border-b-gray-200",
-              "dark:text-metal-50",
-              "dark:border-b-metal-700",
-              "last:border-b-transparent",
-              "bg-transparent",
-              b.className
-            ),
-            "data-row-id": l,
-            ...b.attributes ?? {},
-            children: n.map(({ id: k, column: e, getContext: g }, c) => {
-              const x = typeof e.columnDef.meta?.className == "function" ? e.columnDef.meta?.className(m) : e.columnDef.meta?.className;
-              return /* @__PURE__ */ r(
-                "td",
-                {
-                  className: s(
-                    "px-4",
-                    "py-1",
-                    "text-sm",
-                    "bg-white",
-                    "dark:bg-metal-900",
-                    "dark:border-t",
-                    "dark:border-metal-700",
-                    "dark:first:border-l",
-                    "dark:last:border-r",
-                    x,
-                    {
-                      "first:rounded-bl-lg": d === a.length - 1 && c === 0 && !t,
-                      "last:rounded-br-lg": d === a.length - 1 && c === n.length - 1 && !t,
-                      "dark:[tr:last-child_&]:border-b": !t
-                    }
-                  ),
-                  ...e.columnDef.meta?.attributes ?? {},
-                  children: N(e.columnDef.cell, g())
-                },
-                k
-              );
-            })
-          },
-          l
-        );
+      children: d.map((m, c) => {
+        const { id: s, original: b, getVisibleCells: k } = m, { meta: r = {} } = b, o = k(), E = g && m.getIsExpanded(), R = !!r.expandedRow;
+        return /* @__PURE__ */ D(S, { children: [
+          /* @__PURE__ */ t(
+            "tr",
+            {
+              className: l(
+                "border-b",
+                "border-b-gray-200",
+                "dark:text-metal-50",
+                "dark:border-b-metal-700",
+                "bg-transparent",
+                r.className
+              ),
+              "data-row-id": s,
+              ...r.attributes ?? {},
+              children: o.map(({ id: w, column: e, getContext: y }, i) => {
+                const C = typeof e.columnDef.meta?.className == "function" ? e.columnDef.meta?.className(b) : e.columnDef.meta?.className;
+                return /* @__PURE__ */ t(
+                  "td",
+                  {
+                    className: l(
+                      "px-4",
+                      "py-1",
+                      "text-sm",
+                      "bg-white",
+                      "dark:bg-metal-900",
+                      "dark:border-t",
+                      "dark:border-metal-700",
+                      "dark:first:border-l",
+                      "dark:last:border-r",
+                      C,
+                      {
+                        "first:rounded-bl-lg": c === d.length - 1 && i === 0 && !a,
+                        "last:rounded-br-lg": c === d.length - 1 && i === o.length - 1 && !a,
+                        "dark:[tr:last-child_&]:border-b": !a
+                      }
+                    ),
+                    ...e.columnDef.meta?.attributes ?? {},
+                    children: F(e.columnDef.cell, y())
+                  },
+                  w
+                );
+              })
+            }
+          ),
+          R && /* @__PURE__ */ t(
+            M,
+            {
+              classNameExpandedCell: h,
+              classNameExpandedContent: N,
+              classNameExpandedRow: u,
+              colSpan: o.length,
+              id: s,
+              isExpanded: !!E,
+              children: r.expandedRow
+            }
+          )
+        ] }, s);
       })
     }
   );
 };
 export {
-  S as Body
+  A as Body
 };