@remotion/cli 4.0.0-alpha6 → 4.0.0-alpha8

package/dist/editor/components/RenderButton.js

@@ -11,6 +11,7 @@ const get_default_video_contexts_1 = require("../../preview-server/render-queue/
 const client_id_1 = require("../helpers/client-id");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const render_1 = require("../icons/render");
+const in_out_1 = require("../state/in-out");
 const modals_1 = require("../state/modals");
 const layout_1 = require("./layout");
 const button = {
@@ -23,6 +24,7 @@ const label = {
     fontSize: 14,
 };
 const RenderButton = () => {
+    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { type } = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
     const connectionStatus = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type;
@@ -93,8 +95,10 @@ const RenderButton = () => {
             initialHeadless: defaults.headless,
             initialIgnoreCertificateErrors: defaults.ignoreCertificateErrors,
             defaultProps: (_c = props[video.id]) !== null && _c !== void 0 ? _c : video.defaultProps,
+            inFrameMark: inFrame,
+            outFrameMark: outFrame,
         });
-    }, [video, setSelectedModal, frame, props]);
+    }, [video, setSelectedModal, frame, props, inFrame, outFrame]);
     if (!video) {
         return null;
     }

package/dist/editor/components/RenderModal/CliCopyButton.js

@@ -17,6 +17,12 @@ const copiedStyle = {
     alignItems: 'center',
     justifyContent: 'center',
 };
+const buttonStyle = {
+    width: '30px',
+    height: '30px',
+    border: 'none',
+    cursor: 'pointer',
+};
 const CliCopyButton = ({ valueToCopy, }) => {
     const [copied, setCopied] = (0, react_1.useState)(false);
     const [hovered, setHovered] = (0, react_1.useState)(false);
@@ -42,12 +48,7 @@ const CliCopyButton = ({ valueToCopy, }) => {
         const to = setTimeout(() => handleClear(), 2000);
         return () => clearTimeout(to);
     }, [copied]);
-    return copied ? ((0, jsx_runtime_1.jsx)("span", { style: copiedStyle, children: checkSvg })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: {
-            width: '30px',
-            height: '30px',
-            border: 'none',
-            cursor: 'pointer',
-        }, onClick: () => {
+    return copied ? ((0, jsx_runtime_1.jsx)("span", { style: copiedStyle, children: checkSvg })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: () => {
             navigator.clipboard.writeText(valueToCopy);
             setCopied(true);
         }, children: clipboardIcon }));

package/dist/editor/components/RenderModal/OptionExplainer.js

@@ -28,6 +28,7 @@ const link = {
     maxWidth: 200,
     color: '#0b84f3',
     wordWrap: 'break-word',
+    textDecoration: 'none',
 };
 const infoRow = {
     ...padding,

package/dist/editor/components/RenderModal/RenderModal.d.ts

@@ -32,4 +32,6 @@ export declare const RenderModal: React.FC<{
     initialIgnoreCertificateErrors: boolean;
     initialHeadless: boolean;
     defaultProps: unknown;
+    inFrameMark: number | null;
+    outFrameMark: number | null;
 }>;

package/dist/editor/components/RenderModal/RenderModal.js

@@ -108,7 +108,7 @@ const outer = {
     height: (0, ModalContainer_1.getMaxModalHeight)(640),
     overflow: 'hidden',
 };
-const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialVerbose, initialOutName, initialRenderType, initialVideoCodecForAudioTab, initialVideoCodecForVideoTab, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialAudioCodec, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, defaultProps, }) => {
+const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialVerbose, initialOutName, initialRenderType, initialVideoCodecForAudioTab, initialVideoCodecForVideoTab, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialAudioCodec, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, defaultProps, inFrameMark, outFrameMark, }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
@@ -145,8 +145,8 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         };
     }, [headless, disableWebSecurity, ignoreCertificateErrors, openGlOption]);
     const [outName, setOutName] = (0, react_1.useState)(() => initialOutName);
