@wix/patterns 1.331.0 → 1.332.0

package/src/components/TagsAssignButton/TagsAssignButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 import { Box, Button } from '@wix/design-system';
 import { TagSmall } from '@wix/wix-ui-icons-common';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
@@ -10,10 +10,26 @@ import { observer } from 'mobx-react-lite';
 const _TagsAssignButton = () => {
   const toolbarCollectionState = useToolbarCollectionContext();
   const { translate: t } = useWixPatternsContainer();
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
 
   const { tagsBulkAssignPopoverState } =
     toolbarCollectionState.tagsCollectionState ?? {};
 
+  const setButtonRef = useCallback(
+    (element: HTMLElement | null) => {
+      if (!element || !tagsBulkAssignPopoverState) {
+        return;
+      }
+      const el = element.querySelector('button') as HTMLButtonElement | null;
+      if (!el) {
+        return;
+      }
+      buttonRef.current = el;
+      tagsBulkAssignPopoverState.triggerButtonRef = buttonRef;
+    },
+    [tagsBulkAssignPopoverState],
+  );
+
   if (!tagsBulkAssignPopoverState) {
     return null;
   }
@@ -25,26 +41,28 @@ const _TagsAssignButton = () => {
       state={tagsBulkAssignPopoverState}
       popoverElement={
         <Box>
-          <DisabledTooltip
-            content={tagsBulkAssignButtonState.tooltipContent}
-            disabled={!tagsBulkAssignButtonState.isDisabled}
-            dataHook="tags-assign-button-disabled-tooltip"
-          >
-            <Button
-              skin="standard"
-              priority="secondary"
-              size="small"
-              ellipsis
-              prefixIcon={<TagSmall />}
-              dataHook="tags-assign-button"
-              onClick={() => {
-                tagsBulkAssignPopoverState.showPopover();
-              }}
-              disabled={tagsBulkAssignButtonState.isDisabled}
+          <div ref={setButtonRef} style={{ display: 'contents' }}>
+            <DisabledTooltip
+              content={tagsBulkAssignButtonState.tooltipContent}
+              disabled={!tagsBulkAssignButtonState.isDisabled}
+              dataHook="tags-assign-button-disabled-tooltip"
             >
-              {t('cairo.tags.collectionPage.add.CTA')}
-            </Button>
-          </DisabledTooltip>
+              <Button
+                skin="standard"
+                priority="secondary"
+                size="small"
+                ellipsis
+                prefixIcon={<TagSmall />}
+                dataHook="tags-assign-button"
+                onClick={() => {
+                  tagsBulkAssignPopoverState.showPopover();
+                }}
+                disabled={tagsBulkAssignButtonState.isDisabled}
+              >
+                {t('cairo.tags.collectionPage.add.CTA')}
+              </Button>
+            </DisabledTooltip>
+          </div>
         </Box>
       }
     />

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common2280014228";
+var _namespace_ = "common697212429";
 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":"common2280014228__root","column":"common2280014228__column","fullHeight":"common2280014228__fullHeight"};
+export var classes = {"root":"common697212429__root","column":"common697212429__column","fullHeight":"common697212429__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/index.ts

@@ -8,6 +8,7 @@ export * from './customModalContent';
 export * from './useDropdownSelectFilterState';
 export * from './useAmbassador';
 export * from './useDateRangeFilterState';
+export * from './useOperatorFilterState';
 export * from './useGridFolders';
 export * from './useTableFolders';
 export * from './useTableCollection';

package/src/hooks/useOperatorFilterState.ts

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+import { OperatorFilterPickerState } from '../state/OperatorFilterPickerState';
+import { FilterOperator, OperatorFilterValue } from '@wix/bex-core';
+import type { Filter } from '@wix/bex-core';
+import { useFilterToolbarState } from '../providers';
+
+export interface UseOperatorFilterStateParams<T> {
+  filter: Filter<OperatorFilterValue<T>>;
+  allowedOperators: FilterOperator[];
+}
+
+/**
+ * Hook to create and manage OperatorFilterPickerState
+ * Follows the same pattern as useDateRangeFilterState
+ */
+export function useOperatorFilterState<T>(
+  params: UseOperatorFilterStateParams<T>,
+) {
+  const { filter, allowedOperators } = params;
+
+  const toolbar = useFilterToolbarState();
+
+  const [state] = useState(() => {
+    if (filter.value === undefined) {
+      filter.changeValue(
+        { operator: allowedOperators[0], value: null },
+        { emitEvents: [] },
+      );
+    }
+    return new OperatorFilterPickerState<T>({
+      filter,
+      toolbar,
+    });
+  });
+
+  return state;
+}

package/src/index.ts

@@ -17,6 +17,7 @@ export * from './components/MultiSelectCollectionFilter';
 export * from './components/MultiInlineCheckboxFilter';
 export * from './components/DateRangeFilter';
 export * from './components/NumberRangeFilter';
+export * from './components/OperatorFilterPicker';
 export * from './components/CollectionContext';
 export * from './components/CollectionToolbarFilters';
 export * from './components/BulkActionToolbar';
@@ -156,6 +157,7 @@ export { DragAndDropSubmit, IndexedItem } from './components/DragAndDrop';
 
 export { DataExtension } from './components/DataExtension';
 export { transformCustomFiltersToWQL } from './components/CustomFieldsTransforms/transformCustomFiltersToWQL';
+export { transformOperatorFilterToWQL } from './components/CustomFieldsTransforms/transformOperatorFilterToWQL';
 export { transformSortToWQL } from './components/CustomFieldsTransforms/transformSortToWQL';
 
 export { ExtensionMenuItems } from './components/ExtensionMenuItems';
@@ -236,6 +238,13 @@ export {
   numberRangeFilter,
   RangeItem,
   RangeFilterStateParams,
+  operatorFilter,
+  OperatorFilterState,
+  OperatorFilterValue,
+  OperatorFilterStateParams,
+  FilterOperator,
+  getOperatorLabel,
+  TranslationsKeys,
   Dataset,
   useCollectionDatasetSync,
 } from '@wix/bex-core';

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

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

package/src/state/FormPage/FormPageHeader.st.css.ts

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

package/src/state/OperatorFilterPickerState.ts

@@ -0,0 +1,136 @@
+import {
+  Filter,
+  FilterOperator,
+  OperatorFilterValue,
+  operatorNeedsValue as coreOperatorNeedsValue,
+} from '@wix/bex-core';
+import { action, computed, makeObservable, observable, reaction } from 'mobx';
+import { FilterToolbarState } from '../providers';
+import { debounce } from 'lodash';
+
+export interface OperatorFilterPickerStateParams<T> {
+  toolbar: FilterToolbarState;
+  filter: Filter<OperatorFilterValue<T>>;
+  /**
+   * Debounce delay in milliseconds before applying filter changes
+   * @default 300
+   */
+  debounceMs?: number;
+}
+
+export class OperatorFilterPickerState<T> {
+  readonly toolbar: FilterToolbarState;
+  readonly _filter: OperatorFilterPickerStateParams<T>['filter'];
+  private readonly debouncedRefresh: () => void;
+
+  operator: FilterOperator;
+  value: T | null;
+
+  get filter() {
+    return this.toolbar.getPendingFilter(this._filter);
+  }
+
+  constructor(params: OperatorFilterPickerStateParams<T>) {
+    this.toolbar = params.toolbar;
+    this._filter = params.filter;
+    this.operator = params.filter.value?.operator!;
+    this.value = params.filter.value?.value ?? null;
+
+    const debounceMs = params.debounceMs ?? 300;
+    this.debouncedRefresh = debounce(
+      () => this.refreshIfChanged({ actionType: 'add' }),
+      debounceMs,
+    );
+
+    makeObservable(this, {
+      operator: observable,
+      value: observable,
+      isEmpty: computed,
+      init: action,
+      setOperator: action,
+      setValue: action,
+      onChange: action,
+      applyImmediately: action,
+    });
+  }
+
+  get isEmpty() {
+    return this.filter.isEmpty;
+  }
+
+  get currentValue(): OperatorFilterValue<T> {
+    return {
+      operator: this.operator,
+      value: this.value,
+    };
+  }
+
+  init() {
+    const dispose = reaction(
+      () => this.filter.value,
+      (filterValue) => {
+        this.operator = filterValue.operator;
+        this.value = filterValue.value;
+      },
+      { fireImmediately: true },
+    );
+
+    return () => {
+      dispose();
+    };
+  }
+
+  remove() {
+    this.refreshIfChanged({ actionType: 'remove' });
+  }
+
+  setOperator(operator: FilterOperator) {
+    this.operator = operator;
+    if (!this.operatorNeedsValue()) {
+      this.value = null;
+    }
+    this.applyImmediately();
+  }
+
+  setValue(value: T | null) {
+    this.value = value;
+    this.onChange();
+  }
+
+  /**
+   * Called when value changes - debounced
+   */
+  onChange() {
+    this.debouncedRefresh();
+  }
+
+  /**
+   * Apply filter changes immediately (used for operator changes)
+   */
+  applyImmediately() {
+    this.refreshIfChanged({ actionType: 'add' });
+  }
+
+  private refreshIfChanged(
+    options: { actionType?: 'add' | 'remove'; clickedValueKey?: string } = {},
+  ) {
+    const newValue = this.currentValue;
+
+    if (this.filter.hasDiff(newValue)) {
+      this.filter.setValue(newValue, {
+        emitEvents: ['change', 'beforeRefresh', 'refresh'],
+        ...options,
+      });
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Check if the given operator requires a value input
+   */
+  operatorNeedsValue(): boolean {
+    return coreOperatorNeedsValue(this.operator);
+  }
+}

package/src/state/Suggestions/SuggestionsBIReporter.ts

@@ -41,4 +41,19 @@ export class SuggestionsBIReporter {
       }),
     );
   }
+
+  reportOfferClicked(offerId: string, targetUrl?: string) {
+    this.httpClient.request(
+      reportEvent({
+        event: {
+          type: EventType.MAIN_CTA_CLICK,
+          offerId,
+          realEstateId: this.realEstateId,
+          mainCtaClick: {
+            targetUrl: targetUrl ?? '',
+          },
+        },
+      }),
+    );
+  }
 }

package/src/state/Suggestions/SuggestionsState.ts

@@ -80,7 +80,11 @@ export class SuggestionsState {
     return this.offers.length > 0;
   }
 
-  onOfferViewed(offerId: string) {
+  onOfferViewed = (offerId: string) => {
     this.bi.reportOfferViewed(offerId);
-  }
+  };
+
+  onOfferClicked = (offerId: string, targetUrl?: string) => {
+    this.bi.reportOfferClicked(offerId, targetUrl);
+  };
 }

