@wix/patterns 1.261.0 → 1.264.0

package/src/components/Kanban/KanbanProps.ts

@@ -17,7 +17,7 @@ interface KanbanItemField<T> {
 
 export interface KanbanBaseProps<T, S, F extends FiltersMap>
   extends ToolbarBaseProps,
-  DragAndDropCategoriesProps<{}> {
+    DragAndDropCategoriesProps<{}> {
   dataHook?: string;
   state: KanbanState<T, S, F>;
   filters?: CollectionToolbarFiltersElement;

package/src/components/Kanban/useCardActions.tsx

@@ -4,7 +4,11 @@ import { useExtensionMenuItems } from '../../hooks/useExtensionMenuItems';
 import { FiltersMap } from '../../exports/core';
 import { KanbanBaseProps, KanbanState } from '../../exports/alpha';
 import { ItemActionsState } from '../../state';
-import { IconButton, PopoverMenu } from '@wix/design-system';
+import {
+  IconButton,
+  PopoverMenu,
+  PopoverMenuItemProps,
+} from '@wix/design-system';
 import { getDefaultActionCellProps } from '../CollectionItemActions/getDefaultActionCellProps';
 import { MoreSmall } from '@wix/wix-ui-icons-common';
 import {
@@ -115,7 +119,7 @@ export function useCardActions<T, S, F extends FiltersMap>({
       };
     }
 
-    return () => { };
+    return () => {};
   }, [stageKey]);
 
   let secondaryActions: React.ReactNode | null = null;
@@ -158,7 +162,7 @@ export function useCardActions<T, S, F extends FiltersMap>({
           if (action.divider) {
             return <PopoverMenu.Divider key={index} />;
           }
-          const { icon: prefixIcon, ...rest } = action;
+          const { icon: prefixIcon, skin, ...rest } = action;
           return (
             <PopoverMenu.MenuItem
               key={index}
@@ -168,6 +172,7 @@ export function useCardActions<T, S, F extends FiltersMap>({
                 action.dataHook ||
                 `kanban-card-more-actions-item-${stageKey}-${cardKey}-${index}`
               }
+              skin={skin as PopoverMenuItemProps['skin']}
               {...rest}
             />
           );

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow2032827896";
+var _namespace_ = "LoadingRow2368040009";
 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":"LoadingRow2032827896__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2032827896__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2368040009__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2368040009__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_ = "MaxHeightText2646176708";
+var _namespace_ = "MaxHeightText4145661589";
 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":"MaxHeightText2646176708__root"};
+export var classes = {"root":"MaxHeightText4145661589__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_ = "MaxLines1988150017";
+var _namespace_ = "MaxLines2629824244";
 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":"MaxLines1988150017__root"};
+export var classes = {"root":"MaxLines2629824244__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MoreActions/MoreActionsBase.tsx

@@ -91,7 +91,8 @@ function _MoreActionsBase(params: MoreActionsBaseProps) {
                 ? item({ pageState, container })
                 : item;
             const isTPA = 'type' in item && item.type === 'TPA';
-            const itemAdditionalInfo = 'biAdditionalInfo' in item ? item.biAdditionalInfo : undefined;
+            const itemAdditionalInfo =
+              'biAdditionalInfo' in item ? item.biAdditionalInfo : undefined;
 
             return (
               <PopoverMenu.MenuItem

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

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

package/src/components/MultiLevelSorting/MultiLevelSortingCTAButton.tsx

@@ -19,7 +19,7 @@ export function _MultiLevelSortingCTAButton<T, F extends FiltersMap>(
   const { state } = props;
   const {
     panels,
-    container: { translate: t },
+    container: { translate: t, isPanelLayout },
     toolbar: { responsive },
   } = state;
 
@@ -49,6 +49,7 @@ export function _MultiLevelSortingCTAButton<T, F extends FiltersMap>(
     >
       <ResponsiveButton
         state={responsive.actions}
+        shouldShrink={!isPanelLayout}
         icon={<ChangeOrderSmall />}
         dataHook="multi-level-sorting-button"
         onClick={() => {

package/src/components/MultiLevelSortingPanel/MultiLevelSortingColumnSelect.tsx

@@ -13,7 +13,7 @@ export interface MultiLevelSortingColumnSelectProps<T, F extends FiltersMap> {
 export function _MultiLevelSortingColumnSelect<T, F extends FiltersMap>(
   props: MultiLevelSortingColumnSelectProps<T, F>,
 ) {
-  const { sortableColumn, state } = props;
+  const { sortableColumn, state, index } = props;
   const ref = useRef<HTMLInputElement>();
 
   const options = state.getAvailableOptions(sortableColumn.columnId);
@@ -43,7 +43,7 @@ export function _MultiLevelSortingColumnSelect<T, F extends FiltersMap>(
           ref.current = node;
         }
       }}
-      dataHook="multi-level-sorting-select-column"
+      dataHook={`multi-level-sorting-select-column-${index}`}
       onSelect={({ id }) => {
         state.replaceSort(sortableColumn.columnId, id as string);
       }}

package/src/components/MultiLevelSortingPanel/MultiLevelSortingPanel.tsx

@@ -15,6 +15,7 @@ import { ToolbarCollectionState } from '../../state';
 import { useRafRender } from '../../hooks/useRafRender';
 import { MultiLevelSortingList } from './MultiLevelSortingList';
 import { ScrollableContent } from '../ScrollableContent';
+import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
 
 export interface MultiLevelSortingPanelProps<T, F extends FiltersMap> {
   state: ToolbarCollectionState<T, F>;
@@ -34,10 +35,10 @@ export function _MultiLevelSortingPanel<T, F extends FiltersMap>(
   }
 
   return (
-    <SidePanel
+    <PatternsSidePanel
       dataHook="multi-level-sorting-panel"
       width="100%"
-      onCloseButtonClick={() => {
+      onClose={() => {
         multiLevelSorting.reportSidePanelClose();
         table.sidePanel.close();
       }}
@@ -87,7 +88,7 @@ export function _MultiLevelSortingPanel<T, F extends FiltersMap>(
           </Box>
         </Box>
       </Tooltip>
-    </SidePanel>
+    </PatternsSidePanel>
   );
 }
 

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

@@ -1,9 +1,9 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import {
-  SidePanelUniDriver,
   AddItemUniDriver,
-  IconButtonUniDriver,
   DropdownUniDriver,
+  IconButtonUniDriver,
+  SidePanelUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 import { SlidingModalUniDriver } from '../SlidingModal/SlidingModal.uni.driver';
 import { DragAndDropUniDriver } from '../DragAndDrop/DragAndDrop.uni.driver';
@@ -49,14 +49,18 @@ export function MultiLevelSortingPanelUniDriver(
   };
   const changeColumnAtIndex = (index: number, columnIndex: number) => {
     const dropdown = DropdownUniDriver(
-      getItemAtBase(index).$(`[data-hook="multi-level-sorting-select-column"]`),
+      getItemAtBase(index).$(
+        `[data-hook="multi-level-sorting-select-column-${index}"]`,
+      ),
       body,
     );
     return dropdown.dropdownLayoutDriver.clickAtOption(columnIndex);
   };
   const getColumnAtIndex = (index: number) => {
     const dropdown = DropdownUniDriver(
-      getItemAtBase(index).$(`[data-hook="multi-level-sorting-select-column"]`),
+      getItemAtBase(index).$(
+        `[data-hook="multi-level-sorting-select-column-${index}"]`,
+      ),
       body,
     );
     return dropdown.dropdownLayoutDriver.getSelectedOptionId();

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow2904074660";
+var _namespace_ = "NestedTablePlaceholderStatesRow3476621018";
 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":"NestedTablePlaceholderStatesRow2904074660__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow3476621018__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_ = "NestedTableRow3427171272";
+var _namespace_ = "NestedTableRow1862023425";
 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":"NestedTableRow3427171272__root","firstLevel":"NestedTableRow3427171272__firstLevel","placeholder":"NestedTableRow3427171272__placeholder","parentHovered":"NestedTableRow3427171272__parentHovered"};
+export var classes = {"root":"NestedTableRow1862023425__root","firstLevel":"NestedTableRow1862023425__firstLevel","placeholder":"NestedTableRow1862023425__placeholder","parentHovered":"NestedTableRow1862023425__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableWSRTable.tsx

@@ -173,6 +173,7 @@ function _NestedTableWSRTable<C extends string, T, F extends FiltersMap>(
           noResultsState={noResultsState}
           errorState={errorState}
           rowVerticalPadding={rowVerticalPadding}
+          showTitleBar={showTitleBar}
         />
         <NestedTableContent key={`NestedTableContent_${key}`} state={state} />
       </MultiCollectionSupportProvider>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect3645946618";
+var _namespace_ = "MultipleDragOverlayEffect1456717427";
 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":"MultipleDragOverlayEffect3645946618__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1456717427__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_ = "NestedTableDragAndDropRow761657154";
+var _namespace_ = "NestedTableDragAndDropRow2496377944";
 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":"NestedTableDragAndDropRow761657154__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2496377944__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_ = "PickerContent1221046944";
+var _namespace_ = "PickerContent3767537066";
 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":"PickerContent1221046944__root"};
+export var classes = {"root":"PickerContent3767537066__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_ = "PickerContentAdditionalStep3990396416";
+var _namespace_ = "PickerContentAdditionalStep919761103";
 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":"PickerContentAdditionalStep3990396416__root","titles":"PickerContentAdditionalStep3990396416__titles","suffix":"PickerContentAdditionalStep3990396416__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep919761103__root","titles":"PickerContentAdditionalStep919761103__titles","suffix":"PickerContentAdditionalStep919761103__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContentItemsSelection.tsx

@@ -282,34 +282,34 @@ function _PickerContentItemsSelection<T, F extends FiltersMap = FiltersMap>(
           filterComponent ||
           renderCustomNotification ||
           showMaxSelection) && (
-            <Box
-              display="grid"
-              paddingLeft="SP5"
-              paddingRight="SP5"
-              paddingBottom="SP3"
-              paddingTop={rest.showHeaderDivider ? 'SP3' : '3px'}
-              gap="SP3"
-            >
-              {filterComponent ? renderFiltersComponent() : resolvedSearchElement}
-              {renderCustomNotification ? (
-                <span data-hook="custom-notification">
-                  {renderCustomNotification({
-                    selected: collection.bulkSelect.selectedCount,
-                    total: collection.result.total,
-                  })}
-                </span>
-              ) : null}
-              {showMaxSelection && (
-                <BulkSelectionMaxSelectionLabel
-                  dataHook="selection-max-label"
-                  multiple={multiple}
-                  customLabel={customMaxSelectionLabel}
-                  t={t}
-                  selectedCount={collection.bulkSelect.selectedCount}
-                />
-              )}
-            </Box>
-          )}
+          <Box
+            display="grid"
+            paddingLeft="SP5"
+            paddingRight="SP5"
+            paddingBottom="SP3"
+            paddingTop={rest.showHeaderDivider ? 'SP3' : '3px'}
+            gap="SP3"
+          >
+            {filterComponent ? renderFiltersComponent() : resolvedSearchElement}
+            {renderCustomNotification ? (
+              <span data-hook="custom-notification">
+                {renderCustomNotification({
+                  selected: collection.bulkSelect.selectedCount,
+                  total: collection.result.total,
+                })}
+              </span>
+            ) : null}
+            {showMaxSelection && (
+              <BulkSelectionMaxSelectionLabel
+                dataHook="selection-max-label"
+                multiple={multiple}
+                customLabel={customMaxSelectionLabel}
+                t={t}
+                selectedCount={collection.bulkSelect.selectedCount}
+              />
+            )}
+          </Box>
+        )}
         <MultiCollectionSupportProvider value={picker.multi}>
           <Picker
             dataHook="picker"

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

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

package/src/components/RadioGroupFilter/RadioGroupFilter.tsx

@@ -4,6 +4,7 @@ import { useDropdownSelectFilterState } from '../../hooks';
 import { FilterProps } from '../../model';
 import { Box, RadioGroup, RadioProps } from '@wix/design-system';
 import { KeyedItem } from '@wix/bex-core';
+import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
 
 export interface RadioGroupFilterProps<V> extends FilterProps<V[]> {
   /**
@@ -27,6 +28,11 @@ function _RadioGroupFilter<V>(props: RadioGroupFilterProps<V>) {
   const { dropdownSelect, init } = useDropdownSelectFilterState<V>({
     filter,
   });
+
+  const {
+    radioGroup: { spacing },
+  } = usePatternsTheme();
+
   const {
     select: { selectedValues },
     container: { translate: t },
@@ -63,6 +69,7 @@ function _RadioGroupFilter<V>(props: RadioGroupFilterProps<V>) {
       <RadioGroup
         dataHook="radio-group-filter-group"
         value={selectedValues[0]?.key || defaultValue.id}
+        spacing={spacing}
         onChange={(v) => {
           if (v?.toString() === defaultValue.id) {
             dropdownSelect.clear();

package/src/components/ResponsiveButton/ResponsiveButton.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { ToolbarResponsivePriorityState } from '../../state/Toolbar/ToolbarResponsivePriorityState';
+import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
 
 export type ResponsiveButtonProps = ButtonAsButtonProps<{
   dataHook?: string;
@@ -29,6 +30,11 @@ function _ResponsiveButton(props: ResponsiveButtonProps) {
     ...rest
   } = props;
 
+  const {
+    sizes,
+    toolbar: { button },
+  } = usePatternsTheme();
+
   const {
     toolbar: { responsive },
   } = useToolbarCollectionContext();
@@ -48,7 +54,7 @@ function _ResponsiveButton(props: ResponsiveButtonProps) {
         <IconButton
           {...rest}
           dataHook={dataHook}
-          size="small"
+          size={sizes.small}
           priority="secondary"
         >
           {icon}
@@ -60,9 +66,10 @@ function _ResponsiveButton(props: ResponsiveButtonProps) {
       as={as}
       {...rest}
       dataHook={dataHook}
-      size="small"
+      size={sizes.small}
       priority="secondary"
       prefixIcon={icon}
+      suffixIcon={button.suffix}
     >
       {children}
     </Button>

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

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

package/src/components/SearchableCollectionContent/SearchableCollectionContent.tsx

@@ -1,8 +1,8 @@
-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";
+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 {
   /**
@@ -18,16 +18,20 @@ export interface SearchableCollectionContentProps {
   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;
+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>
-  )
-}); 
+    return (
+      <Highlighter match={search} emphasize="background" dataHook={dataHook}>
+        {children}
+      </Highlighter>
+    );
+  },
+);

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

@@ -1,30 +1,37 @@
-import { baseUniDriverFactory, UniDriver } from "@wix/wix-ui-test-utils/unidriver";
+import {
+  baseUniDriverFactory,
+  UniDriver,
+} from '@wix/wix-ui-test-utils/unidriver';
 
-export const SearchableCollectionContentUniDriver = (base: UniDriver, _body: 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();
 
-    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.`,
+        );
+      }
 
-            // 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();
 
-            // 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();
-        },
-    }
-}
+      return text?.trim() || '';
+    },
+    getNumberOfMatches: async () => {
+      // Count all spans with highlighter classes
+      const highlightedSpans = await base.$$('span[class*="Highlighter"]');
+      return highlightedSpans.count();
+    },
+  };
+};