npm - @uipath/apollo-wind - Versions diffs - 2.47.0 → 2.47.1 - Mend

@uipath/apollo-wind 2.47.0 → 2.47.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/components/forms/field-renderer.cjs +9 -5
package/dist/components/forms/field-renderer.js +9 -5
package/dist/components/forms/form-state-viewer.cjs +8 -4
package/dist/components/forms/form-state-viewer.d.ts +1 -1
package/dist/components/forms/form-state-viewer.js +8 -4
package/dist/components/forms/metadata-form.cjs +129 -60
package/dist/components/forms/metadata-form.js +121 -62
package/dist/components/ui/index.cjs +12 -12
package/package.json +1 -1

package/dist/components/forms/field-renderer.cjs CHANGED Viewed

@@ -132,19 +132,23 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
         getValues,
         watchedRuleDependentValues
     ]);
+    const isOptionsField = (0, external_form_schema_cjs_namespaceObject.hasOptions)(field);
+    const inlineOptions = isOptionsField ? field.options : void 0;
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (field.dataSource) return;
-        if (!(0, external_form_schema_cjs_namespaceObject.hasOptions)(field)) return;
-        const inlineOptions = field.options || [];
+        if (!isOptionsField) return;
+        const nextOptions = inlineOptions || [];
         setFieldState((prev)=>{
-            if ((0, index_cjs_namespaceObject.deepEqual)(prev.options, inlineOptions)) return prev;
+            if ((0, index_cjs_namespaceObject.deepEqual)(prev.options, nextOptions)) return prev;
             return {
                 ...prev,
-                options: inlineOptions
+                options: nextOptions
             };
         });
     }, [
-        field
+        field.dataSource,
+        isOptionsField,
+        inlineOptions
     ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (!field.dataSource) return;

package/dist/components/forms/field-renderer.js CHANGED Viewed

@@ -104,19 +104,23 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
         getValues,
         watchedRuleDependentValues
     ]);
