@wix/patterns 1.494.0 → 1.496.0

package/dist/types/utils/buildMobileColumns.d.ts

@@ -0,0 +1,10 @@
+import type { CSSProperties } from 'react';
+import { KeyedItem } from '@wix/bex-core';
+import { TableColumn } from '../model';
+interface BuildMobileColumnsOptions {
+    firstColumnStyle?: CSSProperties;
+    imageColumnStyle?: CSSProperties;
+}
+export declare function buildMobileColumns<T>(columns: TableColumn<KeyedItem<T>>[], { firstColumnStyle, imageColumnStyle }?: BuildMobileColumnsOptions): TableColumn<KeyedItem<T>>[];
+export {};
+//# sourceMappingURL=buildMobileColumns.d.ts.map

package/dist/types/utils/buildMobileColumns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildMobileColumns.d.ts","sourceRoot":"","sources":["../../../src/utils/buildMobileColumns.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAmB,WAAW,EAAE,MAAM,UAAU,CAAC;AAUxD,UAAU,yBAAyB;IACjC,gBAAgB,CAAC,EAAE,aAAa,CAAC;IACjC,gBAAgB,CAAC,EAAE,aAAa,CAAC;CAClC;AAkBD,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,EACpC,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,GAAE,yBAA8B,GACrE,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CA4F7B"}

package/dist/types/utils/fieldValidation.d.ts

@@ -0,0 +1,9 @@
+import type { Field, Translate, ValidationRule } from '@wix/bex-core';
+export interface ValidationResult {
+    valid: boolean;
+    errors?: string[];
+}
+export declare function buildFieldValidationRules(field: Field, translate: Translate): ValidationRule[];
+export declare const validResult: ValidationResult;
+export declare function validateFieldValue(value: unknown, rules?: ValidationRule[], typeValidate?: (value: unknown, rules?: ValidationRule[], translate?: Translate) => string | null, translate?: Translate): ValidationResult;
+//# sourceMappingURL=fieldValidation.d.ts.map

package/dist/types/utils/fieldValidation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldValidation.d.ts","sourceRoot":"","sources":["../../../src/utils/fieldValidation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGtE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,GACnB,cAAc,EAAE,CAyElB;AAED,eAAO,MAAM,WAAW,EAAE,gBAAkC,CAAC;AAsC7D,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,OAAO,EACd,KAAK,CAAC,EAAE,cAAc,EAAE,EACxB,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,OAAO,EACd,KAAK,CAAC,EAAE,cAAc,EAAE,EACxB,SAAS,CAAC,EAAE,SAAS,KAClB,MAAM,GAAG,IAAI,EAClB,SAAS,CAAC,EAAE,SAAS,GACpB,gBAAgB,CAmBlB"}

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "patterns@1.494.0";
+export declare const version = "patterns@1.496.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.494.0",
+  "version": "1.496.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -229,11 +229,11 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.400.0",
-    "@wix/bex-utils": "2.187.0",
+    "@wix/bex-core": "2.402.0",
+    "@wix/bex-utils": "2.189.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.122.0",
-    "@wix/patterns-fields-utils": "1.103.0",
+    "@wix/patterns-fields": "1.124.0",
+    "@wix/patterns-fields-utils": "1.105.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "^3.23.1",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -296,7 +296,7 @@
     "@wix/awaiter-utils": "^1.0.76",
     "@wix/babel-cli": "^1.11.0",
     "@wix/business-manager-api": "^1.470.0",
-    "@wix/cairo-integration-utils": "1.162.0",
+    "@wix/cairo-integration-utils": "1.164.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
@@ -461,5 +461,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "ee8d1233805df70daef211d1c564fb4069f67ef3253d36c37484833b"
+  "falconPackageHash": "aaf37c39c2552cd0fbaadeb5708fa8b0062998491c912ff0bf418396"
 }

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldForm726988788";
+var _namespace_ = "CmsFieldForm684677622";
 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":"CmsFieldForm726988788__root","fullBleedDivider":"CmsFieldForm726988788__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm684677622__root","fullBleedDivider":"CmsFieldForm684677622__fullBleedDivider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal3564030490";
+var _namespace_ = "CmsFieldModal4189001001";
 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":"CmsFieldModal3564030490__root","modal":"CmsFieldModal3564030490__modal"};
