@faasjs/ant-design 8.0.0-beta.27 → 8.0.0-beta.29

package/README.md

@@ -6,6 +6,7 @@
 - [Blank](functions/Blank.md)
 - [cloneUnionFaasItemElement](functions/cloneUnionFaasItemElement.md)
 - [ConfigProvider](functions/ConfigProvider.md)
+- [createOnErrorHandler](functions/createOnErrorHandler.md)
 - [Description](functions/Description.md)
 - [ErrorBoundary](functions/ErrorBoundary.md)
 - [faas](functions/faas.md)
@@ -17,6 +18,7 @@
 - [Link](functions/Link.md)
 - [Loading](functions/Loading.md)
 - [PageNotFound](functions/PageNotFound.md)
+- [renderDisplayValue](functions/renderDisplayValue.md)
 - [Routes](functions/Routes.md)
 - [Table](functions/Table.md)
 - [Tabs](functions/Tabs.md)

package/dist/index.d.ts

@@ -19,6 +19,8 @@ import { NotificationInstance } from "antd/es/notification/interface.js";
 
 //#region ../types/src/index.d.ts
 /**
+ * # @faasjs/types
+ *
  * Action Type definitions for FaasJS and cross backend and frontend.
  *
  * [![License: MIT](https://img.shields.io/npm/l/@faasjs/types.svg)](https://github.com/faasjs/faasjs/blob/main/packages/types/LICENSE)
@@ -57,7 +59,7 @@ type FaasActionPaths = Extract<keyof FaasActions, string>;
 /**
  * Union type accepted by action helpers when callers pass either an action path or inferred data shape.
  */
-type FaasActionUnionType = Record<string, any> | string;
+type FaasActionUnionType = Record<string, unknown> | string;
 /**
  * Infer the action path type.
  *
@@ -66,7 +68,7 @@ type FaasActionUnionType = Record<string, any> | string;
  *
  * @template T - Candidate action path type.
  */
-type FaasAction<T = any> = T extends FaasActionPaths ? T : string;
+type FaasAction<T = unknown> = T extends FaasActionPaths ? T : string;
 //#endregion
 //#region src/Loading/index.d.ts
 /**
@@ -484,6 +486,9 @@ interface AppProps {
    */
   faasConfigProviderProps?: Omit<ConfigProviderProps, 'children'> | false;
 }
+declare function createOnErrorHandler(messageApi: {
+  error: (message: string) => void;
+}): (action: string) => (res: any) => Promise<void>;
 /**
  * Render the root provider shell for a FaasJS Ant Design application.
  *
@@ -653,7 +658,7 @@ declare namespace FormItem {
   };
 }
 //#endregion
-//#region src/Table/index.d.ts
+//#region src/Table/types.d.ts
 /**
  * Column definition used by the FaasJS Ant Design {@link Table} component.
  *
@@ -737,6 +742,8 @@ type TableFaasDataResponse<T = any> = {
     total: number;
   };
 };
+//#endregion
+//#region src/Table/table.d.ts
 /**
  * Render an Ant Design table from FaasJS item metadata.
  *
@@ -774,6 +781,12 @@ type TableFaasDataResponse<T = any> = {
  */
 declare function Table<T extends Record<string, any>, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/data/render.d.ts
+declare function renderDisplayValue(type: FaasItemType, value: any, options?: {
+  label: string;
+  value?: string | number;
+}[]): JSX.Element | string | number | boolean | null;
+//#endregion
 //#region src/data/index.d.ts
 /**
  * Supported built-in field types shared by form, table, and description components.
@@ -1560,4 +1573,4 @@ declare function useApp<NewT extends useAppProps = useAppProps>(this: void): Rea
  */
 declare function useThemeToken(): GlobalToken;
 //#endregion
