@faasjs/ant-design 8.0.0-beta.20 → 8.0.0-beta.22

package/dist/index.d.ts

@@ -20,22 +20,6 @@ import { NotificationInstance } from "antd/es/notification/interface.js";
 //#region ../types/src/index.d.ts
 /**
  * Interface for defining FaasJS actions.
- *
- * @example
- * ```typescript
- * declare module '@faasjs/types' {
- *   interface FaasActions {
- *     demo: {
- *       Params: {
- *         key: string
- *       }
- *       Data: {
- *         value: string
- *       }
- *     }
- *   }
- * }
- * ```
  */
 interface FaasActions {
   /**
@@ -51,7 +35,7 @@ interface FaasActions {
  */
 type FaasActionPaths = Exclude<Extract<keyof FaasActions, string>, 'faasjsActionsPlaceholder'>;
 /**
- * Union type accepted by action helpers.
+ * Union type accepted by action helpers when callers pass either an action path or inferred data shape.
  */
 type FaasActionUnionType = Record<string, any> | string;
 /**
@@ -61,12 +45,6 @@ type FaasActionUnionType = Record<string, any> | string;
  * otherwise falls back to `string`.
  *
  * @template T - Candidate action path type.
- *
- * @example
- * ```typescript
- * type A = FaasAction<'demo'> // 'demo'
- * type B = FaasAction<number> // string
- * ```
  */
 type FaasAction<T = any> = T extends FaasActionPaths ? T : string;
 //#endregion
@@ -328,7 +306,34 @@ interface ConfigProviderProps {
   };
 }
 /**
- * React context storing the resolved FaasJS Ant Design theme.
+ * Low-level React context that stores the resolved theme from {@link ConfigProvider}.
+ *
+ * Most app code should call {@link useConfigContext} instead of reading this context directly.
+ *
+ * @example
+ * ```tsx
+ * import { ConfigContext, ConfigProvider } from '@faasjs/ant-design'
+ * import { useContext } from 'react'
+ *
+ * function OrdersHeader() {
+ *   const { theme } = useContext(ConfigContext)
+ *
+ *   return <h1>{`Orders - ${theme.Title.suffix}`}</h1>
+ * }
+ *
+ * export function OrdersPage() {
+ *   return (
+ *     <ConfigProvider
+ *       theme={{
+ *         common: { blank: 'No orders yet' },
+ *         Title: { suffix: 'Acme Admin' },
+ *       }}
+ *     >
+ *       <OrdersHeader />
+ *     </ConfigProvider>
+ *   )
+ * }
+ * ```
  */
 declare const ConfigContext: _$react.Context<ConfigContextValue>;
 /**
@@ -343,10 +348,19 @@ declare const ConfigContext: _$react.Context<ConfigContextValue>;
  * ```tsx
  * import { Blank, ConfigProvider } from '@faasjs/ant-design'
  *
- * export function Page() {
+ * function OrdersEmptyState() {
+ *   return <Blank />
+ * }
+ *
+ * export function OrdersPage() {
  *   return (
- *     <ConfigProvider theme={{ common: { blank: 'Empty' } }}>
- *       <Blank />
+ *     <ConfigProvider
+ *       theme={{
+ *         common: { blank: 'No orders yet' },
+ *         Title: { suffix: 'Acme Admin' },
+ *       }}
+ *     >
+ *       <OrdersEmptyState />
  *     </ConfigProvider>
  *   )
  * }
@@ -360,18 +374,28 @@ declare function ConfigProvider(props: ConfigProviderProps): _$react_jsx_runtime
  *
  * @example
  * ```tsx
- * import { Blank, ConfigProvider, useConfigContext } from '@faasjs/ant-design'
+ * import { ConfigProvider, useConfigContext } from '@faasjs/ant-design'
  *
- * function EmptyState() {
+ * function OrdersSummary() {
  *   const { theme } = useConfigContext()
  *
- *   return <span>{theme.common.blank}</span>
+ *   return (
+ *     <>
+ *       <h1>{`Orders - ${theme.Title.suffix}`}</h1>
+ *       <p>{theme.common.blank}</p>
+ *     </>
+ *   )
  * }
  *
- * export function Page() {
+ * export function OrdersPage() {
  *   return (
- *     <ConfigProvider theme={{ common: { blank: 'N/A' } }}>
- *       <EmptyState />
+ *     <ConfigProvider
+ *       theme={{
+ *         common: { blank: 'No orders yet' },
+ *         Title: { suffix: 'Acme Admin' },
+ *       }}
+ *     >
+ *       <OrdersSummary />
  *     </ConfigProvider>
  *   )
  * }
@@ -416,7 +440,7 @@ interface AppProps {
   /**
    * Props forwarded to Ant Design's `ConfigProvider`.
    *
-   * @see https://ant.design/components/config-provider/#API
+   * @see [Ant Design ConfigProvider API](https://ant.design/components/config-provider/#API)
    */
   configProviderProps?: ConfigProviderProps$1;
   /**
@@ -424,19 +448,19 @@ interface AppProps {
    *
    * Routing is enabled automatically when running in a browser and this prop is not `false`.
    *
-   * @see https://api.reactrouter.com/v7/interfaces/react_router.BrowserRouterProps.html
+   * @see [React Router BrowserRouterProps](https://api.reactrouter.com/v7/interfaces/react_router.BrowserRouterProps.html)
    */
   browserRouterProps?: BrowserRouterProps | false;
   /**
    * Props forwarded to {@link ErrorBoundary}.
    *
-   * @see https://faasjs.com/doc/ant-design/#errorboundary
+   * @see [FaasJS Ant Design ErrorBoundary docs](https://faasjs.com/doc/ant-design/#errorboundary)
    */
   errorBoundaryProps?: Omit<ErrorBoundaryProps, 'children'>;
   /**
    * Props forwarded to {@link ConfigProvider}, or `false` to skip the FaasJS config layer.
    *
-   * @see https://faasjs.com/doc/ant-design/#configprovider
+   * @see [FaasJS Ant Design ConfigProvider docs](https://faasjs.com/doc/ant-design/#configprovider)
    */
   faasConfigProviderProps?: Omit<ConfigProviderProps, 'children'> | false;
 }