+    const isOptionsField = hasOptions(field);
+    const inlineOptions = isOptionsField ? field.options : void 0;
     useEffect(()=>{
         if (field.dataSource) return;
-        if (!hasOptions(field)) return;
-        const inlineOptions = field.options || [];
+        if (!isOptionsField) return;
+        const nextOptions = inlineOptions || [];
         setFieldState((prev)=>{
-            if (deepEqual(prev.options, inlineOptions)) return prev;
+            if (deepEqual(prev.options, nextOptions)) return prev;
             return {
                 ...prev,
-                options: inlineOptions
+                options: nextOptions
             };
         });
     }, [
-        field
+        field.dataSource,
+        isOptionsField,
+        inlineOptions
     ]);
     useEffect(()=>{
         if (!field.dataSource) return;

package/dist/components/forms/form-state-viewer.cjs CHANGED Viewed

@@ -27,16 +27,20 @@ __webpack_require__.d(__webpack_exports__, {
     FormStateViewer: ()=>FormStateViewer
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
+const external_react_hook_form_namespaceObject = require("react-hook-form");
 const badge_cjs_namespaceObject = require("../ui/badge.cjs");
 const card_cjs_namespaceObject = require("../ui/card.cjs");
-const tabs_cjs_namespaceObject = require("../ui/tabs.cjs");
 const scroll_area_cjs_namespaceObject = require("../ui/scroll-area.cjs");
-const external_lucide_react_namespaceObject = require("lucide-react");
+const tabs_cjs_namespaceObject = require("../ui/tabs.cjs");
 function FormStateViewer({ form, title = 'Form State', className = '', compact = false }) {
     const [activeTab, setActiveTab] = (0, external_react_namespaceObject.useState)('values');
-    const { formState, watch } = form;
-    const values = watch();
+    const { formState, control, getValues } = form;
+    (0, external_react_hook_form_namespaceObject.useWatch)({
+        control
+    });
+    const values = getValues();
     const stats = {
         isValid: formState.isValid,
         isDirty: formState.isDirty,

package/dist/components/forms/form-state-viewer.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { UseFormReturn, FieldValues } from 'react-hook-form';
+import { type FieldValues, type UseFormReturn } from 'react-hook-form';
 /**
  * FormStateViewer Component
  *

package/dist/components/forms/form-state-viewer.js CHANGED Viewed

@@ -1,14 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle, CheckCircle2, Database, Eye, FileEdit, XCircle } from "lucide-react";
 import { useState } from "react";
+import { useWatch } from "react-hook-form";
 import { Badge } from "../ui/badge.js";
 import { Card } from "../ui/card.js";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
 import { ScrollArea } from "../ui/scroll-area.js";
-import { AlertCircle, CheckCircle2, Database, Eye, FileEdit, XCircle } from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
 function FormStateViewer({ form, title = 'Form State', className = '', compact = false }) {
     const [activeTab, setActiveTab] = useState('values');
-    const { formState, watch } = form;
-    const values = watch();
+    const { formState, control, getValues } = form;
+    useWatch({
+        control
+    });
+    const values = getValues();
     const stats = {
         isValid: formState.isValid,
         isDirty: formState.isDirty,

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

@@ -1,5 +1,14 @@
 "use strict";
 var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
 (()=>{
     __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
@@ -29,11 +38,13 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const standard_schema_namespaceObject = require("@hookform/resolvers/standard-schema");
 const external_react_namespaceObject = require("react");
+var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
 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 index_cjs_namespaceObject = require("../../lib/index.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");
@@ -43,20 +54,31 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
     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);
-    const zodSchema = (0, external_react_namespaceObject.useMemo)(()=>buildZodSchema(schema), [
+    const schemaRef = (0, external_react_namespaceObject.useRef)(schema);
+    const stableSchema = (0, external_react_namespaceObject.useMemo)(()=>{
+        if ((0, index_cjs_namespaceObject.deepEqual)(schemaRef.current, schema)) return schemaRef.current;
+        schemaRef.current = schema;
+        return schema;
+    }, [
         schema
     ]);
+    const zodSchema = (0, external_react_namespaceObject.useMemo)(()=>buildZodSchema(stableSchema), [
+        stableSchema
+    ]);
     const form = (0, external_react_hook_form_namespaceObject.useForm)({
         resolver: (0, standard_schema_namespaceObject.standardSchemaResolver)(zodSchema),
-        mode: schema.mode || 'onSubmit',
-        reValidateMode: schema.reValidateMode || 'onChange'
+        defaultValues: stableSchema.initialData || {},
+        mode: stableSchema.mode || 'onSubmit',
+        reValidateMode: stableSchema.reValidateMode || 'onChange'
     });
     const { watch, handleSubmit, reset } = form;
-    const valuesRef = (0, external_react_namespaceObject.useRef)({});
-    const watchedValues = watch();
-    valuesRef.current = watchedValues;
+    const valuesRef = (0, external_react_namespaceObject.useRef)(form.getValues());
+    const pluginsRef = (0, external_react_namespaceObject.useRef)(plugins);
+    pluginsRef.current = plugins;
+    const onSubmitRef = (0, external_react_namespaceObject.useRef)(onSubmit);
+    onSubmitRef.current = onSubmit;
     const context = (0, external_react_namespaceObject.useMemo)(()=>({
-            schema,
+            schema: stableSchema,
             form,
             get values () {
                 return valuesRef.current;
@@ -70,7 +92,7 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
             get isDirty () {
                 return form.formState.isDirty;
             },
-            currentStep: schema.steps ? currentStep : void 0,
+            currentStep: stableSchema.steps ? currentStep : void 0,
             evaluateConditions: (conditions)=>external_rules_engine_cjs_namespaceObject.RulesEngine.evaluateConditions(conditions, valuesRef.current, 'AND'),
             fetchData: async (source)=>{
                 const result = await external_data_fetcher_cjs_namespaceObject.DataFetcher.fetch(source, valuesRef.current);
@@ -83,17 +105,31 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
                     }));
             }
         }), [
-        schema,
+        stableSchema,
         form,
         currentStep
     ]);
     const contextRef = (0, external_react_namespaceObject.useRef)(context);
     contextRef.current = context;
+    const isInitializedRef = (0, external_react_namespaceObject.useRef)(isInitialized);
+    isInitializedRef.current = isInitialized;
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const subscription = watch((value, { name })=>{
+            valuesRef.current = value;
+            if (!name || !isInitializedRef.current) return;
+            pluginsRef.current.forEach((plugin)=>{
+                plugin.onValueChange?.(name, (0, index_cjs_namespaceObject.get)(value, name), contextRef.current);
+            });
+        });
+        return ()=>subscription.unsubscribe();
+    }, [
+        watch
+    ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (isInitialized) return;
         const initializeForm = async ()=>{
-            if (schema.initialData) {
-                const data = await loadInitialData(schema.initialData, contextRef.current);
+            if (stableSchema.initialData) {
+                const data = await loadInitialData(stableSchema.initialData, contextRef.current);
                 reset(data);
             }
             for (const plugin of plugins)await plugin.onFormInit?.(contextRef.current);
@@ -103,41 +139,30 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
     }, [
         isInitialized
     ]);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if (!isInitialized) return;
-        const subscription = watch((value, { name })=>{
-            if (name) {
-                valuesRef.current = value;
-                plugins.forEach((plugin)=>{
-                    plugin.onValueChange?.(name, value[name], contextRef.current);
-                });
-            }
-        });
-        return ()=>subscription.unsubscribe();
-    }, [
-        watch,
-        isInitialized,
-        plugins
+    const handleFormSubmit = (0, external_react_namespaceObject.useMemo)(()=>handleSubmit(async (data)=>{
+            let finalData = data;
+            for (const plugin of pluginsRef.current)if (plugin.onSubmit) finalData = await plugin.onSubmit(finalData, contextRef.current) || finalData;
+            if (onSubmitRef.current) await onSubmitRef.current(finalData);
+        }), [
+        handleSubmit
+    ]);
+    const handleReset = (0, external_react_namespaceObject.useCallback)(()=>reset(), [
+        reset
     ]);
-    const handleFormSubmit = handleSubmit(async (data)=>{
-        let finalData = data;
-        for (const plugin of plugins)if (plugin.onSubmit) finalData = await plugin.onSubmit(finalData, context) || finalData;
-        if (onSubmit) await onSubmit(finalData);
-    });
     const renderContent = ()=>{
-        if (schema.steps) {
+        if (stableSchema.steps) {
             if ('tabs' === stepVariant) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TabbedStepForm, {
-                schema: schema,
+                schema: stableSchema,
                 context: context,
                 customComponents: customComponents,
                 disabled: disabled,
                 sectionVariant: sectionVariant,
                 activeStepId: activeStepId,
                 onActiveStepChange: onActiveStepChange,
-                onReset: ()=>reset()
+                onReset: handleReset
             });
-            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MultiStepForm, {
-                schema: schema,
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(metadata_form_MultiStepForm, {
+                schema: stableSchema,
                 context: context,
                 currentStep: currentStep,
                 setCurrentStep: setCurrentStep,
@@ -146,8 +171,8 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
                 sectionVariant: sectionVariant
             });
         }
-        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SinglePageForm, {
-            schema: schema,
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(metadata_form_SinglePageForm, {
+            schema: stableSchema,
             context: context,
             customComponents: customComponents,
             disabled: disabled,
@@ -162,21 +187,36 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
             autoComplete: autoComplete,
             children: [
                 renderContent(),
-                !schema.steps && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormActions, {
-                    schema: schema,
+                !stableSchema.steps && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(metadata_form_FormActions, {
+                    schema: stableSchema,
                     context: context,
-                    onReset: ()=>reset()
+                    onReset: handleReset
                 })
             ]
         })
     });
 }
-function SinglePageForm({ schema, context, customComponents, disabled, sectionVariant }) {
+function conditionDependencies(conditionGroups) {
+    const fields = new Set();
+    for (const conditions of conditionGroups)for (const condition of conditions || [])if (condition.when) fields.add(condition.when);
+    return Array.from(fields);
+}
+function useConditionDependencies(context, conditionFields) {
+    (0, external_react_hook_form_namespaceObject.useWatch)({
+        control: context.form.control,
+        name: conditionFields
+    });
+}
+const metadata_form_SinglePageForm = /*#__PURE__*/ external_react_default().memo(function({ schema, context, customComponents, disabled, sectionVariant }) {
     const sections = schema.sections || [];
+    const conditionFields = (0, external_react_namespaceObject.useMemo)(()=>conditionDependencies(schema.sections?.map((section)=>section.conditions) ?? []), [
+        schema
+    ]);
+    useConditionDependencies(context, conditionFields);
     const visibleSections = sections.filter((section)=>!section.conditions || context.evaluateConditions(section.conditions));
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: 'plain' === sectionVariant ? void 0 : 'space-y-2',
-        children: visibleSections.map((section)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormSection, {
+        children: visibleSections.map((section)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(metadata_form_FormSection, {
                 section: section,
                 context: context,
                 customComponents: customComponents,
@@ -184,15 +224,30 @@ function SinglePageForm({ schema, context, customComponents, disabled, sectionVa
                 sectionVariant: sectionVariant
             }, section.id))
     });
-}
-function MultiStepForm({ schema, context, currentStep, setCurrentStep, customComponents, disabled, sectionVariant }) {
+});
+const metadata_form_MultiStepForm = /*#__PURE__*/ external_react_default().memo(function({ schema, context, currentStep, setCurrentStep, customComponents, disabled, sectionVariant }) {
     const steps = schema.steps || [];
-    const step = steps[currentStep];
-    if (!step) return null;
-    if (step.conditions && !context.evaluateConditions(step.conditions)) {
-        if (currentStep < steps.length - 1) setCurrentStep(currentStep + 1);
-        return null;
+    const conditionFields = (0, external_react_namespaceObject.useMemo)(()=>conditionDependencies(schema.steps?.map((step)=>step.conditions) ?? []), [
+        schema
+    ]);
+    useConditionDependencies(context, conditionFields);
+    let visibleStepIndex = -1;
+    for(let i = currentStep; i < steps.length; i++){
+        const candidate = steps[i];
+        if (!candidate.conditions || context.evaluateConditions(candidate.conditions)) {
+            visibleStepIndex = i;
+            break;
+        }
     }
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (-1 !== visibleStepIndex && visibleStepIndex !== currentStep) setCurrentStep(visibleStepIndex);
+    }, [
+        visibleStepIndex,
+        currentStep,
+        setCurrentStep
+    ]);
+    const step = -1 !== visibleStepIndex ? steps[visibleStepIndex] : void 0;
+    if (!step || visibleStepIndex !== currentStep) return null;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         className: "space-y-6",
         children: [
@@ -224,7 +279,7 @@ function MultiStepForm({ schema, context, currentStep, setCurrentStep, customCom
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: 'plain' === sectionVariant ? void 0 : 'space-y-2',
-                children: step.sections.map((section)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormSection, {
+                children: step.sections.map((section)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(metadata_form_FormSection, {
                         section: section,
                         context: context,
                         customComponents: customComponents,
@@ -256,9 +311,16 @@ function MultiStepForm({ schema, context, currentStep, setCurrentStep, customCom
             })
         ]
     });
-}
+});
 function TabbedStepForm({ schema, context, customComponents, disabled, sectionVariant, onReset, activeStepId, onActiveStepChange }) {
     const steps = schema.steps || [];
+    const conditionFields = (0, external_react_namespaceObject.useMemo)(()=>conditionDependencies(schema.steps?.flatMap((step)=>[
+                step.conditions,
+                ...step.sections.map((section)=>section.conditions)
+            ]) ?? []), [
+        schema
+    ]);
+    useConditionDependencies(context, conditionFields);
     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));
@@ -334,7 +396,7 @@ function TabbedStepForm({ schema, context, customComponents, disabled, sectionVa
                                 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, {
+                                children: stepSections.map((section)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(metadata_form_FormSection, {
                                         section: section,
                                         context: context,
                                         customComponents: customComponents,
@@ -346,7 +408,7 @@ function TabbedStepForm({ schema, context, customComponents, disabled, sectionVa
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormActions, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(metadata_form_FormActions, {
                 schema: schema,
                 context: context,
                 onReset: onReset
@@ -354,7 +416,7 @@ function TabbedStepForm({ schema, context, customComponents, disabled, sectionVa
         ]
     });
 }
-function FormSection({ section, context, customComponents, disabled, sectionVariant = 'card' }) {
+const metadata_form_FormSection = /*#__PURE__*/ external_react_default().memo(function({ section, context, customComponents, disabled, sectionVariant = 'card' }) {
     const gridColumns = context.schema.layout?.columns || 1;
     const gap = context.schema.layout?.gap || 4;
     const isPlain = 'plain' === sectionVariant;
@@ -430,8 +492,15 @@ function FormSection({ section, context, customComponents, disabled, sectionVari
             })
         ]
     });
-}
-function FormActions({ schema, context, onReset }) {
+});
+const metadata_form_FormActions = /*#__PURE__*/ external_react_default().memo(function({ schema, context, onReset }) {
+    const { isSubmitting } = (0, external_react_hook_form_namespaceObject.useFormState)({
+        control: context.form.control
+    });
+    const conditionFields = (0, external_react_namespaceObject.useMemo)(()=>conditionDependencies(schema.actions?.map((action)=>action.conditions) ?? []), [
+        schema
+    ]);
+    useConditionDependencies(context, conditionFields);
     const actions = schema.actions || [
         {
             id: 'submit',
@@ -455,12 +524,12 @@ function FormActions({ schema, context, onReset }) {
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
                 type: 'submit' === action.type ? 'submit' : 'button',
                 variant: action.variant || 'default',
-                disabled: action.disabled || 'submit' === action.type && context.isSubmitting,
-                children: action.loading && context.isSubmitting ? 'Loading...' : action.label
+                disabled: action.disabled || 'submit' === action.type && isSubmitting,
+                children: action.loading && isSubmitting ? 'Loading...' : action.label
             }, action.id);
         })
     });
-}
+});
 function buildZodSchema(schema) {
     const shape = {};
     const fields = schema.steps ? schema.steps.flatMap((step)=>step.sections.flatMap((s)=>s.fields)) : schema.sections?.flatMap((s)=>s.fields) || [];

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

@@ -1,11 +1,12 @@
 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, useFormState } from "react-hook-form";
+import react, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+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 { deepEqual, get } from "../../lib/index.js";
 import { DataFetcher } from "./data-fetcher.js";
 import { FormFieldRenderer } from "./field-renderer.js";
 import { RulesEngine } from "./rules-engine.js";
@@ -15,20 +16,31 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
     const [currentStep, setCurrentStep] = useState(0);
     const [customComponents, setCustomComponents] = useState({});
     const [isInitialized, setIsInitialized] = useState(false);
-    const zodSchema = useMemo(()=>buildZodSchema(schema), [
+    const schemaRef = useRef(schema);
+    const stableSchema = useMemo(()=>{
+        if (deepEqual(schemaRef.current, schema)) return schemaRef.current;
+        schemaRef.current = schema;
+        return schema;
+    }, [
         schema
     ]);
+    const zodSchema = useMemo(()=>buildZodSchema(stableSchema), [
+        stableSchema
+    ]);
     const form = useForm({
         resolver: standardSchemaResolver(zodSchema),
-        mode: schema.mode || 'onSubmit',
-        reValidateMode: schema.reValidateMode || 'onChange'
+        defaultValues: stableSchema.initialData || {},
+        mode: stableSchema.mode || 'onSubmit',
+        reValidateMode: stableSchema.reValidateMode || 'onChange'
     });
     const { watch, handleSubmit, reset } = form;
-    const valuesRef = useRef({});
-    const watchedValues = watch();
-    valuesRef.current = watchedValues;
+    const valuesRef = useRef(form.getValues());
+    const pluginsRef = useRef(plugins);
+    pluginsRef.current = plugins;
+    const onSubmitRef = useRef(onSubmit);
+    onSubmitRef.current = onSubmit;
     const context = useMemo(()=>({
-            schema,
+            schema: stableSchema,
             form,
             get values () {
                 return valuesRef.current;
@@ -42,7 +54,7 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
             get isDirty () {
                 return form.formState.isDirty;
             },
-            currentStep: schema.steps ? currentStep : void 0,
+            currentStep: stableSchema.steps ? currentStep : void 0,
             evaluateConditions: (conditions)=>RulesEngine.evaluateConditions(conditions, valuesRef.current, 'AND'),
             fetchData: async (source)=>{
                 const result = await DataFetcher.fetch(source, valuesRef.current);
@@ -55,17 +67,31 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
                     }));
             }
         }), [
-        schema,
+        stableSchema,
         form,
         currentStep
     ]);
     const contextRef = useRef(context);
     contextRef.current = context;
+    const isInitializedRef = useRef(isInitialized);
+    isInitializedRef.current = isInitialized;
+    useEffect(()=>{
+        const subscription = watch((value, { name })=>{
+            valuesRef.current = value;
+            if (!name || !isInitializedRef.current) return;
+            pluginsRef.current.forEach((plugin)=>{
+                plugin.onValueChange?.(name, get(value, name), contextRef.current);
+            });
+        });
+        return ()=>subscription.unsubscribe();
+    }, [
+        watch
+    ]);
     useEffect(()=>{
         if (isInitialized) return;
         const initializeForm = async ()=>{
-            if (schema.initialData) {
-                const data = await loadInitialData(schema.initialData, contextRef.current);
+            if (stableSchema.initialData) {
+                const data = await loadInitialData(stableSchema.initialData, contextRef.current);
                 reset(data);
             }
             for (const plugin of plugins)await plugin.onFormInit?.(contextRef.current);
@@ -75,41 +101,30 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
     }, [
         isInitialized
     ]);
-    useEffect(()=>{
-        if (!isInitialized) return;
-        const subscription = watch((value, { name })=>{
-            if (name) {
-                valuesRef.current = value;
-                plugins.forEach((plugin)=>{
-                    plugin.onValueChange?.(name, value[name], contextRef.current);
-                });
-            }
-        });
-        return ()=>subscription.unsubscribe();
-    }, [
-        watch,
-        isInitialized,
-        plugins
+    const handleFormSubmit = useMemo(()=>handleSubmit(async (data)=>{
+            let finalData = data;
+            for (const plugin of pluginsRef.current)if (plugin.onSubmit) finalData = await plugin.onSubmit(finalData, contextRef.current) || finalData;
+            if (onSubmitRef.current) await onSubmitRef.current(finalData);
+        }), [
+        handleSubmit
+    ]);
+    const handleReset = useCallback(()=>reset(), [
+        reset
     ]);
-    const handleFormSubmit = handleSubmit(async (data)=>{
-        let finalData = data;
-        for (const plugin of plugins)if (plugin.onSubmit) finalData = await plugin.onSubmit(finalData, context) || finalData;
-        if (onSubmit) await onSubmit(finalData);
-    });
     const renderContent = ()=>{
-        if (schema.steps) {
+        if (stableSchema.steps) {
             if ('tabs' === stepVariant) return /*#__PURE__*/ jsx(TabbedStepForm, {
-                schema: schema,
+                schema: stableSchema,
                 context: context,
                 customComponents: customComponents,
                 disabled: disabled,
                 sectionVariant: sectionVariant,
                 activeStepId: activeStepId,
                 onActiveStepChange: onActiveStepChange,
-                onReset: ()=>reset()
+                onReset: handleReset
             });
-            return /*#__PURE__*/ jsx(MultiStepForm, {
-                schema: schema,
+            return /*#__PURE__*/ jsx(metadata_form_MultiStepForm, {
+                schema: stableSchema,
                 context: context,
                 currentStep: currentStep,
                 setCurrentStep: setCurrentStep,
@@ -118,8 +133,8 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
                 sectionVariant: sectionVariant
             });
         }
-        return /*#__PURE__*/ jsx(SinglePageForm, {
-            schema: schema,
+        return /*#__PURE__*/ jsx(metadata_form_SinglePageForm, {
+            schema: stableSchema,
             context: context,
             customComponents: customComponents,
             disabled: disabled,
@@ -134,21 +149,36 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
             autoComplete: autoComplete,
             children: [
                 renderContent(),
-                !schema.steps && /*#__PURE__*/ jsx(FormActions, {
-                    schema: schema,
+                !stableSchema.steps && /*#__PURE__*/ jsx(metadata_form_FormActions, {
+                    schema: stableSchema,
                     context: context,
-                    onReset: ()=>reset()
+                    onReset: handleReset
                 })
             ]
         })
     });
 }
-function SinglePageForm({ schema, context, customComponents, disabled, sectionVariant }) {
+function conditionDependencies(conditionGroups) {
+    const fields = new Set();
+    for (const conditions of conditionGroups)for (const condition of conditions || [])if (condition.when) fields.add(condition.when);
+    return Array.from(fields);
+}
+function useConditionDependencies(context, conditionFields) {
+    useWatch({
+        control: context.form.control,
+        name: conditionFields
+    });
+}
+const metadata_form_SinglePageForm = /*#__PURE__*/ react.memo(function({ schema, context, customComponents, disabled, sectionVariant }) {
     const sections = schema.sections || [];
+    const conditionFields = useMemo(()=>conditionDependencies(schema.sections?.map((section)=>section.conditions) ?? []), [
+        schema
+    ]);
+    useConditionDependencies(context, conditionFields);
     const visibleSections = sections.filter((section)=>!section.conditions || context.evaluateConditions(section.conditions));
     return /*#__PURE__*/ jsx("div", {
         className: 'plain' === sectionVariant ? void 0 : 'space-y-2',
-        children: visibleSections.map((section)=>/*#__PURE__*/ jsx(FormSection, {
+        children: visibleSections.map((section)=>/*#__PURE__*/ jsx(metadata_form_FormSection, {
                 section: section,
                 context: context,
                 customComponents: customComponents,
@@ -156,15 +186,30 @@ function SinglePageForm({ schema, context, customComponents, disabled, sectionVa
                 sectionVariant: sectionVariant
             }, section.id))
     });
-}
-function MultiStepForm({ schema, context, currentStep, setCurrentStep, customComponents, disabled, sectionVariant }) {
+});
+const metadata_form_MultiStepForm = /*#__PURE__*/ react.memo(function({ schema, context, currentStep, setCurrentStep, customComponents, disabled, sectionVariant }) {
     const steps = schema.steps || [];
-    const step = steps[currentStep];
-    if (!step) return null;
-    if (step.conditions && !context.evaluateConditions(step.conditions)) {
-        if (currentStep < steps.length - 1) setCurrentStep(currentStep + 1);
-        return null;
+    const conditionFields = useMemo(()=>conditionDependencies(schema.steps?.map((step)=>step.conditions) ?? []), [
+        schema
+    ]);
+    useConditionDependencies(context, conditionFields);
+    let visibleStepIndex = -1;
+    for(let i = currentStep; i < steps.length; i++){
+        const candidate = steps[i];
+        if (!candidate.conditions || context.evaluateConditions(candidate.conditions)) {
+            visibleStepIndex = i;
+            break;
+        }
     }
+    useEffect(()=>{
+        if (-1 !== visibleStepIndex && visibleStepIndex !== currentStep) setCurrentStep(visibleStepIndex);
+    }, [
+        visibleStepIndex,
+        currentStep,
+        setCurrentStep
+    ]);
+    const step = -1 !== visibleStepIndex ? steps[visibleStepIndex] : void 0;
+    if (!step || visibleStepIndex !== currentStep) return null;
     return /*#__PURE__*/ jsxs("div", {
         className: "space-y-6",
         children: [
@@ -196,7 +241,7 @@ function MultiStepForm({ schema, context, currentStep, setCurrentStep, customCom
             }),
             /*#__PURE__*/ jsx("div", {
                 className: 'plain' === sectionVariant ? void 0 : 'space-y-2',
-                children: step.sections.map((section)=>/*#__PURE__*/ jsx(FormSection, {
+                children: step.sections.map((section)=>/*#__PURE__*/ jsx(metadata_form_FormSection, {
                         section: section,
                         context: context,
                         customComponents: customComponents,
@@ -228,9 +273,16 @@ function MultiStepForm({ schema, context, currentStep, setCurrentStep, customCom
             })
         ]
     });
-}
+});
 function TabbedStepForm({ schema, context, customComponents, disabled, sectionVariant, onReset, activeStepId, onActiveStepChange }) {
     const steps = schema.steps || [];
+    const conditionFields = useMemo(()=>conditionDependencies(schema.steps?.flatMap((step)=>[
+                step.conditions,
+                ...step.sections.map((section)=>section.conditions)
+            ]) ?? []), [
+        schema
+    ]);
+    useConditionDependencies(context, conditionFields);
     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));
@@ -306,7 +358,7 @@ function TabbedStepForm({ schema, context, customComponents, disabled, sectionVa
                                 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, {
+                                children: stepSections.map((section)=>/*#__PURE__*/ jsx(metadata_form_FormSection, {
                                         section: section,
                                         context: context,
                                         customComponents: customComponents,
@@ -318,7 +370,7 @@ function TabbedStepForm({ schema, context, customComponents, disabled, sectionVa
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(FormActions, {
+            /*#__PURE__*/ jsx(metadata_form_FormActions, {
                 schema: schema,
                 context: context,
                 onReset: onReset
@@ -326,7 +378,7 @@ function TabbedStepForm({ schema, context, customComponents, disabled, sectionVa
         ]
     });
 }
-function FormSection({ section, context, customComponents, disabled, sectionVariant = 'card' }) {
+const metadata_form_FormSection = /*#__PURE__*/ react.memo(function({ section, context, customComponents, disabled, sectionVariant = 'card' }) {
     const gridColumns = context.schema.layout?.columns || 1;
     const gap = context.schema.layout?.gap || 4;
     const isPlain = 'plain' === sectionVariant;
@@ -402,8 +454,15 @@ function FormSection({ section, context, customComponents, disabled, sectionVari
             })
         ]
     });
-}
-function FormActions({ schema, context, onReset }) {
+});
+const metadata_form_FormActions = /*#__PURE__*/ react.memo(function({ schema, context, onReset }) {
+    const { isSubmitting } = useFormState({
+        control: context.form.control
+    });
+    const conditionFields = useMemo(()=>conditionDependencies(schema.actions?.map((action)=>action.conditions) ?? []), [
+        schema
+    ]);
+    useConditionDependencies(context, conditionFields);
     const actions = schema.actions || [
         {
             id: 'submit',
@@ -427,12 +486,12 @@ function FormActions({ schema, context, onReset }) {
             return /*#__PURE__*/ jsx(Button, {
                 type: 'submit' === action.type ? 'submit' : 'button',
                 variant: action.variant || 'default',
-                disabled: action.disabled || 'submit' === action.type && context.isSubmitting,
-                children: action.loading && context.isSubmitting ? 'Loading...' : action.label
+                disabled: action.disabled || 'submit' === action.type && isSubmitting,
+                children: action.loading && isSubmitting ? 'Loading...' : action.label
             }, action.id);
         })
     });
-}
+});
 function buildZodSchema(schema) {
     const shape = {};
     const fields = schema.steps ? schema.steps.flatMap((step)=>step.sections.flatMap((s)=>s.fields)) : schema.sections?.flatMap((s)=>s.fields) || [];

package/dist/components/ui/index.cjs CHANGED Viewed

@@ -24,19 +24,19 @@ var __webpack_modules__ = {
     "./button-group" (module) {
         module.exports = require("./button-group.cjs");
     },
-    "@/components/ui/button" (module) {
+    "./button" (module) {
         module.exports = require("./button.cjs");
     },
     "./calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
-    "./card" (module) {
+    "@/components/ui/card" (module) {
         module.exports = require("./card.cjs");
     },
     "./chart" (module) {
         module.exports = require("./chart.cjs");
     },
-    "@/components/ui/checkbox" (module) {
+    "./checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
     "@/components/ui/collapsible" (module) {
@@ -105,7 +105,7 @@ var __webpack_modules__ = {
     "./pagination" (module) {
         module.exports = require("./pagination.cjs");
     },
-    "@/components/ui/popover" (module) {
+    "./popover" (module) {
         module.exports = require("./popover.cjs");
     },
     "@/components/ui/portal-container" (module) {
@@ -159,7 +159,7 @@ var __webpack_modules__ = {
     "./switch" (module) {
         module.exports = require("./switch.cjs");
     },
-    "./table" (module) {
+    "@/components/ui/table" (module) {
         module.exports = require("./table.cjs");
     },
     "./tabs" (module) {
@@ -171,7 +171,7 @@ var __webpack_modules__ = {
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "./toggle" (module) {
+    "@/components/ui/toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
     "./tooltip" (module) {
@@ -279,7 +279,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_breadcrumb__rspack_import_6[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _button__rspack_import_7 = __webpack_require__("@/components/ui/button");
+    var _button__rspack_import_7 = __webpack_require__("./button");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _button__rspack_import_7)if ([
         "TreeView",
@@ -300,7 +300,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__("./card");
+    var _card__rspack_import_10 = __webpack_require__("@/components/ui/card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _card__rspack_import_10)if ([
         "TreeView",
@@ -314,7 +314,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_chart__rspack_import_11[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _checkbox__rspack_import_12 = __webpack_require__("@/components/ui/checkbox");
+    var _checkbox__rspack_import_12 = __webpack_require__("./checkbox");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _checkbox__rspack_import_12)if ([
         "TreeView",
@@ -475,7 +475,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_pagination__rspack_import_34[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _popover__rspack_import_35 = __webpack_require__("@/components/ui/popover");
+    var _popover__rspack_import_35 = __webpack_require__("./popover");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _popover__rspack_import_35)if ([
         "TreeView",
@@ -601,7 +601,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_52[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _table__rspack_import_53 = __webpack_require__("./table");
+    var _table__rspack_import_53 = __webpack_require__("@/components/ui/table");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _table__rspack_import_53)if ([
         "TreeView",
@@ -622,7 +622,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_55[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_56 = __webpack_require__("./toggle");
+    var _toggle__rspack_import_56 = __webpack_require__("@/components/ui/toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_56)if ([
         "TreeView",

package/package.json CHANGED Viewed

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