@wix/patterns 1.459.0 → 1.460.0

package/dist/docs/CollectionPage.md

@@ -159,25 +159,12 @@ function Basic() {
 
 ## API
 
-### Extends
-
-[Page](https://www.docs.wixdesignsystem.com/?path=/story/components-layout-page--page)
-
 ### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `children` | `ReactNode` | No | - | Accepts [CollectionPage.Header](./?path=/story/base-components-pages-collection-page--collectionpage-header) and [CollectionPage.Content](./?path=/story/base-components-pages-collection-page--collectionpage-content) elements |
-| `dataHook` | `string` | No | - | Applies a data-hook HTML attribute that can be used in the tests |
-| `backgroundImageUrl` | `string` | No | - | Provides a link to the background image source (URL). Image will be displayed at the top of a page, underneath the \<Page.Header/>. |
-| `maxWidth` | `number` | No | - | Sets the maximum width of the page (paddings excluded) |
-| `minWidth` | `number` | No | - | Sets the minimum width of the page (paddings excluded). When `mobile` is enabled on `<WixDesignSystemProvider/>`, the default minimum width is removed, but an explicitly provided value is still applied. |
-| `height` | `string` | No | - | Sets the height of the page in pixels (px), viewport height (vh), etc. |
-| `sidePadding` | `number` | No | - | Sets the side paddings of a page |
-| `className` | `string` | No | - | Specifies a CSS class name to be appended to the component’s root element. |
-| `gradientClassName` | `string` | No | - | Specifies a CSS class name that defines a gradient background for \<Page.Header/> |
-| `scrollableContentRef` | `((ref: HTMLElement \| null) => void)` | No | - | Defines a reference called together with page scrollable content ref after page mount. <br/> **Note** - if you need this ref only for listening to scroll events on the scrollable content then use this prop instead: `scrollProps = {onScrollChanged/onScrollAreaChanged}` |
-| `zIndex` | `number` | No | - | Specifies the stack order (z-index) of a page |
-| `horizontalScroll` | `boolean` | No | - | Enables page content to scroll horizontally when its width exceed maximum allowed width |
-| `scrollProps` | `ScrollableContainerCommonProps` | No | - | Pass properties related to the scrollable content of the page. <br/> **onScrollAreaChanged** - defines a handler function for scroll area changes. Function is triggered when the user scrolls to a different area of the scrollable content. See signature for possible areas: `function({area: {y: AreaY, x: AreaX}, target: HTMLElement}) => void` `AreaY`: top \| middle \| bottom \| none `AreaX`: start \| middle \| end \| none (not implemented yet) <br/> **onScrollAreaChanged** - defines a general handler for scroll changes with throttling (100ms): `function({target: HTMLElement}) => void` |
+Read `dist/dts-bundle/components/CollectionPage.d.ts` for `CollectionPage`'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/CollectionPremiumEmptyState.md

@@ -98,18 +98,10 @@ function CollectionPremiumEmptyStateExample() {
 
 ### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `upgradeCta` | `PremiumButtonProps` | Yes | - | Configures the default call to action button.\ `onClick`: Adds a callback for when the button is clicked. <br> `text`: Text of the button. To render the default upgrade button, you must provide the `onClick` callback. |
-| `dataHook` | `string` | No | - | Applies a data-hook HTML attribute to be used in the tests |
-| `className` | `string` | No | - | Specifies a CSS class name to be appended to the component’s root element. |
-| `children` | `ReactNode` | No | - | Contains components rendered below the subtitle, e.g., `<Button/>` or `<TextButton/>` |
-| `title` | `string` | No | - | Overrides the default title. |
-| `skin` | `"page" \| "page-no-border" \| "section"` | No | `'section'` | Sets the style skin for the empty state |
-| `theme` | `"page" \| "page-no-border" \| "section"` | No | - | @deprecated use skin prop instead |
-| `subtitle` | `string` | No | - | Overrides the default subtitle. |
-| `image` | `ReactNode` | No | - | Overrides the default image. Accepts a custom `ReactElement` or boolean value. Pass `false` to hide the default image. |
-| `classNames` | `{ imageContainer?: string; }` | No | - | Sets the empty state image bottom margin. If not specified, use the default padding defined in the CSS. |
-| `align` | `"start" \| "center" \| "end"` | No | `'center'` | Sets the alignment of all empty state contents within the component container |
-| `customCta` | `ReactNode` | No | - | Adds another custom call to action button. Pass a [TextButton](https://www.docs.wixdesignsystem.com/?path=/story/components-actions--textbutton) component. |
+Read `dist/dts-bundle/components/CollectionPremiumEmptyState.d.ts` for `CollectionPremiumEmptyState`'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/CollectionSearch/default.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { Page } from '@wix/design-system';
+import {
+  Table,
+  PageWrapper,
+  useTableCollection,
+  OffsetQuery,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function Default() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-Default',
+    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}
+            columns={[
+              {
+                id: 'name',
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}

package/dist/docs/CollectionSearch/max-length.tsx

@@ -0,0 +1,59 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { Page } from '@wix/design-system';
+import {
+  Table,
+  PageWrapper,
+  CollectionSearch,
+  useTableCollection,
+  OffsetQuery,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function MaxLength() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-MaxLength',
+    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}
+            search={<CollectionSearch maxLength={3} />}
+            columns={[
+              {
+                id: 'name',
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}

package/dist/docs/CollectionSearch/placeholder.tsx

@@ -0,0 +1,59 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { Page } from '@wix/design-system';
+import {
+  Table,
+  PageWrapper,
+  CollectionSearch,
+  useTableCollection,
+  OffsetQuery,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function Placeholder() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-placeholder',
+    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}
+            search={<CollectionSearch placeholder="your placeholder" />}
+            columns={[
+              {
+                id: 'name',
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}

package/dist/docs/CollectionSearch/search-highlighting.tsx

@@ -0,0 +1,60 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { Page } from '@wix/design-system';
+import {
+    Table,
+    PageWrapper,
+    CollectionSearch,
+    useTableCollection,
+    OffsetQuery,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function SearchHighlighting() {
+    const state = useTableCollection<contacts.Contact>({
+        queryName: 'contacts-SearchHighlighting',
+        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}
+                        search={<CollectionSearch />}
+                        columns={[
+                            {
+                                id: 'name',
+                                title: 'Name',
+                                width: '250px',
+                                searchable: true,
+                                render: (contact) =>
+                                    `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+                            },
+                        ]}
+                    />
+                </Page.Content>
+            </Page>
+        </PageWrapper>
+    );
+}

package/dist/docs/CollectionSearch.md

@@ -55,273 +55,36 @@ import { CollectionSearch } from '@wix/patterns';
 
 The search input will bw shown be default
 
-```tsx
-/* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
-import { Page } from '@wix/design-system';
-import {
-  Table,
-  PageWrapper,
-  useTableCollection,
-  OffsetQuery,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function Default() {
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-Default',
-    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}
-            columns={[
-              {
-                id: 'name',
-                title: 'Name',
-                width: '250px',
-                render: (contact) =>
-                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-              },
-            ]}
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/CollectionSearch/default.tsx`
 
 ### Max length
 
 An option to limit the amout of characaters
 
-```tsx
-/* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
-import { Page } from '@wix/design-system';
-import {
-  Table,
-  PageWrapper,
-  CollectionSearch,
-  useTableCollection,
-  OffsetQuery,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function MaxLength() {
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-MaxLength',
-    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}
-            search={<CollectionSearch maxLength={3} />}
-            columns={[
-              {
-                id: 'name',
-                title: 'Name',
-                width: '250px',
-                render: (contact) =>
-                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-              },
-            ]}
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/CollectionSearch/max-length.tsx`
 
 ### Placeholder
 
 An option to define the placeholder text.
 
-```tsx
-/* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
-import { Page } from '@wix/design-system';
-import {
-  Table,
-  PageWrapper,
-  CollectionSearch,
-  useTableCollection,
-  OffsetQuery,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function Placeholder() {
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-placeholder',
-    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}
-            search={<CollectionSearch placeholder="your placeholder" />}
-            columns={[
-              {
-                id: 'name',
-                title: 'Name',
-                width: '250px',
-                render: (contact) =>
-                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-              },
-            ]}
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/CollectionSearch/placeholder.tsx`
 
 ### Search highlighting
 
 Gets highlighted search results in the table. Learn how to [enable it](./?path=/story/features-display--highlighted-search-results).
 
-```tsx
-/* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
-import { Page } from '@wix/design-system';
-import {
-    Table,
-    PageWrapper,
-    CollectionSearch,
-    useTableCollection,
-    OffsetQuery,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function SearchHighlighting() {
-    const state = useTableCollection<contacts.Contact>({
-        queryName: 'contacts-SearchHighlighting',
-        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}
-                        search={<CollectionSearch />}
-                        columns={[
-                            {
-                                id: 'name',
-                                title: 'Name',
-                                width: '250px',
-                                searchable: true,
-                                render: (contact) =>
-                                    `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-                            },
-                        ]}
-                    />
-                </Page.Content>
-            </Page>
-        </PageWrapper>
-    );
-}
-```
+Example code: read `dist/docs/CollectionSearch/search-highlighting.tsx`
 
 ## API
 
 ### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `maxLength` | `number` | No | - | Sets the maximum number of characters that can be entered into a field |
-| `placeholder` | `string` | No | - | Sets a placeholder message to display |
+Read `dist/dts-bundle/components/CollectionSearch.d.ts` for `CollectionSearch`'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
 

package/dist/docs/ComputedQuery.md

@@ -27,19 +27,10 @@ import { CursorQuery } from '@wix/patterns';
 
 ### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `limit` | `number` | Yes | - | Number of items to fetch for each page |
-| `offset` | `number` | Yes | - | The index of the item to start fetching items from.<br> Relevant for APIs that support offset pagination.<br> Not available on `CursorQuery`. |
-| `search` | `string` | No | - | Current search term. Defaults to `undefined` for empty search. |
-| `rawSearch` | `string` | Yes | - | Current search term. Defaults to `''` for empty search. |
-| `cursor` | `string \| null` | No | - | The `cursor` returned from the server, to be sent back to it in the next call.<br> Relevant for APIs that support cursor pagination.<br> Not available on `OffsetQuery`. |
-| `filters` | `Partial<{ [P in keyof F]: ExtractFilterValue<F[P]>; }>` | Yes | - | Current state of the filters. Each key holds the value of the filter, according to its type, defined in [CollectionConfig](./?path=/story/common-hooks--usecollection). |
-| `rawFilters` | `Partial<{ [P in keyof F]: ExtractFilterValue<F[P]>; }>` | Yes | - | Same as `filters` but defaults to `undefined` for empty filter values. |
-| `hasActiveFilters` | `boolean` | Yes | - | Whether at least one filter is not empty. |
-| `hasNonPersistentActiveFilters` | `boolean` | Yes | - | Whether at least one filter is not empty, not including tabs. |
-| `sort` | `{ fieldName: string; order: "desc" \| "asc"; }[]` | No | - | Current sort applied to the collection. |
-| `columns` | `string[]` | No | - | @deprecated Use `fields` instead |
-| `fields` | `string[]` | No | - | Array of projected fields. A list of specific field names to fetch. Use this to optimize your server query to load only needed columns. Note that a mapping between client-side columns to server-fields is usually required. Use `refreshOnColumnsChange` of [useCollection](./?path=/story/common-hooks--usecollection) to control whether the collection should be refreshed when this value changes. |
-| `extra` | `string` | No | - | Extra data to be passed to the query. |
+Read `dist/dts-bundle/types/ComputedQuery.d.ts` for `ComputedQuery`'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.