@wix/patterns 1.459.0 → 1.460.0

package/dist/docs/CustomColumns.md

@@ -16,86 +16,7 @@ import { CustomColumns } from '@wix/patterns';
 
 A basic table with the custom columns feature.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  CustomColumns,
-  OffsetQuery,
-  Table,
-  useTableCollection,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function VisibleColumns() {
-
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-VisibleColumns',
-    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',
-    filters: {},
-  });
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          state={state}
-          columns={[
-            {
-              id: 'avatar',
-              name: 'Avatar',
-              title: '',
-              width: '50px',
-              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}`,
-            },
-            {
-              id: 'level',
-              title: 'Level',
-              render: (contact) => contact.info?.jobTitle,
-            },
-            {
-              id: 'lastActivity',
-              title: 'Last Activity',
-              render: (contact) =>
-                contact.lastActivity?.activityDate?.toLocaleString(),
-            },
-          ]}
-          customColumns={<CustomColumns />}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CustomColumns/basic.tsx`
 
 ---
 
@@ -107,87 +28,7 @@ Customize a column to be hidden by default.
 
  **Note:** By default, new columns added to an existing table are visible to users. Set `defaultHidden` to `true` to hide them.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  CustomColumns,
-  OffsetQuery,
-  Table,
-  useTableCollection,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function DefaultColumnsSelection() {
-
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-DefaultColumnsSelection',
-    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',
-    filters: {},
-  });
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          state={state}
-          columns={[
-            {
-              id: 'avatar',
-              name: 'Avatar',
-              title: '',
-              width: '50px',
-              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}`,
-            },
-            {
-              id: 'level',
-              title: 'Level',
-              render: (contact) => contact.info?.jobTitle,
-            },
-            {
-              id: 'lastActivity',
-              title: 'Last Activity',
-              render: (contact) =>
-                contact.lastActivity?.activityDate?.toLocaleString(),
-              defaultHidden: true,
-            },
-          ]}
-          customColumns={<CustomColumns />}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CustomColumns/hide-specific-columns-by-default.tsx`
 
 ---
 
@@ -195,88 +36,7 @@ function DefaultColumnsSelection() {
 
 Locking columns restricts users from editing the specified columns and disables the hide and show functionality (checkbox).
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  CustomColumns,
-  OffsetQuery,
-  Table,
-  useTableCollection,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function DisabledCustomColumns() {
-
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-DisabledCustomColumns',
-    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',
-    filters: {},
-  });
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <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}`,
-            },
-            {
-              id: 'level',
-              title: 'Level',
-              render: (contact) => contact.info?.jobTitle,
-            },
-            {
-              id: 'lastActivity',
-              title: 'Last Activity',
-              hideable: false,
-              render: (contact) =>
-                contact.lastActivity?.activityDate?.toLocaleString(),
-            },
-          ]}
-          customColumns={<CustomColumns />}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CustomColumns/lock-columns.tsx`
 
 ---
 
@@ -284,87 +44,7 @@ function DisabledCustomColumns() {
 
 Excluding columns restricts users from editing the specified columns and hides them from the custom column selection panel.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  CustomColumns,
-  OffsetQuery,
-  Table,
-  useTableCollection,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function HiddenColumns() {
-
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-HiddenColumns',
-    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',
-    filters: {},
-  });
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          state={state}
-          columns={[
-            {
-              id: 'avatar',
-              name: 'Avatar',
-              hiddenFromCustomColumnsSelection: true,
-              title: '',
-              width: '50px',
-              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}`,
-            },
-            {
-              id: 'level',
-              title: 'Level',
-              render: (contact) => contact.info?.jobTitle,
-            },
-            {
-              id: 'lastActivity',
-              title: 'Last Activity',
-              render: (contact) =>
-                contact.lastActivity?.activityDate?.toLocaleString(),
-            },
-          ]}
-          customColumns={<CustomColumns />}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CustomColumns/exclude-columns.tsx`
 
 ---
 
@@ -372,93 +52,7 @@ function HiddenColumns() {
 
 Add a tooltip next to the column's name. The tooltip allows you to add more information about the column.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Table,
-  useTableCollection,
-  CustomColumns,
-  OffsetQuery,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function InfoTooltip() {
-
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-InfoTooltip',
-    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: ({ err }) => String(err),
-    filters: {},
-  });
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          state={state}
-          columns={[
-            {
-              id: 'avatar',
-              name: 'Avatar',
-              title: '',
-              width: '50px',
-              hideable: false,
-              infoTooltipProps: {
-                panelContent: 'Avatar info',
-              },
-              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}`,
-            },
-            {
-              id: 'level',
-              title: 'Level',
-              render: (contact) => contact.info?.jobTitle,
-              infoTooltipProps: {
-                content: 'Level info',
-              },
-            },
-            {
-              id: 'lastActivity',
-              title: 'Last Activity',
-              render: (contact) =>
-                contact.lastActivity?.activityDate?.toLocaleString(),
-            },
-          ]}
-          customColumns={<CustomColumns />}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CustomColumns/add-a-tooltip.tsx`
 
 ---
 
@@ -468,92 +62,7 @@ Drag and drop columns in the side panel to reorder the columns.
 
  When adding new columns to an existing table component, the custom column order is preserved, and new columns are appended to the right of the existing columns. However, if the columns are still in their original order, the updated table overrides it.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Table,
-  useTableCollection,
-  CustomColumns,
-  Views,
-  OffsetQuery,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function ReorderColumns() {
-
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-ReorderColumns',
-    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: ({ err }) => String(err),
-    filters: {},
-  });
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          state={state}
-          columns={[
-            {
-              id: 'avatar',
-              name: 'Avatar',
-              title: '',
-              width: '50px',
-              hideable: false,
-              infoTooltipProps: {
-                panelContent: 'Avatar info',
-              },
-              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}`,
-            },
-            {
-              id: 'level',
-              title: 'Level',
-              render: (contact) => contact.info?.jobTitle,
-            },
-            {
-              id: 'lastActivity',
-              title: 'Last Activity',
-              render: (contact) =>
-                contact.lastActivity?.activityDate?.toLocaleString(),
-            },
-          ]}
-          views={<Views />}
-          customColumns={<CustomColumns />}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CustomColumns/reorder-columns.tsx`
 
 ---
 
@@ -563,119 +72,7 @@ To freeze columns and prevent users from reordering them, use the `reorderDisabl
  
 >**Note**: You can only freeze columns in a table starting from the first column, and in consecutive order.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  CustomColumns,
-  OffsetQuery,
-  Table,
-  useTableCollection,
-  Views,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function ReorderDisabled() {
-
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-ReorderDisabled',
-    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: ({ err }) => String(err),
-    filters: {},
-  });
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          state={state}
-          horizontalScroll
-          columns={[
-            {
-              id: 'avatar',
-              name: 'Avatar',
-              title: '',
-              width: '50px',
-              hideable: false,
-              reorderDisabled: true,
-              infoTooltipProps: {
-                panelContent: 'Avatar info',
-              },
-              render: (contact) => (
-                <Avatar
-                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
-                  imgProps={{ src: contact.info?.picture?.image }}
-                />
-              ),
-            },
-            {
-              id: 'name',
-              title: 'Name',
-              width: '150px',
-              reorderDisabled: true,
-              render: (contact) =>
-                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-            },
-            {
-              id: 'level',
-              title: 'Level',
-              width: '80px',
-              render: (contact) => contact.info?.jobTitle,
-            },
-            {
-              id: 'lastActivity',
-              title: 'Last Activity',
-              width: '80px',
-              render: (contact) =>
-                contact.lastActivity?.activityDate?.toLocaleString(),
-            },
-            ...new Array(3).fill(null).flatMap((_, i) => [
-              {
-                id: `name-${i}`,
-                title: `Name ${i}`,
-                width: '150px',
-                render: (contact: contacts.Contact) =>
-                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-              },
-              {
-                id: `level-${i}`,
-                title: `Level ${i}`,
-                render: (contact: contacts.Contact) => contact.info?.jobTitle,
-                width: '80px',
-              },
-              {
-                id: `lastActivity-${i}`,
-                title: 'Last Activity',
-                render: (contact: contacts.Contact) =>
-                  contact.lastActivity?.activityDate?.toLocaleString(),
-                width: '80px',
-              },
-            ]),
-          ]}
-          views={<Views />}
-          customColumns={<CustomColumns />}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CustomColumns/freeze-column-reorder.tsx`
 
 ---
 
@@ -683,93 +80,7 @@ function ReorderDisabled() {
 
 To achieve greater optimization, consider utilizing the `refreshOnColumnsChange` flag with `true` value and retrieving the `columns` array from the query object. This approach enables you to retrieve the necessary fields from your backend.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Table,
-  useTableCollection,
-  Views,
-  CustomColumns,
-  OffsetQuery,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function LoadOnlySelectedColumns() {
-
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-LoadOnlySelectedColumns',
-    refreshOnColumnsChange: true,
-    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: ({ err }) => String(err),
-    filters: {},
-  });
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          state={state}
-          columns={[
-            {
-              id: 'avatar',
-              name: 'Avatar',
-              title: '',
-              width: '50px',
-              hideable: false,
-              infoTooltipProps: {
-                panelContent: 'Avatar info',
-              },
-              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}`,
-            },
-            {
-              id: 'level',
-              title: 'Level',
-              render: (contact) => contact.info?.jobTitle,
-            },
-            {
-              id: 'lastActivity',
-              title: 'Last Activity',
-              render: (contact) =>
-                contact.lastActivity?.activityDate?.toLocaleString(),
-            },
-          ]}
-          views={<Views />}
-          customColumns={<CustomColumns />}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CustomColumns/load-only-selected-columns.tsx`
 
 ---
 
@@ -777,100 +88,7 @@ function LoadOnlySelectedColumns() {
 
 Retrieve the visible columns from the custom columns feature.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  CustomColumns,
-  OffsetQuery,
-  Table,
-  useTableCollection,
-  runInAction,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-import { PrimaryActions } from '../../../src';
-
-function VisibleColumns() {
-
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-GetVisibleColumns',
-    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',
-    filters: {},
-  });
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header
-        title={{ text: 'Contacts' }}
-        primaryAction={
-          <PrimaryActions
-            label="Settings"
-            onClick={() => {
-              runInAction(() => {
-                console.log(state.visibleColumns);
-              });
-            }}
-          />
-        }
-      />
-      <CollectionPage.Content>
-        <Table
-          state={state}
-          columns={[
-            {
-              id: 'avatar',
-              name: 'Avatar',
-              title: '',
-              width: '50px',
-              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}`,
-            },
-            {
-              id: 'level',
-              title: 'Level',
-              render: (contact) => contact.info?.jobTitle,
-            },
-            {
-              id: 'lastActivity',
-              title: 'Last Activity',
-              render: (contact) =>
-                contact.lastActivity?.activityDate?.toLocaleString(),
-            },
-          ]}
-          customColumns={<CustomColumns />}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CustomColumns/get-visible-columns.tsx`
 
 ## API