@wix/patterns 1.458.0 → 1.460.0

package/dist/docs/Tags.md

@@ -119,98 +119,7 @@ import { CollectionPage } from '@wix/patterns/page';
 
 WixPatterns tags provide a default column, filtering, and bulk action for assigning tags.
 
-```tsx
-/* eslint-disable */
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Table,
-  Tags,
-  useTableCollection,
-  MultiBulkActionToolbar,
-} from '@wix/patterns';
-import {
-  DummyEntity,
-  Tags as TagsType,
-} from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
-
-function Basic() {
-  const contacts: DummyEntity[] = [
-    {
-      id: '1',
-      name: 'Sadie Ramirez',
-      tags: { privateTags: { tagIds: ['1', '2', '4'] } },
-    },
-    {
-      id: '2',
-      name: 'Jose Pittman	',
-      tags: { privateTags: { tagIds: [] } },
-    },
-    {
-      id: '3',
-      name: 'Garrett Graves	',
-      tags: { privateTags: { tagIds: ['4'] } },
-    },
-  ];
-
-  const state = useTableCollection<DummyEntity>({
-    queryName: 'contacts-table',
-    paginationMode: 'offset',
-    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
-    fetchData: async ({ search = '' }) => {
-      // your code to fetch the entity's tags
-      return {
-        total: contacts.length,
-        items: contacts,
-      };
-    },
-    fetchErrorMessage: ({ err }) => `Error: ${err}`,
-    itemKey: (item) => item.id!,
-    itemName: (item) => item.name!,
-  });
-
-  const handleBulkUpdateTags = ({
-    entityIds,
-    assignTags,
-    unassignTags,
-  }: {
-    entityIds: string[];
-    assignTags: TagsType;
-    unassignTags: TagsType;
-  }) => {
-    // your code to update the server
-
-    return Promise.resolve();
-  };
-
-  return (
-    <CollectionPage>
-      <CollectionPage.Header title={{ text: "Contacts" }} />
-      <CollectionPage.Content>
-        <Table
-          state={state}
-          tags={
-            <Tags
-              entityTypeName="Contact"
-              bulkUpdateTags={handleBulkUpdateTags}
-            />
-          }
-          columns={[
-            {
-              id: 'name',
-              hideable: false,
-              title: 'Name',
-              render: (item) => item.name,
-              width: '250px',
-            },
-          ]}
-          bulkActionToolbar={() => <MultiBulkActionToolbar />}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/Tags/basic.tsx`
 
 ---
 
