@lumeweb/portal-framework-ui 0.0.1 → 0.1.0

package/dist/esm/components/data-table/toolbarItems/register.d.ts

@@ -0,0 +1,27 @@
+import { FilterConfig, FilterType, LogicalFilterOperator } from "./filters/types.js";
+import { ToolbarFilterItem } from "../DataTable.types.js";
+import "./filters/index.js";
+import "../index.js";
+import { BaseRecord } from "@refinedev/core";
+
+//#region src/components/data-table/toolbarItems/register.d.ts
+
+/**
+ * Get default operator based on filter type
+ * @param filterType - The type of filter
+ * @returns The default CRUD operator for that filter type
+ */
+declare function getDefaultOperator(filterType: FilterType): LogicalFilterOperator;
+/**
+ * Create a standard filter item with proper configuration
+ * @param id - Unique identifier for the filter
+ * @param component - The React component for the filter
+ * @param operator - The CRUD operator for the filter
+ * @param additionalConfig - Optional additional configuration to override defaults
+ * @returns A properly configured ToolbarFilterItem
+ */
+declare function createStandardFilter<TData extends BaseRecord = any>(id: string, component: React.ComponentType<any>, operator: LogicalFilterOperator, additionalConfig?: Partial<FilterConfig<TData>>): ToolbarFilterItem<TData>;
+declare function registerToolbarItems(): void;
+//#endregion
+export { createStandardFilter, getDefaultOperator, registerToolbarItems };
+//# sourceMappingURL=register.d.ts.map

package/dist/esm/components/data-table/toolbarItems/register.js

@@ -0,0 +1,130 @@
+import { __esmMin } from "../../../_virtual/rolldown_runtime.js";
+import { ToolbarItemType } from "../DataTable.types.js";
+import { init_ToolbarRegistry, registerFilter } from "../ToolbarRegistry.js";
+import { FilterOperator, FilterType } from "./filters/types.js";
+import { BooleanFilter } from "./filters/components/BooleanFilter.js";
+import { DateFilter } from "./filters/components/DateFilter.js";
+import { MultiSelectFilter } from "./filters/components/MultiSelectFilter.js";
+import { NumberFilter } from "./filters/components/NumberFilter.js";
+import { RangeFilter } from "./filters/components/RangeFilter.js";
+import { SearchFilter } from "./filters/components/SearchFilter.js";
+import { SelectFilter } from "./filters/components/SelectFilter.js";
+import { TextFilter } from "./filters/components/TextFilter.js";
+import { init_components } from "./filters/components/index.js";
+import { init_filters } from "./filters/index.js";
+import { init_refresh, registerRefreshToolbarItem } from "./items/refresh.js";
+import { init_search, registerSearchToolbarItem } from "./items/search.js";
+import { init_data_table } from "../index.js";
+
+//#region src/components/data-table/toolbarItems/register.ts
+/**
+* Get default operator based on filter type
+* @param filterType - The type of filter
+* @returns The default CRUD operator for that filter type
+*/
+function getDefaultOperator(filterType) {
+	switch (filterType) {
+		case FilterType.TEXT: return FilterOperator.CONTAINS;
+		case FilterType.SELECT: return FilterOperator.EQ;
+		case FilterType.DATE: return FilterOperator.EQ;
+		case FilterType.NUMBER: return FilterOperator.EQ;
+		case FilterType.BOOLEAN: return FilterOperator.EQ;
+		case FilterType.MULTI_SELECT: return FilterOperator.IN;
+		case FilterType.RANGE: return FilterOperator.BETWEEN;
+		case FilterType.SEARCH: return FilterOperator.CONTAINS;
+		default: return FilterOperator.EQ;
+	}
+}
+/**
+* Create a standard filter item with proper configuration
+* @param id - Unique identifier for the filter
+* @param component - The React component for the filter
+* @param operator - The CRUD operator for the filter
+* @param additionalConfig - Optional additional configuration to override defaults
+* @returns A properly configured ToolbarFilterItem
+*/
+function createStandardFilter(id, component, operator, additionalConfig = {}) {
+	const defaultLabel = computeDefaultLabel(id);
+	const label = additionalConfig.label || defaultLabel;
+	return {
+		id,
+		label,
+		type: ToolbarItemType.FILTER,
+		component,
+		initialValue: additionalConfig.initialValue,
+		config: {
+			...additionalConfig,
+			id,
+			label,
+			type: additionalConfig.type || id,
+			field: additionalConfig.field || "",
+			operator
+		}
+	};
+}
+/**
+* Compute a default label from an ID by converting camelCase/snake_case to readable format
+* @param id - The identifier to convert
+* @returns A readable label string
+*/
+function computeDefaultLabel(id) {
+	if (id.includes("_")) return id.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ") + " Filter";
+	const camelCaseWords = id.replace(/([A-Z])/g, " $1").trim();
+	return camelCaseWords.charAt(0).toUpperCase() + camelCaseWords.slice(1) + " Filter";
+}
+function registerFilterItems() {
+	registerFilter(FilterType.TEXT, createStandardFilter("text", TextFilter, FilterOperator.CONTAINS, {
+		type: FilterType.TEXT,
+		field: ""
+	}));
+	registerFilter(FilterType.SELECT, createStandardFilter("select", SelectFilter, FilterOperator.EQ, {
+		type: FilterType.SELECT,
+		field: ""
+	}));
+	registerFilter(FilterType.DATE, createStandardFilter("date", DateFilter, FilterOperator.EQ, {
+		type: FilterType.DATE,
+		field: ""
+	}));
+	registerFilter(FilterType.NUMBER, createStandardFilter("number", NumberFilter, FilterOperator.EQ, {
+		type: FilterType.NUMBER,
+		field: ""
+	}));
+	registerFilter(FilterType.BOOLEAN, createStandardFilter("boolean", BooleanFilter, FilterOperator.EQ, {
+		type: FilterType.BOOLEAN,
+		field: ""
+	}));
+	registerFilter(FilterType.MULTI_SELECT, createStandardFilter("multi-select", MultiSelectFilter, FilterOperator.IN, {
+		type: FilterType.MULTI_SELECT,
+		field: ""
+	}));
+	registerFilter(FilterType.RANGE, createStandardFilter("range", RangeFilter, FilterOperator.BETWEEN, {
+		type: FilterType.RANGE,
+		field: ""
+	}));
+	registerFilter(FilterType.SEARCH, createStandardFilter("search", SearchFilter, FilterOperator.CONTAINS, {
+		type: FilterType.SEARCH,
+		field: ""
+	}));
+}
+function registerActionItems() {
+	registerRefreshToolbarItem();
+	registerSearchToolbarItem();
+}
+function registerToolbarItems() {
+	registerActionItems();
+	registerFilterItems();
+}
+var init_register = __esmMin(() => {
+	init_ToolbarRegistry();
+	init_data_table();
+	init_filters();
+	init_components();
+	init_refresh();
+	init_search();
+	registerToolbarItems();
+});
+
+//#endregion
+init_register();
+export { createStandardFilter, getDefaultOperator, init_register, registerToolbarItems };
+//# sourceMappingURL=register.js.map

