@wix/patterns 1.413.0 → 1.415.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader3183592036";
+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":"CollectionSectionHeader3183592036__root","summaryIcon":"CollectionSectionHeader3183592036__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_ = "CollectionTable26941754";
+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":"CollectionTable26941754__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_ = "CollectionTableWSRTable3762678215";
+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":"CollectionTableWSRTable3762678215__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_ = "CollectionToolbar3829799909";
+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":"CollectionToolbar3829799909__root","left":"CollectionToolbar3829799909__left","right":"CollectionToolbar3829799909__right","fullWidth":"CollectionToolbar3829799909__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/CollectionToolbar.uni.driver.ts

@@ -517,6 +517,21 @@ export const CollectionToolbarUniDriver = (
      */
     getPanelFiltersCount: filtersPanel.getPanelFiltersCount,
 
+    /** Whether the filters-panel search box is rendered (only when >7 filters). */
+    isFilterSearchVisible: filtersPanel.isFilterSearchVisible,
+    /** Type into the filters-panel search box. */
+    enterFilterSearch: filtersPanel.enterFilterSearch,
+    /** Clear the filters-panel search input (×). */
+    clearFilterSearchInput: filtersPanel.clearFilterSearchInput,
+    /** Current value of the filters-panel search input. */
+    getFilterSearchValue: filtersPanel.getFilterSearchValue,
+    /** Whether the "No filters match" empty state is visible. */
+    isNoFiltersMatchVisible: filtersPanel.isNoFiltersMatchVisible,
+    /** Title text of the "No filters match" empty state. */
+    getNoFiltersMatchText: filtersPanel.getNoFiltersMatchText,
+    /** Click the "Clear search" button in the empty state. */
+    clickClearSearchButton: filtersPanel.clickClearSearchButton,
+
     /**
      * Returns filter's title at in at index.
      */

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter4293294066";
+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":"SearchOrCustomFilter4293294066__root","search":"SearchOrCustomFilter4293294066__search","searchMobile":"SearchOrCustomFilter4293294066__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_ = "AutoCompleteReadonly1228348019";
+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":"AutoCompleteReadonly1228348019__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_ = "ViewsDropdown152397658";
+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":"ViewsDropdown152397658__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_ = "DragHandle1085988847";
+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":"DragHandle1085988847__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_ = "EditableCell1780177284";
+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":"EditableCell1780177284__root","validationIndicator":"EditableCell1780177284__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_ = "HeaderActionsPopover3170806295";
+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":"HeaderActionsPopover3170806295__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_ = "CellViewLayout1861512399";
+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":"CellViewLayout1861512399__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_ = "Edit807937573";
+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":"Edit807937573__root","addressInput":"Edit807937573__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_ = "Edit1079541041";
+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":"Edit1079541041__root","booleanEdit":"Edit1079541041__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_ = "View2199264589";
+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":"View2199264589__root","booleanView":"View2199264589__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_ = "Edit939185741";
+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":"Edit939185741__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_ = "Edit3159283181";
+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":"Edit3159283181__root","dateInput":"Edit3159283181__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_ = "View4127422310";
+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":"View4127422310__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"}; 
+
+
+
+