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

package/dist/components/VirtualizedTable/contexts/table.provider.js

@@ -1,87 +1,150 @@
-import { jsx as c } from "react/jsx-runtime";
-import { V as ae } from "../../../index-BKjcReYh.js";
-import { useQuery as se } from "@tanstack/react-query";
-import { u as le, g as ie, a as ce } from "../../../index-CSWGJT-v.js";
-import { useState as n, useMemo as C, useCallback as a } from "react";
-import { cn as P } from "../../../utils/index.js";
-import { TableContext as ue } from "./table.context.js";
-import { C as de } from "../../../chevron-right-DvXGOiS_.js";
-import { DEFAULT_PAGE_SIZE as me } from "../constants/pagination.js";
-const Me = ({
-  children: F,
-  classNameExpandedCell: O,
-  classNameExpandedContent: T,
-  classNameExpandedRow: v,
-  classNameExpandedHeader: w,
-  classNameActiveExpandedRow: L,
-  classNameHoverRow: _,
-  columns: u = [],
-  data: x = [],
-  defaultExpanded: j,
-  enableExpandedRow: o,
-  enableHoverRow: k,
-  expandedState: S,
+import { jsx as O } from "react/jsx-runtime";
+import { V as Le } from "../../../index-BKjcReYh.js";
+import { useQuery as Te } from "@tanstack/react-query";
+import { u as Ae, g as Fe, a as Me } from "../../../index-CSWGJT-v.js";
+import { useState as r, useMemo as m, useCallback as b, useEffect as N } from "react";
+import { cn as L } from "../../../utils/index.js";
+import { VirtualizedTableEvent as W } from "../events/index.js";
+import { TableContext as Pe } from "./table.context.js";
+import { C as je } from "../../../chevron-right-DvXGOiS_.js";
+import { DEFAULT_PAGE_SIZE as _e } from "../constants/pagination.js";
+const Re = ({
+  children: Z,
+  classNameExpandedCell: J,
+  classNameExpandedContent: Y,
+  classNameExpandedRow: k,
+  classNameExpandedHeader: D,
+  classNameActiveExpandedRow: ee,
+  classNameHoverRow: te,
+  columns: T = [],
+  data: G = [],
+  defaultExpanded: ne,
+  enableExpandedRow: i,
+  enableHoverRow: oe,
+  expandedState: Q,
   id: s,
-  isPaginationEnabled: z,
-  queryOptions: K = {},
-  totalItems: N,
-  fetchData: y,
-  onExpandedChange: E
+  isPaginationEnabled: re,
+  queryOptions: se = {},
+  totalItems: B,
+  getRowId: f,
+  fetchData: l,
+  onExpandedChange: $,
+  renderExpandedRow: x,
+  keepExpandColumnVisible: a
 }) => {
-  const [M, b] = n([]), [q, R] = n(!0), [d, I] = n(0), [l, V] = n(), [r, A] = n(me), [m, D] = n(N), Q = C(
-    () => Math.ceil(m / r),
-    [m, r]
-  ), [i, $] = n({}), G = () => {
-    const e = typeof s == "string" || typeof s == "number" ? [s] : s;
-    return z && e.push(d, r), l && e.push(l), Object.entries(i).forEach(([t, h]) => {
-      e.push(`${t}:${h.join(",")}`);
-    }), e;
-  }, { data: H, isLoading: U, isFetching: W } = se({
-    queryKey: G(),
+  const [H, R] = r([]), [ae, ie] = r(!!l), [A, U] = r(0), [C, le] = r(), [g, ce] = r(_e), [de, ue] = r(B), F = l ? de : B, me = m(
+    () => Math.ceil(F / g),
+    [F, g]
+  ), [I, fe] = r({}), M = Te({
+    queryKey: (() => {
+      const e = typeof s == "string" || typeof s == "number" ? [s] : s;
+      return re && e.push(A, g), C && e.push(C), Object.entries(I).forEach(([t, u]) => {
+        e.push(`${t}:${u.join(",")}`);
+      }), e;
+    })(),
     refetchOnMount: !1,
     refetchOnWindowFocus: !1,
-    initialData: x,
-    queryFn: async () => y ? y({
-      page: Math.max(d + 1, 1),
-      pageSize: r,
-      termOfSearch: l,
-      ...Object.keys(i).length > 0 ? i : {}
-    }).then(({ data: e, totalItemsCount: t }) => (R(!1), t && D(t), e)) : x ?? [],
-    ...K
-  }), Z = a((e) => {
-    V(e), I(0);
-  }, []), B = a((e, t) => {
-    const h = e.toLowerCase().replace(/\s+/g, "_");
-    $((re) => ({
-      ...re,
-      [h]: t
+    initialData: G,
+    enabled: !!l,
+    queryFn: async () => l({
+      page: Math.max(A + 1, 1),
+      pageSize: g,
+      termOfSearch: C,
+      ...Object.keys(I).length > 0 ? I : {}
+    }).then(({ data: e, totalItemsCount: t }) => (ie(!1), t && ue(t), e)),
+    ...se
+  }), h = l ? M.data : G, ge = l ? M.isLoading : !1, P = l ? M.isFetching : !1, he = b((e) => {
+    le(e), U(0);
+  }, []), pe = b((e, t) => {
+    const u = e.toLowerCase().replace(/\s+/g, "_");
+    fe((q) => ({
+      ...q,
+      [u]: t
     }));
-  }, []), J = a((e) => I(e), []), X = a(
-    (e) => A(e),
+  }, []), ye = b((e) => U(e), []), be = b(
+    (e) => ce(e),
     []
-  ), [Y, ee] = n(
-    j ?? {}
-  ), g = S !== void 0, f = g ? S : Y, te = a(
+  ), [xe, Ce] = r(
+    ne ?? {}
+  ), j = Q !== void 0, c = j ? Q : xe, p = b(
     (e) => {
-      const t = typeof e == "function" ? e(f) : e;
-      g || ee(t), E?.(e);
+      const t = typeof e == "function" ? e(c) : e;
+      j || Ce(t), $?.(e);
     },
-    [f, g, E]
-  ), p = C(() => o ? {
+    [c, j, $]
+  );
+  N(() => {
+    if (!i) return;
+    const e = Array.isArray(s) ? s.join(",") : String(s), t = new AbortController(), u = (y) => {
+      const { detail: n } = y;
+      n.tableId === e && p((o) => typeof o == "boolean" ? { [n.rowId]: !0 } : { ...o, [n.rowId]: !0 });
+    }, q = (y) => {
+      const { detail: n } = y;
+      n.tableId === e && p((o) => {
+        if (typeof o == "boolean") return {};
+        const E = { ...o };
+        return delete E[n.rowId], E;
+      });
+    }, Oe = (y) => {
+      const { detail: n } = y;
+      n.tableId === e && p((o) => {
+        if (typeof o == "boolean") return { [n.rowId]: !o };
+        const E = !!o[n.rowId], z = { ...o };
+        return E ? delete z[n.rowId] : z[n.rowId] = !0, z;
+      });
+    };
+    return document.addEventListener(W.EXPAND_ROW, u, {
+      signal: t.signal
+    }), document.addEventListener(
+      W.COLLAPSE_ROW,
+      q,
+      { signal: t.signal }
+    ), document.addEventListener(W.TOGGLE_ROW, Oe, {
+      signal: t.signal
+    }), () => t.abort();
+  }, [i, s, p]);
+  const _ = m(
+    () => h.some((e) => !!e.meta?.expandedRow),
+    [h]
+  ), S = m(
+    () => P ? [] : h.map(
+      (e, t) => f ? f(e, t) : String(t)
+    ),
+    [h, f, P]
+  ), Ie = m(() => typeof c == "boolean" ? c : S.some((e) => !!c[e]), [c, S]), Se = m(() => typeof a == "boolean" ? a : typeof a == "object" ? S.some((e) => !!a[e]) : !1, [a, S]), v = _ || x && (Ie || Se), [d, V] = r(!!v);
+  N(() => {
+    if (v) {
+      const e = requestAnimationFrame(() => V(!0));
+      return () => cancelAnimationFrame(e);
+    } else
+      V(!1);
+  }, [v]);
+  const [w, X] = r(
+    !d
+  );
+  N(() => {
+    if (d)
+      X(!1);
+    else {
+      const e = setTimeout(() => X(!0), 300);
+      return () => clearTimeout(e);
+    }
+  }, [d]);
+  const K = m(() => !i || !_ && !x ? null : {
     id: "__expand",
-    header: () => /* @__PURE__ */ c(ae, { children: "Expand Column" }),
+    header: () => /* @__PURE__ */ O(Le, { children: "Expand Column" }),
     cell: ({ row: e }) => {
-      const { meta: t } = e.original;
-      return t?.expandedRow ? /* @__PURE__ */ c(
+      const { meta: t } = e.original, u = typeof a == "object" && !!a[e.id];
+      return !t?.expandedRow && !e.getIsExpanded() && !u ? null : /* @__PURE__ */ O(
         "button",
         {
           className: "hover:cursor-pointer",
           onClick: () => e.toggleExpanded(),
           "aria-label": e.getIsExpanded() ? "Collapse row" : "Expand row",
-          children: /* @__PURE__ */ c(
-            de,
+          children: /* @__PURE__ */ O(
+            je,
             {
-              className: P(
+              className: L(
                 "size-4 transition-transform text-slate-400 dark:text-metal-400",
                 {
                   "-rotate-90": e.getIsExpanded()
@@ -90,60 +153,81 @@ const Me = ({
             }
           )
         }
-      ) : null;
+      );
     },
     enableSorting: !1,
     meta: {
-      headerClassName: "w-10",
-      className: P("w-10 px-1 text-center", w)
+      headerClassName: L(
+        "transition-[width,max-width,padding] duration-300 ease-in-out overflow-hidden",
+        // Width: immediate change, CSS transition handles animation
+        d ? "w-10 max-w-10 px-2" : "w-0 max-w-0 !p-0",
+        // Border/radius: deferred on collapse so border stays during exit
+        w && "!border-0 !rounded-none [&+th]:rounded-tl-lg dark:[&+th]:border-l"
+      ),
+      className: L(
+        "transition-[width,max-width,padding] duration-300 ease-in-out overflow-hidden",
+        d ? L("w-10 max-w-10 px-1 text-center", D) : "w-0 max-w-0 !p-0",
+        w && "!border-0 dark:[&+td]:border-l"
+      )
     }
-  } : null, [o]), ne = C(() => p ? [p, ...u] : u, [u, p]), oe = le({
-    data: H,
-    columns: ne,
+  }, [
+    i,
+    _,
+    x,
+    d,
+    w,
+    a
+  ]), we = m(() => K ? [K, ...T] : T, [T, K]), Ee = Ae({
+    data: h,
+    columns: we,
+    ...f ? { getRowId: f } : {},
     state: {
-      sorting: M,
-      ...o ? { expanded: f } : {}
+      sorting: H,
+      ...i ? { expanded: c } : {}
     },
-    onSortingChange: b,
-    ...o ? {
-      onExpandedChange: te,
+    onSortingChange: R,
+    ...i ? {
+      onExpandedChange: p,
       manualExpanding: !0
     } : {},
-    getCoreRowModel: ce(),
-    getSortedRowModel: ie()
+    getCoreRowModel: Me(),
+    getSortedRowModel: Fe()
   });
-  return /* @__PURE__ */ c(
-    ue.Provider,
+  return /* @__PURE__ */ O(
+    Pe.Provider,
     {
       value: {
-        sortedData: M,
-        table: oe,
-        tableFetching: W,
-        tableLoading: U,
-        totalItems: m,
-        termOfSearch: l,
-        page: d,
-        multiselectSelected: i,
-        pageSize: r,
-        totalPages: Q,
-        isFirstLoad: q,
-        enableExpandedRow: o,
-        classNameExpandedRow: v,
-        classNameExpandedCell: O,
-        classNameExpandedContent: T,
-        classNameActiveExpandedRow: L,
-        enableHoverRow: k,
-        classNameHoverRow: _,
-        handlePage: J,
-        onPageSize: X,
-        onChangeTermOfSearch: Z,
-        onSorting: b,
-        onSelectMultiselect: B
+        classNameActiveExpandedRow: ee,
+        classNameExpandedCell: J,
+        classNameExpandedContent: Y,
+        classNameExpandedRow: k,
+        classNameHoverRow: te,
+        enableExpandedRow: i,
+        enableHoverRow: oe,
+        isBorderOnAdjacentCell: w,
+        isExpandColumnVisible: d,
+        isFirstLoad: ae,
+        multiselectSelected: I,
+        page: A,
+        pageSize: g,
+        sortedData: H,
+        table: Ee,
+        tableFetching: P,
+        tableLoading: ge,
+        termOfSearch: C,
+        totalItems: F,
+        totalPages: me,
+        handlePage: ye,
+        onChangeTermOfSearch: he,
+        onPageSize: be,
+        onSelectMultiselect: pe,
+        onSorting: R,
+        renderExpandedRow: x
       },
-      children: F
+      children: Z
     }
   );
 };
 export {
-  Me as TableProvider
+  Re as TableProvider
 };

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

@@ -1,5 +1,5 @@
 import { ColumnDef, ExpandedState, OnChangeFn } from '@tanstack/react-table';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import { RowData, Props as TableProps } from '../VirtualizedTable.types';
 export type Props<TData extends RowData = RowData> = PropsWithChildren & {
     id: string | string[] | number | number[];
@@ -19,6 +19,9 @@ export type Props<TData extends RowData = RowData> = PropsWithChildren & {
     enableHoverRow?: boolean;
     classNameHoverRow?: string;
     onExpandedChange?: OnChangeFn<ExpandedState>;
+    renderExpandedRow?: (data: TData) => ReactNode;
+    keepExpandColumnVisible?: boolean | Record<string, boolean>;
+    getRowId?: (originalRow: TData, index: number) => string;
     fetchData?: (params: Record<string, string | number | string[] | number[] | undefined>) => Promise<{
         data: TData[];
         totalItemsCount?: number;

package/dist/components/VirtualizedTable/events/index.d.ts

@@ -0,0 +1,12 @@
+export declare enum VirtualizedTableEvent {
+    EXPAND_ROW = "@konstructio/VirtualizedTable/event-EXPAND_ROW",
+    COLLAPSE_ROW = "@konstructio/VirtualizedTable/event-COLLAPSE_ROW",
+    TOGGLE_ROW = "@konstructio/VirtualizedTable/event-TOGGLE_ROW"
+}
+export type VirtualizedTableEventDetail = {
+    tableId: string;
+    rowId: string;
+};
+export declare const sendExpandRowEvent: (tableId: string, rowId: string) => void;
+export declare const sendCollapseRowEvent: (tableId: string, rowId: string) => void;
+export declare const sendToggleRowEvent: (tableId: string, rowId: string) => void;

package/dist/components/VirtualizedTable/events/index.js

@@ -0,0 +1,29 @@
+var n = /* @__PURE__ */ ((t) => (t.EXPAND_ROW = "@konstructio/VirtualizedTable/event-EXPAND_ROW", t.COLLAPSE_ROW = "@konstructio/VirtualizedTable/event-COLLAPSE_ROW", t.TOGGLE_ROW = "@konstructio/VirtualizedTable/event-TOGGLE_ROW", t))(n || {});
+const o = (t, e) => {
+  document.dispatchEvent(
+    new CustomEvent(
+      "@konstructio/VirtualizedTable/event-EXPAND_ROW",
+      { detail: { tableId: t, rowId: e } }
+    )
+  );
+}, i = (t, e) => {
+  document.dispatchEvent(
+    new CustomEvent(
+      "@konstructio/VirtualizedTable/event-COLLAPSE_ROW",
+      { detail: { tableId: t, rowId: e } }
+    )
+  );
+}, s = (t, e) => {
+  document.dispatchEvent(
+    new CustomEvent(
+      "@konstructio/VirtualizedTable/event-TOGGLE_ROW",
+      { detail: { tableId: t, rowId: e } }
+    )
+  );
+};
+export {
+  n as VirtualizedTableEvent,
+  i as sendCollapseRowEvent,
+  o as sendExpandRowEvent,
+  s as sendToggleRowEvent
+};

package/dist/components/index.d.ts

@@ -31,6 +31,7 @@ export * from './Range/Range';
 export * from './Select/Select';
 export * from './Sidebar/Sidebar';
 export * from './Slider/Slider';
+export * from './Spinner/Spinner';
 export * from './Stepper/Stepper';
 export * from './Switch/Switch';
 export * from './Table/Table';
@@ -43,6 +44,8 @@ export * from './Toast/Toast';
 export * from './Tooltip/Tooltip';
 export * from './Typography/Typography';
 export * from './VirtualizedTable/VirtualizedTable';
+export { sendExpandRowEvent, sendCollapseRowEvent, sendToggleRowEvent, VirtualizedTableEvent, } from './VirtualizedTable/events';
+export type { VirtualizedTableEventDetail } from './VirtualizedTable/events';
 export type { ColumnDef, RowData, } from './VirtualizedTable/VirtualizedTable.types';
 export type { Step, StepperClassNames, StepperIcons, StepperProps, StepSize, StepStatus, StepVariant, } from './Stepper/Stepper.types';
 export { horizontalConnectorWrapperVariants, stepConnectorVariants, stepContentVariants, stepDescriptionVariants, stepIndicatorVariants, stepItemVariants, stepLabelVariants, stepListVariants, stepperVariants, stepVariants, } from './Stepper/Stepper.variants';