package/dist/esm/components/data-table/toolbarItems/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","names":[],"sources":["../../../../../src/components/data-table/toolbarItems/register.ts"],"sourcesContent":["// Import and register all toolbar items\nimport { registerFilter } from \"@/components/data-table/ToolbarRegistry\";\nimport { BaseRecord } from \"@refinedev/core\";\nimport type { FilterConfig, ToolbarFilterItem } from \"@/components/data-table\";\nimport { ToolbarItemType } from \"@/components/data-table\";\nimport { FilterOperator, FilterType, LogicalFilterOperator } from \"./filters\";\n\n// Import filter components\nimport {\n  BooleanFilter,\n  DateFilter,\n  MultiSelectFilter,\n  NumberFilter,\n  RangeFilter,\n  SearchFilter,\n  SelectFilter,\n  TextFilter,\n} from \"./filters/components\";\n\n// Import registration functions from items\nimport { registerRefreshToolbarItem } from \"./items/refresh\";\nimport { registerSearchToolbarItem } from \"./items/search\";\n\n/**\n * Get default operator based on filter type\n * @param filterType - The type of filter\n * @returns The default CRUD operator for that filter type\n */\nfunction getDefaultOperator(filterType: FilterType): LogicalFilterOperator {\n  switch (filterType) {\n    case FilterType.TEXT:\n      return FilterOperator.CONTAINS;\n    case FilterType.SELECT:\n      return FilterOperator.EQ;\n    case FilterType.DATE:\n      return FilterOperator.EQ;\n    case FilterType.NUMBER:\n      return FilterOperator.EQ;\n    case FilterType.BOOLEAN:\n      return FilterOperator.EQ;\n    case FilterType.MULTI_SELECT:\n      return FilterOperator.IN;\n    case FilterType.RANGE:\n      return FilterOperator.BETWEEN;\n    case FilterType.SEARCH:\n      return FilterOperator.CONTAINS;\n    default:\n      return FilterOperator.EQ;\n  }\n}\n\n/**\n * Create a standard filter item with proper configuration\n * @param id - Unique identifier for the filter\n * @param component - The React component for the filter\n * @param operator - The CRUD operator for the filter\n * @param additionalConfig - Optional additional configuration to override defaults\n * @returns A properly configured ToolbarFilterItem\n */\nfunction createStandardFilter<TData extends BaseRecord = any>(\n  id: string,\n  component: React.ComponentType<any>,\n  operator: LogicalFilterOperator,\n  additionalConfig: Partial<FilterConfig<TData>> = {},\n): ToolbarFilterItem<TData> {\n  const defaultLabel = computeDefaultLabel(id);\n  const label = additionalConfig.label || defaultLabel;\n\n  return {\n    id,\n    label,\n    type: ToolbarItemType.FILTER,\n    component,\n    initialValue: additionalConfig.initialValue,\n    config: {\n      ...additionalConfig,\n      id,\n      label,\n      type: additionalConfig.type || (id as FilterType),\n      field: additionalConfig.field || (\"\" as keyof TData),\n      operator,\n    },\n  } as ToolbarFilterItem<TData>;\n}\n\n/**\n * Compute a default label from an ID by converting camelCase/snake_case to readable format\n * @param id - The identifier to convert\n * @returns A readable label string\n */\nfunction computeDefaultLabel(id: string): string {\n  // Handle snake_case\n  if (id.includes(\"_\")) {\n    return (\n      id\n        .split(\"_\")\n        .map(\n          (word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(),\n        )\n        .join(\" \") + \" Filter\"\n    );\n  }\n\n  // Handle camelCase\n  const camelCaseWords = id.replace(/([A-Z])/g, \" $1\").trim();\n  return (\n    camelCaseWords.charAt(0).toUpperCase() + camelCaseWords.slice(1) + \" Filter\"\n  );\n}\n\nfunction registerFilterItems() {\n  // Register default filters using helper functions\n  registerFilter(\n    FilterType.TEXT,\n    createStandardFilter(\"text\", TextFilter, FilterOperator.CONTAINS, {\n      type: FilterType.TEXT,\n      field: \"\" as any,\n    }),\n  );\n  registerFilter(\n    FilterType.SELECT,\n    createStandardFilter(\"select\", SelectFilter, FilterOperator.EQ, {\n      type: FilterType.SELECT,\n      field: \"\" as any,\n    }),\n  );\n  registerFilter(\n    FilterType.DATE,\n    createStandardFilter(\"date\", DateFilter, FilterOperator.EQ, {\n      type: FilterType.DATE,\n      field: \"\" as any,\n    }),\n  );\n  registerFilter(\n    FilterType.NUMBER,\n    createStandardFilter(\"number\", NumberFilter, FilterOperator.EQ, {\n      type: FilterType.NUMBER,\n      field: \"\" as any,\n    }),\n  );\n  registerFilter(\n    FilterType.BOOLEAN,\n    createStandardFilter(\"boolean\", BooleanFilter, FilterOperator.EQ, {\n      type: FilterType.BOOLEAN,\n      field: \"\" as any,\n    }),\n  );\n  registerFilter(\n    FilterType.MULTI_SELECT,\n    createStandardFilter(\"multi-select\", MultiSelectFilter, FilterOperator.IN, {\n      type: FilterType.MULTI_SELECT,\n      field: \"\" as any,\n    }),\n  );\n  registerFilter(\n    FilterType.RANGE,\n    createStandardFilter(\"range\", RangeFilter, FilterOperator.BETWEEN, {\n      type: FilterType.RANGE,\n      field: \"\" as any,\n    }),\n  );\n  registerFilter(\n    FilterType.SEARCH,\n    createStandardFilter(\"search\", SearchFilter, FilterOperator.CONTAINS, {\n      type: FilterType.SEARCH,\n      field: \"\" as any,\n    }),\n  );\n}\n\nfunction registerActionItems() {\n  // Register default action items\n  registerRefreshToolbarItem();\n  registerSearchToolbarItem();\n}\n\nfunction registerToolbarItems() {\n  registerActionItems();\n  registerFilterItems();\n}\n\n// Execute registration\nregisterToolbarItems();\n\nexport { registerToolbarItems, createStandardFilter, getDefaultOperator };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAS,mBAAmB,YAA+C;AACzE,SAAQ,YAAR;EACE,KAAK,WAAW,KACd,QAAO,eAAe;EACxB,KAAK,WAAW,OACd,QAAO,eAAe;EACxB,KAAK,WAAW,KACd,QAAO,eAAe;EACxB,KAAK,WAAW,OACd,QAAO,eAAe;EACxB,KAAK,WAAW,QACd,QAAO,eAAe;EACxB,KAAK,WAAW,aACd,QAAO,eAAe;EACxB,KAAK,WAAW,MACd,QAAO,eAAe;EACxB,KAAK,WAAW,OACd,QAAO,eAAe;EACxB,QACE,QAAO,eAAe;;;;;;;;;;;AAY5B,SAAS,qBACP,IACA,WACA,UACA,mBAAiD,EAAE,EACzB;CAC1B,MAAM,eAAe,oBAAoB,GAAG;CAC5C,MAAM,QAAQ,iBAAiB,SAAS;AAExC,QAAO;EACL;EACA;EACA,MAAM,gBAAgB;EACtB;EACA,cAAc,iBAAiB;EAC/B,QAAQ;GACN,GAAG;GACH;GACA;GACA,MAAM,iBAAiB,QAAS;GAChC,OAAO,iBAAiB,SAAU;GAClC;GACD;EACF;;;;;;;AAQH,SAAS,oBAAoB,IAAoB;AAE/C,KAAI,GAAG,SAAS,IAAI,CAClB,QACE,GACG,MAAM,IAAI,CACV,KACE,SAAS,KAAK,OAAO,EAAE,CAAC,aAAa,GAAG,KAAK,MAAM,EAAE,CAAC,aAAa,CACrE,CACA,KAAK,IAAI,GAAG;CAKnB,MAAM,iBAAiB,GAAG,QAAQ,YAAY,MAAM,CAAC,MAAM;AAC3D,QACE,eAAe,OAAO,EAAE,CAAC,aAAa,GAAG,eAAe,MAAM,EAAE,GAAG;;AAIvE,SAAS,sBAAsB;AAE7B,gBACE,WAAW,MACX,qBAAqB,QAAQ,YAAY,eAAe,UAAU;EAChE,MAAM,WAAW;EACjB,OAAO;EACR,CAAC,CACH;AACD,gBACE,WAAW,QACX,qBAAqB,UAAU,cAAc,eAAe,IAAI;EAC9D,MAAM,WAAW;EACjB,OAAO;EACR,CAAC,CACH;AACD,gBACE,WAAW,MACX,qBAAqB,QAAQ,YAAY,eAAe,IAAI;EAC1D,MAAM,WAAW;EACjB,OAAO;EACR,CAAC,CACH;AACD,gBACE,WAAW,QACX,qBAAqB,UAAU,cAAc,eAAe,IAAI;EAC9D,MAAM,WAAW;EACjB,OAAO;EACR,CAAC,CACH;AACD,gBACE,WAAW,SACX,qBAAqB,WAAW,eAAe,eAAe,IAAI;EAChE,MAAM,WAAW;EACjB,OAAO;EACR,CAAC,CACH;AACD,gBACE,WAAW,cACX,qBAAqB,gBAAgB,mBAAmB,eAAe,IAAI;EACzE,MAAM,WAAW;EACjB,OAAO;EACR,CAAC,CACH;AACD,gBACE,WAAW,OACX,qBAAqB,SAAS,aAAa,eAAe,SAAS;EACjE,MAAM,WAAW;EACjB,OAAO;EACR,CAAC,CACH;AACD,gBACE,WAAW,QACX,qBAAqB,UAAU,cAAc,eAAe,UAAU;EACpE,MAAM,WAAW;EACjB,OAAO;EACR,CAAC,CACH;;AAGH,SAAS,sBAAsB;AAE7B,6BAA4B;AAC5B,4BAA2B;;AAG7B,SAAS,uBAAuB;AAC9B,sBAAqB;AACrB,sBAAqB;;;uBAjLkD;kBAGf;eACoB;kBAYhD;eAG+B;cACF;AAiK3D,uBAAsB"}

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

