@wix/patterns 1.439.0 → 1.442.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer2848505373";
+var _namespace_ = "CardContainer4012966892";
 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":"CardContainer2848505373__root"};
+export var classes = {"root":"CardContainer4012966892__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_ = "CmsFieldForm1740606650";
+var _namespace_ = "CmsFieldForm3516791577";
 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":"CmsFieldForm1740606650__root","fullBleedDivider":"CmsFieldForm1740606650__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm3516791577__root","fullBleedDivider":"CmsFieldForm3516791577__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_ = "CmsFieldModal3795014477";
+var _namespace_ = "CmsFieldModal2279318908";
 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":"CmsFieldModal3795014477__root","modal":"CmsFieldModal3795014477__modal"};
+export var classes = {"root":"CmsFieldModal2279318908__root","modal":"CmsFieldModal2279318908__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_ = "ValidationAndDefaultsSection4139158258";
+var _namespace_ = "ValidationAndDefaultsSection3388606183";
 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":"ValidationAndDefaultsSection4139158258__root","accordionWrapper":"ValidationAndDefaultsSection4139158258__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection3388606183__root","accordionWrapper":"ValidationAndDefaultsSection3388606183__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/formFields/CharactersLimitInput.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CharactersLimitInput4136386049";
+var _namespace_ = "CharactersLimitInput1150986335";
 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":"CharactersLimitInput4136386049__root","field":"CharactersLimitInput4136386049__field"};
+export var classes = {"root":"CharactersLimitInput1150986335__root","field":"CharactersLimitInput1150986335__field"};
 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_ = "Collapse2027186024";
+var _namespace_ = "Collapse1655527787";
 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":"Collapse2027186024__root","exit":"Collapse2027186024__exit"};
+export var classes = {"root":"Collapse1655527787__root","exit":"Collapse1655527787__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage3931506834";
+var _namespace_ = "CollectionPage3010170761";
 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":"CollectionPage3931506834__root"};
+export var classes = {"root":"CollectionPage3010170761__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_ = "CollectionSectionHeader3967961940";
+var _namespace_ = "CollectionSectionHeader1188848597";
 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":"CollectionSectionHeader3967961940__root","summaryIcon":"CollectionSectionHeader3967961940__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader1188848597__root","summaryIcon":"CollectionSectionHeader1188848597__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_ = "CollectionTable2163353939";
+var _namespace_ = "CollectionTable3169515616";
 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":"CollectionTable2163353939__root"};
+export var classes = {"root":"CollectionTable3169515616__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_ = "CollectionTableWSRTable729496674";
+var _namespace_ = "CollectionTableWSRTable1277512044";
 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":"CollectionTableWSRTable729496674__root"};
+export var classes = {"root":"CollectionTableWSRTable1277512044__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_ = "CollectionToolbar3928902034";
+var _namespace_ = "CollectionToolbar2854910717";
 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":"CollectionToolbar3928902034__root","right":"CollectionToolbar3928902034__right","left":"CollectionToolbar3928902034__left","fullWidth":"CollectionToolbar3928902034__fullWidth"};
+export var classes = {"root":"CollectionToolbar2854910717__root","right":"CollectionToolbar2854910717__right","left":"CollectionToolbar2854910717__left","fullWidth":"CollectionToolbar2854910717__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_ = "SearchOrCustomFilter2701784152";
+var _namespace_ = "SearchOrCustomFilter3795101053";
 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":"SearchOrCustomFilter2701784152__root","search":"SearchOrCustomFilter2701784152__search","searchMobile":"SearchOrCustomFilter2701784152__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter3795101053__root","search":"SearchOrCustomFilter3795101053__search","searchMobile":"SearchOrCustomFilter3795101053__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_ = "AutoCompleteReadonly1431272609";
+var _namespace_ = "AutoCompleteReadonly2092714156";
 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":"AutoCompleteReadonly1431272609__root"};
+export var classes = {"root":"AutoCompleteReadonly2092714156__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_ = "ViewsDropdown2379817927";
+var _namespace_ = "ViewsDropdown2798625200";
 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":"ViewsDropdown2379817927__root"};
+export var classes = {"root":"ViewsDropdown2798625200__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomColumnsPanel/ColumnListTableListItem.tsx

@@ -43,7 +43,10 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
 
   const { infoTooltipProps } = column;
   const prefixIcon = showFieldTypeIcons
-    ? getFieldTypeIcon({ fieldType: column.fieldType })
+    ? getFieldTypeIcon({
+        fieldType: column.fieldType,
+        icons: column.fieldTypeIcons,
+      })
     : null;
 
   const checkboxDisabled = !column.hideable;

package/src/components/CustomFieldFilters/HasValueCustomFieldFilter.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { FilterProps } from '../../model';
+import { MultiInlineCheckboxFilter } from '../MultiInlineCheckboxFilter';
+
+/** The option ids a source reads to turn this filter into an emptiness query.
+ *  Changing them breaks every source that matches on them. */
+export const HAS_VALUE_OPTION_IDS = {
+  hasValue: 'hasValue',
+  noValue: 'noValue',
+} as const;
+
+interface HasValueOption {
+  id: string;
+  name: string;
+}
+
+interface HasValueCustomFieldFilterProps
+  extends FilterProps<HasValueOption[]> {}
+
+/**
+ * Filters a field on whether it holds anything, for types with no value to
+ * match against — an image, a document, a colour.
+ *
+ * Two checkboxes rather than a radio group: selecting both has to mean "no
+ * filter", which a radio group can't express.
+ */
+export const HasValueCustomFieldFilter = (
+  props: HasValueCustomFieldFilterProps,
+) => {
+  const { translate: t } = useWixPatternsContainer();
+
+  return (
+    <MultiInlineCheckboxFilter
+      {...props}
+      data={[
+        {
+          id: HAS_VALUE_OPTION_IDS.hasValue,
+          name: t('cairo.filterOperator.exists'),
+        },
+        {
+          id: HAS_VALUE_OPTION_IDS.noValue,
+          name: t('cairo.filterOperator.isEmpty'),
+        },
+      ]}
+    />
+  );
+};

package/src/components/CustomFieldModal/CustomFieldTypeDropdown.tsx

@@ -49,6 +49,7 @@ export const _CustomFieldTypeDropdown = (
             {getFieldTypeIcon({
               fieldType: option.patternsType,
               size: 'medium',
+              icons: option.icons,
             })}
           </Box>
         ),
@@ -105,6 +106,7 @@ export const _CustomFieldTypeDropdown = (
               {getFieldTypeIcon({
                 fieldType: selectedType.patternsType,
                 size: 'medium',
+                icons: selectedType.icons,
               })}
             </Box>
           </Input.IconAffix>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle554970627";
+var _namespace_ = "DragHandle880807969";
 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":"DragHandle554970627__root"};
+export var classes = {"root":"DragHandle880807969__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,14 +1,20 @@
 @property st-global(--wds-color-fill-surface-raised);
 @property st-global(--wds-color-border-dark-secondary);
 @property st-global(--wds-color-black-750);
+@property st-global(--wds-color-red-100);
+@property st-global(--wds-color-fill-surface-overlay);
 @property st-global(--wds-input-border-color-hover);
 @property st-global(--wds-input-border-color-focus);
 @property st-global(--wds-border-width-default);
+@property st-global(--wds-border-radius-400);
+@property st-global(--wds-popover-fill);
+@property st-global(--wds-popover-border-radius);
+@property st-global(--wds-shadow-surface-overlay);
 @property st-global(--wsr-color-B10);
 @property st-global(--wsr-color-B40);
 @property st-global(--wsr-color-D60);
 @property st-global(--wsr-color-D80);
-@property st-global(--wsr-color-Y10);
+@property st-global(--wsr-color-R10);
 
 :global(td):has(> .root) {
   position: relative;
@@ -143,8 +149,12 @@
   border-right: 2px solid var(--wsr-color-B10);
 }
 
-.root:invalid:not(:editing) {
-  background: rgba(229, 0, 77, 0.06);
+/* Each selector carries one state more than the blue hover/focus rule it beats. */
+.root:invalid,
+.root:invalid:rowActive:hover:not(:focused):not(:rangeSelected),
+.root:invalid:focused:not(:rangeSelected),
+.root:invalid:has([data-inner-focused]) {
+  border-color: var(--wds-color-red-100, var(--wsr-color-R10, #e62214));
 }
 
 .root:copiedTop:not(:selectionTop) {
@@ -160,9 +170,32 @@
   border-right: 2px dashed var(--wsr-color-B10);
 }
 
-.validationIndicator {
-  flex-shrink: 0;
-  margin-left: 8px;
-  margin-right: 6px;
-  color: var(--wsr-color-Y10);
+.root:invalid:not(:focused):not(:editing) {
+  z-index: 1;
+}
+
+.errorMessage {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: -1px;
+  z-index: 4;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: 240px;
+  padding: 6px 8px;
+  /* Passive message — never swallow a click meant for the row below. */
+  pointer-events: none;
+  border-radius: var(
+    --wds-popover-border-radius,
+    var(--wds-border-radius-400, 8px)
+  );
+  background: var(
+    --wds-popover-fill,
+    var(--wds-color-fill-surface-overlay, var(--wsr-color-D80, #ffffff))
+  );
+  box-shadow: var(
+    --wds-shadow-surface-overlay,
+    0 0 18px rgba(0, 6, 36, 0.1),
+    0 6px 6px rgba(0, 6, 36, 0.05)
+  );
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell3774377124";
+var _namespace_ = "EditableCell340733684";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EditableCell3774377124__root","validationIndicator":"EditableCell3774377124__validationIndicator"};
+export var classes = {"root":"EditableCell340733684__root","errorMessage":"EditableCell340733684__errorMessage"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-fill-surface-raised":"--wds-color-fill-surface-raised","wds-color-border-dark-secondary":"--wds-color-border-dark-secondary","wds-color-black-750":"--wds-color-black-750","wds-input-border-color-hover":"--wds-input-border-color-hover","wds-input-border-color-focus":"--wds-input-border-color-focus","wds-border-width-default":"--wds-border-width-default","wsr-color-B10":"--wsr-color-B10","wsr-color-B40":"--wsr-color-B40","wsr-color-D60":"--wsr-color-D60","wsr-color-D80":"--wsr-color-D80","wsr-color-Y10":"--wsr-color-Y10"}; 
+export var vars = {"wds-color-fill-surface-raised":"--wds-color-fill-surface-raised","wds-color-border-dark-secondary":"--wds-color-border-dark-secondary","wds-color-black-750":"--wds-color-black-750","wds-color-red-100":"--wds-color-red-100","wds-color-fill-surface-overlay":"--wds-color-fill-surface-overlay","wds-input-border-color-hover":"--wds-input-border-color-hover","wds-input-border-color-focus":"--wds-input-border-color-focus","wds-border-width-default":"--wds-border-width-default","wds-border-radius-400":"--wds-border-radius-400","wds-popover-fill":"--wds-popover-fill","wds-popover-border-radius":"--wds-popover-border-radius","wds-shadow-surface-overlay":"--wds-shadow-surface-overlay","wsr-color-B10":"--wsr-color-B10","wsr-color-B40":"--wsr-color-B40","wsr-color-D60":"--wsr-color-D60","wsr-color-D80":"--wsr-color-D80","wsr-color-R10":"--wsr-color-R10"}; 
 
 
 

package/src/components/EditableTable/EditableCell.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import type { FiltersMap } from '@wix/bex-core';
-import { Tooltip } from '@wix/design-system';
-import { StatusWarningFilledSmall } from '@wix/wix-ui-icons-common/lazy';
+import { Text } from '@wix/design-system';
 import { st, classes } from './EditableCell.st.css.js';
 import type { EditableTableState } from '../../state/EditableTable';
 import { useCellFocusAndEditing } from './useCellFocusAndEditing';
@@ -97,7 +96,7 @@ function _EditableCell<T, F extends FiltersMap>({
   }
 
   const { ViewComponent, EditComponent } = resolved;
-  const showValidationIndicator = !cellValidation.valid && !isEditing;
+  const showErrorMessage = !cellValidation.valid && (isFocused || isEditing);
 
   const showEdit =
     (isEditing ||
@@ -140,56 +139,63 @@ function _EditableCell<T, F extends FiltersMap>({
   const EditWrapper = resolved.EditWrapper;
 
   return (
-    <div
-      ref={cellRef}
-      className={st(classes.root, {
-        editing: isEditing,
-        focused: isFocused,
-        rowActive: isRowActive,
-        rangeSelected: isSelected && isRangeSelection,
-        invalid: !cellValidation.valid,
-        showEditWhenFocused: !!resolved.showEditWhenFocused,
-        growable: !!resolved.growable,
-        selectionTop: isRangeSelection && selectionBorder.top,
-        selectionBottom: isRangeSelection && selectionBorder.bottom,
-        selectionLeft: isRangeSelection && selectionBorder.left,
-        selectionRight: isRangeSelection && selectionBorder.right,
-        copiedTop: copiedBorder.top,
-        copiedBottom: copiedBorder.bottom,
-        copiedLeft: copiedBorder.left,
-        copiedRight: copiedBorder.right,
-      })}
-      onClick={handleClick}
-      onDoubleClick={handleDoubleClick}
-      onKeyDown={cellKeyboard.onKeyDown}
-      role="gridcell"
-      aria-selected={isSelected}
-      aria-readonly={!isEditable}
-      aria-invalid={!cellValidation.valid || undefined}
-      tabIndex={isFocused ? 0 : -1}
-      data-row-key={rowKey}
-      data-column-id={columnId}
-      data-editing={isEditing || undefined}
-    >
-      {showValidationIndicator && (
-        <Tooltip content={cellValidation.errors?.join(', ')} appendTo="window">
-          <span data-hook="validation-indicator">
-            <StatusWarningFilledSmall className={classes.validationIndicator} />
-          </span>
-        </Tooltip>
-      )}
-      {EditWrapper ? (
-        <EditWrapper
-          typeConfig={column.typeConfig}
-          columnId={columnId}
-          rowKey={rowKey}
+    <>
+      <div
+        ref={cellRef}
+        className={st(classes.root, {
+          editing: isEditing,
+          focused: isFocused,
+          rowActive: isRowActive,
+          rangeSelected: isSelected && isRangeSelection,
+          invalid: !cellValidation.valid,
+          showEditWhenFocused: !!resolved.showEditWhenFocused,
+          growable: !!resolved.growable,
+          selectionTop: isRangeSelection && selectionBorder.top,
+          selectionBottom: isRangeSelection && selectionBorder.bottom,
+          selectionLeft: isRangeSelection && selectionBorder.left,
+          selectionRight: isRangeSelection && selectionBorder.right,
+          copiedTop: copiedBorder.top,
+          copiedBottom: copiedBorder.bottom,
+          copiedLeft: copiedBorder.left,
+          copiedRight: copiedBorder.right,
+        })}
+        onClick={handleClick}
+        onDoubleClick={handleDoubleClick}
+        onKeyDown={cellKeyboard.onKeyDown}
+        role="gridcell"
+        aria-selected={isSelected}
+        aria-readonly={!isEditable}
+        aria-invalid={!cellValidation.valid || undefined}
+        tabIndex={isFocused ? 0 : -1}
+        data-row-key={rowKey}
+        data-column-id={columnId}
+        data-editing={isEditing || undefined}
+      >
+        {EditWrapper ? (
+          <EditWrapper
+            typeConfig={column.typeConfig}
+            columnId={columnId}
+            rowKey={rowKey}
+          >
+            {cellContent}
+          </EditWrapper>
+        ) : (
+          cellContent
+        )}
+      </div>
+      {showErrorMessage && (
+        <div
+          className={classes.errorMessage}
+          data-hook="cell-error-message"
+          data-row-key={rowKey}
+          data-column-id={columnId}
         >
-          {cellContent}
-        </EditWrapper>
-      ) : (
-        cellContent
+          <Text size="small" skin="error">
+            {cellValidation.errors?.join(', ')}
+          </Text>
+        </div>
       )}
-    </div>
+    </>
   );
 }
 

package/src/components/EditableTable/EditableCell.uni.driver.ts

@@ -53,9 +53,16 @@ export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
     /** Get the column id from data attribute */
     getColumnId: () => base.attr('data-column-id'),
 
-    /** Whether the cell contains a validation indicator icon */
-    hasValidationIndicator: () =>
-      base.$('[data-hook="validation-indicator"]').exists(),
+    /** Error message shown under the cell while it's focused/editing (null when hidden).
+     *  It renders next to the cell, not inside it, so it's queried from the body. */
+    getErrorMessage: async () => {
+      const rowKey = await base.attr('data-row-key');
+      const columnId = await base.attr('data-column-id');
+      const message = body.$(
+        `[data-hook="cell-error-message"][data-row-key="${rowKey}"][data-column-id="${columnId}"]`,
+      );
+      return (await message.exists()) ? message.text() : null;
+    },
 
     /** Get the text cell edit driver (for text columns) */
     getTextEdit: () => TextEditUniDriver(base, body),

package/src/components/EditableTable/EditableTable.tsx

@@ -38,6 +38,7 @@ export interface EditableTableProps<
     | 'showSelection'
     | 'showRowNumbers'
     | 'showAddFieldButton'
+    | 'rowStatus'
   > {
   /** EditableTableState instance, created via useEditableTableCollection */
   state: EditableTableState<T, F>;
@@ -111,6 +112,13 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
 
   const contextMenu = useEditableTableContextMenu(state.cellInteraction);
 
+  const invalidCellKeys = new Set(state.cellValue._pendingCells.keys());
+  const hasInvalidRows = invalidCellKeys.size > 0;
+  const rowStatus: NonNullable<TableVirtualProps<T, F>['rowStatus']> = (row) =>
+    state.allColumns.some((col) => invalidCellKeys.has(`${row.key}:${col.id}`))
+      ? { messages: ['This row has invalid cells'] }
+      : null;
+
   return (
     <PatternsFieldsProvider>
       <div
@@ -132,6 +140,7 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
           showSelection
           showRowNumbers
           showAddFieldButton
+          {...(hasInvalidRows ? { rowStatus } : {})}
         >
           {showAddItemRow && <AddItemRow onAdd={handleAddItem} />}
         </TableVirtual>