@uipath/apollo-wind 2.30.0 → 2.31.0

package/dist/components/forms/form-schema.d.ts

@@ -255,6 +255,14 @@ export interface FormStep {
     validation?: 'onChange' | 'onBlur' | 'onSubmit';
     canSkip?: boolean;
     conditions?: FieldCondition[];
+    /**
+     * Message shown (in the `tabs` step variant) when this step has no visible
+     * sections. A step that sets this stays in the tab bar even while empty and
+     * renders the message in place of its content — e.g. a "Parameters" tab that
+     * always shows, reading "No available parameters" for a node with no inputs.
+     * Steps without both sections and `emptyState` are hidden from the tab bar.
+     */
+    emptyState?: string;
 }
 export interface FormAction {
     id: string;

package/dist/components/forms/metadata-form.cjs

@@ -39,7 +39,7 @@ const external_field_renderer_cjs_namespaceObject = require("./field-renderer.cj
 const external_rules_engine_cjs_namespaceObject = require("./rules-engine.cjs");
 const external_validation_converter_cjs_namespaceObject = require("./validation-converter.cjs");
 const DEFAULT_PLUGINS = [];
-function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className, disabled = false, autoComplete, stepVariant = 'wizard' }) {
+function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className, disabled = false, autoComplete, stepVariant = 'wizard', sectionVariant = 'card', activeStepId, onActiveStepChange }) {
     const [currentStep, setCurrentStep] = (0, external_react_namespaceObject.useState)(0);
     const [customComponents, setCustomComponents] = (0, external_react_namespaceObject.useState)({});
     const [isInitialized, setIsInitialized] = (0, external_react_namespaceObject.useState)(false);
@@ -131,6 +131,9 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
                 context: context,
                 customComponents: customComponents,
                 disabled: disabled,
+                sectionVariant: sectionVariant,
+                activeStepId: activeStepId,
+                onActiveStepChange: onActiveStepChange,
                 onReset: ()=>reset()
             });
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MultiStepForm, {
@@ -139,14 +142,16 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
                 currentStep: currentStep,
                 setCurrentStep: setCurrentStep,
                 customComponents: customComponents,
-                disabled: disabled
+                disabled: disabled,
+                sectionVariant: sectionVariant
             });
         }
         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SinglePageForm, {
             schema: schema,
             context: context,
             customComponents: customComponents,
-            disabled: disabled
+            disabled: disabled,
+            sectionVariant: sectionVariant
         });
     };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_hook_form_namespaceObject.FormProvider, {
@@ -166,20 +171,21 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
         })
     });
 }
-function SinglePageForm({ schema, context, customComponents, disabled }) {
+function SinglePageForm({ schema, context, customComponents, disabled, sectionVariant }) {
     const sections = schema.sections || [];
     const visibleSections = sections.filter((section)=>!section.conditions || context.evaluateConditions(section.conditions));
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: "space-y-2",
+        className: 'plain' === sectionVariant ? void 0 : 'space-y-2',
         children: visibleSections.map((section)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormSection, {
                 section: section,
                 context: context,
                 customComponents: customComponents,
-                disabled: disabled
+                disabled: disabled,
+                sectionVariant: sectionVariant
             }, section.id))
     });
 }
-function MultiStepForm({ schema, context, currentStep, setCurrentStep, customComponents, disabled }) {
+function MultiStepForm({ schema, context, currentStep, setCurrentStep, customComponents, disabled, sectionVariant }) {
     const steps = schema.steps || [];
     const step = steps[currentStep];
     if (!step) return null;
@@ -217,12 +223,13 @@ function MultiStepForm({ schema, context, currentStep, setCurrentStep, customCom
                 ]
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                className: "space-y-2",
+                className: 'plain' === sectionVariant ? void 0 : 'space-y-2',
                 children: step.sections.map((section)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormSection, {
                         section: section,
                         context: context,
                         customComponents: customComponents,
-                        disabled: disabled
+                        disabled: disabled,
+                        sectionVariant: sectionVariant
                     }, section.id))
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
@@ -250,15 +257,39 @@ function MultiStepForm({ schema, context, currentStep, setCurrentStep, customCom
         ]
     });
 }