@@ -0,0 +1,19 @@
+import { ComponentSize as ComponentSize$1 } from "../sizing/index.js";
+import "../index.js";
+import { UseMobileDetectionReturn } from "@lumeweb/portal-framework-ui-core";
+
+//#region src/components/data-table/useMobileDetection.d.ts
+interface UseMobileDetectionProps {
+  mobileBreakpoint?: ComponentSize$1 | string;
+}
+/**
+ * Hook to detect mobile viewport based on Tailwind CSS breakpoints
+ * @param props.mobileBreakpoint - The breakpoint at which to consider the viewport mobile
+ * @returns isMobile state and current breakpoint
+ */
+declare function useMobileDetection({
+  mobileBreakpoint
+}?: UseMobileDetectionProps): UseMobileDetectionReturn;
+//#endregion
+export { useMobileDetection };
+//# sourceMappingURL=useMobileDetection.d.ts.map

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

@@ -0,0 +1,38 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { ComponentSize as ComponentSize$1 } from "../sizing/index.js";
+import { init_components } from "../index.js";
+import { useMobileDetection as useMobileDetection$1 } from "@lumeweb/portal-framework-ui-core";
+
+//#region src/components/data-table/useMobileDetection.ts
+/**
+* Hook to detect mobile viewport based on Tailwind CSS breakpoints
+* @param props.mobileBreakpoint - The breakpoint at which to consider the viewport mobile
+* @returns isMobile state and current breakpoint
+*/
+function useMobileDetection({ mobileBreakpoint = ComponentSize$1.SM } = {}) {
+	return useMobileDetection$1({ breakpoint: Object.values(ComponentSize$1).includes(mobileBreakpoint) ? breakpointSizeMap[mobileBreakpoint] : mobileBreakpoint });
+}
+var breakpointSizeMap;
+var init_useMobileDetection = __esmMin(() => {
+	init_components();
+	breakpointSizeMap = {
+		[ComponentSize$1.TWO_XL]: "2xl",
+		[ComponentSize$1.THREE_XL]: "3xl",
+		[ComponentSize$1.FOUR_XL]: "4xl",
+		[ComponentSize$1.FIVE_XL]: "5xl",
+		[ComponentSize$1.SIX_XL]: "6xl",
+		[ComponentSize$1.SEVEN_XL]: "7xl",
+		[ComponentSize$1.AUTO]: "auto",
+		[ComponentSize$1.FULL]: "full",
+		[ComponentSize$1.LG]: "lg",
+		[ComponentSize$1.MD]: "md",
+		[ComponentSize$1.SM]: "sm",
+		[ComponentSize$1.XL]: "xl",
+		[ComponentSize$1.XS]: "xs"
+	};
+});
+
+//#endregion
+init_useMobileDetection();
+export { init_useMobileDetection, useMobileDetection };
+//# sourceMappingURL=useMobileDetection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMobileDetection.js","names":["ComponentSize","useCoreMobileDetection"],"sources":["../../../../src/components/data-table/useMobileDetection.ts"],"sourcesContent":["import { useMobileDetection as useCoreMobileDetection, type UseMobileDetectionReturn } from \"@lumeweb/portal-framework-ui-core\";\nimport { ComponentSize } from \"@/components\";\n\ninterface UseMobileDetectionProps {\n  mobileBreakpoint?: ComponentSize | string;\n}\n\n// Map ComponentSize breakpoints to Tailwind CSS breakpoint names\nconst breakpointSizeMap: Record<ComponentSize, string> = {\n  [ComponentSize.TWO_XL]: \"2xl\",\n  [ComponentSize.THREE_XL]: \"3xl\",\n  [ComponentSize.FOUR_XL]: \"4xl\",\n  [ComponentSize.FIVE_XL]: \"5xl\",\n  [ComponentSize.SIX_XL]: \"6xl\",\n  [ComponentSize.SEVEN_XL]: \"7xl\",\n  [ComponentSize.AUTO]: \"auto\",\n  [ComponentSize.FULL]: \"full\",\n  [ComponentSize.LG]: \"lg\",\n  [ComponentSize.MD]: \"md\",\n  [ComponentSize.SM]: \"sm\",\n  [ComponentSize.XL]: \"xl\",\n  [ComponentSize.XS]: \"xs\",\n};\n\n/**\n * Hook to detect mobile viewport based on Tailwind CSS breakpoints\n * @param props.mobileBreakpoint - The breakpoint at which to consider the viewport mobile\n * @returns isMobile state and current breakpoint\n */\nfunction useMobileDetection({\n  mobileBreakpoint = ComponentSize.SM,\n}: UseMobileDetectionProps = {}): UseMobileDetectionReturn {\n  // Convert ComponentSize to Tailwind breakpoint name if needed\n  const breakpointName = Object.values(ComponentSize).includes(\n    mobileBreakpoint as ComponentSize,\n  )\n    ? breakpointSizeMap[mobileBreakpoint as ComponentSize]\n    : mobileBreakpoint;\n\n  return useCoreMobileDetection({ breakpoint: breakpointName });\n}\n\nexport { useMobileDetection };\n"],"mappings":";;;;;;;;;;;AA6BA,SAAS,mBAAmB,EAC1B,mBAAmBA,gBAAc,OACN,EAAE,EAA4B;AAQzD,QAAOC,qBAAuB,EAAE,YANT,OAAO,OAAOD,gBAAc,CAAC,SAClD,iBACD,GACG,kBAAkB,oBAClB,kBAEwD,CAAC;;;;kBAtClB;CAOvC,oBAAmD;GACtDA,gBAAc,SAAS;GACvBA,gBAAc,WAAW;GACzBA,gBAAc,UAAU;GACxBA,gBAAc,UAAU;GACxBA,gBAAc,SAAS;GACvBA,gBAAc,WAAW;GACzBA,gBAAc,OAAO;GACrBA,gBAAc,OAAO;GACrBA,gBAAc,KAAK;GACnBA,gBAAc,KAAK;GACnBA,gBAAc,KAAK;GACnBA,gBAAc,KAAK;GACnBA,gBAAc,KAAK;EACrB"}

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

