@wix/patterns 1.407.0 → 1.408.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse3009257275";
+var _namespace_ = "Collapse179457297";
 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":"Collapse3009257275__root","exit":"Collapse3009257275__exit"};
+export var classes = {"root":"Collapse179457297__root","exit":"Collapse179457297__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_ = "CollectionPage1588404576";
+var _namespace_ = "CollectionPage3246431164";
 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":"CollectionPage1588404576__root"};
+export var classes = {"root":"CollectionPage3246431164__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_ = "CollectionSectionHeader1580615331";
+var _namespace_ = "CollectionSectionHeader666307879";
 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":"CollectionSectionHeader1580615331__root","summaryIcon":"CollectionSectionHeader1580615331__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader666307879__root","summaryIcon":"CollectionSectionHeader666307879__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_ = "CollectionTable630694244";
+var _namespace_ = "CollectionTable215268445";
 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":"CollectionTable630694244__root"};
+export var classes = {"root":"CollectionTable215268445__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_ = "CollectionTableWSRTable4033495689";
+var _namespace_ = "CollectionTableWSRTable3091768728";
 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":"CollectionTableWSRTable4033495689__root"};
+export var classes = {"root":"CollectionTableWSRTable3091768728__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_ = "CollectionToolbar596944470";
+var _namespace_ = "CollectionToolbar908768589";
 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":"CollectionToolbar596944470__root","left":"CollectionToolbar596944470__left","right":"CollectionToolbar596944470__right","fullWidth":"CollectionToolbar596944470__fullWidth"};
+export var classes = {"root":"CollectionToolbar908768589__root","left":"CollectionToolbar908768589__left","right":"CollectionToolbar908768589__right","fullWidth":"CollectionToolbar908768589__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_ = "SearchOrCustomFilter1252279095";
+var _namespace_ = "SearchOrCustomFilter2140848998";
 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":"SearchOrCustomFilter1252279095__root","search":"SearchOrCustomFilter1252279095__search","searchMobile":"SearchOrCustomFilter1252279095__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter2140848998__root","search":"SearchOrCustomFilter2140848998__search","searchMobile":"SearchOrCustomFilter2140848998__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_ = "AutoCompleteReadonly1119315233";
+var _namespace_ = "AutoCompleteReadonly1682096311";
 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":"AutoCompleteReadonly1119315233__root"};
+export var classes = {"root":"AutoCompleteReadonly1682096311__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_ = "ViewsDropdown3852049630";
+var _namespace_ = "ViewsDropdown2476521499";
 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":"ViewsDropdown3852049630__root"};
+export var classes = {"root":"ViewsDropdown2476521499__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_ = "DragHandle3926167941";
+var _namespace_ = "DragHandle2558321975";
 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":"DragHandle3926167941__root"};
+export var classes = {"root":"DragHandle2558321975__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell1444546552";
+var _namespace_ = "EditableCell3604687257";
 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":"EditableCell1444546552__root","validationIndicator":"EditableCell1444546552__validationIndicator"};
+export var classes = {"root":"EditableCell3604687257__root","validationIndicator":"EditableCell3604687257__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover449170644";
+var _namespace_ = "HeaderActionsPopover2310692122";
 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":"HeaderActionsPopover449170644__root"};
+export var classes = {"root":"HeaderActionsPopover2310692122__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_ = "CellViewLayout3782059048";
+var _namespace_ = "CellViewLayout2029745465";
 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":"CellViewLayout3782059048__root"};
+export var classes = {"root":"CellViewLayout2029745465__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_ = "Edit1987376397";
+var _namespace_ = "Edit2110654802";
 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":"Edit1987376397__root","booleanEdit":"Edit1987376397__booleanEdit"};
+export var classes = {"root":"Edit2110654802__root","booleanEdit":"Edit2110654802__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_ = "View916549261";
+var _namespace_ = "View1321611518";
 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":"View916549261__root","booleanView":"View916549261__booleanView"};
+export var classes = {"root":"View1321611518__root","booleanView":"View1321611518__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_ = "Edit2631968375";
+var _namespace_ = "Edit1155761399";
 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":"Edit2631968375__root","dateInput":"Edit2631968375__dateInput"};
+export var classes = {"root":"Edit1155761399__root","dateInput":"Edit1155761399__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_ = "View650489826";
+var _namespace_ = "View2364548192";
 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":"View650489826__root"};
+export var classes = {"root":"View2364548192__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_ = "Edit4086073852";
+var _namespace_ = "Edit1038859797";
 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":"Edit4086073852__root","emailInput":"Edit4086073852__emailInput"};
+export var classes = {"root":"Edit1038859797__root","emailInput":"Edit1038859797__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_ = "View4152840706";
+var _namespace_ = "View1733648103";
 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":"View4152840706__root"};
+export var classes = {"root":"View1733648103__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -3,6 +3,7 @@ import { textCellType } from './text';
 import { numberCellType } from './number';
 import { booleanCellType } from './boolean';
 import { dateCellType } from './date';
+import { timeCellType } from './time';
 import { urlCellType } from './url';
 import { emailCellType } from './email';
 import { objectCellType } from './object';
@@ -19,6 +20,7 @@ export {
   numberCellType,
   booleanCellType,
   dateCellType,
+  timeCellType,
   urlCellType,
   emailCellType,
   objectCellType,
@@ -37,6 +39,7 @@ export const builtInCellTypes: CellType[] = [
   numberCellType,
   booleanCellType,
   dateCellType,
+  timeCellType,
   urlCellType,
   emailCellType,
   objectCellType,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2967145902";
+var _namespace_ = "Edit2945983694";
 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":"Edit2967145902__root","numberInput":"Edit2967145902__numberInput"};
+export var classes = {"root":"Edit2945983694__root","numberInput":"Edit2945983694__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_ = "View1184216687";
+var _namespace_ = "View3797637327";
 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":"View1184216687__root","textView":"View1184216687__textView"};
+export var classes = {"root":"View3797637327__root","textView":"View3797637327__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_ = "Edit1926283062";
+var _namespace_ = "Edit1008410069";
 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":"Edit1926283062__root","jsonInput":"Edit1926283062__jsonInput"};
+export var classes = {"root":"Edit1008410069__root","jsonInput":"Edit1008410069__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_ = "View407662992";
+var _namespace_ = "View3724528834";
 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":"View407662992__root"};
+export var classes = {"root":"View3724528834__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_ = "Edit2623857855";
+var _namespace_ = "Edit479775530";
 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":"Edit2623857855__root","selectInput":"Edit2623857855__selectInput"};
+export var classes = {"root":"Edit479775530__root","selectInput":"Edit479775530__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_ = "Edit2585579382";
+var _namespace_ = "Edit3290423404";
 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":"Edit2585579382__root","editWrapper":"Edit2585579382__editWrapper","inputArea":"Edit2585579382__inputArea"};
+export var classes = {"root":"Edit3290423404__root","editWrapper":"Edit3290423404__editWrapper","inputArea":"Edit3290423404__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_ = "View2508001803";
+var _namespace_ = "View749422751";
 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":"View2508001803__root"};
+export var classes = {"root":"View749422751__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -0,0 +1,32 @@
+@property st-global(--wds-input-value-font-size-small);
+@property st-global(--wds-input-value-font-line-height-small);
+@property st-global(--wds-font-size-body-small);
+@property st-global(--wds-font-line-height-body-small);
+@property st-global(--wds-color-background-elevation-base);
+
+.wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  /* WSR TimeInput small renders text at `--wds-font-size-body-tiny` (12px /
+     16px) in the BM/odeditor theme, but `TimeView` (View + overlay) uses WDS
+     `Text size="small"` (14px / 18px). The size mismatch makes the time
+     "shrink-jump" when the mask flips off after the WSR input syncs. Pin the
+     input value font to body-small so both renderings match exactly. */
+  --wds-input-value-font-size-small: var(--wds-font-size-body-small);
+  --wds-input-value-font-line-height-small: var(
+    --wds-font-line-height-body-small
+  );
+}
+
+.overlay {
+  /* Inset by 2px so the cell's editing focus ring
+     (inset box-shadow on EditableCell) stays visible. */
+  position: absolute;
+  inset: 2px;
+  pointer-events: none;
+  background: var(--wds-color-background-elevation-base, #fff);
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "Edit3833327034";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"Edit3833327034__root","wrapper":"Edit3833327034__wrapper","overlay":"Edit3833327034__overlay"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"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","wds-color-background-elevation-base":"--wds-color-background-elevation-base"}; 
+
+
+
+

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

@@ -0,0 +1,63 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  CellTimeInput,
+  TimeView as FieldsTimeView,
+  type Time,
+} from '@wix/patterns-fields';
+import type { TimeInputImperativeActions } from '@wix/design-system';
+import type { CellEditProps } from '../../types';
+import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
+import { CellViewLayout } from '../CellViewLayout';
+import { classes } from './Edit.st.css.js';
+
+export const TimeEdit: React.FC<CellEditProps<Time | null>> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  inputRef,
+  editTrigger,
+}) => {
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const timeInputRef = useRef<TimeInputImperativeActions | null>(null);
+  const [maskInitialEmpty, setMaskInitialEmpty] = useState(value != null);
+  useEffect(() => setMaskInitialEmpty(false), []);
+
+  const closeDropdown = useCallback(() => timeInputRef.current?.blur(), []);
+  useCloseOnAncestorScroll(wrapperRef, closeDropdown, !!editTrigger);
+
+  const handleKeyDownCapture = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        onCancel();
+      }
+    },
+    [onCancel],
+  );
+
+  return (
+    <div
+      ref={wrapperRef}
+      onKeyDownCapture={handleKeyDownCapture}
+      className={classes.wrapper}
+    >
+      <CellTimeInput
+        ref={timeInputRef}
+        value={value}
+        onChange={onChange}
+        onCommit={onCommit}
+        inputRef={inputRef}
+        dataHook="time-edit"
+      />
+      {maskInitialEmpty && value != null && (
+        <div aria-hidden className={classes.overlay}>
+          <CellViewLayout>
+            <FieldsTimeView data={value} />
+          </CellViewLayout>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,15 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function TimeEditUniDriver(base: UniDriver, _body: UniDriver) {
+  const getInput = () => base.$('input');
+
+  return {
+    ...baseUniDriverFactory(base),
+    getInputValue: () => getInput().attr('value'),
+    clickInput: () => getInput().click(),
+    clickClear: () => base.$('[data-hook="cell-time-input-clear"]').click(),
+    hasClearButton: () =>
+      base.$('[data-hook="cell-time-input-clear"]').exists(),
+  };
+}