@wix/patterns 1.458.0 → 1.460.0

package/dist/docs/ExportTo.md

@@ -27,681 +27,25 @@ import { ExportButton } from '@wix/patterns';
 
 ### Export all table
 
-```tsx
-import { Avatar, Page } from '@wix/design-system';
-import React from 'react';
-import {
-  CollectionToolbarFilters,
-  ExportButton,
-  Filter,
-  Table,
-  PageWrapper,
-  MultiSelectCheckboxFilter,
-  OffsetQuery,
-  stringsArrayFilter,
-  useTableCollection,
-  useExportConfig,
-  useStaticListFilterCollection,
-  ToolbarTitle,
-} from '@wix/patterns';
-import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
-import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
-import { useHttpClient } from '@wix/yoshi-flow-bm';
-
-type ContactsFilters = {
-  level: Filter<string[]>;
-};
-
-function ExportAllTable() {
-  const httpClient = useHttpClient();
-
-  const state = useTableCollection<Contact, ContactsFilters>({
-    queryName: 'ExportAllTable',
-    fetchData: (query: OffsetQuery<ContactsFilters>) => {
-      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',
-    filters: {
-      level: stringsArrayFilter(),
-    },
-  });
-
-  const exportConfig = useExportConfig<Contact, ContactsFilters>({
-    transformPlatformizedQuery: ({
-      platformizedQuery,
-      wixPatternsQuery,
-      selectedItems,
-    }) => {
-      // TODO: add logic here
-      return {
-        ...platformizedQuery,
-        paging: {
-          limit: 20,
-        },
-      };
-    },
-    methodMetadata: {
-      artifact: 'com.wixpress.fedinfra.exportservice.export-service',
-      service: 'ExportService',
-      method: 'QueryProductsExportSpi',
-    },
-    fields: [
-      { id: 'contact.id', header: 'id' },
-      { id: 'contact.info.name.first', header: 'First Name' },
-      { id: 'contact.info.name.last', header: 'Last Name' },
-      { id: 'contact.primary_info.email', header: 'Email' },
-    ],
-  });
-  const collection = state.collection;
-  const levelsCollection = useStaticListFilterCollection(
-    collection.filters.level,
-    [
-      'Beginner',
-      'Amateur',
-      'Semi-Pro',
-      'Professional',
-      'World Class',
-      'Legendary',
-      'Ultimate',
-    ],
-  );
-
-  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.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(),
-              },
-            ]}
-            filters={
-              <CollectionToolbarFilters
-                inline={1}
-                panelTitle="Filter your contacts"
-              >
-                <MultiSelectCheckboxFilter
-                  popoverProps={{ appendTo: 'window' }}
-                  filter={collection.filters.level}
-                  collection={levelsCollection}
-                  renderItem={(level) => ({ title: level })}
-                />
-              </CollectionToolbarFilters>
-            }
-            exportButton={<ExportButton {...exportConfig} />}
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/ExportTo/export-all-table.tsx`
 
 ### Export filtered table
 
 Export the table with the filters applied
 
