@lumeweb/portal-framework-ui 0.0.1 → 0.1.1

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

@@ -0,0 +1,123 @@
+import { TableLayoutType } from "./DataTable.types.js";
+import { getAvailableOperators, getDefaultOperatorForFieldType } 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 "./contexts/index.js";
+import { BaseTableInner } from "./BaseTableInner.js";
+import { 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 = "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");
+}
+
+//#endregion
+export { 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,uBAAD;EAA8B;YAC5B,oBAAC,uBAAD;GACE,aAAa,MAAM;GACnB,oBAAoB;GACG;aACvB,oBAAC,qBAAD;IACE,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,gBAAD,EAAgB,GAAI,WAAa;IACb;GACA;EACF;AAI5B,QACE,oBAAC,uBAAD;EAA8B;YAC5B,oBAAC,uBAAD;GACE,aAAa,MAAM;GACnB,oBAAoB;GACG;aACvB,oBAAC,gBAAD,EAAgB,GAAI,WAAa;GACX;EACF;;AAI5B,SAAS,UAAgC,OAA8B;CACrE,MAAM,EACJ,WACA,YACA,mBACA,QACA,cACA,aACA,QACA,WACA,cACA,qBACA,YACA,YACA,aAAa,OACb,qBACA,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,uBAAD;GAAuB,OAAO,MAAM;aAClC,oBAAC,uBAAD;IACE,aAAa,MAAM;IACnB,oBAAoB;IACG;cACvB,oBAAC,qBAAD;KACE,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,gBAAD;MACa;MACC;MACO;MACX;MACM;MACD;MACL;MACG;MACG;MACO;MACT;MACA;MACA;MACA;MACS;MACH;MAClB;KACkB;IACA;GACF;AAI5B,SACE,oBAAC,uBAAD;GAAuB,OAAO,MAAM;aAClC,oBAAC,uBAAD;IACE,aAAa,MAAM;IACnB,oBAAoB;IACG;cACvB,oBAAC,gBAAD;KACa;KACC;KACO;KACX;KACM;KACD;KACL;KACG;KACG;KACO;KACT;KACA;KACA;KACA;KACS;KACH;KAClB;IACoB;GACF;;AAI5B,KAAI,UAAU,SAAS,MAAM,KAC3B,QAAO,oBAAC,mBAAD,EAAmB,GAAI,OAAS;AAGzC,OAAM,IAAI,MAAM,+CAA+C"}

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,38 @@
+import { TableLayoutType } from "./DataTable.types.js";
+import { useTableConfigOptional } from "./contexts/TableConfig.js";
+import "./contexts/index.js";
+import { Toolbar } from "./Toolbar.js";
+import { 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 = "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
+		})]
+	});
+}
+
+//#endregion
+export { 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,qBACA,sBAAsB,EAAE,EACxB,kBACA,uBAC+B;CAE/B,MAAM,gBADc,wBACa,EAAE;AAEnC,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,UAAU;YAA7B,CACG,iBAAiB,oBAAC,SAAD,EAAgB,OAAS,GAC3C,oBAAC,qBAAD;GACc;GACL;GACI;GACC;GACJ;GACM;GACD;GACL;GACG;GACG;GACF;GACA;GACA;GACS;GACrB,kBAAkB,oBAAoB,eAAe;GAChC;GACrB,EACE"}

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,35 @@
+import { useTableInstance } from "./contexts/TableInstance.js";
+import "./contexts/index.js";
+import { normalizeTableOptions } from "./tableOptions.js";
+import { 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
+	});
+}
+
+//#endregion
+export { 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,kBAAD;EACa;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;EACrB"}

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,137 @@
+import { ComponentSize as ComponentSize$1 } from "../sizing/index.js";
+import { useMobileDetection as useMobileDetection$1 } from "./useMobileDetection.js";
+import { useTableConfigOptional } from "./contexts/TableConfig.js";
+import "./contexts/index.js";
+import { useMobileColumnHiding, useTableRowHandlers } from "./useTableHandlers.js";
+import { normalizeTableOptions } from "./tableOptions.js";
+import "../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
+const 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";
+};
+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 || "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 = cell.column.columnDef.header;
+								const headerText = typeof header === "string" ? header : 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
+			})
+		]
+	});
+}
+
+//#endregion
+export { BaseTableStackedLayout };
+//# sourceMappingURL=BaseTableStackedLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTableStackedLayout.js","names":["useMobileDetection"],"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

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

