@wix/patterns 1.459.0 → 1.460.0

package/dist/docs/CollectionOptimisticActions.md

@@ -56,230 +56,14 @@ Create one item optimistically.
  In this example, click on "Create contact" to see a new contact. 
  The item received in the submit function is temporary (can be without id which created in the server). Ensure you return the created item with all the properties from the server response. This will be the item in the collection at the end of this operation.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Table,
-  OffsetQuery,
-  PrimaryActionButton,
-  useTableCollection,
-  useOptimisticActions,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function CreateOne() {
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-CreateOne',
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    fetchErrorMessage: () => 'Error fetching contacts',
-  });
-
-  const collection = state.collection;
-
-  const optimisticActions = useOptimisticActions(collection);
-
-  const _createContact = () => {
-    const newContact = {
-      id: new window.Date().toString(),
-      info: {
-        name: {
-          first: 'New',
-          last: 'Contact',
-        },
-      },
-    };
-
-    optimisticActions.createOne(newContact, {
-      submit: async (_contacts) => {
-        const response = (await Promise.all(
-          _contacts.map((contact) =>
-            contacts.createContact(contact.info as contacts.ContactInfo),
-          ),
-        )) as contacts.CreateContactResponse[];
-
-        return response.map(({ contact }) => contact as contacts.Contact);
-      },
-    });
-  };
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          state={collection}
-          primaryActionButton={
-            <PrimaryActionButton onClick={_createContact}>
-              Add Contact
-            </PrimaryActionButton>
-          }
-          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(),
-            },
-          ]}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CollectionOptimisticActions/create-one.tsx`
 
 ### Create many
 
 Create many items optimatically.
  In this example, click on "Create contacts" to see several new contacts. Scroll down to see the new contacts
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Table,
-  OffsetQuery,
-  PrimaryActionButton,
-  useTableCollection,
-  useOptimisticActions,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function CreateMany() {
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-CreateMany',
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    fetchErrorMessage: () => 'Error fetching contacts',
-  });
-
-  const collection = state.collection;
-
-  const optimisticActions = useOptimisticActions(collection);
-
-  const generateContacts = () =>
-    Array.from({ length: 5 }, (_, index) => ({
-      id: generateKey(index),
-      info: {
-        name: {
-          first: 'Contact',
-          last: generateKey(index),
-        },
-      },
-    }));
-
-  const generateKey = (index: number): string =>
-    new window.Date().toString() + index;
-
-  const _createContacts = () => {
-    const newContacts = generateContacts();
-
-    optimisticActions.createMany(newContacts, {
-      submit: async (_contacts) => {
-        const response = (await Promise.all(
-          _contacts.map((contact) =>
-            contacts.createContact(contact.info as contacts.ContactInfo),
-          ),
-        )) as contacts.CreateContactResponse[];
-
-        return response.map(({ contact }) => contact as contacts.Contact);
-      },
-    });
-  };
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          state={collection}
-          primaryActionButton={
-            <PrimaryActionButton onClick={_createContacts}>
-              Add contacts
-            </PrimaryActionButton>
-          }
-          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(),
-            },
-          ]}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CollectionOptimisticActions/create-many.tsx`
 
 ---
 
