@wix/patterns 1.459.0 → 1.461.0

package/dist/docs/Filter Overview/interactive-example.tsx

@@ -0,0 +1,211 @@
+import { Avatar, Badge } from '@wix/design-system';
+import React from 'react';
+/* eslint-disable import/no-extraneous-dependencies */
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  CollectionToolbarFilters,
+  idNameArrayFilter,
+  dateRangeFilter,
+  Table,
+  MultiSelectCheckboxFilter,
+  stringsArrayFilter,
+  stringFilter,
+  useTableCollection,
+  OffsetQuery,
+  CollectionEmptyState,
+  Filter,
+  RangeItem,
+  DateRangeFilter,
+  SingleSelectFilter,
+  MultiInlineCheckboxFilter,
+  useStaticListFilterCollection,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+  lastActivity: Filter<RangeItem<Date>>;
+  locale: Filter<{ id: string; name: string }[]>;
+};
+
+function ContactsTable() {
+
+  const t = (key: string) => key.split('.').pop() || '';
+
+  const fromSearchParams = 'jo';
+
+  const state = useTableCollection<contacts.Contact, ContactsFilters>({
+    search: stringFilter({ initialValue: fromSearchParams }),
+    queryName: 'contacts-Table',
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      if (filters.level) {
+        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
+      }
+
+      if (filters.lastActivity) {
+        queryBuilder = queryBuilder
+          .gt('lastActivity.activityDate', filters.lastActivity.from)
+          .lt('lastActivity.activityDate', filters.lastActivity.to);
+      }
+
+      if (filters.locale) {
+        queryBuilder = queryBuilder.in(
+          'info.locale',
+          filters.locale.map(({ id }) => id),
+        );
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error Fetching Contacts',
+    filters: {
+      level: stringsArrayFilter(),
+      lastActivity: dateRangeFilter(),
+      locale: idNameArrayFilter(),
+    },
+  });
+  const collection = state.collection;
+  const localeCollection = useStaticListFilterCollection(
+    collection.filters.locale,
+    [
+      {
+        id: 'en-US',
+        name: t('contacts.info.locale.en-US'),
+      },
+      {
+        id: 'he-IL',
+        name: t('contacts.info.locale.he-IL'),
+      },
+      {
+        id: 'fr-FR',
+        name: t('contacts.info.locale.fr-FR'),
+      },
+      {
+        id: 'es-ES',
+        name: t('contacts.info.locale.es-ES'),
+      },
+      {
+        id: 'de-DE',
+        name: t('contacts.info.locale.de-DE'),
+      },
+    ],
+  );
+
+  const levelsCollection = useStaticListFilterCollection(
+    collection.filters.level,
+    [
+      'Beginner',
+      'Amateur',
+      'Semi-Pro',
+      'Professional',
+      'World Class',
+      'Legendary',
+      'Ultimate',
+    ],
+  );
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          emptyState={<CollectionEmptyState />}
+          state={state}
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+            {
+              title: 'Level',
+              render: (contact) => contact.info?.jobTitle,
+            },
+            {
+              title: 'Last Activity',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+            },
+            {
+              title: 'Locale',
+              render: (contact) => (
+                <Badge
+                  skin={
+                    contact.info?.locale === 'en-US' ? 'premium' : 'neutral'
+                  }
+                >
+                  {t(`contacts.source.sourceType.${contact.info?.locale}`)}
+                </Badge>
+              ),
+            },
+          ]}
+          filters={
+            <CollectionToolbarFilters
+              panelTitle="Filter your contacts"
+              useNewFilters
+            >
+              <MultiSelectCheckboxFilter
+                popoverProps={{ appendTo: 'window' }}
+                accordionItemProps={{ label: 'Level (Dropdown)' }}
+                filter={collection.filters.level}
+                collection={levelsCollection}
+                renderItem={(level) => ({
+                  title: level,
+                  name: level,
+                })}
+              />
+              <MultiInlineCheckboxFilter
+                popoverProps={{ appendTo: 'window' }}
+                accordionItemProps={{ label: 'Level (CheckboxGroup)' }}
+                filter={collection.filters.level}
+                data={[
+                  'Beginner',
+                  'Amateur',
+                  'Semi-Pro',
+                  'Professional',
+                  'World Class',
+                  'Legendary',
+                  'Ultimate',
+                ]}
+                renderItem={(level, idx) => ({ id: `${idx}`, name: level })}
+              />
+              <DateRangeFilter
+                filter={collection.filters.lastActivity}
+                accordionItemProps={{ label: 'Last Activity' }}
+              />
+              <SingleSelectFilter
+                popoverProps={{ appendTo: 'window' }}
+                filter={collection.filters.locale}
+                accordionItemProps={{ label: 'Locale' }}
+                collection={localeCollection}
+              />
+            </CollectionToolbarFilters>
+          }
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/Filter Overview.md

