@wix/patterns 1.261.0 → 1.263.0

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_ = "PickerTableListItem3878395080";
 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":"PickerTableListItem3878395080__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_ = "ScrollableContent186640191";
+var _namespace_ = "ScrollableContent4044499270";
 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":"ScrollableContent4044499270__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();
+    },
+  };
+};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard1111038852";
+var _namespace_ = "SkeletonCard2427498728";
 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":"SkeletonCard1111038852__root","headerLoading":"SkeletonCard1111038852__headerLoading"};
+export var classes = {"root":"SkeletonCard2427498728__root","headerLoading":"SkeletonCard2427498728__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_ = "SlidingModal2434369816";
+var _namespace_ = "SlidingModal1740485261";
 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":"SlidingModal2434369816__root"};
+export var classes = {"root":"SlidingModal1740485261__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -595,7 +595,9 @@ export function TableUniDriver(base: UniDriver, body: UniDriver) {
       // 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"]');
+        const searchableContent = cell.$(
+          '[data-hook="searchable-collection-content"]',
+        );
 
         if (await searchableContent.exists()) {
           searchableColumnIndices.push(columnIndex);

package/src/components/TableFolders/TableFoldersContent.tsx

@@ -316,6 +316,7 @@ function _TableFoldersContent<
         noResultsState={noResultsState}
         errorState={errorState}
         rowVerticalPadding={rowVerticalPadding}
+        showTitleBar={showTitleBar}
       />
 
       <CollectionTableContent state={state.table}>

package/src/components/TablePlaceholderStates/TablePlaceholderStates.tsx

@@ -23,6 +23,7 @@ export interface TablePlaceholderStatesProps
     retryErrorState: () => void;
   };
   rowVerticalPadding?: TableProps['rowVerticalPadding'];
+  showTitleBar?: boolean;
 }
 
 function _TablePlaceholderStates(props: TablePlaceholderStatesProps) {
@@ -35,6 +36,7 @@ function _TablePlaceholderStates(props: TablePlaceholderStatesProps) {
           dataHook="placeholder-states-loading-state"
           state={state}
           rowVerticalPadding={props.rowVerticalPadding}
+          showTitleBar={props.showTitleBar}
         />
       }
       {...props}

package/src/components/TableSkeleton/TableSkeleton.tsx

@@ -15,13 +15,14 @@ export interface TableSkeletonProps<T, F extends FiltersMap> {
   state: ToolbarCollectionState<T, F>;
   dataHook?: string;
   rowsCount?: number;
+  showTitleBar?: boolean;
   rowVerticalPadding?: TableProps['rowVerticalPadding'];
 }
 
 export function _TableSkeleton<T, F extends FiltersMap>(
   props: TableSkeletonProps<T, F>,
 ) {
-  const { state, dataHook, rowsCount = 7, ...rest } = props;
+  const { state, dataHook, rowsCount = 7, showTitleBar, ...rest } = props;
 
   const roundedCornersEnabled = useTableRoundedCornersEnabled();
 
@@ -96,7 +97,7 @@ export function _TableSkeleton<T, F extends FiltersMap>(
           borderRadius="0px 0px 8px 8px"
           overflow={roundedCornersEnabled ? 'hidden' : undefined}
         >
-          <Table.Content titleBarVisible={true} />
+          <Table.Content titleBarVisible={showTitleBar} />
         </Box>
       </Table>
     </Box>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter1584719376";
+var _namespace_ = "TabsFilter2458939024";
 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":"TabsFilter1584719376__root","title":"TabsFilter1584719376__title"};
+export var classes = {"root":"TabsFilter2458939024__root","title":"TabsFilter2458939024__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_ = "ManageTagsModal3546780406";
+var _namespace_ = "ManageTagsModal1989625989";
 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":"ManageTagsModal3546780406__root"};
+export var classes = {"root":"ManageTagsModal1989625989__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/TagItemEditable.tsx

@@ -62,7 +62,7 @@ export const TagItemEditable = ({
                 )}
                 approveButtonDisabledOnEmpty={false}
                 autoFocus
-                size={'small' as ListItemEditableSize}
+                size={'small' as keyof typeof ListItemEditableSize}
                 margins={'none' as ListItemEditableMargins}
                 suffix={
                   <Input.Affix>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem3712438792";
+var _namespace_ = "ToolbarItem2780647987";
 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":"ToolbarItem3712438792__root"};
+export var classes = {"root":"ToolbarItem2780647987__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_ = "ToolbarItemBox1914234473";
+var _namespace_ = "ToolbarItemBox4183899479";
 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":"ToolbarItemBox1914234473__root"};
+export var classes = {"root":"ToolbarItemBox4183899479__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_ = "common11644450";
+var _namespace_ = "common2813459454";
 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":"common11644450__root","column":"common11644450__column","fullHeight":"common11644450__fullHeight"};
+export var classes = {"root":"common2813459454__root","column":"common2813459454__column","fullHeight":"common2813459454__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/uniDriverFactory.ts

@@ -1,3 +1,9 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 
-export type UniDriverFactory<T> = (base: UniDriver, body: UniDriver) => T;
+export type UniDriverFactory<T> = (
+  base: UniDriver,
+  body: UniDriver,
+  options?: {
+    dataHook?: string;
+  },
+) => T;

package/src/fields/Field/Field.uni.driver.ts

@@ -3,7 +3,6 @@ import { baseUniDriverFactory } from '../../unidriver';
 import { CustomFieldType } from '@wix/bex-core';
 import {
   CheckboxUniDriver,
-  DatePickerUniDriver,
   DropdownUniDriver,
   FormFieldUniDriver,
   InputAreaUniDriver,
@@ -12,6 +11,7 @@ import {
   TimeInputUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 import { dataHooks } from '../dataHooks';
+import { DatePickerUniDriver } from '../../unidriver/DatePicker.uni.driver';
 
 export default (base: UniDriver, body: UniDriver) => {
   const fieldType = () =>
@@ -51,11 +51,12 @@ export default (base: UniDriver, body: UniDriver) => {
         case 'shortText':
           return InputUniDriver(inputBase(), body).getValue();
         case 'date':
-          return DatePickerUniDriver(inputBase(), body).inputDriver.getValue();
+          return (
+            await DatePickerUniDriver(inputBase(), body)
+          ).inputDriver.getValue();
         case 'dateTime':
-          const date = await DatePickerUniDriver(
-            inputBase('-date'),
-            body,
+          const date = await (
+            await DatePickerUniDriver(inputBase('-date'), body)
           ).inputDriver.getValue();
           const format = Intl.DateTimeFormat([], {
             hour: 'numeric',
@@ -96,17 +97,15 @@ export default (base: UniDriver, body: UniDriver) => {
         case 'url':
           return FormFieldUniDriver(base, body).getStatusMessage();
         case 'date':
-          return DatePickerUniDriver(
-            inputBase(),
-            body,
+          return (
+            await DatePickerUniDriver(inputBase(), body)
           ).inputDriver.getStatusMessage();
         case 'dateTime':
           let dateStatusMessage;
           let timeStatusMessage;
           try {
-            dateStatusMessage = await DatePickerUniDriver(
-              inputBase('-date'),
-              body,
+            dateStatusMessage = await (
+              await DatePickerUniDriver(inputBase('-date'), body)
             ).inputDriver.getStatusMessage();
           } catch {}
           try {
@@ -150,7 +149,10 @@ export default (base: UniDriver, body: UniDriver) => {
         case 'shortText':
           return InputUniDriver(inputBase(), body).enterText(value);
         case 'date':
-          const datePickerUniDriver = DatePickerUniDriver(inputBase(), body);
+          const datePickerUniDriver = await DatePickerUniDriver(
+            inputBase(),
+            body,
+          );
           await datePickerUniDriver.inputDriver.enterText(
             typeof value === 'string'
               ? value
@@ -177,7 +179,7 @@ export default (base: UniDriver, body: UniDriver) => {
               minute: 'numeric',
             }).format(value);
           }
-          const datetimePickerUniDriver = DatePickerUniDriver(
+          const datetimePickerUniDriver = await DatePickerUniDriver(
             inputBase('-date'),
             body,
           );

package/src/hooks/useCollectionOptions.tsx

@@ -35,13 +35,13 @@ export function useCollectionOptions<V, F extends FiltersMap>({
 
   // Original behavior: promote when not searching
   const shouldPromote = isEmptySearch;
-  
+
   // Always use the snapshot from onOptionsShow to maintain consistent session behavior
   // This prevents items from jumping during the session, even if snapshot is empty
   const itemsToPromote = dropdownCollectionFilterState.promotedItems;
 
-  const promotedItems = shouldPromote 
-    ? keyedItems.filter(item => itemsToPromote.includes(item.key))
+  const promotedItems = shouldPromote
+    ? keyedItems.filter((item) => itemsToPromote.includes(item.key))
     : [];
 
   const finalOptions = promotedItems.length
@@ -49,7 +49,7 @@ export function useCollectionOptions<V, F extends FiltersMap>({
     : [];
 
   const divider =
-    shouldPromote && 
+    shouldPromote &&
     promotedItems.length &&
     promotedItems.length !== keyedItems.length
       ? [

package/src/model/tableColumn.ts

@@ -7,12 +7,12 @@ 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;
@@ -147,6 +147,7 @@ export interface Column {
   style?: TableColumnWSR['style'];
 }
 
+// eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
 // @ts-ignore
 function _tableColumnPublicApiTest<T>(
   c: TableColumn<T>,

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

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

package/src/state/DropdownCollectionFilterState.ts

@@ -43,7 +43,9 @@ export class DropdownCollectionFilterState<
   }
 
   onOptionsShow() {
-    this.promotedItems = this.collectionFilter.select.selectedValues.map(item => item.key);
+    this.promotedItems = this.collectionFilter.select.selectedValues.map(
+      (item) => item.key,
+    );
   }
 
   constructor(params: DropdownCollectionFilterStateParams<V, F>) {

package/src/state/EntityPage/EntityPageState.ts

@@ -249,7 +249,10 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
   }
 
   onCancel() {
-    this.bi.reportButtonClick({ ctaName: 'Cancel', additionalInfo: this.actionsBarConfig?.cancelCta?.biAdditionalInfo });
+    this.bi.reportButtonClick({
+      ctaName: 'Cancel',
+      additionalInfo: this.actionsBarConfig?.cancelCta?.biAdditionalInfo,
+    });
     this.navigateToParent();
   }
 
@@ -331,7 +334,11 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
     const { isValid, data: widgetsFormData } = await this.formPage.validate();
 
     if (!isValid) {
-      this.bi.reportButtonClick({ ctaName: 'Save', isValid: false, additionalInfo: this.actionsBarConfig?.saveCta?.biAdditionalInfo });
+      this.bi.reportButtonClick({
+        ctaName: 'Save',
+        isValid: false,
+        additionalInfo: this.actionsBarConfig?.saveCta?.biAdditionalInfo,
+      });
       return;
     }
 
@@ -347,7 +354,11 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
 
       await form.handleSubmit(
         async () => {
-          bi.reportButtonClick({ ctaName: 'Save', isValid: true, additionalInfo: this.actionsBarConfig?.saveCta?.biAdditionalInfo });
+          bi.reportButtonClick({
+            ctaName: 'Save',
+            isValid: true,
+            additionalInfo: this.actionsBarConfig?.saveCta?.biAdditionalInfo,
+          });
           try {
             if (!this.isFetching) {
               const onSaveResult = await this.onSave({
@@ -365,7 +376,11 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
           }
         },
         () => {
-          bi.reportButtonClick({ ctaName: 'Save', isValid: false, additionalInfo: this.actionsBarConfig?.saveCta?.biAdditionalInfo });
+          bi.reportButtonClick({
+            ctaName: 'Save',
+            isValid: false,
+            additionalInfo: this.actionsBarConfig?.saveCta?.biAdditionalInfo,
+          });
         }, // can be used to report validation errors
       )(e);