@lumeweb/portal-framework-ui 0.0.1 → 0.1.0

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

@@ -0,0 +1,106 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { getAvailableOperators, getDefaultOperatorForFieldType, init_useFilterOperators } 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 { init_contexts } from "./contexts/index.js";
+import { BaseTable, init_BaseTable } from "./BaseTable.js";
+import { TableAction, init_TableAction } from "./TableAction.js";
+import { TableActionMenu, init_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
+					})]
+				})
+			})
+		})
+	});
+}
+var init_DataTable = __esmMin(() => {
+	init_BaseTable();
+	init_TableAction();
+	init_TableActionMenu();
+	init_contexts();
+	init_useFilterOperators();
+});
+
+//#endregion
+init_DataTable();
+export { DataTable, init_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;KAAI,WAAU;gBACZ,WAAW,eACV,oBAAC;MACC,OAAO,WAAW;MAClB,KAAK,IAAI;OACT,EAEJ,oBAAC;MAAgB,OAAO,WAAW;MAAO,KAAK,IAAI;OAAY;MAC3D;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,CAAC;EAkBvB,iBAhB8B,eACvB;GACL,kBAAkB,oBAAoB;GACtC;GACA,GAAG;GACH,cAAc;IACZ,GAAG,iBAAiB;IACpB;IACD;GACF,GACD;GAAC;GAAkB;GAAU;GAAiB;GAAgB,CAC/D;EAMA,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;EAAiC;YAChC,oBAAC;GAA6B;aAC5B,oBAAC;IACc;IACb,kBAAkBH;IACE;IACpB,uBAAuBE;cACvB,qBAAC;KACC,eAAe;KACf,eAAe;MACb,eAAe,YAAY;MAC3B,SAAS,YAAY,WAAW,WAAW;MAC3C,WAAW,YAAY,WAAW,WAAW;MAC7C,OAAO,YAAY,WAAW,WAAW;MAC1C;gBACA,SACD,oBAAC;MACQ;MACP,aAAa,YAAY;MACzB,GAAI;OACJ;MACkB;KACA;IACF;GACJ;;;iBA/HqC;mBACnB;uBACQ;gBAMhC;0BAIqC"}

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

@@ -0,0 +1,203 @@
+import { TableActionItem } from "./TableAction.js";
+import { TableActionMenuItem } from "./TableActionMenu.js";
+import { FilterConfig, LogicalFilterOperator } from "./toolbarItems/filters/types.js";
+import { BaseTableProps } from "./BaseTable.js";
+import { BaseRecord, CrudFilter, CrudSorting, useTableProps, useTableReturnType } from "@refinedev/core";
+import { Table } from "@tanstack/react-table";
+
+//#region src/components/data-table/DataTable.types.d.ts
+declare enum ToolbarItemAlignment {
+  LEFT = "left",
+  RIGHT = "right",
+  CENTER = "center",
+}
+interface BaseToolbarItem {
+  /** Unique identifier for the toolbar item */
+  id: string;
+  /** Type of the toolbar item */
+  type: ToolbarItemType;
+  /** Optional order for positioning items in toolbar */
+  order?: number;
+  /** Alignment for this specific item */
+  alignment?: ToolbarItemAlignment;
+}
+declare enum ToolbarItemType {
+  ACTION = "action",
+  CUSTOM = "custom",
+  FILTER = "filter",
+  SEPARATOR = "separator",
+  FILTER_GROUP = "filter-group",
+}
+declare enum TableLayoutType {
+  TABLE = "table",
+  STACKED = "stacked",
+  AUTO = "auto",
+}
+interface ToolbarRefineContext<TData extends BaseRecord> {
+  /** The Refine table instance */
+  tableInstance: useTableReturnType<TData, any>;
+  /** Function to refetch data */
+  refetch: () => void;
+  /** Whether data is currently being fetched */
+  isLoading: boolean;
+  /** Any errors from data fetching */
+  error?: any;
+}
+interface TableContext<TData> {
+  /** Set table filters */
+  setFilters?: (filters: CrudFilter[]) => void;
+  /** Set table sorters */
+  setSorters?: (sorters: CrudSorting) => void;
+  /** Refine table query object */
+  tableQuery?: any;
+  /** Current filters state */
+  filters?: CrudFilter[];
+  /** Current sorters state */
+  sorters?: CrudSorting;
+}
+interface ToolbarItemComponentProps<TData extends BaseRecord> {
+  /** The table instance */
+  table: Table<TData>;
+  /** Current value of the item (for filters) */
+  value?: any;
+  /** Handler to update the item value (for filters) */
+  onChange?: (value: any) => void;
+  /** Optional Refine table contexts - only available when using DataTable with Refine */
+  refineContext?: ToolbarRefineContext<TData>;
+  /** Enhanced table contexts with filter management helpers */
+  context?: TableContext<TData>;
+}
+interface ToolbarActionItem<TData extends BaseRecord = any> extends BaseToolbarItem {
+  type: ToolbarItemType.ACTION;
+  /** Label for the action button */
+  label: string;
+  /** Icon for the action button */
+  icon?: React.ComponentType<{
+    className?: string;
+  }> | React.ReactNode;
+  /** Click handler for the action */
+  onClick: (props: ToolbarItemComponentProps<TData>) => void;
+  /** Whether the action is disabled */
+  disabled?: boolean;
+  /** Tooltip text for the action */
+  tooltip?: string;
+  /** Variant style for the button */
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+  /** Size of the button */
+  size?: "default" | "sm" | "lg" | "icon";
+  /** Class name for the button */
+  className?: string;
+}
+interface ToolbarFilterItem<TData extends BaseRecord> extends BaseToolbarItem {
+  type: ToolbarItemType.FILTER;
+  /** Label for the filter */
+  label: string;
+  /** Field name in the data model to filter on - defaults to id if not provided */
+  field?: keyof TData;
+  /** The filter component to render - either direct component or registered type string */
+  component?: React.ComponentType<ToolbarItemComponentProps<TData>> | string;
+  /** Initial value for the filter */
+  initialValue?: any;
+  /** Filter-specific configuration - now required and contains all necessary properties */
+  config: FilterConfig<TData>;
+}
+interface ToolbarSeparatorItem extends BaseToolbarItem {
+  type: ToolbarItemType.SEPARATOR;
+}
+interface ToolbarFilterGroupItem<TData extends BaseRecord = any> extends BaseToolbarItem {
+  type: ToolbarItemType.FILTER_GROUP;
+  /** Label for the filter group */
+  label: string;
+  /** Icon for the filter group (defaults to Filter icon) */
+  icon?: React.ReactNode;
+  /** Filter items contained within this group */
+  items: ToolbarFilterItem<TData>[];
+  /** Whether the group is initially expanded */
+  initiallyExpanded?: boolean;
+  /** Layout direction for filter items */
+  layout?: "horizontal" | "vertical";
+  /** Optional custom class name for the group container */
+  className?: string;
+  /** Whether to use dropdown style expansion instead of inline */
+  dropdownStyle?: boolean;
+}
+interface ToolbarCustomItem<TData extends BaseRecord = any> extends BaseToolbarItem {
+  type: ToolbarItemType.CUSTOM;
+  /** Custom component to render */
+  component: React.ComponentType<ToolbarItemComponentProps<TData>>;
+  /** Optional class name for the container */
+  className?: string;
+}
+type ExtendedToolbarItem<TData extends BaseRecord> = ToolbarItem<TData> | (BaseToolbarItem & {
+  component?: React.ComponentType<ToolbarItemComponentProps<TData>>;
+});
+type ToolbarItem<TData extends BaseRecord> = ToolbarActionItem<TData> | ToolbarFilterItem<TData> | ToolbarSeparatorItem | ToolbarFilterGroupItem<TData> | ToolbarCustomItem<TData>;
+interface ToolbarFilterComponentProps<TData extends BaseRecord> extends ToolbarItemComponentProps<TData> {
+  /** Column information if the filter is tied to a specific column */
+  column?: keyof TData;
+  /** Filter configuration */
+  config?: FilterConfig<TData>;
+  /** Label from the filter item (not config) */
+  itemLabel?: string;
+  /** Function to get available operators for a field */
+  getAvailableOperators?: (field?: string) => LogicalFilterOperator[];
+}
+interface ToolbarConfig<TData extends BaseRecord> {
+  /** Items to display in the toolbar */
+  items: ToolbarItem<TData>[];
+  /** Whether the toolbar should be sticky */
+  sticky?: boolean;
+  /** Custom class name for the toolbar container */
+  className?: string;
+  /** Default alignment for all toolbar items */
+  defaultAlignment?: ToolbarItemAlignment;
+  /** Whether to automatically distribute space between left and right aligned items */
+  justifyBetween?: boolean;
+  /** Mobile breakpoint configuration */
+  mobileBreakpoint?: string;
+}
+interface DataTableActionMenuProps<TData> {
+  items: TableActionMenuItem<TData>[];
+  label?: string;
+  /**
+   * Action items to display as individual buttons
+   */
+  actionItems?: TableActionItem<TData>[];
+}
+interface DataTableProps<TData extends BaseRecord = BaseRecord, TError = unknown, TSearchVariables = unknown> extends Omit<BaseTableProps<TData>, "actionColumn" | "data" | "tableOptions"> {
+  /**
+   * Configuration for action menu items
+   */
+  actionMenu?: DataTableActionMenuProps<TData>;
+  /**
+   * Configuration for toolbar items
+   */
+  toolbar?: ToolbarConfig<TData>;
+  /**
+   * The dataProvider name if not using the default one
+   * @default "default"
+   */
+  dataProviderName?: string;
+  /**
+   * Configuration options for refine's useTable hook
+   */
+  refineCoreProps?: Omit<useTableProps<TData, TError, TSearchVariables>, "columns" | "dataProviderName" | "resource">;
+  /**
+   * The resource name for API data interactions
+   * @example "posts", "users", "products"
+   */
+  resource: string;
+  /**
+   * Interval (in milliseconds) for automatic data refetching
+   * This value gets passed to React Query through refineCoreProps
+   */
+  refetchInterval?: number;
+  /**
+   * Custom control elements to render above the table, typically used for DataTableController
+   * or other custom control components that need access to table controls
+   */
+  control?: React.ReactNode;
+}
+//#endregion
+export { BaseToolbarItem, DataTableActionMenuProps, DataTableProps, ExtendedToolbarItem, TableContext, TableLayoutType, ToolbarActionItem, ToolbarConfig, ToolbarCustomItem, ToolbarFilterComponentProps, ToolbarFilterGroupItem, ToolbarFilterItem, ToolbarItem, ToolbarItemAlignment, ToolbarItemComponentProps, ToolbarItemType, ToolbarRefineContext, ToolbarSeparatorItem };
+//# sourceMappingURL=DataTable.types.d.ts.map

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

@@ -0,0 +1,31 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+
+//#region src/components/data-table/DataTable.types.ts
+var ToolbarItemAlignment, ToolbarItemType, TableLayoutType;
+var init_DataTable_types = __esmMin(() => {
+	ToolbarItemAlignment = /* @__PURE__ */ function(ToolbarItemAlignment$1) {
+		ToolbarItemAlignment$1["LEFT"] = "left";
+		ToolbarItemAlignment$1["RIGHT"] = "right";
+		ToolbarItemAlignment$1["CENTER"] = "center";
+		return ToolbarItemAlignment$1;
+	}({});
+	ToolbarItemType = /* @__PURE__ */ function(ToolbarItemType$1) {
+		ToolbarItemType$1["ACTION"] = "action";
+		ToolbarItemType$1["CUSTOM"] = "custom";
+		ToolbarItemType$1["FILTER"] = "filter";
+		ToolbarItemType$1["SEPARATOR"] = "separator";
+		ToolbarItemType$1["FILTER_GROUP"] = "filter-group";
+		return ToolbarItemType$1;
+	}({});
+	TableLayoutType = /* @__PURE__ */ function(TableLayoutType$1) {
+		TableLayoutType$1["TABLE"] = "table";
+		TableLayoutType$1["STACKED"] = "stacked";
+		TableLayoutType$1["AUTO"] = "auto";
+		return TableLayoutType$1;
+	}({});
+});
+
+//#endregion
+init_DataTable_types();
+export { TableLayoutType, ToolbarItemAlignment, ToolbarItemType, init_DataTable_types };
+//# sourceMappingURL=DataTable.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.types.js","names":[],"sources":["../../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import {\n  useTableReturnType,\n  type BaseRecord,\n  type CrudFilter,\n  type CrudSorting,\n  type useTableProps as useTablePropsCore,\n} from \"@refinedev/core\";\nimport { Table } from \"@tanstack/react-table\";\nimport { UseTableReturnType } from \"@refinedev/react-table\";\n\nimport type { BaseTableProps } from \"./BaseTable\";\n\nimport { TableActionItem } from \"./TableAction\";\nimport { TableActionMenuItem } from \"./TableActionMenu\";\nimport {\n  FilterConfig,\n  LogicalFilterOperator,\n} from \"./toolbarItems/filters/types\";\n\n// Alignment options for toolbar items\nexport enum ToolbarItemAlignment {\n  LEFT = \"left\",\n  RIGHT = \"right\",\n  CENTER = \"center\",\n}\n\n// Base toolbar item interface\nexport interface BaseToolbarItem {\n  /** Unique identifier for the toolbar item */\n  id: string;\n  /** Type of the toolbar item */\n  type: ToolbarItemType;\n  /** Optional order for positioning items in toolbar */\n  order?: number;\n  /** Alignment for this specific item */\n  alignment?: ToolbarItemAlignment;\n}\n\n// Toolbar item types\nexport enum ToolbarItemType {\n  ACTION = \"action\",\n  CUSTOM = \"custom\",\n  FILTER = \"filter\",\n  SEPARATOR = \"separator\",\n  FILTER_GROUP = \"filter-group\",\n}\n\n// Table layout types\nexport enum TableLayoutType {\n  TABLE = \"table\",\n  STACKED = \"stacked\",\n  AUTO = \"auto\",\n}\n\n// Refine contexts for toolbar items\nexport interface ToolbarRefineContext<TData extends BaseRecord> {\n  /** The Refine table instance */\n  tableInstance: useTableReturnType<TData, any>;\n  /** Function to refetch data */\n  refetch: () => void;\n  /** Whether data is currently being fetched */\n  isLoading: boolean;\n  /** Any errors from data fetching */\n  error?: any;\n}\n\n// Table contexts for enhanced functionality\nexport interface TableContext<TData> {\n  /** Set table filters */\n  setFilters?: (filters: CrudFilter[]) => void;\n  /** Set table sorters */\n  setSorters?: (sorters: CrudSorting) => void;\n  /** Refine table query object */\n  tableQuery?: any;\n  /** Current filters state */\n  filters?: CrudFilter[];\n  /** Current sorters state */\n  sorters?: CrudSorting;\n}\n\n// Base props for all toolbar item components\nexport interface ToolbarItemComponentProps<TData extends BaseRecord> {\n  /** The table instance */\n  table: Table<TData>;\n  /** Current value of the item (for filters) */\n  value?: any;\n  /** Handler to update the item value (for filters) */\n  onChange?: (value: any) => void;\n  /** Optional Refine table contexts - only available when using DataTable with Refine */\n  refineContext?: ToolbarRefineContext<TData>;\n  /** Enhanced table contexts with filter management helpers */\n  context?: TableContext<TData>;\n}\n\n// Action item types for toolbar buttons\nexport interface ToolbarActionItem<TData extends BaseRecord = any>\n  extends BaseToolbarItem {\n  type: ToolbarItemType.ACTION;\n  /** Label for the action button */\n  label: string;\n  /** Icon for the action button */\n  icon?: React.ComponentType<{ className?: string }> | React.ReactNode;\n  /** Click handler for the action */\n  onClick: (props: ToolbarItemComponentProps<TData>) => void;\n  /** Whether the action is disabled */\n  disabled?: boolean;\n  /** Tooltip text for the action */\n  tooltip?: string;\n  /** Variant style for the button */\n  variant?:\n    | \"default\"\n    | \"destructive\"\n    | \"outline\"\n    | \"secondary\"\n    | \"ghost\"\n    | \"link\";\n  /** Size of the button */\n  size?: \"default\" | \"sm\" | \"lg\" | \"icon\";\n  /** Class name for the button */\n  className?: string;\n}\n\n// Filter item types\nexport interface ToolbarFilterItem<TData extends BaseRecord>\n  extends BaseToolbarItem {\n  type: ToolbarItemType.FILTER;\n  /** Label for the filter */\n  label: string;\n  /** Field name in the data model to filter on - defaults to id if not provided */\n  field?: keyof TData;\n  /** The filter component to render - either direct component or registered type string */\n  component?: React.ComponentType<ToolbarItemComponentProps<TData>> | string;\n  /** Initial value for the filter */\n  initialValue?: any;\n  /** Filter-specific configuration - now required and contains all necessary properties */\n  config: FilterConfig<TData>;\n}\n\n// Separator item type\nexport interface ToolbarSeparatorItem extends BaseToolbarItem {\n  type: ToolbarItemType.SEPARATOR;\n}\n\n// Filter group item type\nexport interface ToolbarFilterGroupItem<TData extends BaseRecord = any>\n  extends BaseToolbarItem {\n  type: ToolbarItemType.FILTER_GROUP;\n  /** Label for the filter group */\n  label: string;\n  /** Icon for the filter group (defaults to Filter icon) */\n  icon?: React.ReactNode;\n  /** Filter items contained within this group */\n  items: ToolbarFilterItem<TData>[];\n  /** Whether the group is initially expanded */\n  initiallyExpanded?: boolean;\n  /** Layout direction for filter items */\n  layout?: \"horizontal\" | \"vertical\";\n  /** Optional custom class name for the group container */\n  className?: string;\n  /** Whether to use dropdown style expansion instead of inline */\n  dropdownStyle?: boolean;\n}\n\n// Custom item type for toolbar\nexport interface ToolbarCustomItem<TData extends BaseRecord = any>\n  extends BaseToolbarItem {\n  type: ToolbarItemType.CUSTOM;\n  /** Custom component to render */\n  component: React.ComponentType<ToolbarItemComponentProps<TData>>;\n  /** Optional class name for the container */\n  className?: string;\n}\n\n// Extended toolbar item type\nexport type ExtendedToolbarItem<TData extends BaseRecord> =\n  | ToolbarItem<TData>\n  | (BaseToolbarItem & {\n      component?: React.ComponentType<ToolbarItemComponentProps<TData>>;\n    });\n\n// Union type for all toolbar items\nexport type ToolbarItem<TData extends BaseRecord> =\n  | ToolbarActionItem<TData>\n  | ToolbarFilterItem<TData>\n  | ToolbarSeparatorItem\n  | ToolbarFilterGroupItem<TData>\n  | ToolbarCustomItem<TData>;\n\n// Props for filter components (extends base interface)\nexport interface ToolbarFilterComponentProps<TData extends BaseRecord>\n  extends ToolbarItemComponentProps<TData> {\n  /** Column information if the filter is tied to a specific column */\n  column?: keyof TData;\n  /** Filter configuration */\n  config?: FilterConfig<TData>;\n  /** Label from the filter item (not config) */\n  itemLabel?: string;\n  /** Function to get available operators for a field */\n  getAvailableOperators?: (field?: string) => LogicalFilterOperator[];\n}\n\n// Toolbar configuration types\nexport interface ToolbarConfig<TData extends BaseRecord> {\n  /** Items to display in the toolbar */\n  items: ToolbarItem<TData>[];\n  /** Whether the toolbar should be sticky */\n  sticky?: boolean;\n  /** Custom class name for the toolbar container */\n  className?: string;\n  /** Default alignment for all toolbar items */\n  defaultAlignment?: ToolbarItemAlignment;\n  /** Whether to automatically distribute space between left and right aligned items */\n  justifyBetween?: boolean;\n  /** Mobile breakpoint configuration */\n  mobileBreakpoint?: string;\n}\n\nexport interface DataTableActionMenuProps<TData> {\n  items: TableActionMenuItem<TData>[];\n  label?: string;\n  /**\n   * Action items to display as individual buttons\n   */\n  actionItems?: TableActionItem<TData>[];\n}\n\nexport interface DataTableProps<\n  TData extends BaseRecord = BaseRecord,\n  TError = unknown,\n  TSearchVariables = unknown,\n> extends Omit<\n    BaseTableProps<TData>,\n    \"actionColumn\" | \"data\" | \"tableOptions\"\n  > {\n  /**\n   * Configuration for action menu items\n   */\n  actionMenu?: DataTableActionMenuProps<TData>;\n  /**\n   * Configuration for toolbar items\n   */\n  toolbar?: ToolbarConfig<TData>;\n  /**\n   * The dataProvider name if not using the default one\n   * @default \"default\"\n   */\n  dataProviderName?: string;\n  /**\n   * Configuration options for refine's useTable hook\n   */\n  refineCoreProps?: Omit<\n    useTablePropsCore<TData, TError, TSearchVariables>,\n    \"columns\" | \"dataProviderName\" | \"resource\"\n  >;\n  /**\n   * The resource name for API data interactions\n   * @example \"posts\", \"users\", \"products\"\n   */\n  resource: string;\n  /**\n   * Interval (in milliseconds) for automatic data refetching\n   * This value gets passed to React Query through refineCoreProps\n   */\n  refetchInterval?: number;\n  /**\n   * Custom control elements to render above the table, typically used for DataTableController\n   * or other custom control components that need access to table controls\n   */\n  control?: React.ReactNode;\n}\n"],"mappings":";;;;;CAoBY,wEAAL;AACL;AACA;AACA;;;CAgBU,8DAAL;AACL;AACA;AACA;AACA;AACA;;;CAIU,8DAAL;AACL;AACA;AACA"}

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

@@ -0,0 +1,19 @@
+import { BaseRecord } from "@refinedev/core";
+
+//#region src/components/data-table/DataTableController.d.ts
+interface TableControls<TData extends BaseRecord = BaseRecord> {
+  setFilters: (filters: any[]) => void;
+  setSorters: (sorters: any[]) => void;
+  refetch: () => void;
+  getCurrentFilters: () => any[];
+  getCurrentSorters: () => any[];
+}
+interface DataTableControllerProps<TData extends BaseRecord = BaseRecord> {
+  onControlsReady?: (controls: TableControls<TData>) => void;
+}
+declare function DataTableController<TData extends BaseRecord = BaseRecord>({
+  onControlsReady
+}: DataTableControllerProps<TData>): null;
+//#endregion
+export { DataTableController, DataTableControllerProps, TableControls };
+//# sourceMappingURL=DataTableController.d.ts.map

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

@@ -0,0 +1,36 @@
+"use client";
+
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { useRefineTable } from "./contexts/RefineTable.js";
+import { init_contexts } from "./contexts/index.js";
+import { useEffect } from "react";
+
+//#region src/components/data-table/DataTableController.tsx
+function DataTableController({ onControlsReady }) {
+	const { setFilters, setSorters, tableQuery, filters, sorters } = useRefineTable();
+	useEffect(() => {
+		if (setFilters && setSorters && tableQuery?.refetch && onControlsReady) onControlsReady({
+			setFilters,
+			setSorters,
+			refetch: tableQuery.refetch,
+			getCurrentFilters: () => filters || [],
+			getCurrentSorters: () => sorters || []
+		});
+	}, [
+		setFilters,
+		setSorters,
+		tableQuery,
+		filters,
+		sorters,
+		onControlsReady
+	]);
+	return null;
+}
+var init_DataTableController = __esmMin(() => {
+	init_contexts();
+});
+
+//#endregion
+init_DataTableController();
+export { DataTableController, init_DataTableController };
+//# sourceMappingURL=DataTableController.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableController.js","names":[],"sources":["../../../../src/components/data-table/DataTableController.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect } from \"react\";\nimport { useRefineTable } from \"./contexts\";\nimport type { BaseRecord } from \"@refinedev/core\";\n\nexport interface TableControls<TData extends BaseRecord = BaseRecord> {\n  setFilters: (filters: any[]) => void;\n  setSorters: (sorters: any[]) => void;\n  refetch: () => void;\n  getCurrentFilters: () => any[];\n  getCurrentSorters: () => any[];\n}\n\nexport interface DataTableControllerProps<TData extends BaseRecord = BaseRecord> {\n  onControlsReady?: (controls: TableControls<TData>) => void;\n}\n\nexport function DataTableController<TData extends BaseRecord = BaseRecord>({\n  onControlsReady,\n}: DataTableControllerProps<TData>) {\n  const { setFilters, setSorters, tableQuery, filters, sorters } = useRefineTable<TData>();\n\n  useEffect(() => {\n    if (setFilters && setSorters && tableQuery?.refetch && onControlsReady) {\n      const controls: TableControls<TData> = {\n        setFilters,\n        setSorters,\n        refetch: tableQuery.refetch,\n        getCurrentFilters: () => filters || [],\n        getCurrentSorters: () => sorters || [],\n      };\n      \n      onControlsReady(controls);\n    }\n  }, [setFilters, setSorters, tableQuery, filters, sorters, onControlsReady]);\n\n  return null;\n}\n"],"mappings":";;;;;;;;AAkBA,SAAgB,oBAA2D,EACzE,mBACkC;CAClC,MAAM,EAAE,YAAY,YAAY,YAAY,SAAS,YAAY,gBAAuB;AAExF,iBAAgB;AACd,MAAI,cAAc,cAAc,YAAY,WAAW,gBASrD,iBARuC;GACrC;GACA;GACA,SAAS,WAAW;GACpB,yBAAyB,WAAW,EAAE;GACtC,yBAAyB,WAAW,EAAE;GACvC,CAEwB;IAE1B;EAAC;EAAY;EAAY;EAAY;EAAS;EAAS;EAAgB,CAAC;AAE3E,QAAO;;;gBAlCmC"}

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

@@ -0,0 +1,7 @@
+import { BaseRecord } from "@refinedev/core";
+
+//#region src/components/data-table/DefaultPagination.d.ts
+declare function DefaultPagination<TData extends BaseRecord>(): any;
+//#endregion
+export { DefaultPagination };
+//# sourceMappingURL=DefaultPagination.d.ts.map

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

@@ -0,0 +1,67 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { useTableInstance } from "./contexts/TableInstance.js";
+import { init_contexts } from "./contexts/index.js";
+import { Button } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+
+//#region src/components/data-table/DefaultPagination.tsx
+function DefaultPagination() {
+	const { table } = useTableInstance();
+	const pageIndex = table.getState().pagination.pageIndex;
+	const pageCount = table.getPageCount();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-center gap-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					"aria-label": "First page",
+					disabled: !table.getCanPreviousPage(),
+					onClick: () => table.setPageIndex(0),
+					size: "sm",
+					variant: "outline",
+					children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
+				}), /* @__PURE__ */ jsx(Button, {
+					"aria-label": "Previous page",
+					disabled: !table.getCanPreviousPage(),
+					onClick: () => table.previousPage(),
+					size: "sm",
+					variant: "outline",
+					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium",
+				children: pageCount > 0 ? `Page ${pageIndex + 1} of ${pageCount}` : "No pages"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					"aria-label": "Next page",
+					disabled: !table.getCanNextPage(),
+					onClick: () => table.nextPage(),
+					size: "sm",
+					variant: "outline",
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+				}), /* @__PURE__ */ jsx(Button, {
+					"aria-label": "Last page",
+					disabled: !table.getCanNextPage(),
+					onClick: () => table.setPageIndex(Math.max(0, pageCount - 1)),
+					size: "sm",
+					variant: "outline",
+					children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })
+				})]
+			})
+		]
+	});
+}
+var init_DefaultPagination = __esmMin(() => {
+	init_contexts();
+});
+
+//#endregion
+init_DefaultPagination();
+export { DefaultPagination, init_DefaultPagination };
+//# sourceMappingURL=DefaultPagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultPagination.js","names":[],"sources":["../../../../src/components/data-table/DefaultPagination.tsx"],"sourcesContent":["import { Button } from \"@lumeweb/portal-framework-ui-core\";\nimport { BaseRecord } from \"@refinedev/core\";\nimport {\n  ChevronLeft,\n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n} from \"lucide-react\";\nimport React from \"react\";\n\nimport { useTableInstance } from \"./contexts\";\n\nfunction DefaultPagination<TData extends BaseRecord>() {\n  const { table } = useTableInstance<TData>();\n  const pageIndex = table.getState().pagination.pageIndex;\n  const pageCount = table.getPageCount();\n\n  return (\n    <div className=\"flex items-center justify-center gap-4\">\n      <div className=\"flex items-center gap-2\">\n        <Button\n          aria-label=\"First page\"\n          disabled={!table.getCanPreviousPage()}\n          onClick={() => table.setPageIndex(0)}\n          size=\"sm\"\n          variant=\"outline\">\n          <ChevronsLeft className=\"h-4 w-4\" />\n        </Button>\n        <Button\n          aria-label=\"Previous page\"\n          disabled={!table.getCanPreviousPage()}\n          onClick={() => table.previousPage()}\n          size=\"sm\"\n          variant=\"outline\">\n          <ChevronLeft className=\"h-4 w-4\" />\n        </Button>\n      </div>\n\n      <span className=\"text-sm font-medium\">\n        {pageCount > 0 ? `Page ${pageIndex + 1} of ${pageCount}` : \"No pages\"}\n      </span>\n\n      <div className=\"flex items-center gap-2\">\n        <Button\n          aria-label=\"Next page\"\n          disabled={!table.getCanNextPage()}\n          onClick={() => table.nextPage()}\n          size=\"sm\"\n          variant=\"outline\">\n          <ChevronRight className=\"h-4 w-4\" />\n        </Button>\n        <Button\n          aria-label=\"Last page\"\n          disabled={!table.getCanNextPage()}\n          onClick={() => table.setPageIndex(Math.max(0, pageCount - 1))}\n          size=\"sm\"\n          variant=\"outline\">\n          <ChevronsRight className=\"h-4 w-4\" />\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nexport { DefaultPagination };\n"],"mappings":";;;;;;;;;AAYA,SAAS,oBAA8C;CACrD,MAAM,EAAE,UAAU,kBAAyB;CAC3C,MAAM,YAAY,MAAM,UAAU,CAAC,WAAW;CAC9C,MAAM,YAAY,MAAM,cAAc;AAEtC,QACE,qBAAC;EAAI,WAAU;;GACb,qBAAC;IAAI,WAAU;eACb,oBAAC;KACC,cAAW;KACX,UAAU,CAAC,MAAM,oBAAoB;KACrC,eAAe,MAAM,aAAa,EAAE;KACpC,MAAK;KACL,SAAQ;eACR,oBAAC,gBAAa,WAAU,YAAY;MAC7B,EACT,oBAAC;KACC,cAAW;KACX,UAAU,CAAC,MAAM,oBAAoB;KACrC,eAAe,MAAM,cAAc;KACnC,MAAK;KACL,SAAQ;eACR,oBAAC,eAAY,WAAU,YAAY;MAC5B;KACL;GAEN,oBAAC;IAAK,WAAU;cACb,YAAY,IAAI,QAAQ,YAAY,EAAE,MAAM,cAAc;KACtD;GAEP,qBAAC;IAAI,WAAU;eACb,oBAAC;KACC,cAAW;KACX,UAAU,CAAC,MAAM,gBAAgB;KACjC,eAAe,MAAM,UAAU;KAC/B,MAAK;KACL,SAAQ;eACR,oBAAC,gBAAa,WAAU,YAAY;MAC7B,EACT,oBAAC;KACC,cAAW;KACX,UAAU,CAAC,MAAM,gBAAgB;KACjC,eAAe,MAAM,aAAa,KAAK,IAAI,GAAG,YAAY,EAAE,CAAC;KAC7D,MAAK;KACL,SAAQ;eACR,oBAAC,iBAAc,WAAU,YAAY;MAC9B;KACL;;GACF;;;gBAlDoC"}

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

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

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