-function TabbedStepForm({ schema, context, customComponents, disabled, onReset }) {
+function TabbedStepForm({ schema, context, customComponents, disabled, sectionVariant, onReset, activeStepId, onActiveStepChange }) {
     const steps = schema.steps || [];
-    const visibleSteps = steps.filter((step)=>step.sections.length > 0 && (!step.conditions || context.evaluateConditions(step.conditions)));
-    const [activeTab, setActiveTab] = (0, external_react_namespaceObject.useState)('');
-    const currentTab = visibleSteps.some((step)=>step.id === activeTab) ? activeTab : visibleSteps[0]?.id ?? '';
+    const visibleSteps = steps.filter((step)=>{
+        if (step.conditions && !context.evaluateConditions(step.conditions)) return false;
+        const hasVisibleSection = step.sections.some((section)=>!section.conditions || context.evaluateConditions(section.conditions));
+        return hasVisibleSection || void 0 !== step.emptyState;
+    });
+    const formState = (0, external_react_hook_form_namespaceObject.useFormState)({
+        control: context.form.control
+    });
+    const errorCountByStepId = {};
+    for (const step of visibleSteps){
+        let count = 0;
+        for (const section of step.sections)if (!section.conditions || context.evaluateConditions(section.conditions)) for (const field of section.fields){
+            if (field.rules && !external_rules_engine_cjs_namespaceObject.RulesEngine.isFieldVisible(field.rules, context.values)) continue;
+            const fieldError = context.form.getFieldState(field.name, formState).error;
+            if (fieldError) count += Array.isArray(fieldError) ? fieldError.filter(Boolean).length : 1;
+        }
+        errorCountByStepId[step.id] = count;
+    }
+    const [internalTab, setInternalTab] = (0, external_react_namespaceObject.useState)('');
+    const controlled = void 0 !== activeStepId;
+    const requestedTab = controlled ? activeStepId : internalTab;
+    const currentTab = visibleSteps.some((step)=>step.id === requestedTab) ? requestedTab : visibleSteps[0]?.id ?? '';
+    const selectTab = (stepId)=>{
+        if (!controlled) setInternalTab(stepId);
+        onActiveStepChange?.(stepId);
+    };
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (activeTab !== currentTab) setActiveTab(currentTab);
+        if (!controlled && internalTab !== currentTab) setInternalTab(currentTab);
     }, [
-        activeTab,
+        controlled,
+        internalTab,
         currentTab
     ]);
     if (0 === visibleSteps.length) return null;
@@ -266,27 +297,53 @@ function TabbedStepForm({ schema, context, customComponents, disabled, onReset }
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tabs_cjs_namespaceObject.Tabs, {
                 value: currentTab,
-                onValueChange: setActiveTab,
-                className: "flex flex-col gap-4",
+                onValueChange: selectTab,
+                className: "flex min-h-0 flex-1 flex-col gap-1",
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.TabsList, {
-                        className: "h-auto justify-start gap-0.5 overflow-x-auto rounded-lg bg-transparent p-0.5 text-muted-foreground [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-                        children: visibleSteps.map((step)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.TabsTrigger, {
-                                value: step.id,
-                                className: "inline-flex h-6 shrink-0 items-center whitespace-nowrap rounded-md px-2.5 text-xs font-medium text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:bg-surface-overlay data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-                                children: step.title
-                            }, step.id))
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "shrink-0 pt-3 [padding-inline:var(--mf-content-inset,0px)]",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.ScrollableTabsList, {
+                            className: "h-auto justify-start gap-0.5 rounded-lg bg-transparent px-0 py-0.5 text-muted-foreground",
+                            scrollButtonClassName: "size-6 hover:bg-surface-overlay",
+                            children: visibleSteps.map((step)=>{
+                                const errorCount = errorCountByStepId[step.id] ?? 0;
+                                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tabs_cjs_namespaceObject.TabsTrigger, {
+                                    value: step.id,
+                                    className: "inline-flex h-6 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md px-2.5 text-xs font-medium text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:bg-surface-overlay data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+                                    children: [
+                                        step.title,
+                                        errorCount > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                            role: "img",
+                                            "aria-label": `${errorCount} ${1 === errorCount ? 'issue' : 'issues'}`,
+                                            title: `${errorCount} ${1 === errorCount ? 'issue' : 'issues'}`,
+                                            className: "grid h-4 min-w-4 place-items-center rounded-full bg-error px-1 text-[10px] font-semibold leading-none text-foreground-on-accent",
+                                            children: errorCount
+                                        })
+                                    ]
+                                }, step.id);
+                            })
+                        })
                     }),
