@wix/patterns 1.439.0 → 1.440.0

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_ = "CmsFieldModal2659787844";
 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":"CmsFieldModal2659787844__root","modal":"CmsFieldModal2659787844__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_ = "ValidationAndDefaultsSection1624267018";
 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":"ValidationAndDefaultsSection1624267018__root","accordionWrapper":"ValidationAndDefaultsSection1624267018__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_ = "CharactersLimitInput58631691";
 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":"CharactersLimitInput58631691__root","field":"CharactersLimitInput58631691__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_ = "Collapse4267657757";
 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":"Collapse4267657757__root","exit":"Collapse4267657757__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_ = "CollectionPage570037933";
 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":"CollectionPage570037933__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_ = "CollectionSectionHeader3294999979";
 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":"CollectionSectionHeader3294999979__root","summaryIcon":"CollectionSectionHeader3294999979__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_ = "CollectionTable235859930";
 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":"CollectionTable235859930__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_ = "CollectionTableWSRTable2828084446";
 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":"CollectionTableWSRTable2828084446__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_ = "CollectionToolbar4111143793";
 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":"CollectionToolbar4111143793__root","right":"CollectionToolbar4111143793__right","left":"CollectionToolbar4111143793__left","fullWidth":"CollectionToolbar4111143793__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_ = "SearchOrCustomFilter3974950842";
 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":"SearchOrCustomFilter3974950842__root","search":"SearchOrCustomFilter3974950842__search","searchMobile":"SearchOrCustomFilter3974950842__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_ = "AutoCompleteReadonly888453355";
 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":"AutoCompleteReadonly888453355__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_ = "ViewsDropdown489368896";
 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":"ViewsDropdown489368896__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "DragHandle3816638650";
 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":"DragHandle3816638650__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_ = "EditableCell2536807493";
 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":"EditableCell2536807493__root","errorMessage":"EditableCell2536807493__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>

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

@@ -50,6 +50,14 @@ export function EditableTableUniDriver(base: UniDriver, body: UniDriver) {
     /** Total number of gridcells rendered */
     getCellsCount: () => getCells().count(),
 
+    /** Whether the row shows the error indicator in its status slot */
+    hasRowError: (rowKey: string) =>
+      base
+        .$(
+          `[data-hook="table-row-${rowKey}"] [data-hook="row-status-indicator"]`,
+        )
+        .exists(),
+
     /** Wait for at least one data row to render */
     waitForRow: (timeout?: number) => getRows().get(0).wait(timeout),
 

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

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

package/src/components/EditableTable/cellTypes/CellViewLayout.st.css.ts

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

package/src/components/EditableTable/cellTypes/address/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3533923861";
+var _namespace_ = "Edit889453882";
 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":"Edit3533923861__root","addressInput":"Edit3533923861__addressInput"};
+export var classes = {"root":"Edit889453882__root","addressInput":"Edit889453882__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/array/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3170590078";
+var _namespace_ = "Edit3189140528";
 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":"Edit3170590078__root","jsonInput":"Edit3170590078__jsonInput"};
+export var classes = {"root":"Edit3189140528__root","jsonInput":"Edit3189140528__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1674725188";
+var _namespace_ = "Edit2528760339";
 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":"Edit1674725188__root","booleanEdit":"Edit1674725188__booleanEdit"};
+export var classes = {"root":"Edit2528760339__root","booleanEdit":"Edit2528760339__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};