@lumeweb/portal-framework-ui 0.0.1 → 0.1.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"search.js","names":[],"sources":["../../../../../../src/components/data-table/toolbarItems/items/search.tsx"],"sourcesContent":["import { Search } from \"lucide-react\";\nimport React, { useEffect } from \"react\";\nimport { useDebounce } from \"use-debounce\";\nimport type {\n  ToolbarFilterComponentProps,\n  ToolbarFilterItem,\n} from \"@/components/data-table/DataTable.types\";\nimport { registerFilter } from \"@/components/data-table/ToolbarRegistry\";\nimport { ToolbarItemType } from \"@/components/data-table/DataTable.types\";\nimport {\n  FilterOperator,\n  FilterType,\n  LogicalFilterOperator,\n  useRefineTable,\n} from \"@/components\";\n\nfunction SearchToolbarItem({\n  value,\n  onChange,\n  config,\n}: Omit<ToolbarFilterComponentProps<any>, \"context\">) {\n  const [debouncedValue] = useDebounce(value, 300);\n  const { setFilters } = useRefineTable<any>();\n  const placeholder = config?.placeholder || \"Search...\";\n\n  // Handle refine contexts search\n  useEffect(() => {\n    if (setFilters && debouncedValue !== undefined) {\n      const filters = debouncedValue\n        ? [\n            {\n              field: String(config?.field || \"q\"),\n              operator: (config?.operator ||\n                \"contains\") as LogicalFilterOperator,\n              value: debouncedValue,\n            },\n          ]\n        : [];\n      setFilters(filters);\n    }\n  }, [debouncedValue, setFilters, config?.field, config?.operator]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (onChange) {\n      onChange(e.target.value);\n    }\n  };\n\n  return (\n    <div className=\"relative\">\n      <Search className=\"absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 transform text-gray-400\" />\n      <input\n        type=\"text\"\n        placeholder={placeholder}\n        value={value || \"\"}\n        onChange={handleChange}\n        className=\"rounded border px-2 py-1 pl-8\"\n      />\n    </div>\n  );\n}\n\nfunction registerSearchToolbarItem() {\n  const item: ToolbarFilterItem<any> = {\n    type: ToolbarItemType.FILTER,\n    id: \"search\",\n    label: \"Search\",\n    component: ({\n      value,\n      onChange,\n      config,\n    }: ToolbarFilterComponentProps<any>) => (\n      <SearchToolbarItem\n        value={value}\n        onChange={onChange}\n        config={config}\n      />\n    ),\n    initialValue: \"\",\n    config: {\n      id: \"search\",\n      type: FilterType.TEXT,\n      label: \"Search\",\n      field: \"q\",\n      operator: FilterOperator.CONTAINS,\n      placeholder: \"Search...\",\n    },\n  };\n\n  registerFilter(\"search\", item);\n}\n\nexport { registerSearchToolbarItem };\nexport type { ToolbarFilterComponentProps as SearchToolbarItemProps };\n"],"mappings":";;;;;;;;;;;AAgBA,SAAS,kBAAkB,EACzB,OACA,UACA,UACoD;CACpD,MAAM,CAAC,kBAAkB,YAAY,OAAO,IAAI;CAChD,MAAM,EAAE,eAAe,gBAAqB;CAC5C,MAAM,cAAc,QAAQ,eAAe;AAG3C,iBAAgB;AACd,MAAI,cAAc,mBAAmB,OAWnC,YAVgB,iBACZ,CACE;GACE,OAAO,OAAO,QAAQ,SAAS,IAAI;GACnC,UAAW,QAAQ,YACjB;GACF,OAAO;GACR,CACF,GACD,EAAE,CACa;IAEpB;EAAC;EAAgB;EAAY,QAAQ;EAAO,QAAQ;EAAS,CAAC;CAEjE,MAAM,gBAAgB,MAA2C;AAC/D,MAAI,SACF,UAAS,EAAE,OAAO,MAAM;;AAI5B,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD,EAAQ,WAAU,4EAA6E,GAC/F,oBAAC,SAAD;GACE,MAAK;GACQ;GACb,OAAO,SAAS;GAChB,UAAU;GACV,WAAU;GACV,EACE;;;AAIV,SAAS,4BAA4B;AA2BnC,gBAAe,UAAU;EAzBvB;EACA,IAAI;EACJ,OAAO;EACP,YAAY,EACV,OACA,UACA,aAEA,oBAAC,mBAAD;GACS;GACG;GACF;GACR;EAEJ,cAAc;EACd,QAAQ;GACN,IAAI;GACJ;GACA,OAAO;GACP,OAAO;GACP;GACA,aAAa;GACd;EAG0B,CAAC"}

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

