@wix/patterns 1.459.0 → 1.461.0

package/dist/docs/TableGridSwitchFolders/with-tags.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  TagsFolders,
+  MultiBulkActionToolbar,
+  useCollection,
+  TableGridSwitchFolders,
+  useTableGridSwitchFolders,
+  CustomColumns,
+  OffsetQuery,
+} from '@wix/patterns';
+import { Tags as TagsType } from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+function WithTags() {
+  const httpClient = useHttpClient();
+
+  const collection = useCollection<Contact>({
+    queryName: 'tableitems',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    itemKey: (item) => item.id as string,
+    itemName: (item) => item.name as string,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then((res) => {
+          const {
+            data: { contacts = [], pagingMetadata },
+          } = res;
+          return {
+            items: contacts,
+            total: pagingMetadata?.total,
+          };
+        });
+    },
+    fetchErrorMessage: ({ err }) => String(err),
+  });
+
+  // Note: This is only for demo/mock purposes.
+  // In real usage, you should use your actual API method to fetch folders
+  const foldersCollection = useCollection<Contact>({
+    queryName: 'tablefolders',
+    paginationMode: 'offset',
+    itemName: (item) => item.name as string,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit: 2, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then((res) => {
+          const {
+            data: { contacts = [], pagingMetadata },
+          } = res;
+          return {
+            items: contacts.map((contact) => ({
+              ...contact,
+              id: `folder-${contact.id}`,
+            })),
+            total: 2,
+          };
+        });
+    },
+    fetchErrorMessage: ({ err }) => String(err),
+  });
+
+  const componentState = useTableGridSwitchFolders({
+    items: collection,
+    folders: foldersCollection,
+  });
+
+  const handleBulkUpdateTags = ({
+    entityIds,
+    assignTags,
+    unassignTags,
+  }: {
+    entityIds: string[];
+    assignTags: TagsType;
+    unassignTags: TagsType;
+  }) => {
+    // your code to update the server
+    return Promise.resolve();
+  };
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <TableGridSwitchFolders
+          state={componentState}
+          tags={
+            <TagsFolders
+              entityTypeName="Contact"
+              bulkUpdateTags={handleBulkUpdateTags}
+            />
+          }
+          customColumns={<CustomColumns />}
+          columns={[
+            {
+              id: 'name',
+              hideable: false,
+              title: 'Name',
+              render: (contact) => contact.name,
+              renderFolder: (folder) => folder.name,
+              width: '250px',
+            },
+          ]}
+          bulkActionToolbar={() => <MultiBulkActionToolbar />}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/TableGridSwitchFolders.md

@@ -14,111 +14,7 @@ import { TableGridSwitchFolders, useTableGridSwitchFolders } from '@wix/patterns
 
 ### Demo
 
-```tsx
-import React from 'react';
-import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
-import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
-import {
-  PageWrapper,
-  OffsetQuery,
-  TableGridSwitchFolders,
-  useCollection,
-  useTableGridSwitchFolders,
-} from '@wix/patterns';
-import { useHttpClient } from '@wix/yoshi-flow-bm';
-import { Page } from '@wix/design-system';
-
-function Basic() {
-  const httpClient = useHttpClient();
-
-  const collection = useCollection<Contact>({
-    queryName: 'tablegridswitchfolders',
-    itemKey: (item) => item.id as string,
-    itemName: (item) => item.name as string,
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-      return httpClient
-        .request(
-          queryContacts({
-            query: { paging: { limit, offset }, filter: filters },
-            search,
-          }),
-        )
-        .then((res) => {
-          const {
-            data: { contacts = [], pagingMetadata },
-          } = res;
-          return {
-            items: contacts,
-            total: pagingMetadata?.total,
-          };
-        });
-    },
-    fetchErrorMessage: ({ err }) => String(err),
-  });
-
-  const foldersCollection = useCollection<Contact>({
-    queryName: 'folders',
-    paginationMode: 'offset',
-    itemName: (item) => item.name as string,
-    itemKey: (item) => `folder_${item.id}` as string,
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-      return httpClient
-        .request(
-          queryContacts({
-            query: { paging: { limit: 20, offset }, filter: filters },
-            search,
-          }),
-        )
-        .then((res) => {
-          const {
-            data: { contacts = [], pagingMetadata },
-          } = res;
-          return {
-            items: contacts,
-            total: 20,
-          };
-        });
-    },
-    fetchErrorMessage: ({ err }) => String(err),
-  });
-
-  const componentState = useTableGridSwitchFolders({
-    items: collection,
-    folders: foldersCollection,
-  });
-
-  return (
-    <PageWrapper>
-      <Page height="400px">
-        <Page.Header title="Folders and items" />
-        <Page.Content>
-          <TableGridSwitchFolders
-            state={componentState}
-            preset="title"
-            folderPreset="title"
-            columns={[
-              {
-                title: 'Name',
-                width: '250px',
-                render: (contact) => contact.name,
-                renderFolder: (folder) => folder.name,
-              },
-              {
-                title: 'Last Seen',
-                width: '250px',
-                render: (contact) => contact.lastSeen?.toLocaleString(),
-                renderFolder: (folder) => folder.lastSeen?.toLocaleString(),
-              },
-            ]}
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/TableGridSwitchFolders/demo.tsx`
 
 ---
 
