@faasjs/ant-design 8.0.0-beta.14 → 8.0.0-beta.16

package/README.md

@@ -1,44 +1,5 @@
 # @faasjs/ant-design
 
-UI components based on [FaasJS](https://faasjs.com), [Ant Design](https://ant.design) and [React Router](https://reactrouter.com).
-
-[![License: MIT](https://img.shields.io/npm/l/@faasjs/ant-design.svg)](https://github.com/faasjs/faasjs/blob/main/packages/ant-design/LICENSE)
-[![NPM Version](https://img.shields.io/npm/v/@faasjs/ant-design.svg)](https://www.npmjs.com/package/@faasjs/ant-design)
-
-## Features
-
-- [App](https://faasjs.com/doc/ant-design/functions/App.html) component with Ant Design & FaasJS.
-- [UnionFaasItemElement](https://faasjs.com/doc/ant-design/type-aliases/UnionFaasItemElement.html) and [UnionFaasItemRender](https://faasjs.com/doc/ant-design/type-aliases/UnionFaasItemRender.html) for custom union rendering.
-
-## Install
-
-```sh
-npm install @faasjs/ant-design
-```
-
-## Usage
-
-In `@faasjs/ant-design`, we use `FaasItemProps` to provide data structures for components.
-
-```ts
-type FaasItemType =
-  | 'string'
-  | 'string[]'
-  | 'number'
-  | 'number[]'
-  | 'boolean'
-  | 'date'
-  | 'time'
-  | 'object'
-  | 'object[]'
-
-type FaasItemProps = {
-  type: FaasItemTypes
-  id: string
-  title?: string
-}
-```
-
 ## Functions
 
 - [App](functions/App.md)
@@ -62,6 +23,7 @@ type FaasItemProps = {
 - [Title](functions/Title.md)
 - [transferOptions](functions/transferOptions.md)
 - [transferValue](functions/transferValue.md)
+- [useApp](functions/useApp.md)
 - [useConfigContext](functions/useConfigContext.md)
 - [useDrawer](functions/useDrawer.md)
 - [useFaas](functions/useFaas.md)
@@ -124,5 +86,5 @@ type FaasItemProps = {
 
 ## Variables
 
+- [AppContext](variables/AppContext.md)
 - [ConfigContext](variables/ConfigContext.md)
-- [useApp](variables/useApp.md)

package/dist/index.cjs

@@ -47,7 +47,7 @@ function Loading(props) {
 	if (props.loading === false) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: props.children });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		style: {
-			...props.style || {},
+			...props.style,
 			...!props.size || props.size === "large" ? {
 				margin: "20vh auto",
 				textAlign: "center"
@@ -272,7 +272,7 @@ function useModal(init) {
 	};
 }
 //#endregion
-//#region src/App.tsx
+//#region src/useApp.ts
 const AppContext = (0, _faasjs_react.createSplittingContext)([
 	"message",
 	"notification",
@@ -281,6 +281,20 @@ const AppContext = (0, _faasjs_react.createSplittingContext)([
 	"drawerProps",
 	"setDrawerProps"
 ]);
+/**
+* Get app context.
+*
+* ```ts
+* import { useApp } from '@faasjs/ant-design'
+*
+* const { message, notification, setModalProps, setDrawerProps } = useApp()
+* ```
+*/
+function useApp() {
+	return AppContext.use();
+}
+//#endregion
+//#region src/App.tsx
 function RoutesApp(props) {
 	const location = (0, react_router_dom.useLocation)();
 	const { drawerProps, setDrawerProps, modalProps, setModalProps } = useApp();
@@ -365,17 +379,6 @@ function App(props) {
 		})
 	});
 }
-/**
-* Get app context.
-*
-* ```ts
-* import { useApp } from '@faasjs/ant-design'
-*
-* const { message, notification, setModalProps, setDrawerProps } = useApp()
-* ```
-*/
-const useApp = AppContext.use;
-App.useApp = useApp;
 //#endregion
 //#region src/Blank.tsx
 /**
@@ -470,7 +473,7 @@ function cloneUnionFaasItemElement(element, props) {
 //#region src/Description.tsx
 function DescriptionItemContent(props) {
 	const [computedProps, setComputedProps] = (0, react.useState)();
-	(0, react.useEffect)(() => {
+	(0, _faasjs_react.useEqualEffect)(() => {
 		const propsCopy = { ...props };
 		propsCopy.item.title = propsCopy.item.title ?? idToTitle(propsCopy.item.id);
 		if (!propsCopy.item.type) propsCopy.item.type = "string";
@@ -651,7 +654,7 @@ function FormItem(props) {
 	const [extendTypes, setExtendTypes] = (0, react.useState)();
 	const { theme } = useConfigContext();
 	const [hidden, setHidden] = (0, react.useState)(props.hidden || false);
-	(0, react.useEffect)(() => {
+	(0, _faasjs_react.useEqualEffect)(() => {
 		const { extendTypes, ...propsCopy } = { ...props };
 		if (extendTypes) setExtendTypes(extendTypes);
 		if (propsCopy.if) {
@@ -668,7 +671,11 @@ function FormItem(props) {
 			delete propsCopy.hidden;
 		}
 		setComputedProps(processProps(propsCopy, theme.common));
-	}, [props]);
+	}, [
+		hidden,
+		props,
+		theme.common
+	]);
 	if (!computedProps) return null;
 	const itemType = computedProps.type ?? "string";
 	if (hidden) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Form.Item, {
@@ -900,19 +907,21 @@ function Form(props) {
 	const [extendTypes, setExtendTypes] = (0, react.useState)();
 	const [form] = antd.Form.useForm(props.form);
 	const [initialValues, setInitialValues] = (0, react.useState)(props.initialValues || Object.create(null));
-	(0, react.useEffect)(() => {
+	(0, _faasjs_react.useEqualEffect)(() => {
 		const { submit, ...propsCopy } = {
 			...props,
 			form
 		};
+		let nextInitialValues = propsCopy.initialValues;
 		if (typeof submit !== "undefined") setSubmit(submit);
 		if (propsCopy.initialValues && propsCopy.items?.length) {
 			for (const key in propsCopy.initialValues) propsCopy.initialValues[key] = transferValue(propsCopy.items.find((item) => isFormItemProps(item) && item.id === key)?.type, propsCopy.initialValues[key]);
+			nextInitialValues = propsCopy.initialValues;
 			setInitialValues(propsCopy.initialValues);
 			delete propsCopy.initialValues;
 		}
 		if (propsCopy.items?.length) {
-			for (const item of propsCopy.items) if (isFormItemProps(item) && item.if) item.hidden = !item.if(initialValues || Object.create(null));
+			for (const item of propsCopy.items) if (isFormItemProps(item) && item.if) item.hidden = !item.if(nextInitialValues || Object.create(null));
 		}
 		const submitTo = typeof submit === "object" ? submit.to : void 0;
 		if (propsCopy.onFinish) {
@@ -951,7 +960,7 @@ function Form(props) {
 			delete propsCopy.extendTypes;
 		}
 		setComputedProps(propsCopy);
-	}, [props]);
+	}, [form, props]);
 	const onValuesChange = (0, _faasjs_react.useEqualCallback)((changedValues, allValues) => {
 		console.debug("Form:onValuesChange", changedValues, allValues);
 		if (props.onValuesChange) props.onValuesChange(changedValues, allValues);
@@ -961,12 +970,12 @@ function Form(props) {
 			if (item?.onValueChange) item.onValueChange(changedValues[key], allValues, form);
 		}
 	}, [computedProps]);
-	(0, react.useEffect)(() => {
+	(0, _faasjs_react.useEqualEffect)(() => {
 		if (!initialValues) return;
 		console.debug("Form:initialValues", initialValues);
 		form.setFieldsValue(initialValues);
 		setInitialValues(null);
-	}, [computedProps]);
+	}, [form, initialValues]);
 	if (!computedProps) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(antd.Form, {
 		...computedProps,
@@ -1017,7 +1026,7 @@ function Link(props) {
 	const navigate = (0, react_router_dom.useNavigate)();
 	const target = props.target || theme.Link?.target || (props.href.startsWith("http") ? "_blank" : void 0);
 	let computedStyle = {
-		...theme.Link.style || {},
+		...theme.Link.style,
 		cursor: "pointer",
 		...props.style
 	};
@@ -1031,8 +1040,16 @@ function Link(props) {
 		...buttonProps,
 		style: computedStyle,
 		onClick: (e) => {
-			props.onClick ? props.onClick(e) : target === "_blank" ? window.open(props.href) : navigate(props.href);
 			e.preventDefault();
+			if (props.onClick) {
+				props.onClick(e);
+				return;
+			}
+			if (target === "_blank") {
+				window.open(props.href);
+				return;
+			}
+			navigate(props.href);
 		},
 		children: props.children ?? props.text
 	});
@@ -1132,7 +1149,8 @@ function processValue(item, value) {
 function Table(props) {
 	const [columns, setColumns] = (0, react.useState)();
 	const { theme } = useConfigContext();
-	const generateFilterDropdown = (item) => {
+	const { all, blank, search } = theme.common;
+	const generateFilterDropdown = (0, react.useCallback)((item) => {
 		if (item.filterDropdown && item.filterDropdown !== true) return;
 		if (!item.options?.length) return;
 		if (item.options.length < 11) {
@@ -1153,7 +1171,7 @@ function Table(props) {
 				allowClear: true,
 				showSearch: true,
 				style: { width: "100%" },
-				placeholder: `${theme.common.search} ${item.title}`,
+				placeholder: `${search} ${item.title}`,
 				value: selectedKeys,
 				onChange: (v) => {
 					setSelectedKeys(v?.length ? v : []);
@@ -1161,18 +1179,19 @@ function Table(props) {
 				},
 				mode: "multiple",
 				filterOption: (input, option) => {
-					if (!input || !option || !option.label) return true;
+					if (!input || !option) return true;
+					if (typeof option.label !== "string") return option.value === input;
 					input = input.trim();
-					return option.value === input || option.label.toString().toLowerCase().includes(input.toLowerCase());
+					return option.value === input || option.label.toLowerCase().includes(input.toLowerCase());
 				}
 			})
 		});
 		return item;
-	};
-	(0, react.useEffect)(() => {
+	}, [search]);
+	(0, _faasjs_react.useEqualEffect)(() => {
 		const items = (0, lodash_es.cloneDeep)(props.items).filter((item) => !(item.tableChildren === null || item.children === null || item.tableRender === null || item.render === null));
 		const createTextSearchFilterDropdown = (item, transformValue) => ({ setSelectedKeys, confirm, clearFilters }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input.Search, {
-			placeholder: `${theme.common.search} ${item.title}`,
+			placeholder: `${search} ${item.title}`,
 			allowClear: true,
 			onSearch: (v) => {
 				if (v) setSelectedKeys(transformValue ? [transformValue(v)] : [v]);
@@ -1270,7 +1289,7 @@ function Table(props) {
 					}
 					break;
 				case "number[]":
-					if (!item.render) item.render = (value) => processValue(item, value).join(", ");
+					if (!item.render) item.render = (value) => processValue(item, value);
 					if (item.filterDropdown !== false) {
 						if (!item.onFilter && !props.faasData) item.onFilter = (value, row) => {
 							if (value === null && (!row[item.id] || !row[item.id].length)) return true;
@@ -1289,7 +1308,7 @@ function Table(props) {
 						color: "#ff4d4f"
 					} });
 					if (item.filterDropdown !== false) {
-						if (typeof item.filterDropdown === "undefined") item.filterDropdown = ({ setSelectedKeys, selectedKeys, confirm }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(antd.Radio.Group, {
+						if (typeof item.filterDropdown === "undefined") item.filterDropdown = ({ setSelectedKeys, selectedKeys, confirm: confirmFilter }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(antd.Radio.Group, {
 							style: { padding: 8 },
 							buttonStyle: "solid",
 							value: JSON.stringify(selectedKeys[0]),
@@ -1299,10 +1318,10 @@ function Table(props) {
 									false: false,
 									null: null
 								}[e.target.value]] : []);
-								confirm();
+								confirmFilter();
 							},
 							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Radio.Button, { children: theme.common.all }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Radio.Button, { children: all }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Radio.Button, {
 									value: "true",
 									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.CheckOutlined, { style: {
@@ -1319,7 +1338,7 @@ function Table(props) {
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Radio.Button, {
 									value: "null",
-									children: theme.common.blank
+									children: blank
 								})
 							]
 						});
@@ -1343,7 +1362,9 @@ function Table(props) {
 					};
 					if (item.filterDropdown !== false) {
 						if (typeof item.filterDropdown === "undefined") item.filterDropdown = ({ setSelectedKeys, confirm }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.DatePicker.RangePicker, { onChange: (dates) => {
-							setSelectedKeys(dates?.[0] && dates[1] ? [[dates[0].startOf("day").toISOString(), dates[1].endOf("day").toISOString()]] : []);
+							const start = dates?.[0];
+							const end = dates?.[1];
+							setSelectedKeys(start && end ? [[start.startOf("day").toISOString(), end.endOf("day").toISOString()]] : []);
 							confirm();
 						} });
 						if (!item.onFilter && !props.faasData) item.onFilter = (value, row) => {
@@ -1377,8 +1398,16 @@ function Table(props) {
 			}
 		}
 		setColumns(items);
-	}, [props.items]);
-	(0, react.useEffect)(() => {
+	}, [
+		all,
+		blank,
+		generateFilterDropdown,
+		props.extendTypes,
+		props.faasData,
+		props.items,
+		search
+	]);
+	(0, _faasjs_react.useEqualEffect)(() => {
 		if (!props.dataSource || !columns) return;
 		for (const column of columns) if (column.optionsType === "auto" && !column.options && !column.filters) {
 			const options = (0, lodash_es.uniqBy)(props.dataSource, column.id).map((v) => ({
@@ -1394,7 +1423,11 @@ function Table(props) {
 				return newColumns;
 			});
 		}
-	}, [props.dataSource, columns]);
+	}, [
+		props.dataSource,
+		columns,
+		generateFilterDropdown
+	]);
 	if (!columns) return null;
 	if (props.dataSource) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Table, {
 		...props,
@@ -1416,7 +1449,7 @@ function Table(props) {
 }
 function FaasDataTable({ props, columns, data, params, reload, loading }) {
 	const [currentColumns, setCurrentColumns] = (0, react.useState)(columns);
-	(0, react.useEffect)(() => {
+	(0, _faasjs_react.useEqualEffect)(() => {
 		if (!data || Array.isArray(data)) return;
 		setCurrentColumns((prev) => {
 			const newColumns = [...prev];
@@ -1553,7 +1586,7 @@ function Tabs(props) {
 */
 function Title(props) {
 	const { theme } = useConfigContext();
-	(0, react.useEffect)(() => {
+	(0, _faasjs_react.useEqualEffect)(() => {
 		const title = Array.isArray(props.title) ? props.title : [props.title];
 		document.title = title.concat(props.suffix || theme.Title.suffix).filter((t) => !!t).join(props.separator || theme.Title.separator);
 	}, [props, theme.Title]);
@@ -1584,6 +1617,7 @@ function useThemeToken() {
 }
 //#endregion
 exports.App = App;
+exports.AppContext = AppContext;
 exports.Blank = Blank;
 exports.ConfigContext = ConfigContext;
 exports.ConfigProvider = ConfigProvider;

package/dist/index.d.ts

@@ -1,12 +1,10 @@
-import { ErrorBoundaryProps, FaasDataInjection as FaasDataInjection$1, FaasDataWrapperProps as FaasDataWrapperProps$1, FaasDataWrapperRef, FaasReactClient, FaasReactClientOptions, faas, useFaas } from "@faasjs/react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { ButtonProps, ConfigProviderProps as ConfigProviderProps$1, DatePickerProps, DescriptionsProps, Drawer, DrawerProps as DrawerProps$1, FormInstance, FormItemProps as FormItemProps$1, FormProps as FormProps$1, GlobalToken, InputNumberProps, InputProps, Modal, ModalProps as ModalProps$1, RadioProps, SelectProps, SwitchProps, TableColumnProps, TablePaginationConfig, TableProps as TableProps$1, TabsProps as TabsProps$1 } from "antd";
 import { BrowserRouterProps, RouteProps } from "react-router-dom";
 import * as react from "react";
 import { CSSProperties, ComponentType, Dispatch, FC, JSX, LazyExoticComponent, ReactElement, ReactNode, SetStateAction, lazy } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ErrorBoundaryProps, FaasDataInjection as FaasDataInjection$1, FaasDataWrapperProps as FaasDataWrapperProps$1, FaasDataWrapperRef, FaasReactClient, FaasReactClientOptions, faas, useFaas } from "@faasjs/react";
 import { Dayjs } from "dayjs";
-import { MessageInstance } from "antd/es/message/interface";
-import { NotificationInstance } from "antd/es/notification/interface";
 import * as antd_es_form_FormItem0 from "antd/es/form/FormItem";
 import * as antd_es_form0 from "antd/es/form";
 import { RuleObject } from "antd/es/form";
@@ -16,6 +14,8 @@ import * as antd_es_form_hooks_useFormInstance0 from "antd/es/form/hooks/useForm
 import * as _rc_component_form0 from "@rc-component/form";
 import * as antd_es_form_context0 from "antd/es/form/context";
 import { Tab } from "@rc-component/tabs/lib/interface";
+import { MessageInstance } from "antd/es/message/interface";
+import { NotificationInstance } from "antd/es/notification/interface";
 
 //#region ../types/src/index.d.ts
 /**
@@ -53,7 +53,7 @@ type FaasActionPaths = Exclude<Extract<keyof FaasActions, string>, 'faasjsAction
 /**
  * Union type accepted by action helpers.
  */
-type FaasActionUnionType = FaasActionPaths | Record<string, any> | string;
+type FaasActionUnionType = Record<string, any> | string;
 /**
  * Infer the action path type.
  *
@@ -206,64 +206,12 @@ declare const ConfigContext: react.Context<ConfigContextValue>;
 declare function ConfigProvider(props: ConfigProviderProps): react_jsx_runtime0.JSX.Element | null;
 declare function useConfigContext(): ConfigContextValue;
 //#endregion
-//#region src/Drawer.d.ts
-interface DrawerProps extends DrawerProps$1 {
-  children?: JSX.Element | JSX.Element[];
-}
-type setDrawerProps = Dispatch<SetStateAction<DrawerProps>>;
-/**
- * Hook style drawer
- *
- * ```tsx
- * function Example() {
- *   const { drawer, setDrawerProps } = useDrawer()
- *
- *   return <>
- *     <Button onClick={ () => setDrawerProps(prev => ({ open: !prev.open})) }>
- *       Toggle
- *     </Button>
- *     {drawer}
- *   </>
- * }
- * ```
- */
-declare function useDrawer(init?: DrawerProps): {
-  drawer: react_jsx_runtime0.JSX.Element;
-  drawerProps: DrawerProps;
-  setDrawerProps: setDrawerProps;
-};
-//#endregion
 //#region src/ErrorBoundary.d.ts
 /**
  * Styled error boundary.
  */
 declare function ErrorBoundary(props: ErrorBoundaryProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/Modal.d.ts
-interface ModalProps extends ModalProps$1 {
-  children?: JSX.Element | JSX.Element[] | string;
-}
-type setModalProps = Dispatch<SetStateAction<ModalProps>>;
-/**
- * Hook style modal
- *
- * ```tsx
- * function Example() {
- *   const { modal, setModalProps } = useModal()
- *
- *   return <>
- *     <Button onClick={() => setModalProps({ open: true })}>Open Modal</Button>
- *     {modal}
- *   </>
- * }
- * ```
- */
-declare function useModal(init?: ModalProps): {
-  modal: react_jsx_runtime0.JSX.Element;
-  modalProps: ModalProps;
-  setModalProps: setModalProps;
-};
-//#endregion
 //#region src/App.d.ts
 interface AppProps {
   children: React.ReactNode;
@@ -282,14 +230,6 @@ interface AppProps {
   /** @see https://faasjs.com/doc/ant-design/#configprovider */
   faasConfigProviderProps?: Omit<ConfigProviderProps, 'children'> | false;
 }
-interface useAppProps {
-  message: MessageInstance;
-  notification: NotificationInstance;
-  modalProps: ModalProps;
-  setModalProps: setModalProps;
-  drawerProps: DrawerProps;
-  setDrawerProps: setDrawerProps;
-}
 /**
  * App component with Ant Design & FaasJS
  *
@@ -318,19 +258,6 @@ interface useAppProps {
  * ```
  */
 declare function App(props: AppProps): react_jsx_runtime0.JSX.Element;
-declare namespace App {
-  var useApp: <NewT extends useAppProps = useAppProps>() => Readonly<NewT>;
-}
-/**
- * Get app context.
- *
- * ```ts
- * import { useApp } from '@faasjs/ant-design'
- *
- * const { message, notification, setModalProps, setDrawerProps } = useApp()
- * ```
- */
-declare const useApp: <NewT extends useAppProps = useAppProps>() => Readonly<NewT>;
 //#endregion
 //#region src/Blank.d.ts
 interface BlankProps {
@@ -576,7 +503,7 @@ type UnionFaasItemInjection<Value = any, Values = any> = {
  * @param value - The value of the current item.
  * @param values - The entire list of values.
  * @param index - The index of the current item in the list.
- * @param scene {@link UnionScene} - The scene in which the rendering is taking place.
+ * @param scene - The scene in which the rendering is taking place. See {@link UnionScene}.
  *
  * @example
  * ```tsx
@@ -747,7 +674,7 @@ interface DescriptionItemProps<T = any> extends FaasItemProps {
   object?: DescriptionItemProps<T>[];
 }
 interface DescriptionProps<T = any, ExtendItemProps = any> extends Omit<DescriptionsProps, 'items'> {
-  renderTitle?(values: T): ReactNode;
+  renderTitle?(this: void, values: T): ReactNode;
   items: (DescriptionItemProps | ExtendItemProps)[];
   extendTypes?: {
     [key: string]: ExtendDescriptionTypeProps;
@@ -796,6 +723,33 @@ declare namespace Description {
   var displayName: string;
 }
 //#endregion
+//#region src/Drawer.d.ts
+interface DrawerProps extends DrawerProps$1 {
+  children?: JSX.Element | JSX.Element[];
+}
+type setDrawerProps = Dispatch<SetStateAction<DrawerProps>>;
+/**
+ * Hook style drawer
+ *
+ * ```tsx
+ * function Example() {
+ *   const { drawer, setDrawerProps } = useDrawer()
+ *
+ *   return <>
+ *     <Button onClick={ () => setDrawerProps(prev => ({ open: !prev.open})) }>
+ *       Toggle
+ *     </Button>
+ *     {drawer}
+ *   </>
+ * }
+ * ```
+ */
+declare function useDrawer(init?: DrawerProps): {
+  drawer: react_jsx_runtime0.JSX.Element;
+  drawerProps: DrawerProps;
+  setDrawerProps: setDrawerProps;
+};
+//#endregion
 //#region src/Form.d.ts
 type FormSubmitProps = {
   /** Default: Submit */text?: string;
@@ -825,7 +779,7 @@ type FormSubmitProps = {
    * ```
    */
   to?: {
-    action: FaasAction | string; /** params will overwrite form values before submit */
+    action: FaasAction; /** params will overwrite form values before submit */
     params?: Record<string, any>;
     then?: (result: any) => void;
     catch?: (error: any) => void;
@@ -886,6 +840,31 @@ interface LinkProps {
  */
 declare function Link(props: LinkProps): react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/Modal.d.ts
+interface ModalProps extends ModalProps$1 {
+  children?: JSX.Element | JSX.Element[] | string;
+}
+type setModalProps = Dispatch<SetStateAction<ModalProps>>;
+/**
+ * Hook style modal
+ *
+ * ```tsx
+ * function Example() {
+ *   const { modal, setModalProps } = useModal()
+ *
+ *   return <>
+ *     <Button onClick={() => setModalProps({ open: true })}>Open Modal</Button>
+ *     {modal}
+ *   </>
+ * }
+ * ```
+ */
+declare function useModal(init?: ModalProps): {
+  modal: react_jsx_runtime0.JSX.Element;
+  modalProps: ModalProps;
+  setModalProps: setModalProps;
+};
+//#endregion
 //#region src/Routers.d.ts
 declare function PageNotFound(): react_jsx_runtime0.JSX.Element;
 interface RoutesProps {
@@ -990,6 +969,27 @@ interface TitleProps {
  */
 declare function Title(props: TitleProps): JSX.Element | null;
 //#endregion
+//#region src/useApp.d.ts
+interface useAppProps {
+  message: MessageInstance;
+  notification: NotificationInstance;
+  modalProps: ModalProps;
+  setModalProps: setModalProps;
+  drawerProps: DrawerProps;
+  setDrawerProps: setDrawerProps;
+}
+declare const AppContext: any;
+/**
+ * Get app context.
+ *
+ * ```ts
+ * import { useApp } from '@faasjs/ant-design'
+ *
+ * const { message, notification, setModalProps, setDrawerProps } = useApp()
+ * ```
+ */
+declare function useApp<NewT extends useAppProps = useAppProps>(this: void): Readonly<NewT>;
+//#endregion
 //#region src/useThemeToken.d.ts
 /**
  * Hook to retrieve the theme token from the Ant Design theme configuration.
@@ -1001,4 +1001,4 @@ declare function Title(props: TitleProps): JSX.Element | null;
  */
 declare function useThemeToken(): GlobalToken;
 //#endregion
-export { App, 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, 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, ExtendTableItemProps, ExtendTableTypeProps, ExtendTypes, FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, type FaasDataWrapperRef, FaasItemProps, FaasItemType, FaasItemTypeValue, FaasReactClient, type FaasReactClientOptions, Form, 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 };

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { ErrorBoundary as ErrorBoundary$1, FaasDataWrapper as FaasDataWrapper$1,
 import { Alert, Button, Col, ConfigProvider as ConfigProvider$1, DatePicker, Descriptions, Drawer, Form as Form$1, Input, InputNumber, Modal, Radio, Result, Row, Select, Skeleton, Space, Spin, Switch, Table as Table$1, Tabs as Tabs$1, Typography, message, notification, theme } from "antd";
 import { BrowserRouter, Route, Routes as Routes$1, useLocation, useNavigate } from "react-router-dom";
 import { cloneDeep, defaultsDeep, isNil, uniqBy } from "lodash-es";
-import { Suspense, cloneElement, createContext, createElement, isValidElement, lazy, useContext, useEffect, useState } from "react";
+import { Suspense, cloneElement, createContext, createElement, isValidElement, lazy, useCallback, 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";
@@ -23,7 +23,7 @@ function Loading(props) {
 	if (props.loading === false) return /* @__PURE__ */ jsx(Fragment, { children: props.children });
 	return /* @__PURE__ */ jsx("div", {
 		style: {
-			...props.style || {},
+			...props.style,
 			...!props.size || props.size === "large" ? {
 				margin: "20vh auto",
 				textAlign: "center"
@@ -248,7 +248,7 @@ function useModal(init) {
 	};
 }
 //#endregion
-//#region src/App.tsx
+//#region src/useApp.ts
 const AppContext = createSplittingContext([
 	"message",
 	"notification",
@@ -257,6 +257,20 @@ const AppContext = createSplittingContext([
 	"drawerProps",
 	"setDrawerProps"
 ]);
+/**
+* Get app context.
+*
+* ```ts
+* import { useApp } from '@faasjs/ant-design'
+*
+* const { message, notification, setModalProps, setDrawerProps } = useApp()
+* ```
+*/
+function useApp() {
+	return AppContext.use();
+}
+//#endregion
+//#region src/App.tsx
 function RoutesApp(props) {
 	const location = useLocation();
 	const { drawerProps, setDrawerProps, modalProps, setModalProps } = useApp();
@@ -341,17 +355,6 @@ function App(props) {
 		})
 	});
 }
-/**
-* Get app context.
-*
-* ```ts
-* import { useApp } from '@faasjs/ant-design'
-*
-* const { message, notification, setModalProps, setDrawerProps } = useApp()
-* ```
-*/
-const useApp = AppContext.use;
-App.useApp = useApp;
 //#endregion
 //#region src/Blank.tsx
 /**
@@ -446,7 +449,7 @@ function cloneUnionFaasItemElement(element, props) {
 //#region src/Description.tsx
 function DescriptionItemContent(props) {
 	const [computedProps, setComputedProps] = useState();
-	useEffect(() => {
+	useEqualEffect(() => {
 		const propsCopy = { ...props };
 		propsCopy.item.title = propsCopy.item.title ?? idToTitle(propsCopy.item.id);
 		if (!propsCopy.item.type) propsCopy.item.type = "string";
@@ -627,7 +630,7 @@ function FormItem(props) {
 	const [extendTypes, setExtendTypes] = useState();
 	const { theme } = useConfigContext();
 	const [hidden, setHidden] = useState(props.hidden || false);
-	useEffect(() => {
+	useEqualEffect(() => {
 		const { extendTypes, ...propsCopy } = { ...props };
 		if (extendTypes) setExtendTypes(extendTypes);
 		if (propsCopy.if) {
@@ -644,7 +647,11 @@ function FormItem(props) {
 			delete propsCopy.hidden;
 		}
 		setComputedProps(processProps(propsCopy, theme.common));
-	}, [props]);
+	}, [
+		hidden,
+		props,
+		theme.common
+	]);
 	if (!computedProps) return null;
 	const itemType = computedProps.type ?? "string";
 	if (hidden) return /* @__PURE__ */ jsx(Form$1.Item, {
@@ -876,19 +883,21 @@ function Form(props) {
 	const [extendTypes, setExtendTypes] = useState();
 	const [form] = Form$1.useForm(props.form);
 	const [initialValues, setInitialValues] = useState(props.initialValues || Object.create(null));
-	useEffect(() => {
+	useEqualEffect(() => {
 		const { submit, ...propsCopy } = {
 			...props,
 			form
 		};
+		let nextInitialValues = propsCopy.initialValues;
 		if (typeof submit !== "undefined") setSubmit(submit);
 		if (propsCopy.initialValues && propsCopy.items?.length) {
 			for (const key in propsCopy.initialValues) propsCopy.initialValues[key] = transferValue(propsCopy.items.find((item) => isFormItemProps(item) && item.id === key)?.type, propsCopy.initialValues[key]);
+			nextInitialValues = propsCopy.initialValues;
 			setInitialValues(propsCopy.initialValues);
 			delete propsCopy.initialValues;
 		}
 		if (propsCopy.items?.length) {
-			for (const item of propsCopy.items) if (isFormItemProps(item) && item.if) item.hidden = !item.if(initialValues || Object.create(null));
+			for (const item of propsCopy.items) if (isFormItemProps(item) && item.if) item.hidden = !item.if(nextInitialValues || Object.create(null));
 		}
 		const submitTo = typeof submit === "object" ? submit.to : void 0;
 		if (propsCopy.onFinish) {
@@ -927,7 +936,7 @@ function Form(props) {
 			delete propsCopy.extendTypes;
 		}
 		setComputedProps(propsCopy);
-	}, [props]);
+	}, [form, props]);
 	const onValuesChange = useEqualCallback((changedValues, allValues) => {
 		console.debug("Form:onValuesChange", changedValues, allValues);
 		if (props.onValuesChange) props.onValuesChange(changedValues, allValues);
@@ -937,12 +946,12 @@ function Form(props) {
 			if (item?.onValueChange) item.onValueChange(changedValues[key], allValues, form);
 		}
 	}, [computedProps]);
-	useEffect(() => {
+	useEqualEffect(() => {
 		if (!initialValues) return;
 		console.debug("Form:initialValues", initialValues);
 		form.setFieldsValue(initialValues);
 		setInitialValues(null);
-	}, [computedProps]);
+	}, [form, initialValues]);
 	if (!computedProps) return null;
 	return /* @__PURE__ */ jsxs(Form$1, {
 		...computedProps,
@@ -993,7 +1002,7 @@ function Link(props) {
 	const navigate = useNavigate();
 	const target = props.target || theme.Link?.target || (props.href.startsWith("http") ? "_blank" : void 0);
 	let computedStyle = {
-		...theme.Link.style || {},
+		...theme.Link.style,
 		cursor: "pointer",
 		...props.style
 	};
@@ -1007,8 +1016,16 @@ function Link(props) {
 		...buttonProps,
 		style: computedStyle,
 		onClick: (e) => {
-			props.onClick ? props.onClick(e) : target === "_blank" ? window.open(props.href) : navigate(props.href);
 			e.preventDefault();
+			if (props.onClick) {
+				props.onClick(e);
+				return;
+			}
+			if (target === "_blank") {
+				window.open(props.href);
+				return;
+			}
+			navigate(props.href);
 		},
 		children: props.children ?? props.text
 	});
@@ -1108,7 +1125,8 @@ function processValue(item, value) {
 function Table(props) {
 	const [columns, setColumns] = useState();
 	const { theme } = useConfigContext();
-	const generateFilterDropdown = (item) => {
+	const { all, blank, search } = theme.common;
+	const generateFilterDropdown = useCallback((item) => {
 		if (item.filterDropdown && item.filterDropdown !== true) return;
 		if (!item.options?.length) return;
 		if (item.options.length < 11) {
@@ -1129,7 +1147,7 @@ function Table(props) {
 				allowClear: true,
 				showSearch: true,
 				style: { width: "100%" },
-				placeholder: `${theme.common.search} ${item.title}`,
+				placeholder: `${search} ${item.title}`,
 				value: selectedKeys,
 				onChange: (v) => {
 					setSelectedKeys(v?.length ? v : []);
@@ -1137,18 +1155,19 @@ function Table(props) {
 				},
 				mode: "multiple",
 				filterOption: (input, option) => {
-					if (!input || !option || !option.label) return true;
+					if (!input || !option) return true;
+					if (typeof option.label !== "string") return option.value === input;
 					input = input.trim();
-					return option.value === input || option.label.toString().toLowerCase().includes(input.toLowerCase());
+					return option.value === input || option.label.toLowerCase().includes(input.toLowerCase());
 				}
 			})
 		});
 		return item;
-	};
-	useEffect(() => {
+	}, [search]);
+	useEqualEffect(() => {
 		const items = cloneDeep(props.items).filter((item) => !(item.tableChildren === null || item.children === null || item.tableRender === null || item.render === null));
 		const createTextSearchFilterDropdown = (item, transformValue) => ({ setSelectedKeys, confirm, clearFilters }) => /* @__PURE__ */ jsx(Input.Search, {
-			placeholder: `${theme.common.search} ${item.title}`,
+			placeholder: `${search} ${item.title}`,
 			allowClear: true,
 			onSearch: (v) => {
 				if (v) setSelectedKeys(transformValue ? [transformValue(v)] : [v]);
@@ -1246,7 +1265,7 @@ function Table(props) {
 					}
 					break;
 				case "number[]":
-					if (!item.render) item.render = (value) => processValue(item, value).join(", ");
+					if (!item.render) item.render = (value) => processValue(item, value);
 					if (item.filterDropdown !== false) {
 						if (!item.onFilter && !props.faasData) item.onFilter = (value, row) => {
 							if (value === null && (!row[item.id] || !row[item.id].length)) return true;
@@ -1265,7 +1284,7 @@ function Table(props) {
 						color: "#ff4d4f"
 					} });
 					if (item.filterDropdown !== false) {
-						if (typeof item.filterDropdown === "undefined") item.filterDropdown = ({ setSelectedKeys, selectedKeys, confirm }) => /* @__PURE__ */ jsxs(Radio.Group, {
+						if (typeof item.filterDropdown === "undefined") item.filterDropdown = ({ setSelectedKeys, selectedKeys, confirm: confirmFilter }) => /* @__PURE__ */ jsxs(Radio.Group, {
 							style: { padding: 8 },
 							buttonStyle: "solid",
 							value: JSON.stringify(selectedKeys[0]),
@@ -1275,10 +1294,10 @@ function Table(props) {
 									false: false,
 									null: null
 								}[e.target.value]] : []);
-								confirm();
+								confirmFilter();
 							},
 							children: [
-								/* @__PURE__ */ jsx(Radio.Button, { children: theme.common.all }),
+								/* @__PURE__ */ jsx(Radio.Button, { children: all }),
 								/* @__PURE__ */ jsx(Radio.Button, {
 									value: "true",
 									children: /* @__PURE__ */ jsx(CheckOutlined, { style: {
@@ -1295,7 +1314,7 @@ function Table(props) {
 								}),
 								/* @__PURE__ */ jsx(Radio.Button, {
 									value: "null",
-									children: theme.common.blank
+									children: blank
 								})
 							]
 						});
@@ -1319,7 +1338,9 @@ function Table(props) {
 					};
 					if (item.filterDropdown !== false) {
 						if (typeof item.filterDropdown === "undefined") item.filterDropdown = ({ setSelectedKeys, confirm }) => /* @__PURE__ */ jsx(DatePicker.RangePicker, { onChange: (dates) => {
-							setSelectedKeys(dates?.[0] && dates[1] ? [[dates[0].startOf("day").toISOString(), dates[1].endOf("day").toISOString()]] : []);
+							const start = dates?.[0];
+							const end = dates?.[1];
+							setSelectedKeys(start && end ? [[start.startOf("day").toISOString(), end.endOf("day").toISOString()]] : []);
 							confirm();
 						} });
 						if (!item.onFilter && !props.faasData) item.onFilter = (value, row) => {
@@ -1353,8 +1374,16 @@ function Table(props) {
 			}
 		}
 		setColumns(items);
-	}, [props.items]);
-	useEffect(() => {
+	}, [
+		all,
+		blank,
+		generateFilterDropdown,
+		props.extendTypes,
+		props.faasData,
+		props.items,
+		search
+	]);
+	useEqualEffect(() => {
 		if (!props.dataSource || !columns) return;
 		for (const column of columns) if (column.optionsType === "auto" && !column.options && !column.filters) {
 			const options = uniqBy(props.dataSource, column.id).map((v) => ({
@@ -1370,7 +1399,11 @@ function Table(props) {
 				return newColumns;
 			});
 		}
-	}, [props.dataSource, columns]);
+	}, [
+		props.dataSource,
+		columns,
+		generateFilterDropdown
+	]);
 	if (!columns) return null;
 	if (props.dataSource) return /* @__PURE__ */ jsx(Table$1, {
 		...props,
@@ -1392,7 +1425,7 @@ function Table(props) {
 }
 function FaasDataTable({ props, columns, data, params, reload, loading }) {
 	const [currentColumns, setCurrentColumns] = useState(columns);
-	useEffect(() => {
+	useEqualEffect(() => {
 		if (!data || Array.isArray(data)) return;
 		setCurrentColumns((prev) => {
 			const newColumns = [...prev];
@@ -1529,7 +1562,7 @@ function Tabs(props) {
 */
 function Title(props) {
 	const { theme } = useConfigContext();
-	useEffect(() => {
+	useEqualEffect(() => {
 		const title = Array.isArray(props.title) ? props.title : [props.title];
 		document.title = title.concat(props.suffix || theme.Title.suffix).filter((t) => !!t).join(props.separator || theme.Title.separator);
 	}, [props, theme.Title]);
@@ -1559,4 +1592,4 @@ function useThemeToken() {
 	return theme.useToken().token;
 }
 //#endregion
-export { App, 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, faas, idToTitle, lazy, 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.14",
+  "version": "8.0.0-beta.16",
   "homepage": "https://faasjs.com/doc/ant-design",
   "bugs": {
     "url": "https://github.com/faasjs/faasjs/issues"
@@ -26,12 +26,9 @@
       "require": "./dist/index.cjs"
     }
   },
-  "scripts": {
-    "build": "tsdown src/index.ts --config ../../tsdown.config.ts --dts.eager --no-sourcemap --no-dts.sourcemap"
-  },
   "devDependencies": {
     "@ant-design/icons": "*",
-    "@faasjs/react": ">=8.0.0-beta.14",
+    "@faasjs/react": ">=8.0.0-beta.16",
     "@types/lodash-es": "*",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
@@ -43,7 +40,7 @@
   },
   "peerDependencies": {
     "@ant-design/icons": "*",
-    "@faasjs/react": ">=8.0.0-beta.14",
+    "@faasjs/react": ">=8.0.0-beta.16",
     "antd": "^6.0.0",
     "lodash-es": "*",
     "react": "^19.0.0",