@wix/patterns 1.478.0 → 1.480.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.478.0",
+  "version": "1.480.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -191,6 +191,7 @@
     "stc:ts": "ts-node -T scripts/rename-st-css-files.ts",
     "sled:gen": "ts-node -T --project tsconfig.scripts.json scripts/generate-sled-story.ts",
     "docs:gen": "ts-node -T --project tsconfig.docs-gen.json scripts/generate-component-docs.ts",
+    "docs:check-links": "ts-node -T --project tsconfig.scripts.json scripts/check-doc-links.ts",
     "dts:bundle": "ts-node -T --project tsconfig.scripts.json scripts/dts-bundle/emit-sibling-types.ts && ts-node -T --project tsconfig.scripts.json scripts/dts-bundle/resolve-entries.ts && ts-node -T --project tsconfig.scripts.json scripts/dts-bundle/resolve-subpaths.ts && ts-node -T --project tsconfig.scripts.json scripts/dts-bundle/classify-types.ts && rollup -c scripts/dts-bundle/rollup.config.mjs && ts-node -T --project tsconfig.scripts.json scripts/dts-bundle/generate-shims.ts && ts-node -T --project tsconfig.scripts.json scripts/dts-bundle/validate-bundles.ts && ts-node -T --project tsconfig.scripts.json scripts/dts-bundle/generate-index.ts",
     "generate-translation-keys": "babel-cli"
   },
@@ -200,6 +201,7 @@
     "dist/types",
     "dist/docs",
     "dist/examples",
+    "dist/templates",
     "dist/dts-bundle",
     "!dist/**/__tests__",
     "src",
@@ -225,11 +227,11 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.384.0",
-    "@wix/bex-utils": "2.171.0",
+    "@wix/bex-core": "2.386.0",
+    "@wix/bex-utils": "2.173.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.106.0",
-    "@wix/patterns-fields-utils": "1.87.0",
+    "@wix/patterns-fields": "1.108.0",
+    "@wix/patterns-fields-utils": "1.89.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "^3.23.1",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -292,7 +294,7 @@
     "@wix/awaiter-utils": "^1.0.76",
     "@wix/babel-cli": "^1.11.0",
     "@wix/business-manager-api": "^1.470.0",
