@wix/patterns 1.447.0 → 1.449.0

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,26 +19,26 @@
     "file": "CollectionErrorState.md",
     "category": "Common/State"
   },
+  "CollectionNoResultsState": {
+    "file": "CollectionNoResultsState.md",
+    "category": "Features/Display/Empty States"
+  },
   "CollectionPage": {
     "file": "CollectionPage.md",
     "category": "Base Components/Pages/Collection Page"
   },
+  "CollectionPage.Content": {
+    "file": "CollectionPage.Content.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.Header": {
     "file": "CollectionPage.Header.md",
     "category": "Base Components/Pages/Collection Page"
   },
-  "CollectionPage.Content": {
-    "file": "CollectionPage.Content.md",
-    "category": "Base Components/Pages/Collection Page"
-  },
   "CollectionPremiumEmptyState": {
     "file": "CollectionPremiumEmptyState.md",
     "category": "Features/Display/Empty States"
@@ -59,14 +59,14 @@
     "file": "ToolbarFilters.md",
     "category": "Features/Filter/Components"
   },
-  "CustomColumns": {
-    "file": "CustomColumns.md",
-    "category": "Features/Display/Custom Columns"
-  },
   "CustomFieldType": {
     "file": "CustomFieldType.md",
     "category": "Features/Enrich/Custom Field Types"
   },
+  "CustomColumns": {
+    "file": "CustomColumns.md",
+    "category": "Features/Display/Custom Columns"
+  },
   "CustomFieldsViewWidget": {
     "file": "CustomFieldsViewWidget.md",
     "category": "Features/Enrich/Data Extension/Components"
@@ -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"
@@ -431,10 +431,6 @@
     "file": "customFilter.md",
     "category": "Features/Filter/Factories"
   },
-  "DataResultRaw": {
-    "file": "DataResultRaw.md",
-    "category": "Common/Types"
-  },
   "Data Extension Overview": {
     "file": "Data Extension Overview.md",
     "category": "Features/Enrich/Data Extension"
@@ -451,6 +447,10 @@
     "file": "Allow Users to Add Extended Fields.md",
     "category": "Features/Enrich/Data Extension"
   },
+  "DataResultRaw": {
+    "file": "DataResultRaw.md",
+    "category": "Common/Types"
+  },
   "EntityPageState": {
     "file": "EntityPageState.md",
     "category": "Base Components/Pages/Entity Page/State"

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,9 @@ 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. |
+| `isNewEntity` | `boolean \| (() => boolean)` | No | - | Whether the page was opened to create a new entity rather than to edit an existing one. Decides how a save is announced to the parent page — created vs updated — so a new item seeded with local defaults is still announced as created. Pass a getter when the route can change while the page stays mounted. When omitted, the announcement follows whether an entity was loaded. |
 | `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>;
 }
 ```
 

package/dist/docs/useGridCollection.md

@@ -18,10 +18,16 @@ import { useGridCollection } from '@wix/patterns';
 import { useGridCollection, Grid } from '@wix/patterns';
 import { contacts } from '@wix/crm';
 
-const state = useGridCollection(/* Your collection parameters */);
+const state = useGridCollection<contacts.Contact>(/* Your collection parameters */);
 
 return (
-   contact.name,
+  <Grid
+    state={state}
+    columns={[
+      {
+        title: 'Name',
+        width: '250px',
+        render: (contact) => contact.name,
       }
     ]}
     /* Additional Grid props */

package/dist/docs/useNestedTable.md

@@ -8,7 +8,7 @@
 
 `useNestedTable` is a React hook that creates the state for a [`NestedTable`](./?path=/story/base-components-collections-nestedtable--nestedtable) component — a table that displays hierarchical data with expand/collapse, flat and nested view modes, and multi-level optimistic actions.
 
-You define the hierarchy through `levels`, where each level describes how to fetch its items, how they relate to their parent, and how to render columns. The hook returns a [`NestedTableState`](./?path=/story/base-components-collections-nestedtable--nestedtablestate) to pass to ``.
+You define the hierarchy through `levels`, where each level describes how to fetch its items, how they relate to their parent, and how to render columns. The hook returns a [`NestedTableState`](./?path=/story/base-components-collections-nestedtable--nestedtablestate) to pass to `<NestedTable state={state} />`.
 
 ```tsx
 import { useNestedTable } from '@wix/patterns';
@@ -46,7 +46,7 @@ const state = useNestedTable({
   ],
 });
 
-return ;
+return <NestedTable state={state} />;
 ```
 
 ### Returns

package/dist/docs/useOptimisticActions.md

@@ -24,8 +24,8 @@ The following example uses the `useOptimisticActions` hook to initialize optimis
 - import { OffsetQuery, useTableCollection } from '@wix/patterns';
 + import { OffsetQuery, useTableCollection, useOptimisticActions } from '@wix/patterns';
 
-  const state = useTableCollection({
-    fetchData: (query: OffsetQuery) => {
+  const state = useTableCollection<contacts.Contact, ContactsFilters>({
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
       // server call to fetch data
     },
   });

package/dist/docs/usePatternsNavigate.md

@@ -21,7 +21,13 @@ A good usecase for it, is to navigate to a collection page on a breadcrumb click
 It takes the path of the collection page as an argument:
 
 ```ts
-   {
+  <Breadcrumbs
+    activeId="current"
+    items={[
+      { id: 'root', value: 'Dummy Entity Collection' },
+      { id: 'current', value: 'Entity Page' },
+    ]}
+    onClick={(e) => {
       if (e.id === 'root') {
         navigateToCollectionPage({ path: '/entities' });
       }
@@ -44,7 +50,7 @@ It takes the path of the entity page, and the entity as arguments:
               path: `/entities/${item.id}`,
               entity: item,
             }),
-          icon: ,
+          icon: <Edit />,
         }
       }
    }}

package/dist/docs/usePickerContent.md

@@ -31,7 +31,10 @@ const MyPickerContent = ({ modalState }) => {
   });
 
   return (
-     item.name },
+    <PickerContent
+      state={contentState}
+      columns={[
+        { title: 'Name', render: (item) => item.name },
       ]}
     />
   );
@@ -40,7 +43,7 @@ const MyPickerContent = ({ modalState }) => {
 
 ### Returns
 
-The same config object, enriched with internal collection state. Pass it to ``.
+The same config object, enriched with internal collection state. Pass it to `<PickerContent state={...} />`.
 
 ### Props
 

package/dist/docs/usePickerModal.md

@@ -37,15 +37,15 @@ const pickerState = usePickerModal({
 
 return (
   <>
-    Open Picker
-    
-  
+    <button onClick={pickerState.open}>Open Picker</button>
+    <PickerModal state={pickerState} />
+  </>
 );
 ```
 
 ### Returns
 
-`PickerModalState` — pass it to ``.
+`PickerModalState` — pass it to `<PickerModal state={...} />`.
 
 ### Props
 

package/dist/docs/usePickerStandalone.md

@@ -33,7 +33,10 @@ const state = usePickerStandalone({
 });
 
 return (
-   site.name },
+  <PickerStandalone
+    state={state}
+    columns={[
+      { title: 'Site Name', render: (site) => site.name },
     ]}
   />
 );
@@ -41,7 +44,7 @@ return (
 
 ### Returns
 
-`PickerStandaloneState` — pass it to ``.
+`PickerStandaloneState` — pass it to `<PickerStandalone state={...} />`.
 
 ### Props
 

package/dist/docs/useSettingsPage.md

@@ -6,7 +6,7 @@
 
 ### Overview
 
-A React hook that creates the state for a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Configure settings fetching, save/cancel flow, form integration, and toasts. The returned [`SettingsPageState`](./?path=/story/base-components-pages-settings-page-state--settingspagestate) is passed to ``.
+A React hook that creates the state for a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Configure settings fetching, save/cancel flow, form integration, and toasts. The returned [`SettingsPageState`](./?path=/story/base-components-pages-settings-page-state--settingspagestate) is passed to `<SettingsPage state={state}>`.
 
 ```tsx
 import { useSettingsPage } from '@wix/patterns/page';
@@ -29,12 +29,12 @@ const state = useSettingsPage({
 });
 
 return (
-  
-    
-    
-      ...
-    
-  
+  <SettingsPage state={state}>
+    <SettingsPage.Header title={{ text: 'Settings' }} />
+    <SettingsPage.Content>
+      <SettingsPage.MainContent>...</SettingsPage.MainContent>
+    </SettingsPage.Content>
+  </SettingsPage>
 );
 ```
 

package/dist/docs/useSettingsPageContext.md

@@ -18,7 +18,7 @@ import { useSettingsPageContext } from '@wix/patterns/page';
 function MySettingsCard() {
   const state = useSettingsPageContext();
   // Access state.form, state.settings, etc.
-  return Current value: {state.settings?.theme};
+  return <div>Current value: {state.settings?.theme}</div>;
 }
 ```
 

package/dist/docs/useTableCollection.md

@@ -18,10 +18,16 @@ import { useTableCollection } from '@wix/patterns';
 import { useTableCollection, Table } from '@wix/patterns';
 import { contacts } from '@wix/crm';
 
-const state = useTableCollection(/* Your collection parameters */);
+const state = useTableCollection<contacts.Contact>(/* Your collection parameters */);
 
 return (
-   contact.name,
+  <Table
+    state={state}
+    columns={[
+      {
+        title: 'Name',
+        width: '250px',
+        render: (contact) => contact.name,
       }
     ]}
     /* Additional Table props */

package/dist/docs/useTableGridSwitchCollection.md

@@ -18,10 +18,16 @@ import { useTableGridSwitchCollection } from '@wix/patterns';
 import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
 import { useTableGridSwitchCollection, TableGridSwitch } from '@wix/patterns';
 
-const state = useTableGridSwitchCollection({/* Your collection parameters */});
+const state = useTableGridSwitchCollection<Contact>({/* Your collection parameters */});
 
 return (
-   contact.name,
+  <TableGridSwitch
+    state={state}
+    columns={[
+      {
+        title: 'Name',
+        width: '250px',
+        render: (contact) => contact.name,
       }
     ]}
     /* Additional TableGridSwitch props */

package/dist/esm/components/CardContainer/CardContainer.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CardContainer2447633207";
+var _namespace_ = "CardContainer2064326202";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CardContainer2447633207__root" };
+export var classes = { "root": "CardContainer2064326202__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CmsFieldManagement/CmsFieldForm.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CmsFieldForm2298218345";
+var _namespace_ = "CmsFieldForm3961332529";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CmsFieldForm2298218345__root", "fullBleedDivider": "CmsFieldForm2298218345__fullBleedDivider" };
+export var classes = { "root": "CmsFieldForm3961332529__root", "fullBleedDivider": "CmsFieldForm3961332529__fullBleedDivider" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CmsFieldManagement/CmsFieldModal.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CmsFieldModal4037089959";
+var _namespace_ = "CmsFieldModal2847950882";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CmsFieldModal4037089959__root", "modal": "CmsFieldModal4037089959__modal" };
+export var classes = { "root": "CmsFieldModal2847950882__root", "modal": "CmsFieldModal2847950882__modal" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
-var _namespace_ = "ValidationAndDefaultsSection2505763082";
+var _namespace_ = "ValidationAndDefaultsSection2004729239";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "ValidationAndDefaultsSection2505763082__root", "accordionWrapper": "ValidationAndDefaultsSection2505763082__accordionWrapper" };
+export var classes = { "root": "ValidationAndDefaultsSection2004729239__root", "accordionWrapper": "ValidationAndDefaultsSection2004729239__accordionWrapper" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};