-    const [endFrameOrNull, setEndFrame] = (0, react_1.useState)(() => null);
-    const [startFrameOrNull, setStartFrame] = (0, react_1.useState)(() => null);
+    const [endFrameOrNull, setEndFrame] = (0, react_1.useState)(() => outFrameMark !== null && outFrameMark !== void 0 ? outFrameMark : null);
+    const [startFrameOrNull, setStartFrame] = (0, react_1.useState)(() => inFrameMark !== null && inFrameMark !== void 0 ? inFrameMark : null);
     const [proResProfileSetting, setProResProfile] = (0, react_1.useState)(() => initialProResProfile);
     const [pixelFormat, setPixelFormat] = (0, react_1.useState)(() => initialPixelFormat);
     const [preferredQualityControlType, setQualityControl] = (0, react_1.useState)(() => initialVideoBitrate === null ? 'crf' : 'bitrate');

package/dist/editor/components/RenderModal/RenderModalData.js

@@ -27,17 +27,18 @@ exports.RenderModalData = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
-const colors_1 = require("../../helpers/colors");
-const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
 const get_zod_if_possible_1 = require("../get-zod-if-possible");
 const layout_1 = require("../layout");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("../RenderQueue/actions");
 const SegmentedControl_1 = require("../SegmentedControl");
 const get_render_modal_warnings_1 = require("./get-render-modal-warnings");
 const RenderModalJSONPropsEditor_1 = require("./RenderModalJSONPropsEditor");
-const date_serialization_1 = require("./SchemaEditor/date-serialization");
+const extract_enum_json_paths_1 = require("./SchemaEditor/extract-enum-json-paths");
+const input_props_serialization_1 = require("./SchemaEditor/input-props-serialization");
 const SchemaEditor_1 = require("./SchemaEditor/SchemaEditor");
 const SchemaErrorMessages_1 = require("./SchemaEditor/SchemaErrorMessages");
 const WarningIndicatorButton_1 = require("./WarningIndicatorButton");
@@ -77,7 +78,7 @@ const tabWrapper = {
 const persistanceKey = 'remotion.show-render-modalwarning';
 const parseJSON = (str) => {
     try {
-        const value = (0, date_serialization_1.deserializeJSONWithDate)(str);
+        const value = (0, input_props_serialization_1.deserializeJSONWithCustomFields)(str);
         return { str, value, validJSON: true };
     }
     catch (e) {
@@ -105,13 +106,15 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
             return null;
         }
         const value = inputProps !== null && inputProps !== void 0 ? inputProps : {};
-        return (0, date_serialization_1.serializeJSONWithDate)(value, 2);
+        return (0, input_props_serialization_1.serializeJSONWithDate)({
+            data: value,
+            indent: 2,
+            staticBase: window.remotion_staticBase,
+        });
     }, [inJSONEditor, inputProps]);
     const cliProps = (0, remotion_1.getInputProps)();
-    const [canSaveDefaultProps, setCanSaveDefaultProps] = (0, react_1.useState)({
-        canUpdate: false,
-        reason: 'Loading...',
-        determined: false,
+    const [canSaveDefaultPropsObjectState, setCanSaveDefaultProps] = (0, react_1.useState)({
+        [composition.id]: get_render_modal_warnings_1.defaultTypeCanSaveState,
     });
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     const schema = (0, react_1.useMemo)(() => {
@@ -142,30 +145,44 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
             return val(prevVal);
         });
     }, []);
