@lumeweb/portal-framework-ui 0.0.1 → 0.1.1

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

@@ -0,0 +1,26 @@
+import { Button } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/data-table/TableAction.tsx
+function TableAction({ items, row }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-1",
+		children: items.map((item, index) => /* @__PURE__ */ jsx(Button, {
+			"aria-label": item.tooltip || item.label,
+			className: "h-8 w-8 p-0",
+			disabled: typeof item.disabled === "function" ? item.disabled(row) : item.disabled,
+			onClick: (e) => {
+				e.stopPropagation();
+				item.onClick(row);
+			},
+			title: item.tooltip || item.label,
+			variant: "ghost",
+			children: item.icon
+		}, `action-${index}`))
+	});
+}
+
+//#endregion
+export { TableAction };
+//# sourceMappingURL=TableAction.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableAction.js","names":[],"sources":["../../../../src/components/data-table/TableAction.tsx"],"sourcesContent":["import { Button } from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\n\nexport interface TableActionItem<TData> {\n  disabled?: boolean | ((row: TData) => boolean);\n  icon: React.ReactNode;\n  label?: string;\n  onClick: (row: TData) => void;\n  tooltip?: string;\n}\n\ninterface TableActionProps<TData> {\n  items: TableActionItem<TData>[];\n  row: TData;\n}\n\nfunction TableAction<TData>({ items, row }: TableActionProps<TData>) {\n  return (\n    <div className=\"flex items-center gap-1\">\n      {items.map((item, index) => (\n        <Button\n          aria-label={item.tooltip || item.label}\n          className=\"h-8 w-8 p-0\"\n          disabled={typeof item.disabled === 'function' ? item.disabled(row) : item.disabled}\n          key={`action-${index}`}\n          onClick={(e) => {\n            e.stopPropagation();\n            item.onClick(row);\n          }}\n          title={item.tooltip || item.label}\n          variant=\"ghost\">\n          {item.icon}\n        </Button>\n      ))}\n    </div>\n  );\n}\n\nexport { TableAction };\n"],"mappings":";;;;;AAgBA,SAAS,YAAmB,EAAE,OAAO,OAAgC;AACnE,QACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,MAAM,UAChB,oBAAC,QAAD;GACE,cAAY,KAAK,WAAW,KAAK;GACjC,WAAU;GACV,UAAU,OAAO,KAAK,aAAa,aAAa,KAAK,SAAS,IAAI,GAAG,KAAK;GAE1E,UAAU,MAAM;AACd,MAAE,iBAAiB;AACnB,SAAK,QAAQ,IAAI;;GAEnB,OAAO,KAAK,WAAW,KAAK;GAC5B,SAAQ;aACP,KAAK;GACC,EARF,UAAU,QAQR,CACT;EACE"}

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

@@ -0,0 +1,20 @@
+import React from "react";
+
+//#region src/components/data-table/TableActionMenu.d.ts
+interface TableActionMenuItem<TData> {
+  disabled?: boolean | ((row: TData) => boolean);
+  icon?: React.ReactNode;
+  label: string;
+  onClick: (row: TData) => void;
+}
+interface TableActionMenuProps<TData> {
+  items: TableActionMenuItem<TData>[];
+  row: TData;
+}
+declare function TableActionMenu<TData>({
+  items,
+  row
+}: TableActionMenuProps<TData>): any;
+//#endregion
+export { TableActionMenu, TableActionMenuItem };
+//# sourceMappingURL=TableActionMenu.d.ts.map

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

@@ -0,0 +1,31 @@
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MoreHorizontal } from "lucide-react";
+
+//#region src/components/data-table/TableActionMenu.tsx
+function TableActionMenu({ items, row }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			"aria-label": "Open actions menu",
+			className: "h-8 w-8 p-0",
+			variant: "ghost",
+			children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "end",
+		children: items?.map((item, index) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			disabled: typeof item.disabled === "function" ? item.disabled(row) : item.disabled,
+			onClick: () => item.onClick(row),
+			children: [item.icon && /* @__PURE__ */ jsx("span", {
+				className: "mr-2",
+				children: item.icon
+			}), item.label]
+		}, index))
+	})] });
+}
+
+//#endregion
+export { TableActionMenu };
+//# sourceMappingURL=TableActionMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableActionMenu.js","names":[],"sources":["../../../../src/components/data-table/TableActionMenu.tsx"],"sourcesContent":["import {\n  Button,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport { MoreHorizontal } from \"lucide-react\";\nimport React from \"react\";\n\nexport interface TableActionMenuItem<TData> {\n  disabled?: boolean | ((row: TData) => boolean);\n  icon?: React.ReactNode;\n  label: string;\n  onClick: (row: TData) => void;\n}\n\ninterface TableActionMenuProps<TData> {\n  items: TableActionMenuItem<TData>[];\n  row: TData;\n}\n\nfunction TableActionMenu<TData>({ items, row }: TableActionMenuProps<TData>) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          aria-label=\"Open actions menu\"\n          className=\"h-8 w-8 p-0\"\n          variant=\"ghost\">\n          <MoreHorizontal className=\"h-4 w-4\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        {items?.map((item, index) => (\n          <DropdownMenuItem\n            disabled={typeof item.disabled === 'function' ? item.disabled(row) : item.disabled}\n            key={index}\n            onClick={() => item.onClick(row)}>\n            {item.icon && <span className=\"mr-2\">{item.icon}</span>}\n            {item.label}\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\nexport { TableActionMenu };\n"],"mappings":";;;;;;AAsBA,SAAS,gBAAuB,EAAE,OAAO,OAAoC;AAC3E,QACE,qBAAC,cAAD,aACE,oBAAC,qBAAD;EAAqB;YACnB,oBAAC,QAAD;GACE,cAAW;GACX,WAAU;GACV,SAAQ;aACR,oBAAC,gBAAD,EAAgB,WAAU,WAAY;GAC/B;EACW,GACtB,oBAAC,qBAAD;EAAqB,OAAM;YACxB,OAAO,KAAK,MAAM,UACjB,qBAAC,kBAAD;GACE,UAAU,OAAO,KAAK,aAAa,aAAa,KAAK,SAAS,IAAI,GAAG,KAAK;GAE1E,eAAe,KAAK,QAAQ,IAAI;aAHlC,CAIG,KAAK,QAAQ,oBAAC,QAAD;IAAM,WAAU;cAAQ,KAAK;IAAY,GACtD,KAAK,MACW;KAJZ,MAIY,CACnB;EACkB,EACT"}

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