-    "@wix/cairo-integration-utils": "1.146.0",
+    "@wix/cairo-integration-utils": "1.148.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
@@ -436,7 +438,8 @@
     "validations": {
       "source": [
         "lint",
-        "check-wix-design-system-version"
+        "check-wix-design-system-version",
+        "docs:check-links"
       ],
       "postBuild": [
         "type-check:tests",
@@ -453,5 +456,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "32bb112ed4e7ae09aa2016a3566aabdc88794354d1d05726bf308dc6"
+  "falconPackageHash": "c9f0d3377500adaea1d0e246072247550c732793a9bbc21655cf9df0"
 }

package/src/components/CardContainer/CardContainer.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer1421580394";
+var _namespace_ = "CardContainer2793841912";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CardContainer1421580394__root"};
+export var classes = {"root":"CardContainer2793841912__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldForm.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldForm1717452422";
+var _namespace_ = "CmsFieldForm3497504880";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CmsFieldForm1717452422__root","fullBleedDivider":"CmsFieldForm1717452422__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm3497504880__root","fullBleedDivider":"CmsFieldForm3497504880__fullBleedDivider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal402786758";
+var _namespace_ = "CmsFieldModal2025714149";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CmsFieldModal402786758__root","modal":"CmsFieldModal402786758__modal"};
+export var classes = {"root":"CmsFieldModal2025714149__root","modal":"CmsFieldModal2025714149__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection436691404";
+var _namespace_ = "ValidationAndDefaultsSection217451980";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ValidationAndDefaultsSection436691404__root","accordionWrapper":"ValidationAndDefaultsSection436691404__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection217451980__root","accordionWrapper":"ValidationAndDefaultsSection217451980__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Collapse/Collapse.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse2472116571";
+var _namespace_ = "Collapse3394637096";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Collapse2472116571__root","exit":"Collapse2472116571__exit"};
+export var classes = {"root":"Collapse3394637096__root","exit":"Collapse3394637096__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageHeaderNew/CollectionPageHeader.tsx

@@ -35,7 +35,7 @@ export interface CollectionPageHeaderProps {
   /**
    * `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`. Each badge accepts `text`, `skin`, `prefixIcon`, `suffixIcon`, and an optional `tooltip` shown on hover or keyboard focus. \
+   * `badges`: Badges rendered at the end of the title row, after the total. Their size is `small` (`medium` on mobile). Each badge accepts `text`, `skin`, `prefixIcon`, `suffixIcon`, and an optional `tooltip` shown on hover or keyboard focus. \
    * The minimized header shows the title text on its own, so badges are not rendered while it is collapsed.
    * @external
    */
@@ -52,17 +52,17 @@ export interface CollectionPageHeaderProps {
   subtitle?: PageSubTitleProps;
 
   /**
-   * A [`PrimaryActions`](./?path=/story/features-actions-primary-actions--primary-actions) component to be rendered on the header.
+   * A [`PrimaryActions`](./?path=/story/features-actions-primaryactions--primaryactions) component to be rendered on the header.
    * A primary button w/o PopoverMenu component to be rendered in the header.
-   * @overrideType [PrimaryActions](./?path=/story/features-actions-primary-actions--primary-actions)
+   * @overrideType [PrimaryActions](./?path=/story/features-actions-primaryactions--primaryactions)
    * @external
    */
   primaryAction?: PrimaryActionsElement;
 
   /**
-   * A [`SecondaryActions`](./?path=/story/features-actions-secondary-actions--secondary-actions) component to be rendered on the header.
+   * A [`SecondaryActions`](./?path=/story/features-actions-secondaryactions--secondaryactions) component to be rendered on the header.
    * A Secondary button w/o PopoverMenu component to be rendered on the header
-   * @overrideType [SecondaryActions](./?path=/story/features-actions-secondary-actions--secondary-actions)
+   * @overrideType [SecondaryActions](./?path=/story/features-actions-secondaryactions--secondaryactions)
    * @external
    */
   secondaryActions?: SecondaryActionsElement;

package/src/components/CollectionPageNew/CollectionPage.st.css

@@ -7,16 +7,22 @@
   -st-states: mobile, panel;
 }
 
-.root [data-hook="page-header-wrapper"] {
+.root [data-hook='page-header-wrapper'] {
   --wds-space-300: 18px;
 }
 
 .root:mobile {
-  --wds-page-header-padding-horizontal: 0;
-  --wds-page-header-padding-horizontal-small: 0;
+  /* `0px`, not `0`: WDS uses these inside `calc(100% - ...)`, where a unitless 0 is invalid. */
+  --wds-page-header-padding-horizontal: 0px;
+  --wds-page-header-padding-horizontal-small: 0px;
   --wds-color-fill-surface-sunken: #ffffff;
 }
 
+/* The fixed footer that holds the mobile primary action sits flush with the bottom edge. */
+.root:mobile :has(> [data-hook='collection-page-mobile-primary-action']) {
+  padding-bottom: 0;
+}
+
 .root:panel {
   overflow: hidden;
   position: relative;

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage2431242528";
+var _namespace_ = "CollectionPage2268116131";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPage2431242528__root"};
+export var classes = {"root":"CollectionPage2268116131__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionSectionHeader/CollectionSectionHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader1506670591";
+var _namespace_ = "CollectionSectionHeader2061756173";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionSectionHeader1506670591__root","summaryIcon":"CollectionSectionHeader1506670591__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader2061756173__root","summaryIcon":"CollectionSectionHeader2061756173__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTable.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTable3207596603";
+var _namespace_ = "CollectionTable2233426279";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionTable3207596603__root"};
+export var classes = {"root":"CollectionTable2233426279__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTableWSRTable.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTableWSRTable4219007909";
+var _namespace_ = "CollectionTableWSRTable3806895191";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionTableWSRTable4219007909__root"};
+export var classes = {"root":"CollectionTableWSRTable3806895191__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar3488789661";
+var _namespace_ = "CollectionToolbar706146862";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionToolbar3488789661__root","right":"CollectionToolbar3488789661__right","left":"CollectionToolbar3488789661__left","fullWidth":"CollectionToolbar3488789661__fullWidth"};
+export var classes = {"root":"CollectionToolbar706146862__root","right":"CollectionToolbar706146862__right","left":"CollectionToolbar706146862__left","fullWidth":"CollectionToolbar706146862__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter1596131213";
+var _namespace_ = "SearchOrCustomFilter1402730312";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SearchOrCustomFilter1596131213__root","search":"SearchOrCustomFilter1596131213__search","searchMobile":"SearchOrCustomFilter1596131213__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1402730312__root","search":"SearchOrCustomFilter1402730312__search","searchMobile":"SearchOrCustomFilter1402730312__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly2505609745";
+var _namespace_ = "AutoCompleteReadonly2901247477";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"AutoCompleteReadonly2505609745__root"};
+export var classes = {"root":"AutoCompleteReadonly2901247477__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ViewsDropdown3166874312";
+var _namespace_ = "ViewsDropdown3583333627";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ViewsDropdown3166874312__root"};
+export var classes = {"root":"ViewsDropdown3583333627__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomFieldModal/CustomFieldForm.tsx

@@ -202,15 +202,16 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
                       'cairo.customFields.addCustomField.modal.advancedSettings',
                     ),
                   toggleIconPlacement: 'start',
-                  suffix: state.settingsHasError ? (
-                    <Box
-                      verticalAlign="middle"
-                      color="R10"
-                      dataHook="custom-field-modal-settings-error"
-                    >
-                      <StatusAlertFilledSmall />
-                    </Box>
-                  ) : undefined,
+                  suffix:
+                    state.showValidationErrors && state.settingsHasError ? (
+                      <Box
+                        verticalAlign="middle"
+                        color="R10"
+                        dataHook="custom-field-modal-settings-error"
+                      >
+                        <StatusAlertFilledSmall />
+                      </Box>
+                    ) : undefined,
                   open: settings.isOn,
                   onToggle: () => {
                     settings.toggle();
@@ -232,6 +233,7 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
                         <SettingsSection
                           fieldType={type.value}
                           lockedRules={lockedProperties}
+                          showValidationErrors={state.showValidationErrors}
                         />
                       )}
                     </Box>

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CustomFieldFormPiiFields507618773";
+var _namespace_ = "CustomFieldFormPiiFields3391945470";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CustomFieldFormPiiFields507618773__root","tooltipText":"CustomFieldFormPiiFields507618773__tooltipText"};
+export var classes = {"root":"CustomFieldFormPiiFields3391945470__root","tooltipText":"CustomFieldFormPiiFields3391945470__tooltipText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomFieldModal/CustomFieldTypeDropdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   AutoComplete,
@@ -12,6 +12,8 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
+const MAX_TYPE_DROPDOWN_HEIGHT = 400;
+
 export interface CustomFieldTypeDropdownProps {
   state: CustomFieldModalState;
 }
@@ -33,6 +35,14 @@ export const _CustomFieldTypeDropdown = (
 
   const { translate: t } = useWixPatternsContainer();
   const isBmHarmonyTheme = useBmHarmonyTheme();
+  const [maxHeight, setMaxHeight] = useState(MAX_TYPE_DROPDOWN_HEIGHT);
+  useEffect(() => {
+    const updateHeight = () =>
+      setMaxHeight(Math.min(MAX_TYPE_DROPDOWN_HEIGHT, window.innerHeight / 2));
+    updateHeight();
+    window.addEventListener('resize', updateHeight);
+    return () => window.removeEventListener('resize', updateHeight);
+  }, []);
   const isFieldTypeDisabled =
     mode === 'edit' || lockedProperties.includes('type');
 
@@ -100,6 +110,7 @@ export const _CustomFieldTypeDropdown = (
       disabled={isFieldTypeDisabled}
       value={search ?? selectedType?.label ?? ''}
       selectedId={type.value}
+      maxHeightPixels={maxHeight}
       prefix={
         search === null && selectedType ? (
           <Input.IconAffix>

package/src/components/DragHandle/DragHandle.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle1515686070";
+var _namespace_ = "DragHandle206787588";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"DragHandle1515686070__root"};
+export var classes = {"root":"DragHandle206787588__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell418220247";
+var _namespace_ = "EditableCell3567460448";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EditableCell418220247__root","errorMessage":"EditableCell418220247__errorMessage"};
+export var classes = {"root":"EditableCell3567460448__root","errorMessage":"EditableCell3567460448__errorMessage"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.tsx

@@ -61,12 +61,18 @@ function _EditableCell<T, F extends FiltersMap>({
   // For production cell types, consider the per-callback withEnterEdit pattern from cms-web.
   const handleChange = useCallback(
     (newValue: any) => {
+      // A checkbox click is a toggle, same as Enter on the cell. Starting an
+      // edit here would report that click as Enter.
+      if (resolved?.toggleValue) {
+        state.cellValue.toggleCell(rowKey, columnId);
+        return;
+      }
       if (!cellInteraction.isEditing) {
         cellInteraction.startEdit(rowKey, columnId, 'enter');
       }
       cellInteraction.setEditingValue(newValue);
     },
-    [cellInteraction, rowKey, columnId],
+    [resolved, state, cellInteraction, rowKey, columnId],
   );
 
   const handleCommit = useCallback(

package/src/components/EditableTable/EditableTable.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import { GlobalAudioPlayer } from '@wix/patterns-fields';
 import { PatternsFieldsProvider } from '../../providers/PatternsFieldsProvider';
@@ -6,6 +6,7 @@ import type { FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
 import type { FieldsSourceProvider } from '../fieldsSourceProvider';
 import { TableVirtual, type TableVirtualProps } from '../Table/TableVirtual';
 import {
+  type Cell,
   type EditableColumn,
   EditableTableState,
 } from '../../state/EditableTable';
@@ -121,7 +122,20 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
     [editableColumns, state, builtInActions, onCellFocus],
   );
 
-  const contextMenu = useEditableTableContextMenu(state.cellInteraction);
+  const reportContextMenuOpenChange = useCallback(
+    (isOpened: boolean, cell: Cell) => {
+      state.bi.menuOpened({
+        menuType: 'Cell Context Menu',
+        isOpened,
+        cell,
+      });
+    },
+    [state],
+  );
+  const contextMenu = useEditableTableContextMenu(
+    state.cellInteraction,
+    reportContextMenuOpenChange,
+  );
 
   const invalidCellKeys = new Set(state.cellValue._pendingCells.keys());
   const hasInvalidRows = invalidCellKeys.size > 0;

package/src/components/EditableTable/EditableTableContextMenu.tsx

@@ -98,7 +98,7 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
   } = state;
 
   const handleCopy = useCallback(async () => {
-    const tsv = clipboard.copy();
+    const tsv = clipboard.copy('Context Menu');
     try {
       await navigator.clipboard.writeText(tsv);
     } catch {}
@@ -106,7 +106,7 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
   }, [clipboard, onClose]);
 
   const handleCut = useCallback(async () => {
-    const tsv = clipboard.cut();
+    const tsv = clipboard.cut('Context Menu');
     try {
       await navigator.clipboard.writeText(tsv);
     } catch {}
@@ -119,13 +119,13 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
     }
     try {
       const rawData = await navigator.clipboard.readText();
-      clipboard.paste(rawData);
+      clipboard.paste(rawData, 'Context Menu');
     } catch {}
     onClose();
   }, [cellInteraction, clipboard, onClose]);
 
   const handleClear = useCallback(() => {
-    state.clearCells(cellInteraction.selectedCellsList);
+    state.clearCells(cellInteraction.selectedCellsList, 'Context Menu');
     onClose();
   }, [state, cellInteraction, onClose]);
 

package/src/components/EditableTable/HeaderActionsPopover.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover1373088574";
+var _namespace_ = "HeaderActionsPopover1006609834";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"HeaderActionsPopover1373088574__root"};
+export var classes = {"root":"HeaderActionsPopover1006609834__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/HeaderFieldActions.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
 import type { Field, FiltersMap } from '@wix/bex-core';
 import { resolveFieldTypeDefinition } from '@wix/bex-core';
@@ -34,6 +34,17 @@ function _HeaderFieldActions<T, F extends FiltersMap>({
   state,
   column,
 }: HeaderFieldActionsProps<T, F>) {
+  const reportHeaderMenuOpenChange = useCallback(
+    (isOpened: boolean) => {
+      state.bi.menuOpened({
+        menuType: 'Column Header',
+        isOpened,
+        key: column.id,
+      });
+    },
+    [state, column.id],
+  );
+
   const { toolbar } = state;
   const { customColumnsState, panels, toolbarFiltersState } = toolbar;
   const source = toolbar.collectionFieldsSource;
@@ -113,6 +124,7 @@ function _HeaderFieldActions<T, F extends FiltersMap>({
     <HeaderActionsPopover
       actions={groups}
       dataHook={`header-actions-${column.id}`}
+      onOpenChange={reportHeaderMenuOpenChange}
     />
   );
 }