@wix/patterns 1.307.0 → 1.316.0

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

@@ -4,35 +4,101 @@ import {
   UniDriver,
 } from '@wix/wix-ui-test-utils/unidriver';
 
-export const SuggestionsUniDriver = (base: UniDriver, body: UniDriver) => {
-  const carousel = CarouselWIPUniDriver(
-    base.$('[data-hook="suggestions-carousel"]'),
+export interface SuggestionsUniDriverOptions {
+  /** Data hook for the Suggestions component (default: 'suggestions') */
+  dataHook?: string;
+  /** Data hook for individual cards (default: 'suggestions-card' for MarketingCard) */
+  cardDataHook?: string;
+}
+
+export const SuggestionsUniDriver = (
+  base: UniDriver,
+  body: UniDriver,
+  options: SuggestionsUniDriverOptions = {},
+) => {
+  const dataHook = options.dataHook ?? 'suggestions';
+  const cardDataHook = options.cardDataHook ?? 'suggestions-card';
+
+  const carouselIdle = CarouselWIPUniDriver(
+    base.$(`[data-hook="${dataHook}-carousel-idle"]`),
     body,
   );
-  const carouselSkeleton = CarouselWIPUniDriver(
-    base.$('[data-hook="suggestions-carousel-skeleton"]'),
+  const carouselLoading = CarouselWIPUniDriver(
+    base.$(`[data-hook="${dataHook}-carousel-loading"]`),
     body,
   );
 
+  const containerIdle = base.$(`[data-hook="${dataHook}-container-idle"]`);
+  const containerLoading = base.$(
+    `[data-hook="${dataHook}-container-loading"]`,
+  );
+
+  const getCarouselChildren = async (): Promise<UniDriver[] | null> => {
+    if (await carouselIdle.exists()) {
+      // @ts-expect-error carousel types are wrong, getChildren returns a Promise of an array and not UniDriverList
+      return carouselIdle.getChildren();
+    }
+    if (await carouselLoading.exists()) {
+      // @ts-expect-error carousel types are wrong, getChildren returns a Promise of an array and not UniDriverList
+      return carouselLoading.getChildren();
+    }
+    return null;
+  };
+
+  const getContainerChildren = async () => {
+    if (await containerIdle.exists()) {
+      return containerIdle.$$(`[data-hook="${cardDataHook}"]`);
+    }
+    if (await containerLoading.exists()) {
+      return containerLoading.$$(`[data-hook="${cardDataHook}"]`);
+    }
+    return null;
+  };
+
+  const isLoadingState = async () => {
+    const isContainerLoading = await containerLoading.exists();
+    const isCarouselLoading = await carouselLoading.exists();
+    return isContainerLoading || isCarouselLoading;
+  };
+
   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,
+    isLoading: isLoadingState,
+    hasOffers: async () => {
+      const carouselExists = await carouselIdle.exists();
+      const containerExists = await containerIdle.exists();
+      return carouselExists || containerExists;
+    },
+    isEmpty: async () => {
+      const carouselExists = await carouselIdle.exists();
+      const containerExists = await containerIdle.exists();
+      return !carouselExists && !containerExists;
+    },
+    getCardsCounts: async () => {
+      const carouselChildren = await getCarouselChildren();
+      if (carouselChildren) {
+        return carouselChildren.length;
+      }
+      const containerChildren = await getContainerChildren();
+      if (containerChildren) {
+        return containerChildren.count();
+      }
+      return 0;
+    },
+    getCardAt: async (index: number) => {
+      const carouselChildren = await getCarouselChildren();
+      if (carouselChildren) {
+        return carouselChildren[index];
+      }
+      const containerChildren = await getContainerChildren();
+      if (containerChildren) {
+        return containerChildren.at(index);
+      }
+      throw new Error(`No cards found at index ${index}`);
+    },
+    carousel: async () =>
+      (await carouselIdle.exists()) ? carouselIdle : carouselLoading,
+    container: async () =>
+      (await containerIdle.exists()) ? containerIdle : containerLoading,
   };
 };

package/src/components/Suggestions/index.ts

@@ -1 +1,14 @@
-export * from './Suggestions';
+// Main component
+export { Suggestions } from './Suggestions';
+
+// Types
+export type {
+  SuggestionsProps,
+  SuggestionsCardProps,
+  BaseCardComponentProps,
+  Offer,
+} from './types';
+
+// MarketingCard - pre-built card component
+export { renderMarketingCard, MarketingCardSkeleton } from './MarketingCard';
+export type { MarketingCardSchema } from './MarketingCard';

package/src/components/Suggestions/types.ts

@@ -0,0 +1,41 @@
+import { CarouselWIPProps } from '@wix/design-system';
+import { Offer } from '@wix/bex-utils/@wix/ambassador-dealer-v1-serving-offer/types';
+
+// Re-export Offer for external consumers
+export type { Offer };
+
+/**
+ * Base props passed to card components
+ */
+export interface BaseCardComponentProps {
+  /** Index of the card in the list */
+  index: number;
+  /** Total number of offers received from the dealer service */
+  totalOffers: number;
+}
+
+/**
+ * Props passed to the renderCard function
+ */
+export interface SuggestionsCardProps extends BaseCardComponentProps {
+  /** The offer data from the dealer service */
+  offer: Offer;
+}
+
+/**
+ * Props for the Suggestions component
+ */
+export interface SuggestionsProps {
+  /** The placement ID to fetch offers for */
+  placementId: string;
+  /** Props to pass to the carousel component */
+  carouselProps?: CarouselWIPProps;
+  /** Render function for each offer card */
+  renderCard: (props: SuggestionsCardProps) => React.ReactNode | null;
+  /** 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;
+}

package/src/components/TabTotal/TabTotalCounterBadge.tsx

@@ -15,7 +15,7 @@ export interface TabCounterBadgeProps<V, T, F extends FiltersMap>
 function _TabCounterBadge<V, T = unknown, F extends FiltersMap = FiltersMap>(
   props: TabCounterBadgeProps<V, T, F>,
 ) {
-  const { value, ...rest } = props;
+  const { value, skin = 'neutralStandard', ...rest } = props;
   const state = useFilterValueTotalState(props);
 
   const {
@@ -23,7 +23,9 @@ function _TabCounterBadge<V, T = unknown, F extends FiltersMap = FiltersMap>(
   } = state;
 
   return totalStatus === 'success' && lifecycleState === 'result' ? (
-    <CounterBadge {...rest}>{total}</CounterBadge>
+    <CounterBadge skin={skin} {...rest}>
+      {total}
+    </CounterBadge>
   ) : null;
 }
 

package/src/components/TabsFilter/TabsDropdown.tsx

@@ -1,5 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Box, Input, listItemSelectBuilder } from '@wix/design-system';
+import {
+  Box,
+  DropdownProps,
+  Input,
+  listItemSelectBuilder,
+} from '@wix/design-system';
 import { Filter } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
@@ -14,10 +19,11 @@ export interface TabsFilterProps<V> {
   data: V[];
   filter: Filter<V[]>;
   selectedId: string;
+  popoverProps?: DropdownProps['popoverProps'];
 }
 
 function _TabsDropdown<V>(props: TabsFilterProps<V>) {
-  const { data: dataProp, items, filter, selectedId } = props;
+  const { data: dataProp, items, filter, selectedId, popoverProps } = props;
 
   const { itemKey } = filter;
 
@@ -98,6 +104,7 @@ function _TabsDropdown<V>(props: TabsFilterProps<V>) {
             </Input.Affix>
           )
         }
+        popoverProps={popoverProps}
       />
     </Box>
   );

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

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

package/src/components/TabsFilter/TabsFilter.tsx

@@ -1,11 +1,11 @@
 import React, {
-  ReactNode,
+  ReactElement,
   useEffect,
   useLayoutEffect,
   useMemo,
   useState,
 } from 'react';
-import { Box, TabsProps } from '@wix/design-system';
+import { Box, DropdownProps, TabsProps } from '@wix/design-system';
 import { Filter } from '@wix/bex-core';
 import { runInAction } from 'mobx';
 import { FilterContextProvider } from '../FilterContext';
@@ -18,6 +18,15 @@ import { TabsDropdown } from './TabsDropdown';
 import { ALL_TAB_ITEM_ID, TabsFilterItemBase } from './types';
 import { TabsDefault } from './TabsDefault';
 import { useFilterValueTotalState } from '../TabTotal/useFilterValueTotalState';
+import type { TabCounterBadgeProps } from '../TabTotal/TabTotalCounterBadge';
+import type { TabTotalParensProps } from '../TabTotal/TabTotalParens';
+
+/** Type alias for TabTotalCounterBadge component element */
+type TabTotalCounterBadge<V> = ReactElement<
+  TabCounterBadgeProps<V, unknown, any>
+>;
+/** Type alias for TabTotalParens component element */
+type TabTotalParens<V> = ReactElement<TabTotalParensProps<V, unknown, any>>;
 
 export interface TabsFilterProps<V> {
   /**
@@ -43,10 +52,12 @@ export interface TabsFilterProps<V> {
   /**
    * Renders a counter badge next to the tabs' texts.
    * <br><br>
-   * See different examples of this implementation in the **Design** tab.
+   * See different examples of this implementation in the [Overview](./?path=/story/features-filter-components--tabsfilter) tab.
    * @external
    */
-  counterBadge?: (value: V | null | undefined) => ReactNode;
+  counterBadge?: (
+    value: V | null | undefined,
+  ) => TabTotalCounterBadge<V> | TabTotalParens<V> | null | undefined;
   onChange?: (value: V | null | undefined) => unknown;
 
   /**
@@ -61,6 +72,12 @@ export interface TabsFilterProps<V> {
   type?: Extract<TabsProps['type'], 'uniformFull'>;
 
   placeAllTabLast?: boolean;
+
+  /**
+   * Custom popover props for the mobile dropdown menu. On mobile devices, tabs are displayed as a dropdown menu.
+   * @external
+   */
+  mobilePopoverProps?: DropdownProps['popoverProps'];
 }
 
 function _TabsFilter<V>(props: TabsFilterProps<V>) {
@@ -72,6 +89,7 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
     counterBadge,
     placeAllTabLast,
     onChange,
+    mobilePopoverProps,
   } = props;
   const { itemKey, itemName } = filter;
 
@@ -213,6 +231,7 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
               data={dataProp}
               items={items}
               selectedId={selectedId}
+              popoverProps={mobilePopoverProps}
             />
           )}
         </div>

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

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

package/src/components/ToolbarCollection/ToolbarCollection.tsx

@@ -253,15 +253,15 @@ export interface ToolbarCollectionBaseProps<T, F extends FiltersMap>
 
   /**
    * Adds functionality for a primary action button in the toolbar.
-   * Accepts a [PrimaryActionButton](./?path=/story/features-actions-primaryactionbutton--primaryactionbutton) component.
+   * Accepts a [PrimaryActionButton](./?path=/story/features-actions-primary-actions--primary-action-button) component.
    * @external
-   * @overrideType [PrimaryActionButton](./?path=/story/features-actions-primaryactionbutton--primaryactionbutton)
+   * @overrideType [PrimaryActionButton](./?path=/story/features-actions-primary-actions--primary-action-button)
    */
   primaryActionButton?: PrimaryActionButtonElement;
 
   /**
    * Secondary buttons w/o PopoverMenu component to be rendered on the toolbar.
-   * @overrideType [ToolbarSecondaryActions](./?path=/story/wip-toolbarsecondaryactions--toolbarsecondaryactions)
+   * @overrideType [ToolbarSecondaryActions](./?path=/story/features-actions-secondary-actions--toolbar-secondary-actions)
    * @external
    */
   secondaryActions?: ToolbarSecondaryActionsElement;

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem1820675315";
+var _namespace_ = "ToolbarItem3013100242";
 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":"ToolbarItem1820675315__root"};
+export var classes = {"root":"ToolbarItem3013100242__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_ = "ToolbarItemBox2339814417";
+var _namespace_ = "ToolbarItemBox1125695505";
 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":"ToolbarItemBox2339814417__root"};
+export var classes = {"root":"ToolbarItemBox1125695505__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_ = "common2093974296";
+var _namespace_ = "common1861445983";
 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":"common2093974296__root","column":"common2093974296__column","fullHeight":"common2093974296__fullHeight"};
+export var classes = {"root":"common1861445983__root","column":"common1861445983__column","fullHeight":"common1861445983__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/exports/testkit/unidriver.ts

@@ -27,4 +27,8 @@ 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';
+export {
+  SuggestionsUniDriver,
+  SuggestionsUniDriverOptions,
+} from '../../components/Suggestions/Suggestions.uni.driver';
+export { MarketingCardUniDriver } from '../../components/Suggestions/MarketingCard.uni.driver';

package/src/hooks/useBulkActionMobileGroups.ts

@@ -35,7 +35,8 @@ export function useBulkActionMobileGroups({
   if (primaryGroup.length > 0) {
     groups.push(primaryGroup);
   }
-  if (secondaryFlat.length > 0) {
+  // array is at least of size 1 because of the hardcoded moreActionsLabel
+  if (secondaryFlat.length > 1) {
     groups.push(secondaryFlat);
   }
   return groups;

package/src/hooks/useItemsSelectionFilter/useItemsSelectionFilter.ts

@@ -130,7 +130,7 @@ export interface UseItemsSelectionFilterParams {
    */
   providerKey: string;
   /**
-   * This is a reference to the filter that was defined in the main collection. For example: `collection.filters.<filterName>`
+   * This is a reference to the filter that was defined in the main collection. For example: `collection.filters.<filterName>`.
    */
   filter: Filter<ItemsSelectionValue[]>;
 

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

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

package/src/state/NestedTableState/NestedTableNodeStateOptimisticActions.ts

@@ -30,11 +30,35 @@ export interface NestedUpdateManyParams<T, R> extends UpdateManyParams<T, R> {
 
 export interface NestedTableNodeStateOptimisticActionsPublicAPI<T>
   extends OptimisticActions<T> {
+  /**
+   * Updates multiple items
+   * @param items - The items to update.
+   * @param params - Additional parameters for the update operation.
+   * @param params.propagate - Indicates whether to propagate the update children nodes
+   * @param params.patch - Partial data to patch the items with.
+   */
   updateMany<R>(items: T[], params: NestedUpdateManyParams<T, R>): void;
 
+  /**
+   * Updates one item
+   * @param item - The items to update.
+   * @param params - Additional parameters for the update operation.
+   * @param params.propagate - Indicates whether to propagate the update children nodes
+   * @param params.patch - Partial data to patch the items with.
+   */
   updateOne<R>(item: T, params: NestedUpdateManyParams<T, R>): void;
 
+  /**
+   * Deletes multiple items and their descendants
+   * @param items - An array of items to delete.
+   * @param params - Additional parameters for the delete operation.
+   */
   deleteMany<R>(items: T[], params: NestedDeleteManyParams<T, R>): void;
+  /**
+   * Deletes one item and its descendants
+   * @param item - An array of items to delete.
+   * @param params - Additional parameters for the delete operation.
+   */
   deleteOne<R>(item: T, params: NestedDeleteManyParams<T, R>): void;
 }
 

package/src/state/NestedTableState/NestedTableNodeStatePublicAPI.ts

@@ -23,6 +23,7 @@ export interface NestedTableNodeStatePublicAPI<
 
   /**
    * The optimistic actions of the node, affects items both in nested & flat mode
+   * @overrideType [NestedTableOptimisticActions](./?path=/story/base-components-collections-nestedtable--nestedtableoptimisticactions)
    */
   readonly optimisticActions?: NestedTableNodeStateOptimisticActionsPublicAPI<T>;
 

package/src/state/NestedTableState/index.ts

@@ -7,3 +7,4 @@ export {
   NestedTableNodeState,
 } from './NestedTableNodeState';
 export * from './createNestedTableLevel';
+export { NestedTableNodeStateOptimisticActionsPublicAPI as NestedTableOptimisticActions } from './NestedTableNodeStateOptimisticActions';

package/src/state/ToolbarCollectionState.ts

@@ -162,6 +162,8 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
   AddApplyFiltersButton?: typeof AddApplyFiltersButton;
   tabs?: TabsFilterState<T, F>;
 
+  _searchExpanded = false;
+
   forceRenderIndexes: number[] | undefined = undefined;
 
   constructor(params: ToolbarCollectionStateParams<T, F>) {
@@ -278,6 +280,7 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
       _adjustSortWithNewColumns: action,
       setToolbarFiltersStateInitialized: action,
       activeFiltersEntries: computed,
+      _searchExpanded: observable.ref,
     });
   }
 

package/src/styles.global.css

@@ -1 +1 @@
-.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}
+.CardContainer4285967081__root.CardContainer4285967081--mobile{border-radius:0}.Collapse2530575756__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse2530575756__exit{height:0}.CollectionPage3005208380__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage3005208380__root.CollectionPage3005208380--mobile{--wds-page-header-padding-horizontal:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage3005208380__root.CollectionPage3005208380--panel{overflow:hidden;position:relative}.CollectionTable2339016256__root td{vertical-align:middle}.CollectionTable2339016256__root.CollectionTable2339016256--mobile td:first-child{padding-left:18px}.CollectionTable2339016256__root.CollectionTable2339016256--mobile td:last-child{padding-right:18px}.CollectionToolbar4123532123__left{min-width:0}.CollectionToolbar4123532123__root.CollectionToolbar4123532123--views .CollectionToolbar4123532123__left{flex-shrink:1;flex-grow:0}.CollectionToolbar4123532123__left.CollectionToolbar4123532123--expandable{flex:auto}.CollectionToolbar4123532123__root .CollectionToolbar4123532123__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar4123532123__root.CollectionToolbar4123532123--views .CollectionToolbar4123532123__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar4123532123__root .CollectionToolbar4123532123__right.CollectionToolbar4123532123__fullWidth{margin-inline-start:0!important}.CollectionToolbar4123532123__root.CollectionToolbar4123532123--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter3672765000__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter3672765000__searchMobile{justify-content:flex-end}.SearchOrCustomFilter3672765000__searchMobile:not(.SearchOrCustomFilter3672765000--expandable){width:100%}.SearchOrCustomFilter3672765000__searchMobile.SearchOrCustomFilter3672765000--expandable.SearchOrCustomFilter3672765000--expanded{position:absolute;right:18px;left:18px}.AutoCompleteReadonly4049498939__root.AutoCompleteReadonly4049498939--disableEditing{cursor:pointer}.AutoCompleteReadonly4049498939__root.AutoCompleteReadonly4049498939--disableEditing input{cursor:pointer}.ViewsDropdown1006321373__root{width:200px}.DragHandle1173897704__root{display:flex;align-items:center}.DragHandle1173897704__root:not(.DragHandle1173897704--disabled){cursor:grab;color:#a8caff}.DragHandle1173897704__root.DragHandle1173897704--disabled{color:#acafc4}.DragHandle1173897704__root:focus-visible:not(.DragHandle1173897704--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle1173897704__root.DragHandle1173897704--disabled{pointer-events:none}.DragHandle1173897704__root.DragHandle1173897704--dragging:not(.DragHandle1173897704--disabled){cursor:grabbing}.EntityPagePlain4255131288__root.EntityPagePlain4255131288--mobile{--wds-page-header-padding-horizontal:0}.Fade943803794__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade943803794__root.Fade943803794--exit{opacity:0}.Heading1520773593__root{visibility:visible}.Heading1520773593__root.Heading1520773593--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow1469232510__root.InputOverflow1469232510--selected:not(.InputOverflow1469232510--focused) input::placeholder{color:#000624}@keyframes LoadingRow3371637707__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%}}.LoadingRow3371637707__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:LoadingRow3371637707__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText3078503851__root{opacity:1}.MaxHeightText3078503851__root.MaxHeightText3078503851--height24{line-height:24px}.MaxLines3275238463__root{overflow:hidden}.MaxLines3275238463__root.MaxLines3275238463--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar1806630142__root{min-width:0}.MultiBulkActionToolbar1806630142__leftGroupWrapper{overflow:hidden;padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar1806630142__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar1806630142__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow2357587419__root td{padding:0!important;width:100%}.NestedTableRow4089065040__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow4089065040__root:hover{background-color:#e7f0ff!important}.NestedTableRow4089065040__root.NestedTableRow4089065040--expandable{cursor:pointer}.NestedTableRow4089065040__placeholder td{padding:0!important;width:100%}.NestedTableRow4089065040__root:hover td:first-of-type::before,.NestedTableRow4089065040__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect627430531__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)}.NestedTableDragAndDropRow2380222773__root.NestedTableDragAndDropRow2380222773--draggingInto td{background-color:#e7f0ff!important}.PickerContent646877739__root{display:flex}.PickerContentAdditionalStep1520787953__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep1520787953__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem2468441107__root{box-sizing:border-box}.ScrollableContent2387931131__root.ScrollableContent2387931131--overflowY{overflow-y:auto}.ScrollableContent2387931131__root.ScrollableContent2387931131--overflowX{overflow-x:auto}.ScrollableContent2387931131__root.ScrollableContent2387931131--smooth{scroll-behavior:smooth}.SkeletonCard3405140458__headerLoading{display:block!important}.SlidingModal41494342__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal41494342__root.SlidingModal41494342--overlay{transition:transform 0s ease 0s}.SlidingModal41494342__root.SlidingModal41494342---appendTo-6-parent{position:absolute}.SlidingModal41494342__root:not(.SlidingModal41494342--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter379101447__root .TabsFilter379101447__title{color:inherit!important}.ManageTagsModal243698359__root{display:flex}.ToolbarItem3013100242__root{min-width:0}.ToolbarItemBox1125695505__root{min-width:0}.ToolbarItemBox1125695505__root.ToolbarItemBox1125695505--removeStartPadding{margin-left:-24px}.ToolbarItemBox1125695505__root.ToolbarItemBox1125695505--expandable{flex:1 0}.common1861445983__column{display:flex;flex-direction:column}.common1861445983__fullHeight{height:100%;min-height:0}.CollectionPageHeader2578164786__root.CollectionPageHeader2578164786--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader2578164786__root.CollectionPageHeader2578164786--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader3805276692__root.FormPageHeader3805276692--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader3805276692__root.FormPageHeader3805276692--mobile>*{margin-left:0;margin-top:6px!important;height:auto}

package/src/version.ts

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

package/src/wix-design-system-version.ts

@@ -1 +1 @@
-export const required = '^1.121.0';
+export const required = '^1.225.0';