@wix/patterns 1.459.0 → 1.461.0

package/dist/docs/Indeterminate.md

@@ -8,266 +8,11 @@
 
 ### Items indeterminate status
 
-```tsx
-import { Avatar, EmptyState, Page } from '@wix/design-system';
-import React from 'react';
-import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
-import {
-  Filter,
-  OffsetQuery,
-  PickerContent,
-  PickerContentComponentProps,
-  PickerModal,
-  PickerModalOpenButton,
-  PickerSelection,
-  stringsArrayFilter,
-  usePickerContent,
-} from '@wix/patterns';
-import { usePickerModal } from '@wix/patterns/essentials';
-import {
-  useEnvironment,
-  useErrorMonitor,
-  useHttpClient,
-} from '@wix/fe-essentials/react';
-import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
-
-type ContactsFilters = {
-  level: Filter<string[]>;
-};
-
-function PickerModalIndeterminate() {
-  const environment = useEnvironment();
-  const httpClient = useHttpClient();
-  const errorMonitor = useErrorMonitor();
-
-  const selection = React.useRef<PickerSelection<Contact>>({});
-
-  // Usually we will extract this component to a separate file and use dynamic import when passing it as `pickerContentComponent`
-  const pickerContentComponent = async () => ({
-    default: function ContactsPicker(
-      props: PickerContentComponentProps<Contact, ContactsFilters>,
-    ) {
-      const state = usePickerContent({
-        fetchErrorMessage: ({ err }) => String(err),
-        modalState: props.modalState,
-        filters: {
-          level: stringsArrayFilter(props.modalState.filters.level),
-        },
-        initialSelect: selection.current,
-      });
-
-      return (
-        <PickerContent
-          state={state}
-          renderItem={(contact) => ({
-            subtitle: contact.level,
-            image: <Avatar size="size60" shape="square" name={contact.name} />,
-          })}
-          renderEmptyState={() => (
-            <EmptyState title="You don’t have any contacts that support this action." />
-          )}
-          {...props}
-        />
-      );
-    },
-  });
-
-  const state = usePickerModal<Contact, ContactsFilters>({
-    queryName: 'PickerModalIndeterminate',
-    fetchInitialProps: () => {
-      return httpClient
-        .request(
-          queryContacts({
-            query: { paging: { limit: 25, offset: 0 }, filter: {} },
-          }),
-        )
-        .then(({ data: { contacts = [] } }) => {
-          selection.current = {
-            partiallySelectedIds: contacts
-              .slice(3, 6)
-              .map((c) => c.id 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 as Contact[],
-          total: pagingMetadata?.total,
-        }));
-    },
-    limit: 100,
-    pickerContentComponent,
-    onSelect: (_contacts, { values, defaultStatus }) => {
-      selection.current = {
-        values,
-        defaultStatus,
-      };
-    },
-  });
-
-  return (
-    <Page>
-      <Page.Header
-        title="Picker Modal Example"
-        actionsBar={
-          <>
-            <PickerModalOpenButton state={state}>
-              Select Contacts
-            </PickerModalOpenButton>
-
-            <PickerModal
-              title="Select Contacts"
-              state={state}
-              multiple
-              renderError={({ err }) => <EmptyState title={String(err)} />}
-            />
-          </>
-        }
-      />
-    </Page>
-  );
-}
-```
+Example code: read `dist/docs/Indeterminate/items-indeterminate-status.tsx`
 
 ---
 
 ### All indeterminate
 
