@wix/patterns 1.447.0 → 1.448.0

package/dist/docs/CustomFieldType.md

@@ -6,7 +6,7 @@
 
 ### Description
 
-A **custom field type** is a consumer-defined field that plugs into every schema-driven surface. Define it once with `defineFieldType()` and register it on the schema source via `fieldTypes` — the page wires nothing per surface. Each surface resolves its own slot from the definition:
+A **custom field type** is a consumer-defined field that plugs into every schema-driven surface. Define it once with `defineFieldType<V>()` and register it on the schema source via `fieldTypes` — the page wires nothing per surface. Each surface resolves its own slot from the definition:
 
 - `table` — the read-only table cell and column layout.
 - `editableTable` — the editable cell: view, inline editor, and clipboard behavior.
@@ -769,7 +769,7 @@ function CustomFieldTypeEntityPage() {
 
 ### Overview
 
-Full configuration of each slot on `FieldTypeDefinition` (`V` is the field's value type — `defineFieldType` infers it and keeps all slots consistent).
+Full configuration of each slot on `FieldTypeDefinition<V>` (`V` is the field's value type — `defineFieldType` infers it and keeps all slots consistent).
 
 #### `type: string`
 
@@ -784,7 +784,7 @@ Unique key for the type (e.g. `'myvertical.rating'`). Fields reference it via `c
 
 Provide a config, or opt out explicitly with `{ filterable: false }` — never silently absent.
 
-- `createFilter(field): Filter` — the filter state registered on the collection query (e.g. `idNameArrayFilter()`).
+- `createFilter(field): Filter<any>` — the filter state registered on the collection query (e.g. `idNameArrayFilter<T>()`).
 - `Component` — the toolbar element; receives `FilterProps` (`filter`, plus `toolbarItemProps` / `toolbarTagProps` / `accordionItemProps` labels). Typically wraps a built-in filter element like `MultiInlineCheckboxFilter`.
 
 The backend owns the translation: `find({ filters })` receives the raw filter value exactly as the filter state produced it.
@@ -807,8 +807,8 @@ The backend owns the translation: `find({ filters })` receives the raw filter va
 
 #### `editableTable` — the editable cell: view, inline editor, clipboard
 
-- `ViewComponent(props: CellViewProps)` — view mode. Props: `value`, `typeConfig`, `validation`, `columnId`, `rowKey`.
-- `EditComponent?(props: CellEditProps)` — edit mode; omit for view-only cells. Props: `value`, `onChange(value)` (call on **every** change — Tab-commit reads the editing value synchronously before blur), `onCommit()`, `onCancel()` (wire Escape to it), `onStartEdit?()` (call before opening external UI like a modal so the table keeps cell focus), `inputRef` (expose `{ focus }` via `useImperativeHandle` for type-to-edit), `editTrigger`, `validation`, `typeConfig`, `columnId`, `rowKey`.
+- `ViewComponent(props: CellViewProps<V>)` — view mode. Props: `value`, `typeConfig`, `validation`, `columnId`, `rowKey`.
+- `EditComponent?(props: CellEditProps<V>)` — edit mode; omit for view-only cells. Props: `value`, `onChange(value)` (call on **every** change — Tab-commit reads the editing value synchronously before blur), `onCommit()`, `onCancel()` (wire Escape to it), `onStartEdit?()` (call before opening external UI like a modal so the table keeps cell focus), `inputRef` (expose `{ focus }` via `useImperativeHandle` for type-to-edit), `editTrigger`, `validation`, `typeConfig`, `columnId`, `rowKey`.
 - `serialize?(value: V): string` / `deserialize?(raw: string): V` — clipboard copy/paste. Serialized values must be single-line (TSV).
 - `editable?: boolean` — default `true`.
 - `clearable?: boolean` — can the Delete key clear the cell; default `true`.
@@ -819,23 +819,23 @@ The backend owns the translation: `find({ filters })` receives the raw filter va
 - `onTypeToEdit?({ key, validation })` — handle type-to-edit: return `{ value }` to seed and enter edit, `{}` to enter edit unchanged, `undefined` to block the key. Without it, typing on a focused cell does nothing.
 - `nativeTypeToEdit?: boolean` — flush edit mode synchronously on keydown and let the browser deliver the keystroke to the focused input (for controlled inputs that can't be seeded via props).
 - `normalizeOnCommit?(value: V): V` — normalize just before the edit commits (e.g. clamp a number, prepend `https://`).
-- `EditWrapper?: ComponentType` — optional wrapper kept mounted across the edit↔view transition, for behavior that must outlive the inline editor.
+- `EditWrapper?: ComponentType<CellEditWrapperProps>` — optional wrapper kept mounted across the edit↔view transition, for behavior that must outlive the inline editor.
 
 #### `actions` — extra items on the field's "more actions" menus
 
 Items appear on every field-actions menu (editable table column header, manage-fields panel, customize-columns panel) — only for fields of this type.
 
-- `items?: Array` — `disabledTooltip` returning a string disables the item and shows the tooltip.
+- `items?: Array<{ key, label, icon?, skin? ('destructive'), onClick(field), visible?(field), disabledTooltip?(field) }>` — `disabledTooltip` returning a string disables the item and shows the tooltip.
 
 #### `form` — the entity-page form input
 
 Required once a field of this type renders on an entity page — development throws a clear error without it; production skips the field.
 
-- `Component` — receives `FormFieldComponentProps` (`field`, `value`, `onChange(value)`, `onBlur`, `dataHook?`) and renders only the input. The entity page owns the form wiring and the field UI: it registers the field on the form (seeding the value from the entity, falling back to `value.defaultValue`), runs `value.validate` on it, and wraps the component in a WDS `FormField` with the label, required marker, and error message.
+- `Component` — receives `FormFieldComponentProps<V>` (`field`, `value`, `onChange(value)`, `onBlur`, `dataHook?`) and renders only the input. The entity page owns the form wiring and the field UI: it registers the field on the form (seeding the value from the entity, falling back to `value.defaultValue`), runs `value.validate` on it, and wraps the component in a WDS `FormField` with the label, required marker, and error message.
 
 #### `fieldModal` — the add/edit-field modal (opt-in)
 
-Absent ⇒ the modal never offers this type. With it, the type shows in the add-field type picker (using `display.label` and `display.icons`), and a created field arrives at the source's `FieldActions.addField` as `{ type: 'CUSTOM', customType:  }`. Requires the source to support field creation (`schemaPermissions.createField` + `fieldActions.addField`).
+Absent ⇒ the modal never offers this type. With it, the type shows in the add-field type picker (using `display.label` and `display.icons`), and a created field arrives at the source's `FieldActions.addField` as `{ type: 'CUSTOM', customType: <definition key> }`. Requires the source to support field creation (`schemaPermissions.createField` + `fieldActions.addField`).
 
 - `creatable: boolean` — true ⇒ offered in the picker.
 - `namePlaceholder?: string` — placeholder for the name input; absent ⇒ the modal's generic placeholder.

package/dist/docs/CustomFieldsViewWidget.md

@@ -28,16 +28,16 @@ The `CustomFieldsViewWidget` component enhances the entity page by displaying bo
 
   function MyPageContent({ entity }: { entity: MyEntity }) {
     return (
-        
-          
-            
-              
-            
-+           
-+             
-+           
-          
-        
+        <Page.Content>
+          <Layout>
+            <Cell span={8}>
+              <MyEntityCard entity={entity}>
+            </Cell>
++           <Cell span={4}>
++             <CustomFieldsViewWidget extendedFields={entity.extendedFields} fqdn="wix.patterns.dummyservice.v1.dummy_entity" />
++           </Cell>
+          </Layout>
+        </Page.Content>
     );
   }
 ```

package/dist/docs/CustomFieldsWidget.md

@@ -23,9 +23,9 @@ The `CustomFieldsWidget` component enhances the entity page by displaying user-d
 export const MyPageProvider = ({ children }) => {
 
   return (
-+   
-      
-+   
++   <WidgetsFormProvider>
+      <MyPage />
++   </WidgetsFormProvider>
   );
 };
 ```
@@ -40,19 +40,22 @@ export const MyPageProvider = ({ children }) => {
 
   function MyPage({ entity }: { entity: MyEntity }) {
     return (
-      
-        
-        
-          
-            
-              
-            
-+           
-+             
-+           
-          
-        
-      
+      <Page>
+        <Page.Header title="My Entity" />
+        <Page.Content>
+          <Layout>
+            <Cell>
+              <MyEntityCard entity={entity}>
+            </Cell>
++           <Cell>
++             <CustomFieldsWidget
++                fqdn="wix.patterns.dummyservice.v1.dummy_entity"
++                extendedFields={entity.extendedFields}
++             />
++           </Cell>
+          </Layout>
+        </Page.Content>
+      </Page>
     );
   }
 ```
@@ -70,7 +73,9 @@ export const MyPageProvider = ({ children }) => {
 +   const state = useWidgetsFormContext();
 
     return (
-       {
+      <Button
+        disabled={isLoading}
+        onClick={async () => {
           setLoading(true);
 +         const { isValid, data } = await state.validate();
 +         if (isValid) {
@@ -85,8 +90,8 @@ export const MyPageProvider = ({ children }) => {
 +         }
         }}
       >
-        {isLoading ?  : 'Save'}
-      
+        {isLoading ? <Loader size="tiny" /> : 'Save'}
+      </Button>
     );
   }
 ```
@@ -529,11 +534,11 @@ To gain more control over the app structure, the app needs to be wrapped manuall
 // app.tsx
 export const MyApp = () => {
   return (
-    
-      
-        
-      
-    
+    <WixPatternsBMProvider>
+      <MyPageProvider>
+        <MyEntityPage />
+      </MyPageProvider>
+    </WixPatternsBMProvider>
   );
 };
 
@@ -541,11 +546,11 @@ export const MyApp = () => {
 export const MyPageProvider = ({ children }) => {
 
   return (
-    
-+     
+    <MyProvider value={{}}>
++     <WidgetsFormProvider>
         {children}
-+     
-    
++     </WidgetsFormProvider>
+    </MyProvider>
   );
 };
 
@@ -556,8 +561,11 @@ export const MyEntityPage = ({ dummyEntity }: { dummyEntity: DummyEntity }) => {
 + const state = useWidgetsFormContext();
 
   return (
-    
-       {
+    <Page>
+      <Page.Header
+        actionsBar={
+          <Button
+            onClick={async () => {
               const { isValid, data } = await state.validate();
 
               if (isValid) {
@@ -577,14 +585,17 @@ export const MyEntityPage = ({ dummyEntity }: { dummyEntity: DummyEntity }) => {
             }}
           >
             Save
-          
+          </Button>
         }
       >
     />
-      
-+       
-      
-    
+      <Page.Content>
++       <CustomFieldsWidget
++          fqdn="wix.patterns.dummyservice.v1.dummy_entity"
++          extendedFields={entity.extendedFields}
++       />
+      </Page.Content>
+    </Page>
   );
 };
 ```

package/dist/docs/Display Extended Fields.md

@@ -32,8 +32,8 @@ To enable the Data Extension feature:
 1. Specify the `FQDN` of your extendable entity in the `useTableCollection` hook.
 
     ```diff
-    const state = useTableCollection({
-    +   fqdn: '',
+    const state = useTableCollection<DemoEntity>({
+    +   fqdn: '<YOUR_FQDN>',
         // ...
     });
     ```
@@ -41,7 +41,11 @@ To enable the Data Extension feature:
 1. Pass a `DataExtension` component to the `dataExtension` prop on the table.
 
     ```diff
-    
+    <Table
+      state={state}
+    + dataExtension={DataExtension}
+      /* ... */
+    />
     ```
 
 This step simply enabled the Data Extension features in your table. After the next step, you'll be able to add, show, reorder, and hide extended fields.
@@ -53,8 +57,10 @@ To add, show, reorder, and hide extended fields:
 1. Add the [Custom Columns feature](./?path=/story/features-display-custom-columns--customcolumns).
 
     ```diff
-    }
-    +   customColumns={}
+    <Table
+        state={state}
+        dataExtension={<DataExtension />}
+    +   customColumns={<CustomColumns />}
     />
     ```
 
@@ -75,16 +81,16 @@ To add an extra view of extended fields in the entity page:
     
       function MyPageContent({ entity }: { entity: MyEntity }) {
         return (
-            
-              
-                
-                  
-                
-    +           
-    +             " />
-    +           
-              
-            
+            <Page.Content>
+              <Layout>
+                <Cell span={8}>
+                  <MyEntityCard entity={entity}>
+                </Cell>
+    +           <Cell span={4}>
+    +             <CustomFieldsViewWidget extendedFields={entity.extendedFields} fqdn="<YOUR_FQDN>" />
+    +           </Cell>
+              </Layout>
+            </Page.Content>
         );
       }
     ```

package/dist/docs/Enable Filters for Extended Fields.md

@@ -103,7 +103,7 @@ In your table component:
 1. Use the helper functions in your `fetchData` function. For example:
 
     ```diff
-    const state = useTableCollection({
+    const state = useTableCollection<DemoEntity>({
         fqdn: 'wix.cairo.dummyservice.v1.dummy_entity',
         toExtendedFields: (item) => item.extendedFields,
         fetchData: async ({ search = '', filters, sort }) => {
@@ -125,7 +125,9 @@ In your table component:
 1. Mark the data extension component `filterable`.
 
     ```diff
-    }
+    <Table
+        state={state}
+    +   dataExtension={<DataExtension filterable />}
         // ..
     />
     ```

package/dist/docs/EntityPage.AdditionalContent.md

@@ -6,7 +6,7 @@
 
 ### Overview
 
-A slot component for the side panel of an [`EntityPage`](./?path=/story/base-components-pages-entity-page--entitypage). Place it inside `` alongside ``. Supports an optional `sticky` prop to keep the content fixed while scrolling.
+A slot component for the side panel of an [`EntityPage`](./?path=/story/base-components-pages-entity-page--entitypage). Place it inside `<EntityPage.Content>` alongside `<EntityPage.MainContent>`. Supports an optional `sticky` prop to keep the content fixed while scrolling.
 
 ```tsx
 import { EntityPage } from '@wix/patterns/page';

package/dist/docs/EntityPage.Card.md

@@ -217,18 +217,18 @@ import { EntityPage } from '@wix/patterns/page';
 ### Composition
 
 ```tsx
-
-  
-  
-    
-        {/* ← this component */}
-        
+<EntityPage state={state}>
+  <EntityPage.Header title={{ text: "Edit Item" }} />
+  <EntityPage.Content>
+    <EntityPage.MainContent>
+      <EntityPage.Card>  {/* ← this component */}
+        <EntityPage.Card.Content>
           {/* form fields */}
-        
-      
-    
-  
-
+        </EntityPage.Card.Content>
+      </EntityPage.Card>
+    </EntityPage.MainContent>
+  </EntityPage.Content>
+</EntityPage>
 ```
 
 ### Props

package/dist/docs/EntityPage.Content.md

@@ -6,7 +6,7 @@
 
 ### Overview
 
-A layout slot for the body of an [`EntityPage`](./?path=/story/base-components-pages-entity-page--entitypage). Wraps `` and optionally `` to create the two-column layout.
+A layout slot for the body of an [`EntityPage`](./?path=/story/base-components-pages-entity-page--entitypage). Wraps `<EntityPage.MainContent>` and optionally `<EntityPage.AdditionalContent>` to create the two-column layout.
 
 ```tsx
 import { EntityPage } from '@wix/patterns/page';

package/dist/docs/EntityPage.Header.md

@@ -232,7 +232,7 @@ function Badges() {
 
 ### Overview
 
-The header component for an [`EntityPage`](./?path=/story/base-components-pages-entity-page--entitypage). Renders the page title, optional subtitle, breadcrumbs, badges, and a more-actions menu. Place it as a direct child of ``.
+The header component for an [`EntityPage`](./?path=/story/base-components-pages-entity-page--entitypage). Renders the page title, optional subtitle, breadcrumbs, badges, and a more-actions menu. Place it as a direct child of `<EntityPage>`.
 
 ```tsx
 import { EntityPage } from '@wix/patterns/page';
@@ -241,12 +241,15 @@ import { EntityPage } from '@wix/patterns/page';
 ### Composition
 
 ```tsx
-
-  }
-    moreActions={}
+<EntityPage state={state}>
+  <EntityPage.Header  {/* ← this component */}
+    title={{ text: "Edit Item", badges: [{ text: "Draft", skin: "warning" }] }}
+    subtitle="Item details"
+    breadcrumbs={<Breadcrumbs items={[...]} />}
+    moreActions={<MoreActions items={[...]} />}
   />
-  ...
-
+  <EntityPage.Content>...</EntityPage.Content>
+</EntityPage>
 ```
 
 ### Props

package/dist/docs/EntityPage.MainContent.md

@@ -6,7 +6,7 @@
 
 ### Overview
 
-A slot component for the main content area of an [`EntityPage`](./?path=/story/base-components-pages-entity-page--entitypage). Place it inside ``. This is where you render the primary form fields and cards.
+A slot component for the main content area of an [`EntityPage`](./?path=/story/base-components-pages-entity-page--entitypage). Place it inside `<EntityPage.Content>`. This is where you render the primary form fields and cards.
 
 ```tsx
 import { EntityPage } from '@wix/patterns/page';

package/dist/docs/EntityPageState.md

@@ -14,7 +14,7 @@
 - **Dirty-form protection** — warns on `beforeunload` when the form has unsaved changes
 - **Navigation** — supports both Patterns Router (`parentPath`) and legacy BM navigation (`parentPageId`)
 
-Pass the returned state to `` and use [`useEntity`](./?path=/story/base-components-pages-entity-page-hooks-useentity--useentity) to read the entity reactively.
+Pass the returned state to `<EntityPage state={state}>` and use [`useEntity`](./?path=/story/base-components-pages-entity-page-hooks-useentity--useentity) to read the entity reactively.
 
 ```tsx
 import { useEntityPage } from '@wix/patterns';

package/dist/docs/Explore Apps.md

@@ -21,7 +21,14 @@ pass the explore apps modal props that will be render on user demand and we will
 To pass the necessary properties to the `MoreActions` component, use the following code:
 
 ```jsx
-
+<MoreActions
+  ...
+  exploreAppsModalProps={{
+    title: 'Explore Apps', // The modal title
+    subtitle: 'Find the right app for your business', // The modal sub-title
+    tag: '7d4d7891-2995-4bb9-8d2b-457aa7dca3f2', // The tag you generated
+  }}
+/>
 ```
 
 

package/dist/docs/ExportTo.md

@@ -728,7 +728,7 @@ const exportConfig = useExportConfig({
 
 export default () => {
   return (
-    } />
+    <Table exportButton={<ExportButton {...exportConfig} />} />
   );
 };
 ```
@@ -752,9 +752,9 @@ const exportConfig = useExportConfig({
 export default () => {
   return (
       <>
-         state.table.exportState.open()}>
-        } />
-      
+        <Button onCLick={() => state.table.exportState.open()}></Button>
+        <Table state={state} exportModal={<ExportModal {...exportConfig} />} />
+      </>
   );
 };
 ```
@@ -769,7 +769,7 @@ The `transformPlatformizedQuery` is used for mapping between the `wixPatternsQue
 For example, in case of stores' `Product`:
 
 ```ts
-const exportStateQueryProductsExportSpi = useExport({
+const exportStateQueryProductsExportSpi = useExport<Product, ProductFilters>({
   transformPlatformizedQuery: ({
     platformizedQuery,
     wixPatternsQuery,
@@ -872,7 +872,7 @@ Event   |   Description   |
 
 ### Usage
 
-`getExportButton` API is exposed from the `` [testkit](./?path=/story/components-collection--table&activeTab=Testkit)
+`getExportButton` API is exposed from the `<Table />` [testkit](./?path=/story/components-collection--table&activeTab=Testkit)
 
 ### Export `HttpClient` Mocks
 

package/dist/docs/Filter Overview.md

@@ -101,7 +101,10 @@ const levelsCollection = useStaticListFilterCollection(filter, [
   'Ultimate'
 ]);
 
-
+<MultiSelectCheckboxFilter
+  filter={filter}
+  collection={levelsCollection}
+/>
 ```
 
 ![image](https://user-images.githubusercontent.com/32840800/209715656-7737593c-b98f-4bc8-a9bb-4325f04ee603.png)
@@ -122,7 +125,10 @@ const collection = useFilterCollection(filter, {
   limit: 50
 });
 
- ({
+<MultiSelectCheckboxFilter
+  filter={filter}
+  collection={collection}
+  renderItem={(item) => ({
     title: item.level,
   })}
 />
@@ -134,7 +140,7 @@ One option for filtering a date range is to use the [DateRangeFilter](./?path=/s
 ```js
 const [filter] = React.useState(() => dateRangeFilter());
 
-
+<DateRangeFilter filter={filter} />
 ```
 
 ![image](https://user-images.githubusercontent.com/32840800/209724537-c2330fc5-2abb-4798-aa89-d289f170af4c.png)
@@ -157,7 +163,10 @@ const subscriptionStatusCollection = useStaticListFilterCollection(filter, [
   { id: Subscription.UNSUBSCRIBED, name: t('contact.subscriptionStatus.UNSUBSCRIBED') }
 ]);
 
-
+<SingleSelectFilter
+  filter={filter}
+  collection={subscriptionStatusCollection}
+/>
 ```
 
 ![image](https://user-images.githubusercontent.com/32840800/209724490-e205019d-b990-415c-a61c-3b50aedea5cc.png)
@@ -180,7 +189,10 @@ const subscriptionStatusCollection = useStaticListFilterCollection(filter, [
   { id: Subscription.UNSUBSCRIBED, name: t('contact.subscriptionStatus.UNSUBSCRIBED') }
 ]);
 
- ({title: item.foo, label: item.foo})}
+<SingleSelectFilter
+  filter={filter}
+  collection={subscriptionStatusCollection}
+  renderItem={(item) => ({title: item.foo, label: item.foo})}
 />
 ```
 
@@ -200,13 +212,16 @@ const subscriptionStatusCollection = useStaticListFilterCollection(filter, [
   { id: Subscription.UNSUBSCRIBED, name: t('contact.subscriptionStatus.UNSUBSCRIBED'), isSubscribed: false }
 ]);
 
-
+<SingleSelectFilter
+  filter={filter}
+  collection={subscriptionStatusCollection}
+/>
 ```
 
 While both the `id` and `name` properties exist and `name` will be used as the filter value, we have also included `isSubscribed` property to be passed with the other properties. For example, during the fetchData process, after the user selects the `Subscribed` filter option, the implementation might look like this:
 
 ```js
-const fetchData = (query: OffsetQuery) => {
+const fetchData = (query: OffsetQuery<ContactsFilters>) => {
   const { limit, offset, search, filters } = query;
   console.log(filters.subscription); // [{id: '1', name: 'Subscribed', isSubscribed: true}]
   const isSubscribed = filters.subscription[0]?.isSubscribed
@@ -219,7 +234,7 @@ const fetchData = (query: OffsetQuery) => {
 The search parameter is not technically part of the filters panel, but it can be initialized using [stringFilter](./?path=/story/features-filter-factories--stringfilter). This filter is usually opt-in by default, but if you want to pass an initial value for the search input, you can do so by passing your own filter to it.
 
 ```js
-const collection = useCollection({
+const collection = useCollection<Contact, ContactsFilters>({
   queryName: 'query-contacts',
   search: stringFilter({initialValue: searchFromParams}),
   // ...

package/dist/docs/Grid.md

@@ -104,7 +104,7 @@ function Demo() {
 
 ### Card with a CTA that opens a modal
 
-This example utilizes the `` `renderAddItem` prop and the `` `onClick()` prop to run a function that opens a modal.
+This example utilizes the `<Grid>` `renderAddItem` prop and the `<AddItem>` `onClick()` prop to run a function that opens a modal.
 
 ```tsx
 import React from 'react';
@@ -214,7 +214,7 @@ function AddItemCardWithModal() {
 
 ### Card with a CTA that opens a popup
 
-This example utilizes the `` `renderAddItem` prop and the `` `onClick()` prop to run a function that opens a popup.
+This example utilizes the `<Grid>` `renderAddItem` prop and the `<AddItem>` `onClick()` prop to run a function that opens a popup.
 
 ```tsx
 import React from 'react';
@@ -312,7 +312,7 @@ function AddItemCardWithPopoverMenu() {
 
 ### Grid with a reduced width
 
-This example utilizes the `` `span` prop to set the width of the Grid to 2/3 of the page.
+This example utilizes the `<Cell>` `span` prop to set the width of the Grid to 2/3 of the page.
 
 ```tsx
 import React from 'react';

package/dist/docs/ImportButton.md

@@ -17,18 +17,18 @@ It renders an import action in the collection toolbar. On the default toolbar it
 
 Like `ExportTo`, the feature has two parts:
 
-- **Client** — the button and modal, shipped in `@wix/patterns`. Place it with the `` `importButton` prop; it reads what it needs off the table's source when the modal opens, and an optional `config` object carries only what the source can't supply (see [Choosing a source](#choosing-a-source)).
+- **Client** — the button and modal, shipped in `@wix/patterns`. Place it with the `<Table>` `importButton` prop; it reads what it needs off the table's source when the modal opens, and an optional `config` object carries only what the source can't supply (see [Choosing a source](#choosing-a-source)).
 - **Server** — the actual write is done by a Wix Hub **Data Movement** job (see the [data-hub infrastructure](#data-hub-infrastructure) section). The client uploads the file, submits the job, and polls it to completion.
 
 #### Configuring it
 
-`` reads what it needs off the table's source when the modal opens; the optional `config` (`ImportConfig`) fills in what the source can't supply. Two things vary — **where the rows are written** (a Wix Data collection, or a platformized `destination`) and **where the mappable fields come from** (a declared schema source, or a `fields` list you pass) — giving three setups:
+`<ImportButton>` reads what it needs off the table's source when the modal opens; the optional `config` (`ImportConfig`) fills in what the source can't supply. Two things vary — **where the rows are written** (a Wix Data collection, or a platformized `destination`) and **where the mappable fields come from** (a declared schema source, or a `fields` list you pass) — giving three setups:
 
-- **CMS (Wix Data) — schema-based, no `config`.** `useCmsSchemaSource` → `useTableCollection(source)`; the source supplies the collection, its fields, and create-new-field, and the CMS create/edit-field modal loads on demand. `` takes no props.
+- **CMS (Wix Data) — schema-based, no `config`.** `useCmsSchemaSource` → `useTableCollection(source)`; the source supplies the collection, its fields, and create-new-field, and the CMS create/edit-field modal loads on demand. `<ImportButton />` takes no props.
 
   ```jsx
   // `state` comes from `useTableCollection(source)` (@wix/patterns/schema).
-  } />;
+  <Table state={state} importButton={<ImportButton />} />;
   ```
 
 - **Platformized, from a source — schema-based, `config` names the destination.** A non–Wix-Data entity backed by `usePlatformizedSource`: the source supplies the fields to map onto, and you name the `destination` (a platformized target has no Wix Data collection to derive it from).
@@ -36,14 +36,24 @@ Like `ExportTo`, the feature has two parts:
   ```jsx
   const source = usePlatformizedSource({ fqdn, backend, itemKey, itemName });
   const state = useTableCollection(source);
-  }
+  <Table
+    state={state}
+    importButton={<ImportButton config={{ destination: { storesCatalogProducts: {} } }} />}
   />;
   ```
 
 - **Platformized, fields listed inline — non-schema, `config` names the destination and the fields.** No source; you list the `fields` to map onto (see `ProductsTable` in `example-bm`).
 
   ```jsx
-  
+  <Table
+    state={state}
+    importButton={
+      <ImportButton
+        config={{
+          destination: { storesCatalogProducts: {} },
+          fields: [{ id: 'name', header: 'Name', required: true }],
+        }}
+      />
     }
   />;
   ```
@@ -74,7 +84,7 @@ import { ImportButton } from '@wix/patterns';
 
 ### CMS import
 
-A Wix Data (CMS) collection. `` needs no config — it reads the import inputs live from the table’s schema source, and the CMS create/edit-field modal is loaded on demand.
+A Wix Data (CMS) collection. `<ImportButton />` needs no config — it reads the import inputs live from the table’s schema source, and the CMS create/edit-field modal is loaded on demand.
 
 ```tsx
 import React from 'react';
@@ -328,7 +338,7 @@ export default RequiredFields;
 
 ### Create new field
 
-A CMS capability: when the collection’s schema permits adding fields, unmapped CSV columns default to creating a new field (with an "Edit field" affordance) instead of being skipped. `` wires it from the schema automatically.
+A CMS capability: when the collection’s schema permits adding fields, unmapped CSV columns default to creating a new field (with an "Edit field" affordance) instead of being skipped. `<ImportButton />` wires it from the schema automatically.
 
 ```tsx
 import React from 'react';