@uipath/apollo-wind 2.21.0 → 2.22.0

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

@@ -27,18 +27,19 @@ __webpack_require__.d(__webpack_exports__, {
     MetadataForm: ()=>MetadataForm
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const standard_schema_namespaceObject = require("@hookform/resolvers/standard-schema");
 const external_react_namespaceObject = require("react");
 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 standard_schema_namespaceObject = require("@hookform/resolvers/standard-schema");
+const tabs_cjs_namespaceObject = require("../ui/tabs.cjs");
 const external_data_fetcher_cjs_namespaceObject = require("./data-fetcher.cjs");
 const external_field_renderer_cjs_namespaceObject = require("./field-renderer.cjs");
 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 }) {
+function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className, disabled = false, autoComplete, stepVariant = 'wizard' }) {
     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);
@@ -124,14 +125,23 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
         if (onSubmit) await onSubmit(finalData);
     });
     const renderContent = ()=>{
-        if (schema.steps) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MultiStepForm, {
-            schema: schema,
-            context: context,
-            currentStep: currentStep,
-            setCurrentStep: setCurrentStep,
-            customComponents: customComponents,
-            disabled: disabled
-        });
+        if (schema.steps) {
+            if ('tabs' === stepVariant) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TabbedStepForm, {
+                schema: schema,
+                context: context,
+                customComponents: customComponents,
+                disabled: disabled,
+                onReset: ()=>reset()
+            });
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MultiStepForm, {
+                schema: schema,
+                context: context,
+                currentStep: currentStep,
+                setCurrentStep: setCurrentStep,
+                customComponents: customComponents,
+                disabled: disabled
+            });
+        }
         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SinglePageForm, {
             schema: schema,
             context: context,
@@ -240,6 +250,53 @@ function MultiStepForm({ schema, context, currentStep, setCurrentStep, customCom
         ]
     });
 }
+function TabbedStepForm({ schema, context, customComponents, disabled, onReset }) {
+    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 ?? '';
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (activeTab !== currentTab) setActiveTab(currentTab);
+    }, [
+        activeTab,
+        currentTab
+    ]);
+    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, {
+                value: currentTab,
+                onValueChange: setActiveTab,
+                className: "flex flex-col gap-4",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.TabsList, {
+                        className: "h-auto justify-start gap-4 overflow-x-auto rounded-none border-b border-border bg-transparent py-0 text-muted-foreground [-ms-overflow-style:none] [margin-inline:calc(var(--mf-content-inset,0px)*-1)] [padding-inline:var(--mf-content-inset,0px)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+                        children: visibleSteps.map((step)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.TabsTrigger, {
+                                value: step.id,
+                                className: "-mb-px shrink-0 whitespace-nowrap rounded-none border-b-2 border-transparent bg-transparent px-1 pb-2 pt-1 font-medium text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",
+                                children: step.title
+                            }, step.id))
+                    }),
+                    visibleSteps.map((step)=>/*#__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))
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormActions, {
+                schema: schema,
+                context: context,
+                onReset: onReset
+            })
+        ]
+    });
+}
 function FormSection({ section, context, customComponents, disabled }) {
     const gridColumns = context.schema.layout?.columns || 1;
     const gap = context.schema.layout?.gap || 4;

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

@@ -11,6 +11,13 @@ interface MetadataFormProps {
     disabled?: boolean;
     /** Disable browser autocomplete suggestions. Defaults to undefined (browser default). */
     autoComplete?: 'off' | 'on';
+    /**
+     * Presentation for multi-step schemas. `'wizard'` (default) shows Previous/Next
+     * navigation with a Submit button on the final step. `'tabs'` renders the steps
+     * as a tab bar over a single form instance, so values and validation are shared
+     * across every step. Ignored for single-page (`sections`) schemas.
+     */
+    stepVariant?: 'wizard' | 'tabs';
 }
