@wix/patterns 1.439.0 → 1.442.0

package/src/components/EntityPageFields/EntityPageField.tsx

@@ -1,8 +1,13 @@
 import React, { Suspense } from 'react';
 import { Box, Text } from '@wix/design-system';
-import type { Field, PatternsFieldType } from '@wix/bex-core';
+import type {
+  Field,
+  FieldTypeDefinition,
+  PatternsFieldType,
+} from '@wix/bex-core';
 import type { Control } from '@wix/bex-core/form';
 import { EntityPageReferenceField } from './EntityPageReferenceField';
+import { EntityPageCustomField } from './EntityPageCustomField';
 import {
   FormShortText,
   FormLongText,
@@ -65,11 +70,14 @@ const FormRichContent = lazyField(async () => ({
     .FormRichContent,
 }));
 
-// REFERENCE / MULTI_REFERENCE are not here — they need referenced-collection
-// data, so EntityPageField routes them through EntityPageReferenceField instead
-// of this dispatcher.
-const FIELD_INPUTS: Partial<
-  Record<PatternsFieldType, React.ComponentType<any>>
+// Every type renders on the entity page: REFERENCE / MULTI_REFERENCE go
+// through EntityPageReferenceField (they need referenced-collection data),
+// CUSTOM through its definition's form slot, and everything else through this
+// map. The exhaustive Record makes adding a PatternsFieldType without a form
+// renderer a compile error.
+const FIELD_INPUTS: Record<
+  Exclude<PatternsFieldType, 'REFERENCE' | 'MULTI_REFERENCE' | 'CUSTOM'>,
+  React.ComponentType<any>
 > = {
   SHORT_TEXT: FormShortText,
   UNKNOWN: FormShortText,
@@ -100,30 +108,42 @@ export interface EntityPageFieldProps {
   formControl: Control<any>;
   /** The entity, used by each renderer to seed its form default value. */
   data: Record<string, unknown>;
+  /** The field type definition a CUSTOM field resolved on its source. */
+  definition?: FieldTypeDefinition;
 }
 
-// Each renderer owns its own react-hook-form wiring (useController keyed on
-// field.id), so this only needs to pick the renderer and pass the field.
+// Each built-in renderer owns its own react-hook-form wiring (useController
+// keyed on field.id), so this only needs to pick the renderer and pass the
+// field. A CUSTOM field's form component gets that wiring done for it by
+// EntityPageCustomField instead.
 export function EntityPageField({
   field,
   formControl,
   data,
+  definition,
 }: EntityPageFieldProps) {
   // Reference fields need referenced-collection data, so they go through a
   // wrapper (resolves the referenced source, fetches items) rather than the
   // uniform dispatcher below.
   const isReference =
     field.type === 'REFERENCE' || field.type === 'MULTI_REFERENCE';
-  const FieldInput = FIELD_INPUTS[field.type];
+  const customForm = field.type === 'CUSTOM' ? definition?.form : undefined;
+  const FieldInput = FIELD_INPUTS[field.type as keyof typeof FIELD_INPUTS] as
+    | React.ComponentType<any>
+    | undefined;
 
-  if (!isReference && !FieldInput) {
-    // Every PatternsFieldType now maps to a renderer (UNKNOWN falls back to
-    // text), so an unmapped type means the field carries a type outside the
-    // contract. Skip it, but warn — otherwise it vanishes with no trace.
-    // eslint-disable-next-line no-console
-    console.warn(
-      `[EntityPageField] no renderer for field "${field.id}" of type "${field.type}"; skipping.`,
-    );
+  if (!isReference && !customForm && !FieldInput) {
+    // A CUSTOM field on an entity page needs its type's `form` config — throw
+    // in development so the gap is impossible to miss. Production degrades by
+    // skipping the field instead of crashing the page. Types outside the
+    // contract have nothing to render either way.
+    if (field.type === 'CUSTOM' && process.env.NODE_ENV !== 'production') {
+      throw new Error(
+        definition
+          ? `The custom field type "${field.customType}" has no \`form\` config, but its field "${field.id}" renders on an entity page. Add \`form: { Component }\` to the type definition.`
+          : `Field "${field.id}" references the custom type "${field.customType}", but the source's fieldTypes has no matching definition.`,
+      );
+    }
     return null;
   }
 
@@ -134,6 +154,14 @@ export function EntityPageField({
       formControl={formControl}
       data={data}
     />
+  ) : customForm ? (
+    <EntityPageCustomField
+      field={field}
+      formControl={formControl}
+      data={data}
+      definition={definition!}
+      dataHook={`entity-page-field-${field.id}`}
+    />
   ) : (
     <ScalarInput
       field={field}

package/src/components/EntityPageFields/EntityPageFields.tsx

@@ -6,6 +6,7 @@ import {
   SkeletonRectangle,
 } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
+import { resolveFieldTypeDefinition } from '@wix/bex-core';
 import { usePatternsCmsFieldsContainer } from '@wix/patterns-fields/providers';
 import { useEntityPageContext } from '../../providers';
 import { resolveEntityPageFields } from '../../state/EntityPage/resolveEntityPageFields';
@@ -59,6 +60,10 @@ function _EntityPageFields({
           field={field}
           formControl={state.form.control}
           data={data}
+          definition={resolveFieldTypeDefinition(
+            { fieldTypes: state.schemaSource?.fieldTypes },
+            field,
+          )}
         />
       ))}
     </Box>

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

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

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

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

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload1306831329";
+var _namespace_ = "ImportStepUpload4181201003";
 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":"ImportStepUpload1306831329__root","fileUpload":"ImportStepUpload1306831329__fileUpload"};
+export var classes = {"root":"ImportStepUpload4181201003__root","fileUpload":"ImportStepUpload4181201003__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow3346218011";
+var _namespace_ = "LoadingRow2975330959";
 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":"LoadingRow3346218011__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3346218011__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2975330959__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2975330959__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_ = "MaxHeightText145854489";
+var _namespace_ = "MaxHeightText3103739714";
 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":"MaxHeightText145854489__root"};
+export var classes = {"root":"MaxHeightText3103739714__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_ = "MaxLines1975309134";
+var _namespace_ = "MaxLines1917305076";
 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":"MaxLines1975309134__root"};
+export var classes = {"root":"MaxLines1917305076__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar2856989577";
+var _namespace_ = "MultiBulkActionToolbar3415487927";
 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":"MultiBulkActionToolbar2856989577__root","leftGroupWrapper":"MultiBulkActionToolbar2856989577__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2856989577__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2856989577__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar3415487927__root","leftGroupWrapper":"MultiBulkActionToolbar3415487927__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3415487927__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3415487927__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow2801403390";
+var _namespace_ = "NestedTablePlaceholderStatesRow2383629866";
 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":"NestedTablePlaceholderStatesRow2801403390__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow2383629866__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_ = "NestedTableRow2574809310";
+var _namespace_ = "NestedTableRow1312109028";
 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":"NestedTableRow2574809310__root","firstLevel":"NestedTableRow2574809310__firstLevel","placeholder":"NestedTableRow2574809310__placeholder","parentHovered":"NestedTableRow2574809310__parentHovered"};
+export var classes = {"root":"NestedTableRow1312109028__root","firstLevel":"NestedTableRow1312109028__firstLevel","placeholder":"NestedTableRow1312109028__placeholder","parentHovered":"NestedTableRow1312109028__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect1063327707";
+var _namespace_ = "MultipleDragOverlayEffect2764013255";
 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":"MultipleDragOverlayEffect1063327707__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2764013255__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_ = "NestedTableDragAndDropRow3382867854";
+var _namespace_ = "NestedTableDragAndDropRow2355894759";
 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":"NestedTableDragAndDropRow3382867854__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2355894759__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_ = "PickerContent1791181332";
+var _namespace_ = "PickerContent3287791488";
 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":"PickerContent1791181332__root"};
+export var classes = {"root":"PickerContent3287791488__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_ = "PickerContentAdditionalStep3542605584";
+var _namespace_ = "PickerContentAdditionalStep3630625947";
 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":"PickerContentAdditionalStep3542605584__root","titles":"PickerContentAdditionalStep3542605584__titles","suffix":"PickerContentAdditionalStep3542605584__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3630625947__root","titles":"PickerContentAdditionalStep3630625947__titles","suffix":"PickerContentAdditionalStep3630625947__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/SchemaSource/schemaFieldManagement.ts

@@ -16,13 +16,20 @@ import { standardFieldTypeLabels } from './standardFieldTypeLabels';
 export const schemaFieldManagement = (
   sourceState: SourceState<any>,
 ): FieldManagement => {
-  const draftToField = (draft: FieldDraft): NonReferenceField => ({
-    id: draft.key,
-    displayName: draft.name,
-    type: (draft.type ?? 'SHORT_TEXT') as NonReferenceField['type'],
-    isPii: draft.containsPii,
-    validation: { required: false },
-  });
+  const draftToField = (draft: FieldDraft): NonReferenceField => {
+    const definition = sourceState.source.fieldTypes?.find(
+      (def) => def.type === draft.type,
+    );
+    return {
+      id: draft.key,
+      displayName: draft.name,
+      ...(definition
+        ? { type: 'CUSTOM' as const, customType: definition.type }
+        : { type: (draft.type ?? 'SHORT_TEXT') as NonReferenceField['type'] }),
+      isPii: draft.containsPii,
+      validation: { required: false },
+    };
+  };
 
   return {
     get canAddFields() {
@@ -66,29 +73,49 @@ export const schemaFieldManagement = (
           addTitle: t('cairo.customFields.addCustomField.modal.title'),
           editTitle: t('cairo.customFields.editCustomField.modal.title'),
         },
-        types: fieldModal.types.map((ft) => {
-          // The standard pair applies only when the source didn't custom-label
-          // the entry — a custom label with the standard placeholder would show
-          // contradictory copy (the modal falls back to its generic placeholder).
-          const standard =
-            ft.label == null
-              ? standardFieldTypeLabels[ft.patternsType]
-              : undefined;
-          return {
-            id: ft.patternsType,
-            label:
-              ft.label ?? (standard ? t(standard.labelKey) : ft.patternsType),
-            namePlaceholder:
-              ft.namePlaceholder ??
-              (standard ? t(standard.namePlaceholderKey) : undefined),
-            subtitle: ft.subtitle,
-            group: ft.group,
-            supportsPii: ft.supportsPii,
-            piiWarning: ft.piiWarning,
-            settingsSection: ft.settingsSection,
-            patternsType: ft.patternsType,
-          };
-        }),
+        types: [
+          ...fieldModal.types.map((ft) => {
+            // The standard pair applies only when the source didn't custom-label
+            // the entry — a custom label with the standard placeholder would show
+            // contradictory copy (the modal falls back to its generic placeholder).
+            const standard =
+              ft.label == null
+                ? standardFieldTypeLabels[ft.patternsType]
+                : undefined;
+            return {
+              id: ft.patternsType,
+              label:
+                ft.label ?? (standard ? t(standard.labelKey) : ft.patternsType),
+              namePlaceholder:
+                ft.namePlaceholder ??
+                (standard ? t(standard.namePlaceholderKey) : undefined),
+              subtitle: ft.subtitle,
+              group: ft.group,
+              supportsPii: ft.supportsPii,
+              piiWarning: ft.piiWarning,
+              settingsSection: ft.settingsSection,
+              patternsType: ft.patternsType,
+            };
+          }),
+          ...(sourceState.source.fieldTypes ?? []).flatMap((def) =>
+            def.fieldModal?.creatable
+              ? [
+                  {
+                    id: def.type,
+                    label: def.display.label,
+                    namePlaceholder: def.fieldModal.namePlaceholder,
+                    subtitle: def.fieldModal.subtitle,
+                    group: def.fieldModal.group,
+                    supportsPii: def.fieldModal.supportsPii,
+                    piiWarning: def.fieldModal.piiWarning,
+                    settingsSection: def.fieldModal.settingsSection,
+                    patternsType: 'CUSTOM' as const,
+                    icons: def.display.icons,
+                  },
+                ]
+              : [],
+          ),
+        ],
         permissions: sourceState.source.fieldPermissions,
         supportsPii: sourceState.source.supportsPii,
       };
@@ -124,7 +151,8 @@ export const schemaFieldManagement = (
       return {
         key: field.id,
         name: field.displayName,
-        type: field.type,
+        // A CUSTOM field's picker option is keyed by its customType.
+        type: field.type === 'CUSTOM' ? field.customType : field.type,
         readApps: false,
         readUsers: false,
         writeApps: false,

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

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

package/src/components/SetupWidget/SetupStepGroup.tsx

@@ -4,6 +4,7 @@ import { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common/lazy';
 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 SetupStepGroupProps {
@@ -14,6 +15,8 @@ export interface SetupStepGroupProps {
   /** The recommended/focused row. */
   isPrimary: boolean;
   onToggle: () => void;
+  /** Fires when the group's `secondaryCta` icon button is clicked. */
+  onSecondaryActivate?: () => void;
   /** Renders a single child step (the parent supplies the row/card). */
   renderChild: (child: SetupWidgetStep) => React.ReactNode;
 }
@@ -31,6 +34,7 @@ export const SetupStepGroup = ({
   expanded,
   isPrimary,
   onToggle,
+  onSecondaryActivate,
   renderChild,
 }: SetupStepGroupProps) => {
   const { translate: t } = useWixPatternsContainer();
@@ -43,6 +47,17 @@ export const SetupStepGroup = ({
   const isFocused = expanded || isPrimary;
   const Chevron = expanded ? ChevronUp : ChevronDown;
 
+  // Mobile cards have no per-step action area, so the group's secondary action
+  // is desktop-only — and a finished group drops it, like a completed leaf does.
+  const secondaryCtaNode =
+    step.secondaryCta && onSecondaryActivate && !isMobile && !allCompleted ? (
+      <SetupStepSecondaryCta
+        stepId={step.id}
+        cta={step.secondaryCta}
+        onActivate={onSecondaryActivate}
+      />
+    ) : null;
+
   const headerContent = (
     <Box
       align="space-between"
@@ -97,6 +112,7 @@ export const SetupStepGroup = ({
         </Box>
       </Box>
       <Box verticalAlign="middle" gap="SP1">
+        {secondaryCtaNode}
         <Tag
           id={`setup-step-counter-${step.id}`}
           skin="neutral"