@faasjs/ant-design 6.4.0 → 6.4.2

package/README.md

@@ -5,6 +5,11 @@ UI components based on [FaasJS](https://faasjs.com), [Ant Design](https://ant.de
 [![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
@@ -34,6 +39,7 @@ type FaasItemProps = {
 
 - [App](functions/App.md)
 - [Blank](functions/Blank.md)
+- [cloneUnionFaasItemElement](functions/cloneUnionFaasItemElement.md)
 - [ConfigContext](functions/ConfigContext.md)
 - [ConfigProvider](functions/ConfigProvider.md)
 - [Description](functions/Description.md)

package/dist/index.cjs

@@ -281,6 +281,12 @@ function transferValue(type, value) {
   }
   return value;
 }
+function cloneUnionFaasItemElement(element, props) {
+  return react$1.cloneElement(
+    react$1.isValidElement(element) ? element : react$1.createElement(element),
+    props
+  );
+}
 function Loading(props) {
   if (props.loading === false) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -336,9 +342,22 @@ function DescriptionItemContent(props) {
     setComputedProps(propsCopy);
   }, [props]);
   if (!computedProps) return null;
+  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;
+  if (children)
+    return cloneUnionFaasItemElement(children, {
+      scene: "description",
+      value: computedProps.value,
+      values: computedProps.values,
+      index: 0
+    });
+  const render = computedProps.item.descriptionRender || computedProps.item.render;
+  if (render)
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: render(computedProps.value, computedProps.values, 0, "description") });
   if (computedProps.extendTypes?.[computedProps.item.type]) {
     if (computedProps.extendTypes[computedProps.item.type].children)
-      return react$1.cloneElement(
+      return cloneUnionFaasItemElement(
         computedProps.extendTypes[computedProps.item.type].children,
         {
           scene: "description",
@@ -355,34 +374,6 @@ function DescriptionItemContent(props) {
       ) });
     throw Error(`${computedProps.item.type} requires children or render`);
   }
-  if (computedProps.item.descriptionChildren === null) return null;
-  if (computedProps.item.descriptionChildren)
-    return react$1.cloneElement(computedProps.item.descriptionChildren, {
-      scene: "description",
-      value: computedProps.value,
-      values: computedProps.values
-    });
-  if (computedProps.item.children === null) return null;
-  if (computedProps.item.children)
-    return react$1.cloneElement(computedProps.item.children, {
-      scene: "description",
-      value: computedProps.value,
-      values: computedProps.values
-    });
-  if (computedProps.item.descriptionRender)
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: computedProps.item.descriptionRender(
-      computedProps.value,
-      computedProps.values,
-      0,
-      "description"
-    ) });
-  if (computedProps.item.render)
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: computedProps.item.render(
-      computedProps.value,
-      computedProps.values,
-      0,
-      "description"
-    ) });
   if (computedProps.value === null || Array.isArray(computedProps.value) && !computedProps.value.length)
     return /* @__PURE__ */ jsxRuntime.jsx(Blank, {});
   switch (computedProps.item.type) {
@@ -563,18 +554,18 @@ function FormItem(props) {
   if (!computedProps) return null;
   if (hidden)
     return /* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { ...computedProps, noStyle: true, rules: [], children: /* @__PURE__ */ jsxRuntime.jsx(antd.Input, { type: "hidden", hidden: true }) });