@@ -0,0 +1,76 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { init_useTableHandlers, useMobileColumnHiding, useTableCellHandlers, useTableHeaderCellHandlers, useTableRowHandlers } from "./useTableHandlers.js";
+import { init_tableOptions, normalizeTableOptions } from "./tableOptions.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@lumeweb/portal-framework-ui-core";
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { flexRender } from "@tanstack/react-table";
+
+//#region src/components/data-table/DefaultTableLayout.tsx
+function DefaultTableLayout({ table, getCellProps, getRowProps, onRowClick, className, emptyState, emptyStateMessage, footer, header, isLoading, loadingState, loadingStateMessage, pagination, responsive, hideColumnsOnMobile }) {
+	const getTableRowProps = useTableRowHandlers({
+		onRowClick,
+		getRowProps
+	});
+	const getTableCellProps = useTableCellHandlers({ getCellProps });
+	const getTableHeaderCellProps = useTableHeaderCellHandlers();
+	const hiddenColumns = useMobileColumnHiding({
+		responsive,
+		hideColumnsOnMobile
+	});
+	const normalizedOptions = useMemo(() => normalizeTableOptions(pagination, emptyState, emptyStateMessage, loadingState, loadingStateMessage, table), [
+		pagination,
+		emptyState,
+		emptyStateMessage,
+		loadingState,
+		loadingStateMessage,
+		table
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [
+			header && /* @__PURE__ */ jsx("div", {
+				className: "mb-4",
+				children: header
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "rounded-md border",
+				children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header$1) => {
+					if (hiddenColumns.has(header$1.id)) return null;
+					return /* @__PURE__ */ jsx(TableHead, {
+						...getTableHeaderCellProps(header$1),
+						children: header$1.isPlaceholder ? null : flexRender(header$1.column.columnDef.header, header$1.getContext())
+					}, header$1.id);
+				}) }, headerGroup.id)) }), /* @__PURE__ */ jsx(TableBody, { children: isLoading ? normalizedOptions.loadingState : table.getRowModel().rows.length > 0 ? table.getRowModel().rows.map((row) => {
+					return /* @__PURE__ */ jsx(TableRow, {
+						...getTableRowProps(row),
+						children: row.getVisibleCells().map((cell) => {
+							if (hiddenColumns.has(cell.column.id)) return null;
+							return /* @__PURE__ */ jsx(TableCell, {
+								...getTableCellProps(cell),
+								children: flexRender(cell.column.columnDef.cell, cell.getContext())
+							}, cell.id);
+						})
+					}, row.id);
+				}) : normalizedOptions.emptyState })] })
+			}),
+			normalizedOptions.pagination.enabled && /* @__PURE__ */ jsx("div", {
+				className: "mt-4",
+				children: normalizedOptions.pagination.component
+			}),
+			footer && /* @__PURE__ */ jsx("div", {
+				className: "mt-4",
+				children: footer
+			})
+		]
+	});
+}
+var init_DefaultTableLayout = __esmMin(() => {
+	init_useTableHandlers();
+	init_tableOptions();
+});
+
+//#endregion
+init_DefaultTableLayout();
+export { DefaultTableLayout, init_DefaultTableLayout };
+//# sourceMappingURL=DefaultTableLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultTableLayout.js","names":["UITable","header"],"sources":["../../../../src/components/data-table/DefaultTableLayout.tsx"],"sourcesContent":["import {\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n  Table as UITable,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport { flexRender, Table } from \"@tanstack/react-table\";\nimport React, { useMemo } from \"react\";\nimport { BaseRecord } from \"@refinedev/core\";\nimport {\n  useTableRowHandlers,\n  useTableCellHandlers,\n  useMobileColumnHiding,\n  useTableHeaderCellHandlers,\n} from \"./useTableHandlers\";\nimport { BaseTableLayoutPropsBase } from \"./BaseTable\";\nimport { normalizeTableOptions } from \"./tableOptions\";\n\ninterface DefaultTableLayoutProps<TData extends BaseRecord>\n  extends BaseTableLayoutPropsBase<TData> {\n  emptyStateMessage?: string;\n  loadingStateMessage?: string;\n}\n\nfunction DefaultTableLayout<TData extends BaseRecord>({\n  table,\n  getCellProps,\n  getRowProps,\n  onRowClick,\n  className,\n  emptyState,\n  emptyStateMessage,\n  footer,\n  header,\n  isLoading,\n  loadingState,\n  loadingStateMessage,\n  pagination,\n  responsive,\n  hideColumnsOnMobile,\n}: DefaultTableLayoutProps<TData>) {\n  // Use the shared hooks for row and cell handling\n  const getTableRowProps = useTableRowHandlers({ onRowClick, getRowProps });\n  const getTableCellProps = useTableCellHandlers({ getCellProps });\n  const getTableHeaderCellProps = useTableHeaderCellHandlers();\n  \n  // Get hidden columns at top level to avoid hooks violation\n  const hiddenColumns = useMobileColumnHiding({\n    responsive,\n    hideColumnsOnMobile,\n  });\n\n  // Normalize table options\n  const normalizedOptions = useMemo(\n    () =>\n      normalizeTableOptions(\n        pagination,\n        emptyState,\n        emptyStateMessage,\n        loadingState,\n        loadingStateMessage,\n        table,\n      ),\n    [\n      pagination,\n      emptyState,\n      emptyStateMessage,\n      loadingState,\n      loadingStateMessage,\n      table,\n    ]\n  );\n\n  return (\n    <div className={className}>\n      {header && <div className=\"mb-4\">{header}</div>}\n      <div className=\"rounded-md border\">\n        <UITable>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  // Check if column should be hidden using the precomputed set\n                  if (hiddenColumns.has(header.id)) {\n                    return null;\n                  }\n\n                  const headerProps = getTableHeaderCellProps(header);\n\n                  return (\n                    <TableHead key={header.id} {...headerProps}>\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {isLoading\n              ? normalizedOptions.loadingState\n              : table.getRowModel().rows.length > 0\n                ? table.getRowModel().rows.map((row) => {\n                    // Use the shared hook for row props\n                    const rowProps = getTableRowProps(row);\n\n                    return (\n                      <TableRow key={row.id} {...rowProps}>\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                          // Use the shared hook for cell props\n                          const cellProps = getTableCellProps(cell);\n\n                          return (\n                            <TableCell key={cell.id} {...cellProps}>\n                              {flexRender(\n                                cell.column.columnDef.cell,\n                                cell.getContext(),\n                              )}\n                            </TableCell>\n                          );\n                        })}\n                      </TableRow>\n                    );\n                  })\n                : normalizedOptions.emptyState}\n          </TableBody>\n        </UITable>\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 { DefaultTableLayout };\n"],"mappings":";;;;;;;;;AA0BA,SAAS,mBAA6C,EACpD,OACA,cACA,aACA,YACA,WACA,YACA,mBACA,QACA,QACA,WACA,cACA,qBACA,YACA,YACA,uBACiC;CAEjC,MAAM,mBAAmB,oBAAoB;EAAE;EAAY;EAAa,CAAC;CACzE,MAAM,oBAAoB,qBAAqB,EAAE,cAAc,CAAC;CAChE,MAAM,0BAA0B,4BAA4B;CAG5D,MAAM,gBAAgB,sBAAsB;EAC1C;EACA;EACD,CAAC;CAGF,MAAM,oBAAoB,cAEtB,sBACE,YACA,YACA,mBACA,cACA,qBACA,MACD,EACH;EACE;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAED,QACE,qBAAC;EAAe;;GACb,UAAU,oBAAC;IAAI,WAAU;cAAQ;KAAa;GAC/C,oBAAC;IAAI,WAAU;cACb,qBAACA,oBACC,oBAAC,yBACE,MAAM,iBAAiB,CAAC,KAAK,gBAC5B,oBAAC,sBACE,YAAY,QAAQ,KAAK,aAAW;AAEnC,SAAI,cAAc,IAAIC,SAAO,GAAG,CAC9B,QAAO;AAKT,YACE,oBAAC;MAA0B,GAHT,wBAAwBA,SAAO;gBAI9CA,SAAO,gBACJ,OACA,WACEA,SAAO,OAAO,UAAU,QACxBA,SAAO,YAAY,CACpB;QANSA,SAAO,GAOX;MAEd,IAnBW,YAAY,GAoBhB,CACX,GACU,EACd,oBAAC,uBACE,YACG,kBAAkB,eAClB,MAAM,aAAa,CAAC,KAAK,SAAS,IAChC,MAAM,aAAa,CAAC,KAAK,KAAK,QAAQ;AAIpC,YACE,oBAAC;MAAsB,GAHR,iBAAiB,IAAI;gBAIjC,IAAI,iBAAiB,CAAC,KAAK,SAAS;AAEnC,WAAI,cAAc,IAAI,KAAK,OAAO,GAAG,CACnC,QAAO;AAMT,cACE,oBAAC;QAAwB,GAHT,kBAAkB,KAAK;kBAIpC,WACC,KAAK,OAAO,UAAU,MACtB,KAAK,YAAY,CAClB;UAJa,KAAK,GAKT;QAEd;QAlBW,IAAI,GAmBR;MAEb,GACF,kBAAkB,aACd,IACJ;KACN;GACL,kBAAkB,WAAW,WAC5B,oBAAC;IAAI,WAAU;cAAQ,kBAAkB,WAAW;KAAgB;GAErE,UAAU,oBAAC;IAAI,WAAU;cAAQ;KAAa;;GAC3C;;;wBAhIkB;oBAE2B"}