laif-ds 0.2.57 → 0.2.59

package/dist/components/ui/tables/data-table/components/data-table-body.js

@@ -46,7 +46,7 @@ function xe({
   ), j = () => {
     const o = d.current;
     if (!o) return 8;
-    const e = o.querySelector("thead tr"), t = o.querySelector("tbody tr"), r = e?.getBoundingClientRect().height ?? 40, l = t?.getBoundingClientRect().height ?? 32.5, N = o.offsetHeight - r, a = Math.floor(N / l);
+    const e = o.querySelector("thead tr"), t = o.querySelector("tbody tr"), r = e?.getBoundingClientRect().height ?? 40, l = t?.getBoundingClientRect().height ?? 32.5, k = o.offsetHeight - r, a = Math.floor(k / l);
     return a > 1 ? a : 8;
   }, b = (o = 0) => {
     const e = {};
@@ -79,8 +79,8 @@ function xe({
       g && g.offsetWidth > 0 ? m = g.getBoundingClientRect().width : p && p.offsetWidth > 0 ? m = p.getBoundingClientRect().width : (t = !0, m = 150), c += m;
     }
     Y(e);
-    const N = j();
-    $(N), t && o < 5 && setTimeout(
+    const k = j();
+    $(k), t && o < 5 && setTimeout(
       () => b(o + 1),
       100 * (o + 1)
     );
@@ -130,7 +130,7 @@ function xe({
       };
     }
   }, [v, d]);
-  const k = (o, e, t) => {
+  const N = (o, e, t) => {
     const r = Q[o];
     if (!r || !e || r.side !== e) return;
     const l = r.side === "left" ? `${r.offset}px` : void 0, c = r.side === "right" ? `${r.offset}px` : void 0;
@@ -150,9 +150,9 @@ function xe({
       className: "flex max-h-full min-h-0 max-w-full min-w-0 flex-1",
       ref: d,
       children: /* @__PURE__ */ i(re, { className: "border-d-border h-full min-h-0 w-full rounded-md border", children: [
-        /* @__PURE__ */ n(q, { orientation: "horizontal" }),
+        /* @__PURE__ */ n(q, { orientation: "horizontal", className: "z-[100]" }),
         /* @__PURE__ */ n(q, { orientation: "vertical" }),
-        /* @__PURE__ */ i(se, { className: "w-full", style: { minWidth: "max-content" }, children: [
+        /* @__PURE__ */ i(se, { className: "w-full min-w-max", children: [
           /* @__PURE__ */ n(le, { children: s.getHeaderGroups().map((o) => /* @__PURE__ */ n(y, { children: o.headers.map((e) => /* @__PURE__ */ n(
             ce,
             {
@@ -163,7 +163,7 @@ function xe({
                 "bg-d-background sticky top-0 h-8 px-0",
                 e.column.columnDef.meta?.pinned ? "z-[49]" : "z-10"
               ),
-              style: k(
+              style: N(
                 e.column.id,
                 e.column.columnDef.meta?.pinned,
                 !0
@@ -337,7 +337,7 @@ function xe({
                 "border-0",
                 t.column.columnDef.meta?.pinned && "bg-d-background z-[50]"
               ),
-              style: k(
+              style: N(
                 t.column.id,
                 t.column.columnDef.meta?.pinned,
                 !1
@@ -353,7 +353,7 @@ function xe({
                 "border-0",
                 t.column.columnDef.meta?.pinned && "bg-d-background z-[50]"
               ),
-              style: k(
+              style: N(
                 t.column.id,
                 t.column.columnDef.meta?.pinned,
                 !1
@@ -374,7 +374,7 @@ function xe({
                     "border-0",
                     e.column.columnDef.meta?.pinned ? "bg-d-background z-[50]" : "shadow-[inset_-1px_0_0_var(--d-border)]"
                   ),
-                  style: k(
+                  style: N(
                     e.column.id,
                     e.column.columnDef.meta?.pinned,
                     !1

package/dist/components/ui/tables/data-table/data-table.js

@@ -17,13 +17,13 @@ import { defaultDataTableI18n as pt } from "./data-table-i18n.js";
 import { getPaginationRowModel as ft, getFilteredRowModel as ht, getSortedRowModel as bt, getCoreRowModel as Ft } from "../../../../node_modules/@tanstack/table-core/build/lib/index.js";
 function Gt({
   columns: Q,
-  data: P,
+  data: j,
   loading: B = !1,
   emptyComponent: Ie,
   className: Se,
   rowSelection: Te = {},
   onRowSelectionChange: ie,
-  checkable: V = !1,
+  checkable: P = !1,
   onCheckedRowsChange: Y,
   actions: ze = [],
   customComponentsLeft: ve,
@@ -32,10 +32,10 @@ function Gt({
   hideActionsRow: _e = !1,
   i18n: h = pt,
   maxSortedColumns: se = 2,
-  initialState: m,
+  initialState: d,
   // New mode-based API
   serverMode: a = !1,
-  serverConfig: d,
+  serverConfig: m,
   disableAutoPageSize: F = !1
 }) {
   const q = f(null), le = (e) => !e || !e.sort_by || !e.sort_order ? [] : e.sort_by.map((t, o) => ({
@@ -51,10 +51,12 @@ function Gt({
       computedFilter: e?.computedFilter
       // Use provided value or undefined
     };
-  }, [O, He] = u(() => le(m?.sorting)), [Ne] = u([]), [Oe, Ge] = u({}), [g, Le] = u(() => m?.filters?.searchbarFilter), [E, G] = u(() => m?.pagination ?? { pageIndex: 0, pageSize: 10 }), ce = f(d);
-  ce.current = d;
-  const W = f(d?.onStateChange);
-  W.current = d?.onStateChange;
+  }, [O, He] = u(() => le(d?.sorting)), [Ne] = u([]), [Oe, Ge] = u(
+    () => d?.columnVisibility ?? {}
+  ), [g, Le] = u(() => d?.filters?.searchbarFilter), [E, G] = u(() => d?.pagination ?? { pageIndex: 0, pageSize: 10 }), ce = f(m);
+  ce.current = m;
+  const W = f(m?.onStateChange);
+  W.current = m?.onStateChange;
   const J = f(null), M = f(null), ke = f(0), ue = f(!1), de = f(null), K = f({}), me = f(null), Z = f(B);
   Z.current = B;
   const L = (e) => {
@@ -78,19 +80,19 @@ function Gt({
     };
   }, []);
   const [n, k] = u(() => {
-    const { computedSorting: e, computedFilter: t } = De(m);
+    const { computedSorting: e, computedFilter: t } = De(d);
     return {
-      pagination: m?.pagination ?? { pageIndex: 0, pageSize: 10 },
-      sorting: m?.sorting,
-      filters: m?.filters,
-      computedFilter: m?.computedFilter ?? t,
-      computedSorting: m?.computedSorting ?? e
+      pagination: d?.pagination ?? { pageIndex: 0, pageSize: 10 },
+      sorting: d?.sorting,
+      filters: d?.filters,
+      computedFilter: d?.computedFilter ?? t,
+      computedSorting: d?.computedSorting ?? e
     };
   });
-  a && !d && console.warn("DataTable: Server mode requires serverConfig");
-  const [Ae, ge] = u(0), [je, pe] = u(0), [Pe, Ve] = u({}), fe = ie ? Te : Pe, qe = ie || Ve, [w, $] = u(
-    () => m?.filters?.filterBadges ?? []
-  ), [y, ee] = u(() => m?.filters?.advancedFilterBadge), [U, Ee] = u(""), [he, be] = u([]), Fe = C(() => V ? [
+  a && !m && console.warn("DataTable: Server mode requires serverConfig");
+  const [Ae, ge] = u(0), [Ve, pe] = u(0), [je, Pe] = u({}), fe = ie ? Te : je, qe = ie || Pe, [w, $] = u(
+    () => d?.filters?.filterBadges ?? []
+  ), [y, ee] = u(() => d?.filters?.advancedFilterBadge), [U, Ee] = u(""), [he, be] = u([]), Fe = C(() => P ? [
     {
       id: "data-table-integrated-checkbox-column",
       size: 24,
@@ -141,7 +143,7 @@ function Gt({
       }
     },
     ...Q
-  ] : Q, [Q, V]), T = C(() => Fe.map(
+  ] : Q, [Q, P]), T = C(() => Fe.map(
     (e) => e
   ), [Fe]);
   N(() => {
@@ -150,11 +152,11 @@ function Gt({
   }, [T]);
   const _ = C(() => T.filter(
     (e) => !!e?.meta?.searchable
-  ), [T]), z = C(() => _.map((e) => e.accessorKey ?? e.id).filter(Boolean), [_]), [X, We] = u(() => m?.computedFilter ?? {}), Je = {
-    data: C(() => a || Object.keys(X).length === 0 ? P : P.filter((e) => Re({
+  ), [T]), z = C(() => _.map((e) => e.accessorKey ?? e.id).filter(Boolean), [_]), [X, We] = u(() => d?.computedFilter ?? {}), Je = {
+    data: C(() => a || Object.keys(X).length === 0 ? j : j.filter((e) => Re({
       original: e,
       getValue: (o) => e[o]
-    }, X)), [P, X, a]),
+    }, X)), [j, X, a]),
     columns: T,
     getCoreRowModel: Ft(),
     onSortingChange: (e) => {
@@ -178,7 +180,7 @@ function Gt({
       advancedFilter: (e) => a ? !0 : Re(e, X)
     },
     onPaginationChange: (e) => {
-      if (a && d) {
+      if (a && m) {
         if (typeof e == "object") {
           const t = F ? {
             ...n.pagination,
@@ -206,7 +208,7 @@ function Gt({
     },
     getPaginationRowModel: ft(),
     manualPagination: a,
-    pageCount: a && B ? je : Ae,
+    pageCount: a && B ? Ve : Ae,
     state: {
       sorting: O,
       columnFilters: Ne,
@@ -220,9 +222,9 @@ function Gt({
     autoResetPageIndex: !1
   }, i = $e(Je), te = i.getFilteredRowModel();
   N(() => {
-    if (a && d) {
+    if (a && m) {
       const e = Math.ceil(
-        d.totalItems / (n.pagination.pageSize || 10)
+        m.totalItems / (n.pagination.pageSize || 10)
       );
       ge(e), !B && e > 0 && pe(e);
     } else {
@@ -231,7 +233,7 @@ function Gt({
     }
   }, [
     a,
-    d?.totalItems,
+    m?.totalItems,
     n.pagination.pageSize,
     n.pagination.pageIndex,
     i,
@@ -254,7 +256,7 @@ function Gt({
         rowHeight: v,
         headerHeight: I,
         onPageChange: a ? (S, x) => {
-          if (d && ue.current) {
+          if (m && ue.current) {
             const b = F ? {
               ...n.pagination,
               pageIndex: S
@@ -265,14 +267,14 @@ function Gt({
             }, re = b.pageIndex === n.pagination.pageIndex, oe = F || b.pageSize === n.pagination.pageSize;
             if (re && oe)
               return;
-            const j = {
+            const V = {
               ...n,
               pagination: b,
               // Preserve computed values if they exist
               computedFilter: n.computedFilter,
               computedSorting: n.computedSorting
             };
-            k(j), Z.current || L(j);
+            k(V), Z.current || L(V);
           }
         } : (S, x) => {
           G(
@@ -281,7 +283,7 @@ function Gt({
         },
         setPagination: (S) => {
           const x = typeof S == "function" ? S(n.pagination) : S;
-          if (a && d) {
+          if (a && m) {
             const b = F ? {
               ...n.pagination,
               pageIndex: x.pageIndex
@@ -292,14 +294,14 @@ function Gt({
             }, re = b.pageIndex === n.pagination.pageIndex, oe = F || b.pageSize === n.pagination.pageSize;
             if (re && oe)
               return;
-            const j = {
+            const V = {
               ...n,
               pagination: b,
               // Preserve computed values if they exist
               computedFilter: n.computedFilter,
               computedSorting: n.computedSorting
             };
-            k(j), Z.current || L(j);
+            k(V), Z.current || L(V);
           } else
             G(
               (b) => F ? { ...b, pageIndex: x.pageIndex } : {
@@ -337,11 +339,11 @@ function Gt({
     // Recalculate when the rendered rows count changes; helps when data arrives async
     te.rows.length
   ]), N(() => {
-    if (Y && V) {
+    if (Y && P) {
       const e = i.getFilteredSelectedRowModel().rows.map((t) => t.original);
       Y(e);
     }
-  }, [i, Y, V, fe]);
+  }, [i, Y, P, fe]);
   const Ke = C(() => {
     const e = i.getHeaderGroups()[0], t = e ? e.headers : [];
     return (i.getState().sorting || []).map((s) => t.find((p) => p.column.id === s.id)).filter(Boolean);
@@ -530,7 +532,7 @@ function Gt({
             table: i,
             tableContainerRef: q,
             loading: B,
-            data: P,
+            data: j,
             emptyComponent: Ie,
             notFoundMessage: h?.notFoundMessage ?? "N/A",
             onAddFilter: xe,
@@ -549,10 +551,10 @@ function Gt({
             isServerSide: a,
             clientPagination: E,
             serverState: a ? n : void 0,
-            onServerStateChange: a && d ? (e) => {
+            onServerStateChange: a && m ? (e) => {
               k(e), L(e);
             } : void 0,
-            totalItems: d?.totalItems,
+            totalItems: m?.totalItems,
             i18n: h
           }
         )

package/dist/components/ui/tables/data-table/data-table.utils.js

@@ -31,10 +31,10 @@ function y(e) {
 function h(e) {
   return a(e, "boolean");
 }
-function f(e) {
+function C(e) {
   return a(e, "date");
 }
-function C(e) {
+function f(e) {
   return a(e, "datetime");
 }
 function q(e) {
@@ -168,7 +168,7 @@ function D(e, t, r, l, n) {
     value: n
   });
 }
-function k(e, t, r, l, n, u, o) {
+function V(e, t, r, l, n, u, o) {
   return s({
     columnId: e,
     columnAccessorKey: t,
@@ -185,7 +185,7 @@ function d(e) {
     sort_order: e.map((t) => t.order)
   };
 }
-function L(e) {
+function k(e) {
   return {
     ...e.filters && {
       filters: {
@@ -199,19 +199,22 @@ function L(e) {
       }
     },
     ...e.sorting && { sorting: d(e.sorting) },
-    ...e.pagination && { pagination: e.pagination }
+    ...e.pagination && { pagination: e.pagination },
+    ...e.columnVisibility && {
+      columnVisibility: e.columnVisibility
+    }
   };
 }
 function _(e) {
   return e.map((t) => ({ value: t, label: t }));
 }
-function $(e, t, r) {
+function L(e, t, r) {
   return e.map((l) => ({
     value: String(l[t]),
     label: String(l[r])
   }));
 }
-function M(e, t, r) {
+function $(e, t, r) {
   return e.map((l) => {
     if (l.accessorKey === t) {
       const u = typeof r[0] == "string" ? _(r) : r;
@@ -226,7 +229,7 @@ function M(e, t, r) {
     return l;
   });
 }
-function w(e, t) {
+function M(e, t) {
   return e.map((r) => {
     const l = r.accessorKey || r.id, n = t.left?.includes(l) ? "left" : t.right?.includes(l) ? "right" : void 0;
     return n ? {
@@ -238,10 +241,10 @@ function w(e, t) {
     } : r;
   });
 }
-function N(e) {
+function w(e) {
   return e.map((t) => t.accessorKey || t.id).filter(Boolean);
 }
-function V(e, t) {
+function N(e, t) {
   return {
     string: [
       "like",
@@ -277,15 +280,15 @@ export {
   h as createBooleanColumn,
   B as createBooleanFilter,
   S as createComputedColumn,
-  f as createDateColumn,
+  C as createDateColumn,
   A as createDateFilter,
-  C as createDateTimeColumn,
+  f as createDateTimeColumn,
   D as createDateTimeFilter,
   v as createDisplayColumn,
   s as createFilterBadge,
   O as createFilterBadges,
-  L as createInitialState,
-  k as createListFilter,
+  k as createInitialState,
+  V as createListFilter,
   F as createMultiSelectColumn,
   y as createNumberColumn,
   I as createNumberFilter,
@@ -293,10 +296,10 @@ export {
   d as createSorting,
   b as createStringColumn,
   T as createStringFilter,
-  N as getColumnIds,
-  V as isValidOperatorForType,
-  w as pinColumns,
+  w as getColumnIds,
+  N as isValidOperatorForType,
+  M as pinColumns,
   _ as toSelectOptions,
-  $ as toSelectOptionsFromObjects,
-  M as updateColumnListOptions
+  L as toSelectOptionsFromObjects,
+  $ as updateColumnListOptions
 };

package/dist/index.d.ts

@@ -283,7 +283,7 @@ declare interface AppSidebarProps extends React_2.ComponentProps<typeof Sidebar>
     linkProps?: Record<string, any>;
 }
 
-declare interface AppStep {
+export declare interface AppStep {
     id: number;
     label: React_2.ReactNode;
     component: React_2.ReactNode;
@@ -294,7 +294,7 @@ declare interface AppStep {
 
 export declare function AppStepper({ steps, align, size, showSeparators, defaultStep, allowStepNavigation, allowClickOnlyCompleted, onStepClick, indicators, ...stepperProps }: AppStepperProps): JSX.Element;
 
-declare interface AppStepperProps extends Omit<StepperProps, "children"> {
+export declare interface AppStepperProps extends Omit<StepperProps, "children"> {
     steps: AppStep[];
     align?: "horizontal" | "vertical";
     size?: "sm" | "md";
@@ -303,7 +303,7 @@ declare interface AppStepperProps extends Omit<StepperProps, "children"> {
     allowStepNavigation?: boolean;
     allowClickOnlyCompleted?: boolean;
     onStepClick?: (step: AppStep, index: number) => void;
-    indicators?: StepIndicators_2;
+    indicators?: StepIndicators;
 }
 
 export declare function AppTooltip({ content, children, label, labelClassName, header, variant, triggerVariant, size, className, wrpClassName, contentClassName, side, align, sideOffset, matchTriggerWidth, delayDuration, disabled, asChild, }: AppTooltipProps): JSX.Element;
@@ -1032,7 +1032,7 @@ export declare function createFilterBadges(configs: FilterBadgeConfig[]): DataTa
  *   pagination: { pageIndex: 0, pageSize: 20 }
  * })
  */
-export declare function createInitialState(config: InitialStateConfig): DataTableState;
+export declare function createInitialState<TData = Record<string, unknown>>(config: InitialStateConfig<TData>): DataTableState<TData>;
 
 /**
  * Creates a list filter badge
@@ -1444,7 +1444,7 @@ export declare interface DataTableProps<TData, TValue> {
     hideActionsRow?: boolean;
     i18n?: DataTableI18n;
     maxSortedColumns?: number;
-    initialState?: DataTableState;
+    initialState?: DataTableState<TData>;
     serverMode?: boolean;
     serverConfig?: DataTableServerConfig;
     disableAutoPageSize?: boolean;
@@ -1460,13 +1460,14 @@ export declare interface DataTableSorting {
     sort_order: ("asc" | "desc")[];
 }
 
-export declare interface DataTableState {
+export declare interface DataTableState<TData = Record<string, unknown>> {
     filters?: IFilterState;
     sorting?: DataTableSorting;
     pagination?: DataTablePagination;
     searchbarFilter?: string;
     computedFilter?: DataTableFilterForSearch;
     computedSorting?: DataTableSorting;
+    columnVisibility?: Partial<Record<keyof TData, boolean>>;
 }
 
 export declare function DatePicker({ value, onChange, placeholder, dateFormat, className, disabled, size, firstDate, lastDate, availableDates, locale, initialCalendarMonth, customCalendarProps, label, wrpClassName, }: DatePickerProps): JSX.Element;
@@ -1768,7 +1769,7 @@ declare interface IFilterState {
     searchbarFilter?: string;
 }
 
-declare interface InitialStateConfig {
+declare interface InitialStateConfig<TData = Record<string, unknown>> {
     filters?: DataTableBadgeFilter[];
     searchbarFilter?: string;
     sorting?: Array<{
@@ -1779,6 +1780,7 @@ declare interface InitialStateConfig {
         pageIndex: number;
         pageSize: number;
     };
+    columnVisibility?: Partial<Record<keyof TData, boolean>>;
 }
 
 export declare const Input: React_2.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React_2.RefAttributes<HTMLInputElement>>;
@@ -2504,7 +2506,7 @@ export declare type SpinnerSize = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xx
 
 export declare type SpinnerVariant = "default" | "destructive" | "primary" | "secondary";
 
-declare type StepIndicators = {
+export declare type StepIndicators = {
     active?: React_2.ReactNode;
     completed?: React_2.ReactNode;
     inactive?: React_2.ReactNode;
@@ -2525,7 +2527,7 @@ declare interface StepperProps extends React_2.HTMLAttributes<HTMLDivElement>, V
     value?: number;
     onValueChange?: (value: number) => void;
     orientation?: StepperOrientation;
-    indicators?: StepIndicators;
+    indicators?: StepIndicators_2;
 }
 
 declare const stepperVariants: (props?: ({