@wix/patterns 1.440.0 → 1.443.0

package/src/components/SetupWidget/SetupStepRow.tsx

@@ -12,6 +12,7 @@ import {
 import { SetupWidgetStep } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { SetupStepIcon } from './SetupStepIcon';
+import { SetupStepSecondaryCta } from './SetupStepSecondaryCta';
 import { st, classes } from './SetupWidget.st.css.js';
 
 export interface SetupStepRowProps {
@@ -21,6 +22,8 @@ export interface SetupStepRowProps {
   /** Inline content is shown below the row. */
   expanded: boolean;
   onActivate: () => void;
+  /** Fires when the step's `secondaryCta` icon button is clicked. */
+  onSecondaryActivate?: () => void;
   /** Supplies the inline-expansion content (render prop on the widget). */
   renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;
   /** Tints the row's background when it's focused (off under the Harmony theme, see `useBmHarmonyTheme`). */
@@ -40,6 +43,7 @@ export const SetupStepRow = ({
   isFocused,
   expanded,
   onActivate,
+  onSecondaryActivate,
   renderStepContent,
   focusedBackground,
 }: SetupStepRowProps) => {
@@ -52,11 +56,46 @@ export const SetupStepRow = ({
 
   const showCta = !isCompleted && !!step.ctaLabel && !isInlineExpanded;
   // Completed steps stay actionable when they carry a completed CTA (G2).
-  const showCompletedCta = isCompleted && !!step.completedCtaLabel && !isDisabled;
+  const showCompletedCta =
+    isCompleted && !!step.completedCtaLabel && !isDisabled;
   const clickable = (!isCompleted && !isDisabled) || showCompletedCta;
 
   const handleClick = clickable ? onActivate : undefined;
 
+  const ctaNode = showCta && (
+    <ClickableCard.Action>
+      <Button
+        dataHook={`setup-step-cta-${step.id}`}
+        size="small"
+        priority={!isDisabled && !isFocused ? 'secondary' : 'primary'}
+        disabled={isDisabled}
+        ellipsis={false}
+        onClick={(event: React.MouseEvent) => {
+          event.stopPropagation();
+          onActivate();
+        }}
+      >
+        {step.ctaLabel}
+      </Button>
+    </ClickableCard.Action>
+  );
+
+  // The step's extra icon-only action. Dropped on completed steps (their CTA is
+  // gone too) and while the step is inline-expanded, so the row keeps a single
+  // trailing action.
+  const secondaryCtaNode =
+    step.secondaryCta &&
+    onSecondaryActivate &&
+    !isCompleted &&
+    !isInlineExpanded ? (
+      <SetupStepSecondaryCta
+        stepId={step.id}
+        cta={step.secondaryCta}
+        disabled={isDisabled}
+        onActivate={onSecondaryActivate}
+      />
+    ) : null;
+
   return (
     <div
       data-hook={`setup-step-${step.id}`}
@@ -109,32 +148,11 @@ export const SetupStepRow = ({
                 )}
               </Box>
             </Box>
-            {showCta &&
-              (() => {
-                const ctaNode = (
-                  <Box verticalAlign="middle">
-                    <ClickableCard.Action>
-                      <Button
-                        dataHook={`setup-step-cta-${step.id}`}
-                        size="small"
-                        priority={
-                          !isDisabled && !isFocused ? 'secondary' : 'primary'
-                        }
-                        disabled={isDisabled}
-                        ellipsis={false}
-                        onClick={(event: React.MouseEvent) => {
-                          event.stopPropagation();
-                          onActivate();
-                        }}
-                      >
-                        {step.ctaLabel}
-                      </Button>
-                    </ClickableCard.Action>
-                  </Box>
-                );
-
-                // Disabled steps explain why the CTA is disabled (G5).
-                return isDisabled ? (
+            {(secondaryCtaNode || showCta) && (
+              <Box verticalAlign="middle" gap="SP1">
+                {secondaryCtaNode}
+                {/* Disabled steps explain why the CTA is disabled (G5). */}
+                {showCta && isDisabled ? (
                   <Tooltip
                     dataHook={`setup-step-disabled-tooltip-${step.id}`}
                     content={
@@ -144,12 +162,13 @@ export const SetupStepRow = ({
                       t('cairo.setupWidget.step.lockedTooltip')
                     }
                   >
-                    {ctaNode}
+                    <Box verticalAlign="middle">{ctaNode}</Box>
                   </Tooltip>
                 ) : (
                   ctaNode
-                );
-              })()}
+                )}
+              </Box>
+            )}
             {showCompletedCta && (
               <Box
                 verticalAlign="middle"

package/src/components/SetupWidget/SetupStepSecondaryCta.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Box, IconButton, Tooltip, ClickableCard } from '@wix/design-system';
+import { SetupWidgetStepSecondaryCta as SecondaryCta } from '@wix/bex-core';
+
+export interface SetupStepSecondaryCtaProps {
+  stepId: string;
+  cta: SecondaryCta;
+  disabled?: boolean;
+  onActivate: () => void;
+}
+
+/**
+ * A step's extra icon-only action, rendered before its CTA. Shared by leaf rows
+ * and aggregated group rows.
+ */
+export const SetupStepSecondaryCta = ({
+  stepId,
+  cta,
+  disabled,
+  onActivate,
+}: SetupStepSecondaryCtaProps) => {
+  const button = (
+    <IconButton
+      dataHook={`setup-step-secondary-cta-${stepId}`}
+      size="small"
+      // No `skin` — the Harmony theme's IconButton default (`dark`) has to win
+      // here, the same way the CTA next to it picks up its own default.
+      priority="tertiary"
+      disabled={disabled}
+      ariaLabel={cta.ariaLabel}
+      onClick={(event: React.MouseEvent) => {
+        event.stopPropagation();
+        onActivate();
+      }}
+    >
+      {cta.icon}
+    </IconButton>
+  );
+
+  // The Tooltip goes inside ClickableCard.Action so it clones the button
+  // itself — that's what carries its focus handlers and aria wiring.
+  return (
+    <ClickableCard.Action>
+      <Box verticalAlign="middle">
+        {cta.tooltip ? (
+          <Tooltip
+            dataHook={`setup-step-secondary-cta-tooltip-${stepId}`}
+            content={cta.tooltip}
+          >
+            {button}
+          </Tooltip>
+        ) : (
+          button
+        )}
+      </Box>
+    </ClickableCard.Action>
+  );
+};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget2854282825";
+var _namespace_ = "SetupWidget1177837430";
 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":"SetupWidget2854282825__root","row":"SetupWidget2854282825__row","completedCta":"SetupWidget2854282825__completedCta","card":"SetupWidget2854282825__card","stepIcon":"SetupWidget2854282825__stepIcon","chevron":"SetupWidget2854282825__chevron","chevronDisabled":"SetupWidget2854282825__chevronDisabled","inProgressLabel":"SetupWidget2854282825__inProgressLabel"};
+export var classes = {"root":"SetupWidget1177837430__root","row":"SetupWidget1177837430__row","completedCta":"SetupWidget1177837430__completedCta","card":"SetupWidget1177837430__card","stepIcon":"SetupWidget1177837430__stepIcon","chevron":"SetupWidget1177837430__chevron","chevronDisabled":"SetupWidget1177837430__chevronDisabled","inProgressLabel":"SetupWidget1177837430__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SetupWidget/SetupWidget.tsx

@@ -34,6 +34,12 @@ export interface SetupWidgetProps {
    * which targets the step's separate `completedCta`).
    */
   onCompletedStepClick?: (step: SetupWidgetStep) => void;
+  /**
+   * Fired when a step's `secondaryCta` icon button is clicked (desktop rows —
+   * leaf steps, group rows and their children). The button only renders while
+   * the step is still actionable, so this never fires for a completed step.
+   */
+  onStepSecondaryClick?: (step: SetupWidgetStep) => void;
   /**
    * Fired once when a step (or group) scrolls into view — for the consumer to
    * report view telemetry (BI/dealer). The widget itself stays
@@ -84,6 +90,7 @@ const _SetupWidget = ({
   renderStepContent,
   onStepClick,
   onCompletedStepClick,
+  onStepSecondaryClick,
   onStepView,
   onAllCompleteClick,
   renderError,
@@ -149,6 +156,9 @@ const _SetupWidget = ({
         isFocused={isFocused}
         expanded={expanded}
         onActivate={onActivate}
+        onSecondaryActivate={
+          onStepSecondaryClick ? () => onStepSecondaryClick(step) : undefined
+        }
         renderStepContent={renderStepContent}
         focusedBackground={!isHarmonyTheme}
       />
@@ -200,6 +210,11 @@ const _SetupWidget = ({
             expanded={state._expandedStepId === step.id}
             isPrimary={step.id === state._primaryStepId}
             onToggle={() => state._toggleStep(step.id)}
+            onSecondaryActivate={
+              onStepSecondaryClick
+                ? () => onStepSecondaryClick(step)
+                : undefined
+            }
             renderChild={(child) => renderLeaf(child, true)}
           />
         ) : (

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

@@ -3,6 +3,7 @@ import { baseUniDriverFactory } from '../../unidriver';
 import {
   ButtonUniDriver,
   ClickableCardUniDriver,
+  IconButtonUniDriver,
   TextButtonUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 
@@ -16,6 +17,12 @@ export default (base: UniDriver, body: UniDriver) => {
   const stepCta = (id: string) =>
     ButtonUniDriver(base.$(`[data-hook="setup-step-cta-${id}"]`), body);
 
+  const stepSecondaryCta = (id: string) =>
+    IconButtonUniDriver(
+      base.$(`[data-hook="setup-step-secondary-cta-${id}"]`),
+      body,
+    );
+
   const stepCard = (id: string) =>
     ClickableCardUniDriver(base.$(`[data-hook="setup-step-${id}"]`), body);
 
@@ -40,6 +47,17 @@ export default (base: UniDriver, body: UniDriver) => {
     /** Whether a step's CTA is rendered. */
     stepCtaExists: (id: string) =>
       base.$(`[data-hook="setup-step-cta-${id}"]`).exists(),
+    /** Click a step's secondary (icon) action. */
+    clickStepSecondaryCta: (id: string) => stepSecondaryCta(id).click(),
+    /** Whether a step's secondary (icon) action is rendered. */
+    stepSecondaryCtaExists: (id: string) =>
+      base.$(`[data-hook="setup-step-secondary-cta-${id}"]`).exists(),
+    /** Whether a step's secondary action is disabled. */
+    isStepSecondaryCtaDisabled: (id: string) =>
+      stepSecondaryCta(id).isButtonDisabled(),
+    /** Whether a tooltip wraps a step's secondary action. */
+    stepSecondaryCtaTooltipExists: (id: string) =>
+      base.$(`[data-hook="setup-step-secondary-cta-tooltip-${id}"]`).exists(),
     /** Whether a disabled step's permission tooltip wraps its CTA. */
     disabledTooltipExists: (id: string) =>
       base.$(`[data-hook="setup-step-disabled-tooltip-${id}"]`).exists(),

package/src/components/SetupWidget/index.ts

@@ -5,5 +5,6 @@ export type {
   SetupWidgetData,
   SetupWidgetStep,
   SetupWidgetStepStatus,
+  SetupWidgetStepSecondaryCta,
   SetupWidgetConfig,
 } from '@wix/bex-core';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard3534628905";
+var _namespace_ = "SkeletonCard3642517607";
 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":"SkeletonCard3534628905__root","headerLoading":"SkeletonCard3534628905__headerLoading"};
+export var classes = {"root":"SkeletonCard3642517607__root","headerLoading":"SkeletonCard3642517607__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_ = "SlidingModal1013344398";
+var _namespace_ = "SlidingModal2387354353";
 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":"SlidingModal1013344398__root"};
+export var classes = {"root":"SlidingModal2387354353__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader2398341878";
+var _namespace_ = "AddFieldColumnHeader1284582770";
 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":"AddFieldColumnHeader2398341878__root","title":"AddFieldColumnHeader2398341878__title","hoverBridge":"AddFieldColumnHeader2398341878__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader1284582770__root","title":"AddFieldColumnHeader1284582770__title","hoverBridge":"AddFieldColumnHeader1284582770__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter2276337463";
+var _namespace_ = "TabsFilter1785154060";
 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":"TabsFilter2276337463__root","title":"TabsFilter2276337463__title"};
+export var classes = {"root":"TabsFilter1785154060__root","title":"TabsFilter1785154060__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_ = "ManageTagsModal1689364407";
+var _namespace_ = "ManageTagsModal2332399519";
 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":"ManageTagsModal1689364407__root"};
+export var classes = {"root":"ManageTagsModal2332399519__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem188890920";
+var _namespace_ = "ToolbarItem296616052";
 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":"ToolbarItem188890920__root"};
+export var classes = {"root":"ToolbarItem296616052__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_ = "ToolbarItemBox706728447";
+var _namespace_ = "ToolbarItemBox3678864580";
 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":"ToolbarItemBox706728447__root"};
+export var classes = {"root":"ToolbarItemBox3678864580__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_ = "common3199046945";
+var _namespace_ = "common2049903824";
 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":"common3199046945__root","column":"common3199046945__column","fullHeight":"common3199046945__fullHeight"};
+export var classes = {"root":"common2049903824__root","column":"common2049903824__column","fullHeight":"common2049903824__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/useCreateWSRColumnBase.tsx

@@ -23,8 +23,15 @@ export function useCreateWSRColumnBase({
       index: number,
       length: number,
     ) => {
-      const { id, title, width, sortable, infoTooltipProps, fieldType } =
-        column;
+      const {
+        id,
+        title,
+        width,
+        sortable,
+        infoTooltipProps,
+        fieldType,
+        fieldTypeIcons,
+      } = column;
       const lastColumn = index === length - 1;
 
       const lastColumnStyleNoHorizontalScroll =
@@ -51,7 +58,9 @@ export function useCreateWSRColumnBase({
       const renderedTitle: ReactNode =
         title && showFieldTypeIcons ? (
           <Box gap="SP1" verticalAlign="middle" minWidth={0}>
-            <Box flexShrink={0}>{getFieldTypeIcon({ fieldType })}</Box>
+            <Box flexShrink={0}>
+              {getFieldTypeIcon({ fieldType, icons: fieldTypeIcons })}
+            </Box>
             {typeof title === 'string' ? (
               <Text size="small" ellipsis appendTo="window">
                 {title}

package/src/hooks/useEntityPage.ts

@@ -13,6 +13,7 @@ export type UseEntityPageParams<T, V extends FieldValues = FieldValues> = Pick<
   | 'form'
   | 'parentPageId'
   | 'parentPath'
+  | 'parentReferrer'
   | 'schemaSource'
 >;
 

package/src/index.ts

@@ -173,7 +173,10 @@ export {
   type FieldCapabilities,
   type FilterTypeConfig,
   type FieldActionsConfig,
+  type FieldModalConfig,
   type FieldTypeActionItem,
+  type FormTypeConfig,
+  type FormFieldComponentProps,
   type EditableCellConfig,
   type TableCellConfig,
   type CellViewProps,

package/src/model/tableColumn.ts

@@ -1,6 +1,6 @@
 import type { TableColumn as TableColumnWSR } from '@wix/design-system';
 import type { Field, KeyedItem, SortMode, SortOrder } from '@wix/bex-core';
-import { CSSProperties, ReactNode } from 'react';
+import { ComponentType, CSSProperties, ReactNode } from 'react';
 import type { FieldType } from '../utils/fieldTypePrefixIcons';
 import type { ValidationRule } from '../state/EditableTable/types';
 
@@ -29,6 +29,12 @@ type TableColumnBase<T = any> = Omit<
    * @external
    */
   fieldType?: FieldType;
+  /**
+   * Explicit prefix icons for the column (e.g. a custom field type's
+   * `display.icons`). When present, used instead of the `fieldType` mapping.
+   * @external
+   */
+  fieldTypeIcons?: { Small: ComponentType; Medium: ComponentType };
   /**
    * Whether the field contains personally identifiable information.
    * @external
@@ -236,6 +242,12 @@ export interface Column {
    * @external
    */
   fieldType?: FieldType;
+  /**
+   * Explicit prefix icons for the column (e.g. a custom field type's
+   * `display.icons`). When present, used instead of the `fieldType` mapping.
+   * @external
+   */
+  fieldTypeIcons?: { Small: ComponentType; Medium: ComponentType };
 }
 
 // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error

package/src/state/CollectionFieldsSourceState.ts

@@ -30,6 +30,7 @@ import {
 } from './CustomFields/CustomFieldsPanelState';
 import type { FieldActionHandlersConfig } from '../components/FieldActions';
 import type { CustomColumnsBaseProps } from '../components/CustomColumns/CustomColumns';
+import type { ReferenceFieldFilterProps } from '../components/ReferenceFieldFilter/ReferenceFieldFilter';
 
 /** A cell type plus the config its editor needs, for a field the default
  *  type→cell mapping can't fully resolve on its own. */
@@ -57,6 +58,10 @@ export interface FieldsSourceComponents {
   FieldManagementModals: ComponentType<{ source: CollectionFieldsSourceState }>;
   CustomColumns: ComponentType<CustomColumnsBaseProps>;
   CollectionToolbarFilters: ComponentType<CollectionToolbarFiltersProps>;
+  /** Filters a reference field by the referenced items. Omit it and reference
+   *  fields get no filter — which is what a source with no reference fields
+   *  wants, since the component pulls the referenced-item avatar in with it. */
+  ReferenceFieldFilter?: ComponentType<ReferenceFieldFilterProps>;
 }
 
 /**
@@ -206,12 +211,18 @@ export class CollectionFieldsSourceState {
       this.toolbar,
       this.fieldsSource,
       this.filterConfig,
+      this.components.ReferenceFieldFilter,
     );
   }
 
   /** Registers a filter state per filterable field on the collection query. */
   registerFilters() {
-    registerFieldFilters(this.toolbar, this.fieldsSource, this.filterConfig);
+    registerFieldFilters(
+      this.toolbar,
+      this.fieldsSource,
+      this.filterConfig,
+      this.components.ReferenceFieldFilter,
+    );
   }
 
   /**

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

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

package/src/state/EntityPage/EntityPageState.ts

@@ -83,6 +83,18 @@ interface EntityPageStateParamsBase<T, V extends FieldValues = FieldValues> {
    */
   parentPath?: string;
 
+  /**
+   * Referrer forwarded to the parent page on back, cancel and save, so callers
+   * can carry navigation context across the transition.
+   *
+   * Only used for parentPageId navigations; Patterns Router keeps its context
+   * in router state.
+   *
+   * Forwarded by the BM and Giza providers. Dropped by the dashboard provider,
+   * whose SDK Destination has no referrer field.
+   */
+  parentReferrer?: string;
+
   /**
    * An object representing the router state
    */
@@ -126,6 +138,7 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
   _schema: Schema | null = null;
   private readonly _parentPageId?: string;
   private readonly _parentPath?: string;
+  private readonly _parentReferrer?: string;
 
   actionsBarConfig?: EntityPageStateParams<T>['actionsBarConfig'];
 
@@ -178,6 +191,7 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
     this.transformEntityToCollectionItem =
       params.transformEntityToCollectionItem || ((anEntity: T) => anEntity);
     this._parentPath = params.parentPath;
+    this._parentReferrer = params.parentReferrer;
     this.schemaSource = params.schemaSource;
 
     this.container = params.container;
@@ -331,6 +345,9 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
     } else {
       this.container.navigateTo!({
         pageId: this._parentPageId!,
+        ...(this._parentReferrer !== undefined && {
+          referrer: this._parentReferrer,
+        }),
       });
     }
   }

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

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

package/src/state/TagsCollectionState.ts

@@ -84,9 +84,9 @@ export class TagsCollectionState<T, F extends FiltersMap> {
     this.components = {
       AssignButton: TagsAssignButton,
       ManageModal: React.lazy(() =>
-        import(
-          '../components/Tags/ManageTags/CollectionManageTagsModal'
-        ).then((m) => ({ default: m.CollectionManageTagsModal })),
+        import('../components/Tags/ManageTags/CollectionManageTagsModal').then(
+          (m) => ({ default: m.CollectionManageTagsModal }),
+        ),
       ),
       CollectionToolbarFilters,
     };