@wix/patterns 1.495.0 → 1.497.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.495.0";
+export declare const version = "patterns@1.497.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.495.0",
+  "version": "1.497.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.401.0",
-    "@wix/bex-utils": "2.188.0",
+    "@wix/bex-core": "2.403.0",
+    "@wix/bex-utils": "2.190.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.123.0",
-    "@wix/patterns-fields-utils": "1.104.0",
+    "@wix/patterns-fields": "1.125.0",
+    "@wix/patterns-fields-utils": "1.106.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.163.0",
+    "@wix/cairo-integration-utils": "1.165.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": "fec7595c30bbc4fb4beb49c4a5cb867b256bea98b76502e07f154fcd"
+  "falconPackageHash": "f59e2c5e90bf5ae98574e452c617d931c4f51cf9bd759795e4687b45"
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer3599328487";
+var _namespace_ = "CardContainer3591451168";
 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":"CardContainer3599328487__root"};
+export var classes = {"root":"CardContainer3591451168__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_ = "CmsFieldForm1767670188";
+var _namespace_ = "CmsFieldForm2939255577";
 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":"CmsFieldForm1767670188__root","fullBleedDivider":"CmsFieldForm1767670188__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm2939255577__root","fullBleedDivider":"CmsFieldForm2939255577__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_ = "CmsFieldModal1469172217";
+var _namespace_ = "CmsFieldModal405531635";
 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":"CmsFieldModal1469172217__root","modal":"CmsFieldModal1469172217__modal"};
+export var classes = {"root":"CmsFieldModal405531635__root","modal":"CmsFieldModal405531635__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_ = "ValidationAndDefaultsSection486696235";
+var _namespace_ = "ValidationAndDefaultsSection2603495915";
 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":"ValidationAndDefaultsSection486696235__root","accordionWrapper":"ValidationAndDefaultsSection486696235__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection2603495915__root","accordionWrapper":"ValidationAndDefaultsSection2603495915__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_ = "Collapse1929797603";
+var _namespace_ = "Collapse1856939489";
 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":"Collapse1929797603__root","exit":"Collapse1929797603__exit"};
+export var classes = {"root":"Collapse1856939489__root","exit":"Collapse1856939489__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_ = "CollectionPage2773365080";
+var _namespace_ = "CollectionPage954296046";
 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":"CollectionPage2773365080__root"};
+export var classes = {"root":"CollectionPage954296046__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_ = "CollectionSectionHeader1405968881";
+var _namespace_ = "CollectionSectionHeader259709835";
 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":"CollectionSectionHeader1405968881__root","summaryIcon":"CollectionSectionHeader1405968881__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader259709835__root","summaryIcon":"CollectionSectionHeader259709835__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_ = "CollectionTable1021270005";
+var _namespace_ = "CollectionTable3363808206";
 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":"CollectionTable1021270005__root"};
+export var classes = {"root":"CollectionTable3363808206__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_ = "CollectionTableWSRTable3017741263";
+var _namespace_ = "CollectionTableWSRTable2281106699";
 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":"CollectionTableWSRTable3017741263__root"};
+export var classes = {"root":"CollectionTableWSRTable2281106699__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_ = "CollectionToolbar933920343";
+var _namespace_ = "CollectionToolbar1271229738";
 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":"CollectionToolbar933920343__root","right":"CollectionToolbar933920343__right","left":"CollectionToolbar933920343__left","fullWidth":"CollectionToolbar933920343__fullWidth"};
+export var classes = {"root":"CollectionToolbar1271229738__root","right":"CollectionToolbar1271229738__right","left":"CollectionToolbar1271229738__left","fullWidth":"CollectionToolbar1271229738__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_ = "SearchOrCustomFilter1953357450";
+var _namespace_ = "SearchOrCustomFilter2315808301";
 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":"SearchOrCustomFilter1953357450__root","search":"SearchOrCustomFilter1953357450__search","searchMobile":"SearchOrCustomFilter1953357450__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter2315808301__root","search":"SearchOrCustomFilter2315808301__search","searchMobile":"SearchOrCustomFilter2315808301__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_ = "AutoCompleteReadonly1613072070";
+var _namespace_ = "AutoCompleteReadonly3230807394";
 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":"AutoCompleteReadonly1613072070__root"};
+export var classes = {"root":"AutoCompleteReadonly3230807394__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_ = "ViewsDropdown3390087915";
+var _namespace_ = "ViewsDropdown1597555999";
 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":"ViewsDropdown3390087915__root"};
+export var classes = {"root":"ViewsDropdown1597555999__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_ = "CustomFieldFormPiiFields2219357126";
+var _namespace_ = "CustomFieldFormPiiFields2772733922";
 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":"CustomFieldFormPiiFields2219357126__root","tooltipText":"CustomFieldFormPiiFields2219357126__tooltipText"};
+export var classes = {"root":"CustomFieldFormPiiFields2772733922__root","tooltipText":"CustomFieldFormPiiFields2772733922__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_ = "DragHandle1997568337";
+var _namespace_ = "DragHandle2951769385";
 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":"DragHandle1997568337__root"};
+export var classes = {"root":"DragHandle2951769385__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);
@@ -385,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;
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell485900542";
+var _namespace_ = "EditableCell2712054398";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EditableCell485900542__root","textInputArea":"Edit2395190668__inputArea","selectorRow":"EditableCell485900542__selectorRow","errorMessage":"EditableCell485900542__errorMessage"};
+export var classes = {"root":"EditableCell2712054398__root","textInputArea":"Edit3952514835__inputArea","selectorRow":"EditableCell2712054398__selectorRow","errorPopover":"EditableCell2712054398__errorPopover","errorMessage":"EditableCell2712054398__errorMessage"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-outline-focus-outer":"--wds-outline-focus-outer","wds-outline-focus-inner":"--wds-outline-focus-inner","wds-color-fill-surface-raised":"--wds-color-fill-surface-raised","wds-color-border-dark-secondary":"--wds-color-border-dark-secondary","wds-color-black-750":"--wds-color-black-750","wds-color-red-100":"--wds-color-red-100","wds-color-fill-surface-overlay":"--wds-color-fill-surface-overlay","wds-input-border-color-hover":"--wds-input-border-color-hover","wds-input-border-color-focus":"--wds-input-border-color-focus","wds-border-width-default":"--wds-border-width-default","wds-border-radius-400":"--wds-border-radius-400","wds-popover-fill":"--wds-popover-fill","wds-popover-border-radius":"--wds-popover-border-radius","wds-shadow-surface-overlay":"--wds-shadow-surface-overlay","wsr-color-B10":"--wsr-color-B10","wsr-color-B40":"--wsr-color-B40","wsr-color-D60":"--wsr-color-D60","wsr-color-D80":"--wsr-color-D80","wsr-color-R10":"--wsr-color-R10","wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-color-text-placeholder":"--wds-color-text-placeholder","wds-color-text-disabled":"--wds-color-text-disabled","wds-color-black-700":"--wds-color-black-700","wsr-color-D10-30":"--wsr-color-D10-30","wsr-color-D70":"--wsr-color-D70","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","wsr-text-font-size-small":"--wsr-text-font-size-small","wsr-text-line-height-small":"--wsr-text-line-height-small","wds-input-padding-horizontal-small":"--wds-input-padding-horizontal-small","wds-table-action-cell-backdrop-opacity":"--wds-table-action-cell-backdrop-opacity"}; 
+export var vars = {"wds-outline-focus-outer":"--wds-outline-focus-outer","wds-outline-focus-inner":"--wds-outline-focus-inner","wds-color-fill-surface-raised":"--wds-color-fill-surface-raised","wds-color-border-dark-secondary":"--wds-color-border-dark-secondary","wds-color-black-750":"--wds-color-black-750","wds-color-red-100":"--wds-color-red-100","wds-input-border-color-hover":"--wds-input-border-color-hover","wds-input-border-color-focus":"--wds-input-border-color-focus","wds-border-width-default":"--wds-border-width-default","wsr-color-B10":"--wsr-color-B10","wsr-color-B40":"--wsr-color-B40","wsr-color-D60":"--wsr-color-D60","wsr-color-D80":"--wsr-color-D80","wsr-color-R10":"--wsr-color-R10","wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-color-text-placeholder":"--wds-color-text-placeholder","wds-color-text-disabled":"--wds-color-text-disabled","wds-color-black-700":"--wds-color-black-700","wsr-color-D10-30":"--wsr-color-D10-30","wsr-color-D70":"--wsr-color-D70","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","wsr-text-font-size-small":"--wsr-text-font-size-small","wsr-text-line-height-small":"--wsr-text-line-height-small","wds-input-padding-horizontal-small":"--wds-input-padding-horizontal-small","wds-table-action-cell-backdrop-opacity":"--wds-table-action-cell-backdrop-opacity"};