@wix/patterns 1.366.0 → 1.369.0

package/dist/docs/ToolbarSecondaryActions.md

@@ -0,0 +1,383 @@
+# ToolbarSecondaryActions
+
+**Category:** Features/Actions/SecondaryActions
+
+## Design
+
+### Description
+
+The `ToolbarSecondaryActions` component displays multiple secondary action buttons in a collection toolbar. Each action can be a single button or a button with a dropdown menu that shows additional actions.
+
+
+```tsx
+import { ToolbarSecondaryActions } from '@wix/patterns';
+```
+
+### Multiple secondary action buttons
+
+Display multiple secondary action buttons in the toolbar.
+
+```tsx
+import React from 'react';
+import { Page } from '@wix/design-system';
+import {
+  Table,
+  PageWrapper,
+  useTableCollection,
+  OffsetQuery,
+  ToolbarSecondaryActions,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function Buttons() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-Buttons',
+    paginationMode: 'offset',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    fetchData: (query: OffsetQuery) => {
+      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 = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header />
+        <Page.Content>
+          <Table
+            state={state}
+            secondaryActions={
+              <ToolbarSecondaryActions
+                items={[
+                  {
+                    label: 'button 1',
+                    onClick: () => console.log('I do something'),
+                    biName: 'ctaName for bi purposes',
+                  },
+                  {
+                    label: 'button 2',
+                    onClick: () => console.log('I do something else'),
+                    biName: 'ctaName for bi purposes',
+                  },
+                ]}
+              />
+            }
+            columns={[
+              {
+                id: 'name',
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}
+```
+
+### Multiple actions with dropdown menus
+
+Display multiple secondary action buttons, each with a dropdown menu that shows additional actions when clicked.
+
+```tsx
+import React from 'react';
+import { Page } from '@wix/design-system';
+import {
+  Table,
+  PageWrapper,
+  useTableCollection,
+  OffsetQuery,
+  ToolbarSecondaryActions,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+import { Edit } from '@wix/wix-ui-icons-common';
+
+function Popovers() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-Popovers',
+    paginationMode: 'offset',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    fetchData: (query: OffsetQuery) => {
+      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 = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header />
+        <Page.Content>
+          <Table
+            state={state}
+            secondaryActions={
+              <ToolbarSecondaryActions
+                items={[
+                  {
+                    label: 'popover 1',
+                    onClick: () => console.log('I do something else'),
+                    biName: 'ctaName for bi purposes',
+                    subItems: [
+                      {
+                        label: 'Edit',
+                        prefixIcon: <Edit />,
+                        onClick: () => console.log('Edit'),
+                      },
+                    ],
+                  },
+                  {
+                    label: 'popover 2',
+                    onClick: () => console.log('I do something else'),
+                    biName: 'ctaName for bi purposes',
+                    subItems: [
+                      {
+                        label: 'Edit',
+                        prefixIcon: <Edit />,
+                        onClick: () => console.log('Edit'),
+                      },
+                    ],
+                  },
+                ]}
+              />
+            }
+            columns={[
+              {
+                id: 'name',
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}
+```
+
+### Mixed buttons and dropdown menus
+
+Display a combination of single action buttons and buttons with dropdown menus in the same toolbar.
+
+```tsx
+import React from 'react';
+import { Page } from '@wix/design-system';
+import {
+  Table,
+  PageWrapper,
+  useTableCollection,
+  OffsetQuery,
+  ToolbarSecondaryActions,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function ButtonAndPopovers() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-ButtonAndPopovers',
+    paginationMode: 'offset',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    fetchData: (query: OffsetQuery) => {
+      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 = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header />
+        <Page.Content>
+          <Table
+            state={state}
+            secondaryActions={
+              <ToolbarSecondaryActions
+                items={[
+                  {
+                    label: 'button',
+                    onClick: () => console.log('I do something'),
+                    biName: 'ctaName for bi purposes',
+                  },
+                  {
+                    label: 'popover',
+                    onClick: () => console.log('I do something else'),
+                    biName: 'ctaName for bi purposes',
+                    subItems: [
+                      {
+                        label: 'subitem 1',
+                        onClick: () => console.log('I do something'),
+                        biName: 'ctaName for bi purposes',
+                      },
+                    ],
+                  },
+                ]}
+              />
+            }
+            columns={[
+              {
+                id: 'name',
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}
+```
+
+### Grouped actions with dividers
+
+Group actions in a dropdown menu by providing `subItems` as nested arrays. Each array creates a group, and dividers appear between groups.
+
+```tsx
+import React from 'react';
+import { Page } from '@wix/design-system';
+import {
+  Table,
+  PageWrapper,
+  useTableCollection,
+  OffsetQuery,
+  ToolbarSecondaryActions,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+import { Edit } from '@wix/wix-ui-icons-common';
+
+function PopoverAndDivider() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-PopoverAndDivider',
+    paginationMode: 'offset',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    fetchData: (query: OffsetQuery) => {
+      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 = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header />
+        <Page.Content>
+          <Table
+            state={state}
+            secondaryActions={
+              <ToolbarSecondaryActions
+                items={[
+                  {
+                    label: 'button',
+                    onClick: () => console.log('I do something'),
+                    biName: 'ctaName for bi purposes',
+                  },
+                  {
+                    label: 'popover',
+                    onClick: () => console.log('I do something else'),
+                    biName: 'ctaName for bi purposes',
+                    subItems: [
+                      [
+                        {
+                          label: 'Edit',
+                          prefixIcon: <Edit />,
+                          onClick: () => console.log('Edit'),
+                        },
+                      ],
+                      [
+                        {
+                          label: 'delete',
+                          onClick: () => console.log('Edit'),
+                          disabled: true,
+                          tooltip: 'Disabled',
+                        },
+                      ],
+                    ],
+                  },
+                ]}
+              />
+            }
+            columns={[
+              {
+                id: 'name',
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}
+```
+
+## API
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `items` | `ActionSubitem[]` | Yes | - | The secondary actions to display in the toolbar. \| [ActionSubitem[][]](./?path=/story/common-types--actionsubitem) |
+