-```tsx
-import { Avatar, Page } from '@wix/design-system';
-import React from 'react';
-import {
-  CollectionToolbarFilters,
-  ExportButton,
-  Filter,
-  Table,
-  PageWrapper,
-  MultiSelectCheckboxFilter,
-  OffsetQuery,
-  stringsArrayFilter,
-  useTableCollection,
-  useExportConfig,
-  useStaticListFilterCollection,
-  ToolbarTitle,
-} from '@wix/patterns';
-import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
-import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
-import { useHttpClient } from '@wix/yoshi-flow-bm';
-
-type ContactsFilters = {
-  level: Filter<string[]>;
-};
-
-function ExportFlilteredTable() {
-  const httpClient = useHttpClient();
-
-  const state = useTableCollection<Contact, ContactsFilters>({
-    queryName: 'contacts-BulkActions',
-    fetchData: (query: OffsetQuery<ContactsFilters>) => {
-      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',
-    filters: {
-      level: stringsArrayFilter({
-        initialValue: ['Beginner'],
-      }),
-    },
-  });
-
-  const exportConfig = useExportConfig<Contact, ContactsFilters>({
-    saveAs: ({ wixPatternsQuery }) =>
-      `Contacts [${wixPatternsQuery.filters.level?.join(', ')}]`,
-    transformPlatformizedQuery: ({
-      platformizedQuery,
-      wixPatternsQuery,
-      selectedItems,
-    }) => {
-      // TODO: add logic here
-      return {
-        ...platformizedQuery,
-        paging: {
-          limit: 20,
-        },
-      };
-    },
-    methodMetadata: {
-      artifact: 'com.wixpress.fedinfra.exportservice.export-service',
-      service: 'ExportService',
-      method: 'QueryProductsExportSpi',
-    },
-    fields: [
-      { id: 'contact.id', header: 'id' },
-      { id: 'contact.info.name.first', header: 'First Name' },
-      { id: 'contact.info.name.last', header: 'Last Name' },
-      { id: 'contact.primary_info.email', header: 'Email' },
-    ],
-  });
-  const collection = state.collection;
-  const levelsCollection = useStaticListFilterCollection(
-    collection.filters.level,
-    [
-      'Beginner',
-      'Amateur',
-      'Semi-Pro',
-      'Professional',
-      'World Class',
-      'Legendary',
-      'Ultimate',
-    ],
-  );
-
-  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.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(),
-              },
-            ]}
-            filters={
-              <CollectionToolbarFilters
-                inline={1}
-                panelTitle="Filter your contacts"
-              >
-                <MultiSelectCheckboxFilter
-                  popoverProps={{ appendTo: 'window' }}
-                  filter={collection.filters.level}
-                  collection={levelsCollection}
-                  renderItem={(level) => ({ title: level })}
-                />
-              </CollectionToolbarFilters>
-            }
-            exportButton={<ExportButton {...exportConfig} />}
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/ExportTo/export-filtered-table.tsx`
 
 ### Export table with selection / bulk selection
 
 Export only the selected items from the table
 
-```tsx
-import {
-  Avatar,
-  Card,
-  CustomModalLayout,
-  Modal,
-  Page,
-  Text,
-} from '@wix/design-system';
-import React from 'react';
-import {
-  ExportButton,
-  Filter,
-  Table,
-  PageWrapper,
-  MultiBulkActionToolbar,
-  OffsetQuery,
-  stringsArrayFilter,
-  useTableCollection,
-  useExportConfig,
-  ToolbarTitle,
-} from '@wix/patterns';
-import { Block, ChangeOrder, Download, Edit } from '@wix/wix-ui-icons-common';
-import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
-import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
-import { useHttpClient } from '@wix/yoshi-flow-bm';
-
-type ContactsFilters = {
-  level: Filter<string[]>;
-};
-
-function ExportToBulkSelectExample() {
-  const httpClient = useHttpClient();
-
-  const state = useTableCollection<Contact, ContactsFilters>({
-    queryName: 'contacts-BulkActions',
-    fetchData: (query: OffsetQuery<ContactsFilters>) => {
-      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',
-    filters: {
-      level: stringsArrayFilter({
-        initialValue: ['Beginner'],
-      }),
-    },
-  });
-
-  const exportConfig = useExportConfig<Contact, ContactsFilters>({
-    transformPlatformizedQuery: ({
-      platformizedQuery,
-      wixPatternsQuery,
-      selectedItems,
-    }) => {
-      // TODO: add logic here
-      return {
-        ...platformizedQuery,
-        paging: {
-          limit: 20,
-        },
-      };
-    },
-    methodMetadata: {
-      artifact: 'com.wixpress.fedinfra.exportservice.export-service',
-      service: 'ExportService',
-      method: 'QueryProductsExportSpi',
-    },
-    fields: [
-      { id: 'contact.id', header: 'id' },
-      { id: 'contact.info.name.first', header: 'First Name' },
-      { id: 'contact.info.name.last', header: 'Last Name' },
-      { id: 'contact.primary_info.email', header: 'Email' },
-    ],
-  });
-  const collection = state.collection;
-  React.useEffect(() => {
-    collection.bulkSelect.selectAll();
-  }, []);
-
-  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.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(),
-              },
-            ]}
-            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="cancle"
-                >
-                  {selectedValues.map((value, index) => (
-                    <Card>
-                      <Text
-                        key={value.id}
-                        dataHook={`selected-value-text-${index}`}
-                      >
-                        Page: {query.page}; Name: {value.name}
-                      </Text>
-                    </Card>
-                  ))}
-                </CustomModalLayout>
-              </Modal>
-            )}
-            bulkActionToolbar={({ selectedValues, openModal }) => {
-              const disabled = selectedValues.length > 4;
-              return (
-                <MultiBulkActionToolbar
-                  primaryActionItems={[
-                    {
-                      dataHook: 'edit-button',
-                      onClick: openModal,
-                      label: 'Edit',
-                      prefixIcon: <Edit />,
-                      biName: 'edit',
-                    },
-                    {
-                      dataHook: 'download-button',
-                      onClick: openModal,
-                      label: 'Download',
-                      prefixIcon: <Download />,
-                      tooltip: disabled
-                        ? 'Downloading is supported for up to 10 items'
-                        : undefined,
-                      disabled,
-                      biName: 'download',
-                    },
-                  ]}
-                  secondaryActionItems={[
-                    {
-                      dataHook: 'block-button',
-                      onClick: openModal,
-                      label: 'Block',
-                      prefixIcon: <Block />,
-                      biName: 'block',
-                    },
-                    {
-                      dataHook: 'change-button',
-                      onClick: openModal,
-                      label: 'Change',
-                      disabled,
-                      prefixIcon: <ChangeOrder />,
-                      biName: 'change',
-                    },
-                  ]}
-                />
-              );
-            }}
-            exportButton={<ExportButton {...exportConfig} />}
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/ExportTo/export-table-with-selection-bulk-selection.tsx`
 
 ### CTA is out of the table
 
 The export button is out of the table
 