@@ -569,38 +593,6 @@ interface FormItemProps<T = any> extends BaseItemProps, Omit<FormItemProps$1<T>,
 }
 /**
  * Item shape used to extend `Form` with custom type names.
- *
- * @example
- * ```tsx
- * import { Form, type ExtendFormItemProps, type FormProps } from '@faasjs/ant-design'
- * import { Input } from 'antd'
- *
- * interface ExtendTypes extends ExtendFormItemProps {
- *   type: 'password'
- * }
- *
- * function ExtendForm(props: FormProps<any, ExtendTypes>) {
- *   return (
- *     <Form
- *       {...props}
- *       extendTypes={{ password: { children: <Input.Password /> } }}
- *     />
- *   )
- * }
- *
- * export function Page() {
- *   return (
- *     <ExtendForm
- *       items={[
- *         {
- *           id: 'password',
- *           type: 'password',
- *         },
- *       ]}
- *     />
- *   )
- * }
- * ```
  */
 interface ExtendFormItemProps extends Omit<FormItemProps, 'type'> {
   type?: string;
@@ -892,38 +884,6 @@ type UnionFaasItemInjection<Value = any, Values = any> = {
  * @param {Values} values - Whole record or row containing the value.
  * @param {number} index - Current row or list index.
  * @param {UnionScene} scene - Rendering surface requesting the output.
- *
- * @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;
 /**
@@ -931,40 +891,6 @@ type UnionFaasItemRender<Value = any, Values = any> = (value: Value, values: Val
  *
  * @template Value - Current item value type.
  * @template Values - Whole record or row type that contains the value.
- *
- * @example
- * ```tsx
- * import { type UnionFaasItemElement, Form, Description, Table } from '@faasjs/ant-design'
- *
- * const NameComponent: UnionFaasItemElement = ({ scene, value }) => {
- *   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 />` are valid
- *   }
- * ]
- *
- * function App() {
- *   return (
- *     <>
- *       <Form items={items} />
- *       <Description items={items} dataSource={{ name: 'John' }} />
- *       <Table items={items} dataSource={[{ name: 'John' }]} />
- *     </>
- *   )
- * }
- * ```
  */
 type UnionFaasItemElement<Value = any, Values = any> = ReactElement<UnionFaasItemInjection<Value, Values>> | FC<UnionFaasItemInjection<Value, Values>>;
 /**
@@ -980,41 +906,6 @@ type UnionFaasItemElement<Value = any, Values = any> = ReactElement<UnionFaasIte
  *
  * @template Value - Current item value type.
  * @template Values - Whole record or row type that contains the value.
- *
- * @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 {
   /** Shared custom element rendered when no surface-specific child overrides it. */
@@ -1215,20 +1106,6 @@ type FormSubmitProps = {
  * Built-in FaasJS submit handler configuration for {@link Form}.
  *
  * @template Values - Form values shape used by submit handlers.
- *
- * @example
- * ```ts
- * const faas = {
- *   action: 'user/create',
- *   params: (values) => ({
- *     ...values,
- *     role: values.role || 'user',
- *   }),
- *   onSuccess: (result) => {
- *     console.log(result)
- *   },
- * }
- * ```
  */
 type FormFaasProps<Values extends Record<string, any> = any> = {
   /** Action name submitted through `faas()`. */action: FaasAction; /** Extra params merged into the submitted payload after `transformValues` runs. */
@@ -1599,12 +1476,18 @@ interface useAppProps {
 }
 /**
  * Shared context storing message, notification, modal, and drawer helpers.
+ *
+ * @example
+ * ```ts
+ * const { message } = AppContext.use()
+ * ```
  */
 declare const AppContext: any;
 /**
  * Read app-level services exposed by the root `App` component.
  *
  * @template NewT - Narrowed app context shape to read from `AppContext`.
+ * @param {void} this - Explicit void receiver that keeps the hook unbound.
  * @returns Read-only app context value.
  *
  * @example

package/dist/index.mjs

@@ -199,7 +199,34 @@ const baseTheme = {
 	Link: { style: {} }
 };
 /**
-* React context storing the resolved FaasJS Ant Design theme.
+* Low-level React context that stores the resolved theme from {@link ConfigProvider}.
+*
+* Most app code should call {@link useConfigContext} instead of reading this context directly.
+*
+* @example
+* ```tsx
+* import { ConfigContext, ConfigProvider } from '@faasjs/ant-design'
+* import { useContext } from 'react'
+*
+* function OrdersHeader() {
+*   const { theme } = useContext(ConfigContext)
+*
+*   return <h1>{`Orders - ${theme.Title.suffix}`}</h1>
+* }
+*
+* export function OrdersPage() {
+*   return (
+*     <ConfigProvider
+*       theme={{
+*         common: { blank: 'No orders yet' },
+*         Title: { suffix: 'Acme Admin' },
+*       }}
+*     >
+*       <OrdersHeader />
+*     </ConfigProvider>
+*   )
+* }
+* ```
 */
 const ConfigContext = createContext({ theme: baseTheme });
 /**
@@ -214,10 +241,19 @@ const ConfigContext = createContext({ theme: baseTheme });
 * ```tsx
 * import { Blank, ConfigProvider } from '@faasjs/ant-design'
 *
-* export function Page() {
+* function OrdersEmptyState() {
+*   return <Blank />
+* }
+*
+* export function OrdersPage() {
 *   return (
-*     <ConfigProvider theme={{ common: { blank: 'Empty' } }}>
-*       <Blank />
+*     <ConfigProvider
+*       theme={{
+*         common: { blank: 'No orders yet' },
+*         Title: { suffix: 'Acme Admin' },
+*       }}
+*     >
+*       <OrdersEmptyState />
 *     </ConfigProvider>
 *   )
 * }
@@ -248,18 +284,28 @@ function ConfigProvider(props) {
 *
 * @example
 * ```tsx
-* import { Blank, ConfigProvider, useConfigContext } from '@faasjs/ant-design'
+* import { ConfigProvider, useConfigContext } from '@faasjs/ant-design'
 *
-* function EmptyState() {
+* function OrdersSummary() {
 *   const { theme } = useConfigContext()
 *
-*   return <span>{theme.common.blank}</span>
+*   return (
+*     <>
+*       <h1>{`Orders - ${theme.Title.suffix}`}</h1>
+*       <p>{theme.common.blank}</p>
+*     </>
+*   )
 * }
 *
-* export function Page() {
+* export function OrdersPage() {
 *   return (
-*     <ConfigProvider theme={{ common: { blank: 'N/A' } }}>
-*       <EmptyState />
+*     <ConfigProvider
+*       theme={{
+*         common: { blank: 'No orders yet' },
+*         Title: { suffix: 'Acme Admin' },
+*       }}
+*     >
+*       <OrdersSummary />
 *     </ConfigProvider>
 *   )
 * }
@@ -422,6 +468,11 @@ function useModal(init) {
 //#region src/useApp.ts
 /**
 * Shared context storing message, notification, modal, and drawer helpers.
+*
+* @example
+* ```ts
+* const { message } = AppContext.use()
+* ```
 */
 const AppContext = createSplittingContext([
 	"message",
@@ -435,6 +486,7 @@ const AppContext = createSplittingContext([
 * Read app-level services exposed by the root `App` component.
 *
 * @template NewT - Narrowed app context shape to read from `AppContext`.
+* @param {void} this - Explicit void receiver that keeps the hook unbound.
 * @returns Read-only app context value.
 *
 * @example
@@ -1855,34 +1907,22 @@ function FaasDataTable({ props, columns, data, params, reload, loading }) {
 		if (!data || Array.isArray(data)) return;
 		setCurrentColumns((prev) => {
 			const newColumns = [...prev];
-			for (const column of newColumns) {
-				if (data.options?.[column.id]) {
-					column.options = transferOptions(data.options[column.id]);
-					column.filters = column.options.map((v) => ({
-						text: v.label,
-						value: v.value
-					})).concat({
-						text: /* @__PURE__ */ jsx(Blank, {}),
-						value: null
-					});
-					column.render = (value) => processValue(column, value);
-					if (column.filterDropdown) delete column.filterDropdown;
-					continue;
-				}
-				if (column.optionsType === "auto" && !column.options && !column.filters) {
-					const filters = uniqBy(props.dataSource, column.id).map((v) => ({
-						text: v[column.id],
-						value: v[column.id]
-					}));
-					if (filters.length) column.filters = filters.concat({
-						text: /* @__PURE__ */ jsx(Blank, {}),
-						value: null
-					});
-				}
+			for (const column of newColumns) if (data.options?.[column.id]) {
+				column.options = transferOptions(data.options[column.id]);
+				column.filters = column.options.map((v) => ({
+					text: v.label,
+					value: v.value
+				})).concat({
+					text: /* @__PURE__ */ jsx(Blank, {}),
+					value: null
+				});
+				column.render = (value) => processValue(column, value);
+				if (column.filterDropdown) delete column.filterDropdown;
+				continue;
 			}
 			return newColumns;
 		});
-	}, [data, props.dataSource]);
+	}, [data]);
 	if (!data) return /* @__PURE__ */ jsx(Table$1, {
 		...props,
 		...typeof loading === "undefined" ? {} : { loading },

package/package.json

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