-export { App, AppContext, AppProps, BaseItemProps, BaseOption, Blank, BlankProps, ConfigContext, ConfigProvider, ConfigProviderProps, Description, DescriptionItemContentProps, DescriptionItemProps, DescriptionProps, Drawer, DrawerProps, ErrorBoundary, type ErrorBoundaryProps, ExtendDescriptionItemProps, ExtendDescriptionTypeProps, type ExtendFormItemProps, type ExtendFormTypeProps, ExtendTableItemProps, ExtendTableTypeProps, ExtendTypes, FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, type FaasDataWrapperRef, FaasItemProps, FaasItemType, FaasItemTypeValue, FaasReactClient, type FaasReactClientOptions, Form, FormFaasProps, FormItem, FormItemProps, FormProps, FormSubmitProps, Link, LinkProps, Loading, LoadingProps, Modal, ModalProps, PageNotFound, ResolvedTheme, Routes, RoutesProps, TabProps, Table, TableFaasDataParams, TableFaasDataResponse, TableItemProps, TableProps, Tabs, TabsProps, Title, TitleProps, UnionFaasItemElement, UnionFaasItemInjection, UnionFaasItemProps, UnionFaasItemRender, UnionScene, cloneUnionFaasItemElement, faas, idToTitle, lazy, setDrawerProps, setModalProps, transferOptions, transferValue, useApp, useAppProps, useConfigContext, useDrawer, useFaas, useModal, useThemeToken, withFaasData };
+export { App, AppContext, AppProps, BaseItemProps, BaseOption, Blank, BlankProps, ConfigContext, ConfigProvider, ConfigProviderProps, Description, DescriptionItemContentProps, DescriptionItemProps, DescriptionProps, Drawer, DrawerProps, ErrorBoundary, type ErrorBoundaryProps, ExtendDescriptionItemProps, ExtendDescriptionTypeProps, type ExtendFormItemProps, type ExtendFormTypeProps, type ExtendTableItemProps, type ExtendTableTypeProps, ExtendTypes, FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, type FaasDataWrapperRef, FaasItemProps, FaasItemType, FaasItemTypeValue, FaasReactClient, type FaasReactClientOptions, Form, FormFaasProps, FormItem, FormItemProps, FormProps, FormSubmitProps, Link, LinkProps, Loading, LoadingProps, Modal, ModalProps, PageNotFound, ResolvedTheme, Routes, RoutesProps, TabProps, Table, type TableFaasDataParams, type TableFaasDataResponse, type TableItemProps, type TableProps, Tabs, TabsProps, Title, TitleProps, UnionFaasItemElement, UnionFaasItemInjection, UnionFaasItemProps, UnionFaasItemRender, UnionScene, cloneUnionFaasItemElement, createOnErrorHandler, faas, idToTitle, lazy, renderDisplayValue, setDrawerProps, setModalProps, transferOptions, transferValue, useApp, useAppProps, useConfigContext, useDrawer, useFaas, useModal, useThemeToken, withFaasData };

package/dist/index.mjs

