@wix/patterns 1.458.0 → 1.460.0

package/dist/docs/MultiBulkActionToolbar.md

@@ -26,1072 +26,37 @@ import { MultiBulkActionToolbar } from '@wix/patterns';
 
 Basic bulk action.
 
-```tsx
-import {
-  Avatar,
-  Card,
-  CustomModalLayout,
-  Modal,
-  Page,
-  Text,
-} from '@wix/design-system';
-import React from 'react';
-import {
-  MultiBulkActionToolbar,
-  Filter,
-  Table,
-  OffsetQuery,
-  stringsArrayFilter,
-  useTableCollection,
-  ToolbarTitle,
-} from '@wix/patterns';
-import { Edit, Download, ChangeOrder, Block } from '@wix/wix-ui-icons-common';
-import { contacts } from '@wix/crm';
-
-type ContactsFilters = {
-  level: Filter<string[]>;
-};
-
-function BulkActions() {
-
-  const state = useTableCollection<contacts.Contact, ContactsFilters>({
-    queryName: 'MultiBulkActionToolbar-BulkActions',
-    fetchData: (query: OffsetQuery<ContactsFilters>) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      if (filters.level) {
-        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchErrorMessage: () => 'Error fetching contacts',
-    filters: {
-      level: stringsArrayFilter({
-        initialValue: ['Beginner'],
-      }),
-    },
-  });
-  const collection = state.collection;
-  React.useEffect(() => {
-    collection.bulkSelect.selectAll();
-  }, []);
-
-  return (
-    <Page height="400px">
-      <Page.Header title="Contacts" />
-      <Page.Content>
-        <Table
-          state={state}
-          title={<ToolbarTitle title="Contacts" showTotal />}
-          columns={[
-            {
-              title: '',
-              width: '50px',
-              render: (contact) => (
-                <Avatar
-                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
-                  imgProps={{ src: contact.info?.picture?.image }}
-                />
-              ),
-            },
-            {
-              title: 'Name',
-              width: '250px',
-              render: (contact) =>
-                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-            },
-            {
-              title: 'Level',
-              render: (contact) => contact.info?.jobTitle,
-            },
-            {
-              title: 'Last Activity',
-              render: (contact) =>
-                contact.lastActivity?.activityDate?.toLocaleString(),
-            },
-          ]}
-          bulkActionModal={({
-            isModalOpen,
-            selectedValues,
-            closeModal,
-            query,
-          }) => (
-            <Modal isOpen={isModalOpen}>
-              <CustomModalLayout
-                height={300}
-                dataHook="bulk-action-custom-modal-layout"
-                title="Edit Contacts"
-                primaryButtonOnClick={closeModal}
-                primaryButtonText="save"
-                secondaryButtonOnClick={closeModal}
-                secondaryButtonText="cancel"
-              >
-                {selectedValues.map((value, index) => (
-                  <Card>
-                    <Text
-                      key={value._id}
-                      dataHook={`selected-value-text-${index}`}
-                    >
-                      Page: {query.page}; Name:{' '}
-                      {`${value.info?.name?.first} ${value.info?.name?.last}`}
-                    </Text>
-                  </Card>
-                ))}
-              </CustomModalLayout>
-            </Modal>
-          )}
-          bulkActionToolbar={({ selectedValues, openModal }) => {
-            const disabled = selectedValues.length > 4;
-            return (
-              <MultiBulkActionToolbar
-                primaryActionItems={[
-                  {
-                    dataHook: 'edit-button',
-                    onClick: openModal,
-                    label: 'Edit',
-                    prefixIcon: <Edit />,
-                  },
-                  {
-                    dataHook: 'download-button',
-                    onClick: openModal,
-                    label: 'Download',
-                    prefixIcon: <Download />,
-                    tooltip: disabled
-                      ? 'Downloading is supported for up to 10 items'
-                      : undefined,
-                    disabled,
-                  },
-                ]}
-                secondaryActionItems={[
-                  {
-                    dataHook: 'block-button',
-                    onClick: openModal,
-                    label: 'Block',
-                    prefixIcon: <Block />,
-                  },
-                  {
-                    dataHook: 'change-button',
-                    onClick: openModal,
-                    label: 'Change',
-                    disabled,
-                    prefixIcon: <ChangeOrder />,
-                  },
-                ]}
-              />
-            );
-          }}
-        />
-      </Page.Content>
-    </Page>
-  );
-}
-```
+Example code: read `dist/docs/MultiBulkActionToolbar/bulk-action.tsx`
 
 ### Popover menu
 
 A popoever menu for the primary action.
 