-```tsx
-import { Avatar, Page, Button } from '@wix/design-system';
-import React from 'react';
-import {
-  CollectionToolbarFilters,
-  ExportModal,
-  Filter,
-  Table,
-  PageWrapper,
-  MultiSelectCheckboxFilter,
-  OffsetQuery,
-  stringsArrayFilter,
-  useTableCollection,
-  useExportConfig,
-  useStaticListFilterCollection,
-  ToolbarTitle,
-} from '@wix/patterns';
-import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
-import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
-import { useHttpClient } from '@wix/yoshi-flow-bm';
-
-type ContactsFilters = {
-  level: Filter<string[]>;
-};
-
-function ExportToCTAOutOfTheTable() {
-  const httpClient = useHttpClient();
-
-  const state = useTableCollection<Contact, ContactsFilters>({
-    queryName: 'contacts-ExportToCTAOutOfTheTable',
-    paginationMode: 'offset',
-    itemKey: (item) => item.id as string,
-    itemName: (item) => item.name as string,
-    fetchData: (query: OffsetQuery<ContactsFilters>) => {
-      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,
-        }));
-    },
-    fetchErrorMessage: () => 'Error fetching contacts',
-    filters: {
-      level: stringsArrayFilter({
-        initialValue: ['Beginner'],
-      }),
-    },
-    limit: 50,
-  });
-
-  const { table } = state;
-  const { collection } = table;
-
-  const exportConfig = useExportConfig<Contact, ContactsFilters>({
-    saveAs: ({ wixPatternsQuery }) =>
-      `Contacts [${wixPatternsQuery.filters.level?.join(', ')}]`,
-    transformPlatformizedQuery: ({
-      platformizedQuery,
-      wixPatternsQuery,
-      selectedItems,
-    }) => {
-      // TODO: add logic here
-      return {
-        ...platformizedQuery,
-        paging: {
-          limit: 20,
-        },
-      };
-    },
-    methodMetadata: {
-      artifact: 'com.wixpress.fedinfra.exportservice.export-service',
-      service: 'ExportService',
-      method: 'QueryProductsExportSpi',
-    },
-    fields: [
-      { id: 'contact.id', header: 'id' },
-      { id: 'contact.info.name.first', header: 'First Name' },
-      { id: 'contact.info.name.last', header: 'Last Name' },
-      { id: 'contact.primary_info.email', header: 'Email' },
-    ],
-  });
-
-  const levelsCollection = useStaticListFilterCollection(
-    collection.filters.level,
-    [
-      'Beginner',
-      'Amateur',
-      'Semi-Pro',
-      'Professional',
-      'World Class',
-      'Legendary',
-      'Ultimate',
-    ],
-  );
-
-  return (
-    <PageWrapper>
-      <Page height="400px">
-        <Page.Header
-          actionsBar={
-            <Button onClick={() => table.exportState?.open()}>Export</Button>
-          }
-        />
-        <Page.Content>
-          <Table
-            state={state}
-            title={<ToolbarTitle title="title" showTotal />}
-            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(),
-              },
-            ]}
-            filters={
-              <CollectionToolbarFilters
-                inline={1}
-                panelTitle="Filter your contacts"
-              >
-                <MultiSelectCheckboxFilter
-                  popoverProps={{ appendTo: 'window' }}
-                  filter={collection.filters.level}
-                  collection={levelsCollection}
-                  renderItem={(level) => ({ title: level })}
-                />
-              </CollectionToolbarFilters>
-            }
-            exportModal={<ExportModal {...exportConfig} />}
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/ExportTo/cta-is-out-of-the-table.tsx`
 
 ## API
 