@@ -292,243 +76,14 @@ Allows updating items in the collection while submitting the update action to th
 Update one item in the table. 
  In this example, click on update button to see the new level of contact
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Table,
-  OffsetQuery,
-  useTableCollection,
-  useOptimisticActions,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function UpdateOne() {
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-UpdateOne',
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    fetchErrorMessage: () => 'Error fetching contacts',
-  });
-
-  const collection = state.collection;
-
-  const optimisticActions = useOptimisticActions(collection);
-
-  const _updateContact = (contact: contacts.Contact) => {
-    const updatedContact = {
-      ...contact,
-      info: {
-        ...contact.info,
-        jobTitle: 'Ultimate',
-      },
-    };
-
-    optimisticActions.updateOne(updatedContact, {
-      submit: async (_contacts) => {
-        const response = (await Promise.all(
-          _contacts.map((contact) =>
-            contacts.updateContact(
-              contact._id as string,
-              contact.info as contacts.ContactInfo,
-              contact.revision as number,
-            ),
-          ),
-        )) as contacts.UpdateContactResponse[];
-
-        return response.map(({ contact }) => contact as contacts.Contact);
-      },
-    });
-  };
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          state={collection}
-          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(),
-            },
-          ]}
-          actionCell={(contact) => ({
-            primaryAction: {
-              text: 'Update to Ultimate',
-              onClick: () => {
-                _updateContact(contact);
-              },
-            },
-          })}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CollectionOptimisticActions/update-one.tsx`
 
 ### Update many
 
 Update many items optimatically by using bulk selection.
  In this example, click on all items and see only 2 items are selected because we use `maxSelection`, and only these 2 are been updated
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  BulkActionButton,
-  BulkActionToolbar,
-  Table,
-  OffsetQuery,
-  useTableCollection,
-  useOptimisticActions,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function UpdateMany() {
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-UpdateMany',
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    fetchErrorMessage: () => 'Error fetching contacts',
-  });
-
-  const collection = state.collection;
-
-  const optimisticActions = useOptimisticActions(collection);
-
-  const _updateContacts = (contactsToUpdate: contacts.Contact[]) => {
-    const updatedContacts = contactsToUpdate.map((c) => ({
-      ...c,
-      info: {
-        ...c.info,
-        jobTitle: 'Ultimate',
-      },
-    }));
-
-    optimisticActions.updateMany(updatedContacts, {
-      successToast: `${contactsToUpdate.length} contacts updated`,
-      submit: async (_contacts) => {
-        const response = (await Promise.all(
-          _contacts.map((contact) =>
-            contacts.updateContact(
-              contact._id as string,
-              contact.info as contacts.ContactInfo,
-              contact.revision as number,
-            ),
-          ),
-        )) as contacts.UpdateContactResponse[];
-
-        return response.map(({ contact }) => contact as contacts.Contact);
-      },
-    });
-  };
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          state={collection}
-          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(),
-            },
-          ]}
-          showSelection
-          maxSelection={2}
-          bulkActionToolbar={({ selectedValues, clearSelection, total }) => (
-            <BulkActionToolbar
-              actionButton={
-                <BulkActionButton
-                  onClick={() => {
-                    _updateContacts(selectedValues);
-                    clearSelection();
-                  }}
-                >
-                  Update to Ultimate
-                </BulkActionButton>
-              }
-            />
-          )}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CollectionOptimisticActions/update-many.tsx`
 
 ### Update all
 
@@ -536,150 +91,7 @@ Update all items optimatically by using bulk selection.
  `updateAll` is for the use case when all items that match the current filtering should be updated, but naturally not all of them are currently visible in the table (because of pagination)
  In this example, click one time on several items and one time on all items and see the updated items
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  BulkActionButton,
-  BulkActionToolbar,
-  Table,
-  OffsetQuery,
-  useTableCollection,
-  useOptimisticActions,
-} from '@wix/patterns';
-import {
-  bulkUpdateContacts,
-  queryContacts,
-  updateContact,
-} from '@wix/ambassador-contacts-v4-contact/http';
-import {
-  Contact,
-  ContactInfo,
-  UpdateContactRequest,
-} from '@wix/ambassador-contacts-v4-contact/types';
-import { useHttpClient } from '@wix/yoshi-flow-bm';
-
-function UpdateAll() {
-  const httpClient = useHttpClient();
-
-  const state = useTableCollection<Contact>({
-    queryName: 'contacts-UpdateAll',
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-      return httpClient
-        .request(
-          queryContacts({
-            query: { paging: { limit, offset }, filter: filters },
-            search,
-          }),
-        )
-        .then(({ data: { contacts = [], pagingMetadata } }) => ({
-          items: contacts,
-          total: pagingMetadata?.total,
-        }));
-    },
-    itemKey: (item) => item.id as string,
-    itemName: (item) => item.name as string,
-    fetchErrorMessage: () => 'Error fetching contacts',
-  });
-
-  const collection = state.collection;
-
-  const optimisticActions = useOptimisticActions(collection);
-
-  const _updateContacts = (
-    contacts: Contact[],
-    { allSelected, total }: { allSelected: boolean; total: number },
-  ) => {
-    if (allSelected) {
-      const newLevelContact = { level: 'Legendary' } as Partial<Contact>;
-      optimisticActions.updateAll(newLevelContact, {
-        successToast: `${total} contacts changed`,
-        submit: () =>
-          httpClient.request(
-            bulkUpdateContacts({
-              info: newLevelContact as ContactInfo,
-            }),
-          ),
-      });
-    } else {
-      const updatedContacts = contacts.map((c) => ({
-        ...c,
-        level: 'Legendary',
-      }));
-
-      optimisticActions.updateMany(updatedContacts, {
-        successToast: `${contacts.length} contacts updated`,
-        submit: (contacts) =>
-          Promise.all(
-            contacts.map((contact) =>
-              httpClient.request(
-                updateContact(contact as UpdateContactRequest),
-              ),
-            ),
-          ),
-      });
-    }
-  };
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          state={collection}
-          columns={[
-            {
-              title: '',
-              width: '50px',
-              render: (contact) => (
-                <Avatar name={contact.name} imgProps={{ src: contact.image }} />
-              ),
-            },
-            {
-              title: 'Name',
-              width: '250px',
-              render: (contact) => contact.name,
-            },
-            {
-              title: 'Level',
-              render: (contact) => contact.level,
-            },
-            {
-              title: 'Created Date',
-              render: (contact) => contact.createdDate?.toDateString(),
-            },
-          ]}
-          showSelection
-          bulkActionToolbar={({
-            selectedValues,
-            clearSelection,
-            allSelected,
-            total,
-          }) => (
-            <BulkActionToolbar
-              actionButton={
-                <BulkActionButton
-                  onClick={() => {
-                    _updateContacts(selectedValues, {
-                      allSelected,
-                      total,
-                    });
-                    clearSelection();
-                  }}
-                >
-                  Update to Legendary
-                </BulkActionButton>
-              }
-            />
-          )}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CollectionOptimisticActions/update-all.tsx`
 
 ---
 
@@ -691,352 +103,19 @@ Allows removing items from the collection while submitting the delete action to
 
 Delete one item optimatically.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Table,
-  OffsetQuery,
-  useTableCollection,
-  useOptimisticActions,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function DeleteOne() {
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-DeleteOne',
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    fetchErrorMessage: () => 'Error fetching contacts',
-  });
-
-  const collection = state.collection;
-
-  const optimisticActions = useOptimisticActions(collection);
-
-  const _deleteContact = (contact: contacts.Contact) => {
-    optimisticActions.deleteOne(contact, {
-      submit: async (_contacts) =>
-        Promise.all(
-          _contacts.map((contact) =>
-            contacts.deleteContact(contact._id as string),
-          ),
-        ),
-    });
-  };
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          state={collection}
-          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(),
-            },
-          ]}
-          showSelection
-          actionCell={(contact) => ({
-            primaryAction: {
-              text: 'Delete',
-              onClick: () => {
-                _deleteContact(contact);
-              },
-            },
-          })}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CollectionOptimisticActions/delete-one.tsx`
 
 ### Delete many
 
 Delete many items optimatically by using bulk selection.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  BulkActionButton,
