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

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)

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"
@@ -470,7 +470,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 +651,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 +668,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 +904,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 +957,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 +967,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 +1023,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 +1037,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 +1146,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 +1168,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 +1176,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 +1286,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 +1305,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 +1315,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 +1335,7 @@ function Table(props) {
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Radio.Button, {
 									value: "null",
-									children: theme.common.blank
+									children: blank
 								})
 							]
 						});
@@ -1343,7 +1359,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 +1395,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 +1420,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 +1446,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 +1583,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]);

package/dist/index.d.ts

@@ -1,12 +1,12 @@
-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 { MessageInstance } from "antd/es/message/interface";
+import { NotificationInstance } from "antd/es/notification/interface";
 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";
@@ -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.
  *
@@ -319,7 +319,7 @@ interface useAppProps {
  */
 declare function App(props: AppProps): react_jsx_runtime0.JSX.Element;
 declare namespace App {
-  var useApp: <NewT extends useAppProps = useAppProps>() => Readonly<NewT>;
+  var useApp: any;
 }
 /**
  * Get app context.
@@ -330,7 +330,7 @@ declare namespace App {
  * const { message, notification, setModalProps, setDrawerProps } = useApp()
  * ```
  */
-declare const useApp: <NewT extends useAppProps = useAppProps>() => Readonly<NewT>;
+declare const useApp: any;
 //#endregion
 //#region src/Blank.d.ts
 interface BlankProps {
@@ -747,7 +747,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;
@@ -825,7 +825,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;

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"
@@ -446,7 +446,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 +627,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 +644,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 +880,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 +933,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 +943,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 +999,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 +1013,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 +1122,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 +1144,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 +1152,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 +1262,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 +1281,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 +1291,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 +1311,7 @@ function Table(props) {
 								}),
 								/* @__PURE__ */ jsx(Radio.Button, {
 									value: "null",
-									children: theme.common.blank
+									children: blank
 								})
 							]
 						});
@@ -1319,7 +1335,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 +1371,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 +1396,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 +1422,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 +1559,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]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "8.0.0-beta.14",
+  "version": "8.0.0-beta.15",
   "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.15",
     "@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.15",
     "antd": "^6.0.0",
     "lodash-es": "*",
     "react": "^19.0.0",