@@ -0,0 +1,48 @@
+import { TableLayoutType } from "./DataTable.types.js";
+import { ComponentSize } from "../sizing/index.js";
+import { BaseRecord, useTableReturnType } from "@refinedev/core";
+import React from "react";
+import { Table } from "@tanstack/react-table";
+
+//#region src/components/data-table/TableLayoutRenderer.d.ts
+interface TableLayoutRendererProps<TData extends BaseRecord> {
+  layoutType: TableLayoutType;
+  table: Table<TData>;
+  refineTable?: useTableReturnType<TData, any>;
+  className?: string;
+  emptyState?: React.ReactNode;
+  footer?: React.ReactNode;
+  getCellProps?: (cell: any) => React.HTMLAttributes<HTMLTableCellElement>;
+  getRowProps?: (row: any) => React.HTMLAttributes<HTMLTableRowElement>;
+  header?: React.ReactNode;
+  isLoading?: boolean;
+  loadingState?: React.ReactNode;
+  onRowClick?: (row: any) => void;
+  pagination?: React.ReactNode;
+  responsive?: boolean;
+  hideColumnsOnMobile?: string[];
+  mobileBreakpoint?: ComponentSize | string;
+  stackedHeaderColumn?: string;
+}
+declare function TableLayoutRenderer<TData extends BaseRecord>({
+  layoutType,
+  table,
+  refineTable,
+  className,
+  emptyState,
+  footer,
+  getCellProps,
+  getRowProps,
+  header,
+  isLoading,
+  loadingState,
+  onRowClick,
+  pagination,
+  responsive,
+  hideColumnsOnMobile,
+  mobileBreakpoint,
+  stackedHeaderColumn
+}: TableLayoutRendererProps<TData>): any;
+//#endregion
+export { TableLayoutRenderer };
+//# sourceMappingURL=TableLayoutRenderer.d.ts.map

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

