@lumeweb/portal-framework-ui 0.0.1 → 0.1.0

package/dist/esm/components/data-table/BaseTable.d.ts

@@ -0,0 +1,87 @@
+import { TableLayoutType, ToolbarConfig } from "./DataTable.types.js";
+import { ComponentSize } from "@lumeweb/portal-framework-ui-core";
+import { BaseRecord } from "@refinedev/core";
+import React from "react";
+import { Cell, ColumnDef, Row, Table as Table$1 } from "@tanstack/react-table";
+import { UseTableReturnType } from "@refinedev/react-table";
+
+//#region src/components/data-table/BaseTable.d.ts
+interface ActionColumnCellProps<TData> {
+  row: Row<TData>;
+}
+type ActionColumnDef<TData> = ColumnDef<TData, unknown> & {
+  /** Function to render cell content */
+  cell: (props: ActionColumnCellProps<TData>) => React.ReactNode;
+};
+interface BaseTableRefineProps<TData extends BaseRecord> {
+  /** Refine table instance */
+  refineTable?: UseTableReturnType<TData, any>["refineCore"];
+}
+interface BaseTableCommonProps<TData extends BaseRecord> {
+  /** Whether table is in loading state */
+  isLoading?: boolean;
+  /** Toolbar configuration */
+  toolbarConfig?: ToolbarConfig<TData>;
+}
+type BaseTableCommonPropsType<TData extends BaseRecord> = TableInteractionProps<TData> & TablePaginationConfigProps & TableStateProps<TData> & TableStylingProps & BaseTableRefineProps<TData> & BaseTableCommonProps<TData>;
+type BaseTablePaginationConfig = boolean | TablePaginationProps;
+type BaseTableProps<TData extends BaseRecord> = BaseTableWithDataProps<TData> | BaseTableWithTableProps<TData>;
+type BaseTableWithDataProps<TData extends BaseRecord> = BaseTableCommonPropsType<TData> & TableDataProps<TData> & {
+  table?: never;
+};
+type BaseTableWithTableProps<TData extends BaseRecord> = BaseTableCommonPropsType<TData> & TableInstanceProps<TData> & {
+  actionColumn?: never;
+  columns?: never;
+  data?: never;
+};
+interface TableDataProps<TData> {
+  /** Optional action column configuration */
+  actionColumn?: ActionColumnDef<TData>;
+  columns: ColumnDef<TData>[];
+  data: TData[];
+}
+interface TableInstanceProps<TData extends BaseRecord> {
+  table: Table$1<TData>;
+  refineTable?: UseTableReturnType<TData, any>["refineCore"];
+}
+interface TableInteractionProps<TData> {
+  getCellProps?: (cell: Cell<TData, unknown>) => React.HTMLAttributes<HTMLTableCellElement>;
+  getRowProps?: (row: Row<TData>) => React.HTMLAttributes<HTMLTableRowElement>;
+  onRowClick?: (row: Row<TData>) => void;
+}
+interface TablePaginationConfigProps {
+  /** Pagination configuration */
+  pagination?: BaseTablePaginationConfig;
+}
+interface TablePaginationProps {
+  /** Custom pagination component */
+  component?: React.ReactNode;
+  /** Whether pagination is enabled */
+  enabled?: boolean;
+}
+interface TableStateProps<TData> {
+  emptyState?: ((colSpan: number) => React.ReactNode) | React.ReactNode;
+  emptyStateMessage?: string;
+  loadingState?: ((colSpan: number) => React.ReactNode) | React.ReactNode;
+  loadingStateMessage?: string;
+}
+interface TableResponsiveProps {
+  responsive?: boolean;
+  layoutType?: TableLayoutType;
+  hideColumnsOnMobile?: string[];
+  mobileBreakpoint?: ComponentSize | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+}
+interface TableHeaderFooterProps {
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+}
+interface TableStylingProps extends TableResponsiveProps, TableHeaderFooterProps {
+  className?: string;
+}
+interface BaseTableLayoutPropsBase<TData extends BaseRecord> extends TableInteractionProps<TData>, TableStateProps<TData>, TableHeaderFooterProps, TableStylingProps, BaseTableCommonProps<TData>, TablePaginationConfigProps {
+  table: Table$1<TData>;
+}
+declare function BaseTable<TData extends object>(props: BaseTableProps<TData>): any;
+//#endregion
+export { ActionColumnCellProps, ActionColumnDef, BaseTable, BaseTableCommonProps, BaseTableCommonPropsType, BaseTableLayoutPropsBase, BaseTablePaginationConfig, BaseTableProps, BaseTableRefineProps, BaseTableWithDataProps, BaseTableWithTableProps, TableDataProps, TableHeaderFooterProps, TableInstanceProps, TableInteractionProps, TablePaginationConfigProps, TablePaginationProps, TableResponsiveProps, TableStateProps, TableStylingProps };
+//# sourceMappingURL=BaseTable.d.ts.map

package/dist/esm/components/data-table/BaseTable.js