@@ -0,0 +1,16 @@
+import { ToolbarItemComponentProps, ToolbarItemType, ToolbarSeparatorItem } from "../../DataTable.types.js";
+import { BaseRecord } from "@refinedev/core";
+
+//#region src/components/data-table/toolbarItems/items/separator.d.ts
+interface ToolbarSeparatorItemComponentProps<TData extends BaseRecord> extends ToolbarItemComponentProps<TData> {
+  item: ToolbarSeparatorItem;
+}
+declare function ToolbarSeparatorItemComponent<TData extends BaseRecord>({
+  item
+}: ToolbarSeparatorItemComponentProps<TData>): any;
+declare function registerSeparatorToolbarItem<TData extends BaseRecord>(id: string, item: Omit<ToolbarSeparatorItem, "type"> & {
+  type?: ToolbarItemType.SEPARATOR;
+}): void;
+//#endregion
+export { ToolbarSeparatorItemComponent, registerSeparatorToolbarItem };
+//# sourceMappingURL=separator.d.ts.map

package/dist/esm/components/data-table/toolbarItems/items/separator.js

@@ -0,0 +1,20 @@
+import { ToolbarItemType } from "../../DataTable.types.js";
+import { registerAction } from "../../ToolbarRegistry.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/data-table/toolbarItems/items/separator.tsx
+function ToolbarSeparatorItemComponent({ item }) {
+	return /* @__PURE__ */ jsx("div", { className: "h-6 w-px bg-gray-300" });
+}
+function registerSeparatorToolbarItem(id, item) {
+	registerAction(id, {
+		...item,
+		type: "separator",
+		component: ToolbarSeparatorItemComponent
+	});
+}
+
+//#endregion
+export { ToolbarSeparatorItemComponent, registerSeparatorToolbarItem };
+//# sourceMappingURL=separator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","names":[],"sources":["../../../../../../src/components/data-table/toolbarItems/items/separator.tsx"],"sourcesContent":["import React from \"react\";\nimport { registerAction } from \"@/components/data-table/ToolbarRegistry\";\nimport type { ToolbarItemComponentProps } from \"@/components/data-table/DataTable.types\";\nimport { ToolbarItemType } from \"@/components/data-table/DataTable.types\";\nimport type { ToolbarSeparatorItem } from \"@/components/data-table/DataTable.types\";\nimport { BaseRecord } from \"@refinedev/core\";\n\ninterface ToolbarSeparatorItemComponentProps<TData extends BaseRecord>\n  extends ToolbarItemComponentProps<TData> {\n  item: ToolbarSeparatorItem;\n}\n\nfunction ToolbarSeparatorItemComponent<TData extends BaseRecord>({\n  item,\n}: ToolbarSeparatorItemComponentProps<TData>) {\n  return <div className=\"h-6 w-px bg-gray-300\" />;\n}\n\nfunction registerSeparatorToolbarItem<TData extends BaseRecord>(\n  id: string,\n  item: Omit<ToolbarSeparatorItem, \"type\"> & {\n    type?: ToolbarItemType.SEPARATOR;\n  },\n) {\n  const separatorItem = {\n    ...item,\n    type: ToolbarItemType.SEPARATOR,\n    component: ToolbarSeparatorItemComponent,\n  } as any;\n\n  registerAction(id, separatorItem);\n}\n\nexport { ToolbarSeparatorItemComponent, registerSeparatorToolbarItem };\n"],"mappings":";;;;;;AAYA,SAAS,8BAAwD,EAC/D,QAC4C;AAC5C,QAAO,oBAAC,OAAD,EAAK,WAAU,wBAAyB;;AAGjD,SAAS,6BACP,IACA,MAGA;AAOA,gBAAe,IAAI;EALjB,GAAG;EACH;EACA,WAAW;EAGmB,CAAC"}

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