@@ -0,0 +1,45 @@
+import { TableLayoutType } from "./DataTable.types.js";
+import { useTableConfigOptional } from "./contexts/TableConfig.js";
+import "./contexts/index.js";
+import { BaseTableStackedLayout } from "./BaseTableStackedLayout.js";
+import { DefaultTableLayout } from "./DefaultTableLayout.js";
+import { useTableLayoutSelector } from "./useTableLayoutSelector.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/data-table/TableLayoutRenderer.tsx
+const layoutRegistry = {
+	["table"]: DefaultTableLayout,
+	["stacked"]: BaseTableStackedLayout
+};
+function TableLayoutRenderer({ layoutType, table, refineTable, className, emptyState, footer, getCellProps, getRowProps, header, isLoading, loadingState, onRowClick, pagination, responsive = false, hideColumnsOnMobile = [], mobileBreakpoint, stackedHeaderColumn }) {
+	const tableConfig = useTableConfigOptional();
+	const actualLayoutType = useTableLayoutSelector({
+		responsive,
+		mobileLayout: layoutType,
+		mobileBreakpoint: mobileBreakpoint || tableConfig?.toolbarConfig?.mobileBreakpoint
+	});
+	const LayoutComponent = layoutRegistry[actualLayoutType];
+	if (!LayoutComponent) throw new Error(`Unsupported layout type: ${actualLayoutType}`);
+	return /* @__PURE__ */ jsx(LayoutComponent, {
+		className,
+		emptyState,
+		footer,
+		getCellProps,
+		getRowProps,
+		header,
+		isLoading,
+		loadingState,
+		onRowClick,
+		pagination,
+		table,
+		responsive,
+		hideColumnsOnMobile,
+		mobileBreakpoint,
+		stackedHeaderColumn
+	});
+}
+
+//#endregion
+export { TableLayoutRenderer };
+//# sourceMappingURL=TableLayoutRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableLayoutRenderer.js","names":[],"sources":["../../../../src/components/data-table/TableLayoutRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { BaseRecord, useTableReturnType } from \"@refinedev/core\";\nimport { Table } from \"@tanstack/react-table\";\n\nimport { BaseTableStackedLayout } from \"./BaseTableStackedLayout\";\nimport { DefaultTableLayout } from \"./DefaultTableLayout\";\nimport { useTableLayoutSelector } from \"./useTableLayoutSelector\";\nimport { useTableConfigOptional } from \"./contexts\";\nimport { BaseTableContentProps } from \"./BaseTableContent\";\nimport { TableLayoutType } from \"./DataTable.types\";\nimport { ComponentSize } from \"@/components\";\n\n// Layout registry mapping layout types to components\nconst layoutRegistry = {\n  [TableLayoutType.TABLE]: DefaultTableLayout,\n  [TableLayoutType.STACKED]: BaseTableStackedLayout,\n};\n\n// Type for layout components\ntype LayoutComponent<TData extends BaseRecord> = React.ComponentType<\n  Omit<BaseTableContentProps<TData>, \"table\" | \"layoutType\">\n>;\n\ninterface TableLayoutRendererProps<TData extends BaseRecord> {\n  layoutType: TableLayoutType;\n  table: Table<TData>;\n  refineTable?: useTableReturnType<TData, any>;\n  // All other props from BaseTableContent\n  className?: string;\n  emptyState?: React.ReactNode;\n  footer?: React.ReactNode;\n  getCellProps?: (\n    cell: any, // Using any to avoid complex typing issues\n  ) => React.HTMLAttributes<HTMLTableCellElement>;\n  getRowProps?: (row: any) => React.HTMLAttributes<HTMLTableRowElement>;\n  header?: React.ReactNode;\n  isLoading?: boolean;\n  loadingState?: React.ReactNode;\n  onRowClick?: (row: any) => void;\n  pagination?: React.ReactNode;\n  responsive?: boolean;\n  hideColumnsOnMobile?: string[];\n  mobileBreakpoint?: ComponentSize | string;\n  stackedHeaderColumn?: string;\n}\n\nfunction TableLayoutRenderer<TData extends BaseRecord>({\n  layoutType,\n  table,\n  refineTable,\n  className,\n  emptyState,\n  footer,\n  getCellProps,\n  getRowProps,\n  header,\n  isLoading,\n  loadingState,\n  onRowClick,\n  pagination,\n  responsive = false,\n  hideColumnsOnMobile = [],\n  mobileBreakpoint,\n  stackedHeaderColumn,\n}: TableLayoutRendererProps<TData>) {\n  const tableConfig = useTableConfigOptional<TData>();\n\n  // Determine the actual layout to render\n  const actualLayoutType = useTableLayoutSelector({\n    responsive,\n    mobileLayout: layoutType,\n    mobileBreakpoint:\n      mobileBreakpoint || tableConfig?.toolbarConfig?.mobileBreakpoint,\n  });\n\n  // Get the layout component from registry\n  const LayoutComponent = layoutRegistry[\n    actualLayoutType\n  ] as LayoutComponent<TData>;\n\n  if (!LayoutComponent) {\n    throw new Error(`Unsupported layout type: ${actualLayoutType}`);\n  }\n\n  // Render the registered layout component\n  return (\n    <LayoutComponent\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      table={table}\n      responsive={responsive}\n      hideColumnsOnMobile={hideColumnsOnMobile}\n      mobileBreakpoint={mobileBreakpoint}\n      stackedHeaderColumn={stackedHeaderColumn}\n    />\n  );\n}\n\nexport { TableLayoutRenderer };\n"],"mappings":";;;;;;;;;;AAaA,MAAM,iBAAiB;YACI;cACE;CAC5B;AA8BD,SAAS,oBAA8C,EACrD,YACA,OACA,aACA,WACA,YACA,QACA,cACA,aACA,QACA,WACA,cACA,YACA,YACA,aAAa,OACb,sBAAsB,EAAE,EACxB,kBACA,uBACkC;CAClC,MAAM,cAAc,wBAA+B;CAGnD,MAAM,mBAAmB,uBAAuB;EAC9C;EACA,cAAc;EACd,kBACE,oBAAoB,aAAa,eAAe;EACnD,CAAC;CAGF,MAAM,kBAAkB,eACtB;AAGF,KAAI,CAAC,gBACH,OAAM,IAAI,MAAM,4BAA4B,mBAAmB;AAIjE,QACE,oBAAC,iBAAD;EACa;EACC;EACJ;EACM;EACD;EACL;EACG;EACG;EACF;EACA;EACL;EACK;EACS;EACH;EACG;EACrB"}

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

@@ -0,0 +1,17 @@
+import { BaseRecord } from "@refinedev/core";
+import { Table } from "@tanstack/react-table";
+
+//#region src/components/data-table/Toolbar.d.ts
+interface ToolbarProps<TData extends BaseRecord> {
+  /** The table instance */
+  table: Table<TData>;
+  /** Additional class name for the toolbar container */
+  className?: string;
+}
+declare function Toolbar<TData extends BaseRecord>({
+  table,
+  className
+}: ToolbarProps<TData>): any;
+//#endregion
+export { Toolbar };
+//# sourceMappingURL=Toolbar.d.ts.map

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