@@ -218,102 +127,7 @@ function Basic() {
 
 Position the "Tags" column differently in your table.
 
-```tsx
-/* eslint-disable */
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Table,
-  Tags,
-  useTagsColumn,
-  useTableCollection,
-  CustomColumns,
-} from '@wix/patterns';
-import {
-  DummyEntity,
-  Tags as TagsType,
-} from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
-
-function CustomizedTagsColumnPosition() {
-  const contacts: DummyEntity[] = [
-    {
-      id: '1',
-      name: 'Sadie Ramirez',
-      tags: { privateTags: { tagIds: ['1', '2', '4'] } },
-    },
-    {
-      id: '2',
-      name: 'Jose Pittman	',
-      tags: { privateTags: { tagIds: [] } },
-    },
-    {
-      id: '3',
-      name: 'Garrett Graves	',
-      tags: { privateTags: { tagIds: ['4'] } },
-    },
-  ];
-
-  const state = useTableCollection<DummyEntity>({
-    queryName: 'contacts-table',
-    paginationMode: 'offset',
-    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
-    fetchData: async ({ search = '' }) => {
-      // your code to fetch the entity's tags
-      return {
-        total: contacts.length,
-        items: contacts,
-      };
-    },
-    fetchErrorMessage: ({ err }) => `Error: ${err}`,
-    itemKey: (item) => item.id!,
-    itemName: (item) => item.name!,
-  });
-
-  const { buildTagsColumn } = useTagsColumn<DummyEntity>();
-
-  const handleBulkUpdateTags = ({
-    entityIds,
-    assignTags,
-    unassignTags,
-  }: {
-    entityIds: string[];
-    assignTags: TagsType;
-    unassignTags: TagsType;
-  }) => {
-    // your code to update the server
-
-    return Promise.resolve();
-  };
-
-  return (
-    <CollectionPage>
-      <CollectionPage.Header title={{text: "Contacts" }} />
-      <CollectionPage.Content>
-        <Table
-          state={state}
-          customColumns={<CustomColumns />}
-          tags={
-            <Tags
-              entityTypeName="Contact"
-              bulkUpdateTags={handleBulkUpdateTags}
-            />
-          }
-          columns={[
-            buildTagsColumn(),
-            {
-              id: 'name',
-              hideable: false,
-              title: 'Name',
-              render: (item) => item.name,
-              width: '250px',
-            },
-          ]}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/Tags/customized-tags-column-position.tsx`
 
 ---
 
@@ -321,103 +135,7 @@ function CustomizedTagsColumnPosition() {
 
 Config the Tags column props. In this example the column the defaultHidden is false
 
-```tsx
-/* eslint-disable */
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Table,
-  Tags,
-  useTagsColumn,
-  useTableCollection,
-  CustomColumns,
-} from '@wix/patterns';
-import {
-  DummyEntity,
-  Tags as TagsType,
-} from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
-
-function CustomizedTagsColumnPosition() {
-  const contacts: DummyEntity[] = [
-    {
-      id: '1',
-      name: 'Sadie Ramirez',
-      tags: { privateTags: { tagIds: ['1', '2', '4'] } },
-    },
-    {
-      id: '2',
-      name: 'Jose Pittman	',
-      tags: { privateTags: { tagIds: [] } },
-    },
-    {
-      id: '3',
-      name: 'Garrett Graves	',
-      tags: { privateTags: { tagIds: ['4'] } },
-    },
-  ];
-
-  const state = useTableCollection<DummyEntity>({
-    queryName: 'contacts-table',
-    paginationMode: 'offset',
-    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
-    fetchData: async ({ search = '' }) => {
-      // your code to fetch the entity's tags
-      return {
-        total: contacts.length,
-        items: contacts,
-      };
-    },
-    fetchErrorMessage: ({ err }) => `Error: ${err}`,
-    itemKey: (item) => item.id!,
-    itemName: (item) => item.name!,
-  });
-
-  const { buildTagsColumn } = useTagsColumn<DummyEntity>();
-
-  const handleBulkUpdateTags = ({
-    entityIds,
-    assignTags,
-    unassignTags,
-  }: {
-    entityIds: string[];
-    assignTags: TagsType;
-    unassignTags: TagsType;
-  }) => {
-    // your code to update the server
-
-    return Promise.resolve();
-  };
-
-  return (
-    <CollectionPage>
-      <CollectionPage.Header title={{ text: "Contacts" }} />
-      <CollectionPage.Content>
-        <Table
-          state={state}
-          customColumns={<CustomColumns />}
-          tags={
-            <Tags
-              entityTypeName="Contact"
-              bulkUpdateTags={handleBulkUpdateTags}
-              columnConfig={{ defaultHidden: false }} // Config here if you use the default position of tags columns
-            />
-          }
-          columns={[
-            buildTagsColumn({ defaultHidden: false }), // Config here if you use the custom position of tags columns
-            {
-              id: 'name',
-              hideable: false,
-              title: 'Name',
-              render: (item) => item.name,
-              width: '250px',
-            },
-          ]}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/Tags/custom-config-for-tags-column.tsx`
 
 ---
 
@@ -425,129 +143,7 @@ function CustomizedTagsColumnPosition() {
 
 Locate the Tags filter in a different position on your filters side panel or toolbar.
 
-```tsx
-/* eslint-disable */
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  CollectionToolbarFilters,
-  Table,
-  MultiSelectCheckboxFilter,
-  Tags,
-  idNameArrayFilter,
-  useTagsFilter,
-  useTableCollection,
-  useStaticListFilterCollection,
-} from '@wix/patterns';
-import {
-  DummyEntity,
-  Tags as TagsType,
-} from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
-
-function CustomizedFilterPosition() {
-  const [filter] = React.useState(() => idNameArrayFilter());
-
-  const filterCollection = useStaticListFilterCollection(
-    filter,
-    [
-      'Beginner',
-      'Amateur',
-      'Semi-Pro',
-      'Professional',
-      'World Class',
-      'Legendary',
-      'Ultimate',
-    ].map((name) => ({ id: name, name })),
-  );
-
-  const contacts: DummyEntity[] = [
-    {
-      id: '1',
-      name: 'Sadie Ramirez',
-      tags: { privateTags: { tagIds: ['1', '2', '4'] } },
-    },
-    {
-      id: '2',
-      name: 'Jose Pittman	',
-      tags: { privateTags: { tagIds: [] } },
-    },
-    {
-      id: '3',
-      name: 'Garrett Graves	',
-      tags: { privateTags: { tagIds: ['4'] } },
-    },
-  ];
-
-  const state = useTableCollection<DummyEntity>({
-    queryName: 'contacts-table',
-    paginationMode: 'offset',
-    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
-    fetchData: async ({ search = '' }) => {
-      // your code to fetch the entity's tags
-      return {
-        total: contacts.length,
-        items: contacts,
-      };
-    },
-    fetchErrorMessage: ({ err }) => `Error: ${err}`,
-    itemKey: (item) => item.id!,
-    itemName: (item) => item.name!,
-  });
-
-  const { buildTagsFilter } = useTagsFilter(state);
-  const tagsFilter = buildTagsFilter();
-
-  const handleBulkUpdateTags = ({
-    entityIds,
-    assignTags,
-    unassignTags,
-  }: {
-    entityIds: string[];
-    assignTags: TagsType;
-    unassignTags: TagsType;
-  }) => {
-    // your code to update the server
-
-    return Promise.resolve();
-  };
-
-  return (
-    <CollectionPage>
-      <CollectionPage.Header title={{ text: "Contacts" }} />
-      <CollectionPage.Content>
-        <Table
-          state={state}
-          tags={
-            <Tags
-              entityTypeName="Contact"
-              bulkUpdateTags={handleBulkUpdateTags}
-            />
-          }
-          columns={[
-            {
-              id: 'name',
-              hideable: false,
-              title: 'Name',
-              render: (item) => item.name,
-              width: '250px',
-            },
-          ]}
-          filters={
-            <CollectionToolbarFilters>
-              {tagsFilter}
-              <MultiSelectCheckboxFilter
-                popoverProps={{ appendTo: 'window' }}
-                filter={filter}
-                collection={filterCollection}
-              />
-            </CollectionToolbarFilters>
-          }
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/Tags/customized-filter-position.tsx`
 
 ---
 
@@ -555,132 +151,7 @@ function CustomizedFilterPosition() {
 
 This example shows a `TableFolders` component with tags. Note that you can only assign tags to table items and not to folders.
 
-```tsx
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  TagsFolders,
-  MultiBulkActionToolbar,
-  useCollection,
-  TableFolders,
-  useTableFolders,
-  CustomColumns,
-  OffsetQuery,
-} from '@wix/patterns';
-import { Tags as TagsType } from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
-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';
-
-function TagsOnTableFolders() {
-  const httpClient = useHttpClient();
-
-  const collection = useCollection<Contact>({
-    queryName: 'tableitems',
-    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
-    itemKey: (item) => item.id as string,
-    itemName: (item) => item.name as string,
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-      return httpClient
-        .request(
-          queryContacts({
-            query: { paging: { limit, offset }, filter: filters },
-            search,
-          }),
-        )
-        .then((res) => {
-          const {
-            data: { contacts = [], pagingMetadata },
-          } = res;
-          return {
-            items: contacts,
-            total: pagingMetadata?.total,
-          };
-        });
-    },
-    fetchErrorMessage: ({ err }) => String(err),
-  });
-
-  // Note: This is only for demo/mock purposes.
-  // In real usage, you should use your actual API method to fetch folders
-  const foldersCollection = useCollection<Contact>({
-    queryName: 'tablefolders',
-    paginationMode: 'offset',
-    itemName: (item) => item.name as string,
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-      return httpClient
-        .request(
-          queryContacts({
-            query: { paging: { limit: 2, offset }, filter: filters },
-            search,
-          }),
-        )
-        .then((res) => {
-          const {
-            data: { contacts = [], pagingMetadata },
-          } = res;
-          return {
-            items: contacts.map((contact) => ({
-              ...contact,
-              id: `folder-${contact.id}`,
-            })),
-            total: 2,
-          };
-        });
-    },
-    fetchErrorMessage: ({ err }) => String(err),
-  });
-
-  const componentState = useTableFolders({
-    items: collection,
-    folders: foldersCollection,
-  });
-
-  const handleBulkUpdateTags = ({
-    entityIds,
-    assignTags,
-    unassignTags,
-  }: {
-    entityIds: string[];
-    assignTags: TagsType;
-    unassignTags: TagsType;
-  }) => {
-    // your code to update the server
-    return Promise.resolve();
-  };
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <TableFolders
-          state={componentState}
-          tags={
-            <TagsFolders
-              entityTypeName="Contact"
-              bulkUpdateTags={handleBulkUpdateTags}
-            />
-          }
-          customColumns={<CustomColumns />}
-          columns={[
-            {
-              id: 'name',
-              hideable: false,
-              title: 'Name',
-              render: (contact) => contact.name,
-              renderFolder: (folder) => folder.name,
-              width: '250px',
-            },
-          ]}
-          bulkActionToolbar={() => <MultiBulkActionToolbar />}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/Tags/on-table-with-folders.tsx`
 
 ## API
 

package/dist/docs/ToolbarCollectionState.md

@@ -14,6 +14,6 @@
 |------|------|----------|---------|-------------|
 | `closeSidePanel` | `() => void` | Yes | - | Closes WixPatterns side panel |
 | `openFiltersPanel` | `() => void` | Yes | - | Opens the filters side panel |
-| `openCustomFieldModal` | `() => void` | Yes | - | Opens the custom field modal on create mode |
+| `openCustomFieldModal` | `(opts?: Pick<OpenFieldModalOptions, "customOrigin" \| "initialField" \| "lockedProperties"> \| undefined) => void` | Yes | - | Opens the custom field modal on create mode. `initialField` prefills the type and/or name; `lockedProperties` makes either of those non-editable. |
 | `getPendingFilter` | `<A>(filter: A) => Filter<any> \| A` | Yes | - | Use this function when using [AddApplyFiltersButton](./?path=/story/features-filter-components--toolbarfilters#Apply_changes) to obtain a reference to the filter that is about to be applied. This is useful when you want to modify the filter value within a custom filter component. |