@wix/patterns 1.364.0 → 1.369.0

package/dist/docs/CollectionSearch.md

@@ -0,0 +1,345 @@
+# CollectionSearch
+
+**Category:** Features/Filter/Components
+
+## Design
+
+### Description
+
+`CollectionSearch` adds a search input to the collection toolbar, allowing users to filter items by free-text search. When a user types in the search box, the search term is passed to your `fetchData` function via `query.search`, enabling server-side filtering.
+
+The search input integrates automatically with [`CollectionPage`](./?path=/story/base-components-pages-collection-page--collectionpage) and any collection component (Table, Grid, etc.) through the toolbar.
+
+#### Features
+
+- **Character limit** — Use the `maxLength` prop to limit how many characters users can type.
+- **Custom placeholder** — Set a `placeholder` prop to guide users on what to search for.
+- **Search highlighting** — Combine with [`HighlightedSearch`](./?path=/story/features-display--highlighted-search-results) to visually highlight matching text in results.
+- **Debounced input** — Search queries are debounced to avoid excessive API calls while typing.
+
+#### Usage
+
+Pass `CollectionSearch` as a child of the collection toolbar, or use the `search` prop on `CollectionPage.Header`:
+
+```tsx
+}
+/>
+```
+
+The search term is available in your `fetchData` function:
+
+```tsx
+fetchData: async (query) => {
+  const { items, total } = await api.list({
+    search: query.search, // The user's search text
+    limit: query.limit,
+    offset: query.offset,
+  });
+  return { items, total };
+}
+```
+
+#### Related
+
+- [`HighlightedSearch`](./?path=/story/features-display--highlighted-search-results) — Highlight matching text in search results
+- [`CollectionToolbarFilters`](./?path=/story/features-filter-components--collectiontoolbarfilters) — Add filter dropdowns alongside search
+
+
+```tsx
+import { CollectionSearch } from '@wix/patterns';
+```
+
+### Default
+
+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>
+  );
+}
+```
+
+### 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>
+  );
+}
+```
+
+### 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>
+  );
+}
+```
+
+### 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>
+    );
+}
+```
+
+## 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 |
+
+## BI
+
+### Events
+
+ Event   |   Description   |
+--------- | --------------- |
+[144:116](https://bo.wix.com/data-tools/bi-catalog-app/event/144:116) | Sent when the search results are displayed, after a user searches for something in a Wix Patterns component
+
+
+
+### 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)
+
+

package/dist/docs/CollectionSection.md

@@ -0,0 +1,16 @@
+# CollectionSection
+
+**Category:** Common/Types
+
+## API
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `title` | `string` | Yes | - | A title for the section. |
+| `primaryAction` | `CtaBaseProps` | No | - | A primary call to action for the section. |
+| `badge` | `SectionBadgeConfig` | No | - | A badge for the section. Configuration object for showing item count. |
+| `summary` | `SectionSummaryItem[]` | No | - | Summary items to display in the section header. Each item can have an icon, text label, and count. |
+| `collapsed` | `boolean` | No | - | Whether the section is collapsed. When true, the section items are hidden. |
+

package/dist/docs/CollectionState.md

@@ -0,0 +1,29 @@
+# CollectionState
+
+**Category:** Common/State
+
+## API
+
+### Overview
+
+`CollectionState` is the core state object for all collection components. It manages server data fetching, pagination, filtering, sorting, search, and bulk selection. Created by hooks like [`useTableCollection`](./?path=/story/base-components-collections-table-usetablecollection--usetablecollection) or [`useGridCollection`](./?path=/story/common-hooks--usegridcollection).
+
+Key methods: `invalidate()`, `refreshCurrentPage()`, `clearResultAndMoveToStart()`, `retryErrorState()`.
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `invalidate` | `(params?: { filters?: { [P in keyof F]?: string[] \| null \| undefined; } \| undefined; } \| undefined) => void` | Yes | - | Invalidates all cache records for this collection.<br> Optional parameters:<br> `filters` - Clears only a specific part of the cache, for example: `invalidate({ filters: { status: ['active'] } })` |
+| `refreshAllPages` | `(params?: { beforeUpdateResult?: (() => unknown) \| undefined; filters?: { [P in keyof F]?: string[] \| null \| undefined; } \| undefined; } \| undefined) => Promise<void>` | Yes | - | Invalidates cache and refreshes all previously fetched pages, without showing a loading indication.<br> Optional parameters:<br> - `beforeUpdateResult` - A callback function that will be called before updating the result.<br> - `filters` - Invalidates only a specific part of the cache, for example: `refreshAllPages({ filters: { status: ['active'] } })`. |
+| `refreshCurrentPage` | `(params?: { noInvalidate?: boolean \| undefined; } \| undefined) => Promise<void>` | Yes | - | Invalidates cache and refreshes current page, without showing a loading indication.<br> Optional parameters:<br> - `noInvalidate` - Refreshes current page without invalidating cache. |
+| `clearResultAndMoveToStart` | `(params?: { force?: boolean \| undefined; filters?: { [P in keyof F]?: string[] \| null \| undefined; } \| undefined; } \| undefined) => Promise<void>` | Yes | - | Clears all data from the collection and goes back to the first page and refreshes the first page data, while showing a loading indication.<br> Optional parameters:<br> - `force` - Invalidates the cache and resets react-query observer. - `filters` - Clears only a specific part of the cache, for example: `invalidate({ filters: { status: ['active'] } })` |
+| `retryErrorState` | `() => void` | Yes | - | Triggers retry when collection fails to load |
+| `bulkSelect` | `BulkSelectState<T>` | Yes | - | [BulkSelectState](./?path=/story/common-state--bulkselectstate) |
+| `searchInputRef` | `{ focus: () => void; } \| null` | No | - | Reference to the search input element to allow programmatic focus |
+| `originQuery` | `ComputedQueryFull<F>` | Yes | - | [ComputedQuery](./?path=/story/common-types--computedquery) instance. Holds all the relevant variables to query the server API with. |
+| `status` | `QueryResultStatus<DataResultKeyed<T>, unknown>` | Yes | - | Status of the query. Contains boolean flags of `isIdle`, `isError`, `isLoading`, `isFetching`, `isSuccess`. The difference between `isLoading` and `isFetching` is that `isLoading` is true during the initial query, `isFetching` is true during the next queries. |
+| `total` | `number` | Yes | - | The total number of items, as was returned from the last query. |
+| `keyedItems` | `KeyedItem<T>[]` | Yes | - | All the keyed items of the collection |
+| `getItem` | `(key: string) => T \| null \| undefined` | Yes | - | Get an item object according to its key @param key The key of the wanted item @returns The wanted item |
+

package/dist/docs/CollectionSubToolbar.md

@@ -0,0 +1,14 @@
+# CollectionSubToolbar
+
+**Category:** Common/Components
+
+## Design
+
+### Description
+
+The sub-toolbar is rendered below the main collection toolbar. It displays applied filter tags so users can see and remove active filters at a glance.
+
+This component is used internally by `Table`, `Grid`, and other collection components — you do not need to render it directly. To control its behavior, configure filters on the collection state.
+
+For testing, use the `CollectionSubToolbar` testkit driver which extends `AppliedFiltersTagList`.
+

package/dist/docs/CollectionToolbar.md

@@ -0,0 +1,18 @@
+# CollectionToolbar
+
+**Category:** Common/Components
+
+## Design
+
+### Description
+
+`CollectionToolbar` is the internal toolbar component rendered by `Table`, `Grid`, and other collection components. It displays the title, search input, filters, custom columns, sort, export button, primary/secondary actions, more actions, and view switcher.
+
+You do not render this component directly — instead, configure the toolbar through props on the collection component (e.g. ``). The toolbar reads its state from [`ToolbarCollectionState`](./?path=/story/common-state--toolbarcollectionstate).
+
+## Testkit
+
+### Description
+
+The table toolbar rendering in WixPatterns relies on this internal component. To explore the available methods, please refer to the [ToolbarCollectionState](./?path=/story/common-state--toolbarcollectionstate) documentation.
+

package/dist/docs/Component Tests.md

@@ -0,0 +1,191 @@
+# Component Tests
+
+**Category:** Guides/Component Tests
+
+## Design
+
+### Overview
+
+`Wix Patterns` provides uni driver testkits, similarly to [`@wix/design-system` testing](https://www.docs.wixdesignsystem.com/?path=/story/getting-started--testing)
+
+#### Requirements
+
+##### WixPatternsProvider / WixPatternsBMProvider
+
+> This is relevant only when testing a component which **is not already** wrapped with either [`WixPatternsProvider`](./?path=/story/base-components-providers--wixpatternsprovider) or [`WixPatternsBMProvider`](./?path=/story/base-components-providers--wixpatternsbmprovider).
+
+If your use case requires testing such component, before rendering it, wrap with one of the providers:
+
+```typescript jsx
+import { render } from '@testing-library/react';
+import { WixPatternsBMProvider } from '@wix/patterns/bm';
+
+const MyComponent = () => {};
+
+it('test', () => {
+  const MyComponentTestWrapper = () => (
+    
+      
+    
+  );
+
+  render();
+});
+```
+
+
+---
+
+### Recipes
+
+### spec-setup.ts
+
+```tsx
+import { configure } from '@testing-library/react';
+
+configure({
+  testIdAttribute: 'data-hook',
+});
+
+// To make tests run faster and avoid waiting timeouts we use `jest` fake timers
+jest.useFakeTimers('legacy');
+```
+
+---
+
+### TableTestDriver.ts
+
+This example uses `BM Flow` testkit,  but logic applies to all environments.
+
+```tsx
+import { act, render, RenderResult } from '@testing-library/react';
+import { BMTestAppContainer, testkit } from '@wix/yoshi-flow-bm/testkit';
+import { InMemoryBackend } from '@wix/patterns/testkit/backend';
+import { TableTestkit } from '@wix/patterns/testkit/jsdom';
+import React from 'react';
+import { whenRequest } from '@wix/yoshi-flow-bm/testkit/http-client';
+import { WixPatternsBMProvider } from '@wix/patterns/bm';
+import { wixPatternsTestProviderPropsOverrides } from '@wix/patterns/testkit/bm';
+
+const Index = () => (
+  <WixPatternsBMProvider>
+    {/* render a component that uses `<Table />` here*/}
+  </WixPatternsBMProvider>
+);
+
+export class TableTestDriver {
+  _renderResult?: RenderResult;
+  _bmTestContext?: BMTestAppContainer;
+
+  /**
+   * Here we use a utility which acts as a collection API server, and we integrate it with `HttpClientMocks` below
+   * See full API for `InMemoryBackend` - ./?path=/story/testing-utils--inmemorybackend
+   */
+  backend = new InMemoryBackend<{ id: string; name: string }>({
+    createOne: (index) => ({
+      id: String(index),
+      name: `Item ${index}`,
+    }),
+    itemKey: (item) => item.id,
+    total: 999,
+  });
+
+  getTable() {
+    if (this._renderResult == null) {
+      throw new Error(
+        'TableTestDriver was not initialized, call render() first',
+      );
+    }
+    return TableTestkit({
+      wrapper: this._renderResult.baseElement,
+      dataHook: 'products-infinite-scroll-table',
+    });
+  }
+
+  render() {
+    // Provide `HttpClientMocks` that uses our `InMemoryBackend`
+    const { TestComponent, context } = testkit.getBMComponent(
+      Index,
+      wixPatternsTestProviderPropsOverrides({
+        mocks: [
+          whenRequest(() => ({
+            url: '/api/service',
+            method: 'POST',
+          }))
+            .reply(200, async (data: any, params: any) => {
+              // transform the data payload and query params into a query that can be passed to `InMemoryBackend.fetchData`
+              const query = {
+                ...data,
+                ...params,
+              };
+              return this.backend.fetchData(query);
+            })
+            .persist(),
+        ],
+      }),
+    );
+    this._bmTestContext = context;
+    this._renderResult = render(<TestComponent />);
+  }
+
+  // A helper function that makes pending timers to execute
+  async flush(iterations = 3) {
+    for (let i = 0; i < iterations; i++) {
+      await act(async () => {
+        await new Promise(setImmediate);
+        jest.runOnlyPendingTimers();
+      });
+    }
+  }
+}
+```
+
+---
+
+### index-spec.ts
+
+```tsx
+import { testkit } from '@wix/yoshi-flow-bm/testkit';
+import { TableTestDriver } from './TableTestDriver';
+
+describe('ProductsTable', () => {
+  testkit.beforeAndAfter();
+
+  let driver: TableTestDriver;
+
+  beforeEach(async () => {
+    driver = new TableTestDriver();
+    driver.render();
+    await driver.flush(5);
+  });
+
+  it('renders first page', async () => {
+    expect(await driver.getTable().exists()).toBe(true);
+    expect(await driver.getTable().getRowsCount()).toBe(100);
+  });
+
+  it('renders next page', async () => {
+    await driver.getTable().scrollDown();
+    expect(await driver.getTable().isInfiniteScrollLoaderLoading()).toBe(true);
+    await driver.flush();
+    expect(await driver.getTable().getRowsCount()).toBe(200);
+  });
+
+  it('filters by categories', async () => {
+    const fetchSpy = jest.spyOn(driver.backend, 'fetchData');
+
+    const ids = ['1', '2', '3'];
+
+    await driver.getTable().selectFilterOptions('categories', ids);
+
+    expect(fetchSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        filters: expect.objectContaining({
+          category: expect.arrayContaining(ids),
+        }),
+      }),
+    );
+  });
+});
+```
+

package/dist/docs/ComputedQuery.md

@@ -0,0 +1,45 @@
+# ComputedQuery
+
+**Category:** Common/Types
+
+## API
+
+### Overview
+
+`ComputedQuery` represents the current paging, sorting, and filtering state passed to `fetchData`. It includes `offset` (or `cursor`), `limit`, `sort`, and `filter` values derived from the active filters. Use it in bulk operations like `updateAll` or `deleteAll` to apply the same filters server-side.
+
+### Description
+
+The argument passed to the `fetchData()` function.
+
+The `fetchData()` function is responsible for fetching data collections and is defined within collection hooks like [`useTableCollection()`](./?path=/story/base-components-collections-table-usetablecollection--usetablecollection) and [`useGridCollection()`](./?path=/story/base-components-collections-grid-usegridcollection--usegridcollection).
+
+`ComputedQuery` ensures that queries align with the expected input of the server. It supports both `offset` and `cursor` pagination modes, which can be set by adjusting the `paginationMode` property in the relevant hook.
+
+For type support, you can optionally import `OffsetQuery` or `CursorQuery`.
+
+```tsx
+import { OffsetQuery } from '@wix/patterns';
+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: "asc" \| "desc"; }[]` | 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. |
+

package/dist/docs/CtaBaseProps.md

@@ -0,0 +1,19 @@
+# CtaBaseProps
+
+**Category:** Common/Types
+
+## API
+
+### Overview
+
+Base props for call-to-action buttons used in section headers, toolbar actions, and other action triggers. Defines the common `id`, `onClick`, `label`, and `prefixIcon` properties.
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `id` | `string` | Yes | - | A unique identifier for the CTA. |
+| `onClick` | `(() => void)` | No | - | A callback that runs each time the button is clicked. |
+| `label` | `string` | No | - | Button label. |
+| `prefixIcon` | `IconElement` | No | - | An optional Icon prefix. |
+