@wix/patterns 1.461.0 → 1.462.0

package/dist/docs/NestedTable.md

@@ -110,6 +110,8 @@ For example:
 
 ```ts
 import {
+  Filter,
+  OffsetQuery,
   createNestedTableSingleEntityLevels,
   createNestedTableLevel,
   useNestedTable,
@@ -127,7 +129,7 @@ useNestedTable({
         filters: {
           parentId: stringsArrayFilter(),
         },
-        fetchData: (query) => {
+        fetchData: (query: OffsetQuery<{ parentId: Filter<string[]> }>) => {
           const parentId = query.filters.parentId?.[0];
           return queryCategories({
             filter: {
@@ -154,7 +156,7 @@ useNestedTable({
       parentKey: () => undefined,
       createCollection: () => {
         const collection = createCollection({
-          fetchData: (query) => {
+          fetchData: (query: OffsetQuery) => {
             return queryCountries();
           },
         });
@@ -171,7 +173,7 @@ useNestedTable({
           filters: {
             countryId: stringsArrayFilter(),
           },
-          fetchData: (query) => {
+          fetchData: (query: OffsetQuery<{ countryId: Filter<string[]> }>) => {
             const { countryId } = query.filters;
             return queryStates({
               filter: {
@@ -194,7 +196,7 @@ useNestedTable({
           filters: {
             stateId: stringsArrayFilter(),
           },
-          fetchData: (query) => {
+          fetchData: (query: OffsetQuery<{ stateId: Filter<string[]> }>) => {
             const { stateId } = query.filters;
             return queryCities({
               filter: {

package/dist/docs/NumberRangeFilter.md

@@ -70,7 +70,13 @@ The component displays error messages in the following scenarios:
 ## Complete Example
 
 ```typescript