+    const canSaveDefaultProps = (0, react_1.useMemo)(() => {
+        return canSaveDefaultPropsObjectState[composition.id]
+            ? canSaveDefaultPropsObjectState[composition.id]
+            : get_render_modal_warnings_1.defaultTypeCanSaveState;
+    }, [canSaveDefaultPropsObjectState, composition.id]);
     const showSaveButton = mayShowSaveButton && canSaveDefaultProps.canUpdate;
     const { fastRefreshes } = (0, react_1.useContext)(remotion_1.Internals.NonceContext);
     (0, react_1.useEffect)(() => {
         (0, actions_1.canUpdateDefaultProps)(composition.id)
             .then((can) => {
             if (can.canUpdate) {
-                setCanSaveDefaultProps({
-                    canUpdate: true,
-                });
+                setCanSaveDefaultProps((prevState) => ({
+                    ...prevState,
+                    [composition.id]: {
+                        canUpdate: true,
+                    },
+                }));
             }
             else {
-                setCanSaveDefaultProps({
-                    canUpdate: false,
-                    reason: can.reason,
-                    determined: true,
-                });
+                setCanSaveDefaultProps((prevState) => ({
+                    ...prevState,
+                    [composition.id]: {
+                        canUpdate: false,
+                        reason: can.reason,
+                        determined: true,
+                    },
+                }));
             }
         })
             .catch((err) => {
-            setCanSaveDefaultProps({
-                canUpdate: false,
-                reason: err.message,
-                determined: true,
-            });
+            setCanSaveDefaultProps((prevState) => ({
+                ...prevState,
+                [composition.id]: {
+                    canUpdate: false,
+                    reason: err.message,
+                    determined: true,
+                },
+            }));
         });
     }, [composition.id]);
     const modeItems = (0, react_1.useMemo)(() => {
@@ -192,31 +209,42 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
         setMode('schema');
     }, []);
     const onUpdate = (0, react_1.useCallback)(() => {
+        if (schema === 'no-zod' || z === null) {
+            (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
+            return;
+        }
         setValBeforeSafe(inputProps);
-        (0, actions_1.updateDefaultProps)(composition.id, inputProps);
-    }, [composition.id, inputProps]);
+        (0, actions_1.updateDefaultProps)(composition.id, inputProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []));
+    }, [composition.id, inputProps, schema, z]);
     (0, react_1.useEffect)(() => {
         setSaving(false);
     }, [fastRefreshes]);
     const onSave = (0, react_1.useCallback)((updater) => {
+        if (schema === 'no-zod' || z === null) {
+            (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
+            return;
+        }
         setSaving(true);
-        (0, actions_1.updateDefaultProps)(composition.id, updater(composition.defaultProps)).catch((err) => {
+        (0, actions_1.updateDefaultProps)(composition.id, updater(composition.defaultProps), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, [])).catch((err) => {
             (0, NotificationCenter_1.sendErrorNotification)(`Cannot update default props: ${err.message}`);
             setSaving(false);
         });
-    }, [composition.defaultProps, composition.id]);
+    }, [composition.defaultProps, composition.id, schema, z]);
     const connectionStatus = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type;
     const warnings = (0, react_1.useMemo)(() => {
         return (0, get_render_modal_warnings_1.getRenderModalWarnings)({
             canSaveDefaultProps,
             cliProps,
             isCustomDateUsed: serializedJSON ? serializedJSON.customDateUsed : false,
+            customFileUsed: serializedJSON ? serializedJSON.customFileUsed : false,
             inJSONEditor,
             propsEditType,
+            jsMapUsed: serializedJSON ? serializedJSON.mapUsed : false,
+            jsSetUsed: serializedJSON ? serializedJSON.setUsed : false,
         });
     }, [
-        canSaveDefaultProps,
         cliProps,
+        canSaveDefaultProps,
         inJSONEditor,
         propsEditType,
         serializedJSON,

package/dist/editor/components/RenderModal/RenderModalJSONPropsEditor.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { State } from './RenderModalData';
-import type { SerializedJSONWithDate } from './SchemaEditor/date-serialization';
+import type { SerializedJSONWithCustomFields } from './SchemaEditor/input-props-serialization';
 export declare type EditType = 'inputProps' | 'defaultProps';
 export declare const RenderModalJSONPropsEditor: React.FC<{
     value: unknown;
@@ -11,5 +11,5 @@ export declare const RenderModalJSONPropsEditor: React.FC<{
     valBeforeSafe: unknown;
     showSaveButton: boolean;
     parseJSON: (str: string) => State;
-    serializedJSON: SerializedJSONWithDate | null;
+    serializedJSON: SerializedJSONWithCustomFields | null;
 }>;

package/dist/editor/components/RenderModal/SchemaEditor/SchemaErrorMessages.js

@@ -54,6 +54,6 @@ const InvalidDefaultProps = ({ zodValidationResult }) => {
 };
 exports.InvalidDefaultProps = InvalidDefaultProps;
 const InvalidSchema = ({ zodValidationResult, reset }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The data does not satisfy the schema:" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema using the JSON editor." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Alternatively, reset the data to the ", (0, jsx_runtime_1.jsx)("code", { children: "defaultProps" }), " that you have defined."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: reset, children: "Reset props" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The data does not satisfy the schema:" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema using the JSON editor." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Alternatively, reset the data to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "defaultProps" }), " that you have defined."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: reset, children: "Reset props" })] }));
 };
 exports.InvalidSchema = InvalidSchema;

package/dist/editor/components/RenderModal/SchemaEditor/ZodArrayEditor.d.ts

@@ -1,13 +1,14 @@
 import React from 'react';
 import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodArrayEditor: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;
     value: unknown[];
     defaultValue: unknown[];
-    setValue: React.Dispatch<React.SetStateAction<unknown[]>>;
-    onSave: (updater: (oldState: unknown[]) => unknown[]) => void;
+    setValue: UpdaterFunction<unknown[]>;
+    onSave: UpdaterFunction<unknown[]>;
     compact: boolean;
     showSaveButton: boolean;
     onRemove: null | (() => void);

package/dist/editor/components/RenderModal/SchemaEditor/ZodArrayEditor.js

@@ -73,7 +73,7 @@ const ZodArrayEditor = ({ schema, jsonPath, compact, setValue: updateValue, defa
         onChange((oldV) => {
             return [...oldV, (0, create_zod_values_1.createZodValues)(def.type, z, zodTypes)];
         }, true);
-    }, [def.type, onChange, z]);
+    }, [def.type, onChange, z, zodTypes]);
     return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsxs)(Element, { style: fieldset, children: [isRoot ? null : ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaFieldsetLabel, { jsonPath: jsonPath, onRemove: onRemove })), (0, jsx_runtime_1.jsx)("div", { style: isRoot ? undefined : container, children: localValue.value.map((child, i) => {
                             var _a;
                             return ((0, jsx_runtime_1.jsx)(ZodArrayItemEditor_1.ZodArrayItemEditor

package/dist/editor/components/RenderModal/SchemaEditor/ZodBooleanEditor.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodBooleanEditor: React.FC<{
     jsonPath: JSONPath;
     value: boolean;
-    setValue: React.Dispatch<React.SetStateAction<boolean>>;
+    setValue: UpdaterFunction<boolean>;
     compact: boolean;
     defaultValue: boolean;
     onSave: (updater: (oldNum: unknown) => boolean) => void;

package/dist/editor/components/RenderModal/SchemaEditor/ZodBooleanEditor.js

@@ -11,7 +11,7 @@ const fullWidth = {
 };
 const ZodBooleanEditor = ({ jsonPath, value, setValue, onSave, compact, defaultValue, onRemove, showSaveButton, saving, }) => {
     const onValueChange = (0, react_1.useCallback)((newValue) => {
-        setValue(newValue);
+        setValue(() => newValue);
     }, [setValue]);
     const onChange = (0, react_1.useCallback)((e) => {
         onValueChange(e.target.checked);

package/dist/editor/components/RenderModal/SchemaEditor/ZodColorEditor.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodColorEditor: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;
     value: string;
     defaultValue: string;
-    setValue: React.Dispatch<React.SetStateAction<string>>;
+    setValue: UpdaterFunction<string>;
     onSave: (updater: (oldNum: unknown) => string) => void;
     onRemove: null | (() => void);
     compact: boolean;

package/dist/editor/components/RenderModal/SchemaEditor/ZodColorEditor.js

@@ -30,15 +30,15 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
             zodValidation: schema.safeParse(value),
         };
     });
-    const onValueChange = (0, react_1.useCallback)((newValue) => {
+    const onValueChange = (0, react_1.useCallback)((newValue, forceApply) => {
         const safeParse = schema.safeParse(newValue);
         const newLocalState = {
             value: newValue,
             zodValidation: safeParse,
         };
         setLocalValue(newLocalState);
-        if (safeParse.success) {
-            setValue(newValue);
+        if (safeParse.success || forceApply) {
+            setValue(() => newValue);
         }
     }, [schema, setValue]);
     const { a, b, g, r } = localValue.zodValidation.success
@@ -53,7 +53,7 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
         };
         setLocalValue(newLocalState);
         if (safeParse.success) {
-            setValue(newColor);
+            setValue(() => newColor);
         }
     }, [a, schema, setValue, zodTypes]);
     const onTextChange = (0, react_1.useCallback)((e) => {
@@ -65,11 +65,11 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
         };
         setLocalValue(newLocalState);
         if (safeParse.success) {
-            setValue(newValue);
+            setValue(() => newValue);
         }
     }, [schema, setValue]);
     const reset = (0, react_1.useCallback)(() => {
-        onValueChange(defaultValue);
+        onValueChange(defaultValue, true);
     }, [defaultValue, onValueChange]);
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value);
@@ -94,7 +94,7 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
         };
         setLocalValue(newLocalState);
         if (safeParse.success) {
-            setValue(newColor);
+            setValue(() => newColor);
         }
     }, [localValue.value, schema, setValue, zodTypes]);
     const onOpacityValueChange = (0, react_1.useCallback)((newValue) => {
@@ -106,7 +106,7 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
         };
         setLocalValue(newLocalState);
         if (safeParse.success) {
-            setValue(newColor);
+            setValue(() => newColor);
         }
     }, [localValue.value, schema, setValue, zodTypes]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { compact: compact, isDefaultValue: value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: colorPicker, children: (0, jsx_runtime_1.jsx)(RemInputTypeColor_1.RemInputTypeColor, { type: "color", style: {

package/dist/editor/components/RenderModal/SchemaEditor/ZodDateEditor.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodDateEditor: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;
     value: Date;
     defaultValue: Date;
-    setValue: React.Dispatch<React.SetStateAction<Date>>;
+    setValue: UpdaterFunction<Date>;
     onSave: (updater: (oldNum: unknown) => Date) => void;
     onRemove: null | (() => void);
     compact: boolean;

package/dist/editor/components/RenderModal/SchemaEditor/ZodDateEditor.js

@@ -50,23 +50,23 @@ const ZodDateEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue
             zodValidation: schema.safeParse(value),
         };
     });
-    const onValueChange = (0, react_1.useCallback)((newValue) => {
+    const onValueChange = (0, react_1.useCallback)((newValue, forceApply) => {
         const safeParse = schema.safeParse(newValue);
         const newLocalState = {
             value: newValue,
             zodValidation: safeParse,
         };
         setLocalValue(newLocalState);
-        if (safeParse.success) {
-            setValue(newValue);
+        if (safeParse.success || forceApply) {
+            setValue(() => newValue);
         }
     }, [schema, setValue]);
     const onChange = (0, react_1.useCallback)((e) => {
         // React does not support e.target.valueAsDate :(
-        onValueChange(new Date(e.target.value));
+        onValueChange(new Date(e.target.value), false);
     }, [onValueChange]);
     const reset = (0, react_1.useCallback)(() => {
-        onValueChange(defaultValue);
+        onValueChange(defaultValue, true);
     }, [defaultValue, onValueChange]);
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value);

package/dist/editor/components/RenderModal/SchemaEditor/ZodEffectEditor.d.ts

@@ -5,7 +5,7 @@ export declare const ZodEffectEditor: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;
     value: unknown;
-    setValue: (value: unknown) => void;
+    setValue: (updater: (oldState: unknown) => unknown) => void;
     compact: boolean;
     defaultValue: unknown;
     onSave: (updater: (oldState: unknown) => unknown) => void;

package/dist/editor/components/RenderModal/SchemaEditor/ZodEffectEditor.js

@@ -26,8 +26,9 @@ const ZodEffectEditor = ({ schema, jsonPath, value, setValue: updateValue, compa
     if (typeName !== z.ZodFirstPartyTypeKind.ZodEffects) {
         throw new Error('expected effect');
     }
-    const onChange = (0, react_1.useCallback)((newValue) => {
-        setLocalValue(() => {
+    const onChange = (0, react_1.useCallback)((updater) => {
+        setLocalValue((oldLocalState) => {
+            const newValue = updater(oldLocalState.value);
             const safeParse = schema.safeParse(newValue);
             if (safeParse.success) {
                 updateValue(() => newValue);

package/dist/editor/components/RenderModal/SchemaEditor/ZodEnumEditor.d.ts

@@ -1,13 +1,14 @@
 import React from 'react';
 import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodEnumEditor: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;
     value: string;
     defaultValue: string;
-    setValue: React.Dispatch<React.SetStateAction<string>>;
-    onSave: (updater: (oldState: string) => string) => void;
+    setValue: UpdaterFunction<string>;
+    onSave: UpdaterFunction<string>;
     compact: boolean;
     showSaveButton: boolean;
     onRemove: null | (() => void);

package/dist/editor/components/RenderModal/SchemaEditor/ZodEnumEditor.js

@@ -31,11 +31,11 @@ const ZodEnumEditor = ({ schema, jsonPath, compact, setValue: updateValue, defau
         throw new Error('expected enum');
     }
     const isRoot = jsonPath.length === 0;
-    const onChange = (0, react_1.useCallback)((updater) => {
+    const onChange = (0, react_1.useCallback)((updater, forceApply) => {
         setLocalValue((oldLocalState) => {
             const newValue = updater(oldLocalState.value);
             const safeParse = schema.safeParse(newValue);
-            if (safeParse.success) {
+            if (safeParse.success || forceApply) {
                 updateValue(updater);
             }
             return {
@@ -45,7 +45,7 @@ const ZodEnumEditor = ({ schema, jsonPath, compact, setValue: updateValue, defau
         });
     }, [schema, updateValue]);
     const reset = (0, react_1.useCallback)(() => {
-        onChange(() => defaultValue);
+        onChange(() => defaultValue, true);
     }, [defaultValue, onChange]);
     const comboBoxValues = (0, react_1.useMemo)(() => {
         return def.values.map((option) => {
@@ -56,7 +56,7 @@ const ZodEnumEditor = ({ schema, jsonPath, compact, setValue: updateValue, defau
                 keyHint: null,
                 leftItem: option === value ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 onClick: (id) => {
-                    onChange(() => id);
+                    onChange(() => id, false);
                 },
                 quickSwitcherLabel: null,
                 subMenu: null,

package/dist/editor/components/RenderModal/SchemaEditor/ZodNullableEditor.d.ts

@@ -8,7 +8,7 @@ export declare const ZodNullableEditor: React.FC<{
     value: unknown;
     defaultValue: unknown;
     schema: z.ZodTypeAny;
-    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    setValue: (updater: (oldNum: unknown) => unknown) => void;
     onSave: (updater: (oldNum: unknown) => unknown) => void;
     onRemove: null | (() => void);
     saving: boolean;

package/dist/editor/components/RenderModal/SchemaEditor/ZodNumberEditor.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodNumberEditor: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;
     value: number;
-    setValue: React.Dispatch<React.SetStateAction<number>>;
+    setValue: UpdaterFunction<number>;
     compact: boolean;
     defaultValue: number;
     onSave: (updater: (oldNum: unknown) => number) => void;

package/dist/editor/components/RenderModal/SchemaEditor/ZodNumberEditor.js

@@ -62,27 +62,30 @@ const ZodNumberEditor = ({ jsonPath, value, schema, setValue, onSave, compact, d
         };
         setLocalValue(newLocalState);
         if (safeParse.success) {
-            setValue(Number(newValue));
+            setValue(() => Number(newValue));
         }
     }, [schema, setValue]);
-    const onValueChange = (0, react_1.useCallback)((newValue) => {
+    const onValueChange = (0, react_1.useCallback)((newValue, forceApply) => {
         const safeParse = schema.safeParse(newValue);
         const newLocalState = {
             value: String(newValue),
             zodValidation: safeParse,
         };
         setLocalValue(newLocalState);
-        if (safeParse.success) {
-            setValue(newValue);
+        if (safeParse.success || forceApply) {
+            setValue(() => newValue);
         }
     }, [schema, setValue]);
+    const onNumberChange = (0, react_1.useCallback)((newValue) => {
+        onValueChange(newValue, false);
+    }, [onValueChange]);
     const isDefault = value === defaultValue;
     const reset = (0, react_1.useCallback)(() => {
-        onValueChange(defaultValue);
+        onValueChange(defaultValue, true);
     }, [defaultValue, onValueChange]);
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value);
     }, [onSave, value]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: isDefault, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: onRemove, saving: saving }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: 'number', value: localValue.value, style: fullWidth, status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onTextChange: onChange, onValueChange: onValueChange, min: getMinValue(schema), max: getMaxValue(schema), step: getStep(schema), rightAlign: false }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: isDefault, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: onRemove, saving: saving }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: 'number', value: localValue.value, style: fullWidth, status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onTextChange: onChange, onValueChange: onNumberChange, min: getMinValue(schema), max: getMaxValue(schema), step: getStep(schema), rightAlign: false }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] })] }));
 };
 exports.ZodNumberEditor = ZodNumberEditor;

package/dist/editor/components/RenderModal/SchemaEditor/ZodObjectEditor.d.ts

@@ -6,7 +6,7 @@ export declare const ZodObjectEditor: React.FC<{
     jsonPath: JSONPath;
     value: unknown;
     defaultValue: unknown;
-    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    setValue: (updater: (oldState: Record<string, unknown>) => Record<string, unknown>) => void;
     compact: boolean;
     onSave: (updater: (oldVal: Record<string, unknown>) => Record<string, unknown>) => void;
     showSaveButton: boolean;

package/dist/editor/components/RenderModal/SchemaEditor/ZodOptionalEditor.d.ts

@@ -8,7 +8,7 @@ export declare const ZodOptionalEditor: React.FC<{
     value: unknown;
     defaultValue: unknown;
     schema: z.ZodTypeAny;
-    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    setValue: (updater: (oldNum: unknown) => unknown) => void;
     onSave: (updater: (oldNum: unknown) => unknown) => void;
     onRemove: null | (() => void);
     saving: boolean;

package/dist/editor/components/RenderModal/SchemaEditor/ZodOrNullishEditor.d.ts

@@ -8,7 +8,7 @@ export declare const ZodOrNullishEditor: React.FC<{
     value: unknown;
     defaultValue: unknown;
     schema: z.ZodTypeAny;
-    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    setValue: (updater: (oldState: unknown) => unknown) => void;
     onSave: (updater: (oldNum: unknown) => unknown) => void;
     onRemove: null | (() => void);
     nullishValue: null | undefined;