-                    visibleSteps.map((step)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.TabsContent, {
+                    visibleSteps.map((step)=>{
+                        const stepSections = step.sections.filter((section)=>!section.conditions || context.evaluateConditions(section.conditions));
+                        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.TabsContent, {
                             value: step.id,
-                            className: "space-y-2",
-                            children: step.sections.filter((section)=>!section.conditions || context.evaluateConditions(section.conditions)).map((section)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormSection, {
-                                    section: section,
-                                    context: context,
-                                    customComponents: customComponents,
-                                    disabled: disabled
-                                }, section.id))
-                        }, step.id))
+                            className: "mt-0 min-h-0 flex-1 overflow-auto",
+                            children: 0 === stepSections.length && void 0 !== step.emptyState ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: "pt-4 text-sm text-muted-foreground [padding-inline:var(--mf-content-inset,0px)]",
+                                children: step.emptyState
+                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: 'plain' === sectionVariant ? 'pb-6 [padding-inline:var(--mf-content-inset,0px)]' : 'space-y-2 pb-6 pt-4 [padding-inline:var(--mf-content-inset,0px)]',
+                                children: stepSections.map((section)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormSection, {
+                                        section: section,
+                                        context: context,
+                                        customComponents: customComponents,
+                                        disabled: disabled,
+                                        sectionVariant: sectionVariant
+                                    }, section.id))
+                            })
+                        }, step.id);
+                    })
                 ]
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormActions, {
@@ -297,9 +354,13 @@ function TabbedStepForm({ schema, context, customComponents, disabled, onReset }
         ]
     });
 }
-function FormSection({ section, context, customComponents, disabled }) {
+function FormSection({ section, context, customComponents, disabled, sectionVariant = 'card' }) {
     const gridColumns = context.schema.layout?.columns || 1;
     const gap = context.schema.layout?.gap || 4;
+    const isPlain = 'plain' === sectionVariant;
+    const dividerClassName = 'border-t first:border-t-0';
+    const wrapperClassName = isPlain ? 'border-b-0' : 'border rounded-lg px-3';
+    const triggerClassName = isPlain ? 'justify-start gap-2 py-4 text-sm font-semibold hover:no-underline' : 'text-sm font-medium';
     const fieldsGrid = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: "grid",
         style: {
@@ -313,7 +374,10 @@ function FormSection({ section, context, customComponents, disabled }) {
                 disabled: disabled
             }, field.name))
     });