@@ -0,0 +1,57 @@
+import { BaseRecord } from "@refinedev/core";
+import React from "react";
+import { Cell, Row } from "@tanstack/react-table";
+
+//#region src/components/data-table/useTableHandlers.d.ts
+interface UseTableRowHandlersProps<TData extends BaseRecord> {
+  onRowClick?: (row: Row<TData>) => void;
+  getRowProps?: (row: Row<TData>) => React.HTMLAttributes<HTMLTableRowElement>;
+}
+interface UseTableCellHandlersProps<TData extends BaseRecord> {
+  getCellProps?: (cell: Cell<TData, unknown>) => React.HTMLAttributes<HTMLTableCellElement>;
+}
+interface UseMobileColumnHidingProps {
+  responsive?: boolean | {
+    hideOnMobile?: boolean;
+  };
+  hideColumnsOnMobile?: string[];
+}
+/**
+ * Type for the header cell handler function
+ */
+type HeaderCellHandler = (header: {
+  column: {
+    columnDef: {
+      meta?: {
+        headerClassName?: string;
+      };
+    };
+  };
+}) => React.HTMLAttributes<HTMLTableCellElement>;
+/**
+ * Hook to generate row props with click handling and accessibility
+ */
+declare function useTableRowHandlers<TData extends BaseRecord>({
+  onRowClick,
+  getRowProps
+}: UseTableRowHandlersProps<TData>): (row: Row<TData>) => React.HTMLAttributes<HTMLTableRowElement>;
+/**
+ * Hook to generate cell props with meta class names
+ */
+declare function useTableCellHandlers<TData extends BaseRecord>({
+  getCellProps
+}: UseTableCellHandlersProps<TData>): (cell: Cell<TData, unknown>) => React.HTMLAttributes<HTMLTableCellElement>;
+/**
+ * Hook to determine which columns should be hidden on mobile
+ */
+declare function useMobileColumnHiding({
+  responsive,
+  hideColumnsOnMobile
+}: UseMobileColumnHidingProps): Set<string>;
+/**
+ * Hook to generate header cell props with meta class names
+ */
+declare function useTableHeaderCellHandlers(): HeaderCellHandler;
+//#endregion
+export { useMobileColumnHiding, useTableCellHandlers, useTableHeaderCellHandlers, useTableRowHandlers };
+//# sourceMappingURL=useTableHandlers.d.ts.map

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