-  BulkActionToolbar,
-  Table,
-  OffsetQuery,
-  useTableCollection,
-  useOptimisticActions,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function DeleteMany() {
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-DeleteMany',
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    fetchErrorMessage: () => 'Error fetching contacts',
-  });
-
-  const collection = state.collection;
-
-  const optimisticActions = useOptimisticActions(collection);
-
-  const _deleteContacts = (_contacts: contacts.Contact[]) => {
-    optimisticActions.deleteMany<void[]>(_contacts, {
-      successToast: `${_contacts.length} contacts deleted`,
-      submit: async (contactsToDelete) =>
-        Promise.all(
-          contactsToDelete.map((contact) =>
-            contacts.deleteContact(contact._id as string),
-          ),
-        ),
-    });
-  };
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          state={collection}
-          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(),
-            },
-          ]}
-          showSelection
-          maxSelection={2}
-          bulkActionToolbar={({ selectedValues, clearSelection }) => (
-            <BulkActionToolbar
-              actionButton={
-                <BulkActionButton
-                  onClick={() => {
-                    _deleteContacts(selectedValues);
-                    clearSelection();
-                  }}
-                >
-                  Delete
-                </BulkActionButton>
-              }
-            />
-          )}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CollectionOptimisticActions/delete-many.tsx`
 
 ### Delete all
 
 Delete all items optimatically by using bulk selection. 
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  BulkActionButton,
-  BulkActionToolbar,
-  Table,
-  OffsetQuery,
-  useTableCollection,
-  useOptimisticActions,
-} from '@wix/patterns';
-import {
-  deleteContact,
-  queryContacts,
-  bulkDeleteContacts,
-} from '@wix/ambassador-contacts-v4-contact/http';
-import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
-import { useHttpClient } from '@wix/yoshi-flow-bm';
-
-function DeleteAll() {
-  const httpClient = useHttpClient();
-
-  const state = useTableCollection<Contact>({
-    queryName: 'contacts-DeleteAll',
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-      return httpClient
-        .request(
-          queryContacts({
-            query: { paging: { limit, offset }, filter: filters },
-            search,
-          }),
-        )
-        .then(({ data: { contacts = [], pagingMetadata } }) => ({
-          items: contacts,
-          total: pagingMetadata?.total,
-        }));
-    },
-    itemKey: (item) => item.id as string,
-    itemName: (item) => item.name as string,
-    fetchErrorMessage: () => 'Error fetching contacts',
-  });
-
-  const collection = state.collection;
-
-  const optimisticActions = useOptimisticActions(collection);
-
-  const _deleteContacts = (
-    contacts: Contact[],
-    { allSelected, total }: { allSelected: boolean; total: number },
-  ) => {
-    if (allSelected) {
-      optimisticActions.deleteAll({
-        successToast: `${total} contacts deleted`,
-        submit: () => {
-          try {
-            return httpClient.request(bulkDeleteContacts({} as any));
-          } catch (error) {
-            console.log(error);
-          }
-
-          return Promise.resolve() as any;
-        },
-      });
-    } else {
-      optimisticActions.deleteMany(contacts, {
-        successToast: `${contacts.length} contacts deleted`,
-        submit: (contactsToDelete) =>
-          Promise.all(
-            contactsToDelete.map((contactToDelete) =>
-              deleteContact({
-                contactId: contactToDelete.id as string,
-              }),
-            ),
-          ),
-      });
-    }
-  };
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          state={collection}
-          columns={[
-            {
-              title: '',
-              width: '50px',
-              render: (contact) => (
-                <Avatar name={contact.name} imgProps={{ src: contact.image }} />
-              ),
-            },
-            {
-              title: 'Name',
-              width: '250px',
-              render: (contact) => contact.name,
-            },
-            {
-              title: 'Level',
-              render: (contact) => contact.level,
-            },
-            {
-              title: 'Last Seen',
-              render: (contact) => contact.lastSeen?.toLocaleString(),
-            },
-          ]}
-          showSelection
-          bulkActionToolbar={({
-            selectedValues,
-            clearSelection,
-            allSelected,
-            total,
-          }) => (
-            <BulkActionToolbar
-              actionButton={
-                <BulkActionButton
-                  onClick={() => {
-                    _deleteContacts(selectedValues, { allSelected, total });
-                    clearSelection();
-                  }}
-                >
-                  Delete
-                </BulkActionButton>
-              }
-            />
-          )}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CollectionOptimisticActions/delete-all.tsx`
 
 ## API
 
