@wix/patterns 1.414.0 → 1.416.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader880635929";
+var _namespace_ = "CollectionSectionHeader2463233220";
 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":"CollectionSectionHeader880635929__root","summaryIcon":"CollectionSectionHeader880635929__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader2463233220__root","summaryIcon":"CollectionSectionHeader2463233220__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_ = "CollectionTable807464939";
+var _namespace_ = "CollectionTable177592050";
 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":"CollectionTable807464939__root"};
+export var classes = {"root":"CollectionTable177592050__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_ = "CollectionTableWSRTable1373554969";
+var _namespace_ = "CollectionTableWSRTable3585433084";
 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":"CollectionTableWSRTable1373554969__root"};
+export var classes = {"root":"CollectionTableWSRTable3585433084__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_ = "CollectionToolbar2701551751";
+var _namespace_ = "CollectionToolbar2859639331";
 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":"CollectionToolbar2701551751__root","left":"CollectionToolbar2701551751__left","right":"CollectionToolbar2701551751__right","fullWidth":"CollectionToolbar2701551751__fullWidth"};
+export var classes = {"root":"CollectionToolbar2859639331__root","left":"CollectionToolbar2859639331__left","right":"CollectionToolbar2859639331__right","fullWidth":"CollectionToolbar2859639331__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_ = "SearchOrCustomFilter905984379";
+var _namespace_ = "SearchOrCustomFilter978022963";
 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":"SearchOrCustomFilter905984379__root","search":"SearchOrCustomFilter905984379__search","searchMobile":"SearchOrCustomFilter905984379__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter978022963__root","search":"SearchOrCustomFilter978022963__search","searchMobile":"SearchOrCustomFilter978022963__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_ = "AutoCompleteReadonly694533157";
+var _namespace_ = "AutoCompleteReadonly3854029330";
 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":"AutoCompleteReadonly694533157__root"};
+export var classes = {"root":"AutoCompleteReadonly3854029330__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_ = "ViewsDropdown1498264513";
+var _namespace_ = "ViewsDropdown3222803260";
 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":"ViewsDropdown1498264513__root"};
+export var classes = {"root":"ViewsDropdown3222803260__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_ = "DragHandle1253728081";
+var _namespace_ = "DragHandle1220331729";
 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":"DragHandle1253728081__root"};
+export var classes = {"root":"DragHandle1220331729__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_ = "EditableCell3455593972";
+var _namespace_ = "EditableCell704807111";
 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":"EditableCell3455593972__root","validationIndicator":"EditableCell3455593972__validationIndicator"};
+export var classes = {"root":"EditableCell704807111__root","validationIndicator":"EditableCell704807111__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_ = "HeaderActionsPopover1664627492";
+var _namespace_ = "HeaderActionsPopover3322174912";
 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":"HeaderActionsPopover1664627492__root"};
+export var classes = {"root":"HeaderActionsPopover3322174912__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_ = "CellViewLayout500740637";
+var _namespace_ = "CellViewLayout1815550565";
 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":"CellViewLayout500740637__root"};
+export var classes = {"root":"CellViewLayout1815550565__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_ = "Edit3695030643";
+var _namespace_ = "Edit4141727999";
 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":"Edit3695030643__root","addressInput":"Edit3695030643__addressInput"};
+export var classes = {"root":"Edit4141727999__root","addressInput":"Edit4141727999__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_ = "Edit397843754";
+var _namespace_ = "Edit4186184615";
 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":"Edit397843754__root","booleanEdit":"Edit397843754__booleanEdit"};
+export var classes = {"root":"Edit4186184615__root","booleanEdit":"Edit4186184615__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_ = "View1929381604";
+var _namespace_ = "View4008337157";
 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":"View1929381604__root","booleanView":"View1929381604__booleanView"};
+export var classes = {"root":"View4008337157__root","booleanView":"View4008337157__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_ = "Edit3310109222";
+var _namespace_ = "Edit3018229930";
 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":"Edit3310109222__root"};
+export var classes = {"root":"Edit3018229930__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_ = "Edit3887521139";
+var _namespace_ = "Edit4293614851";
 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":"Edit3887521139__root","dateInput":"Edit3887521139__dateInput"};
+export var classes = {"root":"Edit4293614851__root","dateInput":"Edit4293614851__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { DatePicker } from '@wix/design-system';
+import { closeDatePickerCalendar } from '@wix/patterns-fields';
 import type { CellEditProps } from '../../types';
 import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
 import { classes } from './Edit.st.css.js';
@@ -35,9 +36,8 @@ export const DateEdit: React.FC<CellEditProps<Date | string | null>> = ({
   }, [editTrigger]);
 
   const wrapperRef = useRef<HTMLDivElement | null>(null);
-  // WDS DatePicker types declare closeCalendar but only _closeCalendar exists at runtime.
   const closeCalendar = useCallback(
-    () => (datePickerRef.current as any)?._closeCalendar?.(),
+    () => closeDatePickerCalendar(datePickerRef.current),
     [],
   );
   useCloseOnAncestorScroll(wrapperRef, closeCalendar, !!editTrigger);

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

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

package/src/components/EditableTable/cellTypes/datetime/DateTimeEditWrapper.tsx

@@ -0,0 +1,36 @@
+import React, { useMemo, useRef } from 'react';
+import type { CellEditWrapperProps } from '../../types';
+import { SubCellClickContext, type SubCell } from './subCellContext';
+
+/**
+ * Stable owner (mounted by EditableCell around the cell content, kept mounted
+ * across the edit↔view swap) for the datetime cell's sub-cell click tracking.
+ *
+ * The View writes the most-recently-clicked sub-cell to a ref via the
+ * context; the Edit consumes it on mount to pick the initial sub-edit. This
+ * survives the View→Edit transition without resorting to module-global state
+ * or a document-level listener.
+ */
+export function DateTimeEditWrapper({ children }: CellEditWrapperProps) {
+  const lastClickedRef = useRef<SubCell | null>(null);
+
+  const tracker = useMemo(
+    () => ({
+      consume: () => {
+        const value = lastClickedRef.current;
+        lastClickedRef.current = null;
+        return value;
+      },
+      record: (sub: SubCell) => {
+        lastClickedRef.current = sub;
+      },
+    }),
+    [],
+  );
+
+  return (
+    <SubCellClickContext.Provider value={tracker}>
+      {children}
+    </SubCellClickContext.Provider>
+  );
+}

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

@@ -0,0 +1,44 @@
+@property st-global(--wds-color-border-standard);
+@property st-global(--wds-color-text-placeholder);
+
+.half {
+  min-width: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.dateHalf {
+  -st-extends: half;
+  flex: 60 1 0;
+}
+
+.timeHalf {
+  -st-extends: half;
+  flex: 40 1 0;
+}
+
+.divider {
+  width: 1px;
+  height: 16px;
+  background: var(--wds-color-border-standard, #dfe5eb);
+  flex-shrink: 0;
+}
+
+.passiveText {
+  padding: 9px 12px;
+  font-size: 14px;
+  line-height: 18px;
+  font-family: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  width: 100%;
+}
+
+.placeholderText {
+  -st-extends: passiveText;
+  color: var(--wds-color-text-placeholder, #868aa5);
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "Edit2738423015";
+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":"Edit2738423015__root","half":"Edit2738423015__half","dateHalf":"Edit2738423015__dateHalf Edit2738423015__half","timeHalf":"Edit2738423015__timeHalf Edit2738423015__half","divider":"Edit2738423015__divider","passiveText":"Edit2738423015__passiveText","placeholderText":"Edit2738423015__placeholderText Edit2738423015__passiveText"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-color-border-standard":"--wds-color-border-standard","wds-color-text-placeholder":"--wds-color-text-placeholder"}; 
+
+
+
+