@@ -0,0 +1,72 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { cn, useMobileDetection } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+
+//#region src/components/data-table/useTableHandlers.ts
+/**
+* Hook to generate row props with click handling and accessibility
+*/
+function useTableRowHandlers({ onRowClick, getRowProps }) {
+	return React.useCallback((row) => {
+		const baseProps = getRowProps?.(row) || {};
+		if (!onRowClick) return baseProps;
+		return {
+			...baseProps,
+			onClick: () => onRowClick(row),
+			tabIndex: 0,
+			role: "button",
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					if (e.key === " ") e.preventDefault();
+					onRowClick(row);
+				}
+			},
+			className: cn("cursor-pointer hover:bg-muted", baseProps.className)
+		};
+	}, [onRowClick, getRowProps]);
+}
+/**
+* Hook to generate cell props with meta class names
+*/
+function useTableCellHandlers({ getCellProps }) {
+	return React.useCallback((cell) => {
+		const baseProps = getCellProps?.(cell) || {};
+		return {
+			...baseProps,
+			className: cn(cell.column.columnDef.meta?.cellClassName, baseProps.className)
+		};
+	}, [getCellProps]);
+}
+/**
+* Hook to determine which columns should be hidden on mobile
+*/
+function useMobileColumnHiding({ responsive = false, hideColumnsOnMobile = [] }) {
+	const isMobile = useMobileDetection();
+	return React.useMemo(() => {
+		if (!responsive) return /* @__PURE__ */ new Set();
+		const hiddenColumns = /* @__PURE__ */ new Set();
+		if (isMobile) {
+			if (typeof responsive === "boolean") hideColumnsOnMobile.forEach((id) => hiddenColumns.add(id));
+			else if (responsive.hideOnMobile) hideColumnsOnMobile.forEach((id) => hiddenColumns.add(id));
+		}
+		return hiddenColumns;
+	}, [
+		responsive,
+		isMobile,
+		hideColumnsOnMobile
+	]);
+}
+/**
+* Hook to generate header cell props with meta class names
+*/
+function useTableHeaderCellHandlers() {
+	return React.useCallback((header) => {
+		return { className: cn(header.column.columnDef.meta?.headerClassName) };
+	}, []);
+}
+var init_useTableHandlers = __esmMin(() => {});
+
+//#endregion
+init_useTableHandlers();
+export { init_useTableHandlers, useMobileColumnHiding, useTableCellHandlers, useTableHeaderCellHandlers, useTableRowHandlers };
+//# sourceMappingURL=useTableHandlers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableHandlers.js","names":[],"sources":["../../../../src/components/data-table/useTableHandlers.ts"],"sourcesContent":["import { Cell, Row } from \"@tanstack/react-table\";\nimport { cn, useMobileDetection } from \"@lumeweb/portal-framework-ui-core\";\nimport { BaseRecord } from \"@refinedev/core\";\nimport React from \"react\";\n\ninterface UseTableRowHandlersProps<TData extends BaseRecord> {\n  onRowClick?: (row: Row<TData>) => void;\n  getRowProps?: (row: Row<TData>) => React.HTMLAttributes<HTMLTableRowElement>;\n}\n\ninterface UseTableCellHandlersProps<TData extends BaseRecord> {\n  getCellProps?: (\n    cell: Cell<TData, unknown>,\n  ) => React.HTMLAttributes<HTMLTableCellElement>;\n}\n\ninterface UseMobileColumnHidingProps {\n  responsive?: boolean | { hideOnMobile?: boolean };\n  hideColumnsOnMobile?: string[];\n}\n\n/**\n * Type for the header cell handler function\n */\ntype HeaderCellHandler = (header: {\n  column: { columnDef: { meta?: { headerClassName?: string } } };\n}) => React.HTMLAttributes<HTMLTableCellElement>;\n\n/**\n * Hook to generate row props with click handling and accessibility\n */\nexport function useTableRowHandlers<TData extends BaseRecord>({\n  onRowClick,\n  getRowProps,\n}: UseTableRowHandlersProps<TData>): (\n  row: Row<TData>,\n) => React.HTMLAttributes<HTMLTableRowElement> {\n  return React.useCallback(\n    (row: Row<TData>) => {\n      const baseProps = getRowProps?.(row) || {};\n\n      if (!onRowClick) {\n        return baseProps;\n      }\n\n      return {\n        ...baseProps,\n        onClick: () => onRowClick(row),\n        tabIndex: 0,\n        role: \"button\" as const,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (e.key === \"Enter\" || e.key === \" \") {\n            if (e.key === \" \") {\n              e.preventDefault();\n            }\n            onRowClick(row);\n          }\n        },\n        className: cn(\"cursor-pointer hover:bg-muted\", baseProps.className),\n      };\n    },\n    [onRowClick, getRowProps],\n  );\n}\n\n/**\n * Hook to generate cell props with meta class names\n */\nexport function useTableCellHandlers<TData extends BaseRecord>({\n  getCellProps,\n}: UseTableCellHandlersProps<TData>): (\n  cell: Cell<TData, unknown>,\n) => React.HTMLAttributes<HTMLTableCellElement> {\n  return React.useCallback(\n    (cell: Cell<TData, unknown>) => {\n      const baseProps = getCellProps?.(cell) || {};\n\n      return {\n        ...baseProps,\n        className: cn(\n          cell.column.columnDef.meta?.cellClassName as string,\n          baseProps.className,\n        ),\n      };\n    },\n    [getCellProps],\n  );\n}\n\n/**\n * Hook to determine which columns should be hidden on mobile\n */\nexport function useMobileColumnHiding({\n  responsive = false,\n  hideColumnsOnMobile = [],\n}: UseMobileColumnHidingProps): Set<string> {\n  const isMobile = useMobileDetection();\n\n  return React.useMemo(() => {\n    if (!responsive) {\n      return new Set();\n    }\n\n    const hiddenColumns = new Set<string>();\n\n    if (isMobile) {\n      if (typeof responsive === \"boolean\") {\n        // If responsive is true, hide all columns in hideColumnsOnMobile\n        hideColumnsOnMobile.forEach((id) => hiddenColumns.add(id));\n      } else {\n        // If responsive is an object with hideOnMobile property\n        if (responsive.hideOnMobile) {\n          hideColumnsOnMobile.forEach((id) => hiddenColumns.add(id));\n        }\n      }\n    }\n    return hiddenColumns;\n  }, [responsive, isMobile, hideColumnsOnMobile]);\n}\n\n/**\n * Hook to generate header cell props with meta class names\n */\nexport function useTableHeaderCellHandlers(): HeaderCellHandler {\n  return React.useCallback((header) => {\n    return {\n      className: cn(header.column.columnDef.meta?.headerClassName as string),\n    };\n  }, []);\n}\n"],"mappings":";;;;;;;;AA+BA,SAAgB,oBAA8C,EAC5D,YACA,eAG6C;AAC7C,QAAO,MAAM,aACV,QAAoB;EACnB,MAAM,YAAY,cAAc,IAAI,IAAI,EAAE;AAE1C,MAAI,CAAC,WACH,QAAO;AAGT,SAAO;GACL,GAAG;GACH,eAAe,WAAW,IAAI;GAC9B,UAAU;GACV,MAAM;GACN,YAAY,MAA2B;AACrC,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,SAAI,EAAE,QAAQ,IACZ,GAAE,gBAAgB;AAEpB,gBAAW,IAAI;;;GAGnB,WAAW,GAAG,iCAAiC,UAAU,UAAU;GACpE;IAEH,CAAC,YAAY,YAAY,CAC1B;;;;;AAMH,SAAgB,qBAA+C,EAC7D,gBAG8C;AAC9C,QAAO,MAAM,aACV,SAA+B;EAC9B,MAAM,YAAY,eAAe,KAAK,IAAI,EAAE;AAE5C,SAAO;GACL,GAAG;GACH,WAAW,GACT,KAAK,OAAO,UAAU,MAAM,eAC5B,UAAU,UACX;GACF;IAEH,CAAC,aAAa,CACf;;;;;AAMH,SAAgB,sBAAsB,EACpC,aAAa,OACb,sBAAsB,EAAE,IACkB;CAC1C,MAAM,WAAW,oBAAoB;AAErC,QAAO,MAAM,cAAc;AACzB,MAAI,CAAC,WACH,wBAAO,IAAI,KAAK;EAGlB,MAAM,gCAAgB,IAAI,KAAa;AAEvC,MAAI,UACF;OAAI,OAAO,eAAe,UAExB,qBAAoB,SAAS,OAAO,cAAc,IAAI,GAAG,CAAC;YAGtD,WAAW,aACb,qBAAoB,SAAS,OAAO,cAAc,IAAI,GAAG,CAAC;;AAIhE,SAAO;IACN;EAAC;EAAY;EAAU;EAAoB,CAAC;;;;;AAMjD,SAAgB,6BAAgD;AAC9D,QAAO,MAAM,aAAa,WAAW;AACnC,SAAO,EACL,WAAW,GAAG,OAAO,OAAO,UAAU,MAAM,gBAA0B,EACvE;IACA,EAAE,CAAC"}

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