@@ -0,0 +1,24 @@
+import { FilterConfig, FilterType, LogicalFilterOperator } from "./filters/types.js";
+import { ToolbarFilterItem } from "../DataTable.types.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,119 @@
+import { ToolbarItemType } from "../DataTable.types.js";
+import { 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 "./filters/components/index.js";
+import "./filters/index.js";
+import { registerRefreshToolbarItem } from "./items/refresh.js";
+import { registerSearchToolbarItem } from "./items/search.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 "text": return "contains";
+		case "select": return "eq";
+		case "date": return "eq";
+		case "number": return "eq";
+		case "boolean": return "eq";
+		case "multi-select": return "in";
+		case "range": return "between";
+		case "search": return "contains";
+		default: return "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: "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("text", createStandardFilter("text", TextFilter, "contains", {
+		type: "text",
+		field: ""
+	}));
+	registerFilter("select", createStandardFilter("select", SelectFilter, "eq", {
+		type: "select",
+		field: ""
+	}));
+	registerFilter("date", createStandardFilter("date", DateFilter, "eq", {
+		type: "date",
+		field: ""
+	}));
+	registerFilter("number", createStandardFilter("number", NumberFilter, "eq", {
+		type: "number",
+		field: ""
+	}));
+	registerFilter("boolean", createStandardFilter("boolean", BooleanFilter, "eq", {
+		type: "boolean",
+		field: ""
+	}));
+	registerFilter("multi-select", createStandardFilter("multi-select", MultiSelectFilter, "in", {
+		type: "multi-select",
+		field: ""
+	}));
+	registerFilter("range", createStandardFilter("range", RangeFilter, "between", {
+		type: "range",
+		field: ""
+	}));
+	registerFilter("search", createStandardFilter("search", SearchFilter, "contains", {
+		type: "search",
+		field: ""
+	}));
+}
+function registerActionItems() {
+	registerRefreshToolbarItem();
+	registerSearchToolbarItem();
+}
+function registerToolbarItems() {
+	registerActionItems();
+	registerFilterItems();
+}
+registerToolbarItems();
+
+//#endregion
+export { createStandardFilter, getDefaultOperator, 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 } from \"@/components/data-table/toolbarItems/filters/types\";\nimport type { ToolbarFilterItem } from \"@/components/data-table/DataTable.types\";\nimport { ToolbarItemType } from \"@/components/data-table/DataTable.types\";\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":";;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAS,mBAAmB,YAA+C;AACzE,SAAQ,YAAR;EACE,YACE;EACF,cACE;EACF,YACE;EACF,cACE;EACF,eACE;EACF,oBACE;EACF,aACE;EACF,cACE;EACF,QACE;;;;;;;;;;;AAYN,SAAS,qBACP,IACA,WACA,UACA,mBAAiD,EAAE,EACzB;CAC1B,MAAM,eAAe,oBAAoB,GAAG;CAC5C,MAAM,QAAQ,iBAAiB,SAAS;AAExC,QAAO;EACL;EACA;EACA;EACA;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,wBAEE,qBAAqB,QAAQ,wBAAqC;EAChE;EACA,OAAO;EACR,CAAC,CACH;AACD,0BAEE,qBAAqB,UAAU,oBAAiC;EAC9D;EACA,OAAO;EACR,CAAC,CACH;AACD,wBAEE,qBAAqB,QAAQ,kBAA+B;EAC1D;EACA,OAAO;EACR,CAAC,CACH;AACD,0BAEE,qBAAqB,UAAU,oBAAiC;EAC9D;EACA,OAAO;EACR,CAAC,CACH;AACD,2BAEE,qBAAqB,WAAW,qBAAkC;EAChE;EACA,OAAO;EACR,CAAC,CACH;AACD,gCAEE,qBAAqB,gBAAgB,yBAAsC;EACzE;EACA,OAAO;EACR,CAAC,CACH;AACD,yBAEE,qBAAqB,SAAS,wBAAqC;EACjE;EACA,OAAO;EACR,CAAC,CACH;AACD,0BAEE,qBAAqB,UAAU,0BAAuC;EACpE;EACA,OAAO;EACR,CAAC,CACH;;AAGH,SAAS,sBAAsB;AAE7B,6BAA4B;AAC5B,4BAA2B;;AAG7B,SAAS,uBAAuB;AAC9B,sBAAqB;AACrB,sBAAqB;;AAIvB,sBAAsB"}

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