@@ -0,0 +1,176 @@
+import { ToolbarItemAlignment, ToolbarItemType } from "./DataTable.types.js";
+import { ComponentSize as ComponentSize$1 } from "../sizing/index.js";
+import { FilterOperator } from "./toolbarItems/filters/types.js";
+import { createFilterOnChangeHandler } from "./toolbarItems/filters/util.js";
+import { useMobileDetection as useMobileDetection$1 } from "./useMobileDetection.js";
+import { ToolbarRenderer } from "./ToolbarRenderer.js";
+import { useFilterHelpers } from "./contexts/FilterHelpers.js";
+import { useRefineTable } from "./contexts/RefineTable.js";
+import { useTableConfig } from "./contexts/TableConfig.js";
+import "./contexts/index.js";
+import "./toolbarItems/index.js";
+import "../index.js";
+import { cn } from "@lumeweb/portal-framework-ui-core";
+import React, { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/data-table/Toolbar.tsx
+function MobileToolbarLayout({ table, className, config, refineContext, sortedItems, createCommonProps }) {
+	const containerClassName = cn("flex flex-col gap-3 p-3 border-b bg-background", config.sticky && "sticky top-0 z-10", className);
+	const getItemAlignment = (item) => {
+		if (item.alignment) return item.alignment;
+		return config.defaultAlignment || "left";
+	};
+	const isLeftAligned = (item) => {
+		return getItemAlignment(item) === "left";
+	};
+	const isRightAligned = (item) => {
+		return getItemAlignment(item) === "right";
+	};
+	const isCenterAligned = (item) => {
+		return getItemAlignment(item) === "center";
+	};
+	const leftItems = sortedItems.filter(isLeftAligned);
+	const centerItems = sortedItems.filter(isCenterAligned);
+	const rightItems = sortedItems.filter(isRightAligned);
+	return /* @__PURE__ */ jsxs("div", {
+		className: containerClassName,
+		children: [
+			leftItems.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap gap-2",
+				children: leftItems.map((item) => {
+					return /* @__PURE__ */ jsx(ToolbarRenderer, {
+						item,
+						commonProps: createCommonProps(item)
+					}, item.id);
+				})
+			}),
+			centerItems.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap justify-center gap-2",
+				children: centerItems.map((item) => {
+					return /* @__PURE__ */ jsx(ToolbarRenderer, {
+						item,
+						commonProps: createCommonProps(item)
+					}, item.id);
+				})
+			}),
+			rightItems.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap justify-end gap-2",
+				children: rightItems.map((item) => {
+					return /* @__PURE__ */ jsx(ToolbarRenderer, {
+						item,
+						commonProps: createCommonProps(item)
+					}, item.id);
+				})
+			})
+		]
+	});
+}
+function DesktopToolbarLayout({ table, className, config, refineContext, sortedItems, createCommonProps }) {
+	const getItemAlignment = (item) => {
+		if (item.alignment) return item.alignment;
+		return config.defaultAlignment || "left";
+	};
+	const isRightAligned = (item) => {
+		return getItemAlignment(item) === "right";
+	};
+	const isCenterAligned = (item) => {
+		return getItemAlignment(item) === "center";
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-wrap items-center gap-2 p-4 border-b bg-background", config.justifyBetween ? "justify-between" : void 0, config.sticky && "sticky top-0 z-10", className),
+		children: sortedItems.map((item) => {
+			return /* @__PURE__ */ jsx(ToolbarRenderer, {
+				item,
+				commonProps: createCommonProps(item),
+				className: cn(isRightAligned(item) && "ml-auto", isCenterAligned(item) && "mx-auto")
+			}, item.id);
+		})
+	});
+}
+function Toolbar({ table, className }) {
+	const { setFilters, setSorters, tableQuery, filters, sorters } = useRefineTable();
+	const { toolbarConfig: config, refineContext } = useTableConfig();
+	const { getDefaultFilter, getDefaultOperator } = useFilterHelpers();
+	const { isMobile } = useMobileDetection$1({ mobileBreakpoint: React.useMemo(() => {
+		const breakpoint = config?.mobileBreakpoint;
+		if (typeof breakpoint === "string" && [
+			"xs",
+			"sm",
+			"md",
+			"lg",
+			"xl",
+			"2xl"
+		].includes(breakpoint)) return breakpoint;
+		if (typeof breakpoint === "string" && /^\d+$/.test(breakpoint)) {
+			const parsed = parseInt(breakpoint, 10);
+			if (parsed > 0) return parsed;
+		}
+		if (typeof breakpoint === "number" && breakpoint > 0) return breakpoint;
+		return "sm";
+	}, [config?.mobileBreakpoint]) });
+	const sortedItems = React.useMemo(() => {
+		if (!config) return [];
+		return [...config.items].sort((a, b) => {
+			return (a.order ?? 0) - (b.order ?? 0);
+		});
+	}, [config?.items]);
+	const onChangeHandler = useCallback((item) => {
+		return createFilterOnChangeHandler(item, (filters) => {
+			if (setFilters) setFilters(filters);
+		}, getDefaultOperator, { itemId: item.id });
+	}, [setFilters, getDefaultOperator]);
+	const createCommonProps = useCallback((item) => {
+		const baseProps = {
+			table,
+			refineContext,
+			context: {
+				setFilters,
+				setSorters,
+				tableQuery,
+				filters,
+				sorters
+			}
+		};
+		if (["filter", "filter-group"].includes(item.type)) {
+			const operator = item.config?.operator || (item.config?.type ? getDefaultOperator?.(item.config.type) : "eq");
+			const existingValue = getDefaultFilter?.(item.config?.field, operator);
+			const initialValue = "initialValue" in item ? item.initialValue : void 0;
+			baseProps.value = existingValue ?? initialValue;
+			baseProps.onChange = onChangeHandler(item);
+		}
+		return baseProps;
+	}, [
+		table,
+		refineContext,
+		setFilters,
+		getDefaultFilter,
+		getDefaultOperator,
+		setSorters,
+		tableQuery,
+		filters,
+		sorters,
+		onChangeHandler
+	]);
+	if (!config) return null;
+	if (isMobile) return /* @__PURE__ */ jsx(MobileToolbarLayout, {
+		table,
+		className,
+		config,
+		refineContext,
+		sortedItems,
+		createCommonProps
+	});
+	return /* @__PURE__ */ jsx(DesktopToolbarLayout, {
+		table,
+		className,
+		config,
+		refineContext,
+		sortedItems,
+		createCommonProps
+	});
+}
+
+//#endregion
+export { Toolbar };
+//# sourceMappingURL=Toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","names":["useMobileDetection"],"sources":["../../../../src/components/data-table/Toolbar.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { cn } from \"@lumeweb/portal-framework-ui-core\";\nimport { Table } from \"@tanstack/react-table\";\nimport { ComponentSize } from \"@/components\";\n\nimport type {\n  TableContext,\n  ToolbarItem,\n  ToolbarItemComponentProps,\n} from \"./DataTable.types\";\nimport { ToolbarItemAlignment, ToolbarItemType } from \"./DataTable.types\";\nimport { BaseRecord } from \"@refinedev/core\";\nimport { ToolbarRenderer } from \"./ToolbarRenderer\";\nimport { useFilterHelpers, useRefineTable, useTableConfig } from \"./contexts\";\nimport { createFilterOnChangeHandler, FilterOperator } from \"./toolbarItems\";\nimport { useMobileDetection } from \"./useMobileDetection\";\n\ninterface ToolbarProps<TData extends BaseRecord> {\n  /** The table instance */\n  table: Table<TData>;\n  /** Additional class name for the toolbar container */\n  className?: string;\n}\n\nfunction MobileToolbarLayout<TData extends BaseRecord>({\n  table,\n  className,\n  config,\n  refineContext,\n  sortedItems,\n  createCommonProps,\n}: {\n  table: Table<TData>;\n  className?: string;\n  config: any;\n  refineContext: any;\n  sortedItems: ToolbarItem<TData>[];\n  createCommonProps: (\n    item: ToolbarItem<TData>,\n  ) => ToolbarItemComponentProps<TData>;\n}) {\n  const containerClassName = cn(\n    \"flex flex-col gap-3 p-3 border-b bg-background\",\n    config.sticky && \"sticky top-0 z-10\",\n    className,\n  );\n\n  // Helper functions to determine item alignment (defined at component level, not inside hooks)\n  const getItemAlignment = (item: ToolbarItem<TData>): ToolbarItemAlignment => {\n    // If item has explicit alignment, use it\n    if (item.alignment) {\n      return item.alignment;\n    }\n\n    // Otherwise use the default alignment from config\n    return config.defaultAlignment || ToolbarItemAlignment.LEFT;\n  };\n\n  const isLeftAligned = (item: ToolbarItem<TData>): boolean => {\n    return getItemAlignment(item) === ToolbarItemAlignment.LEFT;\n  };\n\n  const isRightAligned = (item: ToolbarItem<TData>): boolean => {\n    return getItemAlignment(item) === ToolbarItemAlignment.RIGHT;\n  };\n\n  const isCenterAligned = (item: ToolbarItem<TData>): boolean => {\n    return getItemAlignment(item) === ToolbarItemAlignment.CENTER;\n  };\n\n  // Group items by alignment for mobile\n  const leftItems = sortedItems.filter(isLeftAligned);\n  const centerItems = sortedItems.filter(isCenterAligned);\n  const rightItems = sortedItems.filter(isRightAligned);\n\n  return (\n    <div className={containerClassName}>\n      {leftItems.length > 0 && (\n        <div className=\"flex flex-wrap gap-2\">\n          {leftItems.map((item) => {\n            const commonProps = createCommonProps(item);\n            return (\n              <ToolbarRenderer\n                key={item.id}\n                item={item}\n                commonProps={commonProps}\n              />\n            );\n          })}\n        </div>\n      )}\n\n      {centerItems.length > 0 && (\n        <div className=\"flex flex-wrap justify-center gap-2\">\n          {centerItems.map((item) => {\n            const commonProps = createCommonProps(item);\n            return (\n              <ToolbarRenderer\n                key={item.id}\n                item={item}\n                commonProps={commonProps}\n              />\n            );\n          })}\n        </div>\n      )}\n\n      {rightItems.length > 0 && (\n        <div className=\"flex flex-wrap justify-end gap-2\">\n          {rightItems.map((item) => {\n            const commonProps = createCommonProps(item);\n            return (\n              <ToolbarRenderer\n                key={item.id}\n                item={item}\n                commonProps={commonProps}\n              />\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction DesktopToolbarLayout<TData extends BaseRecord>({\n  table,\n  className,\n  config,\n  refineContext,\n  sortedItems,\n  createCommonProps,\n}: {\n  table: Table<TData>;\n  className?: string;\n  config: any;\n  refineContext: any;\n  sortedItems: ToolbarItem<TData>[];\n  createCommonProps: (\n    item: ToolbarItem<TData>,\n  ) => ToolbarItemComponentProps<TData>;\n}) {\n  // Helper functions to determine item alignment (defined at component level, not inside hooks)\n  const getItemAlignment = (item: ToolbarItem<TData>): ToolbarItemAlignment => {\n    // If item has explicit alignment, use it\n    if (item.alignment) {\n      return item.alignment;\n    }\n\n    // Otherwise use the default alignment from config\n    return config.defaultAlignment || ToolbarItemAlignment.LEFT;\n  };\n\n  const isRightAligned = (item: ToolbarItem<TData>): boolean => {\n    return getItemAlignment(item) === ToolbarItemAlignment.RIGHT;\n  };\n\n  const isCenterAligned = (item: ToolbarItem<TData>): boolean => {\n    return getItemAlignment(item) === ToolbarItemAlignment.CENTER;\n  };\n\n  const containerClassName = cn(\n    \"flex flex-wrap items-center gap-2 p-4 border-b bg-background\",\n    config.justifyBetween ? \"justify-between\" : undefined,\n    config.sticky && \"sticky top-0 z-10\",\n    className,\n  );\n\n  return (\n    <div className={containerClassName}>\n      {sortedItems.map((item) => {\n        const commonProps = createCommonProps(item);\n\n        // Add appropriate positioning classes based on alignment\n        const itemClassName = cn(\n          isRightAligned(item) && \"ml-auto\",\n          isCenterAligned(item) && \"mx-auto\",\n        );\n\n        return (\n          <ToolbarRenderer\n            key={item.id}\n            item={item}\n            commonProps={commonProps}\n            className={itemClassName}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\nfunction Toolbar<TData extends BaseRecord>({\n  table,\n  className,\n}: ToolbarProps<TData>) {\n  const { setFilters, setSorters, tableQuery, filters, sorters } = useRefineTable<TData>();\n  const { toolbarConfig: config, refineContext } = useTableConfig<TData>();\n  const { getDefaultFilter, getDefaultOperator } = useFilterHelpers<TData>();\n\n  // Validate mobileBreakpoint value\n  const mobileBreakpoint = React.useMemo(() => {\n    const breakpoint = config?.mobileBreakpoint;\n    const validTokens = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n\n    // If it's a valid Tailwind token, use it as-is\n    if (typeof breakpoint === \"string\" && validTokens.includes(breakpoint)) {\n      return breakpoint;\n    }\n\n    // If it's a numeric string or number, parse it and use the numeric value\n    if (typeof breakpoint === \"string\" && /^\\d+$/.test(breakpoint)) {\n      const parsed = parseInt(breakpoint, 10);\n      if (parsed > 0) {\n        return parsed;\n      }\n    }\n\n    if (typeof breakpoint === \"number\" && breakpoint > 0) {\n      return breakpoint;\n    }\n\n    // For any other value, fall back to ComponentSize.SM\n    return ComponentSize.SM;\n  }, [config?.mobileBreakpoint]);\n\n  // Mobile detection with proper breakpoint\n  const { isMobile } = useMobileDetection({\n    mobileBreakpoint: mobileBreakpoint,\n  });\n\n\n\n  // Sort items by order if specified (compute regardless of config presence)\n  const sortedItems = React.useMemo(() => {\n    if (!config) {\n      return [];\n    }\n    return [...config.items].sort((a, b) => {\n      const orderA = a.order ?? 0;\n      const orderB = b.order ?? 0;\n      return orderA - orderB;\n    });\n  }, [config?.items]);\n\n  // Create stable onChange handler using refs (compute regardless of config presence)\n  const onChangeHandler = useCallback(\n    (item: ToolbarItem<TData>) => {\n      return createFilterOnChangeHandler(\n        item,\n        (filters) => {\n          if (setFilters) {\n            setFilters(filters);\n          }\n        },\n        getDefaultOperator,\n        { itemId: item.id },\n      );\n    },\n    [setFilters, getDefaultOperator],\n  );\n\n  // Create common props for all toolbar items (compute regardless of config presence)\n  const createCommonProps = useCallback(\n    (item: ToolbarItem<TData>): ToolbarItemComponentProps<TData> => {\n      const context: TableContext<TData> = {\n        setFilters,\n        setSorters,\n        tableQuery,\n        filters,\n        sorters,\n      } as TableContext<TData>;\n\n      const baseProps: ToolbarItemComponentProps<TData> = {\n        table,\n        refineContext,\n        context,\n      };\n\n      // Add filter-specific props\n      if (\n        [ToolbarItemType.FILTER, ToolbarItemType.FILTER_GROUP].includes(\n          item.type,\n        )\n      ) {\n        // Get the operator to use - either from config or default based on field type\n        const operator =\n          (item as any).config?.operator ||\n          ((item as any).config?.type\n            ? getDefaultOperator?.((item as any).config.type)\n            : FilterOperator.EQ);\n\n        // Use the table contexts's getDefaultFilter function to get existing filter value\n        const existingValue = getDefaultFilter?.(\n          (item as any).config?.field as string,\n          operator,\n        );\n\n        // Only use initialValue for item types that support it\n        const initialValue =\n          \"initialValue\" in item ? item.initialValue : undefined;\n        baseProps.value = existingValue ?? initialValue;\n        baseProps.onChange = onChangeHandler(item);\n      }\n\n      return baseProps;\n    },\n    [\n      table,\n      refineContext,\n      setFilters,\n      getDefaultFilter,\n      getDefaultOperator,\n      setSorters,\n      tableQuery,\n      filters,\n      sorters,\n      onChangeHandler,\n    ],\n  );\n\n  // If no toolbar config is provided through contexts, don't render anything\n  if (!config) {\n    return null;\n  }\n\n  // For mobile, we want a more vertical layout with appropriate spacing\n  if (isMobile) {\n    return (\n      <MobileToolbarLayout\n        table={table}\n        className={className}\n        config={config}\n        refineContext={refineContext}\n        sortedItems={sortedItems}\n        createCommonProps={createCommonProps}\n      />\n    );\n  }\n\n  // Desktop layout\n  return (\n    <DesktopToolbarLayout\n      table={table}\n      className={className}\n      config={config}\n      refineContext={refineContext}\n      sortedItems={sortedItems}\n      createCommonProps={createCommonProps}\n    />\n  );\n}\n\nexport { Toolbar };\n"],"mappings":"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"}

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