@@ -0,0 +1,97 @@
+import { getAvailableOperators, getDefaultOperatorForFieldType } from "./toolbarItems/filters/hooks/useFilterOperators.js";
+import { FilterHelpersProvider } from "./contexts/FilterHelpers.js";
+import { RefineTableProvider } from "./contexts/RefineTable.js";
+import { TableConfigProvider } from "./contexts/TableConfig.js";
+import { TableInstanceProvider } from "./contexts/TableInstance.js";
+import "./contexts/index.js";
+import { BaseTable } from "./BaseTable.js";
+import { TableAction } from "./TableAction.js";
+import { TableActionMenu } from "./TableActionMenu.js";
+import { getDefaultFilter } from "@refinedev/core";
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTable } from "@refinedev/react-table";
+
+//#region src/components/data-table/DataTable.tsx
+function DataTable({ actionMenu, columns, control, dataProviderName, refineCoreProps, resource, toolbar, refetchInterval, ...props }) {
+	const refineTable = useTable({
+		columns: useMemo(() => {
+			const cols = [...columns || []];
+			const actionColumn = actionMenu ? {
+				cell: ({ row }) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [actionMenu.actionItems && /* @__PURE__ */ jsx(TableAction, {
+						items: actionMenu.actionItems,
+						row: row.original
+					}), /* @__PURE__ */ jsx(TableActionMenu, {
+						items: actionMenu.items,
+						row: row.original
+					})]
+				}),
+				header: actionMenu.label ?? "Actions",
+				id: "actions",
+				meta: {
+					cellClassName: "max-w-24 w-12",
+					headerClassName: "max-w-24 w-12"
+				},
+				size: 0
+			} : void 0;
+			if (actionColumn) cols.push(actionColumn);
+			return cols;
+		}, [columns, actionMenu]),
+		refineCoreProps: useMemo(() => ({
+			dataProviderName: dataProviderName ?? void 0,
+			resource,
+			...refineCoreProps,
+			queryOptions: {
+				...refineCoreProps?.queryOptions,
+				refetchInterval
+			}
+		}), [
+			dataProviderName,
+			resource,
+			refineCoreProps,
+			refetchInterval
+		])
+	});
+	const table = {
+		...refineTable.reactTable,
+		options: {
+			...refineTable.reactTable.options,
+			refineCore: refineTable.refineCore
+		}
+	};
+	const getDefaultFilter$1 = (columnName, operatorType) => getDefaultFilter(columnName, refineTable.refineCore?.filters, operatorType);
+	const getDefaultOperator = (fieldType) => getDefaultOperatorForFieldType(fieldType);
+	const getAvailableOperators$1 = (fieldType) => getAvailableOperators(fieldType);
+	return /* @__PURE__ */ jsx(RefineTableProvider, {
+		refineTable,
+		children: /* @__PURE__ */ jsx(TableInstanceProvider, {
+			table,
+			children: /* @__PURE__ */ jsx(FilterHelpersProvider, {
+				refineTable,
+				getDefaultFilter: getDefaultFilter$1,
+				getDefaultOperator,
+				getAvailableOperators: getAvailableOperators$1,
+				children: /* @__PURE__ */ jsxs(TableConfigProvider, {
+					toolbarConfig: toolbar,
+					refineContext: {
+						tableInstance: refineTable.refineCore,
+						refetch: refineTable.refineCore.tableQuery.refetch,
+						isLoading: refineTable.refineCore.tableQuery.isFetching,
+						error: refineTable.refineCore.tableQuery.error
+					},
+					children: [control, /* @__PURE__ */ jsx(BaseTable, {
+						table,
+						refineTable: refineTable.refineCore,
+						...props
+					})]
+				})
+			})
+		})
+	});
+}
+
+//#endregion
+export { DataTable };
+//# sourceMappingURL=DataTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","names":["useRefineTable","getDefaultFilter","refineGetDefaultFilter","getAvailableOperators","getAvailableOperatorsHelper"],"sources":["../../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import {\n  BaseRecord,\n  getDefaultFilter as refineGetDefaultFilter,\n} from \"@refinedev/core\";\nimport { useTable as useRefineTable } from \"@refinedev/react-table\";\nimport { Table } from \"@tanstack/react-table\";\nimport React, { useMemo } from \"react\";\n\nimport type { DataTableProps } from \"./DataTable.types\";\n\nimport { ActionColumnCellProps, BaseTable } from \"./BaseTable\";\nimport { TableAction } from \"./TableAction\";\nimport { TableActionMenu } from \"./TableActionMenu\";\nimport {\n  FilterHelpersProvider,\n  RefineTableProvider,\n  TableConfigProvider,\n  TableInstanceProvider,\n} from \"./contexts\";\nimport {\n  getAvailableOperators as getAvailableOperatorsHelper,\n  getDefaultOperatorForFieldType,\n} from \"./toolbarItems/filters/hooks/useFilterOperators\";\n\nfunction DataTable<\n  TData extends BaseRecord = BaseRecord,\n  TError = unknown,\n  TSearchVariables = unknown,\n>({\n  actionMenu,\n  columns,\n  control,\n  dataProviderName,\n  refineCoreProps,\n  resource,\n  toolbar,\n  refetchInterval,\n  ...props\n}: DataTableProps<TData, TError, TSearchVariables>) {\n  const tableColumns = useMemo(() => {\n    const cols = [...(columns || [])];\n\n    // Create actionColumn inside useMemo to avoid unnecessary recreations\n    const actionColumn = actionMenu\n      ? {\n          cell: ({ row }: ActionColumnCellProps<TData>) => (\n            <div className=\"flex items-center gap-1\">\n              {actionMenu.actionItems && (\n                <TableAction\n                  items={actionMenu.actionItems}\n                  row={row.original}\n                />\n              )}\n              <TableActionMenu items={actionMenu.items} row={row.original} />\n            </div>\n          ),\n          header: actionMenu.label ?? \"Actions\",\n          id: \"actions\",\n          meta: {\n            cellClassName: \"max-w-24 w-12\",\n            headerClassName: \"max-w-24 w-12\",\n          },\n          size: 0,\n        }\n      : undefined;\n\n    if (actionColumn) {\n      cols.push(actionColumn);\n    }\n    return cols;\n  }, [columns, actionMenu]);\n\n  const memoizedRefineCoreProps = useMemo(\n    () => ({\n      dataProviderName: dataProviderName ?? undefined,\n      resource,\n      ...refineCoreProps,\n      queryOptions: {\n        ...refineCoreProps?.queryOptions,\n        refetchInterval,\n      },\n    }),\n    [dataProviderName, resource, refineCoreProps, refetchInterval],\n  );\n\n  const refineTable = useRefineTable<TData>({\n    columns: tableColumns,\n    // @ts-ignore\n    refineCoreProps: memoizedRefineCoreProps,\n  });\n\n  const table: Table<TData> = {\n    ...refineTable.reactTable,\n    options: {\n      ...refineTable.reactTable.options,\n      refineCore: refineTable.refineCore,\n    },\n  } as unknown as Table<TData>;\n\n  const getDefaultFilter = (columnName: string, operatorType?: string) =>\n    refineGetDefaultFilter(\n      columnName,\n      refineTable.refineCore?.filters,\n      operatorType as any,\n    );\n\n  const getDefaultOperator = (fieldType: string): string =>\n    getDefaultOperatorForFieldType(fieldType);\n\n  const getAvailableOperators = (fieldType: string) =>\n    getAvailableOperatorsHelper(fieldType);\n\n  return (\n    <RefineTableProvider refineTable={refineTable}>\n      <TableInstanceProvider table={table}>\n        <FilterHelpersProvider\n          refineTable={refineTable}\n          getDefaultFilter={getDefaultFilter}\n          getDefaultOperator={getDefaultOperator}\n          getAvailableOperators={getAvailableOperators}>\n          <TableConfigProvider\n            toolbarConfig={toolbar}\n            refineContext={{\n              tableInstance: refineTable.refineCore,\n              refetch: refineTable.refineCore.tableQuery.refetch,\n              isLoading: refineTable.refineCore.tableQuery.isFetching,\n              error: refineTable.refineCore.tableQuery.error,\n            }}>\n            {control}\n            <BaseTable\n              table={table}\n              refineTable={refineTable.refineCore}\n              {...props}\n            />\n          </TableConfigProvider>\n        </FilterHelpersProvider>\n      </TableInstanceProvider>\n    </RefineTableProvider>\n  );\n}\n\nexport { DataTable };\n"],"mappings":";;;;;;;;;;;;;;;AAwBA,SAAS,UAIP,EACA,YACA,SACA,SACA,kBACA,iBACA,UACA,SACA,iBACA,GAAG,SAC+C;CA+ClD,MAAM,cAAcA,SAAsB;EACxC,SA/CmB,cAAc;GACjC,MAAM,OAAO,CAAC,GAAI,WAAW,EAAE,CAAE;GAGjC,MAAM,eAAe,aACjB;IACE,OAAO,EAAE,UACP,qBAAC,OAAD;KAAK,WAAU;eAAf,CACG,WAAW,eACV,oBAAC,aAAD;MACE,OAAO,WAAW;MAClB,KAAK,IAAI;MACT,GAEJ,oBAAC,iBAAD;MAAiB,OAAO,WAAW;MAAO,KAAK,IAAI;MAAY,EAC3D;;IAER,QAAQ,WAAW,SAAS;IAC5B,IAAI;IACJ,MAAM;KACJ,eAAe;KACf,iBAAiB;KAClB;IACD,MAAM;IACP,GACD;AAEJ,OAAI,aACF,MAAK,KAAK,aAAa;AAEzB,UAAO;KACN,CAAC,SAAS,WAAW,CAgBD;EAErB,iBAhB8B,eACvB;GACL,kBAAkB,oBAAoB;GACtC;GACA,GAAG;GACH,cAAc;IACZ,GAAG,iBAAiB;IACpB;IACD;GACF,GACD;GAAC;GAAkB;GAAU;GAAiB;GAAgB,CAMtB;EACzC,CAAC;CAEF,MAAM,QAAsB;EAC1B,GAAG,YAAY;EACf,SAAS;GACP,GAAG,YAAY,WAAW;GAC1B,YAAY,YAAY;GACzB;EACF;CAED,MAAMC,sBAAoB,YAAoB,iBAC5CC,iBACE,YACA,YAAY,YAAY,SACxB,aACD;CAEH,MAAM,sBAAsB,cAC1B,+BAA+B,UAAU;CAE3C,MAAMC,2BAAyB,cAC7BC,sBAA4B,UAAU;AAExC,QACE,oBAAC,qBAAD;EAAkC;YAChC,oBAAC,uBAAD;GAA8B;aAC5B,oBAAC,uBAAD;IACe;IACb,kBAAkBH;IACE;IACpB,uBAAuBE;cACvB,qBAAC,qBAAD;KACE,eAAe;KACf,eAAe;MACb,eAAe,YAAY;MAC3B,SAAS,YAAY,WAAW,WAAW;MAC3C,WAAW,YAAY,WAAW,WAAW;MAC7C,OAAO,YAAY,WAAW,WAAW;MAC1C;eAPH,CAQG,SACD,oBAAC,WAAD;MACS;MACP,aAAa,YAAY;MACzB,GAAI;MACJ,EACkB;;IACA;GACF;EACJ"}