@@ -821,20 +165,12 @@ const exportStateQueryProductsExportSpi = useExport<Product, ProductFilters>({
 
 ### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `transformPlatformizedQuery` | `TransformQuery<T, F>` | No | - | A function to transform the cairo query to a QueryV2 object (which will be used to fetch data from the server): - `platformizedQuery`: QueryV2 - `wixPatternsQuery`: ComputedQueryFull<F> - `selectedItems?`: string[] - `uncheckedValues?`: T[] - `isSelectAll`: boolean The function should return a QueryV2 instance or a promise of QueryV2 |
-| `differentQueryEndpointThanCollection` | `boolean` | No | - | When set to `true`, the export progress will not show total / out of items. |
-| `customTotal` | `CustomTotalFn<T, F>` | No | - | A function that returns the number of total items in the export, to show in the progress bar. Use this option when the export has a different total than the collection itself. For example: table is showing products, but the export includes also variants. The function accepts the same arguments as `transformPlatformizedQuery`, with the following modifications: - `platformizedQuery` is already the transformed QueryV2 returned from `transformPlatformizedQuery` - `collectionTotalPromise` - A promise that resolves to the `total` of the underlying table collection. |
-| `methodMetadata` | `MethodMetadata` | Yes | - | The target endpoint to query data from. This endpoint must be verified to be compatible with export-service first, see [server side docs](https://dev.wix.com/docs/rest/business-management/export/export-async-job-v1/integration) - `artifact: string` - `service: string` - `method: string` |
-| `arrayFieldDelimiter` | `"SEMICOLON" \| "SEMICOLON_AND_SPACE"` | No | `SEMICOLON` | The delimiter to use for array fields |
-| `methodSpec` | `{ requestQueryFieldNumber?: "DEFAULT" \| "FIELD_2" \| "FIELD_3" \| "FIELD_4" \| "FIELD_5" \| "FIELD_6" \| "FIELD_7" \| "FIELD_8" \| "FIELD_9"; responsePagingMetadataFieldName?: string \| ... 1 more ...; responseRepeatedFieldName?: string \| ... 1 more ... \| undefined; } \| undefined` | No | - | Additional endpoint possible variations `requestQueryFieldNumber?: number` - The field number of the request query field. The default is field number = 1 `responseRepeatedFieldName: string \| null` - The name of the response repeated field, i.e items/contacts/products etc. (required) `responsePagingMetadataFieldName?: string \| null` - The name of the response PagingMetadata field (default=paging_metadata) |
-| `fields` | `FieldDescriptor[]` | Yes | - | Translated CSV headers - `id?`: string; The path to the field out of the query response items. You can ask your BED team to create a list of available paths by running this [Scala script](https://bo.wix.com/wix-docs/rest/drafts/exportservice/integration#drafts_exportservice_integration_fields). - `header?`: string; How to present the filed in the CSV headers (translated). |
-| `saveAs` | `SaveAsFn<T, F>` | No | - | Optional function to configure the download file name: - `platformizedQuery`: QueryV2 - `wixPatternsQuery`: ComputedQueryFull<F> - `selectedItems?`: string[] - `uncheckedValues?`: T[] The function should return a string |
-| `exportModalFooter` | `{ text: string; }` | No | - | Optional footer for export modal `text`: string |
-| `exportModalTitle` | `string` | No | - | Optional custom title for the items to export |
-| `onProgressModalTitle` | `string` | No | - | Optional custom title during the export process |
-| `exportToCSVMessage` | `string` | No | - | Optional custom message for the items that will be exported to CSV |
+Read `dist/dts-bundle/components/ExportButton.d.ts` for `ExportTo`'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