@@ -0,0 +1,16 @@
+import { TableLayoutType } from "./DataTable.types.js";
+
+//#region src/components/data-table/useTableLayoutSelector.d.ts
+interface UseTableLayoutSelectorProps {
+  responsive?: boolean;
+  mobileLayout?: TableLayoutType;
+  mobileBreakpoint?: string;
+}
+declare function useTableLayoutSelector({
+  responsive,
+  mobileLayout,
+  mobileBreakpoint
+}: UseTableLayoutSelectorProps): TableLayoutType.TABLE | TableLayoutType.STACKED;
+//#endregion
+export { useTableLayoutSelector };
+//# sourceMappingURL=useTableLayoutSelector.d.ts.map

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

@@ -0,0 +1,18 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { TableLayoutType, init_DataTable_types } from "./DataTable.types.js";
+import { init_useMobileDetection, useMobileDetection } from "./useMobileDetection.js";
+
+//#region src/components/data-table/useTableLayoutSelector.ts
+function useTableLayoutSelector({ responsive = false, mobileLayout = TableLayoutType.AUTO, mobileBreakpoint = "sm" }) {
+	const { isMobile } = useMobileDetection({ breakpoint: mobileBreakpoint });
+	return responsive && isMobile && (mobileLayout === TableLayoutType.STACKED || mobileLayout === TableLayoutType.AUTO) ? TableLayoutType.STACKED : TableLayoutType.TABLE;
+}
+var init_useTableLayoutSelector = __esmMin(() => {
+	init_useMobileDetection();
+	init_DataTable_types();
+});
+
+//#endregion
+init_useTableLayoutSelector();
+export { init_useTableLayoutSelector, useTableLayoutSelector };
+//# sourceMappingURL=useTableLayoutSelector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableLayoutSelector.js","names":[],"sources":["../../../../src/components/data-table/useTableLayoutSelector.ts"],"sourcesContent":["import { useMobileDetection } from \"./useMobileDetection\";\nimport { TableLayoutType } from \"./DataTable.types\";\n\ninterface UseTableLayoutSelectorProps {\n  responsive?: boolean;\n  mobileLayout?: TableLayoutType;\n  mobileBreakpoint?: string;\n}\n\nfunction useTableLayoutSelector({\n  responsive = false,\n  mobileLayout = TableLayoutType.AUTO,\n  mobileBreakpoint = 'sm'\n}: UseTableLayoutSelectorProps) {\n  const { isMobile } = useMobileDetection({ breakpoint: mobileBreakpoint });\n  \n  // Determine if we should show stacked layout\n  const shouldShowStackedLayout = \n    responsive && \n    isMobile && \n    (mobileLayout === TableLayoutType.STACKED || mobileLayout === TableLayoutType.AUTO);\n  \n  return shouldShowStackedLayout ? TableLayoutType.STACKED : TableLayoutType.TABLE;\n}\n\nexport { useTableLayoutSelector };\n"],"mappings":";;;;;AASA,SAAS,uBAAuB,EAC9B,aAAa,OACb,eAAe,gBAAgB,MAC/B,mBAAmB,QACW;CAC9B,MAAM,EAAE,aAAa,mBAAmB,EAAE,YAAY,kBAAkB,CAAC;AAQzE,QAJE,cACA,aACC,iBAAiB,gBAAgB,WAAW,iBAAiB,gBAAgB,QAE/C,gBAAgB,UAAU,gBAAgB;;;0BAtBnB;uBACN"}