@@ -0,0 +1,132 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { TableLayoutType, init_DataTable_types } from "./DataTable.types.js";
+import { getAvailableOperators, getDefaultOperatorForFieldType, init_useFilterOperators } from "./toolbarItems/filters/hooks/useFilterOperators.js";
+import { FilterHelpersProvider } from "./contexts/FilterHelpers.js";
+import { TableConfigProvider, useTableConfigOptional } from "./contexts/TableConfig.js";
+import { TableInstanceProvider } from "./contexts/TableInstance.js";
+import { init_contexts } from "./contexts/index.js";
+import { BaseTableInner, init_BaseTableInner } from "./BaseTableInner.js";
+import { filterColumnsForMobile, init_filterColumnsForMobile } from "./filterColumnsForMobile.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
+
+//#region src/components/data-table/BaseTable.tsx
+function BaseTableWithData(props) {
+	const { columns, data, hideColumnsOnMobile = [], responsive = false, ...restProps } = props;
+	const table = useReactTable({
+		data,
+		columns: responsive ? filterColumnsForMobile(columns, hideColumnsOnMobile) : columns,
+		getCoreRowModel: getCoreRowModel()
+	});
+	const existingTableConfig = useTableConfigOptional();
+	if (!existingTableConfig || !existingTableConfig.toolbarConfig && !existingTableConfig.refineContext) return /* @__PURE__ */ jsx(TableInstanceProvider, {
+		table,
+		children: /* @__PURE__ */ jsx(FilterHelpersProvider, {
+			refineTable: props.refineTable,
+			getDefaultOperator: getDefaultOperatorForFieldType,
+			getAvailableOperators,
+			children: /* @__PURE__ */ jsx(TableConfigProvider, {
+				toolbarConfig: props.toolbarConfig,
+				refineContext: props.refineTable ? {
+					tableInstance: props.refineTable,
+					refetch: props.refineTable?.tableQuery?.refetch,
+					isLoading: props.refineTable?.tableQuery?.isFetching,
+					error: props.refineTable?.tableQuery?.error
+				} : void 0,
+				children: /* @__PURE__ */ jsx(BaseTableInner, { ...restProps })
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx(TableInstanceProvider, {
+		table,
+		children: /* @__PURE__ */ jsx(FilterHelpersProvider, {
+			refineTable: props.refineTable,
+			getDefaultOperator: getDefaultOperatorForFieldType,
+			getAvailableOperators,
+			children: /* @__PURE__ */ jsx(BaseTableInner, { ...restProps })
+		})
+	});
+}
+function BaseTable(props) {
+	const { className, emptyState, emptyStateMessage, footer, getCellProps, getRowProps, header, isLoading, loadingState, loadingStateMessage, onRowClick, pagination, responsive = false, layoutType = TableLayoutType.AUTO, hideColumnsOnMobile = [], mobileBreakpoint, ...restProps } = props;
+	if ("table" in props && props.table && "data" in props && props.data) throw new Error("BaseTable cannot accept both table and data props - use one or the other");
+	if ("table" in props && props.table) {
+		const existingTableConfig = useTableConfigOptional();
+		if (!existingTableConfig || !existingTableConfig.toolbarConfig && !existingTableConfig.refineContext) return /* @__PURE__ */ jsx(TableInstanceProvider, {
+			table: props.table,
+			children: /* @__PURE__ */ jsx(FilterHelpersProvider, {
+				refineTable: props.refineTable,
+				getDefaultOperator: getDefaultOperatorForFieldType,
+				getAvailableOperators,
+				children: /* @__PURE__ */ jsx(TableConfigProvider, {
+					toolbarConfig: props.toolbarConfig,
+					refineContext: props.refineTable ? {
+						tableInstance: props.refineTable,
+						refetch: props.refineTable?.tableQuery?.refetch,
+						isLoading: props.refineTable?.tableQuery?.isFetching,
+						error: props.refineTable?.tableQuery?.error
+					} : void 0,
+					children: /* @__PURE__ */ jsx(BaseTableInner, {
+						className,
+						emptyState,
+						emptyStateMessage,
+						footer,
+						getCellProps,
+						getRowProps,
+						header,
+						isLoading,
+						loadingState,
+						loadingStateMessage,
+						onRowClick,
+						pagination,
+						responsive,
+						layoutType,
+						hideColumnsOnMobile,
+						mobileBreakpoint
+					})
+				})
+			})
+		});
+		return /* @__PURE__ */ jsx(TableInstanceProvider, {
+			table: props.table,
+			children: /* @__PURE__ */ jsx(FilterHelpersProvider, {
+				refineTable: props.refineTable,
+				getDefaultOperator: getDefaultOperatorForFieldType,
+				getAvailableOperators,
+				children: /* @__PURE__ */ jsx(BaseTableInner, {
+					className,
+					emptyState,
+					emptyStateMessage,
+					footer,
+					getCellProps,
+					getRowProps,
+					header,
+					isLoading,
+					loadingState,
+					loadingStateMessage,
+					onRowClick,
+					pagination,
+					responsive,
+					layoutType,
+					hideColumnsOnMobile,
+					mobileBreakpoint
+				})
+			})
+		});
+	}
+	if ("data" in props && props.data) return /* @__PURE__ */ jsx(BaseTableWithData, { ...props });
+	throw new Error("BaseTable requires either table or data prop");
+}
+var init_BaseTable = __esmMin(() => {
+	init_BaseTableInner();
+	init_contexts();
+	init_DataTable_types();
+	init_useFilterOperators();
+	init_filterColumnsForMobile();
+});
+
+//#endregion
+init_BaseTable();
+export { BaseTable, init_BaseTable };
+//# sourceMappingURL=BaseTable.js.map

package/dist/esm/components/data-table/BaseTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTable.js","names":[],"sources":["../../../../src/components/data-table/BaseTable.tsx"],"sourcesContent":["import {\n  Cell,\n  ColumnDef,\n  getCoreRowModel,\n  Row,\n  Table,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport React from \"react\";\nimport { BaseRecord } from \"@refinedev/core\";\nimport type { UseTableReturnType } from \"@refinedev/react-table\";\n\nimport { BaseTableInner } from \"./BaseTableInner\";\nimport {\n  FilterHelpersProvider,\n  RefineTableProvider,\n  TableConfigProvider,\n  TableInstanceProvider,\n  useTableConfigOptional,\n} from \"./contexts\";\nimport { ToolbarConfig, TableLayoutType } from \"./DataTable.types\";\nimport {\n  getAvailableOperators,\n  getDefaultOperatorForFieldType,\n} from \"./toolbarItems/filters/hooks/useFilterOperators\";\nimport { filterColumnsForMobile } from \"./filterColumnsForMobile\";\nimport { ComponentSize } from \"@lumeweb/portal-framework-ui-core\";\n\nexport interface ActionColumnCellProps<TData> {\n  row: Row<TData>;\n}\n\nexport type ActionColumnDef<TData> = ColumnDef<TData, unknown> & {\n  /** Function to render cell content */\n  cell: (props: ActionColumnCellProps<TData>) => React.ReactNode;\n};\n\nexport interface BaseTableRefineProps<TData extends BaseRecord> {\n  /** Refine table instance */\n  refineTable?: UseTableReturnType<TData, any>[\"refineCore\"];\n}\n\nexport interface BaseTableCommonProps<TData extends BaseRecord> {\n  /** Whether table is in loading state */\n  isLoading?: boolean;\n  /** Toolbar configuration */\n  toolbarConfig?: ToolbarConfig<TData>;\n}\n\nexport type BaseTableCommonPropsType<TData extends BaseRecord> =\n  TableInteractionProps<TData> &\n    TablePaginationConfigProps &\n    TableStateProps<TData> &\n    TableStylingProps &\n    BaseTableRefineProps<TData> &\n    BaseTableCommonProps<TData>;\n\nexport type BaseTablePaginationConfig = boolean | TablePaginationProps;\n\nexport type BaseTableProps<TData extends BaseRecord> =\n  | BaseTableWithDataProps<TData>\n  | BaseTableWithTableProps<TData>;\n\nexport type BaseTableWithDataProps<TData extends BaseRecord> =\n  BaseTableCommonPropsType<TData> &\n    TableDataProps<TData> & {\n      table?: never;\n    };\n\nexport type BaseTableWithTableProps<TData extends BaseRecord> =\n  BaseTableCommonPropsType<TData> &\n    TableInstanceProps<TData> & {\n      actionColumn?: never;\n      columns?: never;\n      data?: never;\n    };\n\nexport interface TableDataProps<TData> {\n  /** Optional action column configuration */\n  actionColumn?: ActionColumnDef<TData>;\n  columns: ColumnDef<TData>[];\n  data: TData[];\n}\n\nexport interface TableInstanceProps<TData extends BaseRecord> {\n  table: Table<TData>;\n  refineTable?: UseTableReturnType<TData, any>[\"refineCore\"];\n}\n\nexport interface TableInteractionProps<TData> {\n  getCellProps?: (\n    cell: Cell<TData, unknown>,\n  ) => React.HTMLAttributes<HTMLTableCellElement>;\n  getRowProps?: (row: Row<TData>) => React.HTMLAttributes<HTMLTableRowElement>;\n  onRowClick?: (row: Row<TData>) => void;\n}\n\nexport interface TablePaginationConfigProps {\n  /** Pagination configuration */\n  pagination?: BaseTablePaginationConfig;\n}\n\nexport interface TablePaginationProps {\n  /** Custom pagination component */\n  component?: React.ReactNode;\n  /** Whether pagination is enabled */\n  enabled?: boolean;\n}\n\nexport interface TableStateProps<TData> {\n  emptyState?: ((colSpan: number) => React.ReactNode) | React.ReactNode;\n  emptyStateMessage?: string;\n  loadingState?: ((colSpan: number) => React.ReactNode) | React.ReactNode;\n  loadingStateMessage?: string;\n}\n\nexport interface TableResponsiveProps {\n  responsive?: boolean;\n  layoutType?: TableLayoutType;\n  hideColumnsOnMobile?: string[];\n  mobileBreakpoint?: ComponentSize | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n}\n\nexport interface TableHeaderFooterProps {\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nexport interface TableStylingProps extends TableResponsiveProps, TableHeaderFooterProps {\n  className?: string;\n}\n\nexport interface BaseTableLayoutPropsBase<TData extends BaseRecord> \n  extends TableInteractionProps<TData>,\n    TableStateProps<TData>,\n    TableHeaderFooterProps,\n    TableStylingProps,\n    BaseTableCommonProps<TData>,\n    TablePaginationConfigProps {\n  table: Table<TData>;\n}\n\nfunction BaseTableWithData<TData extends BaseRecord>(\n  props: BaseTableWithDataProps<TData>,\n) {\n  const {\n    columns,\n    data,\n    hideColumnsOnMobile = [],\n    responsive = false,\n    ...restProps\n  } = props;\n\n  // Filter columns for mobile if responsive mode is enabled\n  const filteredColumns = responsive \n    ? filterColumnsForMobile(columns, hideColumnsOnMobile) \n    : columns;\n\n  const table = useReactTable({\n    data,\n    columns: filteredColumns,\n    getCoreRowModel: getCoreRowModel(),\n  });\n\n  // Safe check for existing TableConfigContext using the optional hook\n  const existingTableConfig = useTableConfigOptional<TData>();\n\n  // Only render TableConfigProvider if context doesn't already exist\n  const shouldRenderTableConfigProvider =\n    !existingTableConfig ||\n    (!existingTableConfig.toolbarConfig && !existingTableConfig.refineContext);\n\n  if (shouldRenderTableConfigProvider) {\n    return (\n      <TableInstanceProvider table={table}>\n        <FilterHelpersProvider\n          refineTable={props.refineTable}\n          getDefaultOperator={getDefaultOperatorForFieldType}\n          getAvailableOperators={getAvailableOperators}>\n          <TableConfigProvider\n            toolbarConfig={props.toolbarConfig}\n            refineContext={\n              props.refineTable\n                ? {\n                    tableInstance: props.refineTable,\n                    refetch: props.refineTable?.tableQuery?.refetch,\n                    isLoading: props.refineTable?.tableQuery?.isFetching,\n                    error: props.refineTable?.tableQuery?.error,\n                  }\n                : undefined\n            }>\n            <BaseTableInner {...restProps} />\n          </TableConfigProvider>\n        </FilterHelpersProvider>\n      </TableInstanceProvider>\n    );\n  }\n\n  return (\n    <TableInstanceProvider table={table}>\n      <FilterHelpersProvider\n        refineTable={props.refineTable}\n        getDefaultOperator={getDefaultOperatorForFieldType}\n        getAvailableOperators={getAvailableOperators}>\n        <BaseTableInner {...restProps} />\n      </FilterHelpersProvider>\n    </TableInstanceProvider>\n  );\n}\n\nfunction BaseTable<TData extends object>(props: BaseTableProps<TData>) {\n  const {\n    className,\n    emptyState,\n    emptyStateMessage,\n    footer,\n    getCellProps,\n    getRowProps,\n    header,\n    isLoading,\n    loadingState,\n    loadingStateMessage,\n    onRowClick,\n    pagination,\n    responsive = false,\n    layoutType = TableLayoutType.AUTO,\n    hideColumnsOnMobile = [],\n    mobileBreakpoint,\n    ...restProps\n  } = props;\n\n  if (\"table\" in props && props.table && \"data\" in props && props.data) {\n    throw new Error(\n      \"BaseTable cannot accept both table and data props - use one or the other\",\n    );\n  }\n\n  if (\"table\" in props && props.table) {\n    // Safe check for existing TableConfigContext using the optional hook\n    const existingTableConfig = useTableConfigOptional<TData>();\n\n    // Only render TableConfigProvider if context doesn't already exist\n    const shouldRenderTableConfigProvider =\n      !existingTableConfig ||\n      (!existingTableConfig.toolbarConfig && !existingTableConfig.refineContext);\n\n    if (shouldRenderTableConfigProvider) {\n      return (\n        <TableInstanceProvider table={props.table}>\n          <FilterHelpersProvider\n            refineTable={props.refineTable}\n            getDefaultOperator={getDefaultOperatorForFieldType}\n            getAvailableOperators={getAvailableOperators}>\n            <TableConfigProvider\n              toolbarConfig={props.toolbarConfig}\n              refineContext={\n                props.refineTable\n                  ? {\n                      tableInstance: props.refineTable,\n                      refetch: props.refineTable?.tableQuery?.refetch,\n                      isLoading: props.refineTable?.tableQuery?.isFetching,\n                      error: props.refineTable?.tableQuery?.error,\n                    }\n                  : undefined\n              }>\n              <BaseTableInner \n                className={className}\n                emptyState={emptyState}\n                emptyStateMessage={emptyStateMessage}\n                footer={footer}\n                getCellProps={getCellProps}\n                getRowProps={getRowProps}\n                header={header}\n                isLoading={isLoading}\n                loadingState={loadingState}\n                loadingStateMessage={loadingStateMessage}\n                onRowClick={onRowClick}\n                pagination={pagination}\n                responsive={responsive}\n                layoutType={layoutType}\n                hideColumnsOnMobile={hideColumnsOnMobile}\n                mobileBreakpoint={mobileBreakpoint}\n              />\n            </TableConfigProvider>\n          </FilterHelpersProvider>\n        </TableInstanceProvider>\n      );\n    }\n\n    return (\n      <TableInstanceProvider table={props.table}>\n        <FilterHelpersProvider\n          refineTable={props.refineTable}\n          getDefaultOperator={getDefaultOperatorForFieldType}\n          getAvailableOperators={getAvailableOperators}>\n          <BaseTableInner \n            className={className}\n            emptyState={emptyState}\n            emptyStateMessage={emptyStateMessage}\n            footer={footer}\n            getCellProps={getCellProps}\n            getRowProps={getRowProps}\n            header={header}\n            isLoading={isLoading}\n            loadingState={loadingState}\n            loadingStateMessage={loadingStateMessage}\n            onRowClick={onRowClick}\n            pagination={pagination}\n            responsive={responsive}\n            layoutType={layoutType}\n            hideColumnsOnMobile={hideColumnsOnMobile}\n            mobileBreakpoint={mobileBreakpoint}\n          />\n        </FilterHelpersProvider>\n      </TableInstanceProvider>\n    );\n  }\n\n  if (\"data\" in props && props.data) {\n    return <BaseTableWithData {...props} />;\n  }\n\n  throw new Error(\"BaseTable requires either table or data prop\");\n}\n\nexport { BaseTable };\n"],"mappings":";;;;;;;;;;;;;;AA8IA,SAAS,kBACP,OACA;CACA,MAAM,EACJ,SACA,MACA,sBAAsB,EAAE,EACxB,aAAa,OACb,GAAG,cACD;CAOJ,MAAM,QAAQ,cAAc;EAC1B;EACA,SANsB,aACpB,uBAAuB,SAAS,oBAAoB,GACpD;EAKF,iBAAiB,iBAAiB;EACnC,CAAC;CAGF,MAAM,sBAAsB,wBAA+B;AAO3D,KAHE,CAAC,uBACA,CAAC,oBAAoB,iBAAiB,CAAC,oBAAoB,cAG5D,QACE,oBAAC;EAA6B;YAC5B,oBAAC;GACC,aAAa,MAAM;GACnB,oBAAoB;GACG;aACvB,oBAAC;IACC,eAAe,MAAM;IACrB,eACE,MAAM,cACF;KACE,eAAe,MAAM;KACrB,SAAS,MAAM,aAAa,YAAY;KACxC,WAAW,MAAM,aAAa,YAAY;KAC1C,OAAO,MAAM,aAAa,YAAY;KACvC,GACD;cAEN,oBAAC,kBAAe,GAAI,YAAa;KACb;IACA;GACF;AAI5B,QACE,oBAAC;EAA6B;YAC5B,oBAAC;GACC,aAAa,MAAM;GACnB,oBAAoB;GACG;aACvB,oBAAC,kBAAe,GAAI,YAAa;IACX;GACF;;AAI5B,SAAS,UAAgC,OAA8B;CACrE,MAAM,EACJ,WACA,YACA,mBACA,QACA,cACA,aACA,QACA,WACA,cACA,qBACA,YACA,YACA,aAAa,OACb,aAAa,gBAAgB,MAC7B,sBAAsB,EAAE,EACxB,kBACA,GAAG,cACD;AAEJ,KAAI,WAAW,SAAS,MAAM,SAAS,UAAU,SAAS,MAAM,KAC9D,OAAM,IAAI,MACR,2EACD;AAGH,KAAI,WAAW,SAAS,MAAM,OAAO;EAEnC,MAAM,sBAAsB,wBAA+B;AAO3D,MAHE,CAAC,uBACA,CAAC,oBAAoB,iBAAiB,CAAC,oBAAoB,cAG5D,QACE,oBAAC;GAAsB,OAAO,MAAM;aAClC,oBAAC;IACC,aAAa,MAAM;IACnB,oBAAoB;IACG;cACvB,oBAAC;KACC,eAAe,MAAM;KACrB,eACE,MAAM,cACF;MACE,eAAe,MAAM;MACrB,SAAS,MAAM,aAAa,YAAY;MACxC,WAAW,MAAM,aAAa,YAAY;MAC1C,OAAO,MAAM,aAAa,YAAY;MACvC,GACD;eAEN,oBAAC;MACY;MACC;MACO;MACX;MACM;MACD;MACL;MACG;MACG;MACO;MACT;MACA;MACA;MACA;MACS;MACH;OAClB;MACkB;KACA;IACF;AAI5B,SACE,oBAAC;GAAsB,OAAO,MAAM;aAClC,oBAAC;IACC,aAAa,MAAM;IACnB,oBAAoB;IACG;cACvB,oBAAC;KACY;KACC;KACO;KACX;KACM;KACD;KACL;KACG;KACG;KACO;KACT;KACA;KACA;KACA;KACS;KACH;MAClB;KACoB;IACF;;AAI5B,KAAI,UAAU,SAAS,MAAM,KAC3B,QAAO,oBAAC,qBAAkB,GAAI,QAAS;AAGzC,OAAM,IAAI,MAAM,+CAA+C;;;sBAtTf;gBAO9B;uBAC+C;0BAIV;8BACS"}

package/dist/esm/components/data-table/BaseTableContent.d.ts

@@ -0,0 +1,48 @@
+import { TableLayoutType } from "./DataTable.types.js";
+import { ComponentSize } from "@lumeweb/portal-framework-ui-core";
+import { BaseRecord } from "@refinedev/core";
+import React from "react";
+import { Cell, Row, Table as Table$1 } from "@tanstack/react-table";
+
+//#region src/components/data-table/BaseTableContent.d.ts
+interface BaseTableContentProps<TData extends BaseRecord> {
+  className?: string;
+  emptyState?: React.ReactNode;
+  footer?: React.ReactNode;
+  getCellProps?: (cell: Cell<TData, unknown>) => React.HTMLAttributes<HTMLTableCellElement>;
+  getRowProps?: (row: Row<TData>) => React.HTMLAttributes<HTMLTableRowElement>;
+  header?: React.ReactNode;
+  /** Whether table is in loading state */
+  isLoading?: boolean;
+  /** Loading state content */
+  loadingState?: React.ReactNode;
+  onRowClick?: (row: Row<TData>) => void;
+  pagination?: React.ReactNode;
+  table: Table$1<TData>;
+  responsive?: boolean;
+  layoutType?: TableLayoutType;
+  hideColumnsOnMobile?: string[];
+  mobileBreakpoint?: ComponentSize | string;
+  stackedHeaderColumn?: string;
+}
+declare function BaseTableContent<TData extends BaseRecord>({
+  className,
+  emptyState,
+  footer,
+  getCellProps,
+  getRowProps,
+  header,
+  isLoading,
+  loadingState,
+  onRowClick,
+  pagination,
+  table,
+  responsive,
+  layoutType,
+  hideColumnsOnMobile,
+  mobileBreakpoint,
+  stackedHeaderColumn
+}: BaseTableContentProps<TData>): any;
+//#endregion
+export { BaseTableContent, BaseTableContentProps };
+//# sourceMappingURL=BaseTableContent.d.ts.map

package/dist/esm/components/data-table/BaseTableContent.js

@@ -0,0 +1,46 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { TableLayoutType, init_DataTable_types } from "./DataTable.types.js";
+import { useTableConfigOptional } from "./contexts/TableConfig.js";
+import { init_contexts } from "./contexts/index.js";
+import { Toolbar, init_Toolbar } from "./Toolbar.js";
+import { TableLayoutRenderer, init_TableLayoutRenderer } from "./TableLayoutRenderer.js";
+import { cn } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/data-table/BaseTableContent.tsx
+function BaseTableContent({ className, emptyState, footer, getCellProps, getRowProps, header, isLoading, loadingState, onRowClick, pagination, table, responsive = false, layoutType = TableLayoutType.AUTO, hideColumnsOnMobile = [], mobileBreakpoint, stackedHeaderColumn }) {
+	const toolbarConfig = useTableConfigOptional()?.toolbarConfig;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(className),
+		children: [toolbarConfig && /* @__PURE__ */ jsx(Toolbar, { table }), /* @__PURE__ */ jsx(TableLayoutRenderer, {
+			layoutType,
+			table,
+			className,
+			emptyState,
+			footer,
+			getCellProps,
+			getRowProps,
+			header,
+			isLoading,
+			loadingState,
+			onRowClick,
+			pagination,
+			responsive,
+			hideColumnsOnMobile,
+			mobileBreakpoint: mobileBreakpoint || toolbarConfig?.mobileBreakpoint,
+			stackedHeaderColumn
+		})]
+	});
+}
+var init_BaseTableContent = __esmMin(() => {
+	init_Toolbar();
+	init_contexts();
+	init_TableLayoutRenderer();
+	init_DataTable_types();
+});
+
+//#endregion
+init_BaseTableContent();
+export { BaseTableContent, init_BaseTableContent };
+//# sourceMappingURL=BaseTableContent.js.map

package/dist/esm/components/data-table/BaseTableContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTableContent.js","names":[],"sources":["../../../../src/components/data-table/BaseTableContent.tsx"],"sourcesContent":["import { cn } from \"@lumeweb/portal-framework-ui-core\";\nimport { Cell, Row, Table } from \"@tanstack/react-table\";\nimport React from \"react\";\n\nimport { Toolbar } from \"./Toolbar\";\nimport { BaseRecord } from \"@refinedev/core\";\nimport { useTableConfigOptional } from \"./contexts\";\nimport { TableLayoutRenderer } from \"./TableLayoutRenderer\";\nimport { TableLayoutType } from \"./DataTable.types\";\nimport { ComponentSize } from \"@lumeweb/portal-framework-ui-core\";\n\nexport interface BaseTableContentProps<TData extends BaseRecord> {\n  className?: string;\n  emptyState?: React.ReactNode;\n  footer?: React.ReactNode;\n  getCellProps?: (\n    cell: Cell<TData, unknown>,\n  ) => React.HTMLAttributes<HTMLTableCellElement>;\n  getRowProps?: (row: Row<TData>) => React.HTMLAttributes<HTMLTableRowElement>;\n  header?: React.ReactNode;\n  /** Whether table is in loading state */\n  isLoading?: boolean;\n  /** Loading state content */\n  loadingState?: React.ReactNode;\n  onRowClick?: (row: Row<TData>) => void;\n  pagination?: React.ReactNode;\n  table: Table<TData>;\n  responsive?: boolean;\n  layoutType?: TableLayoutType;\n  hideColumnsOnMobile?: string[];\n  mobileBreakpoint?: ComponentSize | string;\n  stackedHeaderColumn?: string;\n}\n\nfunction BaseTableContent<TData extends BaseRecord>({\n  className,\n  emptyState,\n  footer,\n  getCellProps,\n  getRowProps,\n  header,\n  isLoading,\n  loadingState,\n  onRowClick,\n  pagination,\n  table,\n  responsive = false,\n  layoutType = TableLayoutType.AUTO,\n  hideColumnsOnMobile = [],\n  mobileBreakpoint,\n  stackedHeaderColumn,\n}: BaseTableContentProps<TData>) {\n  const tableConfig = useTableConfigOptional<TData>();\n  const toolbarConfig = tableConfig?.toolbarConfig;\n\n  return (\n    <div className={cn(className)}>\n      {toolbarConfig && <Toolbar table={table} />}\n      <TableLayoutRenderer\n        layoutType={layoutType}\n        table={table}\n        className={className}\n        emptyState={emptyState}\n        footer={footer}\n        getCellProps={getCellProps}\n        getRowProps={getRowProps}\n        header={header}\n        isLoading={isLoading}\n        loadingState={loadingState}\n        onRowClick={onRowClick}\n        pagination={pagination}\n        responsive={responsive}\n        hideColumnsOnMobile={hideColumnsOnMobile}\n        mobileBreakpoint={mobileBreakpoint || toolbarConfig?.mobileBreakpoint}\n        stackedHeaderColumn={stackedHeaderColumn}\n      />\n    </div>\n  );\n}\n\nexport { BaseTableContent };\n"],"mappings":";;;;;;;;;;;AAkCA,SAAS,iBAA2C,EAClD,WACA,YACA,QACA,cACA,aACA,QACA,WACA,cACA,YACA,YACA,OACA,aAAa,OACb,aAAa,gBAAgB,MAC7B,sBAAsB,EAAE,EACxB,kBACA,uBAC+B;CAE/B,MAAM,gBADc,wBAA+B,EAChB;AAEnC,QACE,qBAAC;EAAI,WAAW,GAAG,UAAU;aAC1B,iBAAiB,oBAAC,WAAe,QAAS,EAC3C,oBAAC;GACa;GACL;GACI;GACC;GACJ;GACM;GACD;GACL;GACG;GACG;GACF;GACA;GACA;GACS;GACrB,kBAAkB,oBAAoB,eAAe;GAChC;IACrB;GACE;;;eAxE0B;gBAEgB;2BACQ;uBACR"}

package/dist/esm/components/data-table/BaseTableInner.d.ts

@@ -0,0 +1,11 @@
+import { BaseTableCommonPropsType, TableHeaderFooterProps, TableResponsiveProps } from "./BaseTable.js";
+import React from "react";
+
+//#region src/components/data-table/BaseTableInner.d.ts
+interface BaseTableInnerProps<TData extends object> extends BaseTableCommonPropsType<TData>, TableHeaderFooterProps, TableResponsiveProps {
+  stackedHeaderColumn?: string;
+}
+declare function BaseTableInner<TData extends object>(props: BaseTableInnerProps<TData>): React.JSX.Element;
+//#endregion
+export { BaseTableInner };
+//# sourceMappingURL=BaseTableInner.d.ts.map

package/dist/esm/components/data-table/BaseTableInner.js

@@ -0,0 +1,42 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { useTableInstance } from "./contexts/TableInstance.js";
+import { init_contexts } from "./contexts/index.js";
+import { init_tableOptions, normalizeTableOptions } from "./tableOptions.js";
+import { BaseTableContent, init_BaseTableContent } from "./BaseTableContent.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/data-table/BaseTableInner.tsx
+function BaseTableInner(props) {
+	const { className, emptyState, emptyStateMessage, footer, getCellProps, getRowProps, header, isLoading, loadingState, loadingStateMessage, onRowClick, pagination, responsive, layoutType, hideColumnsOnMobile, mobileBreakpoint, stackedHeaderColumn } = props;
+	const { table } = useTableInstance();
+	const normalizedOptions = normalizeTableOptions(pagination, emptyState, emptyStateMessage, loadingState, loadingStateMessage, table);
+	return /* @__PURE__ */ jsx(BaseTableContent, {
+		className,
+		emptyState: normalizedOptions.emptyState,
+		footer,
+		getCellProps,
+		getRowProps,
+		header,
+		isLoading,
+		loadingState: normalizedOptions.loadingState,
+		onRowClick,
+		pagination: normalizedOptions.pagination.enabled ? normalizedOptions.pagination.component : void 0,
+		table,
+		responsive,
+		layoutType,
+		hideColumnsOnMobile,
+		mobileBreakpoint,
+		stackedHeaderColumn
+	});
+}
+var init_BaseTableInner = __esmMin(() => {
+	init_BaseTableContent();
+	init_contexts();
+	init_tableOptions();
+});
+
+//#endregion
+init_BaseTableInner();
+export { BaseTableInner, init_BaseTableInner };
+//# sourceMappingURL=BaseTableInner.js.map

package/dist/esm/components/data-table/BaseTableInner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTableInner.js","names":[],"sources":["../../../../src/components/data-table/BaseTableInner.tsx"],"sourcesContent":["import type { BaseTableCommonPropsType, TableHeaderFooterProps, TableResponsiveProps } from \"./BaseTable\";\nimport { BaseTableContent } from \"./BaseTableContent\";\nimport { useTableInstance } from \"./contexts\";\nimport { normalizeTableOptions } from \"./tableOptions\";\nimport { type Table } from \"@tanstack/react-table\";\nimport React from \"react\";\n\n// Extend the common props interface with specific properties BaseTableInner actually uses\ninterface BaseTableInnerProps<TData extends object> \n  extends BaseTableCommonPropsType<TData>, TableHeaderFooterProps, TableResponsiveProps {\n  stackedHeaderColumn?: string;\n}\n\nfunction BaseTableInner<TData extends object>(\n  props: BaseTableInnerProps<TData>,\n): React.JSX.Element {\n  const {\n    className,\n    emptyState,\n    emptyStateMessage,\n    footer,\n    getCellProps,\n    getRowProps,\n    header,\n    isLoading,\n    loadingState,\n    loadingStateMessage,\n    onRowClick,\n    pagination,\n    responsive,\n    layoutType,\n    hideColumnsOnMobile,\n    mobileBreakpoint,\n    stackedHeaderColumn,\n  } = props;\n\n  const { table } = useTableInstance<TData>();\n\n  const normalizedOptions = normalizeTableOptions(\n    pagination,\n    emptyState,\n    emptyStateMessage,\n    loadingState,\n    loadingStateMessage,\n    table,\n  );\n\n  return (\n    <BaseTableContent\n      className={className}\n      emptyState={normalizedOptions.emptyState}\n      footer={footer}\n      getCellProps={getCellProps}\n      getRowProps={getRowProps}\n      header={header}\n      isLoading={isLoading}\n      loadingState={normalizedOptions.loadingState}\n      onRowClick={onRowClick}\n      pagination={\n        normalizedOptions.pagination.enabled\n          ? normalizedOptions.pagination.component\n          : undefined\n      }\n      table={table}\n      responsive={responsive}\n      layoutType={layoutType}\n      hideColumnsOnMobile={hideColumnsOnMobile}\n      mobileBreakpoint={mobileBreakpoint}\n      stackedHeaderColumn={stackedHeaderColumn}\n    />\n  );\n}\n\nexport { BaseTableInner };\n"],"mappings":";;;;;;;;;AAaA,SAAS,eACP,OACmB;CACnB,MAAM,EACJ,WACA,YACA,mBACA,QACA,cACA,aACA,QACA,WACA,cACA,qBACA,YACA,YACA,YACA,YACA,qBACA,kBACA,wBACE;CAEJ,MAAM,EAAE,UAAU,kBAAyB;CAE3C,MAAM,oBAAoB,sBACxB,YACA,YACA,mBACA,cACA,qBACA,MACD;AAED,QACE,oBAAC;EACY;EACX,YAAY,kBAAkB;EACtB;EACM;EACD;EACL;EACG;EACX,cAAc,kBAAkB;EACpB;EACZ,YACE,kBAAkB,WAAW,UACzB,kBAAkB,WAAW,YAC7B;EAEC;EACK;EACA;EACS;EACH;EACG;GACrB;;;wBApEgD;gBACR;oBACS"}