@@ -247,217 +247,5 @@ Using the knowledge we gained from going through the necessary filters, let's ap
 
 ### Interactive Example
 
-```tsx
-import { Avatar, Badge } from '@wix/design-system';
-import React from 'react';
-/* eslint-disable import/no-extraneous-dependencies */
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  CollectionToolbarFilters,
-  idNameArrayFilter,
-  dateRangeFilter,
-  Table,
-  MultiSelectCheckboxFilter,
-  stringsArrayFilter,
-  stringFilter,
-  useTableCollection,
-  OffsetQuery,
-  CollectionEmptyState,
-  Filter,
-  RangeItem,
-  DateRangeFilter,
-  SingleSelectFilter,
-  MultiInlineCheckboxFilter,
-  useStaticListFilterCollection,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-type ContactsFilters = {
-  level: Filter<string[]>;
-  lastActivity: Filter<RangeItem<Date>>;
-  locale: Filter<{ id: string; name: string }[]>;
-};
-
-function ContactsTable() {
-
-  const t = (key: string) => key.split('.').pop() || '';
-
-  const fromSearchParams = 'jo';
-
-  const state = useTableCollection<contacts.Contact, ContactsFilters>({
-    search: stringFilter({ initialValue: fromSearchParams }),
-    queryName: 'contacts-Table',
-    fetchData: (query: OffsetQuery<ContactsFilters>) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      if (filters.level) {
-        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
-      }
-
-      if (filters.lastActivity) {
-        queryBuilder = queryBuilder
-          .gt('lastActivity.activityDate', filters.lastActivity.from)
-          .lt('lastActivity.activityDate', filters.lastActivity.to);
-      }
-
-      if (filters.locale) {
-        queryBuilder = queryBuilder.in(
-          'info.locale',
-          filters.locale.map(({ id }) => id),
-        );
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchErrorMessage: () => 'Error Fetching Contacts',
-    filters: {
-      level: stringsArrayFilter(),
-      lastActivity: dateRangeFilter(),
-      locale: idNameArrayFilter(),
-    },
-  });
-  const collection = state.collection;
-  const localeCollection = useStaticListFilterCollection(
-    collection.filters.locale,
-    [
-      {
-        id: 'en-US',
-        name: t('contacts.info.locale.en-US'),
-      },
-      {
-        id: 'he-IL',
-        name: t('contacts.info.locale.he-IL'),
-      },
-      {
-        id: 'fr-FR',
-        name: t('contacts.info.locale.fr-FR'),
-      },
-      {
-        id: 'es-ES',
-        name: t('contacts.info.locale.es-ES'),
-      },
-      {
-        id: 'de-DE',
-        name: t('contacts.info.locale.de-DE'),
-      },
-    ],
-  );
-
-  const levelsCollection = useStaticListFilterCollection(
-    collection.filters.level,
-    [
-      'Beginner',
-      'Amateur',
-      'Semi-Pro',
-      'Professional',
-      'World Class',
-      'Legendary',
-      'Ultimate',
-    ],
-  );
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          emptyState={<CollectionEmptyState />}
-          state={state}
-          columns={[
-            {
-              title: '',
-              width: '50px',
-              render: (contact) => (
-                <Avatar
-                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
-                  imgProps={{ src: contact.info?.picture?.image }}
-                />
-              ),
-            },
-            {
-              title: 'Name',
-              width: '250px',
-              render: (contact) =>
-                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-            },
-            {
-              title: 'Level',
-              render: (contact) => contact.info?.jobTitle,
-            },
-            {
-              title: 'Last Activity',
-              render: (contact) =>
-                contact.lastActivity?.activityDate?.toLocaleString(),
-            },
-            {
-              title: 'Locale',
-              render: (contact) => (
-                <Badge
-                  skin={
-                    contact.info?.locale === 'en-US' ? 'premium' : 'neutral'
-                  }
-                >
-                  {t(`contacts.source.sourceType.${contact.info?.locale}`)}
-                </Badge>
-              ),
-            },
-          ]}
-          filters={
-            <CollectionToolbarFilters
-              panelTitle="Filter your contacts"
-              useNewFilters
-            >
-              <MultiSelectCheckboxFilter
-                popoverProps={{ appendTo: 'window' }}
-                accordionItemProps={{ label: 'Level (Dropdown)' }}
-                filter={collection.filters.level}
-                collection={levelsCollection}
-                renderItem={(level) => ({
-                  title: level,
-                  name: level,
-                })}
-              />
-              <MultiInlineCheckboxFilter
-                popoverProps={{ appendTo: 'window' }}
-                accordionItemProps={{ label: 'Level (CheckboxGroup)' }}
-                filter={collection.filters.level}
-                data={[
-                  'Beginner',
-                  'Amateur',
-                  'Semi-Pro',
-                  'Professional',
-                  'World Class',
-                  'Legendary',
-                  'Ultimate',
-                ]}
-                renderItem={(level, idx) => ({ id: `${idx}`, name: level })}
-              />
-              <DateRangeFilter
-                filter={collection.filters.lastActivity}
-                accordionItemProps={{ label: 'Last Activity' }}
-              />
-              <SingleSelectFilter
-                popoverProps={{ appendTo: 'window' }}
-                filter={collection.filters.locale}
-                accordionItemProps={{ label: 'Locale' }}
-                collection={localeCollection}
-              />
-            </CollectionToolbarFilters>
-          }
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/Filter Overview/interactive-example.tsx`
 