-export declare function MetadataForm({ schema, plugins, onSubmit, className, disabled, autoComplete, }: MetadataFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetadataForm({ schema, plugins, onSubmit, className, disabled, autoComplete, stepVariant, }: MetadataFormProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,16 +1,17 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+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 { z } from "zod/v4";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../ui/accordion.js";
 import { Button } from "../ui/button.js";
-import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { Tabs, TabsContent, TabsList, 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 }) {
+function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className, disabled = false, autoComplete, stepVariant = 'wizard' }) {
     const [currentStep, setCurrentStep] = useState(0);
     const [customComponents, setCustomComponents] = useState({});
     const [isInitialized, setIsInitialized] = useState(false);
@@ -96,14 +97,23 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
         if (onSubmit) await onSubmit(finalData);
     });
     const renderContent = ()=>{
-        if (schema.steps) return /*#__PURE__*/ jsx(MultiStepForm, {
-            schema: schema,
-            context: context,
-            currentStep: currentStep,
-            setCurrentStep: setCurrentStep,
-            customComponents: customComponents,
-            disabled: disabled
-        });
+        if (schema.steps) {
+            if ('tabs' === stepVariant) return /*#__PURE__*/ jsx(TabbedStepForm, {
+                schema: schema,
+                context: context,
+                customComponents: customComponents,
+                disabled: disabled,
+                onReset: ()=>reset()
+            });
+            return /*#__PURE__*/ jsx(MultiStepForm, {
+                schema: schema,
+                context: context,
+                currentStep: currentStep,
+                setCurrentStep: setCurrentStep,
+                customComponents: customComponents,
+                disabled: disabled
+            });
+        }
         return /*#__PURE__*/ jsx(SinglePageForm, {
             schema: schema,
             context: context,
@@ -212,6 +222,53 @@ function MultiStepForm({ schema, context, currentStep, setCurrentStep, customCom
         ]
     });
 }
+function TabbedStepForm({ schema, context, customComponents, disabled, onReset }) {
+    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 ?? '';
+    useEffect(()=>{
+        if (activeTab !== currentTab) setActiveTab(currentTab);
+    }, [
+        activeTab,
+        currentTab
+    ]);
+    if (0 === visibleSteps.length) return null;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(Tabs, {
+                value: currentTab,
+                onValueChange: setActiveTab,
+                className: "flex flex-col gap-4",
+                children: [
+                    /*#__PURE__*/ jsx(TabsList, {
+                        className: "h-auto justify-start gap-4 overflow-x-auto rounded-none border-b border-border bg-transparent py-0 text-muted-foreground [-ms-overflow-style:none] [margin-inline:calc(var(--mf-content-inset,0px)*-1)] [padding-inline:var(--mf-content-inset,0px)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+                        children: visibleSteps.map((step)=>/*#__PURE__*/ jsx(TabsTrigger, {
+                                value: step.id,
+                                className: "-mb-px shrink-0 whitespace-nowrap rounded-none border-b-2 border-transparent bg-transparent px-1 pb-2 pt-1 font-medium text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",
+                                children: step.title
+                            }, step.id))
+                    }),
+                    visibleSteps.map((step)=>/*#__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))
+                ]
+            }),
+            /*#__PURE__*/ jsx(FormActions, {
+                schema: schema,
+                context: context,
+                onReset: onReset
+            })
+        ]
+    });
+}
 function FormSection({ section, context, customComponents, disabled }) {
     const gridColumns = context.schema.layout?.columns || 1;
     const gap = context.schema.layout?.gap || 4;

package/dist/components/ui/index.cjs

@@ -27,16 +27,16 @@ var __webpack_modules__ = {
     "@/components/ui/button" (module) {
         module.exports = require("./button.cjs");
     },
-    "@/components/ui/calendar" (module) {
+    "./calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
     "@/components/ui/card" (module) {
         module.exports = require("./card.cjs");
     },
-    "@/components/ui/checkbox" (module) {
+    "./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) {
@@ -57,10 +57,10 @@ var __webpack_modules__ = {
     "./datetime-picker" (module) {
         module.exports = require("./datetime-picker.cjs");
     },
-    "@/components/ui/dialog" (module) {
+    "./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,13 +72,13 @@ 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");
     },
     "@/components/ui/input" (module) {
         module.exports = require("./input.cjs");
     },
-    "@/components/ui/label" (module) {
+    "./label" (module) {
         module.exports = require("./label.cjs");
     },
     "./layout" (module) {
@@ -138,7 +138,7 @@ var __webpack_modules__ = {
     "./switch" (module) {
         module.exports = require("./switch.cjs");
     },
-    "@/components/ui/table" (module) {
+    "./table" (module) {
         module.exports = require("./table.cjs");
     },
     "./tabs" (module) {
@@ -269,7 +269,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_button_group__rspack_import_8[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _calendar__rspack_import_9 = __webpack_require__("@/components/ui/calendar");
+    var _calendar__rspack_import_9 = __webpack_require__("./calendar");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _calendar__rspack_import_9)if ([
         "TreeView",
@@ -283,14 +283,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_card__rspack_import_10[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _checkbox__rspack_import_11 = __webpack_require__("@/components/ui/checkbox");
+    var _checkbox__rspack_import_11 = __webpack_require__("./checkbox");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _checkbox__rspack_import_11)if ([
         "TreeView",
         "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",
@@ -311,7 +311,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",
@@ -339,14 +339,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_datetime_picker__rspack_import_18[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dialog__rspack_import_19 = __webpack_require__("@/components/ui/dialog");
+    var _dialog__rspack_import_19 = __webpack_require__("./dialog");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dialog__rspack_import_19)if ([
         "TreeView",
         "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",
@@ -374,7 +374,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",
@@ -388,7 +388,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input__rspack_import_25[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _label__rspack_import_26 = __webpack_require__("@/components/ui/label");
+    var _label__rspack_import_26 = __webpack_require__("./label");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _label__rspack_import_26)if ([
         "TreeView",
@@ -528,7 +528,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_45[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _table__rspack_import_46 = __webpack_require__("@/components/ui/table");
+    var _table__rspack_import_46 = __webpack_require__("./table");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _table__rspack_import_46)if ([
         "TreeView",

package/dist/styles.css

@@ -761,6 +761,9 @@
   .-mx-6 {
     margin-inline: calc(var(--spacing) * -6);
   }
+  .\[margin-inline\:calc\(var\(--mf-content-inset\,0px\)\*-1\)\] {
+    margin-inline: calc(var(--mf-content-inset,0px) * -1);
+  }
   .mx-0\.5 {
     margin-inline: calc(var(--spacing) * 0.5);
   }
@@ -842,6 +845,9 @@
   .mr-auto {
     margin-right: auto;
   }
+  .-mb-px {
+    margin-bottom: -1px;
+  }
   .mb-0\.5 {
     margin-bottom: calc(var(--spacing) * 0.5);
   }
@@ -3374,6 +3380,9 @@
   .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);
   }
@@ -4209,6 +4218,12 @@
   .\[--cell-size\:2\.75rem\] {
     --cell-size: 2.75rem;
   }
+  .\[-ms-overflow-style\:none\] {
+    -ms-overflow-style: none;
+  }
+  .\[scrollbar-width\:none\] {
+    scrollbar-width: none;
+  }
   .group-open\:rotate-90 {
     &:is(:where(.group):is([open], :popover-open, :open) *) {
       rotate: 90deg;
@@ -5517,6 +5532,11 @@
       }
     }
   }
+  .data-\[state\=active\]\:border-primary {
+    &[data-state="active"] {
+      border-color: var(--primary);
+    }
+  }
   .data-\[state\=active\]\:border-b-primary {
     &[data-state="active"] {
       border-bottom-color: var(--primary);
@@ -5527,6 +5547,11 @@
       background-color: var(--background);
     }
   }
+  .data-\[state\=active\]\:bg-transparent {
+    &[data-state="active"] {
+      background-color: transparent;
+    }
+  }
   .data-\[state\=active\]\:text-foreground {
     &[data-state="active"] {
       color: var(--foreground);
@@ -6372,6 +6397,11 @@
       border-width: 0px;
     }
   }
+  .\[\&\:\:-webkit-scrollbar\]\:hidden {
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
   .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
     &:has([role=checkbox]) {
       padding-right: calc(var(--spacing) * 0);

package/package.json

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