-```tsx
-import { Avatar, EmptyState, Page } from '@wix/design-system';
-import React from 'react';
-import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
-import {
-  Filter,
-  OffsetQuery,
-  PickerContent,
-  PickerContentComponentProps,
-  PickerModal,
-  PickerModalOpenButton,
-  PickerSelection,
-  stringsArrayFilter,
-  usePickerContent,
-} from '@wix/patterns';
-import { usePickerModal } from '@wix/patterns/essentials';
-import {
-  useEnvironment,
-  useErrorMonitor,
-  useHttpClient,
-} from '@wix/fe-essentials/react';
-import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
-
-type ContactsFilters = {
-  level: Filter<string[]>;
-};
-
-function PickerModalAllIndeterminate() {
-  const environment = useEnvironment();
-  const httpClient = useHttpClient();
-  const errorMonitor = useErrorMonitor();
-
-  const selection = React.useRef<PickerSelection<Contact>>({
-    defaultStatus: 'indeterminate',
-  });
-
-  // Usually we will extract this component to a separate file and use dynamic import when passing it as `pickerContentComponent`
-  const pickerContentComponent = async () => ({
-    default: function ContactsPicker(
-      props: PickerContentComponentProps<Contact, ContactsFilters>,
-    ) {
-      const state = usePickerContent({
-        fetchErrorMessage: ({ err }) => String(err),
-        modalState: props.modalState,
-        filters: {
-          level: stringsArrayFilter(props.modalState.filters.level),
-        },
-        initialSelect: selection.current,
-      });
-
-      return (
-        <PickerContent
-          state={state}
-          renderItem={(contact) => ({
-            subtitle: contact.level,
-            image: <Avatar size="size60" shape="square" name={contact.name} />,
-          })}
-          renderEmptyState={() => (
-            <EmptyState title="You don’t have any contacts that support this action." />
-          )}
-          {...props}
-        />
-      );
-    },
-  });
-
-  const state = usePickerModal<Contact, ContactsFilters>({
-    queryName: 'PickerModalAllIndeterminate',
-    fetchInitialProps: () => {
-      return httpClient.request(
-        queryContacts({
-          query: { paging: { limit: 25, offset: 0 }, filter: {} },
-        }),
-      );
-    },
-    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 as Contact[],
-          total: pagingMetadata?.total,
-        }));
-    },
-    limit: 100,
-    pickerContentComponent,
-    onSelect: (_contacts, { values, defaultStatus }) => {
-      selection.current = {
-        values: values.map(({ value, status }) => ({
-          value,
-          status: status.isIndeterminate
-            ? 'indeterminate'
-            : status.isChecked
-            ? 'checked'
-            : 'unchecked', // reset non-indeterminate to regular checked->unchecked mode
-        })),
-        defaultStatus,
-      };
-    },
-  });
-
-  return (
-    <Page>
-      <Page.Header
-        title="Picker Modal Example"
-        actionsBar={
-          <>
-            <PickerModalOpenButton state={state}>
-              Select Contacts
-            </PickerModalOpenButton>
-
-            <PickerModal
-              title="Select Contacts"
-              state={state}
-              multiple
-              renderError={({ err }) => <EmptyState title={String(err)} />}
-            />
-          </>
-        }
-      />
-    </Page>
-  );
-}
-```
+Example code: read `dist/docs/Indeterminate/all-indeterminate.tsx`
 

package/dist/docs/Internal Scroll/full-width-section.tsx