+  if (computedProps.formChildren === null || computedProps.children === null || computedProps.formRender === null || computedProps.render === null)
+    return null;
+  const children = computedProps.formChildren || computedProps.children;
+  if (children)
+    return /* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { ...computedProps, children: cloneUnionFaasItemElement(children, { scene: "form" }) });
+  const render = computedProps.formRender || computedProps.render;
+  if (render)
+    return /* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { ...computedProps, children: render(null, null, 0, "form") });
   if (extendTypes?.[computedProps.type])
-    return /* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { ...computedProps, children: extendTypes[computedProps.type].children });
-  if (computedProps.formChildren === null) return null;
-  if (computedProps.formChildren)
-    return /* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { ...computedProps, children: react$1.cloneElement(computedProps.formChildren, { scene: "form" }) });
-  if (computedProps.children === null) return null;
-  if (computedProps.children)
-    return /* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { ...computedProps, children: react$1.cloneElement(computedProps.children, { scene: "form" }) });
-  if (computedProps.formRender)
-    return /* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { ...computedProps, children: computedProps.formRender(null, null, 0, "form") });
-  if (computedProps.render)
-    return /* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { ...computedProps, children: computedProps.render(null, null, 0, "form") });
+    return /* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { ...computedProps, children: cloneUnionFaasItemElement(extendTypes[computedProps.type].children, {
+      scene: "form"
+    }) });
   switch (computedProps.type) {
     case "string":
       if (isOptionsProps(computedProps))
@@ -1051,29 +1042,39 @@ function Table(props) {
         });
         generateFilterDropdown(item);
       }
-      if (item.tableChildren === null) item.render = () => null;
-      else if (item.tableChildren)
-        item.render = (value, values) => react$1.cloneElement(item.tableChildren, {
-          scene: "table",
-          value,
-          values
-        });
-      else if (item.children === null) item.render = () => null;
-      else if (item.children)
-        item.render = (value, values) => react$1.cloneElement(item.children, {
+      const isNull = item.tableChildren === null || item.children === null || item.tableRender === null || item.render === null;
+      if (isNull) {
+        item.render = () => null;
+        continue;
+      }
+      const children = item.tableChildren || item.children;
+      if (children) {
+        item.render = (value, values) => cloneUnionFaasItemElement(children, {
           scene: "table",
           value,
-          values
+          values,
+          index: 0
         });
+        delete item.children;
+        delete item.tableChildren;
+        continue;
+      }
+      const render = item.tableRender || item.render;
+      if (render) {
+        item.render = (value, values) => render(value, values, 0, "table");
+        delete item.tableRender;
+        continue;
+      }
       if (props.extendTypes?.[item.type]) {
-        if (props.extendTypes[item.type].children)
-          item.render = (value, values) => react$1.cloneElement(props.extendTypes[item.type].children, {
+        if (props.extendTypes[item.type].children) {
+          item.render = (value, values) => cloneUnionFaasItemElement(props.extendTypes[item.type].children, {
             scene: "table",
             value,
-            values
+            values,
+            index: 0
           });
-        else if (props.extendTypes[item.type].render)
-          item.render = props.extendTypes[item.type].render;
+        } else if (props.extendTypes[item.type].render)
+          item.render = (value, values) => props.extendTypes[item.type].render(value, values, 0, "table");
         else throw Error(`${item.type} requires children or render`);
         continue;
       }
@@ -1591,6 +1592,7 @@ exports.Routes = Routes;
 exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Title = Title;
+exports.cloneUnionFaasItemElement = cloneUnionFaasItemElement;
 exports.transferOptions = transferOptions;
 exports.transferValue = transferValue;
 exports.upperFirst = upperFirst;

package/dist/index.d.ts

@@ -7,7 +7,7 @@ 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, JSX, Dispatch, SetStateAction, ReactNode, ReactElement, LazyExoticComponent, ComponentType } from 'react';
+import { CSSProperties, JSX, Dispatch, SetStateAction, ReactNode, ReactElement, FC, LazyExoticComponent, ComponentType } from 'react';
 export { lazy } from 'react';
 import * as antd_es_modal_PurePanel from 'antd/es/modal/PurePanel';
 import * as antd_es_modal_useModal from 'antd/es/modal/useModal';
@@ -302,10 +302,10 @@ interface ExtendDescriptionTypeProps<T = any> {
 }
 type ExtendDescriptionItemProps = BaseItemProps;
 interface DescriptionItemProps<T = any> extends FaasItemProps {
-    children?: UnionFaasItemElement<T>;
-    descriptionChildren?: UnionFaasItemElement<T>;
-    render?: UnionFaasItemRender<T>;
-    descriptionRender?: UnionFaasItemRender<T>;
+    children?: UnionFaasItemElement<T> | null;
+    descriptionChildren?: UnionFaasItemElement<T> | null;
+    render?: UnionFaasItemRender<T> | null;
+    descriptionRender?: UnionFaasItemRender<T> | null;
     if?: (values: Record<string, any>) => boolean;
     object?: DescriptionItemProps<T>[];
 }
@@ -379,10 +379,10 @@ interface FormItemProps<T = any> extends BaseItemProps, Omit<FormItemProps$1<T>,
     disabled?: boolean;
     required?: boolean;
     col?: number;
-    children?: UnionFaasItemElement<T>;
-    formChildren?: UnionFaasItemElement<T>;
-    render?: UnionFaasItemRender<T>;
-    formRender?: UnionFaasItemRender<T>;
+    children?: UnionFaasItemElement<T> | null;
+    formChildren?: UnionFaasItemElement<T> | null;
+    render?: UnionFaasItemRender<T> | null;
+    formRender?: UnionFaasItemRender<T> | null;
     rules?: RuleObject[];
     label?: string | false;
     extendTypes?: ExtendTypes;
@@ -456,14 +456,14 @@ declare namespace FormItem {
 
 interface TableItemProps<T = any> extends FaasItemProps, Omit<TableColumnProps<T>, 'title' | 'children' | 'render'> {
     optionsType?: 'auto';
-    children?: UnionFaasItemElement<T>;
-    tableChildren?: UnionFaasItemElement<T>;
-    render?: UnionFaasItemRender<T>;
-    tableRender?: UnionFaasItemRender<T>;
+    children?: UnionFaasItemElement<T> | null;
+    tableChildren?: UnionFaasItemElement<T> | null;
+    render?: UnionFaasItemRender<T> | null;
+    tableRender?: UnionFaasItemRender<T> | null;
     object?: TableItemProps<T>[];
 }
 type ExtendTableTypeProps<T = any> = {
-    children?: JSX.Element;
+    children?: UnionFaasItemElement<T>;
     render?: UnionFaasItemRender<T>;
 };
 type ExtendTableItemProps<T = any> = BaseItemProps & Omit<TableColumnProps<T>, 'children'>;
@@ -538,13 +538,170 @@ type UnionFaasItemInjection<Value = any, Values = any> = {
     values?: Values;
     index?: number;
 };
+/**
+ * A type representing a function that renders a React node for a given item in a list.
+ *
+ * @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.
+ *
+ * @example
+ * ```tsx
+ * import { type UnionFaasItemRender, Form, Description, Table } from '@faasjs/ant-design'
+ *
+ * const nameReader: UnionFaasItemRender = (value, values, index, scene) => {
+ *   switch (scene) {
+ *     case 'form':
+ *       return <input />
+ *     case 'description':
+ *     case 'table':
+ *       return <span>{value}</span>
+ *     default:
+ *       return null
+ *   }
+ * }
+ *
+ * const items = [
+ *   {
+ *     id: 'name',
+ *     render: nameReader,
+ *   }
+ * ]
+ *
+ * function App() {
+ *   return <>
+ *     <Form items={items} /> // Will render an input
+ *     <Description items={items} dataSource={{ name: 'John' }} /> // Will render a span
+ *     <Table items={items} dataSource={[{ name: 'John' }]} /> // Will render a span
+ *   </>
+ * }
+ * ```
+ */
 type UnionFaasItemRender<Value = any, Values = any> = (value: Value, values: Values, index: number, scene: UnionScene) => React.ReactNode;