-import { NumberRangeFilter, numberRangeFilter } from '@wix/patterns';
+import {
+  Filter,
+  OffsetQuery,
+  RangeItem,
+  NumberRangeFilter,
+  numberRangeFilter,
+} from '@wix/patterns';
 import { useCollection } from '@wix/patterns';
 
 function ProductFilters() {
@@ -92,7 +98,9 @@ function ProductFilters() {
     filters: {
       price: priceFilter,
     },
-    fetchData: async (query) => {
+    fetchData: async (
+      query: OffsetQuery<{ price: Filter<RangeItem<number>> }>,
+    ) => {
       const { filters } = query;
       // Access price range via filters.price
       return fetchProducts(filters);

package/dist/docs/OperatorFilterPicker.md

@@ -53,6 +53,8 @@ import React from 'react';
 import { CollectionPage } from '@wix/patterns/page';
 import {
   operatorFilter,
+  OffsetQuery,
+  OperatorFilterState,
   FilterOperator,
   OperatorFilterPicker,
   transformOperatorFilterToWQL,
@@ -95,7 +97,12 @@ function operatorFilterWithTableExample() {
     filters: {
       name: nameFilter,
     },
-    fetchData: async ({ limit, offset, search, filters }) => {
+    fetchData: async ({
+      limit,
+      offset,
+      search,
+      filters,
+    }: OffsetQuery<{ name: OperatorFilterState<string> }>) => {
       const nameFilters = filters.name
         ? transformOperatorFilterToWQL('name', filters.name)
         : [];
@@ -112,7 +119,9 @@ function operatorFilterWithTableExample() {
             cursorPaging: { limit, offset },
           },
         }),
-      )) as { data: { contacts: Contact[]; pagingMetadata: { total: number } } };
+      )) as {
+        data: { contacts: Contact[]; pagingMetadata: { total: number } };
+      };
 
       return {
         items: response?.data?.contacts || [],
@@ -156,7 +165,9 @@ function operatorFilterWithTableExample() {
                   title: 'Created',
                   render: (contact) =>
                     contact.createdDate
-                      ? new window.Date(contact.createdDate).toLocaleDateString()
+                      ? new window.Date(
+                          contact.createdDate,
+                        ).toLocaleDateString()
                       : '',
                 },
               ]}

package/dist/docs/SettingsPage.Card.md

@@ -213,14 +213,16 @@ import { SettingsPage } from '@wix/patterns/page';
 ### Composition
 
 ```tsx
+import { Card } from '@wix/design-system';
+
 <SettingsPage state={state}>
   <SettingsPage.Header title={{ text: "Settings" }} />
   <SettingsPage.Content>
     <SettingsPage.MainContent>
       <SettingsPage.Card>  {/* ← this component */}
-        <SettingsPage.Card.Content>
+        <Card.Content>  {/* from @wix/design-system */}
           {/* form fields */}
-        </SettingsPage.Card.Content>
+        </Card.Content>
       </SettingsPage.Card>
     </SettingsPage.MainContent>
   </SettingsPage.Content>

package/dist/docs/SingleSelectFilter/custom-render-items.tsx

@@ -3,6 +3,7 @@ import {
   idNameArrayFilter,
   SingleSelectFilter,
   useFilterCollection,
+  CursorQuery,
 } from '@wix/patterns';
 import { useHttpClient } from '@wix/yoshi-flow-bm';
 import { Cell, Layout } from '@wix/design-system';
@@ -20,7 +21,7 @@ function CustomRenderItem() {
   const collection = useFilterCollection(filter, {
     queryName: 'SingleSelectFilter-CustomRenderItem',
     paginationMode: 'cursor',
-    fetchData: (query) => {
+    fetchData: (query: CursorQuery) => {
       const { limit, cursor, search } = query;
       return httpClient
         .request<{ total: number; items: User[]; cursor?: string }>({

package/dist/docs/SingleSelectFilter/empty-state.tsx

@@ -17,7 +17,7 @@ function SingleSelectFilterEmptyState() {
   const collection = useFilterCollection<User>(filter, {
     queryName: 'SingleSelectFilter-EmptyState',
     fetchData: async () => {
-      return { items: [], total: 0 };
+      return { items: [] as User[], total: 0 };
     },
     limit: 50,
     filters: {},

package/dist/docs/SingleSelectFilter/sections.tsx

@@ -3,6 +3,7 @@ import {
   idNameArrayFilter,
   SingleSelectFilter,
   useFilterCollection,
+  CursorQuery,
 } from '@wix/patterns';
 import { useHttpClient } from '@wix/yoshi-flow-bm';
 import { Cell, Layout } from '@wix/design-system';
@@ -20,7 +21,7 @@ function SingleSelectFilterSections() {
   const collection = useFilterCollection(filter, {
     queryName: 'SingleSelectFilter-Sections-Users',
     paginationMode: 'cursor',
-    fetchData: (query) => {
+    fetchData: (query: CursorQuery) => {
       const { limit, cursor, search } = query;
       return httpClient
         .request<{ total: number; items: User[]; cursor?: string }>({

package/dist/docs/SingleSelectFilter/server-data.tsx

@@ -3,6 +3,7 @@ import {
   idNameArrayFilter,
   SingleSelectFilter,
   useFilterCollection,
+  CursorQuery,
 } from '@wix/patterns';
 import { useHttpClient } from '@wix/yoshi-flow-bm';
 import { Cell, Layout } from '@wix/design-system';
@@ -20,7 +21,7 @@ function SingleSelectFilterServerData() {
   const collection = useFilterCollection(filter, {
     queryName: 'SingleSelectFilter-ServerData',
     paginationMode: 'cursor',
-    fetchData: (query) => {
+    fetchData: (query: CursorQuery) => {
       const { limit, cursor, search } = query;
       return httpClient
         .request<{ total: number; items: User[]; cursor?: string }>({

package/dist/docs/Table/filters.tsx

@@ -11,6 +11,7 @@ import {
   Filter,
   useStaticListFilterCollection,
   useTableCollection,
+  OffsetQuery,
 } from '@wix/patterns';
 import { Avatar } from '@wix/design-system';
 import { contacts } from '@wix/crm';
@@ -30,7 +31,7 @@ type ContactsFilters = {
 function ToolbarFiltersTable() {
   const tableState = useTableCollection<contacts.Contact, ContactsFilters>({
     queryName: 'contacts-ToolbarFilters',
-    fetchData: (query) => {
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
       const { limit, offset, search, filters } = query;
 
       let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

package/dist/docs/Table Sections/demo.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import { CollectionPage } from '@wix/patterns/page';
-import { Table, TableSections, useTableCollection } from '@wix/patterns';
+import {
+  Table,
+  TableSections,
+  useTableCollection,
+  OffsetQuery,
+} from '@wix/patterns';
 import { contacts } from '@wix/crm';
 import { Avatar } from '@wix/design-system';
 import { AddSmall } from '@wix/wix-ui-icons-common';
@@ -28,7 +33,7 @@ function TableSectionsExample() {
     queryName: 'TableSections',
     paginationMode: 'offset',
     itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchData: (query) => {
+    fetchData: (query: OffsetQuery) => {
       const { limit, offset, search } = query;
 
       let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

package/dist/docs/Table Sections/with-badge.tsx

@@ -5,6 +5,7 @@ import {
   Table,
   TableSections,
   useTableCollection,
+  OffsetQuery,
 } from '@wix/patterns';
 import { contacts } from '@wix/crm';
 import { Avatar } from '@wix/design-system';
@@ -39,7 +40,7 @@ function TableSectionsExample() {
     queryName: 'TableSections',
     paginationMode: 'offset',
     itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchData: (query) => {
+    fetchData: (query: OffsetQuery) => {
       const { limit, offset, search } = query;
 
       let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

package/dist/docs/Table Sections/with-collapse.tsx

@@ -1,11 +1,18 @@
 import React from 'react';
 import { CollectionPage } from '@wix/patterns/page';
-import { Table, TableSections, useTableCollection } from '@wix/patterns';
+import {
+  Table,
+  TableSections,
+  useTableCollection,
+  OffsetQuery,
+} from '@wix/patterns';
 import { contacts } from '@wix/crm';
 import { Avatar } from '@wix/design-system';
 
 function TableSectionsExample() {
-  const [collapsedSections, setCollapsedSections] = React.useState<Set<string>>(new Set());
+  const [collapsedSections, setCollapsedSections] = React.useState<Set<string>>(
+    new Set(),
+  );
 
   const groupBy = React.useCallback(
     (contact: contacts.Contact) => contact.info?.jobTitle ?? 'Unknown',
@@ -25,7 +32,7 @@ function TableSectionsExample() {
     queryName: 'TableSections',
     paginationMode: 'offset',
     itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchData: (query) => {
+    fetchData: (query: OffsetQuery) => {
       const { limit, offset, search } = query;
 
       let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
@@ -57,7 +64,9 @@ function TableSectionsExample() {
             events: {
               onToggle: (sectionId, isCollapsed) => {
                 if (isCollapsed) {
-                  setCollapsedSections(new Set(collapsedSections.add(sectionId)));
+                  setCollapsedSections(
+                    new Set(collapsedSections.add(sectionId)),
+                  );
                 } else {
                   collapsedSections.delete(sectionId);
                   setCollapsedSections(new Set(collapsedSections));

package/dist/docs/Table Sections/with-summary.tsx

@@ -5,6 +5,7 @@ import {
   Table,
   TableSections,
   useTableCollection,
+  OffsetQuery,
 } from '@wix/patterns';
 import { contacts } from '@wix/crm';
 import { Avatar } from '@wix/design-system';
@@ -50,7 +51,7 @@ function TableSectionsExample() {
     queryName: 'TableSections',
     paginationMode: 'offset',
     itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchData: (query) => {
+    fetchData: (query: OffsetQuery) => {
       const { limit, offset, search } = query;
 
       let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

package/dist/docs/TableTopNotification/nested-table.tsx

@@ -12,6 +12,7 @@ import {
   stringsArrayFilter,
   useWixPatternsContainerOverrides,
   TableTopNotification,
+  OffsetQuery,
 } from '@wix/patterns';
 import { useHttpClient } from '@wix/yoshi-flow-bm';
 
@@ -39,7 +40,7 @@ function NestedTableWithTopNotification() {
           filters: {
             parentId: stringsArrayFilter(),
           },
-          fetchData: (query) => {
+          fetchData: (query: OffsetQuery<ContactFilters>) => {
             const { limit, offset, search, filters } = query;
             return httpClient
               .request(

package/dist/docs/Working with Cache.md

@@ -48,17 +48,17 @@ Consider having a BM page with a Wix Patterns table:
 
 ###### _src/pages/contacts-list-page/index.tsx_
 
-```jsx
+```tsx
 import React from 'react';
 import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
-import { useCollection } from '@wix/patterns';
+import { OffsetQuery, useCollection } from '@wix/patterns';
 import { useHttpClient } from '@wix/yoshi-flow-bm';
 
 export default () => {
   const httpClient = useHttpClient();
   const collection = useCollection({
     queryName: 'wix.contacts.v4.contact',
-    fetchData: (query) => {
+    fetchData: (query: OffsetQuery) => {
       const { limit, offset, search, filters } = query;
       return httpClient.request(queryContacts(/* ... */)).then((res) => {
         /* ... */

package/dist/docs/idNameArrayFilter.md

@@ -146,7 +146,9 @@ The response from the `/fake-entity` endpoint includes the `id` and `name` of th
 
 ```tsx
 import React from 'react';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
 import {
+  OffsetQuery,
   idNameArrayFilter,
   MultiSelectCollectionFilter,
   useFilterCollection,
@@ -156,14 +158,14 @@ import { Cell, Layout } from '@wix/design-system';
 function defaultFields() {
   const [filter] = React.useState(() => idNameArrayFilter());
 
-  const fakeEntityHttpClient = useFakeEntityHttpClient();
+  const fakeEntityHttpClient = useHttpClient();
 
   const collection = useFilterCollection(filter, {
     queryName: 'fakeEntity-filter',
-    fetchData: (query) => {
+    fetchData: (query: OffsetQuery) => {
       const { limit, offset } = query;
       return fakeEntityHttpClient
-        .request({
+        .request<{ items: { id: string; name: string }[]; total: number }>({
           url: '/api/fake-entity',
           params: { limit, offset },
         })

package/dist/docs/index.json

@@ -1,4 +1,8 @@
 {
+  "ActionSubItem": {
+    "file": "ActionSubItem.md",
+    "category": "Common/Types"
+  },
   "AI Assistant": {
     "file": "AI Assistant.md",
     "category": "Integrations/AI Assistant",
@@ -6,10 +10,6 @@
       "createAiAssistant"
     ]
   },
-  "ActionSubItem": {
-    "file": "ActionSubItem.md",
-    "category": "Common/Types"
-  },
   "AutoCompleteFilter": {
     "file": "AutoCompleteFilter.md",
     "category": "Features/Filter/Components",
@@ -29,16 +29,16 @@
     "category": "Features/Display/Empty States",
     "bundle": "components/CollectionNoResultsState.d.ts"
   },
-  "CollectionOptimisticActions": {
-    "file": "CollectionOptimisticActions.md",
-    "category": "Features/Actions/Updates",
-    "bundle": "components/CollectionOptimisticActions.d.ts"
-  },
   "CollectionPage": {
     "file": "CollectionPage.md",
     "category": "Base Components/Pages/Collection Page",
     "bundle": "components/CollectionPage.d.ts"
   },
+  "CollectionOptimisticActions": {
+    "file": "CollectionOptimisticActions.md",
+    "category": "Features/Actions/Updates",
+    "bundle": "components/CollectionOptimisticActions.d.ts"
+  },
   "CollectionPage.Content": {
     "file": "CollectionPage.Content.md",
     "category": "Base Components/Pages/Collection Page"
@@ -60,10 +60,6 @@
     "category": "Features/Filter/Components",
     "bundle": "components/CollectionSearch.d.ts"
   },
-  "CollectionToolbar": {
-    "file": "CollectionToolbar.md",
-    "category": "Common/Components"
-  },
   "CollectionSubToolbar": {
     "file": "CollectionSubToolbar.md",
     "category": "Common/Components"
@@ -76,10 +72,18 @@
       "CollectionToolbarFilters"
     ]
   },
+  "CollectionToolbar": {
+    "file": "CollectionToolbar.md",
+    "category": "Common/Components"
+  },
   "CustomColumns": {
     "file": "CustomColumns.md",
     "category": "Features/Display/Custom Columns"
   },
+  "CustomFieldsWidget": {
+    "file": "CustomFieldsWidget.md",
+    "category": "Features/Enrich/Data Extension/Components"
+  },
   "CustomFieldType": {
     "file": "CustomFieldType.md",
     "category": "Features/Enrich/Custom Field Types"
@@ -88,10 +92,6 @@
     "file": "CustomFieldsViewWidget.md",
     "category": "Features/Enrich/Data Extension/Components"
   },
-  "CustomFieldsWidget": {
-    "file": "CustomFieldsWidget.md",
-    "category": "Features/Enrich/Data Extension/Components"
-  },
   "DateRangeFilter": {
     "file": "DateRangeFilter.Components.md",
     "category": "Features/Filter/Components",
@@ -106,16 +106,12 @@
     "file": "EntityPage.AdditionalContent.md",
     "category": "Base Components/Pages/Entity Page"
   },
-  "EntityPage.Content": {
-    "file": "EntityPage.Content.md",
-    "category": "Base Components/Pages/Entity Page"
-  },
   "EntityPage.Card": {
     "file": "EntityPage.Card.md",
     "category": "Base Components/Pages/Entity Page"
   },
-  "EntityPage.Slots": {
-    "file": "EntityPage.Slots.md",
+  "EntityPage.Content": {
+    "file": "EntityPage.Content.md",
     "category": "Base Components/Pages/Entity Page"
   },
   "EntityPage.Header": {
@@ -126,6 +122,10 @@
     "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",
@@ -247,6 +247,11 @@
     "file": "RequestId.md",
     "category": "Features/Display/Errors/RequestId"
   },
+  "SecondaryActions": {
+    "file": "SecondaryActions.md",
+    "category": "Features/Actions/SecondaryActions",
+    "bundle": "components/SecondaryActions.d.ts"
+  },
   "PatternsReactRoute": {
     "file": "PatternsReactRoute.md",
     "category": "Base Components/Pages/Router",
@@ -262,11 +267,6 @@
     "category": "Base Components/Pages/Router/Hooks/usePatternsNavigate",
     "bundle": "hooks/usePatternsNavigate.d.ts"
   },
-  "SecondaryActions": {
-    "file": "SecondaryActions.md",
-    "category": "Features/Actions/SecondaryActions",
-    "bundle": "components/SecondaryActions.d.ts"
-  },
   "SettingsPage": {
     "file": "SettingsPage.md",
     "category": "Base Components/Pages/Settings Page",
@@ -459,22 +459,22 @@
     "category": "Common/Types",
     "bundle": "types/BulkActionModalRenderPropParams.d.ts"
   },
-  "Category": {
-    "file": "Category.md",
-    "category": "Common/Types"
-  },
   "BulkSelectState": {
     "file": "BulkSelectState.md",
     "category": "Common/State"
   },
-  "CollectionSection": {
-    "file": "CollectionSection.md",
+  "Category": {
+    "file": "Category.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",
@@ -489,6 +489,11 @@
     "category": "Features/Filter/Factories",
     "bundle": "functions/customFilter.d.ts"
   },
+  "DataResultRaw": {
+    "file": "DataResultRaw.md",
+    "category": "Common/Types",
+    "bundle": "types/DataResultRaw.d.ts"
+  },
   "Data Extension Overview": {
     "file": "Data Extension Overview.md",
     "category": "Features/Enrich/Data Extension"
@@ -505,10 +510,6 @@
     "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/operatorFilter.md

@@ -42,6 +42,8 @@ import React from 'react';
 import { CollectionPage } from '@wix/patterns/page';
 import {
   operatorFilter,
+  OffsetQuery,
+  OperatorFilterState,
   FilterOperator,
   OperatorFilterPicker,
   transformOperatorFilterToWQL,
@@ -84,7 +86,12 @@ function operatorFilterWithTableExample() {
     filters: {
       name: nameFilter,
     },
-    fetchData: async ({ limit, offset, search, filters }) => {
+    fetchData: async ({
+      limit,
+      offset,
+      search,
+      filters,
+    }: OffsetQuery<{ name: OperatorFilterState<string> }>) => {
       const nameFilters = filters.name
         ? transformOperatorFilterToWQL('name', filters.name)
         : [];
@@ -101,7 +108,9 @@ function operatorFilterWithTableExample() {
             cursorPaging: { limit, offset },
           },
         }),
-      )) as { data: { contacts: Contact[]; pagingMetadata: { total: number } } };
+      )) as {
+        data: { contacts: Contact[]; pagingMetadata: { total: number } };
+      };
 
       return {
         items: response?.data?.contacts || [],
@@ -145,7 +154,9 @@ function operatorFilterWithTableExample() {
                   title: 'Created',
                   render: (contact) =>
                     contact.createdDate
-                      ? new window.Date(contact.createdDate).toLocaleDateString()
+                      ? new window.Date(
+                          contact.createdDate,
+                        ).toLocaleDateString()
                       : '',
                 },
               ]}

package/dist/docs/useNestedTable.md

@@ -29,6 +29,7 @@ import {
   useCreateCollection,
   Filter,
   stringsArrayFilter,
+  OffsetQuery,
 } from '@wix/patterns';
 import { CollectionPage } from '@wix/patterns/page';
 import { useHttpClient } from '@wix/yoshi-flow-bm';
@@ -56,7 +57,7 @@ function SingleEntityNestedTable() {
           filters: {
             parentId: stringsArrayFilter(),
           },
-          fetchData: (query) => {
+          fetchData: (query: OffsetQuery<ContactFilters>) => {
             const { limit, offset, search, filters } = query;
             return httpClient
               .request(