@wix/patterns 1.373.0 → 1.375.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse2664134881";
+var _namespace_ = "Collapse495485484";
 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":"Collapse2664134881__root","exit":"Collapse2664134881__exit"};
+export var classes = {"root":"Collapse495485484__root","exit":"Collapse495485484__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_ = "CollectionPage3144922778";
+var _namespace_ = "CollectionPage840018264";
 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":"CollectionPage3144922778__root"};
+export var classes = {"root":"CollectionPage840018264__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_ = "CollectionSectionHeader1877600217";
+var _namespace_ = "CollectionSectionHeader1591435620";
 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":"CollectionSectionHeader1877600217__root","summaryIcon":"CollectionSectionHeader1877600217__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader1591435620__root","summaryIcon":"CollectionSectionHeader1591435620__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_ = "CollectionTable4257229147";
+var _namespace_ = "CollectionTable4275959506";
 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":"CollectionTable4257229147__root"};
+export var classes = {"root":"CollectionTable4275959506__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_ = "CollectionToolbar2783746125";
+var _namespace_ = "CollectionToolbar877256535";
 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":"CollectionToolbar2783746125__root","left":"CollectionToolbar2783746125__left","right":"CollectionToolbar2783746125__right","fullWidth":"CollectionToolbar2783746125__fullWidth"};
+export var classes = {"root":"CollectionToolbar877256535__root","left":"CollectionToolbar877256535__left","right":"CollectionToolbar877256535__right","fullWidth":"CollectionToolbar877256535__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_ = "SearchOrCustomFilter1737076950";
+var _namespace_ = "SearchOrCustomFilter3794450166";
 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":"SearchOrCustomFilter1737076950__root","search":"SearchOrCustomFilter1737076950__search","searchMobile":"SearchOrCustomFilter1737076950__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter3794450166__root","search":"SearchOrCustomFilter3794450166__search","searchMobile":"SearchOrCustomFilter3794450166__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_ = "AutoCompleteReadonly3315901655";
+var _namespace_ = "AutoCompleteReadonly2231257867";
 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":"AutoCompleteReadonly3315901655__root"};
+export var classes = {"root":"AutoCompleteReadonly2231257867__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_ = "ViewsDropdown4159399654";
+var _namespace_ = "ViewsDropdown1096655248";
 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":"ViewsDropdown4159399654__root"};
+export var classes = {"root":"ViewsDropdown1096655248__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomColumnsPanel/ColumnListTableListItem.tsx

@@ -133,7 +133,11 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
         options={[
           {
             value: (
-              <Box {...(prefixIcon ? { verticalAlign: 'middle' } : {})}>
+              <Box
+                {...(prefixIcon ? { verticalAlign: 'middle' } : {})}
+                minWidth={0}
+                flexGrow={1}
+              >
                 <div
                   style={{
                     ...(prefixIcon
@@ -142,8 +146,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
                     padding: '0',
                     cursor: checkboxDisabled ? undefined : 'pointer',
                     overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
+                    minWidth: 0,
                   }}
                   onClick={() => {
                     if (checkboxDisabled) {
@@ -166,6 +169,8 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
                     size="small"
                     weight="normal"
                     dataHook="tableListItem-label"
+                    ellipsis
+                    appendTo="window"
                   >
                     {column.name || column.title || column.id}
                   </Text>
@@ -203,6 +208,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
                     </Box>
                   ),
                   align: 'right' as const,
+                  width: 'auto',
                 },
               ]
             : []),

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

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

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

@@ -9,7 +9,7 @@
 }
 
 .root {
-  -st-states: editing, focused, selected, invalid, selectionTop, selectionBottom,
+  -st-states: editing, focused, selected, invalid, typeToEdit, selectionTop, selectionBottom,
     selectionLeft, selectionRight, copiedTop, copiedBottom, copiedLeft,
     copiedRight;
   display: flex;
@@ -46,10 +46,18 @@
   overflow: visible;
 }
 
-.root:selectionTop { border-top: 2px solid var(--wsr-color-B10); }
-.root:selectionBottom { border-bottom: 2px solid var(--wsr-color-B10); }
-.root:selectionLeft { border-left: 2px solid var(--wsr-color-B10); }
-.root:selectionRight { border-right: 2px solid var(--wsr-color-B10); }
+.root:selectionTop:not(:editing) { border-top: 2px solid var(--wsr-color-B10); }
+.root:selectionBottom:not(:editing) { border-bottom: 2px solid var(--wsr-color-B10); }
+.root:selectionLeft:not(:editing) { border-left: 2px solid var(--wsr-color-B10); }
+.root:selectionRight:not(:editing) { border-right: 2px solid var(--wsr-color-B10); }
+
+/* Type-to-edit cells (text, number, url, email): the keystroke lands directly in
+   the input, so keeping the selection border alongside the editing shadow is
+   intentional — it communicates "this cell is selected and being typed into". */
+.root:selectionTop:editing:typeToEdit { border-top: 2px solid var(--wsr-color-B10); }
+.root:selectionBottom:editing:typeToEdit { border-bottom: 2px solid var(--wsr-color-B10); }
+.root:selectionLeft:editing:typeToEdit { border-left: 2px solid var(--wsr-color-B10); }
+.root:selectionRight:editing:typeToEdit { border-right: 2px solid var(--wsr-color-B10); }
 
 .root:invalid:not(:editing) {
   background: rgba(229, 0, 77, 0.06);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell2305502241";
+var _namespace_ = "EditableCell304190034";
 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":"EditableCell2305502241__root","validationIndicator":"EditableCell2305502241__validationIndicator"};
+export var classes = {"root":"EditableCell304190034__root","validationIndicator":"EditableCell304190034__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.tsx

@@ -6,6 +6,7 @@ import { StatusWarningFilledSmall } from '@wix/wix-ui-icons-common';
 import { st, classes } from './EditableCell.st.css.js';
 import type { EditableTableState } from '../../state/EditableTable';
 import { useCellFocusAndEditing } from './useCellFocusAndEditing';
+import { Focusable } from './types';
 
 export interface EditableCellProps<T, F extends FiltersMap> {
   state: EditableTableState<T, F>;
@@ -19,8 +20,8 @@ function _EditableCell<T, F extends FiltersMap>({
   columnId,
 }: EditableCellProps<T, F>) {
   const { cellInteraction, clipboard } = state;
-  const cellRef = useRef<HTMLDivElement>(null);
-  const editInputRef = useRef<any>(null);
+  const cellRef = useRef<HTMLDivElement | null>(null);
+  const editInputRef = useRef<Focusable>();
 
   const column = state._columnMap.get(columnId);
   const keyedItem = state._getKeyedItem(rowKey);
@@ -46,6 +47,7 @@ function _EditableCell<T, F extends FiltersMap>({
   const handleDoubleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation();
+      e.preventDefault();
       state.handleCellDoubleClick(rowKey, columnId);
     },
     [state, rowKey, columnId],
@@ -90,7 +92,9 @@ function _EditableCell<T, F extends FiltersMap>({
   const editingValue = cellInteraction.editingValue;
   const showValidationIndicator = !cellValidation.valid && !isEditing;
 
-  const showEdit = isFocused && isEditable && EditComponent;
+  const showEdit =
+    (isEditing || (isFocused && isEditable && !!resolved.toggleValue)) &&
+    EditComponent;
 
   return (
     <div
@@ -100,6 +104,7 @@ function _EditableCell<T, F extends FiltersMap>({
         focused: isFocused,
         selected: isSelected,
         invalid: !cellValidation.valid,
+        typeToEdit: !!resolved.onTypeToEdit,
         selectionTop: selectionBorder.top,
         selectionBottom: selectionBorder.bottom,
         selectionLeft: selectionBorder.left,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CellViewLayout1330645639";
+var _namespace_ = "CellViewLayout823649246";
 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":"CellViewLayout1330645639__root"};
+export var classes = {"root":"CellViewLayout823649246__root"};
 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_ = "Edit2788635568";
+var _namespace_ = "Edit1113995296";
 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":"Edit2788635568__root","booleanEdit":"Edit2788635568__booleanEdit"};
+export var classes = {"root":"Edit1113995296__root","booleanEdit":"Edit1113995296__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_ = "View2993090526";
+var _namespace_ = "View2801818457";
 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":"View2993090526__root","booleanView":"View2993090526__booleanView"};
+export var classes = {"root":"View2801818457__root","booleanView":"View2801818457__booleanView"};
 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_ = "Edit2851709594";
+var _namespace_ = "Edit2206923902";
 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":"Edit2851709594__root","dateInput":"Edit2851709594__dateInput"};
+export var classes = {"root":"Edit2206923902__root","dateInput":"Edit2206923902__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_ = "View2729746067";
+var _namespace_ = "View1773446176";
 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":"View2729746067__root"};
+export var classes = {"root":"View1773446176__root"};
 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_ = "Edit743064207";
+var _namespace_ = "Edit987738361";
 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":"Edit743064207__root","emailInput":"Edit743064207__emailInput"};
+export var classes = {"root":"Edit987738361__root","emailInput":"Edit987738361__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -30,7 +30,11 @@ export const EmailEdit: React.FC<CellEditProps<string>> = ({
   return (
     <Box width="100%" height="100%" verticalAlign="middle">
       <Input
-        ref={inputRef}
+        ref={(instance) => {
+          if (inputRef) {
+            inputRef.current = instance;
+          }
+        }}
         size="small"
         border="none"
         value={value ?? ''}

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2726301072";
+var _namespace_ = "Edit2842916532";
 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":"Edit2726301072__root","numberInput":"Edit2726301072__numberInput"};
+export var classes = {"root":"Edit2842916532__root","numberInput":"Edit2842916532__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -29,7 +29,11 @@ export const NumberEdit: React.FC<CellEditProps<number | null>> = ({
 
   return (
     <CellNumberInput
-      inputRef={inputRef}
+      inputRef={(instance) => {
+        if (inputRef) {
+          inputRef.current = instance;
+        }
+      }}
       size="small"
       border="none"
       value={value ?? undefined}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1515346694";
+var _namespace_ = "View993001290";
 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":"View1515346694__root","textView":"View1515346694__textView"};
+export var classes = {"root":"View993001290__root","textView":"View993001290__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1285765390";
+var _namespace_ = "Edit3788203626";
 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":"Edit1285765390__root","jsonInput":"Edit1285765390__jsonInput"};
+export var classes = {"root":"Edit3788203626__root","jsonInput":"Edit3788203626__jsonInput"};
 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_ = "View1230186224";
+var _namespace_ = "View2359595308";
 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":"View1230186224__root"};
+export var classes = {"root":"View2359595308__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2132964433";
+var _namespace_ = "Edit1952036742";
 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":"Edit2132964433__root","selectInput":"Edit2132964433__selectInput"};
+export var classes = {"root":"Edit1952036742__root","selectInput":"Edit1952036742__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2013016056";
+var _namespace_ = "View4115641211";
 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":"View2013016056__root"};
+export var classes = {"root":"View4115641211__root"};
 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_ = "Edit2433021780";
+var _namespace_ = "Edit2174982117";
 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":"Edit2433021780__root","editWrapper":"Edit2433021780__editWrapper","inputArea":"Edit2433021780__inputArea"};
+export var classes = {"root":"Edit2174982117__root","editWrapper":"Edit2174982117__editWrapper","inputArea":"Edit2174982117__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_ = "View135732759";
+var _namespace_ = "View709551828";
 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":"View135732759__root"};
+export var classes = {"root":"View709551828__root"};
 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_ = "Edit2636163975";
+var _namespace_ = "Edit1985072426";
 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":"Edit2636163975__root","urlInput":"Edit2636163975__urlInput"};
+export var classes = {"root":"Edit1985072426__root","urlInput":"Edit1985072426__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -37,7 +37,11 @@ export const UrlEdit: React.FC<CellEditProps<string>> = ({
       }}
     >
       <Input
-        ref={inputRef}
+        ref={(instance => {
+          if (inputRef) {
+            inputRef.current = instance;
+          }
+        })}
         size="small"
         border="none"
         value={value ?? ''}