@@ -0,0 +1,96 @@
+import { Avatar, Box, Card } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  OffsetQuery,
+  TableGridSwitch,
+  useTableGridSwitchCollection,
+  useOptimisticActions,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function FullWidthInternalScroll() {
+
+  const state = useTableGridSwitchCollection<contacts.Contact>({
+    queryName: 'TableGridSwitchNarrowInternalScroll',
+    paginationMode: 'offset',
+    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,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    limit: 50,
+    filters: {},
+  });
+
+  useOptimisticActions(state.collection);
+
+  return (
+    <CollectionPage height="622px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Box direction="vertical" gap="SP3">
+          <Card>
+            <Card.Header title="Content Above" />
+            <Card.Content>
+              <Box width="100%" height="130px" />
+            </Card.Content>
+          </Card>
+          <Box
+            direction="vertical"
+            width="100%"
+            maxHeight="482px"
+            overflow="hidden"
+          >
+            <TableGridSwitch
+              state={state}
+              internalScroll
+              columns={[
+                {
+                  id: 'avatar',
+                  title: '',
+                  hideable: true,
+                  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: 'Last Activity',
+                  render: (contact) =>
+                    contact.lastActivity?.activityDate?.toLocaleString(),
+                },
+              ]}
+            />
+          </Box>
+          <Card>
+            <Card.Header title="Content Below" />
+            <Card.Content>
+              <Box width="100%" height="130px" />
+            </Card.Content>
+          </Card>
+        </Box>
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/Internal Scroll/narrow-side-section.tsx

@@ -0,0 +1,82 @@
+import { Avatar, Box, Card } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  OffsetQuery,
+  TableGridSwitch,
+  useTableGridSwitchCollection,
+  useOptimisticActions,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function NarrowInternalScroll() {
+
+  const state = useTableGridSwitchCollection<contacts.Contact>({
+    queryName: 'TableGridSwitchNarrowInternalScroll',
+    paginationMode: 'offset',
+    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,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    limit: 50,
+    filters: {},
+  });
+
+  useOptimisticActions(state.collection);
+
+  return (
+    <CollectionPage height="622px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Box direction="horizontal" gap="SP3" width="100%" height="482px">
+          <Box direction="vertical" width="390px" height="100%">
+            <TableGridSwitch
+              state={state}
+              internalScroll
+              columns={[
+                {
+                  id: 'avatar',
+                  title: '',
+                  hideable: true,
+                  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}`,
+                },
+              ]}
+            />
+          </Box>
+          <Box direction="vertical" overflow="auto" flex={1} height="100%">
+            <Card>
+              <Card.Header title="Content" />
+              <Card.Content>
+                <Box width="100%" height="4000px" />
+              </Card.Content>
+            </Card>
+          </Box>
+        </Box>
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/Internal Scroll.md

@@ -24,193 +24,13 @@ The "internalScroll" prop enables internal scrolling within the component itself
 
 ### Full Width Section
 
-```tsx
-import { Avatar, Box, Card } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  OffsetQuery,
-  TableGridSwitch,
-  useTableGridSwitchCollection,
-  useOptimisticActions,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function FullWidthInternalScroll() {
-
-  const state = useTableGridSwitchCollection<contacts.Contact>({
-    queryName: 'TableGridSwitchNarrowInternalScroll',
-    paginationMode: 'offset',
-    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,
-      }));
-    },
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchErrorMessage: () => 'Error fetching contacts',
-    limit: 50,
-    filters: {},
-  });
-
-  useOptimisticActions(state.collection);
-
-  return (
-    <CollectionPage height="622px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Box direction="vertical" gap="SP3">
-          <Card>
-            <Card.Header title="Content Above" />
-            <Card.Content>
-              <Box width="100%" height="130px" />
-            </Card.Content>
-          </Card>
-          <Box
-            direction="vertical"
-            width="100%"
-            maxHeight="482px"
-            overflow="hidden"
-          >
-            <TableGridSwitch
-              state={state}
-              internalScroll
-              columns={[
-                {
-                  id: 'avatar',
-                  title: '',
-                  hideable: true,
-                  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: 'Last Activity',
-                  render: (contact) =>
-                    contact.lastActivity?.activityDate?.toLocaleString(),
-                },
-              ]}
-            />
-          </Box>
-          <Card>
-            <Card.Header title="Content Below" />
-            <Card.Content>
-              <Box width="100%" height="130px" />
-            </Card.Content>
-          </Card>
-        </Box>
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/Internal Scroll/full-width-section.tsx`
 
 ---
 
 ### Narrow Side Section
 
-```tsx
-import { Avatar, Box, Card } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  OffsetQuery,
-  TableGridSwitch,
-  useTableGridSwitchCollection,
-  useOptimisticActions,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function NarrowInternalScroll() {
-
-  const state = useTableGridSwitchCollection<contacts.Contact>({
-    queryName: 'TableGridSwitchNarrowInternalScroll',
-    paginationMode: 'offset',
-    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,
-      }));
-    },
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchErrorMessage: () => 'Error fetching contacts',
-    limit: 50,
-    filters: {},
-  });
-
-  useOptimisticActions(state.collection);
-
-  return (
-    <CollectionPage height="622px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Box direction="horizontal" gap="SP3" width="100%" height="482px">
-          <Box direction="vertical" width="390px" height="100%">
-            <TableGridSwitch
-              state={state}
-              internalScroll
-              columns={[
-                {
-                  id: 'avatar',
-                  title: '',
-                  hideable: true,
-                  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}`,
-                },
-              ]}
-            />
-          </Box>
-          <Box direction="vertical" overflow="auto" flex={1} height="100%">
-            <Card>
-              <Card.Header title="Content" />
-              <Card.Content>
-                <Box width="100%" height="4000px" />
-              </Card.Content>
-            </Card>
-          </Box>
-        </Box>
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/Internal Scroll/narrow-side-section.tsx`
 
 ## BI