@@ -128,111 +24,7 @@ function Basic() {
 
 Here's an example of how you can render two collections, including folders and items, within the table grid.
 
-```tsx
-import React from 'react';
-import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
-import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
-import {
-  PageWrapper,
-  OffsetQuery,
-  TableGridSwitchFolders,
-  useCollection,
-  useTableGridSwitchFolders,
-} from '@wix/patterns';
-import { useHttpClient } from '@wix/yoshi-flow-bm';
-import { Page } from '@wix/design-system';
-
-function Basic() {
-  const httpClient = useHttpClient();
-
-  const collection = useCollection<Contact>({
-    queryName: 'tablegridswitchfolders',
-    itemKey: (item) => item.id as string,
-    itemName: (item) => item.name as string,
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-      return httpClient
-        .request(
-          queryContacts({
-            query: { paging: { limit, offset }, filter: filters },
-            search,
-          }),
-        )
-        .then((res) => {
-          const {
-            data: { contacts = [], pagingMetadata },
-          } = res;
-          return {
-            items: contacts,
-            total: pagingMetadata?.total,
-          };
-        });
-    },
-    fetchErrorMessage: ({ err }) => String(err),
-  });
-
-  const foldersCollection = useCollection<Contact>({
-    queryName: 'folders',
-    paginationMode: 'offset',
-    itemName: (item) => item.name as string,
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-      return httpClient
-        .request(
-          queryContacts({
-            query: { paging: { limit: 20, offset }, filter: filters },
-            search,
-          }),
-        )
-        .then((res) => {
-          const {
-            data: { contacts = [], pagingMetadata },
-          } = res;
-          return {
-            items: contacts,
-            total: 20,
-          };
-        });
-    },
-    fetchErrorMessage: ({ err }) => String(err),
-  });
-
-  const componentState = useTableGridSwitchFolders({
-    items: collection,
-    folders: foldersCollection,
-  });
-
-  return (
-    <PageWrapper>
-      <Page height="400px">
-        <Page.Header title="Folders and items" />
-
-        <Page.Content>
-          <TableGridSwitchFolders
-            state={componentState}
-            preset="title"
-            folderPreset="title"
-            columns={[
-              {
-                title: 'Name',
-                width: '250px',
-                render: (contact) => contact.name,
-                renderFolder: (folder) => folder.name,
-              },
-              {
-                title: 'Last Seen',
-                width: '250px',
-                render: (contact) => contact.lastSeen?.toLocaleString(),
-                renderFolder: (folder) => folder.lastSeen?.toLocaleString(),
-              },
-            ]}
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/TableGridSwitchFolders/tablegridswitchfolders.tsx`
 
 ---
 
@@ -240,132 +32,7 @@ function Basic() {
 
 This example shows a `TableGridSwitchFolders` component with tags. Note that you can only assign tags to table items and not to folders. [See Tags docs](./?path=/story/features-enrich-tags--tags-overview).
 
-```tsx
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  TagsFolders,
-  MultiBulkActionToolbar,
-  useCollection,
-  TableGridSwitchFolders,
-  useTableGridSwitchFolders,
-  CustomColumns,
-  OffsetQuery,
-} from '@wix/patterns';
-import { Tags as TagsType } from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
-import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
-import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
-import { useHttpClient } from '@wix/yoshi-flow-bm';
-
-function WithTags() {
-  const httpClient = useHttpClient();
-
-  const collection = useCollection<Contact>({
-    queryName: 'tableitems',
-    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
-    itemKey: (item) => item.id as string,
-    itemName: (item) => item.name as string,
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-      return httpClient
-        .request(
-          queryContacts({
-            query: { paging: { limit, offset }, filter: filters },
-            search,
-          }),
-        )
-        .then((res) => {
-          const {
-            data: { contacts = [], pagingMetadata },
-          } = res;
-          return {
-            items: contacts,
-            total: pagingMetadata?.total,
-          };
-        });
-    },
-    fetchErrorMessage: ({ err }) => String(err),
-  });
-
-  // Note: This is only for demo/mock purposes.
-  // In real usage, you should use your actual API method to fetch folders
-  const foldersCollection = useCollection<Contact>({
-    queryName: 'tablefolders',
-    paginationMode: 'offset',
-    itemName: (item) => item.name as string,
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-      return httpClient
-        .request(
-          queryContacts({
-            query: { paging: { limit: 2, offset }, filter: filters },
-            search,
-          }),
-        )
-        .then((res) => {
-          const {
-            data: { contacts = [], pagingMetadata },
-          } = res;
-          return {
-            items: contacts.map((contact) => ({
-              ...contact,
-              id: `folder-${contact.id}`,
-            })),
-            total: 2,
-          };
-        });
-    },
-    fetchErrorMessage: ({ err }) => String(err),
-  });
-
-  const componentState = useTableGridSwitchFolders({
-    items: collection,
-    folders: foldersCollection,
-  });
-
-  const handleBulkUpdateTags = ({
-    entityIds,
-    assignTags,
-    unassignTags,
-  }: {
-    entityIds: string[];
-    assignTags: TagsType;
-    unassignTags: TagsType;
-  }) => {
-    // your code to update the server
-    return Promise.resolve();
-  };
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <TableGridSwitchFolders
-          state={componentState}
-          tags={
-            <TagsFolders
-              entityTypeName="Contact"
-              bulkUpdateTags={handleBulkUpdateTags}
-            />
-          }
-          customColumns={<CustomColumns />}
-          columns={[
-            {
-              id: 'name',
-              hideable: false,
-              title: 'Name',
-              render: (contact) => contact.name,
-              renderFolder: (folder) => folder.name,
-              width: '250px',
-            },
-          ]}
-          bulkActionToolbar={() => <MultiBulkActionToolbar />}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/TableGridSwitchFolders/with-tags.tsx`
 
 ## API
 

package/dist/docs/TableGridSwitchState.md

@@ -14,10 +14,10 @@
 
 ### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `tableState` | `TableState<T, F>` | Yes | - | [TableState](./?path=/story/common-state--tablestate) |
-| `gridState` | `GridState<T, F>` | Yes | - | [GridState](./?path=/story/common-state--gridstate) |
-| `collection` | `CollectionState<T, F>` | Yes | - | Underlying [CollectionState](./?path=/story/common-state--collectionstate) |
-| `toolbar` | `ToolbarCollectionState<T, F>` | Yes | - | Underlying [ToolbarCollectionState](./?path=/story/common-state--toolbarcollectionstate) |
+Read `dist/dts-bundle/types/TableGridSwitchState.d.ts` for `TableGridSwitchState`'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.
 

package/dist/docs/TableState.md

@@ -14,11 +14,10 @@
 
 ### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `collection` | `CollectionState<T, F>` | Yes | - | Underlying [CollectionState](./?path=/story/common-state--collectionstate) instance |
-| `toolbar` | `ToolbarCollectionState<T, F>` | Yes | - | Underlying [ToolbarCollectionState](./?path=/story/common-state--toolbarcollectionstate) instance |
-| `onAddItemActionComplete` | `(items: T[]) => void` | Yes | - | Reset active filters & sorting and adds new items to the collection. @param items - new items to add to the collection |
-| `visibleColumns` | `{ id: string; }[]` | Yes | - | Visible columns as selected via [CustomColumns](./?path=/story/features-display--customcolumns) |
-| `sort` | `(columnId: string, params: { forceDirection?: SortOrder \| undefined; }) => void` | Yes | - | Sorts the collection by a specified column and optional sort direction. |
+Read `dist/dts-bundle/types/TableState.d.ts` for `TableState`'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.
 

package/dist/docs/TableTopNotification/base.tsx

@@ -0,0 +1,92 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  Table,
+  OffsetQuery,
+  TableTopNotification,
+  useTableCollection,
+} from '@wix/patterns';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+function TableNotification() {
+  const httpClient = useHttpClient();
+
+  const state = useTableCollection<Contact>({
+    queryName: 'contacts-Basic',
+    itemKey: (item) => item.id as string,
+    itemName: (item) => item.name as string,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then((res) => {
+          const {
+            data: { contacts = [], pagingMetadata },
+          } = res;
+          return {
+            items: contacts,
+            total: pagingMetadata?.total,
+          };
+        });
+    },
+    fetchErrorMessage: ({ err }) => String(err),
+  });
+  const collection = state.collection;
+  React.useEffect(() => {
+    window.setTimeout(() => {
+      // some event from server that should show the notification
+      collection.topNotification.text = 'Important message from server';
+    }, 5000);
+  }, []);
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          state={state}
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar name={contact.name} imgProps={{ src: contact.image }} />
+              ),
+            },
+            {
+              title: 'Name',
+              width: '250px',
+              render: (contact) => contact.name,
+            },
+            {
+              title: 'Last Seen',
+              render: (contact) => contact.lastSeen?.toLocaleString(),
+            },
+          ]}
+          topNotification={
+            <TableTopNotification
+              showCloseButton
+              onClose={() => {
+                // console.log('onClose', collection.topNotification);
+              }}
+              onAfterOpen={() => {
+                // console.log('onAfterOpen', collection.topNotification);
+              }}
+              onAfterClose={() => {
+                // console.log('onAfterClose', collection.topNotification);
+              }}
+            />
+          }
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}