@wix/patterns 1.446.0 → 1.448.0

package/dist/docs/SettingsPage.Header.md

@@ -149,7 +149,7 @@ function Basic() {
 
 ### Overview
 
-The header component for a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Renders the page title, optional subtitle, and a more-actions menu. Place it as a direct child of ``.
+The header component for a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Renders the page title, optional subtitle, and a more-actions menu. Place it as a direct child of `<SettingsPage>`.
 
 ```tsx
 import { SettingsPage } from '@wix/patterns/page';
@@ -158,11 +158,14 @@ import { SettingsPage } from '@wix/patterns/page';
 ### Composition
 
 ```tsx
-
-  }
+<SettingsPage state={state}>
+  <SettingsPage.Header  {/* ← this component */}
+    title={{ text: "Settings" }}
+    subtitle="Configure your preferences"
+    moreActions={<MoreActions items={[...]} />}
   />
-  ...
-
+  <SettingsPage.Content>...</SettingsPage.Content>
+</SettingsPage>
 ```
 
 ### Props

package/dist/docs/SettingsPage.MainContent.md

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

package/dist/docs/SettingsPageState.md

@@ -13,7 +13,7 @@
 - **Save / cancel flow** — calls `onSave` and `onCancel` with success/error toasts
 - **Dirty-form protection** — warns on `beforeunload` when the form has unsaved changes
 
-Pass the returned state to ``.
+Pass the returned state to `<SettingsPage state={state}>`.
 
 ```tsx
 import { useSettingsPage } from '@wix/patterns';

package/dist/docs/Suggestions.md

@@ -334,14 +334,14 @@ import { SuggestionsUniDriver } from '@wix/patterns/testkit/unidriver';
 
 | Method | Return Type | Description |
 |--------|-------------|-------------|
-| `exists()` | `Promise` | Returns true if the suggestions component exists in the DOM |
-| `isLoading()` | `Promise` | Returns true if the component is in loading state |
-| `hasOffers()` | `Promise` | Returns true if offers are displayed |
-| `isEmpty()` | `Promise` | Returns true if no offers or loading state are present |
-| `getCardsCount()` | `Promise` | Returns the number of cards currently displayed |
-| `getCardAt(index)` | `Promise` | Returns the card element at the specified index |
-| `carousel()` | `Promise` | Returns the carousel driver (when in carousel mode) |
-| `container()` | `Promise` | Returns the container element (when in inline mode) |
+| `exists()` | `Promise<boolean>` | Returns true if the suggestions component exists in the DOM |
+| `isLoading()` | `Promise<boolean>` | Returns true if the component is in loading state |
+| `hasOffers()` | `Promise<boolean>` | Returns true if offers are displayed |
+| `isEmpty()` | `Promise<boolean>` | Returns true if no offers or loading state are present |
+| `getCardsCount()` | `Promise<number>` | Returns the number of cards currently displayed |
+| `getCardAt(index)` | `Promise<UniDriver>` | Returns the card element at the specified index |
+| `carousel()` | `Promise<CarouselUniDriver>` | Returns the carousel driver (when in carousel mode) |
+| `container()` | `Promise<UniDriver>` | Returns the container element (when in inline mode) |
 
 ---
 
@@ -359,8 +359,8 @@ import { MarketingCardUniDriver } from '@wix/patterns/testkit/unidriver';
 
 | Method | Return Type | Description |
 |--------|-------------|-------------|
-| `exists()` | `Promise` | Returns true if the card exists in the DOM |
-| `getTitleText()` | `Promise` | Returns the card's title text |
+| `exists()` | `Promise<boolean>` | Returns true if the card exists in the DOM |
+| `getTitleText()` | `Promise<string>` | Returns the card's title text |
 | `description.subtitle` | `TextUniDriver` | Driver for the card's subtitle text |
 | `description.learnMore` | `TextButtonUniDriver` | Driver for the "Learn More" text button |
 | `ctaButton` | `ButtonUniDriver` | Driver for the card's CTA button |

package/dist/docs/SummaryBar.md

@@ -12,7 +12,7 @@ This data is not updated dynamically as part of a collection's fetch, meaning yo
 
 ### Success
 
