@wix/patterns 1.256.0 → 1.258.0

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

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

package/src/components/CollectionTable/CollectionTable.tsx

@@ -33,10 +33,11 @@ import { useScrollableContentContext } from '../../providers';
 import { isValidElement } from '../isValidElement';
 import { st, classes } from './CollectionTable.st.css.js';
 import { useIsMobile } from '../../hooks/useIsMobile';
+import { SearchableCollectionContent } from '../SearchableCollectionContent/SearchableCollectionContent';
 
 export interface CollectionTableBaseProps<T, F extends FiltersMap>
   extends CollectionTableWSRTableBaseProps<T, T, F>,
-    CollectionTableActionCellProps<T, F> {
+  CollectionTableActionCellProps<T, F> {
   /**
    * Defines the columns of the table. Accepts an array of [`TableColumn`](./?path=/story/common-types--tablecolumn) objects.
    * @overrideType [TableColumn](./?path=/story/common-types--tablecolumn)[]
@@ -145,12 +146,12 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
     search,
     renderError,
     errorState = renderError &&
-      (((err, { isOnline, retry }) =>
-        renderError?.({
-          err,
-          isOnline,
-          retry,
-        })) as CollectionTableProps<T, F>['errorState']),
+    (((err, { isOnline, retry }) =>
+      renderError?.({
+        err,
+        isOnline,
+        retry,
+      })) as CollectionTableProps<T, F>['errorState']),
     emptyState,
     noResultsState,
     children,
@@ -245,8 +246,14 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
         ...(isApplyColumnWidthStyle ? undefined : { style, width }),
         sortDescending:
           sortable && id ? query.sort.getIsSortDescending(id) : undefined,
-        render: (keyedItem: KeyedItem<T>, rowNum: number) =>
-          render(keyedItem.item, rowNum),
+        render: (keyedItem: KeyedItem<T>, rowNum: number) => {
+          const renderedContent = render(keyedItem.item, rowNum);
+          return column.searchable ? (
+            <SearchableCollectionContent>{renderedContent}</SearchableCollectionContent>
+          ) : (
+            renderedContent
+          );
+        },
       };
     });
 
@@ -332,14 +339,14 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
         noResultsState={
           typeof noResultsState === 'function'
             ? () => {
-                const {
-                  result: { originQuery, hasAvailableItems },
-                } = collection;
-                return noResultsState({
-                  hasAvailableItems,
-                  query: originQuery,
-                });
-              }
+              const {
+                result: { originQuery, hasAvailableItems },
+              } = collection;
+              return noResultsState({
+                hasAvailableItems,
+                query: originQuery,
+              });
+            }
             : noResultsState
         }
       />

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar2586181028";
+var _namespace_ = "CollectionToolbar1343894156";
 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":"CollectionToolbar2586181028__root","left":"CollectionToolbar2586181028__left","right":"CollectionToolbar2586181028__right","fullWidth":"CollectionToolbar2586181028__fullWidth"};
+export var classes = {"root":"CollectionToolbar1343894156__root","left":"CollectionToolbar1343894156__left","right":"CollectionToolbar1343894156__right","fullWidth":"CollectionToolbar1343894156__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter3329896299";
+var _namespace_ = "SearchOrCustomFilter2519736350";
 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":"SearchOrCustomFilter3329896299__root","search":"SearchOrCustomFilter3329896299__search","searchMobile":"SearchOrCustomFilter3329896299__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter2519736350__root","search":"SearchOrCustomFilter2519736350__search","searchMobile":"SearchOrCustomFilter2519736350__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

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

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

package/src/components/EntityPage/EntityPagePlain.st.css.ts

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

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

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

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow3927915796";
+var _namespace_ = "LoadingRow2727062828";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow3927915796__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3927915796__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2727062828__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2727062828__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxLines4115686776";
+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":"MaxLines4115686776__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_ = "MultiBulkActionToolbar144164696";
+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":"MultiBulkActionToolbar144164696__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_ = "NestedTablePlaceholderStatesRow75069207";
+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":"NestedTablePlaceholderStatesRow75069207__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_ = "NestedTableRow1195402007";
+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":"NestedTableRow1195402007__root","firstLevel":"NestedTableRow1195402007__firstLevel","placeholder":"NestedTableRow1195402007__placeholder","parentHovered":"NestedTableRow1195402007__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_ = "MultipleDragOverlayEffect1137615999";
+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":"MultipleDragOverlayEffect1137615999__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_ = "NestedTableDragAndDropRow2362077867";
+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":"NestedTableDragAndDropRow2362077867__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_ = "PickerContent3562904470";
+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":"PickerContent3562904470__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_ = "PickerContentAdditionalStep2959824915";
+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":"PickerContentAdditionalStep2959824915__root","titles":"PickerContentAdditionalStep2959824915__titles","suffix":"PickerContentAdditionalStep2959824915__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_ = "PickerTableListItem705989413";
+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":"PickerTableListItem705989413__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_ = "ScrollableContent702169073";
+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":"ScrollableContent702169073__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_ = "SkeletonCard2034505487";
+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":"SkeletonCard2034505487__root","headerLoading":"SkeletonCard2034505487__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_ = "SlidingModal2972838614";
+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":"SlidingModal2972838614__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_ = "TabsFilter3979636339";
+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":"TabsFilter3979636339__root","title":"TabsFilter3979636339__title"};
+export var classes = {"root":"TabsFilter3240253828__root","title":"TabsFilter3240253828__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};