@wix/patterns 1.261.0 → 1.264.0

package/src/components/SidePanel/PatternsSidePanel.tsx

@@ -0,0 +1,22 @@
+import { SidePanel, SidePanelProps } from '@wix/design-system';
+import React from 'react';
+import { useSidePanelProps } from '../../hooks/layout/useSidePanelProps';
+
+export interface PatternsSidePanelProps
+  extends Omit<
+    SidePanelProps,
+    | 'closeButtonProps'
+    | 'onCloseButtonClick'
+    | 'backButtonProps'
+    | 'onBackButtonClick'
+  > {
+  onClose?: () => void;
+}
+
+export function PatternsSidePanel(props: PatternsSidePanelProps) {
+  const { onClose, ...rest } = props;
+  const sidePanelProps = useSidePanelProps({
+    onClose,
+  });
+  return <SidePanel {...sidePanelProps} {...rest} />;
+}

package/src/components/SidePanelModal/SidePanelModal.tsx

@@ -15,7 +15,7 @@ export interface SidePanelModalProps {
 
 function _SidePanelModal(props: SidePanelModalProps) {
   const { top, left, state } = props;
-  const { onSidePanelOpen, closeSidePanel, containerLayoutType } =
+  const { onSidePanelOpen, closeSidePanel, isPanelLayout } =
     useWixPatternsContainer();
   const pageState = usePageContext();
 
@@ -24,15 +24,15 @@ function _SidePanelModal(props: SidePanelModalProps) {
   const { isOpen } = sidePanel;
 
   const width = useMemo(
-    () => (containerLayoutType === 'panel' ? '100%' : SidePanelWidth),
-    [containerLayoutType],
+    () => (isPanelLayout ? '100%' : SidePanelWidth),
+    [isPanelLayout],
   );
 
   const style = useMemo(
     () => ({
       top,
       left:
-        containerLayoutType === 'panel'
+        isPanelLayout
           ? 0
           : left != null
           ? left - SidePanelWidth
@@ -80,7 +80,7 @@ function _SidePanelModal(props: SidePanelModalProps) {
       dataHook="cairo-side-panel-modal"
       transitionStatus={sidePanel.transition.status}
       style={style}
-      appendTo={containerLayoutType === 'panel' ? 'parent' : undefined}
+      appendTo={isPanelLayout ? 'parent' : undefined}
       contentRef={(el) => {
         sidePanel.focus.modalElement = el;
       }}

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_ = "SkeletonCard1949124427";
 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":"SkeletonCard1949124427__root","headerLoading":"SkeletonCard1949124427__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_ = "SlidingModal2512982585";
 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":"SlidingModal2512982585__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_ = "TabsFilter4153273067";
 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":"TabsFilter4153273067__root","title":"TabsFilter4153273067__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_ = "ManageTagsModal3205379865";
 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":"ManageTagsModal3205379865__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_ = "ToolbarItem2832233981";
 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":"ToolbarItem2832233981__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_ = "ToolbarItemBox198729933";
 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":"ToolbarItemBox198729933__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_ = "common351681796";
 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":"common351681796__root","column":"common351681796__column","fullHeight":"common351681796__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/layout/useSidePanelProps.ts

@@ -0,0 +1,24 @@
+import { SidePanelProps } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+export function useSidePanelProps({
+  onClose,
+}: {
+  onClose?: () => void;
+}): Partial<SidePanelProps> {
+  const { isPanelLayout } = useWixPatternsContainer();
+
+  if (isPanelLayout) {
+    return {
+      backButtonProps: {
+        onClick: onClose,
+      },
+    };
+  }
+
+  return {
+    closeButtonProps: {
+      onClick: onClose,
+    },
+  };
+}

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/hooks/useCollectionPageChild/useCollectionPageChild.tsx

@@ -7,6 +7,10 @@ import {
   CollectionPageContent,
   CollectionPageContentElement,
 } from '../../components/CollectionPageContent';
+import {
+  CollectionPageFooter,
+  CollectionPageFooterElement,
+} from '../../components/CollectionPageFooter';
 
 export function useCollectionPageChild(children: ReactNode) {
   // Mapping to raw WDS components since original Page filtering none expected components: https://github.com/wix-private/wix-design-systems/blob/master/packages/wix-style-react/src/Page/Page.js#L626
@@ -23,6 +27,10 @@ export function useCollectionPageChild(children: ReactNode) {
             const content = child as CollectionPageContentElement;
             newChild = content.type.useCollectionPageContent(content);
             break;
+          case CollectionPageFooter:
+            const footer = child as CollectionPageFooterElement;
+            newChild = footer.type.useCollectionPageFooter(footer);
+            break;
           default:
             // WIP: Eventually once we will support all child types this will return null
             newChild = child;

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/providers/CairoProvider.tsx

@@ -11,6 +11,8 @@ import '../styles.global.css';
 
 import * as wixDesignSystemVersion from '../wix-design-system-version';
 import { minimalRequiredWdsRuntimeCheck } from '../minimalRequiredWdsRuntimeCheck';
+import { PatternsThemeProvider } from '../themes/PatternsThemeProvider';
+import { panelTheme } from '../themes/panel-theme';
 
 configure();
 
@@ -25,6 +27,7 @@ export interface CairoProviderProps extends CairoProviderBaseProps {}
 export function CairoProvider({
   value: valueProp,
   children,
+  layoutType,
   ...rest
 }: CairoProviderProps) {
   const [value] = useState(() => ({
@@ -35,9 +38,18 @@ export function CairoProvider({
     },
   }));
 
+  let child = children;
+
+  if (layoutType === 'panel') {
+    child = (
+      <PatternsThemeProvider value={panelTheme}>
+        {children}
+      </PatternsThemeProvider>
+    );
+  }
   return (
-    <CairoProviderBase {...rest} value={value}>
-      {children}
+    <CairoProviderBase {...rest} value={value} layoutType={layoutType}>
+      {child}
     </CairoProviderBase>
   );
 }

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_ = "CollectionPageHeader191701069";
 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":"CollectionPageHeader191701069__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CollectionPage/index.ts

@@ -1,2 +1,3 @@
 export * from './useCollectionPageHeader';
 export * from './useCollectionPageContent';
+export * from './useCollectionPageFooter';

package/src/state/CollectionPage/useCollectionPageContent.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
-import { Page } from '@wix/design-system';
+import { Page, SidePanel } from '@wix/design-system';
 import { CollectionPageContentElement } from '../../components/CollectionPageContent';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 export function useCollectionPageContent(child: CollectionPageContentElement) {
+  const { isPanelLayout } = useWixPatternsContainer();
+  if (isPanelLayout) {
+    return <SidePanel.Content {...child.props} noPadding stretchVertically />;
+  }
   return <Page.Content {...child.props} />;
 }

package/src/state/CollectionPage/useCollectionPageFooter.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Page, SidePanel } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { CollectionPageFooterElement } from '../../components/CollectionPageFooter';
+
+export function useCollectionPageFooter(child: CollectionPageFooterElement) {
+  const { isPanelLayout } = useWixPatternsContainer();
+  if (isPanelLayout) {
+    return <SidePanel.Footer {...child.props} />;
+  }
+  return <Page.Footer {...child.props} />;
+}

package/src/state/CollectionPage/useCollectionPageHeader.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Heading, Page } from '@wix/design-system';
+import { Box, Heading, Page, SidePanel } from '@wix/design-system';
 import { CollectionPageHeaderElement } from '../../components/CollectionPageHeaderNew';
 import { useCollectionPageContext } from '../../providers';
 import { observer } from 'mobx-react-lite';
@@ -9,6 +9,7 @@ import { useIsMobile } from '../../hooks/useIsMobile';
 import { classes, st } from './CollectionPageHeader.st.css.js';
 import { pushFactoryIfNotExistsOrAddToTopOfGroup } from './pushFactoryIfNotExistsOrAddToTopOfGroup';
 import { MoreActions } from '../../components/MoreActions';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 const MoreActionsBySecondaryAction = observer(
   ({ child }: { child: CollectionPageHeaderElement }) => {
@@ -48,6 +49,11 @@ const MoreActionsBySecondaryAction = observer(
 
 export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
   const isMobile = useIsMobile();
+  const { isPanelLayout } = useWixPatternsContainer();
+
+  if (isPanelLayout) {
+    return <SidePanel.Header title={child.props.title.text} />;
+  }
   return (
     <Page.Header
       key={child.key}

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);
 

package/src/state/FormPage/FormPageHeader.st.css.ts

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