@@ -0,0 +1,18 @@
+import { ComponentSize as ComponentSize$1 } from "../sizing/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,32 @@
+import { ComponentSize as ComponentSize$1 } from "../sizing/index.js";
+import "../index.js";
+import { useMobileDetection as useMobileDetection$1 } from "@lumeweb/portal-framework-ui-core";
+
+//#region src/components/data-table/useMobileDetection.ts
+const breakpointSizeMap = {
+	["2xl"]: "2xl",
+	["3xl"]: "3xl",
+	["4xl"]: "4xl",
+	["5xl"]: "5xl",
+	["6xl"]: "6xl",
+	["7xl"]: "7xl",
+	["auto"]: "auto",
+	["full"]: "full",
+	["lg"]: "lg",
+	["md"]: "md",
+	["sm"]: "sm",
+	["xl"]: "xl",
+	["xs"]: "xs"
+};
+/**
+* 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 = "sm" } = {}) {
+	return useMobileDetection$1({ breakpoint: Object.values(ComponentSize$1).includes(mobileBreakpoint) ? breakpointSizeMap[mobileBreakpoint] : mobileBreakpoint });
+}
+
+//#endregion
+export { useMobileDetection };
+//# sourceMappingURL=useMobileDetection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMobileDetection.js","names":["useCoreMobileDetection","ComponentSize"],"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":";;;;;AAQA,MAAM,oBAAmD;UAC/B;UACE;UACD;UACA;UACD;UACE;WACJ;WACA;SACF;SACA;SACA;SACA;SACA;CACrB;;;;;;AAOD,SAAS,mBAAmB,EAC1B,4BAC2B,EAAE,EAA4B;AAQzD,QAAOA,qBAAuB,EAAE,YANT,OAAO,OAAOC,gBAAc,CAAC,SAClD,iBACD,GACG,kBAAkB,oBAClB,kBAEwD,CAAC"}

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,69 @@
+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) };
+	}, []);
+}
+
+//#endregion
+export { 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,12 @@
+import { TableLayoutType } from "./DataTable.types.js";
+import { useMobileDetection } from "./useMobileDetection.js";
+
+//#region src/components/data-table/useTableLayoutSelector.ts
+function useTableLayoutSelector({ responsive = false, mobileLayout = "auto", mobileBreakpoint = "sm" }) {
+	const { isMobile } = useMobileDetection({ breakpoint: mobileBreakpoint });
+	return responsive && isMobile && (mobileLayout === "stacked" || mobileLayout === "auto") ? "stacked" : "table";
+}
+
+//#endregion
+export { 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,uBACA,mBAAmB,QACW;CAC9B,MAAM,EAAE,aAAa,mBAAmB,EAAE,YAAY,kBAAkB,CAAC;AAQzE,QAJE,cACA,aACC,8BAA4C"}

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

@@ -0,0 +1,18 @@
+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,80 @@
+import { DialogTypes } from "./Dialog.types.js";
+import { DialogActionsContext } from "./DialogActions.context.js";
+import { DialogStateContext } 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
+		})
+	});
+}
+const useDialogState = () => useContext(DialogStateContext);
+const useDialogActions = () => useContext(DialogActionsContext);
+const useDialog = () => {
+	const state = useDialogState();
+	const actions = useDialogActions();
+	return {
+		...state,
+		...state.currentDialog ? actions : {
+			closeDialog: actions.closeDialog,
+			openDialog: actions.openDialog,
+			replaceDialog: actions.replaceDialog
+		}
+	};
+};
+
+//#endregion
+export { DialogProvider, 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,GACZ,EAAE,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,UAApB;EAA6B,OAAO;YAClC,oBAAC,qBAAqB,UAAtB;GAA+B,OAAO;GACnC;GAC6B;EACJ;;AAIlC,MAAa,uBAAuB,WAAW,mBAAmB;AAClE,MAAa,yBAAyB,WAAW,qBAAqB;AACtE,MAAa,kBAAkB;CAC7B,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,UAAU,kBAAkB;AAElC,QAAO;EACL,GAAG;EACH,GAAI,MAAM,gBACN,UACA;GACE,aAAa,QAAQ;GACrB,YAAY,QAAQ;GACpB,eAAe,QAAQ;GACxB;EACN"}

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

@@ -0,0 +1,22 @@
+import { DialogConfig, DialogType } from "./Dialog.types.js";
+import { AlertDialog } from "./types/AlertDialog.js";
+import { ConfirmDialog } from "./types/ConfirmDialog.js";
+import { CustomDialog } from "./types/CustomDialog.js";
+import { FormDialog } from "./types/FormDialog.js";
+import { WizardDialog } from "./types/WizardDialog.js";
+
+//#region src/components/dialog/Dialog.registry.d.ts
+declare const dialogComponents: {
+  readonly alert: typeof AlertDialog;
+  readonly confirm: typeof ConfirmDialog;
+  readonly custom: typeof CustomDialog;
+  readonly form: typeof FormDialog;
+  readonly wizard_form: typeof WizardDialog;
+};
+declare function getDialogComponent(type: DialogType): typeof AlertDialog | typeof ConfirmDialog | typeof CustomDialog | typeof FormDialog | typeof WizardDialog;
+declare function isRegisteredDialogType(config?: DialogConfig): config is DialogConfig & {
+  type: DialogType;
+};
+//#endregion
+export { dialogComponents, getDialogComponent, isRegisteredDialogType };
+//# sourceMappingURL=Dialog.registry.d.ts.map

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

@@ -0,0 +1,24 @@
+import { AlertDialog } from "./types/AlertDialog.js";
+import { ConfirmDialog } from "./types/ConfirmDialog.js";
+import { CustomDialog } from "./types/CustomDialog.js";
+import { FormDialog } from "./types/FormDialog.js";
+import { WizardDialog } from "./types/WizardDialog.js";
+
+//#region src/components/dialog/Dialog.registry.ts
+const dialogComponents = {
+	alert: AlertDialog,
+	confirm: ConfirmDialog,
+	custom: CustomDialog,
+	form: FormDialog,
+	wizard_form: WizardDialog
+};
+function getDialogComponent(type) {
+	return dialogComponents[type];
+}
+function isRegisteredDialogType(config) {
+	return !!config && config.type in dialogComponents;
+}
+
+//#endregion
+export { dialogComponents, getDialogComponent, isRegisteredDialogType };
+//# sourceMappingURL=Dialog.registry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.registry.js","names":[],"sources":["../../../../src/components/dialog/Dialog.registry.ts"],"sourcesContent":["import { DialogConfig, DialogType, DialogTypes } from \"./Dialog.types\";\nimport { AlertDialog } from \"./types/AlertDialog\";\nimport { ConfirmDialog } from \"./types/ConfirmDialog\";\nimport { CustomDialog } from \"./types/CustomDialog\";\nimport { FormDialog } from \"./types/FormDialog\";\nimport { WizardDialog } from \"./types/WizardDialog\";\n\n// TODO: use DialogTypes enum after solving bundler ordering problem\nexport const dialogComponents = {\n  alert: AlertDialog,\n  confirm: ConfirmDialog,\n  custom: CustomDialog,\n  form: FormDialog,\n  wizard_form: WizardDialog,\n} as const;\n\nexport function getDialogComponent(type: DialogType) {\n  return dialogComponents[type];\n}\n\nexport function isRegisteredDialogType(\n  config?: DialogConfig,\n): config is DialogConfig & { type: DialogType } {\n  return !!config && config.type in dialogComponents;\n}\n"],"mappings":";;;;;;;AAQA,MAAa,mBAAmB;CAC9B,OAAO;CACP,SAAS;CACT,QAAQ;CACR,MAAM;CACN,aAAa;CACd;AAED,SAAgB,mBAAmB,MAAkB;AACnD,QAAO,iBAAiB;;AAG1B,SAAgB,uBACd,QAC+C;AAC/C,QAAO,CAAC,CAAC,UAAU,OAAO,QAAQ"}

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

@@ -0,0 +1,9 @@
+import { DialogConfig } from "./Dialog.types.js";
+import { BaseRecord } from "@refinedev/core";
+
+//#region src/components/dialog/Dialog.renderer.d.ts
+declare function DialogComponent<T extends BaseRecord = BaseRecord>(props: DialogConfig<T>): any;
+declare function DialogRenderer(): any;
+//#endregion
+export { DialogComponent, DialogRenderer };
+//# sourceMappingURL=Dialog.renderer.d.ts.map