-```tsx
-import { Avatar, Page } from '@wix/design-system';
-import React from 'react';
-import {
-  MultiBulkActionToolbar,
-  Filter,
-  Table,
-  PageWrapper,
-  OffsetQuery,
-  stringsArrayFilter,
-  useTableCollection,
-  ToolbarTitle,
-} from '@wix/patterns';
-import { Visible, Hidden } from '@wix/wix-ui-icons-common';
-import { contacts } from '@wix/crm';
-
-type ContactsFilters = {
-  level: Filter<string[]>;
-};
-
-function MultiBulkActionsPopoverMenu() {
-
-  const state = useTableCollection<contacts.Contact, ContactsFilters>({
-    queryName: 'MultiBulkActionToolbar-PopoverMenu',
-    fetchData: (query: OffsetQuery<ContactsFilters>) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      if (filters.level) {
-        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchErrorMessage: () => 'Error fetching contacts',
-    filters: {
-      level: stringsArrayFilter({
-        initialValue: ['Beginner'],
-      }),
-    },
-  });
-  const collection = state.collection;
-  React.useEffect(() => {
-    collection.bulkSelect.selectAll();
-  }, []);
-
-  const options = [
-    { label: 'Visible', icon: <Visible /> },
-    { label: 'Hidden', icon: <Hidden /> },
-  ];
-
-  const [selectedOption, setSelectedOption] = React.useState({
-    label: 'Set Visibility',
-    icon: <Visible />,
-  });
-
-  return (
-    <PageWrapper>
-      <Page height="400px">
-        <Page.Header title="Contacts" />
-        <Page.Content>
-          <Table
-            state={state}
-            title={<ToolbarTitle title="Contacts" showTotal />}
-            columns={[
-              {
-                title: '',
-                width: '50px',
-                render: (contact) => (
-                  <Avatar
-                    name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
-                    imgProps={{ src: contact.info?.picture?.image }}
-                  />
-                ),
-              },
-              {
-                title: 'Name',
-                width: '250px',
-                render: (contact) =>
-                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-              },
-              {
-                title: 'Level',
-                render: (contact) => contact.info?.jobTitle,
-              },
-              {
-                title: 'Last Activity',
-                render: (contact) =>
-                  contact.lastActivity?.activityDate?.toLocaleString(),
-              },
-            ]}
-            bulkActionToolbar={({ selectedValues, openModal }) => {
-              return (
-                <MultiBulkActionToolbar
-                  primaryActionItems={[
-                    {
-                      dataHook: 'set-visibility',
-                      label: selectedOption.label,
-                      prefixIcon: selectedOption.icon,
-                      subItems: options.map((el, i) => ({
-                        prefixIcon: el.icon,
-                        label: el.label,
-                        onClick: () => setSelectedOption(el),
-                      })),
-                    },
-                  ]}
-                />
-              );
-            }}
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/MultiBulkActionToolbar/popover-menu.tsx`
 
 ### Basic secondary action
 
 Popoever menu for primary and secondary actions.
 