@@ -0,0 +1,66 @@
+import { ToolbarActionItem, ToolbarFilterItem } from "./DataTable.types.js";
+import { BaseRecord } from "@refinedev/core";
+
+//#region src/components/data-table/ToolbarRegistry.d.ts
+interface RegisteredActionItem<TData extends BaseRecord> {
+  id: string;
+  item: ToolbarActionItem<TData>;
+}
+interface RegisteredFilterItem<TData extends BaseRecord> {
+  id: string;
+  item: ToolbarFilterItem<TData>;
+}
+/**
+ * Register a toolbar action item
+ */
+declare function registerAction<TData extends BaseRecord>(id: string, item: ToolbarActionItem<TData>): void;
+/**
+ * Register a toolbar filter item
+ */
+declare function registerFilter<TData extends BaseRecord>(id: string, item: ToolbarFilterItem<TData>): void;
+/**
+ * Get a registered action item by ID
+ */
+declare function getAction<TData extends BaseRecord>(id: string): ToolbarActionItem<TData> | undefined;
+/**
+ * Get a registered filter item by ID
+ */
+declare function getFilter<TData extends BaseRecord>(id: string): ToolbarFilterItem<TData> | undefined;
+/**
+ * Check if an action item exists
+ */
+declare function hasAction(id: string): boolean;
+/**
+ * Check if a filter item exists
+ */
+declare function hasFilter(id: string): boolean;
+/**
+ * Get all registered action items
+ */
+declare function listActions<TData extends BaseRecord>(): RegisteredActionItem<TData>[];
+/**
+ * Get all registered filter items
+ */
+declare function listFilters<TData extends BaseRecord>(): RegisteredFilterItem<TData>[];
+/**
+ * Get all registered items
+ */
+declare function listAll<TData extends BaseRecord>(): {
+  actions: RegisteredActionItem<TData>[];
+  filters: RegisteredFilterItem<TData>[];
+};
+/**
+ * Clear all registered items
+ */
+declare function clear(): void;
+/**
+ * Remove a specific action item
+ */
+declare function removeAction(id: string): boolean;
+/**
+ * Remove a specific filter item
+ */
+declare function removeFilter(id: string): boolean;
+//#endregion
+export { type RegisteredActionItem, type RegisteredFilterItem, clear, getAction, getFilter, hasAction, hasFilter, listActions, listAll, listFilters, registerAction, registerFilter, removeAction, removeFilter };
+//# sourceMappingURL=ToolbarRegistry.d.ts.map

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

