@wix/patterns 1.460.0 → 1.462.0

package/dist/cjs/version.js

@@ -2,5 +2,5 @@
 
 exports.__esModule = true;
 exports.version = void 0;
-const version = exports.version = 'patterns@1.460.0';
+const version = exports.version = 'patterns@1.462.0';
 //# sourceMappingURL=version.js.map

package/dist/cjs/version.js.map

@@ -1 +1 @@
-{"version":3,"names":["version","exports"],"sources":["../../src/version.ts"],"sourcesContent":["export const version = 'patterns@1.460.0';\n"],"mappings":";;;;AAAO,MAAMA,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,kBAAkB","ignoreList":[]}
+{"version":3,"names":["version","exports"],"sources":["../../src/version.ts"],"sourcesContent":["export const version = 'patterns@1.462.0';\n"],"mappings":";;;;AAAO,MAAMA,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,kBAAkB","ignoreList":[]}

package/dist/docs/AI Assistant.md

@@ -78,6 +78,7 @@ import {
   useTableCollection,
   PrimaryActions,
   createAiAssistant,
+  OffsetQuery,
 } from '@wix/patterns';
 import { CollectionPage } from '@wix/patterns/page';
 import { contacts } from '@wix/crm';
@@ -91,7 +92,7 @@ function AiAssistant() {
     queryName: 'contacts-AiAssistant',
     itemName: (contact) =>
       `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-    fetchData: (query) => {
+    fetchData: (query: OffsetQuery) => {
       const { limit, offset, search, filters } = query;
 
       let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

package/dist/docs/AutoCompleteFilter.md

@@ -16,7 +16,10 @@ import { AutoCompleteFilter } from '@wix/patterns';
 
 ```tsx
 import React from 'react';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+import { Layout, Cell } from '@wix/design-system';
 import {
+  OffsetQuery,
   AutoCompleteFilter,
   idNameArrayFilter,
   useFilterCollection,
@@ -24,16 +27,16 @@ import {
 import { Observer } from 'mobx-react-lite';
 
 function BasicAutoCompleteFilter() {
-  const fakeEntityHttpClient = useFakeEntityHttpClient();
+  const fakeEntityHttpClient = useHttpClient();
 
   const [filter] = React.useState(() => idNameArrayFilter());
 
   const collection = useFilterCollection(filter, {
     queryName: 'BasicAutoCompleteFilter',
-    fetchData: (query) => {
+    fetchData: (query: OffsetQuery) => {
       const { limit, offset, search, filters } = query;
       return fakeEntityHttpClient
-        .request({
+        .request<{ items: { id: string; name: string }[]; total: number }>({
           url: '/api/fake-entity',
           params: { limit, offset, search, filters },
         })
@@ -69,23 +72,26 @@ function BasicAutoCompleteFilter() {
 
 ```tsx
 import React from 'react';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+import { Layout, Cell } from '@wix/design-system';
 import {
+  OffsetQuery,
   AutoCompleteFilter,
   idNameArrayFilter,
   useFilterCollection,
 } from '@wix/patterns';
 
 function BasicAutoCompleteFilter() {
-  const fakeEntityHttpClient = useFakeEntityHttpClient();
+  const fakeEntityHttpClient = useHttpClient();
 
   const [filter] = React.useState(() => idNameArrayFilter());
 
   const collection = useFilterCollection(filter, {
     queryName: 'BasicAutoCompleteFilter',
-    fetchData: (query) => {
+    fetchData: (query: OffsetQuery) => {
       const { limit, offset, search, filters } = query;
       return fakeEntityHttpClient
-        .request({
+        .request<{ items: { id: string; name: string }[]; total: number }>({
           url: '/api/fake-entity',
           params: { limit, offset, search, filters },
         })

package/dist/docs/CollectionPage.Content.md

@@ -38,7 +38,7 @@ Showing table as the content of the page
 ```tsx
 import { Avatar } from '@wix/design-system';
 import React from 'react';
-import { Table, useTableCollection } from '@wix/patterns';
+import { Table, useTableCollection, OffsetQuery } from '@wix/patterns';
 import { CollectionPage } from '@wix/patterns/page';
 import { contacts } from '@wix/crm';
 
@@ -47,7 +47,7 @@ function WithoutTotal() {
     queryName: 'contacts-withTable',
     itemName: (contact) =>
       `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-    fetchData: (query) => {
+    fetchData: (query: OffsetQuery) => {
       const { limit, offset, search, filters } = query;
 
       let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
@@ -106,7 +106,7 @@ Showing grid as the content of the page
 ```tsx
 import React from 'react';
 import { CollectionPage } from '@wix/patterns/page';
-import { Grid, useGridCollection } from '@wix/patterns';
+import { Grid, useGridCollection, OffsetQuery } from '@wix/patterns';
 import { contacts } from '@wix/crm';
 
 function WithGrid() {
@@ -115,7 +115,7 @@ function WithGrid() {
     paginationMode: 'offset',
     itemName: (contact) =>
       `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-    fetchData: (query) => {
+    fetchData: (query: OffsetQuery) => {
       const { limit, offset, search, filters } = query;
 
       let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

package/dist/docs/CollectionPage.Header/full.tsx

@@ -0,0 +1,112 @@
+import { Avatar, Breadcrumbs } from '@wix/design-system';
+import React from 'react';
+import {
+  Table,
+  useTableCollection,
+  MoreActions,
+  PrimaryActions,
+  OffsetQuery,
+} from '@wix/patterns';
+import { CollectionPage } from '@wix/patterns/page';
+import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function Full() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-full',
+    itemName: (contact) =>
+      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+    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,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header
+        title={{ text: 'Contacts' }}
+        subtitle={{ text: 'My Contacts' }}
+        breadcrumbs={
+          <Breadcrumbs
+            activeId="2"
+            items={[
+              { id: '1', value: 'First crumb' },
+              { id: '2', value: 'Second crumb' },
+            ]}
+          />
+        }
+        primaryAction={
+          <PrimaryActions
+            label="Do something"
+            onClick={() => console.log('I do something')}
+          />
+        }
+        moreActions={
+          <MoreActions
+            items={[
+              [
+                {
+                  biName: 'action-1',
+                  text: 'Do Action #1',
+                  prefixIcon: <InvoiceSmall />,
+                  onClick: () => {
+                    console.log('Action #1');
+                  },
+                },
+                {
+                  biName: 'action-2',
+                  text: 'Another Action #2',
+                  prefixIcon: <VisibleSmall />,
+                  onClick: () => {
+                    console.log('Action #2');
+                  },
+                },
+              ],
+            ]}
+            containerId="6dcbba57-c740-477c-a747-30094cf54ca1"
+          />
+        }
+      />
+      <CollectionPage.Content>
+        <Table
+          state={state}
+          columns={[
+            {
+              id: 'avatar',
+              name: 'Avatar',
+              title: '',
+              width: '50px',
+              hideable: false,
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              id: 'name',
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+          ]}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/CollectionPage.Header/with-badges.tsx

@@ -0,0 +1,70 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { Table, useTableCollection, OffsetQuery } from '@wix/patterns';
+import { CollectionPage } from '@wix/patterns/page';
+import { contacts } from '@wix/crm';
+
+function WithBadges() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-WithBadges',
+    itemName: (contact) =>
+      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+    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,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header
+        title={{
+          text: 'Contacts',
+          badges: [
+            { text: 'Beta', skin: 'success' },
+            { text: 'Sandbox', skin: 'warning' },
+          ],
+        }}
+      />
+      <CollectionPage.Content>
+        <Table
+          state={state}
+          columns={[
+            {
+              id: 'avatar',
+              name: 'Avatar',
+              title: '',
+              width: '50px',
+              hideable: false,
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              id: 'name',
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+          ]}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/CollectionPage.Header/without-total.tsx

@@ -0,0 +1,62 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { Table, useTableCollection, OffsetQuery } from '@wix/patterns';
+import { CollectionPage } from '@wix/patterns/page';
+import { contacts } from '@wix/crm';
+
+function WithoutTotal() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-DisabledCustomColumns',
+    itemName: (contact) =>
+      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+    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,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts', hideTotal: true }} />
+      <CollectionPage.Content>
+        <Table
+          state={state}
+          columns={[
+            {
+              id: 'avatar',
+              name: 'Avatar',
+              title: '',
+              width: '50px',
+              hideable: false,
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              id: 'name',
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+          ]}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/CollectionPage.Header.md

@@ -18,188 +18,19 @@ import { CollectionPage } from '@wix/patterns/page';
 
 Rendering a header with title, subtitle, total, primary action, and more actions. To learn how to create a more actions menu, see [`MoreActions`](./?path=/story/features-actions-more-actions--more-actions).
 
-```tsx
-import { Avatar, Breadcrumbs } from '@wix/design-system';
-import React from 'react';
-import {
-  Table,
-  useTableCollection,
-  MoreActions,
-  PrimaryActions,
-} from '@wix/patterns';
-import { CollectionPage } from '@wix/patterns/page';
-import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
-import { contacts } from '@wix/crm';
-
-function Full() {
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-full',
-    itemName: (contact) =>
-      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-    fetchData: (query) => {
-      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,
-      }));
-    },
-    fetchErrorMessage: () => 'Error fetching contacts',
-    filters: {},
-  });
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header
-        title={{ text: 'Contacts' }}
-        subtitle={{ text: 'My Contacts' }}
-        breadcrumbs={
-          <Breadcrumbs
-            activeId="2"
-            items={[
-              { id: '1', value: 'First crumb' },
-              { id: '2', value: 'Second crumb' },
-            ]}
-          />
-        }
-        primaryAction={
-          <PrimaryActions
-            label="Do something"
-            onClick={() => console.log('I do something')}
-          />
-        }
-        moreActions={
-          <MoreActions
-            items={[
-              [
-                {
-                  biName: 'action-1',
-                  text: 'Do Action #1',
-                  prefixIcon: <InvoiceSmall />,
-                  onClick: () => {
-                    console.log('Action #1');
-                  },
-                },
-                {
-                  biName: 'action-2',
-                  text: 'Another Action #2',
-                  prefixIcon: <VisibleSmall />,
-                  onClick: () => {
-                    console.log('Action #2');
-                  },
-                },
-              ],
-            ]}
-            containerId="6dcbba57-c740-477c-a747-30094cf54ca1"
-          />
-        }
-      />
-      <CollectionPage.Content>
-        <Table
-          state={state}
-          columns={[
-            {
-              id: 'avatar',
-              name: 'Avatar',
-              title: '',
-              width: '50px',
-              hideable: false,
-              render: (contact) => (
-                <Avatar
-                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
-                  imgProps={{ src: contact.info?.picture?.image }}
-                />
-              ),
-            },
-            {
-              id: 'name',
-              title: 'Name',
-              width: '250px',
-              render: (contact) =>
-                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-            },
-          ]}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CollectionPage.Header/full.tsx`
 
 ### Without Total
 
 Hiding the total number of entities in the header of a collection page, with `hideTotal` config.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { Table, useTableCollection } from '@wix/patterns';
-import { CollectionPage } from '@wix/patterns/page';
-import { contacts } from '@wix/crm';
-
-function WithoutTotal() {
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-DisabledCustomColumns',
-    itemName: (contact) =>
-      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-    fetchData: (query) => {
-      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,
-      }));
-    },
-    fetchErrorMessage: () => 'Error fetching contacts',
-    filters: {},
-  });
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts', hideTotal: true }} />
-      <CollectionPage.Content>
-        <Table
-          state={state}
-          columns={[
-            {
-              id: 'avatar',
-              name: 'Avatar',
-              title: '',
-              width: '50px',
-              hideable: false,
-              render: (contact) => (
-                <Avatar
-                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
-                  imgProps={{ src: contact.info?.picture?.image }}
-                />
-              ),
-            },
-            {
-              id: 'name',
-              title: 'Name',
-              width: '250px',
-              render: (contact) =>
-                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-            },
-          ]}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/CollectionPage.Header/without-total.tsx`
+
+### With Badges
+
+Rendering one or more [`Badge`](https://www.docs.wixdesignsystem.com/?path=/story/components-indicators--badge) badges at the end of the title row, after the total, with `badges`. Set the skin and text of each; their size is always `small`. Badges are not rendered while the header is collapsed into its minimized state.
+
+Example code: read `dist/docs/CollectionPage.Header/with-badges.tsx`
 
 ## API
 
@@ -208,7 +39,7 @@ function WithoutTotal() {
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `breadcrumbs` | `BreadcrumbsElement` | No | - | A [`Breadcrumbs`](https://www.docs.wixdesignsystem.com/?path=/story/components-navigation--breadcrumbs) element to be rendered on the header. |
-| `title` | `{ text: string; hideTotal?: boolean \| undefined; }` | Yes | - | `text`: The title text. \ `hideTotal`: Determines whether to hide the number of total entities on the title of the page. |
+| `title` | `{ text: string; hideTotal?: boolean \| undefined; badges?: CollectionPageHeaderBadge[] \| undefined; }` | Yes | - | `text`: The title text. \ `hideTotal`: Determines whether to hide the number of total entities on the title of the page. \ `badges`: Badges rendered at the end of the title row, after the total. Their size is always `small`. \ The minimized header shows the title text on its own, so badges are not rendered while it is collapsed. |
 | `subtitle` | `PageSubTitleProps` | No | - | The page subtitle text. |
 | `primaryAction` | `PrimaryActionsElement` | No | - | A [`PrimaryActions`](./?path=/story/features-actions-primary-actions--primary-actions) component to be rendered on the header. A primary button w/o PopoverMenu component to be rendered in the header. |
 | `secondaryActions` | `SecondaryActionsElement` | No | - | A [`SecondaryActions`](./?path=/story/features-actions-secondary-actions--secondary-actions) component to be rendered on the header. A Secondary button w/o PopoverMenu component to be rendered on the header |

package/dist/docs/CollectionPage.md

@@ -28,6 +28,7 @@ import {
   useTableCollection,
   MoreActions,
   PrimaryActions,
+  OffsetQuery,
 } from '@wix/patterns';
 import { CollectionPage } from '@wix/patterns/page';
 import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
@@ -38,7 +39,7 @@ function Full() {
     queryName: 'contacts-full',
     itemName: (contact) =>
       `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-    fetchData: (query) => {
+    fetchData: (query: OffsetQuery) => {
       const { limit, offset, search, filters } = query;
 
       let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

package/dist/docs/CollectionSearch.md

@@ -31,7 +31,9 @@ Pass `CollectionSearch` as a child of the collection toolbar, or use the `search
 The search term is available in your `fetchData` function:
 
 ```tsx
-fetchData: async (query) => {
+import { OffsetQuery } from '@wix/patterns';
+
+fetchData: async (query: OffsetQuery) => {
   const { items, total } = await api.list({
     search: query.search, // The user's search text
     limit: query.limit,

package/dist/docs/CustomFieldType/editable-cell.tsx

@@ -109,6 +109,15 @@ function CustomFieldTypeSpreadsheet() {
       normalizeOnCommit: (v) => clamp(v ?? 0),
       onTypeToEdit: ({ key }) =>
         /^\d$/.test(key) ? { value: parseInt(key, 10) } : undefined,
+      contextMenu: {
+        cut: {
+          disabledTooltip: () => 'Progress values cannot be cut',
+        },
+        clear: {
+          disabledTooltip: ({ value }) =>
+            value === 100 ? 'Completed progress must be preserved' : undefined,
+        },
+      },
     },
     // Items here appear on the field's actions menus (e.g. the editable
     // table's column header menu) — only for fields of this type.

package/dist/docs/CustomFieldType.md

@@ -9,7 +9,7 @@
 A **custom field type** is a consumer-defined field that plugs into every schema-driven surface. Define it once with `defineFieldType<V>()` and register it on the schema source via `fieldTypes` — the page wires nothing per surface. Each surface resolves its own slot from the definition:
 
 - `table` — the read-only table cell and column layout.
-- `editableTable` — the editable cell: view, inline editor, and clipboard behavior.
+- `editableTable` — the editable cell: view, inline editor, clipboard behavior, and availability of the built-in cell context-menu actions.
 - `filter` — the filter registered on the collection query and its toolbar element. This slot is required: provide a config, or opt out explicitly with `{ filterable: false }`.
 - `value` — value semantics (`defaultValue`, `isEmpty`, `validate`) used by every surface.
 - `capabilities` — e.g. `sortable`.
@@ -35,7 +35,7 @@ Example code: read `dist/docs/CustomFieldType/table-cell-and-filter.tsx`
 
 ### Editable cell
 
-What you get: the same field type in an editable spreadsheet — the `editableTable` slot renders progress bars in view mode and a number input in edit mode. Try it: double-click a Progress cell (or focus it and type a digit) to edit — Enter or Tab commits, Escape cancels, values clamp to 0–100 on commit (`normalizeOnCommit`), and copy/paste round-trips through `serialize`/`deserialize`. The Progress column's header menu has "This is action only for progress bar" (the `actions` slot) — it appears only on this field type. Filtering is opted out with `{ filterable: false }`, so the toolbar shows no Progress filter.
+What you get: the same field type in an editable spreadsheet — the `editableTable` slot renders progress bars in view mode and a number input in edit mode. Try it: double-click a Progress cell (or focus it and type a digit) to edit — Enter or Tab commits, Escape cancels, values clamp to 0–100 on commit (`normalizeOnCommit`), and copy/paste round-trips through `serialize`/`deserialize`. Right-click a Progress cell: Cut is always disabled with the type's tooltip, while Clear is disabled only when the value is 100. The Progress column's header menu also has "This is action only for progress bar" (the separate `actions` slot). Filtering is opted out with `{ filterable: false }`, so the toolbar shows no Progress filter.
 
 Example code: read `dist/docs/CustomFieldType/editable-cell.tsx`
 
@@ -97,7 +97,7 @@ The backend owns the translation: `find({ filters })` receives the raw filter va
 - `EditComponent?(props: CellEditProps<V>)` — edit mode; omit for view-only cells. Props: `value`, `onChange(value)` (call on **every** change — Tab-commit reads the editing value synchronously before blur), `onCommit()`, `onCancel()` (wire Escape to it), `onStartEdit?()` (call before opening external UI like a modal so the table keeps cell focus), `inputRef` (expose `{ focus }` via `useImperativeHandle` for type-to-edit), `editTrigger`, `validation`, `typeConfig`, `columnId`, `rowKey`.
 - `serialize?(value: V): string` / `deserialize?(raw: string): V` — clipboard copy/paste. Serialized values must be single-line (TSV).
 - `editable?: boolean` — default `true`.
-- `clearable?: boolean` — can the Delete key clear the cell; default `true`.
+- `contextMenu?` — controls whether Cairo's built-in cell actions are available for this type. Supported keys are `copy`, `cut`, `paste`, and `clear`. Each configured key requires `disabledTooltip(context)`: return a non-empty string to keep the item visible but disabled and show that string as its tooltip; return `undefined` to enable it. The context contains the current `value`, `rowKey`, `columnId`, and `field` when the column comes from a registered field type.
 - `toggleValue?(value: V): V` — toggle on single click (e.g. boolean checkbox), skipping the focus→edit flow.
 - `editOnClick?(value: V): boolean` — enter edit mode on single click (e.g. an empty image cell).
 - `showEditWhenFocused?: boolean` — render the EditComponent while merely focused, keyboard navigation stays active.
@@ -107,6 +107,24 @@ The backend owns the translation: `find({ filters })` receives the raw filter va
 - `normalizeOnCommit?(value: V): V` — normalize just before the edit commits (e.g. clamp a number, prepend `https://`).
 - `EditWrapper?: ComponentType<CellEditWrapperProps>` — optional wrapper kept mounted across the edit↔view transition, for behavior that must outlive the inline editor.
 
+```ts
+editableTable: {
+  ViewComponent: RatingCellView,
+  EditComponent: RatingCellEdit,
+  contextMenu: {
+    cut: {
+      disabledTooltip: () => 'Ratings cannot be cut',
+    },
+    clear: {
+      disabledTooltip: ({ value }) =>
+        value === 5 ? 'Five-star ratings must be preserved' : undefined,
+    },
+  },
+}
+```
+
+The callback is synchronous and evaluated when the menu opens and again when the command runs, so it can depend on the current cell value. Omitted actions keep their existing behavior. For a mixed selection, copy, cut, and clear remain enabled when at least one cell allows the command and Cairo skips restricted cells. Paste availability in the menu follows the focused cell; a larger paste skips restricted destinations. Cut also requires copy and clear to be allowed for the cell. Row actions and consumer-provided bulk-toolbar actions are not controlled by this configuration.
+
 #### `actions` — extra items on the field's "more actions" menus
 
 Items appear on every field-actions menu (editable table column header, manage-fields panel, customize-columns panel) — only for fields of this type.