-type UnionFaasItemElement<Value = any, Values = any> = ReactElement<UnionFaasItemInjection<Value, Values>> | null;
+/**
+ * Represents a React element that is used in the UnionFaasItem context.
+ *
+ * @template Value - The type of the value associated with the element. Defaults to `any`.
+ * @template Values - The type of the values associated with the element. Defaults to `any`.
+ *
+ * This type can either be a React element with the specified injection types or `null`.
+ *
+ * @example
+ * ```tsx
+ * import { type UnionFaasItemElement, Form, Description, Table } from '@faasjs/ant-design'
+ *
+ * const NameComponent: UnionFaasItemElement = ({ scene, value }) => {
+ *   switch (scene) {
+ *     switch (scene) {
+ *     case 'form':
+ *       return <input />
+ *     case 'description':
+ *     case 'table':
+ *       return <span>{value}</span>
+ *     default:
+ *       return null
+ *   }
+ * }
+ *
+ * const items = [
+ *   {
+ *    id: 'name',
+ *    children: NameComponent // both `NameComponent` and `<NameComponent />` is valid
+ *   }
+ * ]
+ *
+ * function App() {
+ *   return <>
+ *    <Form items={items} /> // Will render an input
+ *    <Description items={items} dataSource={{ name: 'John' }} /> // Will render a span
+ *    <Table items={items} dataSource={[{ name: 'John' }]} /> // Will render a span
+ *  </>
+ * }
+ * ```
+ */
+type UnionFaasItemElement<Value = any, Values = any> = ReactElement<UnionFaasItemInjection<Value, Values>> | FC<UnionFaasItemInjection<Value, Values>>;
+/**
+ * Interface representing the properties of a UnionFaas item.
+ *
+ * The UnionFaas item can be used in a form, description, or table.
+ *
+ * ### Render Priority Order
+ *
+ * 1. **Null Rendering**
+ *    1. Returns `null` if specific children or render props are null:
+ *        - `formChildren` / `descriptionChildren` / `tableChildren` / `formRender` / `descriptionRender` / `tableRender`
+ *    2. Returns `null` if `children` or `render` prop is null
+ * 2. **Children Rendering**
+ *    1. First priority: Component-specific children
+ *        - `formChildren` for Form
+ *        - `descriptionChildren` for Description
+ *        - `tableChildren` for Table
+ *    2. Second priority: Generic `children` prop
+ * 3. **Custom Render Functions**
+ *    1. First priority: Component-specific render functions
+ *        - `formRender` for Form
+ *        - `descriptionRender` for Description
+ *        - `tableRender` for Table
+ *    2. Second priority: Generic `render` prop
+ * 4. **Extended Types**
+ *    - Renders based on registered extended type handlers
+ * 5. **Default Rendering**
+ *    - Renders primitive types (string, number, etc.)
+ *    - Uses default formatting based on data type
+ *
+ * @example
+ * ```tsx
+ * import { type UnionFaasItemProps, Form, Table, Description } from '@faasjs/ant-design'
+ *
+ * const item: UnionFaasItemProps[] = [
+ *   {
+ *     id: 'id',
+ *     formChildren: null, // Don't show in form, only in description and table
+ *   },
+ *   {
+ *     id: 'name',
+ *     required: true, // Required in form
+ *   },
+ *   {
+ *     id: 'age',
+ *     type: 'number', // Number type in form, description and table
+ *     options: ['< 18', '>= 18'], // Options in form and table
+ *   }
+ * ]
+ *
+ * const data = {
+ *   id: '1',
+ *   name: 'John',
+ *   age: '>= 18',
+ * }
+ *
+ * function App() {
+ *   return <>
+ *     <Form items={item} /> // Use in form
+ *     <Description items={item} dataSource={data} /> // Use in description
+ *     <Table items={item} dataSource={[ data ]} /> // Use in table
+ *   </>
+ * }
+ * ```
+ */
 interface UnionFaasItemProps<Value = any, Values = any> extends FormItemProps, DescriptionItemProps, TableItemProps {
-    children?: UnionFaasItemElement<UnionFaasItemProps<Value, Values>> | null;
-    render?: UnionFaasItemRender;
+    children?: UnionFaasItemElement<Value, Values> | null;
+    render?: UnionFaasItemRender<Value, Values> | null;
     object?: UnionFaasItemProps<Value, Values>[];
 }
