@uipath/apollo-wind 2.67.0 → 2.68.0

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

@@ -44,7 +44,7 @@ const external_react_hook_form_namespaceObject = require("react-hook-form");
 const v4_namespaceObject = require("zod/v4");
 const accordion_cjs_namespaceObject = require("../ui/accordion.cjs");
 const button_cjs_namespaceObject = require("../ui/button.cjs");
-const tabs_cjs_namespaceObject = require("../ui/tabs.cjs");
+const panel_tabs_cjs_namespaceObject = require("../ui/panel-tabs.cjs");
 const tooltip_cjs_namespaceObject = require("../ui/tooltip.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const external_data_fetcher_cjs_namespaceObject = require("./data-fetcher.cjs");
@@ -470,53 +470,48 @@ function TabbedStepForm({ schema, context, customComponents, disabled, sectionVa
     if (0 === visibleSteps.length) return null;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tabs_cjs_namespaceObject.Tabs, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(panel_tabs_cjs_namespaceObject.PanelTabs, {
                 value: currentTab,
                 onValueChange: selectTab,
-                className: "flex min-h-0 flex-1 flex-col gap-1",
                 children: [
-                    /*#__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-error-background",
-                                            children: errorCount
-                                        })
-                                    ]
-                                }, step.id);
-                            })
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(panel_tabs_cjs_namespaceObject.PanelTabsList, {
+                        children: visibleSteps.map((step)=>{
+                            const errorCount = errorCountByStepId[step.id] ?? 0;
+                            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(panel_tabs_cjs_namespaceObject.PanelTabsTrigger, {
+                                value: step.id,
+                                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-error-background",
+                                        children: errorCount
+                                    })
+                                ]
+                            }, step.id);
                         })
                     }),
                     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, {
+                        const showEmptyState = 0 === stepSections.length && void 0 !== step.emptyState;
+                        const selfPadded = !showEmptyState && 'plain' === sectionVariant;
+                        const sections = stepSections.map((section, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(metadata_form_FormSection, {
+                                section: section,
+                                context: context,
+                                customComponents: customComponents,
+                                disabled: disabled,
+                                sectionVariant: sectionVariant,
+                                afterTabs: 0 === index
+                            }, section.id));
+                        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(panel_tabs_cjs_namespaceObject.PanelTabsContent, {
                             value: 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)(metadata_form_FormSection, {
-                                        section: section,
-                                        context: context,
-                                        customComponents: customComponents,
-                                        disabled: disabled,
-                                        sectionVariant: sectionVariant
-                                    }, section.id))
-                            })
+                            padded: !selfPadded,
+                            innerClassName: showEmptyState ? 'text-sm text-muted-foreground' : 'space-y-2',
+                            children: showEmptyState ? step.emptyState : selfPadded ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: "pb-6 [padding-inline:var(--mf-content-inset,0px)]",
+                                children: sections
+                            }) : sections
                         }, step.id);
                     })
                 ]
@@ -530,13 +525,14 @@ function TabbedStepForm({ schema, context, customComponents, disabled, sectionVa
         ]
     });
 }
-const metadata_form_FormSection = /*#__PURE__*/ external_react_default().memo(function({ section, context, customComponents, disabled, sectionVariant = 'card' }) {
+const metadata_form_FormSection = /*#__PURE__*/ external_react_default().memo(function({ section, context, customComponents, disabled, sectionVariant = 'card', afterTabs = false }) {
     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 ? 'py-4 text-sm font-semibold hover:no-underline' : 'text-sm font-medium';
+    const plainTopClassName = afterTabs ? 'pt-1.5' : 'pt-4';
+    const triggerClassName = isPlain ? `${plainTopClassName} pb-4 text-sm font-semibold hover:no-underline` : 'text-sm font-medium';
     const fieldsGrid = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: "grid",
         style: {
@@ -551,7 +547,7 @@ const metadata_form_FormSection = /*#__PURE__*/ external_react_default().memo(fu
             }, field.name))
     });
     if (!section.title) return isPlain ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: `${dividerClassName} pb-4 pt-4`,
+        className: `${dividerClassName} pb-4 ${plainTopClassName}`,
         children: fieldsGrid
     }) : fieldsGrid;
     const innerContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
@@ -593,7 +589,7 @@ const metadata_form_FormSection = /*#__PURE__*/ external_react_default().memo(fu
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "flex",
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                    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',
+                    className: isPlain ? `flex flex-1 items-center justify-start gap-2 pb-4 text-sm font-semibold ${plainTopClassName}` : 'flex flex-1 items-center justify-between py-4 text-sm font-medium',
                     children: section.title
                 })
             }),

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

@@ -5,7 +5,7 @@ import { FormProvider, useForm, useFormState, useWatch } 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 { ScrollableTabsList, Tabs, TabsContent, TabsTrigger } from "../ui/tabs.js";
+import { PanelTabs, PanelTabsContent, PanelTabsList, PanelTabsTrigger } from "../ui/panel-tabs.js";
 import { TooltipProvider } from "../ui/tooltip.js";
 import { deepEqual, get } from "../../lib/index.js";
 import { DataFetcher } from "./data-fetcher.js";
@@ -431,53 +431,48 @@ function TabbedStepForm({ schema, context, customComponents, disabled, sectionVa
     if (0 === visibleSteps.length) return null;
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsxs(Tabs, {
+            /*#__PURE__*/ jsxs(PanelTabs, {
                 value: currentTab,
                 onValueChange: selectTab,
-                className: "flex min-h-0 flex-1 flex-col gap-1",
                 children: [
-                    /*#__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-error-background",
-                                            children: errorCount
-                                        })
-                                    ]
-                                }, step.id);
-                            })
+                    /*#__PURE__*/ jsx(PanelTabsList, {
+                        children: visibleSteps.map((step)=>{
+                            const errorCount = errorCountByStepId[step.id] ?? 0;
+                            return /*#__PURE__*/ jsxs(PanelTabsTrigger, {
+                                value: step.id,
+                                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-error-background",
+                                        children: errorCount
+                                    })
+                                ]
+                            }, step.id);
                         })
                     }),
                     visibleSteps.map((step)=>{
                         const stepSections = step.sections.filter((section)=>!section.conditions || context.evaluateConditions(section.conditions));
-                        return /*#__PURE__*/ jsx(TabsContent, {
+                        const showEmptyState = 0 === stepSections.length && void 0 !== step.emptyState;
+                        const selfPadded = !showEmptyState && 'plain' === sectionVariant;
+                        const sections = stepSections.map((section, index)=>/*#__PURE__*/ jsx(metadata_form_FormSection, {
+                                section: section,
+                                context: context,
+                                customComponents: customComponents,
+                                disabled: disabled,
+                                sectionVariant: sectionVariant,
+                                afterTabs: 0 === index
+                            }, section.id));
+                        return /*#__PURE__*/ jsx(PanelTabsContent, {
                             value: 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(metadata_form_FormSection, {
-                                        section: section,
-                                        context: context,
-                                        customComponents: customComponents,
-                                        disabled: disabled,
-                                        sectionVariant: sectionVariant
-                                    }, section.id))
-                            })
+                            padded: !selfPadded,
+                            innerClassName: showEmptyState ? 'text-sm text-muted-foreground' : 'space-y-2',
+                            children: showEmptyState ? step.emptyState : selfPadded ? /*#__PURE__*/ jsx("div", {
+                                className: "pb-6 [padding-inline:var(--mf-content-inset,0px)]",
+                                children: sections
+                            }) : sections
                         }, step.id);
                     })
                 ]
@@ -491,13 +486,14 @@ function TabbedStepForm({ schema, context, customComponents, disabled, sectionVa
         ]
     });
 }
-const metadata_form_FormSection = /*#__PURE__*/ react.memo(function({ section, context, customComponents, disabled, sectionVariant = 'card' }) {
+const metadata_form_FormSection = /*#__PURE__*/ react.memo(function({ section, context, customComponents, disabled, sectionVariant = 'card', afterTabs = false }) {
     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 ? 'py-4 text-sm font-semibold hover:no-underline' : 'text-sm font-medium';
+    const plainTopClassName = afterTabs ? 'pt-1.5' : 'pt-4';
+    const triggerClassName = isPlain ? `${plainTopClassName} pb-4 text-sm font-semibold hover:no-underline` : 'text-sm font-medium';
     const fieldsGrid = /*#__PURE__*/ jsx("div", {
         className: "grid",
         style: {
@@ -512,7 +508,7 @@ const metadata_form_FormSection = /*#__PURE__*/ react.memo(function({ section, c
             }, field.name))
     });
     if (!section.title) return isPlain ? /*#__PURE__*/ jsx("div", {
-        className: `${dividerClassName} pb-4 pt-4`,
+        className: `${dividerClassName} pb-4 ${plainTopClassName}`,
         children: fieldsGrid
     }) : fieldsGrid;
     const innerContent = /*#__PURE__*/ jsxs("div", {
@@ -554,7 +550,7 @@ const metadata_form_FormSection = /*#__PURE__*/ react.memo(function({ section, c
             /*#__PURE__*/ jsx("div", {
                 className: "flex",
                 children: /*#__PURE__*/ jsx("div", {
-                    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',
+                    className: isPlain ? `flex flex-1 items-center justify-start gap-2 pb-4 text-sm font-semibold ${plainTopClassName}` : 'flex flex-1 items-center justify-between py-4 text-sm font-medium',
                     children: section.title
                 })
             }),