-    if (!section.title) return fieldsGrid;
+    if (!section.title) return isPlain ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: `${dividerClassName} pb-4 pt-4`,
+        children: fieldsGrid
+    }) : fieldsGrid;
     const innerContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         className: "flex flex-col gap-4",
         children: [
@@ -331,12 +395,13 @@ function FormSection({ section, context, customComponents, disabled }) {
         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(accordion_cjs_namespaceObject.Accordion, {
             type: "multiple",
             defaultValue: defaultValue,
+            className: isPlain ? dividerClassName : void 0,
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(accordion_cjs_namespaceObject.AccordionItem, {
                 value: section.id,
-                className: "border rounded-lg px-3",
+                className: wrapperClassName,
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(accordion_cjs_namespaceObject.AccordionTrigger, {
-                        className: "text-sm font-medium",
+                        className: triggerClassName,
                         children: section.title
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(accordion_cjs_namespaceObject.AccordionContent, {
@@ -347,12 +412,12 @@ function FormSection({ section, context, customComponents, disabled }) {
         });
     }
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: "border rounded-lg px-3",
+        className: isPlain ? dividerClassName : wrapperClassName,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "flex",
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                    className: "flex flex-1 items-center justify-between py-4 text-sm font-medium",
+                    className: isPlain ? 'flex flex-1 items-center justify-start gap-2 py-4 text-sm font-semibold' : 'flex flex-1 items-center justify-between py-4 text-sm font-medium',
                     children: section.title
                 })
             }),

package/dist/components/forms/metadata-form.d.ts

@@ -18,6 +18,30 @@ interface MetadataFormProps {
      * across every step. Ignored for single-page (`sections`) schemas.
      */
     stepVariant?: 'wizard' | 'tabs';
+    /**
+     * Visual treatment for each titled section. `'card'` (default) wraps every
+     * section in a bordered, rounded, horizontally-padded box. `'plain'` drops the
+     * border, rounding, and horizontal padding so sections read as flush headers
+     * over their content, separated by a full-width hairline divider between
+     * consecutive sections — used by hosts (e.g. the canvas properties panel) that
+     * already frame the form and want a borderless list. Applies to both
+     * collapsible (accordion) and non-collapsible sections across every layout
+     * (single-page, wizard, tabs).
+     */
+    sectionVariant?: 'card' | 'plain';
+    /**
+     * Controlled active step id for the `tabs` step variant. When provided the
+     * caller owns which tab is selected — persist it across remounts to keep the
+     * user on the same tab when switching between nodes. If the id isn't one of
+     * the currently visible steps, the form shows the first tab without mutating
+     * the caller's value. Omit for uncontrolled (internal) tab state.
+     */
+    activeStepId?: string;
+    /**
+     * Fires with the step id whenever the user selects a tab, in both controlled
+     * and uncontrolled mode. Pair it with `activeStepId` to persist the selection.
+     */
+    onActiveStepChange?: (stepId: string) => void;
 }
-export declare function MetadataForm({ schema, plugins, onSubmit, className, disabled, autoComplete, stepVariant, }: MetadataFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetadataForm({ schema, plugins, onSubmit, className, disabled, autoComplete, stepVariant, sectionVariant, activeStepId, onActiveStepChange, }: MetadataFormProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/forms/metadata-form.js

@@ -1,17 +1,17 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { FormProvider, useForm } from "react-hook-form";
+import { FormProvider, useForm, useFormState } from "react-hook-form";
 import { z } from "zod/v4";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../ui/accordion.js";
 import { Button } from "../ui/button.js";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
+import { ScrollableTabsList, Tabs, TabsContent, TabsTrigger } from "../ui/tabs.js";
 import { DataFetcher } from "./data-fetcher.js";
 import { FormFieldRenderer } from "./field-renderer.js";
 import { RulesEngine } from "./rules-engine.js";
 import { validationConfigToZod } from "./validation-converter.js";
 const DEFAULT_PLUGINS = [];
-function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className, disabled = false, autoComplete, stepVariant = 'wizard' }) {
+function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className, disabled = false, autoComplete, stepVariant = 'wizard', sectionVariant = 'card', activeStepId, onActiveStepChange }) {
     const [currentStep, setCurrentStep] = useState(0);
     const [customComponents, setCustomComponents] = useState({});
     const [isInitialized, setIsInitialized] = useState(false);
@@ -103,6 +103,9 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
                 context: context,
                 customComponents: customComponents,
                 disabled: disabled,
+                sectionVariant: sectionVariant,
+                activeStepId: activeStepId,
+                onActiveStepChange: onActiveStepChange,
                 onReset: ()=>reset()
             });
             return /*#__PURE__*/ jsx(MultiStepForm, {
@@ -111,14 +114,16 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
                 currentStep: currentStep,
                 setCurrentStep: setCurrentStep,
                 customComponents: customComponents,
-                disabled: disabled
+                disabled: disabled,
+                sectionVariant: sectionVariant
             });
         }
         return /*#__PURE__*/ jsx(SinglePageForm, {
             schema: schema,
             context: context,
             customComponents: customComponents,
-            disabled: disabled
+            disabled: disabled,
+            sectionVariant: sectionVariant
         });
     };
     return /*#__PURE__*/ jsx(FormProvider, {
@@ -138,20 +143,21 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
         })
     });
 }