@@ -0,0 +1,89 @@
+//#region src/components/data-table/ToolbarRegistry.tsx
+const actions = /* @__PURE__ */ new Map();
+const filters = /* @__PURE__ */ new Map();
+/**
+* Register a toolbar action item
+*/
+function registerAction(id, item) {
+	actions.set(id, item);
+}
+/**
+* Register a toolbar filter item
+*/
+function registerFilter(id, item) {
+	filters.set(id, item);
+}
+/**
+* Get a registered action item by ID
+*/
+function getAction(id) {
+	return actions.get(id);
+}
+/**
+* Get a registered filter item by ID
+*/
+function getFilter(id) {
+	return filters.get(id);
+}
+/**
+* Check if an action item exists
+*/
+function hasAction(id) {
+	return actions.has(id);
+}
+/**
+* Check if a filter item exists
+*/
+function hasFilter(id) {
+	return filters.has(id);
+}
+/**
+* Get all registered action items
+*/
+function listActions() {
+	return Array.from(actions.entries()).map(([id, item]) => ({
+		id,
+		item
+	}));
+}
+/**
+* Get all registered filter items
+*/
+function listFilters() {
+	return Array.from(filters.entries()).map(([id, item]) => ({
+		id,
+		item
+	}));
+}
+/**
+* Get all registered items
+*/
+function listAll() {
+	return {
+		actions: listActions(),
+		filters: listFilters()
+	};
+}
+/**
+* Clear all registered items
+*/
+function clear() {
+	actions.clear();
+	filters.clear();
+}
+/**
+* Remove a specific action item
+*/
+function removeAction(id) {
+	return actions.delete(id);
+}
+/**
+* Remove a specific filter item
+*/
+function removeFilter(id) {
+	return filters.delete(id);
+}
+
+//#endregion
+export { clear, getAction, getFilter, hasAction, hasFilter, listActions, listAll, listFilters, registerAction, registerFilter, removeAction, removeFilter };
+//# sourceMappingURL=ToolbarRegistry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarRegistry.js","names":[],"sources":["../../../../src/components/data-table/ToolbarRegistry.tsx"],"sourcesContent":["import type {\n  ToolbarActionItem,\n  ToolbarFilterItem,\n} from \"./\";\nimport { BaseRecord } from \"@refinedev/core\";\n\ninterface RegisteredActionItem<TData extends BaseRecord> {\n  id: string;\n  item: ToolbarActionItem<TData>;\n}\n\ninterface RegisteredFilterItem<TData extends BaseRecord> {\n  id: string;\n  item: ToolbarFilterItem<TData>;\n}\n\n// Module-level private state\nconst actions: Map<string, ToolbarActionItem<any>> = new Map();\nconst filters: Map<string, ToolbarFilterItem<any>> = new Map();\n\n/**\n * Register a toolbar action item\n */\nfunction registerAction<TData extends BaseRecord>(\n  id: string,\n  item: ToolbarActionItem<TData>,\n): void {\n  actions.set(id, item);\n}\n\n/**\n * Register a toolbar filter item\n */\nfunction registerFilter<TData extends BaseRecord>(\n  id: string,\n  item: ToolbarFilterItem<TData>,\n): void {\n  filters.set(id, item as ToolbarFilterItem<any>);\n}\n\n/**\n * Get a registered action item by ID\n */\nfunction getAction<TData extends BaseRecord>(\n  id: string,\n): ToolbarActionItem<TData> | undefined {\n  return actions.get(id);\n}\n\n/**\n * Get a registered filter item by ID\n */\nfunction getFilter<TData extends BaseRecord>(\n  id: string,\n): ToolbarFilterItem<TData> | undefined {\n  return filters.get(id) as ToolbarFilterItem<TData> | undefined;\n}\n\n/**\n * Check if an action item exists\n */\nfunction hasAction(id: string): boolean {\n  return actions.has(id);\n}\n\n/**\n * Check if a filter item exists\n */\nfunction hasFilter(id: string): boolean {\n  return filters.has(id);\n}\n\n/**\n * Get all registered action items\n */\nfunction listActions<\n  TData extends BaseRecord,\n>(): RegisteredActionItem<TData>[] {\n  return Array.from(actions.entries()).map(([id, item]) => ({\n    id,\n    item: item as ToolbarActionItem<TData>,\n  }));\n}\n\n/**\n * Get all registered filter items\n */\nfunction listFilters<\n  TData extends BaseRecord,\n>(): RegisteredFilterItem<TData>[] {\n  return Array.from(filters.entries()).map(([id, item]) => ({\n    id,\n    item: item as ToolbarFilterItem<TData>,\n  }));\n}\n\n/**\n * Get all registered items\n */\nfunction listAll<TData extends BaseRecord>() {\n  return {\n    actions: listActions<TData>(),\n    filters: listFilters<TData>(),\n  };\n}\n\n/**\n * Clear all registered items\n */\nfunction clear(): void {\n  actions.clear();\n  filters.clear();\n}\n\n/**\n * Remove a specific action item\n */\nfunction removeAction(id: string): boolean {\n  return actions.delete(id);\n}\n\n/**\n * Remove a specific filter item\n */\nfunction removeFilter(id: string): boolean {\n  return filters.delete(id);\n}\n\nexport {\n  registerAction,\n  getAction,\n  registerFilter,\n  getFilter,\n  hasAction,\n  hasFilter,\n  listActions,\n  listFilters,\n  listAll,\n  clear,\n  removeAction,\n  removeFilter,\n};\n\nexport type {\n  RegisteredActionItem,\n  RegisteredFilterItem,\n};\n"],"mappings":";AAiBA,MAAM,0BAA+C,IAAI,KAAK;AAC9D,MAAM,0BAA+C,IAAI,KAAK;;;;AAK9D,SAAS,eACP,IACA,MACM;AACN,SAAQ,IAAI,IAAI,KAAK;;;;;AAMvB,SAAS,eACP,IACA,MACM;AACN,SAAQ,IAAI,IAAI,KAA+B;;;;;AAMjD,SAAS,UACP,IACsC;AACtC,QAAO,QAAQ,IAAI,GAAG;;;;;AAMxB,SAAS,UACP,IACsC;AACtC,QAAO,QAAQ,IAAI,GAAG;;;;;AAMxB,SAAS,UAAU,IAAqB;AACtC,QAAO,QAAQ,IAAI,GAAG;;;;;AAMxB,SAAS,UAAU,IAAqB;AACtC,QAAO,QAAQ,IAAI,GAAG;;;;;AAMxB,SAAS,cAE0B;AACjC,QAAO,MAAM,KAAK,QAAQ,SAAS,CAAC,CAAC,KAAK,CAAC,IAAI,WAAW;EACxD;EACM;EACP,EAAE;;;;;AAML,SAAS,cAE0B;AACjC,QAAO,MAAM,KAAK,QAAQ,SAAS,CAAC,CAAC,KAAK,CAAC,IAAI,WAAW;EACxD;EACM;EACP,EAAE;;;;;AAML,SAAS,UAAoC;AAC3C,QAAO;EACL,SAAS,aAAoB;EAC7B,SAAS,aAAoB;EAC9B;;;;;AAMH,SAAS,QAAc;AACrB,SAAQ,OAAO;AACf,SAAQ,OAAO;;;;;AAMjB,SAAS,aAAa,IAAqB;AACzC,QAAO,QAAQ,OAAO,GAAG;;;;;AAM3B,SAAS,aAAa,IAAqB;AACzC,QAAO,QAAQ,OAAO,GAAG"}

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