package/dist/docs/ToolbarTitle.md

@@ -0,0 +1,324 @@
+# ToolbarTitle
+
+**Category:** Features/Display/Toolbar
+
+## Design
+
+### Description
+
+The card title located on the left hand side of the toolbar to provide visitors with information about the collection.
+
+
+### Title
+
+This example uses the `` `title` prop to display a title in the toolbar.
+
+```tsx
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { Page } from '@wix/design-system';
+import {
+  Table,
+  PageWrapper,
+  ToolbarTitle,
+  useTableCollection,
+  OffsetQuery,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function Title() {
+
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-toolbar-title',
+    paginationMode: 'offset',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    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',
+    filters: {},
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header />
+        <Page.Content>
+          <Table
+            state={state}
+            title={<ToolbarTitle title="Title" />}
+            columns={[
+              {
+                id: 'name',
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}
+```
+
+---
+
+### Title, subtitle, and learn more
+
+This example uses the `` `title` and `subtitle` props to display a title, subtitle, and a redirect link in the toolbar.
+
+```tsx
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { Page } from '@wix/design-system';
+import {
+  Table,
+  PageWrapper,
+  ToolbarTitle,
+  useTableCollection,
+  OffsetQuery,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function Subtitle() {
+
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-toolbar-title',
+    paginationMode: 'offset',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    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',
+    filters: {},
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header />
+        <Page.Content>
+          <Table
+            state={state}
+            title={
+              <ToolbarTitle
+                title="Title"
+                subtitle={{
+                  text: 'subtitle',
+                  learnMore: { url: 'https://www.wix.com' },
+                }}
+              />
+            }
+            columns={[
+              {
+                id: 'name',
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}
+```
+
+---
+
+### Title and count
+
+This example uses the `` `title` and `showCount` props to display a title and a count in the toolbar.
+
+```tsx
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { Page } from '@wix/design-system';
+import {
+  Table,
+  PageWrapper,
+  ToolbarTitle,
+  useTableCollection,
+  OffsetQuery,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function Total() {
+
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-toolbar-title',
+    paginationMode: 'offset',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    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',
+    filters: {},
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header />
+        <Page.Content>
+          <Table
+            state={state}
+            title={<ToolbarTitle title="Title" showTotal />}
+            columns={[
+              {
+                id: 'name',
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}
+```
+
+---
+
+### Title, count, and the collection's item limit
+
+This example uses the `` `title`, `showCount`, and `itemsLimit` props to display a title, a count, and the maximum number of items a visitor can add to the collection in the toolbar.
+
+```tsx
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { Page } from '@wix/design-system';
+import {
+  Table,
+  PageWrapper,
+  ToolbarTitle,
+  useTableCollection,
+  OffsetQuery,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function Limit() {
+
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-toolbar-title',
+    paginationMode: 'offset',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    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',
+    filters: {},
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header />
+        <Page.Content>
+          <Table
+            state={state}
+            title={<ToolbarTitle title="Title" showTotal itemsLimit={2000} />}
+            columns={[
+              {
+                id: 'name',
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}
+```
+
+## API
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `title` | `ReactNode` | Yes | - | Title to display at the left of the table's toolbar. |
+| `subtitle` | `{ text: string; info?: InfoIconProps; learnMore?: { url: string; label?: string; } \| undefined; } \| undefined` | No | - | Subtitle to display at the left of the table's toolbar under the title. @param text The subtitle text @param (https://www.docs.wixdesignsystem.com/?path=/story/components-form--infoicon)} info info to display an info icon next to the subtitle text @param learnMore an object with a `url`(required) and a `label`(optional), for displaying a link button on the subtitle |
+| `showTotal` | `boolean` | No | - | Whether to show a total count badge next to the title. |
+| `itemsLimit` | `number` | No | - | Maximum number of items that can be displayed. <br><br> Shows only when `showTotal` is `true`. |
+
+## BI
+
+### Events
+
+We haven't defined any events for this feature yet.
+
+
+
+### Component load events
+Event   |   Description   |
+--------- | --------------- |
+[144:110](https://bo.wix.com/data-tools/bi-catalog-app/event/144:110) | Sent when a Wix Patterns component starts loading
+[144:111](https://bo.wix.com/data-tools/bi-catalog-app/event/144:111) | Sent when a Wix Patterns component is done loading
+
+
+#### 🐪 Couldn't find what you need?
+* Check our [BI Catalog](https://bo.wix.com/data-tools/bi-catalog-app?viewId=all-items-view&selectedColumns=src%2Cevid%2Cname%2Cowner%2Cproduct%2CuserType+false%2CdateUpdated%2CdateCreated+false%2CcreatedBy+false%2Cstatus&source=%5B%7B%22id%22%3A%22144%22%2C%22name%22%3A%22144+-+Cairo%22%7D%5D)
+* Contact us on [#cairo-bi](https://wix.slack.com/archives/C03N53KURH9)
+
+