-function SinglePageForm({ schema, context, customComponents, disabled }) {
+function SinglePageForm({ schema, context, customComponents, disabled, sectionVariant }) {
     const sections = schema.sections || [];
     const visibleSections = sections.filter((section)=>!section.conditions || context.evaluateConditions(section.conditions));
     return /*#__PURE__*/ jsx("div", {
-        className: "space-y-2",
+        className: 'plain' === sectionVariant ? void 0 : 'space-y-2',
         children: visibleSections.map((section)=>/*#__PURE__*/ jsx(FormSection, {
                 section: section,
                 context: context,
                 customComponents: customComponents,
-                disabled: disabled
+                disabled: disabled,
+                sectionVariant: sectionVariant
             }, section.id))
     });
 }
-function MultiStepForm({ schema, context, currentStep, setCurrentStep, customComponents, disabled }) {
+function MultiStepForm({ schema, context, currentStep, setCurrentStep, customComponents, disabled, sectionVariant }) {
     const steps = schema.steps || [];
     const step = steps[currentStep];
     if (!step) return null;
@@ -189,12 +195,13 @@ function MultiStepForm({ schema, context, currentStep, setCurrentStep, customCom
                 ]
             }),
             /*#__PURE__*/ jsx("div", {
-                className: "space-y-2",
+                className: 'plain' === sectionVariant ? void 0 : 'space-y-2',
                 children: step.sections.map((section)=>/*#__PURE__*/ jsx(FormSection, {
                         section: section,
                         context: context,
                         customComponents: customComponents,
-                        disabled: disabled
+                        disabled: disabled,
+                        sectionVariant: sectionVariant
                     }, section.id))
             }),
             /*#__PURE__*/ jsxs("div", {
@@ -222,15 +229,39 @@ function MultiStepForm({ schema, context, currentStep, setCurrentStep, customCom
         ]
     });
 }
-function TabbedStepForm({ schema, context, customComponents, disabled, onReset }) {
+function TabbedStepForm({ schema, context, customComponents, disabled, sectionVariant, onReset, activeStepId, onActiveStepChange }) {
     const steps = schema.steps || [];
-    const visibleSteps = steps.filter((step)=>step.sections.length > 0 && (!step.conditions || context.evaluateConditions(step.conditions)));
-    const [activeTab, setActiveTab] = useState('');
-    const currentTab = visibleSteps.some((step)=>step.id === activeTab) ? activeTab : visibleSteps[0]?.id ?? '';
+    const visibleSteps = steps.filter((step)=>{
+        if (step.conditions && !context.evaluateConditions(step.conditions)) return false;
+        const hasVisibleSection = step.sections.some((section)=>!section.conditions || context.evaluateConditions(section.conditions));
+        return hasVisibleSection || void 0 !== step.emptyState;
+    });
+    const formState = useFormState({
+        control: context.form.control
+    });
+    const errorCountByStepId = {};
+    for (const step of visibleSteps){
+        let count = 0;
+        for (const section of step.sections)if (!section.conditions || context.evaluateConditions(section.conditions)) for (const field of section.fields){
+            if (field.rules && !RulesEngine.isFieldVisible(field.rules, context.values)) continue;
+            const fieldError = context.form.getFieldState(field.name, formState).error;
+            if (fieldError) count += Array.isArray(fieldError) ? fieldError.filter(Boolean).length : 1;
+        }
+        errorCountByStepId[step.id] = count;
+    }
+    const [internalTab, setInternalTab] = useState('');
+    const controlled = void 0 !== activeStepId;
+    const requestedTab = controlled ? activeStepId : internalTab;
+    const currentTab = visibleSteps.some((step)=>step.id === requestedTab) ? requestedTab : visibleSteps[0]?.id ?? '';
+    const selectTab = (stepId)=>{
+        if (!controlled) setInternalTab(stepId);
+        onActiveStepChange?.(stepId);
+    };
     useEffect(()=>{
-        if (activeTab !== currentTab) setActiveTab(currentTab);
+        if (!controlled && internalTab !== currentTab) setInternalTab(currentTab);
     }, [
-        activeTab,
+        controlled,
+        internalTab,
         currentTab
     ]);
     if (0 === visibleSteps.length) return null;
@@ -238,27 +269,53 @@ function TabbedStepForm({ schema, context, customComponents, disabled, onReset }
         children: [
             /*#__PURE__*/ jsxs(Tabs, {
                 value: currentTab,
-                onValueChange: setActiveTab,
-                className: "flex flex-col gap-4",
+                onValueChange: selectTab,
+                className: "flex min-h-0 flex-1 flex-col gap-1",
                 children: [
-                    /*#__PURE__*/ jsx(TabsList, {
-                        className: "h-auto justify-start gap-0.5 overflow-x-auto rounded-lg bg-transparent p-0.5 text-muted-foreground [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-                        children: visibleSteps.map((step)=>/*#__PURE__*/ jsx(TabsTrigger, {
-                                value: step.id,
-                                className: "inline-flex h-6 shrink-0 items-center whitespace-nowrap rounded-md px-2.5 text-xs font-medium text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:bg-surface-overlay data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-                                children: step.title
-                            }, step.id))
+                    /*#__PURE__*/ jsx("div", {
+                        className: "shrink-0 pt-3 [padding-inline:var(--mf-content-inset,0px)]",
+                        children: /*#__PURE__*/ jsx(ScrollableTabsList, {
+                            className: "h-auto justify-start gap-0.5 rounded-lg bg-transparent px-0 py-0.5 text-muted-foreground",
+                            scrollButtonClassName: "size-6 hover:bg-surface-overlay",
+                            children: visibleSteps.map((step)=>{
+                                const errorCount = errorCountByStepId[step.id] ?? 0;
+                                return /*#__PURE__*/ jsxs(TabsTrigger, {
+                                    value: step.id,
+                                    className: "inline-flex h-6 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md px-2.5 text-xs font-medium text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:bg-surface-overlay data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+                                    children: [
+                                        step.title,
+                                        errorCount > 0 && /*#__PURE__*/ jsx("span", {
+                                            role: "img",
+                                            "aria-label": `${errorCount} ${1 === errorCount ? 'issue' : 'issues'}`,
+                                            title: `${errorCount} ${1 === errorCount ? 'issue' : 'issues'}`,
+                                            className: "grid h-4 min-w-4 place-items-center rounded-full bg-error px-1 text-[10px] font-semibold leading-none text-foreground-on-accent",
+                                            children: errorCount
+                                        })
+                                    ]
+                                }, step.id);
+                            })
+                        })
                     }),
-                    visibleSteps.map((step)=>/*#__PURE__*/ jsx(TabsContent, {
+                    visibleSteps.map((step)=>{
+                        const stepSections = step.sections.filter((section)=>!section.conditions || context.evaluateConditions(section.conditions));
+                        return /*#__PURE__*/ jsx(TabsContent, {
                             value: step.id,
-                            className: "space-y-2",
-                            children: step.sections.filter((section)=>!section.conditions || context.evaluateConditions(section.conditions)).map((section)=>/*#__PURE__*/ jsx(FormSection, {
-                                    section: section,
-                                    context: context,
-                                    customComponents: customComponents,
-                                    disabled: disabled
-                                }, section.id))
-                        }, step.id))
+                            className: "mt-0 min-h-0 flex-1 overflow-auto",
+                            children: 0 === stepSections.length && void 0 !== step.emptyState ? /*#__PURE__*/ jsx("div", {
+                                className: "pt-4 text-sm text-muted-foreground [padding-inline:var(--mf-content-inset,0px)]",
+                                children: step.emptyState
+                            }) : /*#__PURE__*/ jsx("div", {
+                                className: 'plain' === sectionVariant ? 'pb-6 [padding-inline:var(--mf-content-inset,0px)]' : 'space-y-2 pb-6 pt-4 [padding-inline:var(--mf-content-inset,0px)]',
+                                children: stepSections.map((section)=>/*#__PURE__*/ jsx(FormSection, {
+                                        section: section,
+                                        context: context,
+                                        customComponents: customComponents,
+                                        disabled: disabled,
+                                        sectionVariant: sectionVariant
+                                    }, section.id))
+                            })
+                        }, step.id);
+                    })
                 ]
             }),
             /*#__PURE__*/ jsx(FormActions, {
@@ -269,9 +326,13 @@ function TabbedStepForm({ schema, context, customComponents, disabled, onReset }
         ]
     });
 }
-function FormSection({ section, context, customComponents, disabled }) {
+function FormSection({ section, context, customComponents, disabled, sectionVariant = 'card' }) {
     const gridColumns = context.schema.layout?.columns || 1;
     const gap = context.schema.layout?.gap || 4;
+    const isPlain = 'plain' === sectionVariant;
+    const dividerClassName = 'border-t first:border-t-0';
+    const wrapperClassName = isPlain ? 'border-b-0' : 'border rounded-lg px-3';
+    const triggerClassName = isPlain ? 'justify-start gap-2 py-4 text-sm font-semibold hover:no-underline' : 'text-sm font-medium';
     const fieldsGrid = /*#__PURE__*/ jsx("div", {
         className: "grid",
         style: {
@@ -285,7 +346,10 @@ function FormSection({ section, context, customComponents, disabled }) {
                 disabled: disabled
             }, field.name))
     });
-    if (!section.title) return fieldsGrid;
+    if (!section.title) return isPlain ? /*#__PURE__*/ jsx("div", {
+        className: `${dividerClassName} pb-4 pt-4`,
+        children: fieldsGrid
+    }) : fieldsGrid;
     const innerContent = /*#__PURE__*/ jsxs("div", {
         className: "flex flex-col gap-4",
         children: [
@@ -303,12 +367,13 @@ function FormSection({ section, context, customComponents, disabled }) {
         return /*#__PURE__*/ jsx(Accordion, {
             type: "multiple",
             defaultValue: defaultValue,
+            className: isPlain ? dividerClassName : void 0,
             children: /*#__PURE__*/ jsxs(AccordionItem, {
                 value: section.id,
-                className: "border rounded-lg px-3",
+                className: wrapperClassName,
                 children: [
                     /*#__PURE__*/ jsx(AccordionTrigger, {
-                        className: "text-sm font-medium",
+                        className: triggerClassName,
                         children: section.title
                     }),
                     /*#__PURE__*/ jsx(AccordionContent, {
@@ -319,12 +384,12 @@ function FormSection({ section, context, customComponents, disabled }) {
         });
     }
     return /*#__PURE__*/ jsxs("div", {
-        className: "border rounded-lg px-3",
+        className: isPlain ? dividerClassName : wrapperClassName,
         children: [
             /*#__PURE__*/ jsx("div", {
                 className: "flex",
                 children: /*#__PURE__*/ jsx("div", {
-                    className: "flex flex-1 items-center justify-between py-4 text-sm font-medium",
+                    className: isPlain ? 'flex flex-1 items-center justify-start gap-2 py-4 text-sm font-semibold' : 'flex flex-1 items-center justify-between py-4 text-sm font-medium',
                     children: section.title
                 })
             }),

package/dist/components/ui/index.cjs

@@ -30,13 +30,13 @@ var __webpack_modules__ = {
     "@/components/ui/calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
-    "@/components/ui/card" (module) {
+    "./card" (module) {
         module.exports = require("./card.cjs");
     },
     "@/components/ui/checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
-    "@/components/ui/collapsible" (module) {
+    "./collapsible" (module) {
         module.exports = require("./collapsible.cjs");
     },
     "./combobox" (module) {
@@ -45,7 +45,7 @@ var __webpack_modules__ = {
     "@/components/ui/command" (module) {
         module.exports = require("./command.cjs");
     },
-    "@/components/ui/context-menu" (module) {
+    "./context-menu" (module) {
         module.exports = require("./context-menu.cjs");
     },
     "./data-table" (module) {
@@ -60,7 +60,7 @@ var __webpack_modules__ = {
     "./dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
-    "@/components/ui/dropdown-menu" (module) {
+    "./dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
     "@/components/ui/editable-cell" (module) {
@@ -72,7 +72,7 @@ var __webpack_modules__ = {
     "./file-upload" (module) {
         module.exports = require("./file-upload.cjs");
     },
-    "@/components/ui/hover-card" (module) {
+    "./hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
     "./input-group" (module) {
@@ -81,7 +81,7 @@ var __webpack_modules__ = {
     "@/components/ui/input" (module) {
         module.exports = require("./input.cjs");
     },
-    "@/components/ui/label" (module) {
+    "./label" (module) {
         module.exports = require("./label.cjs");
     },
     "./layout" (module) {
@@ -144,7 +144,7 @@ var __webpack_modules__ = {
     "./switch" (module) {
         module.exports = require("./switch.cjs");
     },
-    "@/components/ui/table" (module) {
+    "./table" (module) {
         module.exports = require("./table.cjs");
     },
     "./tabs" (module) {
@@ -282,7 +282,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_calendar__rspack_import_9[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _card__rspack_import_10 = __webpack_require__("@/components/ui/card");
+    var _card__rspack_import_10 = __webpack_require__("./card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _card__rspack_import_10)if ([
         "TreeView",
@@ -296,7 +296,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_checkbox__rspack_import_11[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _collapsible__rspack_import_12 = __webpack_require__("@/components/ui/collapsible");
+    var _collapsible__rspack_import_12 = __webpack_require__("./collapsible");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _collapsible__rspack_import_12)if ([
         "TreeView",
@@ -317,7 +317,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_command__rspack_import_14[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _context_menu__rspack_import_15 = __webpack_require__("@/components/ui/context-menu");
+    var _context_menu__rspack_import_15 = __webpack_require__("./context-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _context_menu__rspack_import_15)if ([
         "TreeView",
@@ -352,7 +352,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dialog__rspack_import_19[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dropdown_menu__rspack_import_20 = __webpack_require__("@/components/ui/dropdown-menu");
+    var _dropdown_menu__rspack_import_20 = __webpack_require__("./dropdown-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dropdown_menu__rspack_import_20)if ([
         "TreeView",
@@ -380,7 +380,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_file_upload__rspack_import_23[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _hover_card__rspack_import_24 = __webpack_require__("@/components/ui/hover-card");
+    var _hover_card__rspack_import_24 = __webpack_require__("./hover-card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _hover_card__rspack_import_24)if ([
         "TreeView",
@@ -401,7 +401,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input_group__rspack_import_26[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _label__rspack_import_27 = __webpack_require__("@/components/ui/label");
+    var _label__rspack_import_27 = __webpack_require__("./label");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _label__rspack_import_27)if ([
         "TreeView",
@@ -548,7 +548,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_47[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _table__rspack_import_48 = __webpack_require__("@/components/ui/table");
+    var _table__rspack_import_48 = __webpack_require__("./table");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _table__rspack_import_48)if ([
         "TreeView",

package/dist/styles.css

@@ -793,6 +793,9 @@
   .ms-1 {
     margin-inline-start: calc(var(--spacing) * 1);
   }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -948,6 +951,10 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
@@ -1390,6 +1397,9 @@
   .w-\[360px\] {
     width: 360px;
   }
+  .w-\[380px\] {
+    width: 380px;
+  }
   .w-\[400px\] {
     width: 400px;
   }
@@ -1525,6 +1535,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-4 {
+    min-width: calc(var(--spacing) * 4);
+  }
   .min-w-5 {
     min-width: calc(var(--spacing) * 5);
   }
@@ -2595,6 +2608,9 @@
   .bg-emerald-950 {
     background-color: var(--color-emerald-950);
   }
+  .bg-error {
+    background-color: var(--error);
+  }
   .bg-error-background {
     background-color: var(--error-background);
   }
@@ -3428,9 +3444,15 @@
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
+  .p-10 {
+    padding: calc(var(--spacing) * 10);
+  }
   .p-px {
     padding: 1px;
   }
+  .\[padding-inline\:var\(--mf-content-inset\,0px\)\] {
+    padding-inline: var(--mf-content-inset,0px);
+  }
   .px-0 {
     padding-inline: calc(var(--spacing) * 0);
   }
@@ -4593,6 +4615,12 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .first\:border-t-0 {
+    &:first-child {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 0px;
+    }
+  }
   .first\:bg-surface-hover {
     &:first-child {
       background-color: var(--surface-hover);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.30.0",
+  "version": "2.31.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",