@wix/patterns 1.305.0 → 1.307.0

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep877518503";
+var _namespace_ = "PickerContentAdditionalStep1248135679";
 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":"PickerContentAdditionalStep877518503__root","titles":"PickerContentAdditionalStep877518503__titles","suffix":"PickerContentAdditionalStep877518503__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1248135679__root","titles":"PickerContentAdditionalStep1248135679__titles","suffix":"PickerContentAdditionalStep1248135679__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard1710332693";
+var _namespace_ = "SkeletonCard847847600";
 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":"SkeletonCard1710332693__root","headerLoading":"SkeletonCard1710332693__headerLoading"};
+export var classes = {"root":"SkeletonCard847847600__root","headerLoading":"SkeletonCard847847600__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/Suggestions/Suggestions.driver.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { RenderResult, render } from '@testing-library/react';
+import { Suggestions, SuggestionsProps } from './Suggestions';
+import {
+  WixPatternsContainerDriver,
+  WixPatternsContainerDriverOverrides,
+} from '@wix/bex-core/testkit/internal';
+import { SuggestionsTestkit } from '../../testkit/jsdom';
+import { CairoTestApp, flush } from '../../test-utils';
+
+export class SuggestionsDriver {
+  private static readonly dataHook = 'suggestions';
+
+  private _renderResult?: RenderResult;
+  readonly containerDriver;
+
+  constructor(overrides: Partial<WixPatternsContainerDriverOverrides> = {}) {
+    this.containerDriver = new WixPatternsContainerDriver(overrides);
+  }
+
+  get renderResult() {
+    if (this._renderResult == null) {
+      throw new Error('Driver was not initialized');
+    }
+
+    return this._renderResult;
+  }
+
+  get suggestions() {
+    return SuggestionsTestkit({
+      wrapper: this.renderResult.baseElement,
+      dataHook: SuggestionsDriver.dataHook,
+    });
+  }
+
+  render(props: SuggestionsProps) {
+    this._renderResult = render(
+      <CairoTestApp driver={this.containerDriver}>
+        <Suggestions {...props} dataHook={SuggestionsDriver.dataHook} />
+      </CairoTestApp>,
+    );
+  }
+
+  async flush(iterations?: number) {
+    return flush(iterations);
+  }
+}

package/src/components/Suggestions/Suggestions.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react';
+import { CarouselWIP, CarouselWIPProps, COLOR_TOKENS } from '@wix/design-system';
+import { SuggestionsState } from '../../state/Suggestions/SuggestionsState';
+import { observer } from 'mobx-react-lite';
+import { Offer } from '@wix/bex-utils/@wix/ambassador-dealer-v1-serving-offer/types';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+export interface BaseCardComponentProps {
+  index: number;
+  totalCards: number;
+}
+
+export interface SuggestionsCardComponentProps extends BaseCardComponentProps {
+  offer: Offer;
+}
+
+export interface SuggestionsProps {
+  /** The placement ID to fetch offers for */
+  placementId: string;
+  /** Props to pass to the carousel component */
+  carouselProps?: CarouselWIPProps;
+  /** Card component to render each offer */
+  CardComponent: React.ComponentType<SuggestionsCardComponentProps>;
+  /** Skeleton component to render when loading */
+  CardSkeleton: React.ComponentType<BaseCardComponentProps>;
+  /** Number of skeletons to render when loading */
+  skeletonsNumber?: number;
+  /** Data hook to use for the suggestions component */
+  dataHook?: string;
+}
+
+const defaultCarouselProps: CarouselWIPProps = {
+  hideDots: true,
+  infinite: false,
+  variableWidth: false,
+  controlsPosition: 'overlay',
+  showControlsShadow: true,
+  sidesGradientColor: COLOR_TOKENS['--wsr-color-D70'],
+  controlsStartEnd: 'hidden',
+};
+
+export const Suggestions: React.FC<SuggestionsProps> = observer(
+  ({
+    placementId,
+    CardComponent,
+    CardSkeleton,
+    carouselProps,
+    skeletonsNumber = 4,
+    dataHook,
+  }) => {
+    const { httpClient } = useWixPatternsContainer();
+
+    const [state] = useState(
+      () => new SuggestionsState({ placementId, httpClient }),
+    );
+
+    useEffect(() => {
+      return state.init();
+    }, [state]);
+
+    if (state.hasOffers) {
+      return (
+        <div data-hook={dataHook}>
+          <CarouselWIP
+            key="suggestions-carousel"
+            dataHook="suggestions-carousel"
+            {...defaultCarouselProps}
+            {...carouselProps}
+          >
+            {state.offers.map((offer, index: number) => (
+              <CardComponent
+                offer={offer}
+                index={index}
+                totalCards={state.offers.length}
+                key={offer.offerGuid || `suggestion-${index}`}
+              />
+            ))}
+          </CarouselWIP>
+        </div>
+      );
+    }
+
+    if (state.isFetching) {
+      return (
+        <div data-hook={dataHook}>
+          <CarouselWIP
+            key="suggestions-carousel-skeleton"
+            dataHook="suggestions-carousel-skeleton"
+            {...defaultCarouselProps}
+            controlsPosition="none"
+            {...carouselProps}
+          >
+            {Array.from({ length: skeletonsNumber }).map((_, index) => (
+              <CardSkeleton
+                index={index}
+                totalCards={skeletonsNumber}
+                key={index}
+              />
+            ))}
+          </CarouselWIP>
+        </div>
+      );
+    }
+
+    return null;
+  },
+);

package/src/components/Suggestions/Suggestions.uni.driver.ts

@@ -0,0 +1,38 @@
+import { CarouselWIPUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import {
+  baseUniDriverFactory,
+  UniDriver,
+} from '@wix/wix-ui-test-utils/unidriver';
+
+export const SuggestionsUniDriver = (base: UniDriver, body: UniDriver) => {
+  const carousel = CarouselWIPUniDriver(
+    base.$('[data-hook="suggestions-carousel"]'),
+    body,
+  );
+  const carouselSkeleton = CarouselWIPUniDriver(
+    base.$('[data-hook="suggestions-carousel-skeleton"]'),
+    body,
+  );
+
+  return {
+    ...baseUniDriverFactory(base),
+    isLoading: () => carouselSkeleton.exists(),
+    hasOffers: () => carousel.exists(),
+    isEmpty: async () =>
+      !(await carousel.exists()) && !(await carouselSkeleton.exists()),
+    getCardsCounts: async () =>
+      // @ts-expect-error carousel types are wrong, getChildren returns a Promise of an array and not UniDriverList
+      (await carousel.exists()) ? (await carousel.getChildren()).length : 0,
+    getSkeletonCardsCount: async () =>
+      (await carouselSkeleton.exists())
+        ? // @ts-expect-error carousel types are wrong, getChildren returns a Promise of an array and not UniDriverList
+          (await carouselSkeleton.getChildren()).length
+        : 0,
+    // @ts-expect-error carousel types are wrong, getChildren returns a Promise of an array and not UniDriverList
+    getCardAt: async (index: number) => (await carousel.getChildren())[index],
+    getSkeletonCardAt: (index: number) =>
+      carouselSkeleton.getChildren().at(index),
+    carousel: () => carousel,
+    carouselSkeleton: () => carouselSkeleton,
+  };
+};

package/src/components/Suggestions/index.ts

@@ -0,0 +1 @@
+export * from './Suggestions';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter1990584806";
+var _namespace_ = "TabsFilter1470164704";
 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":"TabsFilter1990584806__root","title":"TabsFilter1990584806__title"};
+export var classes = {"root":"TabsFilter1470164704__root","title":"TabsFilter1470164704__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal2255659067";
+var _namespace_ = "ManageTagsModal4063466440";
 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":"ManageTagsModal2255659067__root"};
+export var classes = {"root":"ManageTagsModal4063466440__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem1697368245";
+var _namespace_ = "ToolbarItem1820675315";
 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":"ToolbarItem1697368245__root"};
+export var classes = {"root":"ToolbarItem1820675315__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_ = "ToolbarItemBox3891221146";
+var _namespace_ = "ToolbarItemBox2339814417";
 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":"ToolbarItemBox3891221146__root"};
+export var classes = {"root":"ToolbarItemBox2339814417__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_ = "common1876154914";
+var _namespace_ = "common2093974296";
 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":"common1876154914__root","column":"common1876154914__column","fullHeight":"common1876154914__fullHeight"};
+export var classes = {"root":"common2093974296__root","column":"common2093974296__column","fullHeight":"common2093974296__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/index.ts

@@ -11,3 +11,4 @@ export * from './CollectionToolbar';
 export * from './WixPatternsTestProvider';
 export * from './Picker';
 export * from './PickerContent';
+export * from './Suggestions';

package/src/exports/testkit/unidriver.ts

@@ -27,3 +27,4 @@ export { default as RequestIdUniDriver } from '../../components/RequestId/Reques
 export { SearchableCollectionContentUniDriver } from '../../components/SearchableCollectionContent/SearchableCollectionContent.uni.driver';
 export { MoreActionsUniDriver } from '../../components/MoreActions/MoreActions.uni.driver';
 export { CollectionDropdownFilterUniDriver } from '../../components/DropdownFilter/CollectionDropdownFilter.uni.driver';
+export { SuggestionsUniDriver } from '../../components/Suggestions/Suggestions.uni.driver';

package/src/hooks/useCustomFieldsWidget.ts

@@ -15,6 +15,7 @@ export interface UseCustomFieldsWidgetParams {
   containsPii?: boolean;
   defaultPermissions?: DefaultPermissionsConfig;
   extendedFields?: ExtendedFields;
+  enableArchive?: boolean;
 }
 
 export function useCustomFieldsWidget({
@@ -24,6 +25,7 @@ export function useCustomFieldsWidget({
   containsPii,
   defaultPermissions,
   extendedFields,
+  enableArchive,
 }: UseCustomFieldsWidgetParams) {
   const fqdn = parseFqdn(fqdnString);
   const container = useWixPatternsContainer();
@@ -37,6 +39,7 @@ export function useCustomFieldsWidget({
       containsPii,
       defaultPermissions,
       extendedFields,
+      enableArchive,
     });
 
     widgetForm?.registerWidget(fieldName, widgetState);

package/src/index.ts

@@ -40,6 +40,7 @@ export * from './components/PickerModalOpenButton';
 export * from './components/PickerStandalone';
 export * from './components/PickerEmptyState/PickerEmptyState';
 export * from './components/PickerListItemProps';
+export * from './components/Suggestions';
 export {
   SingleSelectFilter,
   SingleSelectFilterProps,

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

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

package/src/state/CustomFields/CustomFieldsWidgetState.ts

@@ -30,6 +30,7 @@ export interface CustomFieldsWidgetStateParams {
   readonly containsPii?: boolean;
   readonly extendedFields?: ExtendedFields;
   readonly defaultPermissions?: DefaultPermissionsConfig;
+  readonly enableArchive?: boolean;
 }
 
 export type CustomFieldsWidgetSize = 'default' | 'small';
@@ -64,6 +65,7 @@ export class CustomFieldsWidgetState {
     containsPii,
     defaultPermissions,
     extendedFields,
+    enableArchive,
   }: CustomFieldsWidgetStateParams) {
     this.container = container;
 
@@ -87,6 +89,7 @@ export class CustomFieldsWidgetState {
       filterable,
       containsPii,
       defaultPermissions,
+      enableArchive,
     });
 
     this.apps = new AppsState({

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

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

package/src/state/Suggestions/SuggestionsState.ts

@@ -0,0 +1,53 @@
+import { Offer } from '@wix/bex-utils/@wix/ambassador-dealer-v1-serving-offer/types';
+import { listOffers } from '@wix/bex-utils/@wix/ambassador-dealer-v1-serving-offer/http';
+import { computed, makeObservable } from 'mobx';
+import { TaskState, WixPatternsContainerParams } from '@wix/bex-core';
+
+export interface SuggestionsStateParams {
+  placementId: string;
+  httpClient: WixPatternsContainerParams['httpClient'];
+}
+
+export class SuggestionsState {
+  readonly placementId: string;
+  readonly httpClient: WixPatternsContainerParams['httpClient'];
+  readonly fetchOffersTask = new TaskState<Offer[]>();
+
+  constructor(params: SuggestionsStateParams) {
+    this.placementId = params.placementId;
+    this.httpClient = params.httpClient;
+
+    makeObservable(this, {
+      offers: computed,
+      isFetching: computed,
+      hasOffers: computed,
+    });
+  }
+
+  init = () => {
+    this.fetchOffersTask.runOnce(this._fetchOffers);
+  };
+
+  private _fetchOffers = async () => {
+    const { placementId, httpClient } = this;
+    const { data } = await httpClient.request(
+      listOffers({ realEstateId: placementId }),
+    );
+
+    return data.offers ?? [];
+  };
+
+  get offers(): Offer[] {
+    return this.fetchOffersTask.status.isSuccess
+      ? this.fetchOffersTask.status.data
+      : [];
+  }
+
+  get isFetching(): boolean {
+    return this.fetchOffersTask.status.isLoading;
+  }
+
+  get hasOffers() {
+    return this.offers.length > 0;
+  }
+}

package/src/styles.global.css

@@ -1 +1 @@
-.CardContainer2642374751__root.CardContainer2642374751--mobile{border-radius:0}.Collapse1975067361__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse1975067361__exit{height:0}.CollectionPage2433113590__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage2433113590__root.CollectionPage2433113590--mobile{--wds-page-header-padding-horizontal:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage2433113590__root.CollectionPage2433113590--panel{overflow:hidden;position:relative}.CollectionTable1283076406__root td{vertical-align:middle}.CollectionTable1283076406__root.CollectionTable1283076406--mobile td:first-child{padding-left:18px}.CollectionTable1283076406__root.CollectionTable1283076406--mobile td:last-child{padding-right:18px}.CollectionToolbar3370939631__left{min-width:0}.CollectionToolbar3370939631__root.CollectionToolbar3370939631--views .CollectionToolbar3370939631__left{flex-shrink:1;flex-grow:0}.CollectionToolbar3370939631__left.CollectionToolbar3370939631--expandable{flex:auto}.CollectionToolbar3370939631__root .CollectionToolbar3370939631__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar3370939631__root.CollectionToolbar3370939631--views .CollectionToolbar3370939631__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar3370939631__root .CollectionToolbar3370939631__right.CollectionToolbar3370939631__fullWidth{margin-inline-start:0!important}.CollectionToolbar3370939631__root.CollectionToolbar3370939631--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter637606844__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter637606844__searchMobile{justify-content:flex-end;position:absolute;left:18px;right:18px}.SearchOrCustomFilter637606844__searchMobile.SearchOrCustomFilter637606844--expandable{left:unset}.SearchOrCustomFilter637606844__searchMobile.SearchOrCustomFilter637606844--expandable.SearchOrCustomFilter637606844--expanded{left:18px}.AutoCompleteReadonly1853349818__root.AutoCompleteReadonly1853349818--disableEditing{cursor:pointer}.AutoCompleteReadonly1853349818__root.AutoCompleteReadonly1853349818--disableEditing input{cursor:pointer}.ViewsDropdown1774648500__root{width:200px}.DragHandle3134827324__root{display:flex;align-items:center}.DragHandle3134827324__root:not(.DragHandle3134827324--disabled){cursor:grab;color:#a8caff}.DragHandle3134827324__root.DragHandle3134827324--disabled{color:#acafc4}.DragHandle3134827324__root:focus-visible:not(.DragHandle3134827324--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle3134827324__root.DragHandle3134827324--disabled{pointer-events:none}.DragHandle3134827324__root.DragHandle3134827324--dragging:not(.DragHandle3134827324--disabled){cursor:grabbing}.EntityPagePlain3429121159__root.EntityPagePlain3429121159--mobile{--wds-page-header-padding-horizontal:0}.Fade1215131929__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade1215131929__root.Fade1215131929--exit{opacity:0}.Heading686287508__root{visibility:visible}.Heading686287508__root.Heading686287508--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow1016720825__root.InputOverflow1016720825--selected:not(.InputOverflow1016720825--focused) input::placeholder{color:#000624}@keyframes LoadingRow3458347974__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%}}.LoadingRow3458347974__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:LoadingRow3458347974__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText2289730746__root{opacity:1}.MaxHeightText2289730746__root.MaxHeightText2289730746--height24{line-height:24px}.MaxLines3985679003__root{overflow:hidden}.MaxLines3985679003__root.MaxLines3985679003--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar2085610696__root{min-width:0}.NestedTablePlaceholderStatesRow4038975435__root td{padding:0!important;width:100%}.NestedTableRow2675403157__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow2675403157__root:hover{background-color:#e7f0ff!important}.NestedTableRow2675403157__root.NestedTableRow2675403157--expandable{cursor:pointer}.NestedTableRow2675403157__placeholder td{padding:0!important;width:100%}.NestedTableRow2675403157__root:hover td:first-of-type::before,.NestedTableRow2675403157__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect3077153788__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)}.NestedTableDragAndDropRow396513697__root.NestedTableDragAndDropRow396513697--draggingInto td{background-color:#e7f0ff!important}.PickerContent184429675__root{display:flex}.PickerContentAdditionalStep877518503__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep877518503__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem785538655__root{box-sizing:border-box}.ScrollableContent1941984600__root.ScrollableContent1941984600--overflowY{overflow-y:auto}.ScrollableContent1941984600__root.ScrollableContent1941984600--overflowX{overflow-x:auto}.ScrollableContent1941984600__root.ScrollableContent1941984600--smooth{scroll-behavior:smooth}.SkeletonCard1710332693__headerLoading{display:block!important}.SlidingModal518634757__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal518634757__root.SlidingModal518634757--overlay{transition:transform 0s ease 0s}.SlidingModal518634757__root.SlidingModal518634757---appendTo-6-parent{position:absolute}.SlidingModal518634757__root:not(.SlidingModal518634757--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter1990584806__root .TabsFilter1990584806__title{color:inherit!important}.ManageTagsModal2255659067__root{display:flex}.ToolbarItem1697368245__root{min-width:0}.ToolbarItemBox3891221146__root{min-width:0}.ToolbarItemBox3891221146__root.ToolbarItemBox3891221146--removeStartPadding{margin-left:-24px}.ToolbarItemBox3891221146__root.ToolbarItemBox3891221146--expandable{flex:1 0}.common1876154914__column{display:flex;flex-direction:column}.common1876154914__fullHeight{height:100%;min-height:0}.CollectionPageHeader32245371__root.CollectionPageHeader32245371--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader32245371__root.CollectionPageHeader32245371--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader2656620262__root.FormPageHeader2656620262--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader2656620262__root.FormPageHeader2656620262--mobile>*{margin-left:0;margin-top:6px!important;height:auto}
+.CardContainer1979640463__root.CardContainer1979640463--mobile{border-radius:0}.Collapse2915694036__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse2915694036__exit{height:0}.CollectionPage1837741647__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage1837741647__root.CollectionPage1837741647--mobile{--wds-page-header-padding-horizontal:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage1837741647__root.CollectionPage1837741647--panel{overflow:hidden;position:relative}.CollectionTable3038880748__root td{vertical-align:middle}.CollectionTable3038880748__root.CollectionTable3038880748--mobile td:first-child{padding-left:18px}.CollectionTable3038880748__root.CollectionTable3038880748--mobile td:last-child{padding-right:18px}.CollectionToolbar859968085__left{min-width:0}.CollectionToolbar859968085__root.CollectionToolbar859968085--views .CollectionToolbar859968085__left{flex-shrink:1;flex-grow:0}.CollectionToolbar859968085__left.CollectionToolbar859968085--expandable{flex:auto}.CollectionToolbar859968085__root .CollectionToolbar859968085__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar859968085__root.CollectionToolbar859968085--views .CollectionToolbar859968085__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar859968085__root .CollectionToolbar859968085__right.CollectionToolbar859968085__fullWidth{margin-inline-start:0!important}.CollectionToolbar859968085__root.CollectionToolbar859968085--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter636387621__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter636387621__searchMobile{justify-content:flex-end;position:absolute;left:18px;right:18px}.SearchOrCustomFilter636387621__searchMobile.SearchOrCustomFilter636387621--expandable{left:unset}.SearchOrCustomFilter636387621__searchMobile.SearchOrCustomFilter636387621--expandable.SearchOrCustomFilter636387621--expanded{left:18px}.AutoCompleteReadonly177950537__root.AutoCompleteReadonly177950537--disableEditing{cursor:pointer}.AutoCompleteReadonly177950537__root.AutoCompleteReadonly177950537--disableEditing input{cursor:pointer}.ViewsDropdown1095654914__root{width:200px}.DragHandle16300130__root{display:flex;align-items:center}.DragHandle16300130__root:not(.DragHandle16300130--disabled){cursor:grab;color:#a8caff}.DragHandle16300130__root.DragHandle16300130--disabled{color:#acafc4}.DragHandle16300130__root:focus-visible:not(.DragHandle16300130--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle16300130__root.DragHandle16300130--disabled{pointer-events:none}.DragHandle16300130__root.DragHandle16300130--dragging:not(.DragHandle16300130--disabled){cursor:grabbing}.EntityPagePlain1258597625__root.EntityPagePlain1258597625--mobile{--wds-page-header-padding-horizontal:0}.Fade2913493731__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade2913493731__root.Fade2913493731--exit{opacity:0}.Heading2798581946__root{visibility:visible}.Heading2798581946__root.Heading2798581946--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow4172157349__root.InputOverflow4172157349--selected:not(.InputOverflow4172157349--focused) input::placeholder{color:#000624}@keyframes LoadingRow65889444__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%}}.LoadingRow65889444__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:LoadingRow65889444__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText2774449941__root{opacity:1}.MaxHeightText2774449941__root.MaxHeightText2774449941--height24{line-height:24px}.MaxLines1911370039__root{overflow:hidden}.MaxLines1911370039__root.MaxLines1911370039--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar3298994618__root{min-width:0}.MultiBulkActionToolbar3298994618__leftGroupWrapper{overflow:hidden;padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar3298994618__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar3298994618__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow463864497__root td{padding:0!important;width:100%}.NestedTableRow2871851455__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow2871851455__root:hover{background-color:#e7f0ff!important}.NestedTableRow2871851455__root.NestedTableRow2871851455--expandable{cursor:pointer}.NestedTableRow2871851455__placeholder td{padding:0!important;width:100%}.NestedTableRow2871851455__root:hover td:first-of-type::before,.NestedTableRow2871851455__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect1732618558__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)}.NestedTableDragAndDropRow3498633286__root.NestedTableDragAndDropRow3498633286--draggingInto td{background-color:#e7f0ff!important}.PickerContent3366107491__root{display:flex}.PickerContentAdditionalStep1248135679__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep1248135679__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem1287110513__root{box-sizing:border-box}.ScrollableContent4123272871__root.ScrollableContent4123272871--overflowY{overflow-y:auto}.ScrollableContent4123272871__root.ScrollableContent4123272871--overflowX{overflow-x:auto}.ScrollableContent4123272871__root.ScrollableContent4123272871--smooth{scroll-behavior:smooth}.SkeletonCard847847600__headerLoading{display:block!important}.SlidingModal2119512318__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal2119512318__root.SlidingModal2119512318--overlay{transition:transform 0s ease 0s}.SlidingModal2119512318__root.SlidingModal2119512318---appendTo-6-parent{position:absolute}.SlidingModal2119512318__root:not(.SlidingModal2119512318--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter1470164704__root .TabsFilter1470164704__title{color:inherit!important}.ManageTagsModal4063466440__root{display:flex}.ToolbarItem1820675315__root{min-width:0}.ToolbarItemBox2339814417__root{min-width:0}.ToolbarItemBox2339814417__root.ToolbarItemBox2339814417--removeStartPadding{margin-left:-24px}.ToolbarItemBox2339814417__root.ToolbarItemBox2339814417--expandable{flex:1 0}.common2093974296__column{display:flex;flex-direction:column}.common2093974296__fullHeight{height:100%;min-height:0}.CollectionPageHeader1151390752__root.CollectionPageHeader1151390752--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader1151390752__root.CollectionPageHeader1151390752--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader3665945856__root.FormPageHeader3665945856--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader3665945856__root.FormPageHeader3665945856--mobile>*{margin-left:0;margin-top:6px!important;height:auto}

package/src/testkit/jsdom.ts

@@ -25,6 +25,7 @@ import SubTitleUniDriver from '../components/PageSubTitle/PageSubTitle.uni.drive
 import { CustomFieldModalUniDriver } from '../components/CustomFieldModal/CustomFieldModal.uni.driver';
 import RequestIdUniDriver from '../components/RequestId/RequestId.uni.driver';
 import { SearchableCollectionContentUniDriver } from '../components/SearchableCollectionContent/SearchableCollectionContent.uni.driver';
+import { SuggestionsUniDriver } from '../components/Suggestions/Suggestions.uni.driver';
 
 export const TableTestkit = uniTestkitFactoryCreator(TableUniDriver);
 
@@ -107,3 +108,6 @@ export const RequestIdTestkit = uniTestkitFactoryCreator(RequestIdUniDriver);
 export const SearchableCollectionContentTestkit = uniTestkitFactoryCreator(
   SearchableCollectionContentUniDriver,
 );
+
+export const SuggestionsTestkit =
+  uniTestkitFactoryCreator(SuggestionsUniDriver);

package/src/version.ts

@@ -1 +1 @@
-export const version = 'patterns@1.305.0';
+export const version = 'patterns@1.307.0';