package/dist/esm/components/data-table/BaseTableStackedLayout.d.ts

@@ -0,0 +1,31 @@
+import { BaseTableLayoutPropsBase } from "./BaseTable.js";
+import { BaseRecord } from "@refinedev/core";
+import React from "react";
+
+//#region src/components/data-table/BaseTableStackedLayout.d.ts
+interface BaseTableStackedLayoutProps<TData extends BaseRecord> extends BaseTableLayoutPropsBase<TData> {
+  getCellProps?: (cell: any) => React.HTMLAttributes<HTMLDivElement>;
+  stackedHeaderColumn?: string;
+}
+declare function BaseTableStackedLayout<TData extends BaseRecord>({
+  className,
+  emptyState,
+  emptyStateMessage,
+  footer,
+  getCellProps,
+  getRowProps,
+  header,
+  isLoading,
+  loadingState,
+  loadingStateMessage,
+  onRowClick,
+  pagination,
+  table,
+  responsive,
+  hideColumnsOnMobile,
+  mobileBreakpoint,
+  stackedHeaderColumn
+}: BaseTableStackedLayoutProps<TData>): any;
+//#endregion
+export { BaseTableStackedLayout };
+//# sourceMappingURL=BaseTableStackedLayout.d.ts.map

package/dist/esm/components/data-table/BaseTableStackedLayout.js