package/dist/esm/components/dialog/Dialog.context.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+
+//#region src/components/dialog/Dialog.context.d.ts
+
+/**
+ * Required provider that maintains dialog state and context.
+ * Must wrap any components that will use dialogs.
+ */
+declare function DialogProvider({
+  children
+}: {
+  children: React.ReactNode;
+}): any;
+declare const useDialogState: () => any;
+declare const useDialogActions: () => any;
+declare const useDialog: () => any;
+//#endregion
+export { DialogProvider, useDialog, useDialogActions, useDialogState };
+//# sourceMappingURL=Dialog.context.d.ts.map

package/dist/esm/components/dialog/Dialog.context.js

@@ -0,0 +1,88 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { DialogTypes, init_Dialog_types } from "./Dialog.types.js";
+import { DialogActionsContext, init_DialogActions_context } from "./DialogActions.context.js";
+import { DialogStateContext, init_DialogState_context } from "./DialogState.context.js";
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/dialog/Dialog.context.tsx
+/**
+* Required provider that maintains dialog state and context.
+* Must wrap any components that will use dialogs.
+*/
+function DialogProvider({ children }) {
+	const [dialogStack, setDialogStack] = useState([]);
+	const _formMethods = useRef(void 0);
+	const currentDialog = dialogStack[dialogStack.length - 1];
+	useEffect(() => {
+		return () => {};
+	}, []);
+	const setFormMethods = useCallback((methods) => {
+		_formMethods.current = methods;
+	}, []);
+	const openDialog = useCallback((config) => {
+		setDialogStack((prev) => [...prev, config]);
+	}, []);
+	const closeDialog = useCallback((source = "programmatic") => {
+		setDialogStack((prev) => {
+			const newStack = prev.slice(0, -1);
+			const closedDialog = prev[prev.length - 1];
+			if (closedDialog && (closedDialog.type === DialogTypes.CONFIRM || closedDialog.type === DialogTypes.FORM)) {
+				if (source === "user") closedDialog.onCancel?.(source);
+			}
+			return newStack;
+		});
+	}, []);
+	const replaceDialog = useCallback((newDialog) => {
+		setDialogStack((prev) => {
+			return [...prev.slice(0, -1), newDialog];
+		});
+	}, []);
+	const stateValue = useMemo(() => ({
+		currentDialog,
+		formMethods: _formMethods
+	}), [currentDialog, _formMethods]);
+	const actionsValue = useMemo(() => ({
+		closeDialog,
+		openDialog,
+		replaceDialog,
+		setFormMethods
+	}), [
+		openDialog,
+		closeDialog,
+		replaceDialog,
+		setFormMethods
+	]);
+	return /* @__PURE__ */ jsx(DialogStateContext.Provider, {
+		value: stateValue,
+		children: /* @__PURE__ */ jsx(DialogActionsContext.Provider, {
+			value: actionsValue,
+			children
+		})
+	});
+}
+var useDialogState, useDialogActions, useDialog;
+var init_Dialog_context = __esmMin(() => {
+	init_Dialog_types();
+	init_DialogActions_context();
+	init_DialogState_context();
+	useDialogState = () => useContext(DialogStateContext);
+	useDialogActions = () => useContext(DialogActionsContext);
+	useDialog = () => {
+		const state = useDialogState();
+		const actions = useDialogActions();
+		return {
+			...state,
+			...state.currentDialog ? actions : {
+				closeDialog: actions.closeDialog,
+				openDialog: actions.openDialog,
+				replaceDialog: actions.replaceDialog
+			}
+		};
+	};
+});
+
+//#endregion
+init_Dialog_context();
+export { DialogProvider, init_Dialog_context, useDialog, useDialogActions, useDialogState };
+//# sourceMappingURL=Dialog.context.js.map

