@wix/patterns 1.492.0 → 1.494.0

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

@@ -1,3 +1,7 @@
+@st-import [inputArea as textInputArea] from './cellTypes/text/Edit.st.css';
+
+@property st-global(--wds-outline-focus-outer);
+@property st-global(--wds-outline-focus-inner);
 @property st-global(--wds-color-fill-surface-raised);
 @property st-global(--wds-color-border-dark-secondary);
 @property st-global(--wds-color-black-750);
@@ -28,6 +32,7 @@
 @property st-global(--wsr-text-font-size-small);
 @property st-global(--wsr-text-line-height-small);
 @property st-global(--wds-input-padding-horizontal-small);
+@property st-global(--wds-table-action-cell-backdrop-opacity);
 
 :global(td):has(> .root) {
   position: relative;
@@ -84,6 +89,19 @@
   height: 36px;
 }
 
+:global(tr[data-index]):has(.root) {
+  --wds-table-action-cell-backdrop-opacity: 0;
+}
+
+:global(tr[data-index]):has(.root:rowActive) {
+  background: var(--wds-color-black-750, #f6f7f9);
+}
+
+:global(tr[data-index]):has(.root):hover
+  > :global(td):has(> :global([data-hook='collection-action-cell'])) {
+  background: transparent;
+}
+
 .root {
   -st-states: harmony, editing, focused, rowActive, rangeSelected, invalid, readOnly,
     showEditWhenFocused, growable, selectionTop, selectionBottom, selectionLeft,
@@ -124,16 +142,55 @@
   --wds-input-padding-horizontal-small: 8px;
 }
 
+/* The cell border already marks focus while its text editor is active. */
+.root:harmony .textInputArea {
+  --wds-outline-focus-outer: none;
+  --wds-outline-focus-inner: none;
+}
+
 :global(td):has(> .root:harmony) ~ :global(td):has(> .root:harmony) > .root:harmony {
   left: -1px;
 }
 
-/* The sticky header paints over the pixel the first row borrows above itself,
-   which would swallow that row's top border. */
-:global(tr:first-child) > :global(td) > .root {
+.selectorRow {
+  -st-states: active, first;
+}
+
+/* Keep the selector above focused and editing cells during horizontal scroll. */
+:global(tr).selectorRow > :global(td.wds-data-table__selector-cell) {
+  z-index: 4;
+}
+
+/* WDS uses ::after for the sticky shadow; replace its selected-row marker. */
+:global(tr).selectorRow > :global(td.wds-data-table__selector-cell)::before {
+  content: '';
+  position: absolute;
+  inset: -1px 0 0;
+  width: auto;
+  background: none;
+  pointer-events: none;
+  border: var(--wds-border-width-default, 1px) solid
+    var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #dfe5eb));
+  border-right: 0;
+}
+
+/* Keep the shared edge inside the data cell, above the sticky selector. */
+.selectorRow > :global(td.wds-data-table__selector-cell) + :global(td) > .root {
+  left: 0;
+}
+
+/* Virtual rows keep their original index when earlier rows are unmounted. */
+.selectorRow:first > :global(td) > .root,
+.selectorRow:first > :global(td.wds-data-table__selector-cell)::before {
   top: 0;
 }
 
+/* The header already draws the top edge of the first Harmony row. */
+.selectorRow:first:has(.root:harmony)
+  > :global(td.wds-data-table__selector-cell)::before {
+  border-top-color: transparent;
+}
+
 :global(tr[data-index='index-0']) > :global(td) > .root:harmony {
   top: 0;
 }
@@ -147,11 +204,13 @@
 
 /* A multi-cell range keeps the range look, so every single-cell state below
    opts out of it. */
+.selectorRow:hover > :global(td.wds-data-table__selector-cell),
 .root:hover:not(:rowActive):not(:rangeSelected) {
   background: var(--wds-color-black-750, #f6f7f9);
 }
 
 /* Every cell in the focused cell's row. */
+.selectorRow:active > :global(td.wds-data-table__selector-cell),
 .root:rowActive:not(:rangeSelected) {
   background: var(--wds-color-black-750, #f6f7f9);
   box-shadow: inset 0 22px 18px -18px rgba(0, 6, 36, 0.1);

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

@@ -1,11 +1,11 @@
 // @ts-nocheck
 
-
+import "./cellTypes/text/Edit.st.css.js";
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell3938835703";
+var _namespace_ = "EditableCell222919926";
 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":"EditableCell3938835703__root","errorMessage":"EditableCell3938835703__errorMessage"};
+export var classes = {"root":"EditableCell222919926__root","textInputArea":"Edit19302658__inputArea","selectorRow":"EditableCell222919926__selectorRow","errorMessage":"EditableCell222919926__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-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","wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-color-text-placeholder":"--wds-color-text-placeholder","wds-color-text-disabled":"--wds-color-text-disabled","wds-color-black-700":"--wds-color-black-700","wsr-color-D10-30":"--wsr-color-D10-30","wsr-color-D70":"--wsr-color-D70","wds-input-value-font-size-small":"--wds-input-value-font-size-small","wds-input-value-font-line-height-small":"--wds-input-value-font-line-height-small","wds-font-size-body-small":"--wds-font-size-body-small","wds-font-line-height-body-small":"--wds-font-line-height-body-small","wsr-text-font-size-small":"--wsr-text-font-size-small","wsr-text-line-height-small":"--wsr-text-line-height-small","wds-input-padding-horizontal-small":"--wds-input-padding-horizontal-small"}; 
+export var vars = {"wds-outline-focus-outer":"--wds-outline-focus-outer","wds-outline-focus-inner":"--wds-outline-focus-inner","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","wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-color-text-placeholder":"--wds-color-text-placeholder","wds-color-text-disabled":"--wds-color-text-disabled","wds-color-black-700":"--wds-color-black-700","wsr-color-D10-30":"--wsr-color-D10-30","wsr-color-D70":"--wsr-color-D70","wds-input-value-font-size-small":"--wds-input-value-font-size-small","wds-input-value-font-line-height-small":"--wds-input-value-font-line-height-small","wds-font-size-body-small":"--wds-font-size-body-small","wds-font-line-height-body-small":"--wds-font-line-height-body-small","wsr-text-font-size-small":"--wsr-text-font-size-small","wsr-text-line-height-small":"--wsr-text-line-height-small","wds-input-padding-horizontal-small":"--wds-input-padding-horizontal-small","wds-table-action-cell-backdrop-opacity":"--wds-table-action-cell-backdrop-opacity"}; 
 
 
 

package/src/components/EditableTable/EditableTable.tsx

@@ -26,6 +26,7 @@ import type { TableColumn } from '../../model';
 import { useHeaderActions } from './useHeaderActions';
 import { version as cairoVersion } from '../../version';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { st, classes } from './EditableCell.st.css.js';
 
 export interface EditableTableProps<
   T,
@@ -138,7 +139,7 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
   );
 
   const invalidCellKeys = new Set(state.cellValue._pendingCells.keys());
-  const hasInvalidRows = invalidCellKeys.size > 0;
+  const focusedRowKey = state.cellInteraction.focusedCell?.rowKey;
   const rowStatus: NonNullable<TableVirtualProps<T, F>['rowStatus']> = (
     row,
   ) => {
@@ -175,7 +176,14 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
           showSelection
           showRowNumbers
           showAddFieldButton
-          {...(hasInvalidRows ? { rowStatus } : {})}
+          stickySelectionColumn
+          rowStatus={rowStatus}
+          dynamicRowClass={(row, rowNum) =>
+            st(classes.selectorRow, {
+              active: row.key === focusedRowKey,
+              first: rowNum === 0,
+            })
+          }
         >
           {showAddItemRow && (
             <AddItemRow

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover4287542412";
+var _namespace_ = "HeaderActionsPopover2203177148";
 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":"HeaderActionsPopover4287542412__root"};
+export var classes = {"root":"HeaderActionsPopover2203177148__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_ = "CellViewLayout3111874611";
+var _namespace_ = "CellViewLayout3052213942";
 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":"CellViewLayout3111874611__root"};
+export var classes = {"root":"CellViewLayout3052213942__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "JsonInputEdit258974341";
+var _namespace_ = "JsonInputEdit3904331697";
 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":"JsonInputEdit258974341__root","jsonInput":"JsonInputEdit258974341__jsonInput"};
+export var classes = {"root":"JsonInputEdit3904331697__root","jsonInput":"JsonInputEdit3904331697__jsonInput"};
 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_ = "Edit566521424";
+var _namespace_ = "Edit4010411396";
 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":"Edit566521424__root","addressInput":"Edit566521424__addressInput"};
+export var classes = {"root":"Edit4010411396__root","addressInput":"Edit4010411396__addressInput"};
 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_ = "Edit1888652970";
+var _namespace_ = "Edit3166583434";
 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":"Edit1888652970__root","booleanEdit":"Edit1888652970__booleanEdit"};
+export var classes = {"root":"Edit3166583434__root","booleanEdit":"Edit3166583434__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3356383879";
+var _namespace_ = "View1657982704";
 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":"View3356383879__root","booleanView":"View3356383879__booleanView"};
+export var classes = {"root":"View1657982704__root","booleanView":"View1657982704__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit378945840";
+var _namespace_ = "Edit3427717467";
 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":"Edit378945840__root"};
+export var classes = {"root":"Edit3427717467__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3040442536";
+var _namespace_ = "Edit514332001";
 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":"Edit3040442536__root","dateInput":"Edit3040442536__dateInput"};
+export var classes = {"root":"Edit514332001__root","dateInput":"Edit514332001__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3707917030";
+var _namespace_ = "View1529146851";
 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":"View3707917030__root"};
+export var classes = {"root":"View1529146851__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2464275007";
+var _namespace_ = "Edit770565810";
 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":"Edit2464275007__root","half":"Edit2464275007__half","dateHalf":"Edit2464275007__dateHalf Edit2464275007__half","timeHalf":"Edit2464275007__timeHalf Edit2464275007__half","divider":"Edit2464275007__divider","passiveText":"Edit2464275007__passiveText","placeholderText":"Edit2464275007__placeholderText Edit2464275007__passiveText"};
+export var classes = {"root":"Edit770565810__root","half":"Edit770565810__half","dateHalf":"Edit770565810__dateHalf Edit770565810__half","timeHalf":"Edit770565810__timeHalf Edit770565810__half","divider":"Edit770565810__divider","passiveText":"Edit770565810__passiveText","placeholderText":"Edit770565810__placeholderText Edit770565810__passiveText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/datetime/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View4031449304";
+var _namespace_ = "View2164594497";
 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":"View4031449304__root","leaf":"View4031449304__leaf","datePart":"View4031449304__datePart View4031449304__leaf","timePart":"View4031449304__timePart View4031449304__leaf","placeholder":"View4031449304__placeholder View4031449304__leaf","divider":"View4031449304__divider"};
+export var classes = {"root":"View2164594497__root","leaf":"View2164594497__leaf","datePart":"View2164594497__datePart View2164594497__leaf","timePart":"View2164594497__timePart View2164594497__leaf","placeholder":"View2164594497__placeholder View2164594497__leaf","divider":"View2164594497__divider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3885207675";
+var _namespace_ = "Edit2379122669";
 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":"Edit3885207675__root","emailInput":"Edit3885207675__emailInput"};
+export var classes = {"root":"Edit2379122669__root","emailInput":"Edit2379122669__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3794299030";
+var _namespace_ = "View3369042961";
 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":"View3794299030__root"};
+export var classes = {"root":"View3369042961__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/multiReference/Edit.tsx

@@ -234,6 +234,7 @@ function _MultiReferenceEditContent({
       <CellMultiReferenceInput
         ref={acHandle}
         items={items}
+        loading={showInitialLoader}
         selectedItems={selectedItems}
         value={searchValue}
         onChange={handleSearchChange}

package/src/components/EditableTable/cellTypes/multiReference/Edit.uni.driver.ts

@@ -1,5 +1,6 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import { baseUniDriverFactory } from '../../../../unidriver';
+import { MultiSelectUniDriver } from '@wix/design-system/dist/testkit/unidriver';
 
 const { fireEvent = null } =
   process.env.NODE_ENV === 'test'
@@ -20,6 +21,14 @@ export function MultiReferenceEditUniDriver(base: UniDriver, body: UniDriver) {
     ...baseUniDriverFactory(base),
     hasInput: () => base.$('input').exists(),
     getInputValue: () => base.$('input').value(),
+    hasInitialLoader: () => body.$('[data-hook="initial-loader"]').exists(),
+    hasNoResultsMessage: () =>
+      MultiSelectUniDriver(
+        base.$('[data-hook="multi-reference-input-multiselect"]'),
+        body,
+      ).dropdownLayoutDriver.isOptionExists(
+        'auto-patterns.fields.no_results_found',
+      ),
     getTagsCount: () =>
       base.$$('[data-hook="multi-reference-edit-tag"]').count(),
     typeInInput: async (value: string) => {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit673467467";
+var _namespace_ = "Edit3007089961";
 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":"Edit673467467__root","numberInput":"Edit673467467__numberInput"};
+export var classes = {"root":"Edit3007089961__root","numberInput":"Edit3007089961__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3835677296";
+var _namespace_ = "View1871936684";
 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":"View3835677296__root","textView":"View3835677296__textView"};
+export var classes = {"root":"View1871936684__root","textView":"View1871936684__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1017400932";
+var _namespace_ = "View2018564419";
 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":"View1017400932__root"};
+export var classes = {"root":"View2018564419__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/reference/Edit.uni.driver.ts

@@ -51,6 +51,7 @@ export function ReferenceEditUniDriver(base: UniDriver, body: UniDriver) {
     hasAvatarPrefix: () =>
       base.$('[data-hook="reference-input-avatar-prefix"]').exists(),
     hasInitialLoader: () => body.$('[data-hook="initial-loader"]').exists(),
+    hasEmptyState: () => body.$('[data-hook="empty-state"]').exists(),
     // Dropdown is portal-mounted to document.body, so search in body, not base.
     getOptionCount: async () =>
       body.$$('[data-hook="list-item-select"]').count(),

package/src/components/EditableTable/cellTypes/reference/EmptyReferenceView.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "EmptyReferenceView260927554";
+var _namespace_ = "EmptyReferenceView3244837461";
 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":"EmptyReferenceView260927554__root","placeholder":"EmptyReferenceView260927554__placeholder","placeholderIcon":"EmptyReferenceView260927554__placeholderIcon","placeholderText":"EmptyReferenceView260927554__placeholderText","arrow":"EmptyReferenceView260927554__arrow"};
+export var classes = {"root":"EmptyReferenceView3244837461__root","placeholder":"EmptyReferenceView3244837461__placeholder","placeholderIcon":"EmptyReferenceView3244837461__placeholderIcon","placeholderText":"EmptyReferenceView3244837461__placeholderText","arrow":"EmptyReferenceView3244837461__arrow"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/reference/index.ts

@@ -25,5 +25,6 @@ export const referenceCellType = defineCellType<ReferenceValue>({
     return parsed;
   },
   editable: true,
+  editOnClick: () => true,
   onTypeToEdit: () => ({}),
 });

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1562936568";
+var _namespace_ = "Edit1135665701";
 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":"Edit1562936568__root","selectInput":"Edit1562936568__selectInput"};
+export var classes = {"root":"Edit1135665701__root","selectInput":"Edit1135665701__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1240238878";
+var _namespace_ = "Edit19302658";
 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":"Edit1240238878__root","editWrapper":"Edit1240238878__editWrapper","inputArea":"Edit1240238878__inputArea"};
+export var classes = {"root":"Edit19302658__root","editWrapper":"Edit19302658__editWrapper","inputArea":"Edit19302658__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1177071391";
+var _namespace_ = "View1584416757";
 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":"View1177071391__root"};
+export var classes = {"root":"View1584416757__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit290340085";
+var _namespace_ = "Edit288431653";
 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":"Edit290340085__root","wrapper":"Edit290340085__wrapper","overlay":"Edit290340085__overlay"};
+export var classes = {"root":"Edit288431653__root","wrapper":"Edit288431653__wrapper","overlay":"Edit288431653__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1904012015";
+var _namespace_ = "Edit3350619743";
 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":"Edit1904012015__root","urlInput":"Edit1904012015__urlInput"};
+export var classes = {"root":"Edit3350619743__root","urlInput":"Edit3350619743__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};