@@ -0,0 +1,147 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { ComponentSize as ComponentSize$1 } from "../sizing/index.js";
+import { init_useMobileDetection, useMobileDetection as useMobileDetection$1 } from "./useMobileDetection.js";
+import { useTableConfigOptional } from "./contexts/TableConfig.js";
+import { init_contexts } from "./contexts/index.js";
+import { init_useTableHandlers, useMobileColumnHiding, useTableRowHandlers } from "./useTableHandlers.js";
+import { init_tableOptions, normalizeTableOptions } from "./tableOptions.js";
+import { init_components } from "../index.js";
+import { Card, CardContent, cn } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { flexRender } from "@tanstack/react-table";
+
+//#region src/components/data-table/BaseTableStackedLayout.tsx
+function BaseTableStackedLayout({ className, emptyState, emptyStateMessage, footer, getCellProps, getRowProps, header, isLoading, loadingState, loadingStateMessage, onRowClick, pagination, table, responsive, hideColumnsOnMobile, mobileBreakpoint, stackedHeaderColumn }) {
+	const tableConfig = useTableConfigOptional();
+	const { isMobile } = useMobileDetection$1({ mobileBreakpoint: validateBreakpoint(mobileBreakpoint || tableConfig?.toolbarConfig?.mobileBreakpoint || ComponentSize$1.SM) });
+	const normalizedOptions = normalizeTableOptions(pagination, emptyState, emptyStateMessage, loadingState, loadingStateMessage, table);
+	const getTableRowProps = useTableRowHandlers({
+		onRowClick,
+		getRowProps
+	});
+	const hiddenColumns = useMobileColumnHiding({
+		responsive,
+		hideColumnsOnMobile,
+		columnIds: React.useMemo(() => {
+			return table.getAllLeafColumns().map((column) => column.id);
+		}, [table])
+	});
+	if (isLoading) return /* @__PURE__ */ jsxs("div", {
+		className: cn(className),
+		children: [
+			header && /* @__PURE__ */ jsx("div", {
+				className: "mb-4",
+				children: header
+			}),
+			normalizedOptions.loadingState,
+			footer && /* @__PURE__ */ jsx("div", {
+				className: "mt-4",
+				children: footer
+			})
+		]
+	});
+	const rows = table.getRowModel().rows;
+	if (rows.length === 0) return /* @__PURE__ */ jsxs("div", {
+		className: cn(className),
+		children: [
+			header && /* @__PURE__ */ jsx("div", {
+				className: "mb-4",
+				children: header
+			}),
+			normalizedOptions.emptyState,
+			footer && /* @__PURE__ */ jsx("div", {
+				className: "mt-4",
+				children: footer
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(className),
+		children: [
+			header && /* @__PURE__ */ jsx("div", {
+				className: "mb-4",
+				children: header
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "space-y-4",
+				children: rows.map((row) => {
+					return /* @__PURE__ */ jsxs(Card, {
+						...getTableRowProps(row),
+						children: [stackedHeaderColumn && (() => {
+							const headerCell = row.getVisibleCells().find((cell) => cell.column.id === stackedHeaderColumn);
+							if (headerCell) return /* @__PURE__ */ jsx("div", {
+								className: cn("border-b p-4", "[word-break:break-word]"),
+								children: /* @__PURE__ */ jsx("div", {
+									className: "text-lg font-semibold",
+									children: flexRender(headerCell.column.columnDef.cell, headerCell.getContext())
+								})
+							});
+							return null;
+						})(), /* @__PURE__ */ jsx(CardContent, {
+							className: cn("space-y-3", "[word-break:break-word]"),
+							children: row.getVisibleCells().map((cell) => {
+								if (hiddenColumns.has(cell.column.id)) return null;
+								if (cell.column.id === "actions") return /* @__PURE__ */ jsx("div", {
+									className: cn("flex justify-end border-t pt-3", isMobile && "pt-4"),
+									...getCellProps?.(cell),
+									children: /* @__PURE__ */ jsx("div", {
+										className: cn("flex min-h-10 items-center"),
+										children: flexRender(cell.column.columnDef.cell, cell.getContext())
+									})
+								}, cell.id);
+								if (cell.column.id === stackedHeaderColumn) return null;
+								const header$1 = cell.column.columnDef.header;
+								const headerText = typeof header$1 === "string" ? header$1 : void 0;
+								return /* @__PURE__ */ jsxs("div", {
+									className: cn("flex flex-col space-y-1", isMobile && "space-y-2", !stackedHeaderColumn && "pt-4"),
+									...getCellProps?.(cell),
+									children: [headerText && /* @__PURE__ */ jsx("span", {
+										className: cn("text-muted-foreground text-sm font-medium", isMobile && "text-base"),
+										children: headerText
+									}), /* @__PURE__ */ jsx("div", {
+										className: cn("flex min-h-6 items-center text-base", isMobile && "min-h-8 text-lg"),
+										children: flexRender(cell.column.columnDef.cell, cell.getContext())
+									})]
+								}, cell.id);
+							})
+						})]
+					}, row.id);
+				})
+			}),
+			normalizedOptions.pagination.enabled && /* @__PURE__ */ jsx("div", {
+				className: "mt-4",
+				children: normalizedOptions.pagination.component
+			}),
+			footer && /* @__PURE__ */ jsx("div", {
+				className: "mt-4",
+				children: footer
+			})
+		]
+	});
+}
+var validateBreakpoint;
+var init_BaseTableStackedLayout = __esmMin(() => {
+	init_contexts();
+	init_useMobileDetection();
+	init_useTableHandlers();
+	init_tableOptions();
+	init_components();
+	validateBreakpoint = (breakpoint) => {
+		if (typeof breakpoint === "string" && [
+			"xs",
+			"sm",
+			"md",
+			"lg",
+			"xl",
+			"2xl"
+		].includes(breakpoint)) return breakpoint;
+		if (typeof breakpoint === "string" && breakpoint !== "") console.warn(`Unknown breakpoint value "${breakpoint}", falling back to "md"`);
+		return "md";
+	};
+});
+
+//#endregion
+init_BaseTableStackedLayout();
+export { BaseTableStackedLayout, init_BaseTableStackedLayout };
+//# sourceMappingURL=BaseTableStackedLayout.js.map

package/dist/esm/components/data-table/BaseTableStackedLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTableStackedLayout.js","names":["useMobileDetection","ComponentSize","header"],"sources":["../../../../src/components/data-table/BaseTableStackedLayout.tsx"],"sourcesContent":["import { Card, CardContent, cn } from \"@lumeweb/portal-framework-ui-core\";\nimport { flexRender } from \"@tanstack/react-table\";\nimport React from \"react\";\n\nimport { useTableConfigOptional } from \"./contexts\";\nimport { useMobileDetection } from \"./useMobileDetection\";\nimport { BaseRecord } from \"@refinedev/core\";\nimport { BaseTableLayoutPropsBase } from \"./BaseTable\";\nimport { useMobileColumnHiding, useTableRowHandlers } from \"./useTableHandlers\";\nimport { normalizeTableOptions } from \"./tableOptions\";\nimport { ComponentSize } from \"@/components\";\n\n// Define the known Tailwind breakpoint names\ntype TailwindBreakpoint = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n\n// Helper function to validate breakpoint values\nconst validateBreakpoint = (breakpoint: any): TailwindBreakpoint => {\n  const validBreakpoints: TailwindBreakpoint[] = [\n    \"xs\",\n    \"sm\",\n    \"md\",\n    \"lg\",\n    \"xl\",\n    \"2xl\",\n  ];\n\n  if (\n    typeof breakpoint === \"string\" &&\n    validBreakpoints.includes(breakpoint as TailwindBreakpoint)\n  ) {\n    return breakpoint as TailwindBreakpoint;\n  }\n\n  // Warn and fall back to a safe default for unknown values\n  if (typeof breakpoint === \"string\" && breakpoint !== \"\") {\n    console.warn(\n      `Unknown breakpoint value \"${breakpoint}\", falling back to \"md\"`,\n    );\n  }\n\n  return \"md\";\n};\n\ninterface BaseTableStackedLayoutProps<TData extends BaseRecord>\n  extends BaseTableLayoutPropsBase<TData> {\n  getCellProps?: (\n    cell: any, // Using any to match BaseTableContentProps interface\n  ) => React.HTMLAttributes<HTMLDivElement>;\n  stackedHeaderColumn?: string;\n}\n\nfunction BaseTableStackedLayout<TData extends BaseRecord>({\n  className,\n  emptyState,\n  emptyStateMessage,\n  footer,\n  getCellProps,\n  getRowProps,\n  header,\n  isLoading,\n  loadingState,\n  loadingStateMessage,\n  onRowClick,\n  pagination,\n  table,\n  responsive,\n  hideColumnsOnMobile,\n  mobileBreakpoint,\n  stackedHeaderColumn,\n}: BaseTableStackedLayoutProps<TData>) {\n  const tableConfig = useTableConfigOptional<TData>();\n  const validatedBreakpoint = validateBreakpoint(\n    mobileBreakpoint ||\n      tableConfig?.toolbarConfig?.mobileBreakpoint ||\n      ComponentSize.SM,\n  );\n\n  const { isMobile } = useMobileDetection({\n    mobileBreakpoint: validatedBreakpoint,\n  });\n\n  // Normalize table options including pagination\n  const normalizedOptions = normalizeTableOptions(\n    pagination,\n    emptyState,\n    emptyStateMessage,\n    loadingState,\n    loadingStateMessage,\n    table,\n  );\n\n  // Use the shared hook for row handling\n  const getTableRowProps = useTableRowHandlers({ onRowClick, getRowProps });\n\n  // Get all visible column IDs for mobile hiding hook\n  const visibleColumnIds = React.useMemo(() => {\n    return table.getAllLeafColumns().map(column => column.id);\n  }, [table]);\n\n  // Determine hidden columns at top level\n  const hiddenColumns = useMobileColumnHiding({\n    responsive,\n    hideColumnsOnMobile,\n    columnIds: visibleColumnIds,\n  });\n\n  if (isLoading) {\n    return (\n      <div className={cn(className)}>\n        {header && <div className=\"mb-4\">{header}</div>}\n        {normalizedOptions.loadingState}\n        {footer && <div className=\"mt-4\">{footer}</div>}\n      </div>\n    );\n  }\n\n  const rows = table.getRowModel().rows;\n\n  if (rows.length === 0) {\n    return (\n      <div className={cn(className)}>\n        {header && <div className=\"mb-4\">{header}</div>}\n        {normalizedOptions.emptyState}\n        {footer && <div className=\"mt-4\">{footer}</div>}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(className)}>\n      {header && <div className=\"mb-4\">{header}</div>}\n      <div className=\"space-y-4\">\n        {rows.map((row) => {\n          // Use the shared hook for row props\n          const rowProps = getTableRowProps(row);\n\n          return (\n            <Card key={row.id} {...rowProps}>\n              {/* Render stacked header if specified */}\n              {stackedHeaderColumn &&\n                (() => {\n                  const headerCell = row\n                    .getVisibleCells()\n                    .find((cell) => cell.column.id === stackedHeaderColumn);\n\n                  if (headerCell) {\n                    return (\n                      <div\n                        className={cn(\n                          \"border-b p-4\",\n                          \"[word-break:break-word]\",\n                        )}>\n                        <div className=\"text-lg font-semibold\">\n                          {flexRender(\n                            headerCell.column.columnDef.cell,\n                            headerCell.getContext(),\n                          )}\n                        </div>\n                      </div>\n                    );\n                  }\n                  return null;\n                })()}\n\n              <CardContent\n                className={cn(\"space-y-3\", \"[word-break:break-word]\")}>\n                {row.getVisibleCells().map((cell) => {\n                  // Check if column should be hidden using the precomputed set\n                  if (hiddenColumns.has(cell.column.id)) {\n                    return null;\n                  }\n\n                  // Skip the actions column for stacked layout\n                  if (cell.column.id === \"actions\") {\n                    return (\n                      <div\n                        key={cell.id}\n                        className={cn(\n                          \"flex justify-end border-t pt-3\",\n                          isMobile && \"pt-4\",\n                        )}\n                        {...getCellProps?.(cell)}>\n                        <div className={cn(\"flex min-h-10 items-center\")}>\n                          {flexRender(\n                            cell.column.columnDef.cell,\n                            cell.getContext(),\n                          )}\n                        </div>\n                      </div>\n                    );\n                  }\n\n                  // Skip the stacked header column to avoid duplication\n                  if (cell.column.id === stackedHeaderColumn) {\n                    return null;\n                  }\n\n                  const header = cell.column.columnDef.header;\n                  const headerText =\n                    typeof header === \"string\" ? header : undefined;\n\n                  return (\n                    <div\n                      key={cell.id}\n                      className={cn(\n                        \"flex flex-col space-y-1\",\n                        isMobile && \"space-y-2\",\n                        !stackedHeaderColumn && \"pt-4\",\n                      )}\n                      {...getCellProps?.(cell)}>\n                      {headerText && (\n                        <span\n                          className={cn(\n                            \"text-muted-foreground text-sm font-medium\",\n                            isMobile && \"text-base\",\n                          )}>\n                          {headerText}\n                        </span>\n                      )}\n                      <div\n                        className={cn(\n                          \"flex min-h-6 items-center text-base\",\n                          isMobile && \"min-h-8 text-lg\",\n                        )}>\n                        {flexRender(\n                          cell.column.columnDef.cell,\n                          cell.getContext(),\n                        )}\n                      </div>\n                    </div>\n                  );\n                })}\n              </CardContent>\n            </Card>\n          );\n        })}\n      </div>\n      {normalizedOptions.pagination.enabled && (\n        <div className=\"mt-4\">{normalizedOptions.pagination.component}</div>\n      )}\n      {footer && <div className=\"mt-4\">{footer}</div>}\n    </div>\n  );\n}\n\nexport { BaseTableStackedLayout };\n"],"mappings":"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"}

package/dist/esm/components/data-table/DataTable.d.ts

@@ -0,0 +1,18 @@
+import { DataTableProps } from "./DataTable.types.js";
+import { BaseRecord } from "@refinedev/core";
+
+//#region src/components/data-table/DataTable.d.ts
+declare function DataTable<TData extends BaseRecord = BaseRecord, TError = unknown, TSearchVariables = unknown>({
+  actionMenu,
+  columns,
+  control,
+  dataProviderName,
+  refineCoreProps,
+  resource,
+  toolbar,
+  refetchInterval,
+  ...props
+}: DataTableProps<TData, TError, TSearchVariables>): any;
+//#endregion
+export { DataTable };
+//# sourceMappingURL=DataTable.d.ts.map