-This example shows the summary bar in the `"success"` state using the `` `status` prop.
+This example shows the summary bar in the `"success"` state using the `<SummaryBar>` `status` prop.
 
 ```tsx
 /* eslint-disable import/no-extraneous-dependencies */
@@ -94,7 +94,7 @@ function SuccessState() {
 
 ### Loading
 
-This example shows the summary bar in the `"loading"` state using the `` `status` prop.
+This example shows the summary bar in the `"loading"` state using the `<SummaryBar>` `status` prop.
 
 ```tsx
 /* eslint-disable import/no-extraneous-dependencies */
@@ -176,7 +176,7 @@ function LoadingState() {
 
 ### Error
 
-This example shows the summary bar in the `"error"` state using the `` `status` prop.
+This example shows the summary bar in the `"error"` state using the `<SummaryBar>` `status` prop.
 
 ```tsx
 /* eslint-disable import/no-extraneous-dependencies */
@@ -260,7 +260,7 @@ function ErrorState() {
 
 ### Loading with success
 
-This example shows the summary bar in the `"loading"` state, that changes to the `"success"` state when the data is fetched, using the `` `status` prop.
+This example shows the summary bar in the `"loading"` state, that changes to the `"success"` state when the data is fetched, using the `<SummaryBar>` `status` prop.
 
 ```tsx
 /* eslint-disable import/no-extraneous-dependencies */
@@ -374,7 +374,7 @@ function LoadWithSuccess() {
 
 ### Loading with error
 
-This example shows the summary bar in the `"loading"` state, that changes to the `"error"` state when the data fetch fails, using the `` `status` prop.
+This example shows the summary bar in the `"loading"` state, that changes to the `"error"` state when the data fetch fails, using the `<SummaryBar>` `status` prop.
 The `onRetry` prop is used to retry the fetch the data when **Reload** is clicked.
 
 ```tsx
@@ -510,6 +510,6 @@ Event   |   Description   |
 
 ### Usage
 
-`getSummaryBar` API is exposed from the `` [testkit](./?path=/story/components-collection--table&tab=Testkit)
+`getSummaryBar` API is exposed from the `<Table />` [testkit](./?path=/story/components-collection--table&tab=Testkit)
 
 

package/dist/docs/TableTopNotification.md

@@ -311,6 +311,6 @@ Event   |   Description   |
 
 ### Usage
 
-`getTopNotification` API is exposed from the `` [testkit](./?path=/story/base-components-collections-table-table--table&tab=Testkit)
+`getTopNotification` API is exposed from the `<Table />` [testkit](./?path=/story/base-components-collections-table-table--table&tab=Testkit)
 
 

package/dist/docs/TabsFilter.md

@@ -24,7 +24,7 @@ import { TabsFilter } from '@wix/patterns';
 
 ### Basic Tabs
 
-This example uses the `` `data` prop to include filter tabs in the table.
+This example uses the `<TabsFilter>` `data` prop to include filter tabs in the table.
 
 ```tsx
 import { Avatar } from '@wix/design-system';
@@ -127,7 +127,7 @@ function TabsFilterExample() {
 
 ### Tabs with a basic counter
 
-This example uses the `` `counterBadge` prop to include a counter badge in the table's filter tabs.
+This example uses the `<TabsFilter>` `counterBadge` prop to include a counter badge in the table's filter tabs.
 
 ```tsx
 import { Avatar } from '@wix/design-system';
@@ -283,7 +283,7 @@ function TabsFilterTotalParensExample() {
 
 ### Tabs with a counter badge
 
-This example uses the `` `counterBadge` prop to include a counter badge in the table's filter tabs.
+This example uses the `<TabsFilter>` `counterBadge` prop to include a counter badge in the table's filter tabs.
 
 ```tsx
 import { Avatar } from '@wix/design-system';
@@ -441,7 +441,7 @@ function TabsFilterTotalBadgeExample() {
 
 ### Disabled tabs
 
-This example uses the `` `disabled` prop to make tabs with no items non-interactive.
+This example uses the `<TabsFilter>` `disabled` prop to make tabs with no items non-interactive.
 
 ```tsx
 import { Avatar } from '@wix/design-system';
@@ -587,6 +587,6 @@ Event   |   Description   |
 
 ### Usage
 
-`getToolbarTabs` API is exposed from the `` [testkit](./?path=/story/base-components-collections-table-table--table&activeTab=Testkit)
+`getToolbarTabs` API is exposed from the `<Table />` [testkit](./?path=/story/base-components-collections-table-table--table&activeTab=Testkit)
 
 

package/dist/docs/Tags.md

@@ -40,7 +40,7 @@ import { CollectionPage } from '@wix/patterns/page';
   function TableWithTags() {
   const httpClient = useHttpClient();
 
-  const state = useTableCollection({
+  const state = useTableCollection<MyEntity>({
     queryName: 'my-entity-table-name',
     paginationMode: 'offset',
     fqdn: 'wix.domain.MyEntityService.v1.myEntity',
@@ -79,12 +79,20 @@ import { CollectionPage } from '@wix/patterns/page';
 
 
   return (
-    
-      
-        
+    <CollectionPage
+      <CollectionPage.Header />
+      <CollectionPage.Content>
+        <Table
+          showSelection
+          state={state}
++          tags={
++            <Tags
++              entityTypeName="My Entity Name"
++              bulkUpdateTags={handleBulkUpdateTags}
++            />
 +          }
           bulkActionToolbar={() => (
-            
+            <MultiBulkActionToolbar />
           )}
           columns={[
             {
@@ -96,8 +104,8 @@ import { CollectionPage } from '@wix/patterns/page';
             },
           ]}
         />
-      
-    
+      </Page.Content>
+    </CollectionPage>
     );
   }
 ```

package/dist/docs/TagsWidget.md

@@ -29,9 +29,9 @@ Wix Patterns is responsible for interacting with the tags management service for
 export const MyPageProvider = ({ children }) => {
 
   return (
-+   
-      
-+   
++   <WidgetsFormProvider>
+      <MyEntityPage />
++   </WidgetsFormProvider>
   );
 };
 ```
@@ -58,19 +58,25 @@ function MyEntityPage({ entity }: { entity: MyEntity }) {
 +   };
 
     return (
-       
-          
-          
-            
-              
-                
-              
-+             
-+               
-+             
-            
-          
-        
+       <Page>
+          <Page.Header title="My Entity Page" />
+          <Page.Content>
+            <Layout>
+              <Cell span={8}>
+                <MyEntityCard entity={entity}>
+              </Cell>
++             <Cell span={4}>
++               <TagsWidget
++                  fqdn="wix.patterns.dummyservice.v1.dummy_entity"
++                  initialTags={entity.tags}
++                  entityId={entity.id}
++                  entityTypeName="Demo Entity"
++                  onSubmit={handleTagsSubmit}
+                />
++             </Cell>
+            </Layout>
+          </Page.Content>
+        </Page>
     );
   }
 ```
@@ -101,9 +107,14 @@ function MyEntityPage({ entity }: { entity: MyEntity }) {
    };
 
     return (
-       
--         
-+          {
+       <Page>
+-         <Page.Header title="My Entity Page" />
++         <Page.Header
++           title="My Entity Page"
++            actionsBar={
++              <Button
++                disabled={!isDirty}
++                onClick={async () => {
 +                  const { isValid, data } = await state.validate();
 +                  if (data.tags) {
 +                    await handleTagsSubmit(data.tags);
@@ -111,20 +122,26 @@ function MyEntityPage({ entity }: { entity: MyEntity }) {
 +                }}
 +              >
 +                Save
-+              
++              </Button>
 +            }
 +          />
-          
-            
-              
-                
-              
-              
-                
-              
-            
-          
-        
+          <Page.Content>
+            <Layout>
+              <Cell span={8}>
+                <MyEntityCard entity={entity}>
+              </Cell>
+              <Cell span={4}>
+                <TagsWidget
+                  fqdn="wix.patterns.dummyservice.v1.dummy_entity"
+                  initialTags={entity.tags}
+                  entityId={entity.id}
+                  entityTypeName="Demo Entity"
+-                 onSubmit={handleTagsSubmit}
+                />
+              </Cell>
+            </Layout>
+          </Page.Content>
+        </Page>
     );
   }
 ```

package/dist/docs/ToolbarFilters.md

@@ -12,11 +12,11 @@ By default, when there are more than 2 filters, the toolbar automatically displa
  
 You can override the default and set the number of inline-toolbar filters to display. For example, if you want 2 out of your 4 filters to be displayed inline, set `inline` to 2: 
  
- `` 
+ `<CollectionToolbarFilters inline={2}>` 
  
 If you don't want any inline filters, then set `inline` to 0: 
  
- `` 
+ `<CollectionToolbarFilters inline={0}>` 
  
 > **Note:** Some filters such as the [`DateRangeFilter`](./?path=%/story/features-filter-components--daterangefilter) and [`RadioGroupFilter`](./?path=/story/features-filter-components--radiogroupfilter), are always displayed in the side panel and aren't supported inline in the toolbar.
 
@@ -1338,7 +1338,7 @@ function FutureDateRangeFilter() {
 
 ### Mini toolbar
 
-To create a mini toolbar, set the `width` prop of the `` component to a minimum of `228px`.
+To create a mini toolbar, set the `width` prop of the `<Box>` component to a minimum of `228px`.
 
 ```tsx
 import { Avatar, Box } from '@wix/design-system';
@@ -1425,7 +1425,7 @@ function MinifiedToolbarScroll() {
 
 ### Mini toolbar with filters
 
-To create a mini toolbar, set the `width` prop of the `` component to a minimum of `228px`. To add filters, set the Table component's `filters` prop.
+To create a mini toolbar, set the `width` prop of the `<Box>` component to a minimum of `228px`. To add filters, set the Table component's `filters` prop.
 
 ```tsx
 import { Avatar, Box } from '@wix/design-system';

package/dist/docs/ToolbarTitle.md

@@ -11,7 +11,7 @@ The card title located on the left hand side of the toolbar to provide visitors
 
 ### Title
 
-This example uses the `` `title` prop to display a title in the toolbar.
+This example uses the `<ToolbarTitle>` `title` prop to display a title in the toolbar.
 
 ```tsx
 /* eslint-disable import/no-extraneous-dependencies */
@@ -80,7 +80,7 @@ function Title() {
 
 ### Title, subtitle, and learn more
 
-This example uses the `` `title` and `subtitle` props to display a title, subtitle, and a redirect link in the toolbar.
+This example uses the `<ToolbarTitle>` `title` and `subtitle` props to display a title, subtitle, and a redirect link in the toolbar.
 
 ```tsx
 /* eslint-disable import/no-extraneous-dependencies */
@@ -157,7 +157,7 @@ function Subtitle() {
 
 ### Title and count
 
-This example uses the `` `title` and `showCount` props to display a title and a count in the toolbar.
+This example uses the `<ToolbarTitle>` `title` and `showCount` props to display a title and a count in the toolbar.
 
 ```tsx
 /* eslint-disable import/no-extraneous-dependencies */
@@ -226,7 +226,7 @@ function Total() {
 
 ### Title, count, and the collection's item limit
 
-This example uses the `` `title`, `showCount`, and `itemsLimit` props to display a title, a count, and the maximum number of items a visitor can add to the collection in the toolbar.
+This example uses the `<ToolbarTitle>` `title`, `showCount`, and `itemsLimit` props to display a title, a count, and the maximum number of items a visitor can add to the collection in the toolbar.
 
 ```tsx
 /* eslint-disable import/no-extraneous-dependencies */

package/dist/docs/Views.md

@@ -8,13 +8,13 @@
 
 Collections of table states. A table state includes the filters, column sorts, and custom columns that are applied to the table.
 
-To use Views in your Table or Grid, you need to include `views={}`.
+To use Views in your Table or Grid, you need to include `views={<Views />}`.
 
 The default is an "All Items" View and full functionality for your visitors to manage views.
 
 Properties, documented in the API tab, allows you to manage the View more, including setting different defaults views and reacting to events.
 
-To render a collection component with a specific view, pass the URL query parameter `viewId` with the value of the desired view ID. For example, `https://www.example.com/collection?viewId=`.
+To render a collection component with a specific view, pass the URL query parameter `viewId` with the value of the desired view ID. For example, `https://www.example.com/collection?viewId=<your-view-id>`.
 
 Note that preset views cannot be renamed. Any visitor-defined view can be renamed using **Rename** under **Manage View**. Visitors can also use **Save as New** to create a copy with a new name.
 
@@ -28,7 +28,7 @@ import { Views } from '@wix/patterns';
 
 ### Basic View
 
-This example uses the `` `allItemsViewProps` prop to hide the default "All Items" view from the list of views. "All Items" view will be the default view, and then visitors can apply filters, custom columns, or sorting before saving the current view.
+This example uses the `<Views>` `allItemsViewProps` prop to hide the default "All Items" view from the list of views. "All Items" view will be the default view, and then visitors can apply filters, custom columns, or sorting before saving the current view.
 
 ```tsx
 import { Avatar } from '@wix/design-system';
@@ -169,7 +169,7 @@ function ViewsExample() {
 
 ### Basic View that can be chosen
 
-This example uses the `` `allItemsViewProps` prop to name the default view that appears in the views dropdown.
+This example uses the `<Views>` `allItemsViewProps` prop to name the default view that appears in the views dropdown.
 
 ```tsx
 import { Avatar } from '@wix/design-system';
@@ -318,7 +318,7 @@ function AllItemsView() {
 
 ### View with selected columns
 
-This example uses the `selectedColumns` property in the view object in the `` `presets` prop to define which columns should be displayed in the table in this view.
+This example uses the `selectedColumns` property in the view object in the `<Views>` `presets` prop to define which columns should be displayed in the table in this view.
 
 ```tsx
 import { Avatar } from '@wix/design-system';
@@ -467,7 +467,7 @@ function ViewsCustomColumnsExample() {
 
 ### Views separated by category in the dropdown
 
-This example defines views in different sections in the `` `presets` prop.
+This example defines views in different sections in the `<Views>` `presets` prop.
 
 ```tsx
 import { Avatar } from '@wix/design-system';
@@ -703,7 +703,7 @@ function PredefinedCategories() {
 
 ### Usage
 
-Views API is exposed from the `` [testkit](./?path=/story/base-components-collections-table-table--table&activeTab=Testkit)
+Views API is exposed from the `<Table />` [testkit](./?path=/story/base-components-collections-table-table--table&activeTab=Testkit)
 
 ## APIs List
 
@@ -767,7 +767,7 @@ Returns the Rename view modal testkit.
 | [144:143](https://bo.wix.com/data-tools/bi-catalog-app/event/144:143) | Sent when a user selects one of the actions in "manage view" menu                   |
 | [144:145](https://bo.wix.com/data-tools/bi-catalog-app/event/144:145) | Sent when a user made an action on a view, but his changes weren't update in the server from different reasons |
 | [144:151](https://bo.wix.com/data-tools/bi-catalog-app/event/144:151) | Sent when the search results are displayed, after a user searches for a view in a Wix Patterns views list
-| [144:115](https://bo.wix.com/data-tools/bi-catalog-app/event/144:115) | Sent when the user clicks the "More Actions" (3-dots) button inside the view dropdown. Fields: `cta_name='more_actions'`, `location='view_dropdown'`, `item_id=`, `item_index=`
+| [144:115](https://bo.wix.com/data-tools/bi-catalog-app/event/144:115) | Sent when the user clicks the "More Actions" (3-dots) button inside the view dropdown. Fields: `cta_name='more_actions'`, `location='view_dropdown'`, `item_id=<view_id>`, `item_index=<index of the view>`
 | [144:4](https://bo.wix.com/data-tools/bi-catalog-app/event/144:4) | Sent when the user clicks on the view dropdown
 
 

package/dist/docs/WidgetsFormProvider.md

@@ -6,7 +6,7 @@
 
 ### Overview
 
-`WidgetsFormProvider` wraps form content in Entity/Settings pages to provide widget-level form context. It enables custom form widgets (like `CustomFieldsWidget`) to register with the page form and participate in validation and submission. Place it inside `` or `` content.
+`WidgetsFormProvider` wraps form content in Entity/Settings pages to provide widget-level form context. It enables custom form widgets (like `CustomFieldsWidget`) to register with the page form and participate in validation and submission. Place it inside `<EntityPage.Card>` or `<SettingsPage.Card>` content.
 
 ```tsx
 import { WidgetsFormProvider } from '@wix/patterns/page';
@@ -27,9 +27,9 @@ Wrap your page with `WidgetsFormProvider`
 export const MyPageProvider = () => {
 
     return (
-+       
-            
-+       
++       <WidgetsFormProvider>
+            <MyEntityPage />
++       </WidgetsFormProvider>
     )
 }
 ```
@@ -44,14 +44,18 @@ export const MyEntityPage = () => {
 +   const state = useFormPageContext();
 
     return (
-        
-             {
+        <Page>
+            <Page.Header
+                title="Entity page"
+                actionsBar={
+                    <Button
+                        onClick={async () => {
 +                           const { isValid, data } = await state.validate();
 +                           if (isValid) await handleSubmit();
                         }}
                     >
                         Save
-                    
+                    </Button>
                 }
             />
     )

package/dist/docs/WixPatternsProvider.md

@@ -54,15 +54,59 @@ import { WixPatternsProvider } from '@wix/patterns/provider';
 
 export default withDashboard(() => {
   return (
-    
-      
+    <WixDesignSystemProvider>
+      <WixPatternsProvider>
         {
           // Wix Patterns components
         }
-      
-    
+      </WixPatternsProvider>
+    </WixDesignSystemProvider>
   );
 });
 ```
+`withDashboard` does more than set up context for convenience: it publishes the
+page location that `PatternsReactRouter` reads through
+`container.usePageLocation()`. `WixPatternsProvider` does not supply that, so a
+page that routes and omits `withDashboard` throws at render time. Keep it even
+if you are not routing yet — adding a router later otherwise breaks the page in
+a way neither type checking nor bundling reports.
+
+The component `withDashboard()` returns takes a `location` prop. Under Yoshi BM
+flow the host passes it. In a **Wix CLI app** nothing passes props to the
+dashboard page component, so read it from the dashboard SDK yourself:
+
+```jsx
+import { useEffect, useState } from 'react';
+import { dashboard } from '@wix/dashboard';
+import { WixDesignSystemProvider } from '@wix/design-system';
+import { withDashboard } from '@wix/patterns';
+import { WixPatternsProvider } from '@wix/patterns/provider';
+
+const App = withDashboard(() => (
+  <WixPatternsProvider>
+    {
+      // Wix Patterns components
+    }
+  </WixPatternsProvider>
+));
+
+export default function Page() {
+  const [location, setLocation] = useState();
+
+  useEffect(() => {
+    const subscription = dashboard.observeState((_pageParams, environment) => {
+      setLocation(environment.pageLocation);
+    });
+
+    return () => subscription.disconnect();
+  }, []);
+
+  return (
+    <WixDesignSystemProvider>
+      {location ? <App location={location} /> : null}
+    </WixDesignSystemProvider>
+  );
+}
+```
 
 

package/dist/docs/Working with Cache.md

@@ -18,16 +18,16 @@ Most of the time this behavior is undesirable in Business Manager because some a
 
 ## Enable global cache
 
-To enable the global cache in Business Manager, one should explicitly set it in the `` component.
+To enable the global cache in Business Manager, one should explicitly set it in the `<WixPatternsBMProvider />` component.
 
 ```js
 import { WixPatternsBMProvider } from '@wix/patterns/bm';
 
 export const App = () => {
   return (
-    
+    <WixPatternsBMProvider localCache={false}>
       {...}
-    
+    </WixPatternsBMProvider>
   )
 }
 ```
@@ -66,7 +66,7 @@ export default () => {
     },
   });
 
-  return <>{/* ... */};
+  return <>{/* ... */}</>;
 };
 ```
 
@@ -107,7 +107,7 @@ export default () => {
     });
   };
 
-  return <>{/* ... */};
+  return <>{/* ... */}</>;
 };
 ```
 

package/dist/docs/bulkActionModal.md

@@ -15,25 +15,30 @@ The render function receives:
 - `closeModal` — closes the modal
 - `query` — a [`ComputedQuery`](./?path=/story/common-types--computedquery) representing the current paging, sorting, and filtering. Useful for server-side bulk operations like `updateAll` or `deleteAll`.
 
-Return a React element (typically a `` or custom modal content) from the render function.
+Return a React element (typically a `<MessageModalLayout>` or custom modal content) from the render function.
 
 ### Usage
 
 ```tsx
- (
-    
-      
+<Table
+  state={state}
+  columns={columns}
+  bulkActionToolbar={({ openModal }) => (
+    <MultiBulkActionToolbar>
+      <MultiBulkActionToolbar.ActionButton onClick={openModal}>
         Delete Selected
-      
-    
+      </MultiBulkActionToolbar.ActionButton>
+    </MultiBulkActionToolbar>
   )}
   bulkActionModal={({ selectedValues, closeModal }) => (
-     { deleteItems(selectedValues); closeModal(); }}
+    <MessageModalLayout
+      primaryButtonText="Delete"
+      primaryButtonOnClick={() => { deleteItems(selectedValues); closeModal(); }}
       secondaryButtonText="Cancel"
       secondaryButtonOnClick={closeModal}
     >
       Delete {selectedValues.length} items?
-    
+    </MessageModalLayout>
   )}
 />
 ```