@@ -4,8 +4,8 @@ import { BrowserRouter, Route, Routes as Routes$1, useLocation, useNavigate } fr
 import { cloneDeep, defaultsDeep, isNil, uniqBy } from "lodash-es";
 import { Suspense, cloneElement, createContext, createElement, isValidElement, lazy, useContext, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CheckOutlined, CloseOutlined, MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
 import dayjs from "dayjs";
+import { CheckOutlined, CloseOutlined, MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
 //#region src/Loading/index.tsx
 /**
 * Render an Ant Design loading spinner with an optional content fallback.
@@ -523,11 +523,17 @@ function useApp() {
 }
 //#endregion
 //#region src/App/index.tsx
+function createOnErrorHandler(messageApi) {
+	return (action) => async (res) => {
+		if ("message" in res && res.toString().includes("AbortError")) return;
+		console.error(`[FaasJS][${action}]`, res);
+		messageApi.error("message" in res ? res.message : "Unknown error");
+	};
+}
 function RoutesApp(props) {
 	const location = useLocation();
 	const { drawerProps, setDrawerProps, modalProps, setModalProps } = useApp();
 	useEqualEffect(() => {
-		console.debug("location", location);
 		if (drawerProps.open) setDrawerProps({ open: false });
 		if (modalProps.open) setModalProps({ open: false });
 	}, [location]);
@@ -581,11 +587,7 @@ function App(props) {
 			children: /* @__PURE__ */ jsx(ConfigProvider, {
 				...props.faasConfigProviderProps,
 				faasClientOptions: {
-					onError: (action) => async (res) => {
-						if ("message" in res && res.toString().includes("AbortError")) return;
-						console.error(`[FaasJS][${action}]`, res);
-						messageApi.error("message" in res ? res.message : "Unknown error");
-					},
+					onError: createOnErrorHandler(messageApi),
 					...props.faasConfigProviderProps ? props.faasConfigProviderProps.faasClientOptions : {}
 				},
 				children: /* @__PURE__ */ jsx(ErrorBoundary, {
@@ -634,6 +636,44 @@ function Blank(options) {
 	}) : options.value;
 }
 //#endregion
+//#region src/data/render.tsx
+function renderBooleanIcon(value) {
+	return value ? /* @__PURE__ */ jsx(CheckOutlined, { style: {
+		marginTop: "4px",
+		color: "#52c41a"
+	} }) : /* @__PURE__ */ jsx(CloseOutlined, { style: {
+		marginTop: "4px",
+		color: "#ff4d4f"
+	} });
+}
+function formatDateValue(value, type) {
+	return value.format(type === "date" ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm:ss");
+}
+function resolveOptionLabel(value, options) {
+	if (!options?.length) return value;
+	for (const option of options) if (option.value === value) return option.label ?? value;
+	return value;
+}
+function renderDisplayValue(type, value, options) {
+	if (value === null || value === void 0 || Array.isArray(value) && value.length === 0) return /* @__PURE__ */ jsx(Blank, {});
+	if (options?.length) {
+		if (type.endsWith("[]")) return /* @__PURE__ */ jsx(Fragment, { children: value.map((v) => resolveOptionLabel(v, options)).join(", ") });
+		if ([
+			"string",
+			"number",
+			"boolean"
+		].includes(type)) return /* @__PURE__ */ jsx(Fragment, { children: resolveOptionLabel(value, options) });
+	}
+	switch (type) {
+		case "string[]":
+		case "number[]": return /* @__PURE__ */ jsx(Fragment, { children: value.join(", ") });
+		case "boolean": return renderBooleanIcon(value);
+		case "time": return /* @__PURE__ */ jsx(Fragment, { children: formatDateValue(value, "time") });
+		case "date": return /* @__PURE__ */ jsx(Fragment, { children: formatDateValue(value, "date") });
+		default: return value;
+	}
+}
+//#endregion
 //#region src/data/index.ts
 /**
 * Convert a snake_case, kebab-case, or spaced identifier into a title-style label.
@@ -750,78 +790,50 @@ function cloneUnionFaasItemElement(element, props) {
 //#endregion
 //#region src/Description/index.tsx
 function DescriptionItemContent(props) {
-	const [computedProps, setComputedProps] = useState();
-	useEqualEffect(() => {
-		const propsCopy = { ...props };
-		propsCopy.item.title = propsCopy.item.title ?? idToTitle(propsCopy.item.id);
-		if (!propsCopy.item.type) propsCopy.item.type = "string";
-		if (propsCopy.item.options?.length) propsCopy.item.options = transferOptions(propsCopy.item.options);
-		propsCopy.value = transferValue(propsCopy.item.type, propsCopy.value);
-		if (propsCopy.item.options && propsCopy.value !== null) {
-			if (propsCopy.item.type.endsWith("[]")) propsCopy.value = propsCopy.value.map((v) => propsCopy.item.options.find((option) => option.value === v)?.label || v);
-			else if ([
-				"string",
-				"number",
-				"boolean"
-			].includes(propsCopy.item.type)) propsCopy.value = props.item.options.find((option) => option.value === props.value)?.label || props.value;
-		}
-		setComputedProps(propsCopy);
-	}, [props]);
-	if (!computedProps) return null;
-	const itemType = computedProps.item.type ?? "string";
-	if (computedProps.item.descriptionChildren === null || computedProps.item.children === null || computedProps.item.descriptionRender === null || computedProps.item.render === null) return null;
-	const children = computedProps.item.descriptionChildren || computedProps.item.children;
+	const { item, value: rawValue, values, extendTypes } = props;
+	const type = item.type ?? "string";
+	const options = item.options?.length ? transferOptions(item.options) : void 0;
+	const value = transferValue(type, rawValue);
+	if (item.descriptionChildren === null || item.children === null || item.descriptionRender === null || item.render === null) return null;
+	const children = item.descriptionChildren || item.children;
 	if (children) return cloneUnionFaasItemElement(children, {
 		scene: "description",
-		value: computedProps.value,
-		values: computedProps.values,
+		value,
+		values,
 		index: 0
 	});
-	const render = computedProps.item.descriptionRender || computedProps.item.render;
-	if (render) return /* @__PURE__ */ jsx(Fragment, { children: render(computedProps.value, computedProps.values, 0, "description") });
-	if (computedProps.extendTypes?.[itemType]) {
-		const extendType = computedProps.extendTypes[itemType];
+	const render = item.descriptionRender || item.render;
+	if (render) return /* @__PURE__ */ jsx(Fragment, { children: render(value, values, 0, "description") });
+	if (extendTypes?.[type]) {
+		const extendType = extendTypes[type];
 		if (extendType.children) return cloneUnionFaasItemElement(extendType.children, {
 			scene: "description",
-			value: computedProps.value,
-			values: computedProps.values
+			value,
+			values
 		});
-		if (extendType.render) return /* @__PURE__ */ jsx(Fragment, { children: extendType.render(computedProps.value, computedProps.values, 0, "description") });
-		throw Error(`${itemType} requires children or render`);
+		if (extendType.render) return /* @__PURE__ */ jsx(Fragment, { children: extendType.render(value, values, 0, "description") });
+		throw Error(`${type} requires children or render`);
 	}
-	if (computedProps.value === null || Array.isArray(computedProps.value) && !computedProps.value.length) return /* @__PURE__ */ jsx(Blank, {});
-	switch (itemType) {
-		case "string[]": return /* @__PURE__ */ jsx(Fragment, { children: computedProps.value.join(", ") });
-		case "number": return computedProps.value || null;
-		case "number[]": return /* @__PURE__ */ jsx(Fragment, { children: computedProps.value.join(", ") });
-		case "boolean": return computedProps.value ? /* @__PURE__ */ jsx(CheckOutlined, { style: {
-			marginTop: "4px",
-			color: "#52c41a"
-		} }) : /* @__PURE__ */ jsx(CloseOutlined, { style: {
-			marginTop: "4px",
-			color: "#ff4d4f"
-		} });
-		case "time": return /* @__PURE__ */ jsx(Fragment, { children: computedProps.value.format("YYYY-MM-DD HH:mm:ss") });
-		case "date": return /* @__PURE__ */ jsx(Fragment, { children: computedProps.value.format("YYYY-MM-DD") });
-		case "object":
-			if (!computedProps.value) return /* @__PURE__ */ jsx(Blank, {});
-			return /* @__PURE__ */ jsx(Description, {
-				items: computedProps.item.object || [],
-				dataSource: computedProps.value,
+	if (type === "object") {
+		if (!value) return /* @__PURE__ */ jsx(Blank, {});
+		return /* @__PURE__ */ jsx(Description, {
+			items: item.object || [],
+			dataSource: value,
+			column: 1
+		});
+	}
+	if (type === "object[]") {
+		if (!value?.length) return /* @__PURE__ */ jsx(Blank, {});
+		return /* @__PURE__ */ jsx(Space, {
+			direction: "vertical",
+			children: value.map((v, index) => /* @__PURE__ */ jsx(Description, {
+				items: item.object || [],
+				dataSource: v,
 				column: 1
-			});
-		case "object[]":
-			if (!computedProps.value?.length) return /* @__PURE__ */ jsx(Blank, {});
-			return /* @__PURE__ */ jsx(Space, {
-				direction: "vertical",
-				children: computedProps.value.map((value, index) => /* @__PURE__ */ jsx(Description, {
-					items: computedProps.item.object || [],
-					dataSource: value,
-					column: 1
-				}, index))
-			});
-		default: return computedProps.value || null;
+			}, index))
+		});
 	}
+	return /* @__PURE__ */ jsx(Fragment, { children: renderDisplayValue(type, value, options) });
 }
 DescriptionItemContent.displayName = "DescriptionItemContent";
 /**
@@ -1337,7 +1349,6 @@ function Form(props) {
 		setAntdProps(propsCopy);
 	}, [props]);
 	const onValuesChange = useEqualCallback((changedValues, allValues) => {
-		console.debug("Form:onValuesChange", changedValues, allValues);
 		if (props.onValuesChange) props.onValuesChange(changedValues, allValues);
 		if (!items.length) return;
 		for (const key in changedValues) {
@@ -1351,7 +1362,6 @@ function Form(props) {
 	]);
 	useEqualEffect(() => {
 		if (!initialValues) return;
-		console.debug("Form:initialValues", initialValues);
 		form.setFieldsValue(initialValues);
 		setInitialValues(null);
 	}, [
@@ -1547,22 +1557,10 @@ function Routes(props) {
 	}, "*")] });
 }
 //#endregion
-//#region src/Table/index.tsx
+//#region src/Table/utils.tsx
 function processValue(item, value) {
 	const itemType = item.type ?? "string";
-	const transferred = transferValue(itemType, value);
-	if (transferred === null || Array.isArray(transferred) && transferred.length === 0) return /* @__PURE__ */ jsx(Blank, {});
-	if (item.options) {
-		if (itemType.endsWith("[]")) return transferred.map((v) => item.options.find((option) => option.value === v)?.label || v).join(", ");
-		if ([
-			"string",
-			"number",
-			"boolean"
-		].includes(itemType)) return item.options.find((option) => option.value === transferred)?.label || transferred;
-	}
-	if (itemType.endsWith("[]")) return transferred.join(", ");
-	if (["date", "time"].includes(itemType)) return transferred.format(itemType === "date" ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm:ss");
-	return transferred;
+	return renderDisplayValue(itemType, transferValue(itemType, value), item.options);
 }
 function toTableFilters(options, includeBlank = false) {
 	const filters = options.map((option) => ({
@@ -1623,6 +1621,23 @@ function createTextSearchFilterDropdown(item, search, transformValue) {
 		}
 	});
 }
+function applyFaasDataColumnOptions(columns, data) {
+	if (!data?.options) return columns;
+	let updated = false;
+	const nextColumns = columns.map((column) => {
+		if (!data.options?.[column.id]) return column;
+		updated = true;
+		const nextColumn = { ...column };
+		nextColumn.options = transferOptions(data.options[column.id]);
+		nextColumn.filters = toTableFilters(nextColumn.options, true);
+		nextColumn.render = (value) => processValue(nextColumn, value);
+		if (nextColumn.filterDropdown) delete nextColumn.filterDropdown;
+		return nextColumn;
+	});
+	return updated ? nextColumns : columns;
+}
+//#endregion
+//#region src/Table/column-builder.tsx
 function createTableColumns(items, options) {
 	const columns = cloneDeep(items).filter((item) => !(item.tableChildren === null || item.children === null || item.tableRender === null || item.render === null));
 	for (const item of columns) {
@@ -1717,13 +1732,7 @@ function createTableColumns(items, options) {
 				}
 				break;
 			case "boolean":
-				if (!item.render) item.render = (value) => isNil(value) ? /* @__PURE__ */ jsx(Blank, {}) : value ? /* @__PURE__ */ jsx(CheckOutlined, { style: {
-					marginTop: "4px",
-					color: "#52c41a"
-				} }) : /* @__PURE__ */ jsx(CloseOutlined, { style: {
-					marginTop: "4px",
-					color: "#ff4d4f"
-				} });
+				if (!item.render) item.render = (value) => renderDisplayValue("boolean", value);
 				if (item.filterDropdown !== false) {
 					if (typeof item.filterDropdown === "undefined") item.filterDropdown = ({ setSelectedKeys, selectedKeys, confirm: confirmFilter }) => /* @__PURE__ */ jsxs(Radio.Group, {
 						style: { padding: 8 },
@@ -1827,21 +1836,8 @@ function createTableColumns(items, options) {
 	}
 	return columns;
 }
-function applyFaasDataColumnOptions(columns, data) {
-	if (!data?.options) return columns;
-	let updated = false;
-	const nextColumns = columns.map((column) => {
-		if (!data.options?.[column.id]) return column;
-		updated = true;
-		const nextColumn = { ...column };
-		nextColumn.options = transferOptions(data.options[column.id]);
-		nextColumn.filters = toTableFilters(nextColumn.options, true);
-		nextColumn.render = (value) => processValue(nextColumn, value);
-		if (nextColumn.filterDropdown) delete nextColumn.filterDropdown;
-		return nextColumn;
-	});
-	return updated ? nextColumns : columns;
-}
+//#endregion
+//#region src/Table/table.tsx
 /**
 * Render an Ant Design table from FaasJS item metadata.
 *
@@ -2055,4 +2051,4 @@ function useThemeToken() {
 	return theme.useToken().token;
 }
 //#endregion
-export { App, AppContext, Blank, ConfigContext, ConfigProvider, Description, Drawer, ErrorBoundary, FaasDataWrapper, FaasReactClient, Form, FormItem, Link, Loading, Modal, PageNotFound, Routes, Table, Tabs, Title, cloneUnionFaasItemElement, faas, idToTitle, lazy, transferOptions, transferValue, useApp, useConfigContext, useDrawer, useFaas, useModal, useThemeToken, withFaasData };
+export { App, AppContext, Blank, ConfigContext, ConfigProvider, Description, Drawer, ErrorBoundary, FaasDataWrapper, FaasReactClient, Form, FormItem, Link, Loading, Modal, PageNotFound, Routes, Table, Tabs, Title, cloneUnionFaasItemElement, createOnErrorHandler, faas, idToTitle, lazy, renderDisplayValue, transferOptions, transferValue, useApp, useConfigContext, useDrawer, useFaas, useModal, useThemeToken, withFaasData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "8.0.0-beta.27",
+  "version": "8.0.0-beta.29",
   "homepage": "https://faasjs.com/doc/ant-design",
   "bugs": {
     "url": "https://github.com/faasjs/faasjs/issues"
@@ -27,7 +27,7 @@
   },
   "devDependencies": {
     "@ant-design/icons": "*",
-    "@faasjs/react": ">=8.0.0-beta.27",
+    "@faasjs/react": ">=8.0.0-beta.29",
     "@types/lodash-es": "*",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
@@ -39,7 +39,7 @@
   },
   "peerDependencies": {
     "@ant-design/icons": "*",
-    "@faasjs/react": ">=8.0.0-beta.27",
+    "@faasjs/react": ">=8.0.0-beta.29",
     "antd": "^6.0.0",
     "lodash-es": "*",
     "react": "^19.0.0",
@@ -47,7 +47,7 @@
     "react-router-dom": "*"
   },
   "engines": {
-    "node": ">=24.0.0",
+    "node": ">=26.0.0",
     "npm": ">=11.0.0"
   }
 }