package/src/state/TagsBulkAssignPopoverState.ts

@@ -57,6 +57,7 @@ export class TagsBulkAssignPopoverState<T, F extends FiltersMap> {
   optimisticNewTag: Tag | null = null;
   isShown = false;
   searchValue: string = '';
+  triggerButtonRef: React.RefObject<HTMLButtonElement> | null = null;
 
   constructor({
     tagsManagementState,
@@ -159,6 +160,18 @@ export class TagsBulkAssignPopoverState<T, F extends FiltersMap> {
     this.initialSelectedIds = [];
     this.initialIndeterminateTagIds = [];
     this.indeterminateTagIds = [];
+
+    requestAnimationFrame(() => {
+      const el = this.triggerButtonRef?.current;
+      if (
+        el &&
+        document.contains(el) &&
+        !el.disabled &&
+        el.getAttribute('aria-disabled') !== 'true'
+      ) {
+        el.focus();
+      }
+    });
   }
 
   async createAndAssignTag(name: string) {

package/src/state/index.ts

@@ -7,6 +7,7 @@ export * from './DropdownSelectFilterState';
 export * from './DropdownCollectionFilterState';
 export * from './DateRangePickerState';
 export * from './DateRangeFilterState';
+export * from './OperatorFilterPickerState';
 export * from './PickerStandaloneState';
 export * from './ViewsState';
 export * from './PickerContentState';

package/src/styles.global.css

@@ -1 +1 @@
-.CardContainer620928357__root.CardContainer620928357--mobile{border-radius:0}.Collapse3833380525__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse3833380525__exit{height:0}.CollectionPage364034629__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage364034629__root.CollectionPage364034629--mobile{--wds-page-header-padding-horizontal:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage364034629__root.CollectionPage364034629--panel{overflow:hidden;position:relative}.CollectionTable940291242__root td{vertical-align:middle}.CollectionTable940291242__root.CollectionTable940291242--mobile td:first-child{padding-left:18px}.CollectionTable940291242__root.CollectionTable940291242--mobile td:last-child{padding-right:18px}.CollectionToolbar4068704859__left{min-width:0}.CollectionToolbar4068704859__root.CollectionToolbar4068704859--views .CollectionToolbar4068704859__left{flex-shrink:1;flex-grow:0}.CollectionToolbar4068704859__left.CollectionToolbar4068704859--expandable{flex:auto}.CollectionToolbar4068704859__root .CollectionToolbar4068704859__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar4068704859__root.CollectionToolbar4068704859--views .CollectionToolbar4068704859__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar4068704859__root .CollectionToolbar4068704859__right.CollectionToolbar4068704859__fullWidth{margin-inline-start:0!important}.CollectionToolbar4068704859__root.CollectionToolbar4068704859--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter1903816131__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter1903816131__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter1903816131__searchMobile:not(.SearchOrCustomFilter1903816131--expandable){left:18px}.SearchOrCustomFilter1903816131__searchMobile.SearchOrCustomFilter1903816131--expandable.SearchOrCustomFilter1903816131--expanded{left:18px}.AutoCompleteReadonly806355121__root.AutoCompleteReadonly806355121--disableEditing{cursor:pointer}.AutoCompleteReadonly806355121__root.AutoCompleteReadonly806355121--disableEditing input{cursor:pointer}.ViewsDropdown1463602141__root{width:200px}.DragHandle379285059__root{display:flex;align-items:center}.DragHandle379285059__root:not(.DragHandle379285059--disabled){cursor:grab;color:#a8caff}.DragHandle379285059__root.DragHandle379285059--disabled{color:#acafc4}.DragHandle379285059__root:focus-visible:not(.DragHandle379285059--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle379285059__root.DragHandle379285059--disabled{pointer-events:none}.DragHandle379285059__root.DragHandle379285059--dragging:not(.DragHandle379285059--disabled){cursor:grabbing}.EntityPagePlain1248324565__root.EntityPagePlain1248324565--mobile{--wds-page-header-padding-horizontal:0}.Fade309331560__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade309331560__root.Fade309331560--exit{opacity:0}.Heading3294944041__root{visibility:visible}.Heading3294944041__root.Heading3294944041--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow1289398229__root.InputOverflow1289398229--selected:not(.InputOverflow1289398229--focused) input::placeholder{color:#000624}@keyframes LoadingRow3516738585__gradientSwoosh{0%{background-position:50% 50%;background-size:150% 125%}15%{background-position:75% 40%;background-size:130% 115%}30%{background-position:50% 50%;background-size:120% 135%}60%{background-position:30% 50%;background-size:120% 135%}80%{background-position:10% 30%;background-size:130% 155%}to{background-position:40% 45%;background-size:125% 135%}}.LoadingRow3516738585__root{background-image:linear-gradient(60deg,rgba(255,255,255,.15)0,rgba(255,255,255,.15) 50%,rgba(95,242,174,.15) 100%),linear-gradient(284.81deg,#fff 67.18%,#91bbff 158.87%),linear-gradient(29deg,rgba(145,187,255,.6)0,#fff 40%,rgba(95,242,174,.6) 100%);height:100%;background-size:150% 125%;background-repeat:no-repeat;animation:LoadingRow3516738585__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText3217552230__root{opacity:1}.MaxHeightText3217552230__root.MaxHeightText3217552230--height24{line-height:24px}.MaxLines1450598850__root{overflow:hidden}.MaxLines1450598850__root.MaxLines1450598850--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar3827809647__root{min-width:0}.MultiBulkActionToolbar3827809647__leftGroupWrapper{overflow:hidden;padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar3827809647__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar3827809647__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow3366154610__root td{padding:0!important;width:100%}.NestedTableRow2392165746__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow2392165746__root:hover{background-color:#e7f0ff!important}.NestedTableRow2392165746__root.NestedTableRow2392165746--expandable{cursor:pointer}.NestedTableRow2392165746__placeholder td{padding:0!important;width:100%}.NestedTableRow2392165746__root:hover td:first-of-type::before,.NestedTableRow2392165746__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect3846689240__root{position:absolute;transform:translate(6px,6px);background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,6,36,.12),0 0 6px 0 rgba(0,6,36,.12)}.NestedTableDragAndDropRow1252405115__root.NestedTableDragAndDropRow1252405115--draggingInto td{background-color:#e7f0ff!important}.PickerContent471041620__root{display:flex}.PickerContentAdditionalStep551212376__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep551212376__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem3915532904__root{box-sizing:border-box}.ScrollableContent37166254__root.ScrollableContent37166254--overflowY{overflow-y:auto}.ScrollableContent37166254__root.ScrollableContent37166254--overflowX{overflow-x:auto}.ScrollableContent37166254__root.ScrollableContent37166254--smooth{scroll-behavior:smooth}.SkeletonCard3572056859__headerLoading{display:block!important}.SlidingModal3830459246__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal3830459246__root.SlidingModal3830459246--overlay{transition:transform 0s ease 0s}.SlidingModal3830459246__root.SlidingModal3830459246---appendTo-6-parent{position:absolute}.SlidingModal3830459246__root:not(.SlidingModal3830459246--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter161614526__root .TabsFilter161614526__title{color:inherit!important}.ManageTagsModal3683190222__root{display:flex}.ToolbarItem4165645154__root{min-width:0}.ToolbarItemBox1469898042__root{min-width:0}.ToolbarItemBox1469898042__root.ToolbarItemBox1469898042--removeStartPadding{margin-left:-24px}.ToolbarItemBox1469898042__root.ToolbarItemBox1469898042--expandable{flex:1 0}.common2280014228__column{display:flex;flex-direction:column}.common2280014228__fullHeight{height:100%;min-height:0}.CollectionPageHeader335128254__root.CollectionPageHeader335128254--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader335128254__root.CollectionPageHeader335128254--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader2351676937__root.FormPageHeader2351676937--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader2351676937__root.FormPageHeader2351676937--mobile>*{margin-left:0;margin-top:6px!important;height:auto}
+.CardContainer1374981873__root.CardContainer1374981873--mobile{border-radius:0}.Collapse3883588704__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse3883588704__exit{height:0}.CollectionPage1631788081__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage1631788081__root.CollectionPage1631788081--mobile{--wds-page-header-padding-horizontal:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage1631788081__root.CollectionPage1631788081--panel{overflow:hidden;position:relative}.CollectionTable3740269364__root td{vertical-align:middle}.CollectionTable3740269364__root.CollectionTable3740269364--mobile td:first-child{padding-left:18px}.CollectionTable3740269364__root.CollectionTable3740269364--mobile td:last-child{padding-right:18px}.CollectionToolbar1535253319__left{min-width:0}.CollectionToolbar1535253319__root.CollectionToolbar1535253319--views .CollectionToolbar1535253319__left{flex-shrink:1;flex-grow:0}.CollectionToolbar1535253319__left.CollectionToolbar1535253319--expandable{flex:auto}.CollectionToolbar1535253319__root .CollectionToolbar1535253319__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar1535253319__root.CollectionToolbar1535253319--views .CollectionToolbar1535253319__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar1535253319__root .CollectionToolbar1535253319__right.CollectionToolbar1535253319__fullWidth{margin-inline-start:0!important}.CollectionToolbar1535253319__root.CollectionToolbar1535253319--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter107442870__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter107442870__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter107442870__searchMobile:not(.SearchOrCustomFilter107442870--expandable){left:18px}.SearchOrCustomFilter107442870__searchMobile.SearchOrCustomFilter107442870--expandable.SearchOrCustomFilter107442870--expanded{left:18px}.AutoCompleteReadonly2842135052__root.AutoCompleteReadonly2842135052--disableEditing{cursor:pointer}.AutoCompleteReadonly2842135052__root.AutoCompleteReadonly2842135052--disableEditing input{cursor:pointer}.ViewsDropdown375570765__root{width:200px}.DragHandle3358271943__root{display:flex;align-items:center}.DragHandle3358271943__root:not(.DragHandle3358271943--disabled){cursor:grab;color:#a8caff}.DragHandle3358271943__root.DragHandle3358271943--disabled{color:#acafc4}.DragHandle3358271943__root:focus-visible:not(.DragHandle3358271943--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle3358271943__root.DragHandle3358271943--disabled{pointer-events:none}.DragHandle3358271943__root.DragHandle3358271943--dragging:not(.DragHandle3358271943--disabled){cursor:grabbing}.EntityPagePlain2787015463__root.EntityPagePlain2787015463--mobile{--wds-page-header-padding-horizontal:0}.Fade1843300999__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade1843300999__root.Fade1843300999--exit{opacity:0}.Heading544817180__root{visibility:visible}.Heading544817180__root.Heading544817180--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow3505318779__root.InputOverflow3505318779--selected:not(.InputOverflow3505318779--focused) input::placeholder{color:#000624}@keyframes LoadingRow2007478854__gradientSwoosh{0%{background-position:50% 50%;background-size:150% 125%}15%{background-position:75% 40%;background-size:130% 115%}30%{background-position:50% 50%;background-size:120% 135%}60%{background-position:30% 50%;background-size:120% 135%}80%{background-position:10% 30%;background-size:130% 155%}to{background-position:40% 45%;background-size:125% 135%}}.LoadingRow2007478854__root{background-image:linear-gradient(60deg,rgba(255,255,255,.15)0,rgba(255,255,255,.15) 50%,rgba(95,242,174,.15) 100%),linear-gradient(284.81deg,#fff 67.18%,#91bbff 158.87%),linear-gradient(29deg,rgba(145,187,255,.6)0,#fff 40%,rgba(95,242,174,.6) 100%);height:100%;background-size:150% 125%;background-repeat:no-repeat;animation:LoadingRow2007478854__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText34910617__root{opacity:1}.MaxHeightText34910617__root.MaxHeightText34910617--height24{line-height:24px}.MaxLines1782867392__root{overflow:hidden}.MaxLines1782867392__root.MaxLines1782867392--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar3671766982__root{min-width:0}.MultiBulkActionToolbar3671766982__leftGroupWrapper{overflow:hidden;padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar3671766982__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar3671766982__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow3628483870__root td{padding:0!important;width:100%}.NestedTableRow3295565450__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow3295565450__root:hover{background-color:#e7f0ff!important}.NestedTableRow3295565450__root.NestedTableRow3295565450--expandable{cursor:pointer}.NestedTableRow3295565450__placeholder td{padding:0!important;width:100%}.NestedTableRow3295565450__root:hover td:first-of-type::before,.NestedTableRow3295565450__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect512304699__root{position:absolute;transform:translate(6px,6px);background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,6,36,.12),0 0 6px 0 rgba(0,6,36,.12)}.NestedTableDragAndDropRow1845819645__root.NestedTableDragAndDropRow1845819645--draggingInto td{background-color:#e7f0ff!important}.PickerContent2079061321__root{display:flex}.PickerContentAdditionalStep3028514075__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep3028514075__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem3373986971__root{box-sizing:border-box}.ScrollableContent762496695__root.ScrollableContent762496695--overflowY{overflow-y:auto}.ScrollableContent762496695__root.ScrollableContent762496695--overflowX{overflow-x:auto}.ScrollableContent762496695__root.ScrollableContent762496695--smooth{scroll-behavior:smooth}.SkeletonCard4133525042__headerLoading{display:block!important}.SlidingModal2522931252__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal2522931252__root.SlidingModal2522931252--overlay{transition:transform 0s ease 0s}.SlidingModal2522931252__root.SlidingModal2522931252---appendTo-6-parent{position:absolute}.SlidingModal2522931252__root:not(.SlidingModal2522931252--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter1787234641__root .TabsFilter1787234641__title{color:inherit!important}.ManageTagsModal4215666322__root{display:flex}.ToolbarItem1857061624__root{min-width:0}.ToolbarItemBox4128650836__root{min-width:0}.ToolbarItemBox4128650836__root.ToolbarItemBox4128650836--removeStartPadding{margin-left:-24px}.ToolbarItemBox4128650836__root.ToolbarItemBox4128650836--expandable{flex:1 0}.common697212429__column{display:flex;flex-direction:column}.common697212429__fullHeight{height:100%;min-height:0}.CollectionPageHeader3734702782__root.CollectionPageHeader3734702782--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader3734702782__root.CollectionPageHeader3734702782--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader634573734__root.FormPageHeader634573734--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader634573734__root.FormPageHeader634573734--mobile>*{margin-left:0;margin-top:6px!important;height:auto}

package/src/test-utils/DealerBIMock.ts

@@ -65,8 +65,8 @@ interface DealerBITestkit {
 
   /** Access VIEW events */
   view: EventTypeAccessor;
-  /** Access CLICK events */
-  click: EventTypeAccessor;
+  /** Access MAIN_CTA_CLICK events */
+  mainCtaClick: EventTypeAccessor;
 
   /** Get all captured events (any type) */
   all: () => ReportEventData[];
@@ -107,7 +107,7 @@ const dealerBITestkit: DealerBITestkit = {
   httpMock,
 
   view: createEventTypeAccessor('VIEW'),
-  click: createEventTypeAccessor('CLICK'),
+  mainCtaClick: createEventTypeAccessor('MAIN_CTA_CLICK'),
 
   all: _getAllEventsOfType,
   last: () => {

package/src/utils/ReturnFocus.ts

@@ -0,0 +1,51 @@
+/**
+ * Manages focus restoration when opening/closing overlays (modals, popovers).
+ */
+export class ReturnFocus {
+  private triggerElement: HTMLElement | null = null;
+  private fallbackSelector: string | null = null;
+
+  /** Fallback selector if the trigger element is re-mounted. */
+  setFallbackSelector(selector: string | null) {
+    this.fallbackSelector = selector;
+    return this;
+  }
+
+  /** Captures the trigger element on open. */
+  onOpen(element?: HTMLElement) {
+    this.triggerElement = element ?? (document.activeElement as HTMLElement | null);
+  }
+
+  /** Restores focus to the trigger element on close. */
+  onClose() {
+    requestAnimationFrame(() => {
+      if (this.tryFocus(this.triggerElement)) {
+        return;
+      }
+
+      if (this.fallbackSelector) {
+        const bySelector = document.querySelector<HTMLElement>(
+          this.fallbackSelector,
+        );
+        this.tryFocus(bySelector);
+      }
+    });
+  }
+
+  private tryFocus(el: HTMLElement | null): boolean {
+    if (!el) {
+      return false;
+    }
+    if (!document.contains(el)) {
+      return false;
+    }
+    if (
+      el.matches(':disabled') ||
+      el.getAttribute('aria-disabled') === 'true'
+    ) {
+      return false;
+    }
+    el.focus();
+    return document.activeElement === el;
+  }
+}

package/src/version.ts

@@ -1 +1 @@
-export const version = 'patterns@1.331.0';
+export const version = 'patterns@1.332.0';