@wix/patterns 1.257.0 → 1.258.0

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

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

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

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

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

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

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow1220555230";
+var _namespace_ = "NestedTableRow3432613196";
 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":"NestedTableRow1220555230__root","firstLevel":"NestedTableRow1220555230__firstLevel","placeholder":"NestedTableRow1220555230__placeholder","parentHovered":"NestedTableRow1220555230__parentHovered"};
+export var classes = {"root":"NestedTableRow3432613196__root","firstLevel":"NestedTableRow3432613196__firstLevel","placeholder":"NestedTableRow3432613196__placeholder","parentHovered":"NestedTableRow3432613196__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

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

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep1986790411";
+var _namespace_ = "PickerContentAdditionalStep3330351341";
 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":"PickerContentAdditionalStep1986790411__root","titles":"PickerContentAdditionalStep1986790411__titles","suffix":"PickerContentAdditionalStep1986790411__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3330351341__root","titles":"PickerContentAdditionalStep3330351341__titles","suffix":"PickerContentAdditionalStep3330351341__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_ = "PickerTableListItem813114813";
+var _namespace_ = "PickerTableListItem4029328239";
 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":"PickerTableListItem813114813__root"};
+export var classes = {"root":"PickerTableListItem4029328239__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_ = "ScrollableContent282196185";
+var _namespace_ = "ScrollableContent3273966693";
 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":"ScrollableContent282196185__root"};
+export var classes = {"root":"ScrollableContent3273966693__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SearchableCollectionContent/SearchableCollectionContent.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { useCollectionContext } from "../CollectionContext";
+import { FiltersMap } from "@wix/bex-core";
+import { Highlighter } from "@wix/design-system";
+
+export interface SearchableCollectionContentProps {
+  /**
+   * The searchable content
+   * @external
+   */
+  children?: React.ReactNode;
+  /**
+   * A data hook for testing purposes.
+   * @default searchable-collection-content
+   * @external
+   */
+  dataHook?: string;
+}
+
+export const SearchableCollectionContent = observer(function SearchableCollectionContent<T, F extends FiltersMap = FiltersMap>(props: SearchableCollectionContentProps) {
+  const { children, dataHook = 'searchable-collection-content' } = props;
+  const collection = useCollectionContext<T, F>();
+  const {
+    originQuery: { search },
+  } = collection;
+
+  return (
+    <Highlighter match={search} emphasize="background" dataHook={dataHook}>
+      {children}
+    </Highlighter>
+  )
+}); 

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

@@ -0,0 +1,30 @@
+import { baseUniDriverFactory, UniDriver } from "@wix/wix-ui-test-utils/unidriver";
+
+export const SearchableCollectionContentUniDriver = (base: UniDriver, _body: UniDriver) => {
+
+    return {
+        ...baseUniDriverFactory(base),
+        getMatchAtIndex: async (index: number) => {
+            // Find all spans with highlighter classes (contains "Highlighter" in the class name)
+            // Based on the HTML structure: <span class="wds_1_181_0_Highlighter__root wds_1_181_0_Highlighter---emphasize-10-background">a</span>
+            const highlightedSpans = await base.$$('span[class*="Highlighter"]');
+            const spanCount = await highlightedSpans.count();
+
+            // Check if the index is valid
+            if (index < 0 || index >= spanCount) {
+                throw new Error(`Match index ${index} is out of range. Found ${spanCount} matches.`);
+            }
+
+            // Get the span at the specified index
+            const span = await highlightedSpans.at(index);
+            const text = await span.text();
+
+            return text?.trim() || '';
+        },
+        getNumberOfMatches: async () => {
+            // Count all spans with highlighter classes
+            const highlightedSpans = await base.$$('span[class*="Highlighter"]');
+            return highlightedSpans.count();
+        },
+    }
+}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard60996183";
+var _namespace_ = "SkeletonCard2725565140";
 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":"SkeletonCard60996183__root","headerLoading":"SkeletonCard60996183__headerLoading"};
+export var classes = {"root":"SkeletonCard2725565140__root","headerLoading":"SkeletonCard2725565140__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_ = "SlidingModal3981743491";
+var _namespace_ = "SlidingModal3834545991";
 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":"SlidingModal3981743491__root"};
+export var classes = {"root":"SlidingModal3834545991__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -576,6 +576,34 @@ export function TableUniDriver(base: UniDriver, body: UniDriver) {
         base.$$('[data-hook="table-section-header"]').get(index),
         body,
       ),
+
+    /** Get column indices that are currently searchable */
+    getSearchableColumns: async () => {
+      const searchableColumnIndices: number[] = [];
+
+      // Get all data rows and check the first one
+      const rows = base.$$('tbody tr');
+      const rowCount = await rows.count();
+      if (rowCount === 0) {
+        return searchableColumnIndices;
+      }
+
+      const firstRow = rows.get(0);
+      const cells = firstRow.$$('td');
+      const cellCount = await cells.count();
+
+      // Check each cell to see if it contains SearchableCollectionContent
+      for (let columnIndex = 0; columnIndex < cellCount; columnIndex++) {
+        const cell = cells.get(columnIndex);
+        const searchableContent = cell.$('[data-hook="searchable-collection-content"]');
+
+        if (await searchableContent.exists()) {
+          searchableColumnIndices.push(columnIndex);
+        }
+      }
+
+      return searchableColumnIndices;
+    },
   };
 }
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter2185345565";
+var _namespace_ = "TabsFilter3240253828";
 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":"TabsFilter2185345565__root","title":"TabsFilter2185345565__title"};
+export var classes = {"root":"TabsFilter3240253828__root","title":"TabsFilter3240253828__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_ = "ManageTagsModal255858001";
+var _namespace_ = "ManageTagsModal747157864";
 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":"ManageTagsModal255858001__root"};
+export var classes = {"root":"ManageTagsModal747157864__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_ = "ToolbarItem2491269890";
+var _namespace_ = "ToolbarItem4166853919";
 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":"ToolbarItem2491269890__root"};
+export var classes = {"root":"ToolbarItem4166853919__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_ = "ToolbarItemBox1341084554";
+var _namespace_ = "ToolbarItemBox2539175123";
 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":"ToolbarItemBox1341084554__root"};
+export var classes = {"root":"ToolbarItemBox2539175123__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_ = "common2911752836";
+var _namespace_ = "common1548704408";
 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":"common2911752836__root","column":"common2911752836__column","fullHeight":"common2911752836__fullHeight"};
+export var classes = {"root":"common1548704408__root","column":"common1548704408__column","fullHeight":"common1548704408__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/dashboard/WixPatternsDashboardTestProvider.tsx

@@ -26,6 +26,7 @@ export function WixPatternsDashboardTestProvider(
       search: '',
       hash: '',
     },
+    embedded: false,
   }));
 
   const [essentials] = useState(() =>

package/src/model/tableColumn.ts

@@ -7,15 +7,16 @@ type TableColumnBase<T = any> = Omit<
   'sortDescending' | 'sortable' | 'infoTooltipProps' | 'style'
 > & {
   style?:
-    | CSSProperties
-    | ((
-        column: TableColumnWSR,
-        rowData: KeyedItem<T>,
-        rowNum: number,
-      ) => CSSProperties);
+  | CSSProperties
+  | ((
+    column: TableColumnWSR,
+    rowData: KeyedItem<T>,
+    rowNum: number,
+  ) => CSSProperties);
   reorderDisabled?: boolean;
   defaultSortOrder?: SortOrder;
   sortMode?: SortMode;
+  searchable?: boolean;
   infoTooltipProps?: TableColumnWSR['infoTooltipProps'] & {
     panelContent?: ReactNode;
   };
@@ -106,6 +107,10 @@ export interface Column {
    * When `false`, the column is always selected and displayed. Relevant for [custom columns](./?path=/story/features-display-custom-columns--overview).
    */
   hideable?: boolean;
+  /**
+   * When `true`, search matches in the column's values will be highlighted. Mark a column as searchable only if iy's data is relevant for your search.
+   */
+  searchable?: boolean;
   /**
    * When `true`, disables drag and drop for the column.
    * @external

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader3527182948";
+var _namespace_ = "CollectionPageHeader1162142659";
 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":"CollectionPageHeader3527182948__root"};
+export var classes = {"root":"CollectionPageHeader1162142659__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_ = "FormPageHeader3807652203";
+var _namespace_ = "FormPageHeader3389032696";
 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":"FormPageHeader3807652203__root"};
+export var classes = {"root":"FormPageHeader3389032696__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/styles.global.css

@@ -1 +1 @@
-.CardContainer2843719757__root.CardContainer2843719757--mobile{border-radius:0}.Collapse828938560__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse828938560__exit{height:0}.CollectionPage2463630497__root.CollectionPage2463630497--mobile{--wds-page-header-padding-horizontal:0}.CollectionTable3100122403__root.CollectionTable3100122403--mobile td:first-child{padding-left:18px}.CollectionTable3100122403__root.CollectionTable3100122403--mobile td:last-child{padding-right:18px}.CollectionToolbar1604826391__left{min-width:0}.CollectionToolbar1604826391__root.CollectionToolbar1604826391--views .CollectionToolbar1604826391__left{flex-shrink:1;flex-grow:0}.CollectionToolbar1604826391__left.CollectionToolbar1604826391--expandable{flex:auto}.CollectionToolbar1604826391__root .CollectionToolbar1604826391__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar1604826391__root.CollectionToolbar1604826391--views .CollectionToolbar1604826391__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar1604826391__root .CollectionToolbar1604826391__right.CollectionToolbar1604826391__fullWidth{margin-inline-start:0!important}.CollectionToolbar1604826391__root.CollectionToolbar1604826391--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter194108224__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter194108224__searchMobile{width:100%;justify-content:flex-end}.AutoCompleteReadonly1582536636__root.AutoCompleteReadonly1582536636--disableEditing{cursor:pointer}.AutoCompleteReadonly1582536636__root.AutoCompleteReadonly1582536636--disableEditing input{cursor:pointer}.ViewsDropdown1196570784__root{width:200px}.DragHandle2918631536__root{display:flex;align-items:center}.DragHandle2918631536__root:not(.DragHandle2918631536--disabled){cursor:grab;color:#a8caff}.DragHandle2918631536__root.DragHandle2918631536--disabled{color:#acafc4}.DragHandle2918631536__root:focus-visible:not(.DragHandle2918631536--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle2918631536__root.DragHandle2918631536--disabled{pointer-events:none}.DragHandle2918631536__root.DragHandle2918631536--dragging:not(.DragHandle2918631536--disabled){cursor:grabbing}.EntityPagePlain577377659__root.EntityPagePlain577377659--mobile{--wds-page-header-padding-horizontal:0}.Fade2030408911__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade2030408911__root.Fade2030408911--exit{opacity:0}.Heading3198385739__root{visibility:visible}.Heading3198385739__root.Heading3198385739--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow2882191145__root.InputOverflow2882191145--selected:not(.InputOverflow2882191145--focused) input::placeholder{color:#000624}@keyframes LoadingRow3888879177__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%}}.LoadingRow3888879177__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:LoadingRow3888879177__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText1482002052__root{opacity:1}.MaxHeightText1482002052__root.MaxHeightText1482002052--height24{line-height:24px}.MaxLines885763373__root{overflow:hidden}.MaxLines885763373__root.MaxLines885763373--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar3429915714__root{min-width:0}.NestedTablePlaceholderStatesRow1778965991__root td{padding:0!important;width:100%}.NestedTableRow1220555230__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow1220555230__root:hover{background-color:#e7f0ff!important}.NestedTableRow1220555230__root.NestedTableRow1220555230--expandable{cursor:pointer}.NestedTableRow1220555230__placeholder td{padding:0!important;width:100%}.NestedTableRow1220555230__root:hover td:first-of-type::before,.NestedTableRow1220555230__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect4282218886__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)}.NestedTableDragAndDropRow3555699230__root.NestedTableDragAndDropRow3555699230--draggingInto td{background-color:#e7f0ff!important}.PickerContent301521461__root{display:flex}.PickerContentAdditionalStep1986790411__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep1986790411__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem813114813__root{box-sizing:border-box}.ScrollableContent282196185__root.ScrollableContent282196185--overflowY{overflow-y:auto}.ScrollableContent282196185__root.ScrollableContent282196185--overflowX{overflow-x:auto}.ScrollableContent282196185__root.ScrollableContent282196185--smooth{scroll-behavior:smooth}.SkeletonCard60996183__headerLoading{display:block!important}.SlidingModal3981743491__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal3981743491__root:not(.SlidingModal3981743491--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter2185345565__root .TabsFilter2185345565__title{color:inherit!important}.ManageTagsModal255858001__root{display:flex}.ToolbarItem2491269890__root{min-width:0}.ToolbarItemBox1341084554__root{min-width:0}.ToolbarItemBox1341084554__root.ToolbarItemBox1341084554--removeStartPadding{margin-left:-24px}.ToolbarItemBox1341084554__root.ToolbarItemBox1341084554--expandable{flex:1 0}.common2911752836__column{display:flex;flex-direction:column}.common2911752836__fullHeight{height:100%;min-height:0}.CollectionPageHeader3527182948__root.CollectionPageHeader3527182948--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader3527182948__root.CollectionPageHeader3527182948--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader3807652203__root.FormPageHeader3807652203--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader3807652203__root.FormPageHeader3807652203--mobile>*{margin-left:0;margin-top:6px!important;height:auto}
+.CardContainer2568142447__root.CardContainer2568142447--mobile{border-radius:0}.Collapse3568529214__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse3568529214__exit{height:0}.CollectionPage1128682765__root.CollectionPage1128682765--mobile{--wds-page-header-padding-horizontal:0}.CollectionTable1034773995__root.CollectionTable1034773995--mobile td:first-child{padding-left:18px}.CollectionTable1034773995__root.CollectionTable1034773995--mobile td:last-child{padding-right:18px}.CollectionToolbar1343894156__left{min-width:0}.CollectionToolbar1343894156__root.CollectionToolbar1343894156--views .CollectionToolbar1343894156__left{flex-shrink:1;flex-grow:0}.CollectionToolbar1343894156__left.CollectionToolbar1343894156--expandable{flex:auto}.CollectionToolbar1343894156__root .CollectionToolbar1343894156__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar1343894156__root.CollectionToolbar1343894156--views .CollectionToolbar1343894156__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar1343894156__root .CollectionToolbar1343894156__right.CollectionToolbar1343894156__fullWidth{margin-inline-start:0!important}.CollectionToolbar1343894156__root.CollectionToolbar1343894156--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter2519736350__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter2519736350__searchMobile{width:100%;justify-content:flex-end}.AutoCompleteReadonly2634866908__root.AutoCompleteReadonly2634866908--disableEditing{cursor:pointer}.AutoCompleteReadonly2634866908__root.AutoCompleteReadonly2634866908--disableEditing input{cursor:pointer}.ViewsDropdown3525093572__root{width:200px}.DragHandle3203712901__root{display:flex;align-items:center}.DragHandle3203712901__root:not(.DragHandle3203712901--disabled){cursor:grab;color:#a8caff}.DragHandle3203712901__root.DragHandle3203712901--disabled{color:#acafc4}.DragHandle3203712901__root:focus-visible:not(.DragHandle3203712901--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle3203712901__root.DragHandle3203712901--disabled{pointer-events:none}.DragHandle3203712901__root.DragHandle3203712901--dragging:not(.DragHandle3203712901--disabled){cursor:grabbing}.EntityPagePlain91645944__root.EntityPagePlain91645944--mobile{--wds-page-header-padding-horizontal:0}.Fade698605852__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade698605852__root.Fade698605852--exit{opacity:0}.Heading2236980878__root{visibility:visible}.Heading2236980878__root.Heading2236980878--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow1307460668__root.InputOverflow1307460668--selected:not(.InputOverflow1307460668--focused) input::placeholder{color:#000624}@keyframes LoadingRow2727062828__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%}}.LoadingRow2727062828__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:LoadingRow2727062828__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText3921536750__root{opacity:1}.MaxHeightText3921536750__root.MaxHeightText3921536750--height24{line-height:24px}.MaxLines2683262557__root{overflow:hidden}.MaxLines2683262557__root.MaxLines2683262557--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar3356323267__root{min-width:0}.NestedTablePlaceholderStatesRow2274518903__root td{padding:0!important;width:100%}.NestedTableRow3432613196__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow3432613196__root:hover{background-color:#e7f0ff!important}.NestedTableRow3432613196__root.NestedTableRow3432613196--expandable{cursor:pointer}.NestedTableRow3432613196__placeholder td{padding:0!important;width:100%}.NestedTableRow3432613196__root:hover td:first-of-type::before,.NestedTableRow3432613196__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect1749262334__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)}.NestedTableDragAndDropRow1541159342__root.NestedTableDragAndDropRow1541159342--draggingInto td{background-color:#e7f0ff!important}.PickerContent2855242609__root{display:flex}.PickerContentAdditionalStep3330351341__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep3330351341__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem4029328239__root{box-sizing:border-box}.ScrollableContent3273966693__root.ScrollableContent3273966693--overflowY{overflow-y:auto}.ScrollableContent3273966693__root.ScrollableContent3273966693--overflowX{overflow-x:auto}.ScrollableContent3273966693__root.ScrollableContent3273966693--smooth{scroll-behavior:smooth}.SkeletonCard2725565140__headerLoading{display:block!important}.SlidingModal3834545991__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal3834545991__root:not(.SlidingModal3834545991--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter3240253828__root .TabsFilter3240253828__title{color:inherit!important}.ManageTagsModal747157864__root{display:flex}.ToolbarItem4166853919__root{min-width:0}.ToolbarItemBox2539175123__root{min-width:0}.ToolbarItemBox2539175123__root.ToolbarItemBox2539175123--removeStartPadding{margin-left:-24px}.ToolbarItemBox2539175123__root.ToolbarItemBox2539175123--expandable{flex:1 0}.common1548704408__column{display:flex;flex-direction:column}.common1548704408__fullHeight{height:100%;min-height:0}.CollectionPageHeader1162142659__root.CollectionPageHeader1162142659--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader1162142659__root.CollectionPageHeader1162142659--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader3389032696__root.FormPageHeader3389032696--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader3389032696__root.FormPageHeader3389032696--mobile>*{margin-left:0;margin-top:6px!important;height:auto}

package/src/testkit/jsdom.ts

@@ -24,6 +24,7 @@ import CardContainerUniDriver from '../components/CardContainer/CardContainer.un
 import SubTitleUniDriver from '../components/PageSubTitle/PageSubTitle.uni.driver';
 import { CustomFieldModalUniDriver } from '../components/CustomFieldModal/CustomFieldModal.uni.driver';
 import RequestIdUniDriver from '../components/RequestId/RequestId.uni.driver';
+import { SearchableCollectionContentUniDriver } from '../components/SearchableCollectionContent/SearchableCollectionContent.uni.driver';
 
 export const TableTestkit = uniTestkitFactoryCreator(TableUniDriver);
 
@@ -102,3 +103,7 @@ export const CustomFieldModalTestkit = uniTestkitFactoryCreator(
 );
 
 export const RequestIdTestkit = uniTestkitFactoryCreator(RequestIdUniDriver);
+
+export const SearchableCollectionContentTestkit = uniTestkitFactoryCreator(
+  SearchableCollectionContentUniDriver,
+);

package/src/version.ts

@@ -1 +1 @@
-export const version = 'patterns@1.257.0';
+export const version = 'patterns@1.258.0';