+export var classes = {"root":"CmsFieldModal4189001001__root","modal":"CmsFieldModal4189001001__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_ = "ValidationAndDefaultsSection2152051447";
+var _namespace_ = "ValidationAndDefaultsSection1200031786";
 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":"ValidationAndDefaultsSection2152051447__root","accordionWrapper":"ValidationAndDefaultsSection2152051447__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection1200031786__root","accordionWrapper":"ValidationAndDefaultsSection1200031786__accordionWrapper"};
 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_ = "Collapse252484027";
+var _namespace_ = "Collapse856034035";
 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":"Collapse252484027__root","exit":"Collapse252484027__exit"};
+export var classes = {"root":"Collapse856034035__root","exit":"Collapse856034035__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_ = "CollectionPage16506850";
+var _namespace_ = "CollectionPage2737019290";
 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":"CollectionPage16506850__root"};
+export var classes = {"root":"CollectionPage2737019290__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_ = "CollectionSectionHeader3532397176";
+var _namespace_ = "CollectionSectionHeader3445502593";
 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":"CollectionSectionHeader3532397176__root","summaryIcon":"CollectionSectionHeader3532397176__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader3445502593__root","summaryIcon":"CollectionSectionHeader3445502593__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_ = "CollectionTable2545300557";
+var _namespace_ = "CollectionTable1440557074";
 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":"CollectionTable2545300557__root"};
+export var classes = {"root":"CollectionTable1440557074__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_ = "CollectionTableWSRTable3593490978";
+var _namespace_ = "CollectionTableWSRTable3169571863";
 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":"CollectionTableWSRTable3593490978__root"};
+export var classes = {"root":"CollectionTableWSRTable3169571863__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTableWSRTable.tsx

@@ -28,7 +28,7 @@ import { usePageContext, useWixPatternsContainer } from '@wix/bex-core/react';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { CollectionToolbarsVisualizationProps } from '../CollectionToolbars/CollectionToolbarsVisualization';
-import { buildMobileColumns } from './buildMobileColumns';
+import { buildMobileColumns as buildPlainTableMobileColumns } from '../../utils/buildMobileColumns';
 import { TableColumn } from '../../model';
 import { version as cairoVersion } from '../../version';
 
@@ -108,6 +108,14 @@ export interface CollectionTableWSRTableProps<U, T, F extends FiltersMap>
   columns: WSRTableColumn<KeyedItem<U>>[];
   onRowClick?: (item: KeyedItem<U>, index: number) => void;
   keyedItems?: KeyedItem<U>[];
+
+  /**
+   * Lays out the mobile row. Defaults to the plain table layout; a component
+   * with its own mobile row, such as TableFolders, passes its own.
+   */
+  buildMobileColumns?: (
+    columns: TableColumn<KeyedItem<U>>[],
+  ) => TableColumn<KeyedItem<U>>[];
 }
 
 function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
@@ -150,6 +158,7 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
     moreActions,
     visualization,
     resizable,
+    buildMobileColumns = buildPlainTableMobileColumns,
   } = props;
 
   const isMobile = useIsMobile();

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar1588114061";
+var _namespace_ = "CollectionToolbar1049043030";
 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":"CollectionToolbar1588114061__root","right":"CollectionToolbar1588114061__right","left":"CollectionToolbar1588114061__left","fullWidth":"CollectionToolbar1588114061__fullWidth"};
+export var classes = {"root":"CollectionToolbar1049043030__root","right":"CollectionToolbar1049043030__right","left":"CollectionToolbar1049043030__left","fullWidth":"CollectionToolbar1049043030__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_ = "SearchOrCustomFilter2418752071";
+var _namespace_ = "SearchOrCustomFilter3369147491";
 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":"SearchOrCustomFilter2418752071__root","search":"SearchOrCustomFilter2418752071__search","searchMobile":"SearchOrCustomFilter2418752071__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter3369147491__root","search":"SearchOrCustomFilter3369147491__search","searchMobile":"SearchOrCustomFilter3369147491__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbarFilters/CollectionToolbarFiltersState.ts

@@ -2,8 +2,9 @@ import { ToolbarCollectionState } from '../../state';
 import { FiltersMap, ValueBox, withoutDefaults } from '@wix/bex-core';
 import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
 import { action, computed, makeObservable } from 'mobx';
-import { ReactNode, RefObject, createRef } from 'react';
+import { MouseEvent, ReactNode, RefObject, createRef } from 'react';
 import { FilterElement } from './filterElement';
+import { FiltersPanelState } from '../FiltersPanel/FiltersPanelState';
 import { Button } from '@wix/design-system';
 
 export interface CollectionToolbarFiltersStateParams<T, F extends FiltersMap> {
@@ -13,6 +14,8 @@ export interface CollectionToolbarFiltersStateParams<T, F extends FiltersMap> {
 export class CollectionToolbarFiltersState<T, F extends FiltersMap> {
   readonly toolbar;
 
+  readonly panel;
+
   readonly panelTitle = new ValueBox<ReactNode>(undefined);
   readonly totalInlineFilters = new ValueBox<number | null>(null);
   readonly filterElements = new ValueBox<FilterElement[]>([]);
@@ -22,6 +25,7 @@ export class CollectionToolbarFiltersState<T, F extends FiltersMap> {
 
   constructor(params: CollectionToolbarFiltersStateParams<T, F>) {
     this.toolbar = params.toolbar;
+    this.panel = new FiltersPanelState({ toolbar: this.toolbar });
 
     makeObservable(this, {
       panelFilterElements: computed,
@@ -45,16 +49,23 @@ export class CollectionToolbarFiltersState<T, F extends FiltersMap> {
 
   onFiltersButtonClick = action(() => {
     const actionStartTime = performance.now();
+    this.panel.cancelReveal();
     const isOpened = this.toolbar.panels.toggleSidePanel('filters');
     this._reportPanelUsed(isOpened, 'Filter Button', actionStartTime);
   });
 
-  /** Opens the panel from a column header's Filter action. */
-  openFromColumnHeader = action(() => {
-    const actionStartTime = performance.now();
-    this.toolbar.panels.openSidePanel('filters');
-    this._reportPanelUsed(true, 'Column Header', actionStartTime);
-  });
+  openFromColumnHeader = action(
+    (filterName?: string, event?: MouseEvent<HTMLElement>) => {
+      const actionStartTime = performance.now();
+      if (filterName) {
+        this.panel.revealFilter(filterName, this.panelFilterElements, event);
+      } else {
+        this.panel.cancelReveal();
+      }
+      this.toolbar.panels.openSidePanel('filters');
+      this._reportPanelUsed(true, 'Column Header', actionStartTime);
+    },
+  );
 
   private _reportPanelUsed(
     isOpened: boolean,

package/src/components/CollectionToolbarFilters/useFiltersSyncProps.ts

@@ -1,4 +1,4 @@
-import { Children } from 'react';
+import { Children, cloneElement, isValidElement } from 'react';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { FilterElement } from './filterElement';
 import type { renderPresetToolbarTag } from '../DateRangeFilter/renderPresetToolbarTag';
@@ -22,6 +22,7 @@ function hasFilter(e: FilterChildComponent, index: number) {
       );
     }
   }
+
   return filter != null;
 }
 
@@ -37,10 +38,31 @@ function flattenChildren(children: FilterChildren) {
   return currentChildren;
 }
 
-function filterValidChildren(children: FilterChildren) {
-  return (Children.toArray(children) as FilterChildrenComponent).filter(
-    hasFilter,
-  );
+function keyUnkeyedFilters(children: FilterChild[]) {
+  const occurrences = new Map<string, number>();
+
+  return children.map((child) => {
+    const needsGeneratedKey =
+      isValidElement<FilterElement['props']>(child) &&
+      child.key == null &&
+      !!child.props.filter;
+
+    if (!needsGeneratedKey) {
+      return child;
+    }
+
+    const name = child.props.filter.name;
+    const occurrence = occurrences.get(name) ?? 0;
+    occurrences.set(name, occurrence + 1);
+
+    return cloneElement(child, { key: JSON.stringify([name, occurrence]) });
+  });
+}
+
+function filterValidChildren(children: FilterChild[]) {
+  return (
+    Children.toArray(keyUnkeyedFilters(children)) as FilterChildrenComponent
+  ).filter(hasFilter);
 }
 
 function addTagsFilter(
@@ -88,5 +110,6 @@ export const useFiltersSyncProps = (children: FilterChildren) => {
   const filteredChildren = filterValidChildren(allChildren);
   const childrenWithTagsFilter = addTagsFilter(filteredChildren, state);
   const finalChildren = addCustomFieldFilters(childrenWithTagsFilter, state);
+
   return finalChildren;
 };

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly2763731381";
+var _namespace_ = "AutoCompleteReadonly4072199148";
 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":"AutoCompleteReadonly2763731381__root"};
+export var classes = {"root":"AutoCompleteReadonly4072199148__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_ = "ViewsDropdown3782819683";
+var _namespace_ = "ViewsDropdown495413070";
 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":"ViewsDropdown3782819683__root"};
+export var classes = {"root":"ViewsDropdown495413070__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CustomFieldFormPiiFields3055796595";
+var _namespace_ = "CustomFieldFormPiiFields417630693";
 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":"CustomFieldFormPiiFields3055796595__root","tooltipText":"CustomFieldFormPiiFields3055796595__tooltipText"};
+export var classes = {"root":"CustomFieldFormPiiFields417630693__root","tooltipText":"CustomFieldFormPiiFields417630693__tooltipText"};
 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_ = "DragHandle1141429880";
+var _namespace_ = "DragHandle2716116085";
 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":"DragHandle1141429880__root"};
+export var classes = {"root":"DragHandle2716116085__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -6,14 +6,9 @@
 @property st-global(--wds-color-border-dark-secondary);
 @property st-global(--wds-color-black-750);
 @property st-global(--wds-color-red-100);
-@property st-global(--wds-color-fill-surface-overlay);
 @property st-global(--wds-input-border-color-hover);
 @property st-global(--wds-input-border-color-focus);
 @property st-global(--wds-border-width-default);
-@property st-global(--wds-border-radius-400);
-@property st-global(--wds-popover-fill);
-@property st-global(--wds-popover-border-radius);
-@property st-global(--wds-shadow-surface-overlay);
 @property st-global(--wsr-color-B10);
 @property st-global(--wsr-color-B40);
 @property st-global(--wsr-color-D60);
@@ -69,13 +64,18 @@
   z-index: 4;
 }
 
+/* A pinned editor must also escape its row's lower stacking context. */
+:global(tr):has(> :global(td[data-sticky='true']) > .root:harmony:focused) {
+  z-index: 6;
+}
+
 /* Pinned cells must cover focused cells and their inline editors. */
 :global(tr):has(> :global(td) > .root)
   > :global(td[data-sticky='true']) {
   z-index: 5;
 }
 
-/* Keep the focus border above neighbouring pinned cells. */
+/* Keep editors and validation messages above later rows' pinned cells. */
 :global(td[data-sticky='true']):has(> .root:focused) {
   z-index: 6;
 }
@@ -258,11 +258,20 @@
   border-color: var(--wds-color-black-700, var(--wsr-color-D70, #eceff3));
 }
 
-.root:focused:not(:rangeSelected) {
-  border-color: var(
+.root:focused:not(:rangeSelected),
+.root:has([data-inner-focused]),
+.root:invalid:not(:rangeSelected):not(:copiedTop):not(:copiedBottom):not(:copiedLeft):not(:copiedRight) {
+  /* Grid borders overlap neighbouring cells by 1px. Keep the whole focus ring
+     inside this cell instead of competing with their stacking contexts. */
+  border-color: transparent;
+  outline: var(--wds-border-width-default, 1px) solid var(
     --wds-input-border-color-focus,
     var(--wsr-color-B10, #116dff)
   );
+  outline-offset: calc(-2 * var(--wds-border-width-default, 1px));
+}
+
+.root:focused:not(:rangeSelected) {
   box-shadow: inset 0 8px 6px -6px rgba(0, 6, 36, 0.05);
   z-index: 2;
 }
@@ -312,10 +321,6 @@
 .root:has([data-inner-focused]) {
   overflow: visible;
   z-index: 3;
-  border-color: var(
-    --wds-input-border-color-focus,
-    var(--wsr-color-B10, #116dff)
-  );
   box-shadow: inset 0 8px 6px -6px rgba(0, 6, 36, 0.05);
 }
 
@@ -346,6 +351,12 @@
 .root:invalid:focused:not(:rangeSelected),
 .root:invalid:has([data-inner-focused]) {
   border-color: var(--wds-color-red-100, var(--wsr-color-R10, #e62214));
+  outline-color: var(--wds-color-red-100, var(--wsr-color-R10, #e62214));
+}
+
+.root:invalid:not(:rangeSelected):not(:copiedTop):not(:copiedBottom):not(:copiedLeft):not(:copiedRight) {
+  border-color: transparent;
+  outline-color: var(--wds-color-red-100, var(--wsr-color-R10, #e62214));
 }
 
 .root:copiedTop:not(:selectionTop) {
@@ -369,35 +380,16 @@
   z-index: 3;
 }
 
-.errorMessage {
+/* Keep the anchor inside the cell without intercepting cell interactions.
+   WDS also copies this class to the portal, keeping the hint click-through. */
+.errorPopover {
   position: absolute;
-  top: calc(100% + 4px);
-  left: -1px;
-  z-index: 4;
-  box-sizing: border-box;
-  width: max-content;
-  max-width: 240px;
-  padding: 6px 8px;
-  /* Passive message — never swallow a click meant for the row below. */
+  inset: 0;
+  display: flex;
   pointer-events: none;
-  border-radius: var(
-    --wds-popover-border-radius,
-    var(--wds-border-radius-400, 8px)
-  );
-  background: var(
-    --wds-popover-fill,
-    var(--wds-color-fill-surface-overlay, var(--wsr-color-D80, #ffffff))
-  );
-  box-shadow: var(
-    --wds-shadow-surface-overlay,
-    0 0 18px rgba(0, 6, 36, 0.1),
-    0 6px 6px rgba(0, 6, 36, 0.05)
-  );
 }
 
-/* The bottom row has no space below it — the message would be clipped
-   at the table's edge, so it flips above the cell. */
-:global(tr:last-child) .errorMessage {
-  top: auto;
-  bottom: calc(100% + 4px);
+.errorMessage {
+  max-width: 240px;
+  padding: 6px 8px;
 }