@uipath/apollo-wind 2.21.0 → 2.23.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-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))
+                    }),
+                    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-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))
+                    }),
+                    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

@@ -15,7 +15,7 @@ var __webpack_modules__ = {
     "./avatar" (module) {
         module.exports = require("./avatar.cjs");
     },
-    "@/components/ui/badge" (module) {
+    "./badge" (module) {
         module.exports = require("./badge.cjs");
     },
     "./breadcrumb" (module) {
@@ -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) {
@@ -57,13 +57,13 @@ 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) {
         module.exports = require("./dropdown-menu.cjs");
     },
-    "@/components/ui/editable-cell" (module) {
+    "./editable-cell" (module) {
         module.exports = require("./editable-cell.cjs");
     },
     "./empty-state" (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) {
@@ -150,7 +150,7 @@ var __webpack_modules__ = {
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "@/components/ui/toggle" (module) {
+    "./toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
     "./tooltip" (module) {
@@ -241,7 +241,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_avatar__rspack_import_4[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _badge__rspack_import_5 = __webpack_require__("@/components/ui/badge");
+    var _badge__rspack_import_5 = __webpack_require__("./badge");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _badge__rspack_import_5)if ([
         "TreeView",
@@ -276,7 +276,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",
@@ -290,7 +290,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",
@@ -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,7 +339,7 @@ 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",
@@ -353,7 +353,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropdown_menu__rspack_import_20[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _editable_cell__rspack_import_21 = __webpack_require__("@/components/ui/editable-cell");
+    var _editable_cell__rspack_import_21 = __webpack_require__("./editable-cell");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _editable_cell__rspack_import_21)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",
@@ -549,7 +549,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_48[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_49 = __webpack_require__("@/components/ui/toggle");
+    var _toggle__rspack_import_49 = __webpack_require__("./toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_49)if ([
         "TreeView",

package/dist/editor-themes/monaco.cjs

@@ -296,7 +296,7 @@ const apolloFutureDarkMonaco = {
     inherit: false,
     rules: darkRules,
     colors: {
-        'editor.background': '#18181b',
+        'editor.background': '#27272a',
         'editor.foreground': '#a1a1aa',
         'editorLineNumber.foreground': '#52525b',
         'editorLineNumber.activeForeground': '#a1a1aa',
@@ -333,7 +333,7 @@ const apolloFutureLightMonaco = {
     inherit: false,
     rules: lightRules,
     colors: {
-        'editor.background': '#f4f4f5',
+        'editor.background': '#e4e4e7',
         'editor.foreground': '#52525b',
         'editorLineNumber.foreground': '#a1a1aa',
         'editorLineNumber.activeForeground': '#71717a',

package/dist/editor-themes/monaco.js

@@ -263,7 +263,7 @@ const apolloFutureDarkMonaco = {
     inherit: false,
     rules: darkRules,
     colors: {
-        'editor.background': '#18181b',
+        'editor.background': '#27272a',
         'editor.foreground': '#a1a1aa',
         'editorLineNumber.foreground': '#52525b',
         'editorLineNumber.activeForeground': '#a1a1aa',
@@ -300,7 +300,7 @@ const apolloFutureLightMonaco = {
     inherit: false,
     rules: lightRules,
     colors: {
-        'editor.background': '#f4f4f5',
+        'editor.background': '#e4e4e7',
         'editor.foreground': '#52525b',
         'editorLineNumber.foreground': '#a1a1aa',
         'editorLineNumber.activeForeground': '#71717a',

package/dist/styles.css

@@ -4209,6 +4209,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;
@@ -5527,6 +5533,11 @@
       background-color: var(--background);
     }
   }
+  .data-\[state\=active\]\:bg-surface-overlay {
+    &[data-state="active"] {
+      background-color: var(--surface-overlay);
+    }
+  }
   .data-\[state\=active\]\:text-foreground {
     &[data-state="active"] {
       color: var(--foreground);
@@ -6372,6 +6383,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.23.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",