@wix/patterns 1.447.0 → 1.448.0

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>
   )}
 />
 ```

package/dist/docs/index.json

@@ -1,4 +1,8 @@
 {
+  "AI Assistant": {
+    "file": "AI Assistant.md",
+    "category": "Integrations/AI Assistant"
+  },
   "AutoCompleteFilter": {
     "file": "AutoCompleteFilter.md",
     "category": "Features/Filter/Components"
@@ -7,10 +11,6 @@
     "file": "ActionSubItem.md",
     "category": "Common/Types"
   },
-  "AI Assistant": {
-    "file": "AI Assistant.md",
-    "category": "Integrations/AI Assistant"
-  },
   "CollectionEmptyState": {
     "file": "CollectionEmptyState.md",
     "category": "Features/Display/Empty States"
@@ -19,24 +19,24 @@
     "file": "CollectionErrorState.md",
     "category": "Common/State"
   },
-  "CollectionPage": {
-    "file": "CollectionPage.md",
-    "category": "Base Components/Pages/Collection Page"
-  },
   "CollectionOptimisticActions": {
     "file": "CollectionOptimisticActions.md",
     "category": "Features/Actions/Updates"
   },
-  "CollectionNoResultsState": {
-    "file": "CollectionNoResultsState.md",
-    "category": "Features/Display/Empty States"
+  "CollectionPage.Content": {
+    "file": "CollectionPage.Content.md",
+    "category": "Base Components/Pages/Collection Page"
   },
   "CollectionPage.Header": {
     "file": "CollectionPage.Header.md",
     "category": "Base Components/Pages/Collection Page"
   },
-  "CollectionPage.Content": {
-    "file": "CollectionPage.Content.md",
+  "CollectionNoResultsState": {
+    "file": "CollectionNoResultsState.md",
+    "category": "Features/Display/Empty States"
+  },
+  "CollectionPage": {
+    "file": "CollectionPage.md",
     "category": "Base Components/Pages/Collection Page"
   },
   "CollectionPremiumEmptyState": {
@@ -67,26 +67,26 @@
     "file": "CustomFieldType.md",
     "category": "Features/Enrich/Custom Field Types"
   },
-  "CustomFieldsViewWidget": {
-    "file": "CustomFieldsViewWidget.md",
-    "category": "Features/Enrich/Data Extension/Components"
-  },
   "CustomFieldsWidget": {
     "file": "CustomFieldsWidget.md",
     "category": "Features/Enrich/Data Extension/Components"
   },
+  "CustomFieldsViewWidget": {
+    "file": "CustomFieldsViewWidget.md",
+    "category": "Features/Enrich/Data Extension/Components"
+  },
   "DateRangeFilter": {
     "file": "DateRangeFilter.md",
     "category": "Features/Filter/Components"
   },
-  "EntityPage": {
-    "file": "EntityPage.md",
-    "category": "Base Components/Pages/Entity Page"
-  },
   "EntityPage.AdditionalContent": {
     "file": "EntityPage.AdditionalContent.md",
     "category": "Base Components/Pages/Entity Page"
   },
+  "EntityPage": {
+    "file": "EntityPage.md",
+    "category": "Base Components/Pages/Entity Page"
+  },
   "EntityPage.Card": {
     "file": "EntityPage.Card.md",
     "category": "Base Components/Pages/Entity Page"
@@ -99,14 +99,14 @@
     "file": "EntityPage.Header.md",
     "category": "Base Components/Pages/Entity Page"
   },
-  "EntityPage.Slots": {
-    "file": "EntityPage.Slots.md",
-    "category": "Base Components/Pages/Entity Page"
-  },
   "EntityPage.MainContent": {
     "file": "EntityPage.MainContent.md",
     "category": "Base Components/Pages/Entity Page"
   },
+  "EntityPage.Slots": {
+    "file": "EntityPage.Slots.md",
+    "category": "Base Components/Pages/Entity Page"
+  },
   "Grid": {
     "file": "Grid.md",
     "category": "Base Components/Collections/Grid/Grid"
@@ -399,6 +399,10 @@
     "file": "ActionCellProps.md",
     "category": "Features/Actions/Action Cell"
   },
+  "BulkActionModalRenderProp": {
+    "file": "BulkActionModalRenderProp.md",
+    "category": "Common/Types"
+  },
   "BulkSelectState": {
     "file": "BulkSelectState.md",
     "category": "Common/State"
@@ -407,18 +411,14 @@
     "file": "Category.md",
     "category": "Common/Types"
   },
-  "BulkActionModalRenderProp": {
-    "file": "BulkActionModalRenderProp.md",
+  "CollectionSection": {
+    "file": "CollectionSection.md",
     "category": "Common/Types"
   },
   "CollectionState": {
     "file": "CollectionState.md",
     "category": "Common/State"
   },
-  "CollectionSection": {
-    "file": "CollectionSection.md",
-    "category": "Common/Types"
-  },
   "ComputedQuery": {
     "file": "ComputedQuery.md",
     "category": "Common/Types"

package/dist/docs/useAmbassadorCollection.md

@@ -25,7 +25,10 @@ const state = useAmbassadorCollection({
 });
 
 return (
-   c.name },
+  <Table
+    state={state}
+    columns={[
+      { title: 'Name', render: (c) => c.name },
     ]}
   />
 );

package/dist/docs/useEntity.md

@@ -28,12 +28,15 @@ function MyEntityPage({ state }) {
   const entity = useEntity(state);
 
   return (
-    
-      
-      
+    <EntityPage state={state}>
+      <EntityPage.Header
+        title={{ text: entity?.name ?? "Loading..." }}
+        subtitle={entity?.description}
+      />
+      <EntityPage.Content>
         {/* Card.Content receives the entity automatically */}
-      
-    
+      </EntityPage.Content>
+    </EntityPage>
   );
 }
 ```