-```tsx
-import { Avatar, CustomModalLayout, Modal, Page } from '@wix/design-system';
-import React from 'react';
-import {
-  MultiBulkActionToolbar,
-  Filter,
-  Table,
-  PageWrapper,
-  OffsetQuery,
-  stringsArrayFilter,
-  useTableCollection,
-  ToolbarTitle,
-} from '@wix/patterns';
-import {
-  Visible,
-  Download,
-  Block,
-  ChangeOrder,
-} from '@wix/wix-ui-icons-common';
-import { contacts } from '@wix/crm';
-
-type ContactsFilters = {
-  level: Filter<string[]>;
-};
-
-function MultiBulkActionToolbarSecondaryActions() {
-
-  const state = useTableCollection<contacts.Contact, ContactsFilters>({
-    queryName: 'MultiBulkActionToolbar-SecondaryActions',
-    fetchData: (query: OffsetQuery<ContactsFilters>) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      if (filters.level) {
-        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchErrorMessage: () => 'Error fetching contacts',
-    filters: {
-      level: stringsArrayFilter({
-        initialValue: ['Beginner'],
-      }),
-    },
-  });
-  const collection = state.collection;
-  React.useEffect(() => {
-    collection.bulkSelect.selectAll();
-  }, []);
-
-  return (
-    <PageWrapper>
-      <Page height="400px">
-        <Page.Content>
-          <Table
-            state={state}
-            title={<ToolbarTitle title="Contacts" showTotal />}
-            columns={[
-              {
-                title: '',
-                width: '50px',
-                render: (contact) => (
-                  <Avatar
-                    name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
-                    imgProps={{ src: contact.info?.picture?.image }}
-                  />
-                ),
-              },
-              {
-                title: 'Name',
-                width: '250px',
-                render: (contact) =>
-                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-              },
-              {
-                title: 'Level',
-                render: (contact) => contact.info?.jobTitle,
-              },
-              {
-                title: 'Last Activity',
-                render: (contact) =>
-                  contact.lastActivity?.activityDate?.toLocaleString(),
-              },
-            ]}
-            bulkActionModal={({
-              isModalOpen,
-              allSelected,
-              selectedValues,
-              uncheckedValues,
-              closeModal,
-              query,
-            }) => (
-              <Modal isOpen={isModalOpen}>
-                <CustomModalLayout
-                  height={300}
-                  dataHook="bulk-action-custom-modal-layout"
-                  title="Edit Product"
-                  primaryButtonOnClick={closeModal}
-                  primaryButtonText="Save"
-                  secondaryButtonOnClick={closeModal}
-                  secondaryButtonText="Cancel"
-                >
-                  <pre>
-                    {JSON.stringify(
-                      {
-                        allSelected,
-                        selectedValues: selectedValues.length,
-                        uncheckedValues: uncheckedValues.length,
-                        query: {
-                          page: query.page,
-                        },
-                      },
-                      null,
-                      2,
-                    )}
-                  </pre>
-                </CustomModalLayout>
-              </Modal>
-            )}
-            bulkActionToolbar={({ selectedValues, openModal }) => {
-              return (
-                <MultiBulkActionToolbar
-                  primaryActionItems={[
-                    {
-                      dataHook: 'primary-action-1',
-                      label: 'Primary 1',
-                      prefixIcon: <Visible />,
-                      subItems: [
-                        { label: 'option 1' },
-                        { label: 'option 2' },
-                        { label: 'option 3' },
-                      ],
-                    },
-                    {
-                      dataHook: 'primary-action-2',
-                      label: 'Primary 2',
-                      prefixIcon: <Download />,
-                      subItems: [
-                        { label: 'option 1' },
-                        { label: 'option 2' },
-                        { label: 'option 3' },
-                      ],
-                    },
-                  ]}
-                  secondaryActionItems={[
-                    {
-                      dataHook: 'secondary-action-1',
-                      onClick: openModal,
-                      label: 'Secondary 1',
-                      prefixIcon: <Block />,
-                    },
-                    {
-                      dataHook: 'secondary-action-2',
-                      onClick: openModal,
-                      disabled: true,
-                      label: 'Secondary 2',
-                      prefixIcon: <ChangeOrder />,
-                    },
-                  ]}
-                />
-              );
-            }}
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/MultiBulkActionToolbar/basic-secondary-action.tsx`
 
 ### Primary & Secondary actions with a divider
 
 Create groups of `primaryActionItems -> subItems` & `secondaryActionItems` 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,
