@wix/patterns 1.461.0 → 1.463.0

package/dist/cjs/version.js.map

@@ -1 +1 @@
-{"version":3,"names":["version","exports"],"sources":["../../src/version.ts"],"sourcesContent":["export const version = 'patterns@1.461.0';\n"],"mappings":";;;;AAAO,MAAMA,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,kBAAkB","ignoreList":[]}
+{"version":3,"names":["version","exports"],"sources":["../../src/version.ts"],"sourcesContent":["export const version = 'patterns@1.463.0';\n"],"mappings":";;;;AAAO,MAAMA,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,kBAAkB","ignoreList":[]}

package/dist/docs/AI Assistant.md

@@ -78,6 +78,7 @@ import {
   useTableCollection,
   PrimaryActions,
   createAiAssistant,
+  OffsetQuery,
 } from '@wix/patterns';
 import { CollectionPage } from '@wix/patterns/page';
 import { contacts } from '@wix/crm';
@@ -91,7 +92,7 @@ function AiAssistant() {
     queryName: 'contacts-AiAssistant',
     itemName: (contact) =>
       `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-    fetchData: (query) => {
+    fetchData: (query: OffsetQuery) => {
       const { limit, offset, search, filters } = query;
 
       let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

package/dist/docs/ActionCellProps.md

@@ -2,6 +2,8 @@
 
 **Category:** Features/Actions/Action Cell
 
+Paths written as `dist/…` below are relative to the `@wix/patterns` package root — the directory holding its `package.json`.
+
 ## API
 
 ### Disabling the secondary actions menu
@@ -68,12 +70,7 @@ function DisabledSecondaryActions() {
 
 ### Props
 
-Read `dist/dts-bundle/types/ActionCellProps.d.ts` for `ActionCellProps`'s full prop list, with types and
-descriptions. They are not repeated here, so the bundle is the single source of truth.
-
-A one-line stub in that file is an answer, not a truncation: an empty body with a
-"Produced by" note means you get the value from that hook or factory rather than
-constructing it. `dist/dts-bundle/index.json` maps every name to its bundle path.
+Read `dist/dts-bundle/types/ActionCellProps.d.ts` for `ActionCellProps`'s props.
 
 ## BI
 

package/dist/docs/AutoCompleteFilter.md

@@ -2,6 +2,8 @@
 
 **Category:** Features/Filter/Components
 
+Paths written as `dist/…` below are relative to the `@wix/patterns` package root — the directory holding its `package.json`.
+
 ## Design
 
 ```tsx
@@ -16,7 +18,10 @@ import { AutoCompleteFilter } from '@wix/patterns';
 
 ```tsx
 import React from 'react';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+import { Layout, Cell } from '@wix/design-system';
 import {
+  OffsetQuery,
   AutoCompleteFilter,
   idNameArrayFilter,
   useFilterCollection,
@@ -24,16 +29,16 @@ import {
 import { Observer } from 'mobx-react-lite';
 
 function BasicAutoCompleteFilter() {
-  const fakeEntityHttpClient = useFakeEntityHttpClient();
+  const fakeEntityHttpClient = useHttpClient();
 
   const [filter] = React.useState(() => idNameArrayFilter());
 
   const collection = useFilterCollection(filter, {
     queryName: 'BasicAutoCompleteFilter',
-    fetchData: (query) => {
+    fetchData: (query: OffsetQuery) => {
       const { limit, offset, search, filters } = query;
       return fakeEntityHttpClient
-        .request({
+        .request<{ items: { id: string; name: string }[]; total: number }>({
           url: '/api/fake-entity',
           params: { limit, offset, search, filters },
         })
@@ -69,23 +74,26 @@ function BasicAutoCompleteFilter() {
 
 ```tsx
 import React from 'react';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+import { Layout, Cell } from '@wix/design-system';
 import {
+  OffsetQuery,
   AutoCompleteFilter,
   idNameArrayFilter,
   useFilterCollection,
 } from '@wix/patterns';
 
 function BasicAutoCompleteFilter() {
-  const fakeEntityHttpClient = useFakeEntityHttpClient();
+  const fakeEntityHttpClient = useHttpClient();
 
   const [filter] = React.useState(() => idNameArrayFilter());
 
   const collection = useFilterCollection(filter, {
     queryName: 'BasicAutoCompleteFilter',
-    fetchData: (query) => {
+    fetchData: (query: OffsetQuery) => {
       const { limit, offset, search, filters } = query;
       return fakeEntityHttpClient
-        .request({
+        .request<{ items: { id: string; name: string }[]; total: number }>({
           url: '/api/fake-entity',
           params: { limit, offset, search, filters },
         })
@@ -165,10 +173,5 @@ function ItemsSelectionFilterExample() {
 
 ### Props
 
-Read `dist/dts-bundle/components/AutoCompleteFilter.d.ts` for `AutoCompleteFilter`'s full prop list, with types and
-descriptions. They are not repeated here, so the bundle is the single source of truth.
-
-A one-line stub in that file is an answer, not a truncation: an empty body with a
-"Produced by" note means you get the value from that hook or factory rather than
-constructing it. `dist/dts-bundle/index.json` maps every name to its bundle path.
+Read `dist/dts-bundle/components/AutoCompleteFilter.d.ts` for `AutoCompleteFilter`'s props. Shared shapes cut to a one-line stub there hold 9 of them: `dist/dts-bundle/types/FilterProps.d.ts` (9).
 

package/dist/docs/BulkActionModalRenderProp.md

@@ -2,6 +2,8 @@
 
 **Category:** Common/Types
 
+Paths written as `dist/…` below are relative to the `@wix/patterns` package root — the directory holding its `package.json`.
+
 ## API
 
 ### Overview
@@ -10,10 +12,5 @@ A render-prop type for the `bulkActionModal` prop on collection components (`Tab
 
 ### Props
 
-Read `dist/dts-bundle/types/BulkActionModalRenderPropParams.d.ts` for `BulkActionModalRenderProp`'s full prop list, with types and
-descriptions. They are not repeated here, so the bundle is the single source of truth.
-
-A one-line stub in that file is an answer, not a truncation: an empty body with a
-"Produced by" note means you get the value from that hook or factory rather than
-constructing it. `dist/dts-bundle/index.json` maps every name to its bundle path.
+Read `dist/dts-bundle/types/BulkActionModalRenderPropParams.d.ts` for `BulkActionModalRenderProp`'s props.
 

package/dist/docs/CollectionEmptyState.md

@@ -2,6 +2,8 @@
 
 **Category:** Features/Display/Empty States
 
+Paths written as `dist/…` below are relative to the `@wix/patterns` package root — the directory holding its `package.json`.
+
 ## Design
 
 ### Description
@@ -33,10 +35,5 @@ Example code: read `dist/docs/CollectionEmptyState/passive-empty-state.tsx`
 
 ### Props
 
-Read `dist/dts-bundle/components/CollectionEmptyState.d.ts` for `CollectionEmptyState`'s full prop list, with types and
-descriptions. They are not repeated here, so the bundle is the single source of truth.
-
-A one-line stub in that file is an answer, not a truncation: an empty body with a
-"Produced by" note means you get the value from that hook or factory rather than
-constructing it. `dist/dts-bundle/index.json` maps every name to its bundle path.
+Read `dist/dts-bundle/components/CollectionEmptyState.d.ts` for `CollectionEmptyState`'s props.
 

package/dist/docs/CollectionNoResultsState.md

@@ -2,6 +2,8 @@
 
 **Category:** Features/Display/Empty States
 
+Paths written as `dist/…` below are relative to the `@wix/patterns` package root — the directory holding its `package.json`.
+
 ## Design
 
 ### Description
@@ -102,10 +104,5 @@ function FilteredEmptyState() {
 
 ### Props
 
-Read `dist/dts-bundle/components/CollectionNoResultsState.d.ts` for `CollectionNoResultsState`'s full prop list, with types and
-descriptions. They are not repeated here, so the bundle is the single source of truth.
-
-A one-line stub in that file is an answer, not a truncation: an empty body with a
-"Produced by" note means you get the value from that hook or factory rather than
-constructing it. `dist/dts-bundle/index.json` maps every name to its bundle path.
+Read `dist/dts-bundle/components/CollectionNoResultsState.d.ts` for `CollectionNoResultsState`'s props.
 

package/dist/docs/CollectionOptimisticActions.md

@@ -2,6 +2,8 @@
 
 **Category:** Features/Actions/Updates
 
+Paths written as `dist/…` below are relative to the `@wix/patterns` package root — the directory holding its `package.json`.
+
 ## Design
 
 ### Description
@@ -140,10 +142,5 @@ The params contains the following part of these props:
 
 ### Props
 
-Read `dist/dts-bundle/components/CollectionOptimisticActions.d.ts` for `CollectionOptimisticActions`'s full prop list, with types and
-descriptions. They are not repeated here, so the bundle is the single source of truth.
-
-A one-line stub in that file is an answer, not a truncation: an empty body with a
-"Produced by" note means you get the value from that hook or factory rather than
-constructing it. `dist/dts-bundle/index.json` maps every name to its bundle path.
+Read `dist/dts-bundle/components/CollectionOptimisticActions.d.ts` for `CollectionOptimisticActions`'s props.
 

package/dist/docs/CollectionPage.Content.md

@@ -38,7 +38,7 @@ Showing table as the content of the page
 ```tsx
 import { Avatar } from '@wix/design-system';
 import React from 'react';
-import { Table, useTableCollection } from '@wix/patterns';
+import { Table, useTableCollection, OffsetQuery } from '@wix/patterns';
 import { CollectionPage } from '@wix/patterns/page';
 import { contacts } from '@wix/crm';
 
@@ -47,7 +47,7 @@ function WithoutTotal() {
     queryName: 'contacts-withTable',
     itemName: (contact) =>
       `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-    fetchData: (query) => {
+    fetchData: (query: OffsetQuery) => {
       const { limit, offset, search, filters } = query;
 
       let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
@@ -106,7 +106,7 @@ Showing grid as the content of the page
 ```tsx
 import React from 'react';
 import { CollectionPage } from '@wix/patterns/page';
-import { Grid, useGridCollection } from '@wix/patterns';
+import { Grid, useGridCollection, OffsetQuery } from '@wix/patterns';
 import { contacts } from '@wix/crm';
 
 function WithGrid() {
@@ -115,7 +115,7 @@ function WithGrid() {
     paginationMode: 'offset',
     itemName: (contact) =>
       `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-    fetchData: (query) => {
+    fetchData: (query: OffsetQuery) => {
       const { limit, offset, search, filters } = query;
 
       let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

package/dist/docs/CollectionPage.Header/full.tsx

@@ -0,0 +1,112 @@
+import { Avatar, Breadcrumbs } from '@wix/design-system';
+import React from 'react';
+import {
+  Table,
+  useTableCollection,
+  MoreActions,
+  PrimaryActions,
+  OffsetQuery,
+} from '@wix/patterns';
+import { CollectionPage } from '@wix/patterns/page';
+import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function Full() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-full',
+    itemName: (contact) =>
+      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header
+        title={{ text: 'Contacts' }}
+        subtitle={{ text: 'My Contacts' }}
+        breadcrumbs={
+          <Breadcrumbs
+            activeId="2"
+            items={[
+              { id: '1', value: 'First crumb' },
+              { id: '2', value: 'Second crumb' },
+            ]}
+          />
+        }
+        primaryAction={
+          <PrimaryActions
+            label="Do something"
+            onClick={() => console.log('I do something')}
+          />
+        }
+        moreActions={
+          <MoreActions
+            items={[
+              [
+                {
+                  biName: 'action-1',
+                  text: 'Do Action #1',
+                  prefixIcon: <InvoiceSmall />,
+                  onClick: () => {
+                    console.log('Action #1');
+                  },
+                },
+                {
+                  biName: 'action-2',
+                  text: 'Another Action #2',
+                  prefixIcon: <VisibleSmall />,
+                  onClick: () => {
+                    console.log('Action #2');
+                  },
+                },
+              ],
+            ]}
+            containerId="6dcbba57-c740-477c-a747-30094cf54ca1"
+          />
+        }
+      />
+      <CollectionPage.Content>
+        <Table
+          state={state}
+          columns={[
+            {
+              id: 'avatar',
+              name: 'Avatar',
+              title: '',
+              width: '50px',
+              hideable: false,
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              id: 'name',
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+          ]}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/CollectionPage.Header/with-badges.tsx

@@ -0,0 +1,70 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { Table, useTableCollection, OffsetQuery } from '@wix/patterns';
+import { CollectionPage } from '@wix/patterns/page';
+import { contacts } from '@wix/crm';
+
+function WithBadges() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-WithBadges',
+    itemName: (contact) =>
+      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header
+        title={{
+          text: 'Contacts',
+          badges: [
+            { text: 'Beta', skin: 'success' },
+            { text: 'Sandbox', skin: 'warning' },
+          ],
+        }}
+      />
+      <CollectionPage.Content>
+        <Table
+          state={state}
+          columns={[
+            {
+              id: 'avatar',
+              name: 'Avatar',
+              title: '',
+              width: '50px',
+              hideable: false,
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              id: 'name',
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+          ]}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/CollectionPage.Header/without-total.tsx

@@ -0,0 +1,62 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { Table, useTableCollection, OffsetQuery } from '@wix/patterns';
+import { CollectionPage } from '@wix/patterns/page';
+import { contacts } from '@wix/crm';
+
+function WithoutTotal() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-DisabledCustomColumns',
+    itemName: (contact) =>
+      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts', hideTotal: true }} />
+      <CollectionPage.Content>
+        <Table
+          state={state}
+          columns={[
+            {
+              id: 'avatar',
+              name: 'Avatar',
+              title: '',
+              width: '50px',
+              hideable: false,
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              id: 'name',
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+          ]}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}