package/dist/docs/useEntityPage.md

@@ -6,7 +6,7 @@
 
 ### Overview
 
-A React hook that creates the state for an [`EntityPage`](./?path=/story/base-components-pages-entity-page--entitypage). Configure entity fetching, save flow, form integration, toasts, and navigation. The returned [`EntityPageState`](./?path=/story/base-components-pages-entity-page-state--entitypagestate) is passed to ``.
+A React hook that creates the state for an [`EntityPage`](./?path=/story/base-components-pages-entity-page--entitypage). Configure entity fetching, save flow, form integration, toasts, and navigation. The returned [`EntityPageState`](./?path=/story/base-components-pages-entity-page-state--entitypagestate) is passed to `<EntityPage state={state}>`.
 
 ```tsx
 import { useEntityPage } from '@wix/patterns/page';
@@ -30,12 +30,12 @@ const state = useEntityPage({
 });
 
 return (
-  
-    
-    
-      ...
-    
-  
+  <EntityPage state={state}>
+    <EntityPage.Header title={{ text: 'Edit Item' }} />
+    <EntityPage.Content>
+      <EntityPage.MainContent>...</EntityPage.MainContent>
+    </EntityPage.Content>
+  </EntityPage>
 );
 ```
 
@@ -51,6 +51,8 @@ return (
 | `onSave` | `(params: OnSaveParams) => Promise<{ updatedEntity: T; }>` | Yes | - | A function to handle the save action. @returns promise that resolves to an object that contains a 'updatedEntity' object. |
 | `saveSuccessToast` | `string \| { message?: string; }` | No | - | An optional object with an optional message, or it can directly get a string message. |
 | `saveErrorToast` | `((err: unknown, params: { retry: () => void; }) => string \| { message?: string; tryAgain?: boolean; action?: { text: string; onClick: () => void; } \| undefined; }) \| undefined` | No | - | An optional function to display an error toast message when a save operation fails. @returns An object with a `message` and an `action` object. Alternatively, it can return an object with an optional `message` and a `tryAgain` flag, or a string message. The previous return types are still supported but are now deprecated. |
+| `deleteAction` | `EntityPageDeleteAction<T>` | No | - | Enables deleting the loaded entity from the entity page. Pass `true` for a schema-backed page to use the source backend, or an object to customize the action and to provide a delete handler for manually wired pages. |
+| `transformEntityToCollectionItem` | `((entity: T) => any)` | No | - | An optional function to transform the updated entity data before it is passed to the collection page. @param entity the updated entity. @returns an object representing the entity in the collection page. |
 | `parentPageId` | `string` | No | - | A string representing the ID of the parent page. Must be passed if not using Patterns Router |
 | `parentPath` | `string` | No | - | A string representing the path of the parent page. Must be passed if using Patterns Router |
 | `parentReferrer` | `string` | No | - | Referrer forwarded to the parent page on back, cancel and save, so callers can carry navigation context across the transition. Only used for parentPageId navigations; Patterns Router keeps its context in router state. Forwarded by the BM and Giza providers. Dropped by the dashboard provider, whose SDK Destination has no referrer field. |

package/dist/docs/useEntityPageContext.md

@@ -18,7 +18,7 @@ import { useEntityPageContext } from '@wix/patterns/page';
 function MyCardContent() {
   const state = useEntityPageContext();
   // Access state.entity, state.form, etc.
-  return {state.entity?.name};
+  return <div>{state.entity?.name}</div>;
 }
 ```