@wix/patterns 1.366.0 → 1.369.0

package/dist/docs/More Actions.md

@@ -0,0 +1,1015 @@
+# More Actions
+
+**Category:** Features/Actions/ More Actions
+
+## Design
+
+### Description
+
+Displays a menu of more actions on a page component.
+
+#### Usage
+
+1. Define a [`CollectionPage`](./?path=/story/base-components-pages-collection-page--collectionpage) or [`EntityPage`](./?path=/story/base-components-pages-entity-page--entitypage) component.
+1. Pass this `MoreActions` component to the `moreActions` prop on the page header component.
+1. Within the component, define an array of [`MoreActionsItem`](./?path=/story/common-types--moreactionsitem) objects to display.
+
+> **Note:** Make sure that your page is nested under a [`WixPatternsProvider`](./?path=/story/base-components-providers--wixpatternsprovider).
+
+
+```tsx
+import { MoreActions } from '@wix/patterns';
+```
+
+### Collection Page
+
+This example displays a menu at the collection page level by passing a `MoreActions` component to the `moreActions` prop of the [`CollectionPage.Header`](./?path=/story/base-components-pages-collection-page--collectionpage-header).
+
+```tsx
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import {
+  Table,
+  useTableCollection,
+  MoreActions,
+  PrimaryActions,
+} from '@wix/patterns';
+import { CollectionPage } from '@wix/patterns/page';
+import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function CollectionPageDemo() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-CollectionPageDemo',
+    itemName: (contact) =>
+      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+    fetchData: (query) => {
+      const { limit, offset, search } = 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' }}
+        primaryAction={
+          <PrimaryActions
+            label="Do something"
+            onClick={() => console.log('I do something')}
+          />
+        }
+        moreActions={
+          <MoreActions
+            items={[
+              {
+                text: 'Do Action #1',
+                prefixIcon: <InvoiceSmall />,
+                onClick: () => {
+                  console.log('Action #1');
+                },
+              },
+              {
+                text: 'Another Action #2',
+                prefixIcon: <VisibleSmall />,
+                onClick: () => {
+                  console.log('Action #2');
+                },
+              },
+            ]}
+          />
+        }
+      />
+      <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>
+  );
+}
+```
+
+### Collection Page
+
+With secondary actions MoreActions component will be displayed with icon only.
+
+```tsx
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import {
+  Table,
+  useTableCollection,
+  MoreActions,
+  PrimaryActions,
+  SecondaryActions,
+} from '@wix/patterns';
+import { CollectionPage } from '@wix/patterns/page';
+import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function CollectionPageWithSecondaryActions() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-CollectionPageWithSecondaryActions',
+    itemName: (contact) =>
+      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+    fetchData: (query) => {
+      const { limit, offset, search } = 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' }}
+        secondaryActions={
+          <SecondaryActions
+            label="Do something"
+            onClick={() => console.log('I do something')}
+          />
+        }
+        moreActions={
+          <MoreActions
+            items={[
+              {
+                text: 'Do Action #1',
+                prefixIcon: <InvoiceSmall />,
+                onClick: () => {
+                  console.log('Action #1');
+                },
+              },
+              {
+                text: 'Another Action #2',
+                prefixIcon: <VisibleSmall />,
+                onClick: () => {
+                  console.log('Action #2');
+                },
+              },
+            ]}
+          />
+        }
+      />
+      <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>
+  );
+}
+```
+
+### More actions with a divider
+
+Create groups of More Action buttons with a divider between each group. Each member of a group is defined in the same array. The groups arrays are included in the `items` array.
+
+```tsx
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import {
+  Table,
+  useTableCollection,
+  MoreActions,
+  PrimaryActions,
+} from '@wix/patterns';
+import { CollectionPage } from '@wix/patterns/page';
+import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function Toolbar() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-Toolbar',
+    itemName: (contact) =>
+      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+    fetchData: (query) => {
+      const { limit, offset, search } = 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' }}
+        primaryAction={
+          <PrimaryActions
+            label="Do something"
+            onClick={() => console.log('I do something')}
+          />
+        }
+        moreActions={
+          <MoreActions
+            items={[
+              [
+                {
+                  text: 'Do Action #1',
+                  prefixIcon: <InvoiceSmall />,
+                  onClick: () => {
+                    console.log('Action #1');
+                  },
+                },
+                {
+                  text: 'Another Action #2',
+                  prefixIcon: <VisibleSmall />,
+                  onClick: () => {
+                    console.log('Action #2');
+                  },
+                },
+              ],
+              [
+                {
+                  text: 'Move',
+                  prefixIcon: <InvoiceSmall />,
+                  onClick: () => {
+                    console.log('Move #1');
+                  },
+                },
+                {
+                  text: 'Duplicate',
+                  prefixIcon: <VisibleSmall />,
+                  onClick: () => {
+                    console.log('Duplicate #2');
+                  },
+                },
+              ],
+            ]}
+          />
+        }
+      />
+      <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>
+  );
+}
+```
+
+### More actions in the toolbar
+
+More Actions can be in the toolbar. Pass the `MoreActions` component to the `moreActions` prop of Table/Grid etc.
+
+```tsx
+import React from 'react';
+import { Page } from '@wix/design-system';
+import {
+  Table,
+  PageWrapper,
+  useTableCollection,
+  OffsetQuery,
+  MoreActions,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
+
+function Toolbar() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-Toolbar',
+    paginationMode: 'offset',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search } = 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,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header />
+        <Page.Content>
+          <Table
+            state={state}
+            moreActions={
+              <MoreActions
+                items={[
+                  [
+                    {
+                      text: 'Do Action #1',
+                      prefixIcon: <InvoiceSmall />,
+                      onClick: () => {
+                        console.log('Action #1');
+                      },
+                    },
+                    {
+                      text: 'Another Action #2',
+                      prefixIcon: <VisibleSmall />,
+                      onClick: () => {
+                        console.log('Action #2');
+                      },
+                    },
+                  ],
+                  [
+                    {
+                      text: 'Move',
+                      prefixIcon: <InvoiceSmall />,
+                      onClick: () => {
+                        console.log('Move #1');
+                      },
+                    },
+                    {
+                      text: 'Duplicate',
+                      prefixIcon: <VisibleSmall />,
+                      onClick: () => {
+                        console.log('Duplicate #2');
+                      },
+                    },
+                  ],
+                ]}
+              />
+            }
+            columns={[
+              {
+                id: 'name',
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}
+```
+
+### Explore related apps
+
+Explore related apps with the `MoreActions` component. pass the explore apps modal props and we will take care of the rest.
+
+```tsx
+import { Avatar, CustomModalLayout, Modal } from '@wix/design-system';
+import React from 'react';
+import {
+  Table,
+  useTableCollection,
+  MoreActions,
+  PrimaryActions,
+} from '@wix/patterns';
+import { CollectionPage } from '@wix/patterns/page';
+import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+import { ModuleRegistry } from 'react-module-container';
+
+function ExploreApps() {
+  React.useState(() => {
+    // Mock explore apps modal, cause its unsupported in storybook env
+    ModuleRegistry.registerComponent(
+      'in-context-apps-modal',
+      () =>
+        ({ isOpen, title, subTitle, onClose }: any) => {
+          return (
+            <Modal
+              isOpen={isOpen}
+              onRequestClose={onClose}
+              shouldDisplayCloseButton
+            >
+              <CustomModalLayout title={title} subtitle={subTitle}>
+                <img
+                  src="https://wixmp-63fb97685840e8c34a920619.wixmp.com/storybook/assets/appsmodalfake.png"
+                  alt="fake gallery"
+                />
+              </CustomModalLayout>
+            </Modal>
+          );
+        },
+    );
+  });
+
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-ExploreApps',
+    itemName: (contact) =>
+      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+    fetchData: (query) => {
+      const { limit, offset, search } = 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' }}
+        primaryAction={
+          <PrimaryActions
+            label="Do something"
+            onClick={() => console.log('I do something')}
+          />
+        }
+        moreActions={
+          <MoreActions
+            items={[
+              [
+                {
+                  text: 'Do Action #1',
+                  prefixIcon: <InvoiceSmall />,
+                  onClick: () => {
+                    console.log('Action #1');
+                  },
+                },
+                {
+                  text: 'Another Action #2',
+                  prefixIcon: <VisibleSmall />,
+                  onClick: () => {
+                    console.log('Action #2');
+                  },
+                },
+              ],
+            ]}
+            exploreAppsModalProps={{
+              title: 'Explore Apps',
+              subtitle: 'Find the right app for your business',
+              tag: '7d4d7891-2995-4bb9-8d2b-457aa7dca3f2',
+            }}
+          />
+        }
+      />
+      <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>
+  );
+}
+```
+
+### Integrate with Extension
+
+Use the `containerId` prop to extend the more actions items with items from [Slots and Plugins](./?path=/story/features-enrich-slots-and-plugins--slots-and-plugins). 
+
+```tsx
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import {
+  Table,
+  useTableCollection,
+  MoreActions,
+  PrimaryActions,
+} from '@wix/patterns';
+import { CollectionPage } from '@wix/patterns/page';
+import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function Extensions() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-Extensions',
+    itemName: (contact) =>
+      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+    fetchData: (query) => {
+      const { limit, offset, search } = 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' }}
+        primaryAction={
+          <PrimaryActions
+            label="Do something"
+            onClick={() => console.log('I do something')}
+          />
+        }
+        moreActions={
+          <MoreActions
+            containerId="cd910877-1bb2-445e-822a-aa04a342c2f5"
+            items={[
+              [
+                {
+                  text: 'Do Action #1',
+                  prefixIcon: <InvoiceSmall />,
+                  onClick: () => {
+                    console.log('Action #1');
+                  },
+                },
+                {
+                  text: 'Another Action #2',
+                  prefixIcon: <VisibleSmall />,
+                  onClick: () => {
+                    console.log('Action #2');
+                  },
+                },
+              ],
+            ]}
+          />
+        }
+      />
+      <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>
+  );
+}
+```
+
+### Featured More Actions
+
+Features like Data Extension and Tags automatically add their actions to the More Actions menu.
+
+```tsx
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import {
+  Table,
+  useTableCollection,
+  PrimaryActions,
+  DataExtension,
+  Tags,
+} from '@wix/patterns';
+import { CollectionPage } from '@wix/patterns/page';
+import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function FeaturedMoreActions() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-CollectionPageDemo',
+    itemName: (contact) =>
+      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+    fetchData: (query) => {
+      const { limit, offset, search } = 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' }}
+        primaryAction={
+          <PrimaryActions
+            label="Do something"
+            onClick={() => console.log('I do something')}
+          />
+        }
+      />
+      <CollectionPage.Content>
+        <Table
+          tags={
+            <Tags entityTypeName="Contact" bulkUpdateTags={async () => {}} />
+          }
+          dataExtension={<DataExtension />}
+          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>
+  );
+}
+```
+
+### Featured More Actions - Opt Out
+
+Opt out of the Featured More Actions by passing `disableDefaultPageAction` to the relevant plugin props
+
+```tsx
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import {
+  Table,
+  useTableCollection,
+  PrimaryActions,
+  DataExtension,
+  Tags,
+} from '@wix/patterns';
+import { CollectionPage } from '@wix/patterns/page';
+import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function FeaturedMoreActions() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-CollectionPageDemo',
+    itemName: (contact) =>
+      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+    fetchData: (query) => {
+      const { limit, offset, search } = 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' }}
+        primaryAction={
+          <PrimaryActions
+            label="Do something"
+            onClick={() => console.log('I do something')}
+          />
+        }
+      />
+      <CollectionPage.Content>
+        <Table
+          tags={
+            <Tags
+              entityTypeName="Contact"
+              bulkUpdateTags={async () => {}}
+              disableDefaultPageAction
+            />
+          }
+          dataExtension={<DataExtension disableDefaultPageAction />}
+          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>
+  );
+}
+```
+
+### Featured More Actions - Custom Position
+
+Customize the position of the Featured More Actions by specifying them in the `items` prop.
+
+```tsx
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import {
+  DataExtension,
+  MoreActions,
+  PrimaryActions,
+  Table,
+  Tags,
+  useTableCollection,
+} from '@wix/patterns';
+import { CollectionPage } from '@wix/patterns/page';
+import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function FeaturedMoreActions() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-CollectionPageDemo',
+    itemName: (contact) =>
+      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+    fetchData: (query) => {
+      const { limit, offset, search } = 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' }}
+        primaryAction={
+          <PrimaryActions
+            label="Do something"
+            onClick={() => console.log('I do something')}
+          />
+        }
+        moreActions={
+          <MoreActions
+            items={[
+              [
+                {
+                  text: 'Do Action #1',
+                  prefixIcon: <InvoiceSmall />,
+                  onClick: () => {
+                    console.log('Action #1');
+                  },
+                },
+                DataExtension.manageCustomFieldsPageAction,
+                {
+                  text: 'Another Action #2',
+                  prefixIcon: <VisibleSmall />,
+                  onClick: () => {
+                    console.log('Action #2');
+                  },
+                },
+              ],
+              [
+                {
+                  text: 'Do Action #3',
+                  prefixIcon: <InvoiceSmall />,
+                  onClick: () => {
+                    console.log('Action #3');
+                  },
+                },
+                Tags.manageTagsPageAction,
+              ],
+            ]}
+          />
+        }
+      />
+      <CollectionPage.Content>
+        <Table
+          tags={
+            <Tags entityTypeName="Contact" bulkUpdateTags={async () => {}} />
+          }
+          dataExtension={<DataExtension />}
+          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>
+  );
+}
+```
+
+## API
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `items` | `MoreActionsPropItem[] \| MoreActionsPropItem[][]` | No | - | Actions items that appear in the `MoreActions` popover menu. \ Actions can be grouped by using an array of arrays. \ Each sub-array represents a different group within the popover, \ and a divider will be rendered after each sub-array to separate the groups. \| [MoreActionsItem](./?path=/story/common-types--moreactionsitem)[][] |
+| `containerId` | `string` | No | - | An id of the container defined in the installed on a site application that contains TPA's actions. |
+| `biAdditionalInfo` | `string` | No | - | Additional info for cairoPageCtaClicked BI event. |
+