+/**
+ * Clone a UnionFaasItemElement with the given props.
+ *
+ * This function takes a UnionFaasItemElement and props, and returns a cloned element.
+ * If the provided element is a valid React element, it clones it with the new props.
+ * Otherwise, it creates a new element from the provided element and props.
+ *
+ * @param element - The UnionFaasItemElement to be cloned.
+ * @param props - The props to be applied to the cloned element.
+ * @returns The cloned element with the applied props.
+ */
+declare function cloneUnionFaasItemElement(element: UnionFaasItemElement, props: any): ReactElement<UnionFaasItemInjection<any, any>, string | react.JSXElementConstructor<any>>;
 
 type FormSubmitProps = {
     /** Default: Submit */
@@ -750,4 +907,4 @@ declare namespace Title {
     var whyDidYouRender: boolean;
 }
 
-export { App, type AppProps, type BaseItemProps, type BaseOption, Blank, type BlankProps, ConfigContext, ConfigProvider, type ConfigProviderProps, Description, type DescriptionItemContentProps, type DescriptionItemProps, type DescriptionProps, Drawer, type DrawerProps, ErrorBoundary, type ExtendDescriptionItemProps, type ExtendDescriptionTypeProps, type ExtendFormItemProps, type ExtendFormTypeProps, type ExtendTableItemProps, type ExtendTableTypeProps, type ExtendTypes, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, type FaasItemProps, type FaasItemType, type FaasItemTypeValue, Form, FormItem, type FormItemProps, type FormProps, type FormSubmitProps, Link, type LinkProps, Loading, type LoadingProps, Modal, type ModalProps, PageNotFound, Routes, type RoutesProps, type TabProps, Table, type TableItemProps, type TableProps, Tabs, type TabsProps, Title, type TitleProps, type UnionFaasItemElement, type UnionFaasItemInjection, type UnionFaasItemProps, type UnionFaasItemRender, type UnionScene, type setDrawerProps, type setModalProps, transferOptions, transferValue, upperFirst, useApp, type useAppProps, useConfigContext, useDrawer, useModal, withFaasData };
+export { App, type AppProps, type BaseItemProps, type BaseOption, Blank, type BlankProps, ConfigContext, ConfigProvider, type ConfigProviderProps, Description, type DescriptionItemContentProps, type DescriptionItemProps, type DescriptionProps, Drawer, type DrawerProps, ErrorBoundary, type ExtendDescriptionItemProps, type ExtendDescriptionTypeProps, type ExtendFormItemProps, type ExtendFormTypeProps, type ExtendTableItemProps, type ExtendTableTypeProps, type ExtendTypes, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, type FaasItemProps, type FaasItemType, type FaasItemTypeValue, Form, FormItem, type FormItemProps, type FormProps, type FormSubmitProps, Link, type LinkProps, Loading, type LoadingProps, Modal, type ModalProps, PageNotFound, Routes, type RoutesProps, type TabProps, Table, type TableItemProps, type TableProps, Tabs, type TabsProps, Title, type TitleProps, type UnionFaasItemElement, type UnionFaasItemInjection, type UnionFaasItemProps, type UnionFaasItemRender, type UnionScene, cloneUnionFaasItemElement, type setDrawerProps, type setModalProps, transferOptions, transferValue, upperFirst, useApp, type useAppProps, useConfigContext, useDrawer, useModal, withFaasData };

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { legacyLogicalPropertiesTransformer, StyleProvider } from '@ant-design/c
 import { Form as Form$1, Drawer as Drawer$1, Modal as Modal$1, message, notification, ConfigProvider as ConfigProvider$1, Typography, Spin, Descriptions, Input, Button, Row, Col, DatePicker, Switch, Select, InputNumber, Radio, Result, Skeleton, Table as Table$1, Tabs as Tabs$1, Alert, Space } from 'antd';
 import { BrowserRouter, useNavigate, Routes as Routes$1, Route, useLocation } from 'react-router-dom';
 import { defaultsDeep, cloneDeep, isNil, uniqBy } from 'lodash-es';
-import { createContext, useState, useContext, useEffect, cloneElement, Suspense } from 'react';
+import { createContext, useState, useContext, cloneElement, isValidElement, createElement, useEffect, Suspense } from 'react';
 export { lazy } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import dayjs2 from 'dayjs';
@@ -277,6 +277,12 @@ function transferValue(type, value) {
   }
   return value;
 }