-  Card,
-  CustomModalLayout,
-  Modal,
-  Page,
-  Text,
-} from '@wix/design-system';
-import React from 'react';
-import {
-  MultiBulkActionToolbar,
-  Filter,
-  Table,
-  OffsetQuery,
-  stringsArrayFilter,
-  useTableCollection,
-  ToolbarTitle,
-} from '@wix/patterns';
-import {
-  Edit,
-  Download,
-  ChangeOrder,
-  Block,
-  UploadExport,
-} from '@wix/wix-ui-icons-common/lazy';
-import { contacts } from '@wix/crm';
-
-type ContactsFilters = {
-  level: Filter<string[]>;
-};
-
-function BulkActionsWithDividers() {
-  const state = useTableCollection<contacts.Contact, ContactsFilters>({
-    queryName: 'MultiBulkActionToolbar-BulkActions',
-    fetchData: (query: OffsetQuery<ContactsFilters>) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      if (filters.level) {
-        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchErrorMessage: () => 'Error fetching contacts',
-    filters: {
-      level: stringsArrayFilter({
-        initialValue: ['Beginner'],
-      }),
-    },
-  });
-  const collection = state.collection;
-  React.useEffect(() => {
-    collection.bulkSelect.selectAll();
-  }, []);
-
-  return (
-    <Page height="400px">
-      <Page.Header title="Contacts" />
-      <Page.Content>
-        <Table
-          state={state}
-          title={<ToolbarTitle title="Contacts" showTotal />}
-          columns={[
-            {
-              title: '',
-              width: '50px',
-              render: (contact) => (
-                <Avatar
-                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
-                  imgProps={{ src: contact.info?.picture?.image }}
-                />
-              ),
-            },
-            {
-              title: 'Name',
-              width: '250px',
-              render: (contact) =>
-                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-            },
-            {
-              title: 'Level',
-              render: (contact) => contact.info?.jobTitle,
-            },
-            {
-              title: 'Last Activity',
-              render: (contact) =>
-                contact.lastActivity?.activityDate?.toLocaleString(),
-            },
-          ]}
-          bulkActionModal={({
-            isModalOpen,
-            selectedValues,
-            closeModal,
-            query,
-          }) => (
-            <Modal isOpen={isModalOpen}>
-              <CustomModalLayout
-                height={300}
-                dataHook="bulk-action-custom-modal-layout"
-                title="Edit Contacts"
-                primaryButtonOnClick={closeModal}
-                primaryButtonText="save"
-                secondaryButtonOnClick={closeModal}
-                secondaryButtonText="cancel"
-              >
-                {selectedValues.map((value, index) => (
-                  <Card>
-                    <Text
-                      key={value._id}
-                      dataHook={`selected-value-text-${index}`}
-                    >
-                      Page: {query.page}; Name:{' '}
-                      {`${value.info?.name?.first} ${value.info?.name?.last}`}
-                    </Text>
-                  </Card>
-                ))}
-              </CustomModalLayout>
-            </Modal>
-          )}
-          bulkActionToolbar={({ selectedValues, openModal }) => {
-            const disabled = selectedValues.length > 4;
-            return (
-              <MultiBulkActionToolbar
-                primaryActionItems={[
-                  {
-                    dataHook: 'delete-button',
-                    onClick: openModal,
-                    label: 'Delete Items',
-                    prefixIcon: <Block />,
-                    subItems: [
-                      [
-                        {
-                          dataHook: 'remove-button',
-                          label: 'Remove',
-                          onClick: openModal,
-                        },
-                        {
-                          dataHook: 'soft-delete-button',
-                          label: 'Soft Delete',
-                          onClick: openModal,
-                        },
-                      ],
-                      [
-                        {
-                          dataHook: 'archive-button',
-                          label: 'Archive',
-                          onClick: openModal,
-                        },
-                      ],
-                    ],
-                  },
-                  {
-                    dataHook: 'edit-button',
-                    onClick: openModal,
-                    label: 'Edit',
-                    prefixIcon: <Edit />,
-                  },
-                  {
-                    dataHook: 'download-button',
-                    onClick: openModal,
-                    label: 'Download',
-                    prefixIcon: <Download />,
-                    tooltip: disabled
-                      ? 'Downloading is supported for up to 10 items'
-                      : undefined,
-                    disabled,
-                  },
-                ]}
-                secondaryActionItems={[
-                  [
-                    {
-                      dataHook: 'block-button',
-                      onClick: openModal,
-                      label: 'Block',
-                      prefixIcon: <Block />,
-                    },
-                    {
-                      dataHook: 'change-button',
-                      onClick: openModal,
-                      label: 'Change',
-                      disabled,
-                      prefixIcon: <ChangeOrder />,
-                    },
-                  ],
-                  [
-                    {
-                      dataHook: 'download-button',
-                      onClick: openModal,
-                      label: 'Download',
-                      prefixIcon: <Download />,
-                    },
-                    {
-                      dataHook: 'export-button',
-                      onClick: openModal,
-                      label: 'Export',
-                      disabled,
-                      prefixIcon: <UploadExport />,
-                    },
-                  ],
-                ]}
-              />
-            );
-          }}
-        />
-      </Page.Content>
-    </Page>
-  );
-}
-```
+Example code: read `dist/docs/MultiBulkActionToolbar/primary-secondary-actions-with-a-divider.tsx`
 
 ### Maximum selection
 
 `maxSelection` sets a limit on the number of items a visitor can select.
 
-```tsx
-import {
-  Avatar,
-  Card,
-  CustomModalLayout,
-  Modal,
-  Page,
-  Text,
-} from '@wix/design-system';
-import React from 'react';
-import {
-  MultiBulkActionToolbar,
-  Filter,
-  Table,
-  PageWrapper,
-  OffsetQuery,
-  stringsArrayFilter,
-  useTableCollection,
-  ToolbarTitle,
-} from '@wix/patterns';
-import { Edit, Download, ChangeOrder, Block } from '@wix/wix-ui-icons-common';
-import { contacts } from '@wix/crm';
-
-type ContactsFilters = {
-  level: Filter<string[]>;
-};
-
-function MultiBulkActionToolbarMaxSelection() {
-  const tableState = useTableCollection<contacts.Contact, ContactsFilters>({
-    queryName: 'contacts-BulkActionsWithMaxSelection',
-    fetchData: (query: OffsetQuery<ContactsFilters>) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      if (filters.level) {
-        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchErrorMessage: () => 'Error Fetching Contacts',
-    filters: {
-      level: stringsArrayFilter({
-        initialValue: ['Beginner'],
-      }),
-    },
-  });
-
-  return (
-    <PageWrapper>
-      <Page height="400px">
-        <Page.Header title="Contacts" />
-        <Page.Content>
-          <Table
-            state={tableState}
-            title={<ToolbarTitle title="Contacts" showTotal />}
-            maxSelection={5}
-            columns={[
-              {
-                title: '',
-                width: '50px',
-                render: (contact) => (
-                  <Avatar
-                    name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
-                    imgProps={{ src: contact.info?.picture?.image }}
-                  />
-                ),
-              },
-              {
-                title: 'Name',
-                width: '250px',
-                render: (contact) =>
-                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-              },
-              {
-                title: 'Level',
-                render: (contact) => contact.info?.jobTitle,
-              },
-              {
-                title: 'Last Activity',
-                render: (contact) =>
-                  contact.lastActivity?.activityDate?.toLocaleString(),
-              },
-            ]}
-            bulkActionModal={({
-              isModalOpen,
-              selectedValues,
-              closeModal,
-              query,
-            }) => (
-              <Modal isOpen={isModalOpen}>
-                <CustomModalLayout
-                  height={300}
-                  dataHook="bulk-action-custom-modal-layout"
-                  title="Edit Contacts"
-                  primaryButtonOnClick={closeModal}
-                  primaryButtonText="save"
-                  secondaryButtonOnClick={closeModal}
-                  secondaryButtonText="cancel"
-                >
-                  {selectedValues.map((value, index) => (
-                    <Card>
-                      <Text
-                        key={value._id}
-                        dataHook={`selected-value-text-${index}`}
-                      >
-                        Page: {query.page}; Name:{' '}
-                        {`${value.info?.name?.first} ${value.info?.name?.last}`}
-                      </Text>
-                    </Card>
-                  ))}
-                </CustomModalLayout>
-              </Modal>
-            )}
-            bulkActionToolbar={({ selectedValues, openModal }) => {
-              const disabled = selectedValues.length > 4;
-              return (
-                <MultiBulkActionToolbar
-                  primaryActionItems={[
-                    {
-                      dataHook: 'edit-button',
-                      onClick: openModal,
-                      label: 'Edit',
-                      prefixIcon: <Edit />,
-                    },
-                    {
-                      dataHook: 'download-button',
-                      onClick: openModal,
-                      label: 'Download',
-                      prefixIcon: <Download />,
-                      tooltip: disabled
-                        ? 'Downloading is supported for up to 10 items'
-                        : undefined,
-                      disabled,
-                    },
-                  ]}
-                  secondaryActionItems={[
-                    {
-                      dataHook: 'block-button',
-                      onClick: openModal,
-                      label: 'Block',
-                      prefixIcon: <Block />,
-                    },
-                    {
-                      dataHook: 'change-button',
-                      onClick: openModal,
-                      label: 'Change',
-                      disabled,
-                      prefixIcon: <ChangeOrder />,
-                    },
-                  ]}
-                />
-              );
-            }}
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/MultiBulkActionToolbar/maximum-selection.tsx`
 
 ### Extend menu items
 
 You can extend existing menu items using [Slots and Plugins](./?path=/story/features-enrich-slots-and-plugins--slots-and-plugins) using your own `containerId`.
 
-```tsx
-import { Avatar, CustomModalLayout, Modal, Page } from '@wix/design-system';
-import React from 'react';
-import {
-  MultiBulkActionToolbar,
-  Filter,
-  Table,
-  PageWrapper,
-  OffsetQuery,
-  stringsArrayFilter,
-  useTableCollection,
-} from '@wix/patterns';
-import {
-  Visible,
-  Download,
-  Block,
-  ChangeOrder,
-} from '@wix/wix-ui-icons-common';
-import { contacts } from '@wix/crm';
-
-type ContactsFilters = {
-  level: Filter<string[]>;
-};
-
-function MultiBulkActionToolbarExtensionMenuItems() {
-
-  const state = useTableCollection<contacts.Contact, ContactsFilters>({
-    queryName: 'MultiBulkActionToolbar-ExtensionMenuItems',
-    paginationMode: 'offset',
-    fetchData: (query: OffsetQuery<ContactsFilters>) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      if (filters.level) {
-        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchErrorMessage: () => 'Error fetching contacts',
-    filters: {
-      level: stringsArrayFilter({
-        initialValue: ['Beginner'],
-      }),
-    },
-  });
-
-  return (
-    <PageWrapper>
-      <Page height="400px">
-        <Page.Header title="Contacts" />
-        <Page.Content>
-          <Table
-            state={state}
-            columns={[
-              {
-                title: '',
-                width: '50px',
-                render: (contact) => (
-                  <Avatar
-                    name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
-                    imgProps={{ src: contact.info?.picture?.image }}
-                  />
-                ),
-              },
-              {
-                title: 'Name',
-                width: '250px',
-                render: (contact) =>
-                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-              },
-              {
-                title: 'Level',
-                render: (contact) => contact.info?.jobTitle,
-              },
-              {
-                title: 'Last Activity',
-                render: (contact) =>
-                  contact.lastActivity?.activityDate?.toLocaleString(),
-              },
-            ]}
-            bulkActionModal={({
-              isModalOpen,
-              allSelected,
-              selectedValues,
-              uncheckedValues,
-              closeModal,
-              query,
-            }) => (
-              <Modal isOpen={isModalOpen}>
-                <CustomModalLayout
-                  height={300}
-                  dataHook="bulk-action-custom-modal-layout"
-                  title="Edit Product"
-                  primaryButtonOnClick={closeModal}
-                  primaryButtonText="Save"
-                  secondaryButtonOnClick={closeModal}
-                  secondaryButtonText="Cancel"
-                >
-                  <pre>
-                    {JSON.stringify(
-                      {
-                        allSelected,
-                        selectedValues: selectedValues.length,
-                        uncheckedValues: uncheckedValues.length,
-                        query: {
-                          page: query.page,
-                        },
-                      },
-                      null,
-                      2,
-                    )}
-                  </pre>
-                </CustomModalLayout>
-              </Modal>
-            )}
-            bulkActionToolbar={({ selectedValues, openModal }) => {
-              return (
-                <MultiBulkActionToolbar
-                  containerId="cd910877-1bb2-445e-822a-aa04a342c2f5"
-                  primaryActionItems={[
-                    {
-                      dataHook: 'primary-action-1',
-                      label: 'Primary 1',
-                      prefixIcon: <Visible />,
-                      subItems: [
-                        { label: 'option 1' },
-                        { label: 'option 2' },
-                        { label: 'option 3' },
-                      ],
-                    },
-                    {
-                      dataHook: 'primary-action-2',
-                      label: 'Primary 2',
-                      prefixIcon: <Download />,
-                      subItems: [
-                        { label: 'option 1' },
-                        { label: 'option 2' },
-                        { label: 'option 3' },
-                      ],
-                    },
-                  ]}
-                  secondaryActionItems={[
-                    {
-                      dataHook: 'secondary-action-1',
-                      onClick: openModal,
-                      label: 'Secondary 1',
-                      prefixIcon: <Block />,
-                    },
-                    {
-                      dataHook: 'secondary-action-2',
-                      onClick: openModal,
-                      disabled: true,
-                      label: 'Secondary 2',
-                      prefixIcon: <ChangeOrder />,
-                    },
-                  ]}
-                />
-              );
-            }}
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/MultiBulkActionToolbar/extend-menu-items.tsx`
 
 ## API
 
@@ -1131,13 +96,12 @@ To read more about extensions in general and what else is possible, go to the ma
 
 ### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `primaryActionItems` | `ActionSubitem[]` | No | - | List of primary actions. Primary actions are displayed as individual buttons. |
-| `secondaryActionItems` | `ActionSubitem[] \| ActionSubitem[][]` | No | - | List of secondary actions. Secondary actions are displayed when clicking the More Actions menu. Secondary actions can be grouped by using an array of arrays, and a divider will be added between each group. \| [ActionSubitem[][]](./?path=/story/common-types--actionsubitem) |
-| `secondaryActionsPopoverMenuProps` | `Partial<PopoverMenuProps>` | No | - | [PopoverMenu](https://www.docs.wixdesignsystem.com/?path=/story/components-overlays--popovermenu) props to pass to the 'More Action' popover menu. |
-| `containerId` | `string` | No | - | This ID is used to specify the target container for [dashboard menu plugin](./?path=/story/features-enrich-slots-and-plugins--slots-and-plugins) items. |
-| `containerProps` | `Record<string, any>` | No | - | This prop is used to pass additional properties that can be used on the onClick of the container's extensions menu items. |
+Read `dist/dts-bundle/components/MultiBulkActionToolbar.d.ts` for `MultiBulkActionToolbar`'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.
 
 ## BI