package/dist/docs/FilterProps.md

@@ -10,17 +10,10 @@ The base filter component interface used by all filter types in Wix Patterns. Ea
 
 ### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `filter` | `Filter<T>` | Yes | - | A filter state object such as [ArrayFilter](./?path=/story/features-filter-factories--arrayfilter) |
-| `fieldType` | `"SHORT_TEXT" \| "LONG_TEXT" \| "NUMBER" \| "BOOLEAN" \| "DATE" \| "DATE_TIME" \| "DATETIME" \| "TIME" \| "URL" \| "EMAIL" \| "IMAGE" \| "MEDIA_GALLERY" \| "AUDIO" \| "DOCUMENT" \| "MULTI_DOCUMENT" \| "RICH_TEXT" \| "RICH_CONTENT" \| "REFERENCE" \| "MULTI_REFERENCE" \| "OBJECT" \| "ARRAY" \| "ADDRESS" \| "COLOR" \| "INTEGER" \| "DECIMAL" \| "CHECKBOX" \| "DROPDOWN" \| "FILES" \| "MULTI_SELECT"` | No | - | The field type string used to resolve a prefix icon for the filter. Cairo maps this to the appropriate icon internally. |
-| `layout` | `"button"` | No | - | Padding settings. If this prop it omitted, padding will exist on the sides of the filter.<br> <br> Supported values: <br> - `"button"`: Removes padding from the sides of the filter. |
-| `toolbarItemProps` | `{ label?: ReactNode; }` | No | - | Customizes the filter in the toolbar.<br> <br> Supported properties: <br> - `label`: [string] Prefix for the filter element. |
-| `toolbarTagProps` | `{ label?: string; }` | No | - | Customizes the filter tag in the toolbar.<br> <br> Supported properties: <br> - `label`: [string] Overrides the default filter name when filtered tag is shown. |
-| `initiallyOpen` | `boolean` | No | - | Indicates whether the filter should be visible by default in the filters panel |
-| `accordionItemProps` | `(AccordionItemType & { label?: string; })` | No | - | Customizes the filter [accordion](https://www.docs.wixdesignsystem.com/?path=/story/components-lists--accordion).<br> <br> Supported properties: <br> - `label`: [string] Accordion item title. You can also use `AccordionProps['items'][number].title` for more flexibility. <br> - Extends [AccordionProps['items'[number]](https://www.docs.wixdesignsystem.com/?path=/story/components-lists--accordion). |
-| `popoverProps` | `PopoverCommonProps` | No | - | @deprecated |
-| `onAppliedFilterTagRemove` | `((item: FilterItem<T>) => unknown)` | No | - | Callback that's run when a filter is removed by a visitor from the sub-toolbar. @param item |
-| `renderToolbarTag` | `((item: FilterItem<T>) => Partial<TagListTag>)` | No | - | Customizes how the tag list in the sub-toolbar is rendered. <br><br> Extends [`TagListProps['tags'][number]`](https://www.docs.wixdesignsystem.com/?path=/story/components-lists-table--taglist). |
-| `sectionTitle` | `string` | No | - | Title for the section in the accordion. |
+Read `dist/dts-bundle/types/FilterProps.d.ts` for `FilterProps`'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.
 

package/dist/docs/Grid/card-with-a-cta-that-opens-a-modal.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import { Grid, useGridCollection } from '@wix/patterns';
+import {
+  AddItem,
+  Box,
+  CustomModalLayout,
+  Input,
+  Loader,
+  Modal,
+  TextButton,
+} from '@wix/design-system';
+import { contacts } from '@wix/crm';
+
+function AddItemCardWithModal() {
+
+  const grid = useGridCollection<contacts.Contact>({
+    queryName: 'contacts-AddItemCardWithModal',
+    paginationMode: 'offset',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchData: (query) => {
+      const { limit, offset, search } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [] }) => {
+        const limitedItems = items.slice(0, 4);
+        return {
+          items: limitedItems,
+          total: limitedItems.length,
+        };
+      });
+    },
+    fetchErrorMessage: ({ err }) => String(err),
+  });
+
+  const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
+  const [submitted, setSubmitted] = React.useState(false);
+  const [contactName, setContactName] = React.useState('');
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Grid
+          state={grid}
+          renderAddItem={() => (
+            <AddItem
+              size="medium"
+              onClick={() => {
+                setIsModalOpen(true);
+              }}
+            >
+              <TextButton>New Item</TextButton>
+            </AddItem>
+          )}
+          renderItem={(item) => ({
+            primaryActionProps: { label: item.info?.jobTitle },
+          })}
+        />
+
+        <Modal isOpen={isModalOpen}>
+          <CustomModalLayout
+            title="Create New Contact"
+            primaryButtonText={submitted ? undefined : 'Save'}
+            primaryButtonProps={{
+              children: submitted && (
+                <Box align="center" verticalAlign="middle" position="relative">
+                  <Box visibility="hidden">Save</Box>
+                  <Box position="absolute">
+                    <Loader size="tiny" />
+                  </Box>
+                </Box>
+              ),
+            }}
+            secondaryButtonText="Cancel"
+            primaryButtonOnClick={() => {
+              setSubmitted(true);
+              window.setTimeout(() => setIsModalOpen(false), 1000);
+            }}
+            onCloseButtonClick={() => {
+              setIsModalOpen(false);
+            }}
+            secondaryButtonOnClick={() => {
+              setIsModalOpen(false);
+            }}
+            overflowY="none"
+          >
+            <Input
+              placeholder="Contact Name"
+              value={contactName}
+              onChange={(e) => setContactName(e.target.value)}
+            />
+          </CustomModalLayout>
+        </Modal>
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/Grid/card-with-a-cta-that-opens-a-popup.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { AddItem, Box, Layout, Popover, TextButton } from '@wix/design-system';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  Grid,
+  stringsArrayFilter,
+  ToolbarTitle,
+  useGridCollection,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function AddItemCardWithPopoverMenu() {
+
+  const grid = useGridCollection<contacts.Contact>({
+    queryName: 'contacts-AddItemCardWithPopoverMenu',
+    paginationMode: 'offset',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchData: (query) => {
+      const { limit, offset, search } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [] }) => {
+        const limitedItems = items.slice(0, 4);
+        return {
+          items: limitedItems,
+          total: limitedItems.length,
+        };
+      });
+    },
+    fetchErrorMessage: ({ err }) => String(err),
+    filters: {
+      level: stringsArrayFilter(),
+    },
+  });
+
+  const [shown, setShown] = React.useState<boolean>(false);
+
+  const addItemChildNode = (
+    <Layout cols={1} justifyItems="center">
+      <Popover shown={shown} placement="bottom" appendTo="scrollParent">
+        <Popover.Element>
+          <TextButton
+            onClick={() => {
+              setShown(!shown);
+            }}
+          >
+            New Item
+          </TextButton>
+        </Popover.Element>
+        <Popover.Content>
+          <Box padding="12px 24px" direction="vertical" maxWidth="200px">
+            Can be any react node!
+          </Box>
+        </Popover.Content>
+      </Popover>
+    </Layout>
+  );
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Grid
+          title={<ToolbarTitle title="Contacts list" />}
+          state={grid}
+          preset="full"
+          renderAddItem={() => (
+            <AddItem
+              size="medium"
+              children={addItemChildNode}
+              onClick={() => {
+                setShown(!shown);
+              }}
+            />
+          )}
+          renderItem={(item) => ({
+            key: item._id,
+            primaryActionProps: { label: item.info?.jobTitle },
+            title: `${item.info?.name?.first} ${item.info?.name?.last}`,
+            subtitle: item.info?.jobTitle,
+          })}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}