+function cloneUnionFaasItemElement(element, props) {
+  return cloneElement(
+    isValidElement(element) ? element : createElement(element),
+    props
+  );
+}
 function Loading(props) {
   if (props.loading === false) return /* @__PURE__ */ jsx(Fragment, { children: props.children });
   return /* @__PURE__ */ jsx(
@@ -332,9 +338,22 @@ function DescriptionItemContent(props) {
     setComputedProps(propsCopy);
   }, [props]);
   if (!computedProps) return null;
+  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;
+  if (children)
+    return cloneUnionFaasItemElement(children, {
+      scene: "description",
+      value: computedProps.value,
+      values: computedProps.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?.[computedProps.item.type]) {
     if (computedProps.extendTypes[computedProps.item.type].children)
-      return cloneElement(
+      return cloneUnionFaasItemElement(
         computedProps.extendTypes[computedProps.item.type].children,
         {
           scene: "description",
@@ -351,34 +370,6 @@ function DescriptionItemContent(props) {
       ) });
     throw Error(`${computedProps.item.type} requires children or render`);
   }
-  if (computedProps.item.descriptionChildren === null) return null;
-  if (computedProps.item.descriptionChildren)
-    return cloneElement(computedProps.item.descriptionChildren, {
-      scene: "description",
-      value: computedProps.value,
-      values: computedProps.values
-    });
-  if (computedProps.item.children === null) return null;
-  if (computedProps.item.children)
-    return cloneElement(computedProps.item.children, {
-      scene: "description",
-      value: computedProps.value,
-      values: computedProps.values
-    });
-  if (computedProps.item.descriptionRender)
-    return /* @__PURE__ */ jsx(Fragment, { children: computedProps.item.descriptionRender(
-      computedProps.value,
-      computedProps.values,
-      0,
-      "description"
-    ) });
-  if (computedProps.item.render)
-    return /* @__PURE__ */ jsx(Fragment, { children: computedProps.item.render(
-      computedProps.value,
-      computedProps.values,
-      0,
-      "description"
-    ) });
   if (computedProps.value === null || Array.isArray(computedProps.value) && !computedProps.value.length)
     return /* @__PURE__ */ jsx(Blank, {});
   switch (computedProps.item.type) {
@@ -559,18 +550,18 @@ function FormItem(props) {
   if (!computedProps) return null;
   if (hidden)
     return /* @__PURE__ */ jsx(Form$1.Item, { ...computedProps, noStyle: true, rules: [], children: /* @__PURE__ */ jsx(Input, { type: "hidden", hidden: true }) });
+  if (computedProps.formChildren === null || computedProps.children === null || computedProps.formRender === null || computedProps.render === null)
+    return null;
+  const children = computedProps.formChildren || computedProps.children;
+  if (children)
+    return /* @__PURE__ */ jsx(Form$1.Item, { ...computedProps, children: cloneUnionFaasItemElement(children, { scene: "form" }) });
+  const render = computedProps.formRender || computedProps.render;
+  if (render)
+    return /* @__PURE__ */ jsx(Form$1.Item, { ...computedProps, children: render(null, null, 0, "form") });
   if (extendTypes?.[computedProps.type])
-    return /* @__PURE__ */ jsx(Form$1.Item, { ...computedProps, children: extendTypes[computedProps.type].children });
-  if (computedProps.formChildren === null) return null;
-  if (computedProps.formChildren)
-    return /* @__PURE__ */ jsx(Form$1.Item, { ...computedProps, children: cloneElement(computedProps.formChildren, { scene: "form" }) });
-  if (computedProps.children === null) return null;
-  if (computedProps.children)
-    return /* @__PURE__ */ jsx(Form$1.Item, { ...computedProps, children: cloneElement(computedProps.children, { scene: "form" }) });
-  if (computedProps.formRender)
-    return /* @__PURE__ */ jsx(Form$1.Item, { ...computedProps, children: computedProps.formRender(null, null, 0, "form") });
-  if (computedProps.render)
-    return /* @__PURE__ */ jsx(Form$1.Item, { ...computedProps, children: computedProps.render(null, null, 0, "form") });
+    return /* @__PURE__ */ jsx(Form$1.Item, { ...computedProps, children: cloneUnionFaasItemElement(extendTypes[computedProps.type].children, {
+      scene: "form"
+    }) });
   switch (computedProps.type) {
     case "string":
       if (isOptionsProps(computedProps))
@@ -1047,29 +1038,39 @@ function Table(props) {
         });
         generateFilterDropdown(item);
       }
-      if (item.tableChildren === null) item.render = () => null;
-      else if (item.tableChildren)
-        item.render = (value, values) => cloneElement(item.tableChildren, {
-          scene: "table",
-          value,
-          values
-        });
-      else if (item.children === null) item.render = () => null;
-      else if (item.children)
-        item.render = (value, values) => cloneElement(item.children, {
+      const isNull = item.tableChildren === null || item.children === null || item.tableRender === null || item.render === null;
+      if (isNull) {
+        item.render = () => null;
+        continue;
+      }
+      const children = item.tableChildren || item.children;
+      if (children) {
+        item.render = (value, values) => cloneUnionFaasItemElement(children, {
           scene: "table",
           value,
-          values
+          values,
+          index: 0
         });
+        delete item.children;
+        delete item.tableChildren;
+        continue;
+      }
+      const render = item.tableRender || item.render;
+      if (render) {
+        item.render = (value, values) => render(value, values, 0, "table");
+        delete item.tableRender;
+        continue;
+      }
       if (props.extendTypes?.[item.type]) {
-        if (props.extendTypes[item.type].children)
-          item.render = (value, values) => cloneElement(props.extendTypes[item.type].children, {
+        if (props.extendTypes[item.type].children) {
+          item.render = (value, values) => cloneUnionFaasItemElement(props.extendTypes[item.type].children, {
             scene: "table",
             value,
-            values
+            values,
+            index: 0
           });
-        else if (props.extendTypes[item.type].render)
-          item.render = props.extendTypes[item.type].render;
+        } else if (props.extendTypes[item.type].render)
+          item.render = (value, values) => props.extendTypes[item.type].render(value, values, 0, "table");
         else throw Error(`${item.type} requires children or render`);
         continue;
       }
@@ -1557,4 +1558,4 @@ function Title(props) {
 }
 Title.whyDidYouRender = true;
 
-export { App, Blank, ConfigContext, ConfigProvider, Description, Drawer, ErrorBoundary, FaasDataWrapper, Form, FormItem, Link, Loading, Modal, PageNotFound, Routes, Table, Tabs, Title, transferOptions, transferValue, upperFirst, useApp, useConfigContext, useDrawer, useModal, withFaasData };
+export { App, Blank, ConfigContext, ConfigProvider, Description, Drawer, ErrorBoundary, FaasDataWrapper, Form, FormItem, Link, Loading, Modal, PageNotFound, Routes, Table, Tabs, Title, cloneUnionFaasItemElement, transferOptions, transferValue, upperFirst, useApp, useConfigContext, useDrawer, useModal, withFaasData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "6.4.0",
+  "version": "6.4.2",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -30,7 +30,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "@faasjs/react": "6.4.0",
+    "@faasjs/react": "6.4.2",
     "antd": "*",
     "@ant-design/icons": "*",
     "lodash-es": "*",
@@ -40,7 +40,7 @@
   },
   "devDependencies": {
     "@types/lodash-es": "*",
-    "@faasjs/react": "6.4.0",
+    "@faasjs/react": "6.4.2",
     "antd": "*",
     "@ant-design/icons": "*",
     "lodash-es": "*",