@wix/patterns 1.458.0 → 1.460.0

package/dist/docs/More Actions.md

@@ -25,983 +25,55 @@ import { MoreActions } from '@wix/patterns';
 
 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>
-  );
-}
-```
+Example code: read `dist/docs/More Actions/collection-page.tsx`
 
 ### 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>
-  );
-}
-```
+Example code: read `dist/docs/More Actions/collection-page-2.tsx`
 
 ### 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>
-  );
-}
-```
+Example code: read `dist/docs/More Actions/more-actions-with-a-divider.tsx`
 
 ### 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>
-  );
-}
-```
+Example code: read `dist/docs/More Actions/more-actions-in-the-toolbar.tsx`
 
 ### 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>
-  );
-}
-```
+Example code: read `dist/docs/More Actions/explore-related-apps.tsx`
 
 ### 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>
-  );
-}
-```
+Example code: read `dist/docs/More Actions/integrate-with-extension.tsx`
 
 ### 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>
-  );
-}
-```
+Example code: read `dist/docs/More Actions/featured-more-actions.tsx`
 
 ### 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>
-  );
-}
-```
+Example code: read `dist/docs/More Actions/featured-more-actions-opt-out.tsx`
 
 ### 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>
-  );
-}
-```
+Example code: read `dist/docs/More Actions/featured-more-actions-custom-position.tsx`
 
 ## API