package/dist/esm/components/dialog/Dialog.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.context.js","names":[],"sources":["../../../../src/components/dialog/Dialog.context.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useMemo, useRef, useState, } from \"react\";\n\nimport { DialogConfig, DialogTypes } from \"./Dialog.types\";\nimport { DialogActionsContext, DialogActionsContextValue, } from \"./DialogActions.context\";\nimport { DialogStateContext, DialogStateContextValue, } from \"./DialogState.context\";\n\n/**\n * Required provider that maintains dialog state and context.\n * Must wrap any components that will use dialogs.\n */\nexport function DialogProvider({ children }: { children: React.ReactNode }) {\n  const [dialogStack, setDialogStack] = useState<DialogConfig[]>([]);\n  const _formMethods = useRef<any>(undefined);\n  const currentDialog = dialogStack[dialogStack.length - 1];\n\n  useEffect(() => {\n    // Debug logging removed\n    return () => {\n      // Debug logging removed\n    };\n  }, []);\n\n  // Stabilize setFormMethods\n  const setFormMethods = useCallback((methods: any) => {\n    // Debug logging removed\n    _formMethods.current = methods;\n  }, []);\n\n  const openDialog = useCallback((config: DialogConfig) => {\n    // Debug logging removed\n    setDialogStack((prev) => [...prev, config]);\n  }, []);\n\n  const closeDialog = useCallback(\n    (source: \"programmatic\" | \"user\" = \"programmatic\") => {\n      // Debug logging removed\n      setDialogStack((prev) => {\n        const newStack = prev.slice(0, -1);\n        const closedDialog = prev[prev.length - 1];\n\n        // Only call onCancel for user-initiated closures\n        if (\n          closedDialog &&\n          (closedDialog.type === DialogTypes.CONFIRM ||\n            closedDialog.type === DialogTypes.FORM)\n        ) {\n          if (source === \"user\") {\n            closedDialog.onCancel?.(source);\n          }\n        }\n        return newStack;\n      });\n    },\n    [],\n  );\n\n  const replaceDialog = useCallback((newDialog: DialogConfig) => {\n    // Debug logging removed\n    setDialogStack((prev) => {\n      const newStack = prev.slice(0, -1);\n      return [...newStack, newDialog];\n    });\n  }, []);\n\n  const stateValue = useMemo<DialogStateContextValue>(\n    () => ({\n      currentDialog,\n      formMethods: _formMethods,\n    }),\n    [currentDialog, _formMethods],\n  );\n\n  const actionsValue = useMemo<DialogActionsContextValue>(\n    () => ({\n      closeDialog,\n      openDialog,\n      replaceDialog,\n      setFormMethods,\n    }),\n    [openDialog, closeDialog, replaceDialog, setFormMethods],\n  );\n\n  return (\n    <DialogStateContext.Provider value={stateValue}>\n      <DialogActionsContext.Provider value={actionsValue}>\n        {children}\n      </DialogActionsContext.Provider>\n    </DialogStateContext.Provider>\n  );\n}\n\nexport const useDialogState = () => useContext(DialogStateContext);\nexport const useDialogActions = () => useContext(DialogActionsContext);\nexport const useDialog = () => {\n  const state = useDialogState();\n  const actions = useDialogActions();\n\n  return {\n    ...state,\n    ...(state.currentDialog\n      ? actions\n      : {\n          closeDialog: actions.closeDialog,\n          openDialog: actions.openDialog,\n          replaceDialog: actions.replaceDialog,\n        }),\n  };\n};\n"],"mappings":";;;;;;;;;;;;AAUA,SAAgB,eAAe,EAAE,YAA2C;CAC1E,MAAM,CAAC,aAAa,kBAAkB,SAAyB,EAAE,CAAC;CAClE,MAAM,eAAe,OAAY,OAAU;CAC3C,MAAM,gBAAgB,YAAY,YAAY,SAAS;AAEvD,iBAAgB;AAEd,eAAa;IAGZ,EAAE,CAAC;CAGN,MAAM,iBAAiB,aAAa,YAAiB;AAEnD,eAAa,UAAU;IACtB,EAAE,CAAC;CAEN,MAAM,aAAa,aAAa,WAAyB;AAEvD,kBAAgB,SAAS,CAAC,GAAG,MAAM,OAAO,CAAC;IAC1C,EAAE,CAAC;CAEN,MAAM,cAAc,aACjB,SAAkC,mBAAmB;AAEpD,kBAAgB,SAAS;GACvB,MAAM,WAAW,KAAK,MAAM,GAAG,GAAG;GAClC,MAAM,eAAe,KAAK,KAAK,SAAS;AAGxC,OACE,iBACC,aAAa,SAAS,YAAY,WACjC,aAAa,SAAS,YAAY,OAEpC;QAAI,WAAW,OACb,cAAa,WAAW,OAAO;;AAGnC,UAAO;IACP;IAEJ,EAAE,CACH;CAED,MAAM,gBAAgB,aAAa,cAA4B;AAE7D,kBAAgB,SAAS;AAEvB,UAAO,CAAC,GADS,KAAK,MAAM,GAAG,GAAG,EACb,UAAU;IAC/B;IACD,EAAE,CAAC;CAEN,MAAM,aAAa,eACV;EACL;EACA,aAAa;EACd,GACD,CAAC,eAAe,aAAa,CAC9B;CAED,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACD,GACD;EAAC;EAAY;EAAa;EAAe;EAAe,CACzD;AAED,QACE,oBAAC,mBAAmB;EAAS,OAAO;YAClC,oBAAC,qBAAqB;GAAS,OAAO;GACnC;IAC6B;GACJ;;;;oBArFyB;6BACgC;2BACN;CAuFxE,uBAAuB,WAAW,mBAAmB;CACrD,yBAAyB,WAAW,qBAAqB;CACzD,kBAAkB;EAC7B,MAAM,QAAQ,gBAAgB;EAC9B,MAAM,UAAU,kBAAkB;AAElC,SAAO;GACL,GAAG;GACH,GAAI,MAAM,gBACN,UACA;IACE,aAAa,QAAQ;IACrB,YAAY,QAAQ;IACpB,eAAe,QAAQ;IACxB;GACN"}

package/dist/esm/components/dialog/Dialog.context.spec.d.ts

@@ -0,0 +1 @@
+export { };