@@ -1061,14 +140,10 @@ The params contains the following part of these props:
 
 ### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `createOne` | `(item: T, params: CreateManyParams<T>) => void` | Yes | - | Creates a single item in the collection. |
-| `createMany` | `(items: T[], params: CreateManyParams<T>) => void` | Yes | - | Creates multiple items in the collection. |
-| `updateMany` | `<R>(items: T[], params: UpdateManyParams<T, R>) => void` | Yes | - | Updates multiple items in the collection. @param items - The items to update. @param params - Additional parameters for the update operation. |
-| `updateOne` | `<R>(item: T, params: UpdateManyParams<T, R>) => void` | Yes | - | Updates a single item in the collection. @param item - The item to update. @param params - Additional parameters for the operation. |
-| `updateAll` | `{ <R>(patchOrFn: (item: T) => Partial<T>, params: UpdateAllParams<R>): void; <R>(patch: Partial<T>, params: UpdateAllParams<R>): void; }` | Yes | - | > `updateAll(fn)` API is not recommended as it's not possible to calculate "optimistic total", prefer updateAll(patchObject) API if possible. Updates all items in the collection based on a function or a patch object. Updates all items in the collection based on a patch object. @param patchOrFn - A function or a patch object to apply to each item. @param params - Additional parameters for the operation. @param patch - A patch object to apply to each item. @param params - Additional parameters for the operation. |
-| `deleteMany` | `<R>(items: T[], params: DeleteManyParams<T, R>) => void` | Yes | - | Deletes multiple items from the collection. @param items - An array of items to delete. @param params - Additional parameters for the delete operation. |
-| `deleteOne` | `<R>(item: T, params: DeleteManyParams<T, R>) => void` | Yes | - | Deletes a single item from the collection. @param item - The item to delete. @param params - Additional parameters for the operation. |
-| `deleteAll` | `<R>(params: UpdateAllParams<R>) => void` | Yes | - | Deletes all items from the collection. @param params - Additional parameters for the operation. |
+Read `dist/dts-bundle/components/CollectionOptimisticActions.d.ts` for `CollectionOptimisticActions`'s full prop list, with types and
+descriptions. They are not repeated here, so the bundle is the single source of truth.
+
+A one-line stub in that file is an answer, not a truncation: an empty body with a
+"Produced by" note means you get the value from that hook or factory rather than
+constructing it. `dist/dts-bundle/index.json` maps every name to its bundle path.