@wix/patterns 1.414.0 → 1.415.0

package/src/components/CmsFieldManagement/CmsFieldModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal2663912084";
+var _namespace_ = "CmsFieldModal975986443";
 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":"CmsFieldModal2663912084__root","modal":"CmsFieldModal2663912084__modal"};
+export var classes = {"root":"CmsFieldModal975986443__root","modal":"CmsFieldModal975986443__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection3563202289";
+var _namespace_ = "ValidationAndDefaultsSection2398833596";
 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":"ValidationAndDefaultsSection3563202289__root","accordionWrapper":"ValidationAndDefaultsSection3563202289__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection2398833596__root","accordionWrapper":"ValidationAndDefaultsSection2398833596__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/formFields/CharactersLimitInput.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CharactersLimitInput2205111444";
+var _namespace_ = "CharactersLimitInput1696389466";
 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":"CharactersLimitInput2205111444__root","field":"CharactersLimitInput2205111444__field"};
+export var classes = {"root":"CharactersLimitInput1696389466__root","field":"CharactersLimitInput1696389466__field"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse3267211582";
+var _namespace_ = "Collapse3229310927";
 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":"Collapse3267211582__root","exit":"Collapse3267211582__exit"};
+export var classes = {"root":"Collapse3229310927__root","exit":"Collapse3229310927__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_ = "CollectionPage1008805255";
+var _namespace_ = "CollectionPage174699821";
 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":"CollectionPage1008805255__root"};
+export var classes = {"root":"CollectionPage174699821__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_ = "CollectionSectionHeader880635929";
+var _namespace_ = "CollectionSectionHeader2966344588";
 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":"CollectionSectionHeader2966344588__root","summaryIcon":"CollectionSectionHeader2966344588__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_ = "CollectionTable3164578674";
 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":"CollectionTable3164578674__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_ = "CollectionTableWSRTable4202532970";
 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":"CollectionTableWSRTable4202532970__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_ = "CollectionToolbar3196430360";
 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":"CollectionToolbar3196430360__root","left":"CollectionToolbar3196430360__left","right":"CollectionToolbar3196430360__right","fullWidth":"CollectionToolbar3196430360__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_ = "SearchOrCustomFilter3032424942";
 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":"SearchOrCustomFilter3032424942__root","search":"SearchOrCustomFilter3032424942__search","searchMobile":"SearchOrCustomFilter3032424942__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_ = "AutoCompleteReadonly856514699";
 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":"AutoCompleteReadonly856514699__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_ = "ViewsDropdown4141881970";
 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":"ViewsDropdown4141881970__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_ = "DragHandle962127137";
 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":"DragHandle962127137__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_ = "EditableCell3859249126";
 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":"EditableCell3859249126__root","validationIndicator":"EditableCell3859249126__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_ = "HeaderActionsPopover3870890019";
 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":"HeaderActionsPopover3870890019__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_ = "CellViewLayout3498646373";
 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":"CellViewLayout3498646373__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_ = "Edit3202999855";
 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":"Edit3202999855__root","addressInput":"Edit3202999855__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_ = "Edit157063219";
 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":"Edit157063219__root","booleanEdit":"Edit157063219__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_ = "View2929264616";
 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":"View2929264616__root","booleanView":"View2929264616__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_ = "Edit3416540322";
 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":"Edit3416540322__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_ = "Edit4022858121";
 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":"Edit4022858121__root","dateInput":"Edit4022858121__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_ = "View3170074310";
 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":"View3170074310__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_ = "Edit500229605";
+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":"Edit500229605__root","half":"Edit500229605__half","dateHalf":"Edit500229605__dateHalf Edit500229605__half","timeHalf":"Edit500229605__timeHalf Edit500229605__half","divider":"Edit500229605__divider","passiveText":"Edit500229605__passiveText","placeholderText":"Edit500229605__placeholderText Edit500229605__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"}; 
+
+
+
+