@@ -0,0 +1,45 @@
+import { ExtendedToolbarItem, ToolbarItemComponentProps } from "./DataTable.types.js";
+import { BaseRecord } from "@refinedev/core";
+import React from "react";
+
+//#region src/components/data-table/ToolbarRenderer.d.ts
+type ToolbarItemRenderer<TData extends BaseRecord> = (item: ExtendedToolbarItem<TData>, commonProps: ToolbarItemComponentProps<TData>) => React.ReactNode;
+declare const ToolbarRendererRegistry: {
+  /**
+   * Register a custom renderer for a toolbar item type
+   */
+  register<TData extends BaseRecord>(type: string, renderer: ToolbarItemRenderer<TData>): void;
+  /**
+   * Get a registered renderer for a toolbar item type
+   */
+  get<TData extends BaseRecord>(type: string): ToolbarItemRenderer<TData> | undefined;
+  /**
+   * Check if a renderer is registered for a type
+   */
+  has(type: string): boolean;
+  /**
+   * Remove a registered renderer
+   */
+  remove(type: string): boolean;
+  /**
+   * Clear all registered renderers
+   */
+  clear(): void;
+  list(): string[];
+};
+interface ToolbarRendererProps<TData extends BaseRecord> {
+  /** The toolbar item to render */
+  item: ExtendedToolbarItem<TData>;
+  /** Common props passed to all toolbar item components */
+  commonProps: ToolbarItemComponentProps<TData>;
+  /** Additional class name for the item container */
+  className?: string;
+}
+declare function ToolbarRenderer<TData extends BaseRecord>({
+  item,
+  commonProps,
+  className
+}: ToolbarRendererProps<TData>): any;
+//#endregion
+export { ToolbarRenderer, ToolbarRendererRegistry };
+//# sourceMappingURL=ToolbarRenderer.d.ts.map