@webiny/app-website-builder 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.js

@@ -2,197 +2,208 @@ import { useCallback, useMemo, useState } from "react";
 import set from "lodash/set.js";
 import { generateAlphaNumericLowerCaseId } from "@webiny/utils/generateId.js";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
+import { InputsBindingsProcessor, StylesBindingsProcessor, createElement, functionConverter, isTokenBinding } from "@webiny/website-builder-sdk";
 import { Commands } from "../../../index.js";
-import { functionConverter, InputsBindingsProcessor, StylesBindingsProcessor, createElement } from "@webiny/website-builder-sdk";
-import { executeOnChange, applyAncestorUpdates } from "../../../../editorSdk/utils/executeOnChange.js";
+import { applyAncestorUpdates, executeOnChange } from "../../../../editorSdk/utils/executeOnChange.js";
 import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
 import { useBindingsForElement } from "./useBindingsForElement.js";
 import { useElementInputsAst } from "../../../hooks/useElementInputsAst.js";
 import { BreakpointElementMetadata, ElementMetadata, InputMetadata } from "../../../metadata/index.js";
 import { useElementFactory } from "./useElementFactory.js";
-export class InputValueObject {
-  constructor(value) {
-    this.value = value;
-  }
-  set(value) {
-    this.value = value;
-  }
-  get() {
-    return this.value;
-  }
-  unset() {
-    this.value = undefined;
-  }
+import { PreviewedBindings } from "./PreviewedBindings.js";
+class InputValueObject {
+    constructor(value, token){
+        this.value = value;
+        this.token = token;
+    }
+    set(value) {
+        this.value = value;
+        this.token = void 0;
+    }
+    setToken(token, resolvedValue) {
+        this.token = token;
+        if (void 0 !== resolvedValue) this.value = resolvedValue;
+    }
+    getToken() {
+        return this.token;
+    }
+    get() {
+        return this.value;
+    }
+    unset() {
+        this.value = void 0;
+        this.token = void 0;
+    }
 }
 function convertBracketPathToDotPath(path) {
-  return path.replace(/\/(\d+)\//g, ".$1");
+    return path.replace(/\//g, ".");
 }
-
-/**
- * This makes UI interaction smoother (input blur in particular).
- */
-const withTimeout = cb => {
-  return (...args) => {
-    setTimeout(() => {
-      cb(...args);
-    }, 0);
-  };
-};
-export const useInputValue = (elementId, node) => {
-  const {
-    breakpoint,
-    breakpoints
-  } = useBreakpoint();
-  const editor = useDocumentEditor();
-  const inputsAst = useElementInputsAst(elementId);
-  const elementFactory = useElementFactory();
-  const breakpointNames = useMemo(() => breakpoints.map(bp => bp.name), []);
-
-  // These bindings already include per-breakpoint overrides.
-  const {
-    rawBindings,
-    resolvedBindings,
-    inheritanceMap
-  } = useBindingsForElement(elementId);
-  const stylesProcessor = useMemo(() => {
-    return new StylesBindingsProcessor(elementId ?? "", breakpointNames, rawBindings);
-  }, [elementId, rawBindings]);
-  const inputsProcessor = useMemo(() => {
-    return new InputsBindingsProcessor(elementId ?? "", inputsAst, breakpointNames, rawBindings, elementFactory);
-  }, [elementId, rawBindings]);
-
-  // This value is the final calculated breakpoint value.
-  const value = resolvedBindings.inputs[node.path];
-  const inputMetadata = useMemo(() => {
-    let elementMetadata = new ElementMetadata(elementId, rawBindings.metadata);
-    if (node.input.responsive) {
-      elementMetadata = new BreakpointElementMetadata(breakpointNames, breakpoint.name, elementMetadata);
-    }
-    const valueId = value?.id ?? generateAlphaNumericLowerCaseId();
-    return new InputMetadata(valueId, elementMetadata);
-  }, [elementId, breakpoint.name, rawBindings]);
-  const [localState, setLocalValue] = useState();
-  const onChange = useCallback(withTimeout(cb => {
-    const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);
-    const valueObject = new InputValueObject(value);
-    const updaterInput = {
-      value: valueObject,
-      metadata: inputMetadata
+function getDeepValueAtPath(obj, path) {
+    if (!path) return obj;
+    const keys = path.split("/").map((key)=>/^\d+$/.test(key) ? Number(key) : key);
+    return keys.reduce((acc, key)=>null == acc ? void 0 : acc[key], obj);
+}
+const withTimeout = (cb)=>(...args)=>{
+        setTimeout(()=>{
+            cb(...args);
+        }, 0);
     };
-
-    // Change the input value (and metadata).
-    cb(updaterInput);
-    const valuePath = convertBracketPathToDotPath(node.path);
-    const devFriendlyInputs = set(structuredClone(deepInputs), valuePath, valueObject.get());
-    const devFriendlyStyles = stylesProcessor.toDeepStyles(rawBindings.styles ?? {});
-
-    // Process input's `onChange`.
-    if (node.input.onChange) {
-      const callback = functionConverter.deserialize(
-      // TODO: we know it's a string, but on the frontend it's a function. Fix types.
-      node.input.onChange);
-
-      // Run onChange callback.
-      const publicApi = {
-        inputs: devFriendlyInputs,
-        styles: devFriendlyStyles,
-        createElement: params => {
-          return createElement(params);
+const useInputValue = (elementId, node)=>{
+    const { breakpoint, breakpoints } = useBreakpoint();
+    const editor = useDocumentEditor();
+    const inputsAst = useElementInputsAst(elementId);
+    const elementFactory = useElementFactory();
+    const breakpointNames = useMemo(()=>breakpoints.map((bp)=>bp.name), []);
+    const { rawBindings, resolvedBindings, inheritanceMap } = useBindingsForElement(elementId);
+    const stylesProcessor = useMemo(()=>new StylesBindingsProcessor(elementId ?? "", breakpointNames, rawBindings), [
+        elementId,
+        rawBindings
+    ]);
+    const inputsProcessor = useMemo(()=>new InputsBindingsProcessor(elementId ?? "", inputsAst, breakpointNames, rawBindings, elementFactory), [
+        elementId,
+        rawBindings
+    ]);
+    const value = useMemo(()=>{
+        if (node.children.length > 0) {
+            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);
+            return getDeepValueAtPath(deepInputs, node.path);
         }
-      };
-
-      // Run input's `onChange` callback.
-      callback(publicApi, {
-        breakpoint: breakpoint.name
-      });
-    }
-
-    // Run manifest.onChange + onDescendantChange on ancestors
-    const ancestorUpdates = executeOnChange({
-      editor,
-      elementId,
-      deepInputs: devFriendlyInputs,
-      action: "update",
-      breakpointNames,
-      baseBreakpoint: breakpoint.name,
-      elementFactory,
-      deepStyles: devFriendlyStyles
-    });
-    editor.updateDocument(document => {
-      const inputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);
-      const styles = stylesProcessor.createUpdate(devFriendlyStyles, breakpoint.name);
-      inputs.applyToDocument(document);
-      styles.applyToDocument(document);
-      inputMetadata.applyToDocument(document);
-      applyAncestorUpdates(document, ancestorUpdates, breakpointNames, breakpoint.name, elementFactory);
-    });
-
-    // Clear local value
-    setLocalValue(undefined);
-  }), [elementId, resolvedBindings, breakpoint]);
-
-  /**
-   * In preview, we do not update the editor document. Instead, we create a patch and send it to the preview app.
-   */
-  const onPreviewChange = useCallback(cb => {
-    const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);
-    const valueObject = new InputValueObject(localState ?? value);
-    const updaterInput = {
-      value: valueObject,
-      metadata: inputMetadata
-    };
-
-    // Change the input value (and metadata).
-    cb(updaterInput);
-    const valuePath = convertBracketPathToDotPath(node.path);
-    const devFriendlyInputs = set(structuredClone(deepInputs), valuePath, valueObject.get());
-    setLocalValue({
-      static: valueObject.get()
-    });
-    const updatedInputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);
-    const patch = updatedInputs.createJsonPatch(rawBindings);
-    editor.executeCommand(Commands.PreviewPatchElement, {
-      elementId,
-      patch
-    });
-  }, [elementId, rawBindings, localState]);
-  const setBindingType = useCallback(type => {
-    editor.updateDocument(state => {
-      const bindings = state.bindings[elementId];
-      const valueBinding = bindings.inputs[node.path];
-      if (type === "static") {
-        // Switching to static bindings means we have to remove the expression binding.
-        delete valueBinding.expression;
-      } else {
-        valueBinding.expression = "$noop";
-      }
-      state.bindings[elementId] = {
-        ...bindings,
-        inputs: {
-          ...bindings.inputs,
-          [node.path]: valueBinding
+        return resolvedBindings.inputs[node.path];
+    }, [
+        resolvedBindings,
+        node.path,
+        inputsProcessor
+    ]);
+    const inputMetadata = useMemo(()=>{
+        let elementMetadata = new ElementMetadata(elementId, rawBindings.metadata);
+        if (node.input.responsive) elementMetadata = new BreakpointElementMetadata(breakpointNames, breakpoint.name, elementMetadata);
+        const valueId = value?.id ?? generateAlphaNumericLowerCaseId();
+        return new InputMetadata(valueId, elementMetadata);
+    }, [
+        elementId,
+        breakpoint.name,
+        rawBindings
+    ]);
+    const [localState, setLocalValue] = useState();
+    const previewedBindings = useMemo(()=>new PreviewedBindings(), [
+        elementId
+    ]);
+    const onChange = useCallback(withTimeout((cb)=>{
+        const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);
+        const valueObject = new InputValueObject(value, isTokenBinding(value) ? value.token : void 0);
+        const updaterInput = {
+            value: valueObject,
+            metadata: inputMetadata
+        };
+        cb(updaterInput);
+        const valuePath = convertBracketPathToDotPath(node.path);
+        const devFriendlyInputs = set(JSON.parse(JSON.stringify(deepInputs)), valuePath, valueObject.get());
+        const devFriendlyStyles = stylesProcessor.toDeepStyles(rawBindings.styles ?? {});
+        if (node.input.onChange) {
+            const callback = functionConverter.deserialize(node.input.onChange);
+            const publicApi = {
+                inputs: devFriendlyInputs,
+                styles: devFriendlyStyles,
+                createElement: (params)=>createElement(params)
+            };
+            callback(publicApi, {
+                breakpoint: breakpoint.name
+            });
         }
-      };
-    });
-  }, [elementId]);
-  const onReset = useCallback(() => {
-    onChange(({
-      value,
-      metadata
-    }) => {
-      value.unset();
-      metadata.unset();
-    });
-  }, [onChange]);
-  return {
-    value: localState ?? value,
-    metadata: inputMetadata,
-    inheritanceMap: inheritanceMap.inputs[node.path],
-    onReset,
-    onChange,
-    onPreviewChange,
-    setBindingType
-  };
+        const ancestorUpdates = executeOnChange({
+            editor,
+            elementId,
+            deepInputs: devFriendlyInputs,
+            action: "update",
+            breakpointNames,
+            baseBreakpoint: breakpoint.name,
+            elementFactory,
+            deepStyles: devFriendlyStyles
+        });
+        const tokens = inputsProcessor.toTokenMap(resolvedBindings.inputs);
+        const changedToken = valueObject.getToken();
+        if (changedToken) tokens[node.path] = changedToken;
+        else delete tokens[node.path];
+        editor.updateDocument((document)=>{
+            const inputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name, tokens);
+            const styles = stylesProcessor.createUpdate(devFriendlyStyles, breakpoint.name);
+            inputs.applyToDocument(document);
+            styles.applyToDocument(document);
+            inputMetadata.applyToDocument(document);
+            applyAncestorUpdates(document, ancestorUpdates, breakpointNames, breakpoint.name, elementFactory);
+        });
+        setLocalValue(void 0);
+    }), [
+        elementId,
+        resolvedBindings,
+        breakpoint
+    ]);
+    const onPreviewChange = useCallback((cb)=>{
+        const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);
+        const valueObject = new InputValueObject(localState ?? value);
+        const updaterInput = {
+            value: valueObject,
+            metadata: inputMetadata
+        };
+        cb(updaterInput);
+        const valuePath = convertBracketPathToDotPath(node.path);
+        const devFriendlyInputs = set(JSON.parse(JSON.stringify(deepInputs)), valuePath, valueObject.get());
+        const previewToken = valueObject.getToken();
+        setLocalValue(previewToken ? {
+            token: previewToken
+        } : {
+            static: valueObject.get()
+        });
+        const previewTokens = inputsProcessor.toTokenMap(resolvedBindings.inputs);
+        if (previewToken) previewTokens[node.path] = previewToken;
+        else delete previewTokens[node.path];
+        const updatedInputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name, previewTokens);
+        const patch = previewedBindings.createPatch(updatedInputs, rawBindings);
+        editor.executeCommand(Commands.PreviewPatchElement, {
+            elementId,
+            patch
+        });
+    }, [
+        elementId,
+        rawBindings,
+        localState,
+        previewedBindings
+    ]);
+    const setBindingType = useCallback((type)=>{
+        editor.updateDocument((state)=>{
+            const bindings = state.bindings[elementId];
+            const valueBinding = bindings.inputs[node.path];
+            if ("static" === type) delete valueBinding.expression;
+            else valueBinding.expression = "$noop";
+            state.bindings[elementId] = {
+                ...bindings,
+                inputs: {
+                    ...bindings.inputs,
+                    [node.path]: valueBinding
+                }
+            };
+        });
+    }, [
+        elementId
+    ]);
+    const onReset = useCallback(()=>{
+        onChange(({ value, metadata })=>{
+            value.unset();
+            metadata.unset();
+        });
+    }, [
+        onChange
+    ]);
+    return {
+        value: localState ?? value,
+        metadata: inputMetadata,
+        inheritanceMap: inheritanceMap.inputs[node.path],
+        onReset,
+        onChange,
+        onPreviewChange,
+        setBindingType
+    };
 };
+export { InputValueObject, useInputValue };
 
 //# sourceMappingURL=useInputValue.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useMemo","useState","set","generateAlphaNumericLowerCaseId","useDocumentEditor","Commands","functionConverter","InputsBindingsProcessor","StylesBindingsProcessor","createElement","executeOnChange","applyAncestorUpdates","useBreakpoint","useBindingsForElement","useElementInputsAst","BreakpointElementMetadata","ElementMetadata","InputMetadata","useElementFactory","InputValueObject","constructor","value","get","unset","undefined","convertBracketPathToDotPath","path","replace","withTimeout","cb","args","setTimeout","useInputValue","elementId","node","breakpoint","breakpoints","editor","inputsAst","elementFactory","breakpointNames","map","bp","name","rawBindings","resolvedBindings","inheritanceMap","stylesProcessor","inputsProcessor","inputs","inputMetadata","elementMetadata","metadata","input","responsive","valueId","id","localState","setLocalValue","onChange","deepInputs","toDeepInputs","valueObject","updaterInput","valuePath","devFriendlyInputs","structuredClone","devFriendlyStyles","toDeepStyles","styles","callback","deserialize","publicApi","params","ancestorUpdates","action","baseBreakpoint","deepStyles","updateDocument","document","createUpdate","applyToDocument","onPreviewChange","static","updatedInputs","patch","createJsonPatch","executeCommand","PreviewPatchElement","setBindingType","type","state","bindings","valueBinding","expression","onReset"],"sources":["useInputValue.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport set from \"lodash/set.js\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils/generateId.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { ValueBinding, CreateElementParams } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { InputAstNode } from \"@webiny/website-builder-sdk\";\nimport {\n    functionConverter,\n    InputsBindingsProcessor,\n    StylesBindingsProcessor,\n    createElement\n} from \"@webiny/website-builder-sdk\";\nimport { executeOnChange, applyAncestorUpdates } from \"~/editorSdk/utils/executeOnChange.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { useBindingsForElement } from \"./useBindingsForElement.js\";\nimport { useElementInputsAst } from \"~/BaseEditor/hooks/useElementInputsAst.js\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    InputMetadata,\n    type IMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { useElementFactory } from \"./useElementFactory.js\";\n\nexport type OnChangeParams = {\n    value: InputValueObject;\n    metadata: IMetadata;\n};\n\nexport type InputBindingOnChange = (cb: (params: OnChangeParams) => void) => void;\n\nexport class InputValueObject {\n    private value: any;\n\n    constructor(value: any) {\n        this.value = value;\n    }\n\n    set(value: any) {\n        this.value = value;\n    }\n\n    get() {\n        return this.value;\n    }\n\n    unset() {\n        this.value = undefined;\n    }\n}\n\nfunction convertBracketPathToDotPath(path: string): string {\n    return path.replace(/\\/(\\d+)\\//g, \".$1\");\n}\n\n/**\n * This makes UI interaction smoother (input blur in particular).\n */\nconst withTimeout = <T extends (...args: any[]) => unknown>(cb: T): T => {\n    return ((...args: Parameters<T>) => {\n        setTimeout(() => {\n            cb(...args);\n        }, 0);\n    }) as unknown as T;\n};\n\nexport const useInputValue = (elementId: string, node: InputAstNode) => {\n    const { breakpoint, breakpoints } = useBreakpoint();\n    const editor = useDocumentEditor();\n    const inputsAst = useElementInputsAst(elementId);\n    const elementFactory = useElementFactory();\n\n    const breakpointNames = useMemo(() => breakpoints.map(bp => bp.name), []);\n\n    // These bindings already include per-breakpoint overrides.\n    const { rawBindings, resolvedBindings, inheritanceMap } = useBindingsForElement(elementId);\n\n    const stylesProcessor = useMemo(() => {\n        return new StylesBindingsProcessor(elementId ?? \"\", breakpointNames, rawBindings);\n    }, [elementId, rawBindings]);\n\n    const inputsProcessor = useMemo(() => {\n        return new InputsBindingsProcessor(\n            elementId ?? \"\",\n            inputsAst,\n            breakpointNames,\n            rawBindings,\n            elementFactory\n        );\n    }, [elementId, rawBindings]);\n\n    // This value is the final calculated breakpoint value.\n    const value = resolvedBindings.inputs[node.path];\n\n    const inputMetadata = useMemo((): IMetadata => {\n        let elementMetadata: IMetadata = new ElementMetadata(elementId, rawBindings.metadata);\n\n        if (node.input.responsive) {\n            elementMetadata = new BreakpointElementMetadata(\n                breakpointNames,\n                breakpoint.name,\n                elementMetadata\n            );\n        }\n\n        const valueId = value?.id ?? generateAlphaNumericLowerCaseId();\n\n        return new InputMetadata(valueId, elementMetadata);\n    }, [elementId, breakpoint.name, rawBindings]);\n\n    const [localState, setLocalValue] = useState<ValueBinding>();\n\n    const onChange = useCallback(\n        withTimeout((cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                structuredClone(deepInputs),\n                valuePath,\n                valueObject.get()\n            );\n\n            const devFriendlyStyles = stylesProcessor.toDeepStyles(rawBindings.styles ?? {});\n\n            // Process input's `onChange`.\n            if (node.input.onChange) {\n                const callback = functionConverter.deserialize(\n                    // TODO: we know it's a string, but on the frontend it's a function. Fix types.\n                    node.input.onChange! as any as string\n                );\n\n                // Run onChange callback.\n                const publicApi = {\n                    inputs: devFriendlyInputs,\n                    styles: devFriendlyStyles,\n                    createElement: (params: CreateElementParams) => {\n                        return createElement(params);\n                    }\n                };\n\n                // Run input's `onChange` callback.\n                callback(publicApi, {\n                    breakpoint: breakpoint.name\n                });\n            }\n\n            // Run manifest.onChange + onDescendantChange on ancestors\n            const ancestorUpdates = executeOnChange({\n                editor,\n                elementId,\n                deepInputs: devFriendlyInputs,\n                action: \"update\",\n                breakpointNames,\n                baseBreakpoint: breakpoint.name,\n                elementFactory,\n                deepStyles: devFriendlyStyles\n            });\n\n            editor.updateDocument(document => {\n                const inputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);\n                const styles = stylesProcessor.createUpdate(devFriendlyStyles, breakpoint.name);\n\n                inputs.applyToDocument(document);\n                styles.applyToDocument(document);\n\n                inputMetadata.applyToDocument(document);\n\n                applyAncestorUpdates(\n                    document,\n                    ancestorUpdates,\n                    breakpointNames,\n                    breakpoint.name,\n                    elementFactory\n                );\n            });\n\n            // Clear local value\n            setLocalValue(undefined);\n        }),\n        [elementId, resolvedBindings, breakpoint]\n    );\n\n    /**\n     * In preview, we do not update the editor document. Instead, we create a patch and send it to the preview app.\n     */\n    const onPreviewChange = useCallback(\n        (cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(localState ?? value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                structuredClone(deepInputs),\n                valuePath,\n                valueObject.get()\n            );\n\n            setLocalValue({ static: valueObject.get() });\n\n            const updatedInputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);\n            const patch = updatedInputs.createJsonPatch(rawBindings);\n\n            editor.executeCommand(Commands.PreviewPatchElement, { elementId, patch });\n        },\n        [elementId, rawBindings, localState]\n    );\n\n    const setBindingType = useCallback(\n        (type: \"static\" | \"expression\") => {\n            editor.updateDocument(state => {\n                const bindings = state.bindings[elementId];\n                const valueBinding = bindings.inputs![node.path];\n\n                if (type === \"static\") {\n                    // Switching to static bindings means we have to remove the expression binding.\n                    delete valueBinding.expression;\n                } else {\n                    valueBinding.expression = \"$noop\";\n                }\n\n                state.bindings[elementId] = {\n                    ...bindings,\n                    inputs: {\n                        ...bindings.inputs,\n                        [node.path]: valueBinding\n                    }\n                };\n            });\n        },\n        [elementId]\n    );\n\n    const onReset = useCallback(() => {\n        onChange(({ value, metadata }) => {\n            value.unset();\n            metadata.unset();\n        });\n    }, [onChange]);\n\n    return {\n        value: localState ?? value,\n        metadata: inputMetadata,\n        inheritanceMap: inheritanceMap.inputs[node.path],\n        onReset,\n        onChange,\n        onPreviewChange,\n        setBindingType\n    };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport set from \"lodash/set.js\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils/generateId.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type {\n    ValueBinding,\n    CreateElementParams,\n    TokenReference\n} from \"@webiny/website-builder-sdk\";\nimport { isTokenBinding } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { InputAstNode } from \"@webiny/website-builder-sdk\";\nimport {\n    functionConverter,\n    InputsBindingsProcessor,\n    StylesBindingsProcessor,\n    createElement\n} from \"@webiny/website-builder-sdk\";\nimport { executeOnChange, applyAncestorUpdates } from \"~/editorSdk/utils/executeOnChange.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { useBindingsForElement } from \"./useBindingsForElement.js\";\nimport { useElementInputsAst } from \"~/BaseEditor/hooks/useElementInputsAst.js\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    InputMetadata,\n    type IMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { useElementFactory } from \"./useElementFactory.js\";\nimport { PreviewedBindings } from \"./PreviewedBindings.js\";\n\nexport type OnChangeParams = {\n    value: InputValueObject;\n    metadata: IMetadata;\n};\n\nexport type InputBindingOnChange = (cb: (params: OnChangeParams) => void) => void;\n\nexport class InputValueObject {\n    private value: any;\n    private token: TokenReference | undefined;\n\n    constructor(value: any, token?: TokenReference) {\n        this.value = value;\n        this.token = token;\n    }\n\n    /**\n     * Sets a literal value, clearing any token reference.\n     *\n     * Clearing is the point: a binding holds either a reference or a literal, so picking a free value is\n     * how a user detaches an input from the theme. A renderer that offers both does not need to think\n     * about it — `set` and `setToken` are mutually exclusive by construction.\n     */\n    set(value: any) {\n        this.value = value;\n        this.token = undefined;\n    }\n\n    /**\n     * Binds this input to a design token.\n     *\n     * `value` is still set, to the token's resolved colour: it becomes the reference's `fallback`, so\n     * content keeps rendering the value it had if the theme is later deactivated.\n     */\n    setToken(token: TokenReference, resolvedValue?: any) {\n        this.token = token;\n        if (resolvedValue !== undefined) {\n            this.value = resolvedValue;\n        }\n    }\n\n    getToken() {\n        return this.token;\n    }\n\n    get() {\n        return this.value;\n    }\n\n    unset() {\n        this.value = undefined;\n        this.token = undefined;\n    }\n}\n\nfunction convertBracketPathToDotPath(path: string): string {\n    // Flat binding paths use `/` as the segment separator (e.g. `items/0/label`, `address/city`).\n    // lodash `set`/`get` expect `.`-delimited paths, and treat numeric segments as array indexes,\n    // so a straight `/` -> `.` conversion handles both nested objects and list items.\n    return path.replace(/\\//g, \".\");\n}\n\n/**\n * Reads a value from a deep inputs object using a flat `/`-delimited binding path.\n * Numeric segments are treated as array indexes (e.g. `items/0/label`).\n */\nfunction getDeepValueAtPath(obj: any, path: string): any {\n    if (!path) {\n        return obj;\n    }\n\n    const keys = path.split(\"/\").map(key => (/^\\d+$/.test(key) ? Number(key) : key));\n    return keys.reduce((acc, key) => (acc == null ? undefined : acc[key]), obj);\n}\n\n/**\n * This makes UI interaction smoother (input blur in particular).\n */\nconst withTimeout = <T extends (...args: any[]) => unknown>(cb: T): T => {\n    return ((...args: Parameters<T>) => {\n        setTimeout(() => {\n            cb(...args);\n        }, 0);\n    }) as unknown as T;\n};\n\nexport const useInputValue = (elementId: string, node: InputAstNode) => {\n    const { breakpoint, breakpoints } = useBreakpoint();\n    const editor = useDocumentEditor();\n    const inputsAst = useElementInputsAst(elementId);\n    const elementFactory = useElementFactory();\n\n    const breakpointNames = useMemo(() => breakpoints.map(bp => bp.name), []);\n\n    // These bindings already include per-breakpoint overrides.\n    const { rawBindings, resolvedBindings, inheritanceMap } = useBindingsForElement(elementId);\n\n    const stylesProcessor = useMemo(() => {\n        return new StylesBindingsProcessor(elementId ?? \"\", breakpointNames, rawBindings);\n    }, [elementId, rawBindings]);\n\n    const inputsProcessor = useMemo(() => {\n        return new InputsBindingsProcessor(\n            elementId ?? \"\",\n            inputsAst,\n            breakpointNames,\n            rawBindings,\n            elementFactory\n        );\n    }, [elementId, rawBindings]);\n\n    // This value is the final calculated breakpoint value.\n    // Leaf inputs resolve directly from the flat bindings. Container inputs (object / object-list)\n    // have no flat entry of their own, so we resolve their deep value (object / array) from the\n    // processor - this is what list fields read to render items and to rewrite the whole array.\n    const value = useMemo(() => {\n        if (node.children.length > 0) {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n            return getDeepValueAtPath(deepInputs, node.path);\n        }\n\n        return resolvedBindings.inputs[node.path];\n    }, [resolvedBindings, node.path, inputsProcessor]);\n\n    const inputMetadata = useMemo((): IMetadata => {\n        let elementMetadata: IMetadata = new ElementMetadata(elementId, rawBindings.metadata);\n\n        if (node.input.responsive) {\n            elementMetadata = new BreakpointElementMetadata(\n                breakpointNames,\n                breakpoint.name,\n                elementMetadata\n            );\n        }\n\n        const valueId = value?.id ?? generateAlphaNumericLowerCaseId();\n\n        return new InputMetadata(valueId, elementMetadata);\n    }, [elementId, breakpoint.name, rawBindings]);\n\n    const [localState, setLocalValue] = useState<ValueBinding>();\n\n    // See PreviewedBindings: preview patches are diffed against what the preview shows.\n    const previewedBindings = useMemo(() => new PreviewedBindings(), [elementId]);\n\n    const onChange = useCallback(\n        withTimeout((cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(\n                value,\n                isTokenBinding(value) ? value.token : undefined\n            );\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                JSON.parse(JSON.stringify(deepInputs)),\n                valuePath,\n                valueObject.get()\n            );\n\n            const devFriendlyStyles = stylesProcessor.toDeepStyles(rawBindings.styles ?? {});\n\n            // Process input's `onChange`.\n            if (node.input.onChange) {\n                const callback = functionConverter.deserialize(\n                    // TODO: we know it's a string, but on the frontend it's a function. Fix types.\n                    node.input.onChange! as any as string\n                );\n\n                // Run onChange callback.\n                const publicApi = {\n                    inputs: devFriendlyInputs,\n                    styles: devFriendlyStyles,\n                    createElement: (params: CreateElementParams) => {\n                        return createElement(params);\n                    }\n                };\n\n                // Run input's `onChange` callback.\n                callback(publicApi, {\n                    breakpoint: breakpoint.name\n                });\n            }\n\n            // Run manifest.onChange + onDescendantChange on ancestors\n            const ancestorUpdates = executeOnChange({\n                editor,\n                elementId,\n                deepInputs: devFriendlyInputs,\n                action: \"update\",\n                breakpointNames,\n                baseBreakpoint: breakpoint.name,\n                elementFactory,\n                deepStyles: devFriendlyStyles\n            });\n\n            // Seeded from every token already on this element, then adjusted for the one input that\n            // changed. Passing only the changed path would rewrite every other token binding on the\n            // element as a frozen literal, because an absent path is how `createUpdate` is told to clear\n            // a reference.\n            const tokens = inputsProcessor.toTokenMap(resolvedBindings.inputs);\n            const changedToken = valueObject.getToken();\n            if (changedToken) {\n                tokens[node.path] = changedToken;\n            } else {\n                delete tokens[node.path];\n            }\n\n            editor.updateDocument(document => {\n                const inputs = inputsProcessor.createUpdate(\n                    devFriendlyInputs,\n                    breakpoint.name,\n                    tokens\n                );\n                const styles = stylesProcessor.createUpdate(devFriendlyStyles, breakpoint.name);\n\n                inputs.applyToDocument(document);\n                styles.applyToDocument(document);\n\n                inputMetadata.applyToDocument(document);\n\n                applyAncestorUpdates(\n                    document,\n                    ancestorUpdates,\n                    breakpointNames,\n                    breakpoint.name,\n                    elementFactory\n                );\n            });\n\n            // Clear local value\n            setLocalValue(undefined);\n        }),\n        [elementId, resolvedBindings, breakpoint]\n    );\n\n    /**\n     * In preview, we do not update the editor document. Instead, we create a patch and send it to the preview app.\n     */\n    const onPreviewChange = useCallback(\n        (cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(localState ?? value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                JSON.parse(JSON.stringify(deepInputs)),\n                valuePath,\n                valueObject.get()\n            );\n\n            const previewToken = valueObject.getToken();\n\n            // Mirrors the binding shape, so a token picked in preview looks the same to the renderer as\n            // one that has been committed.\n            setLocalValue(previewToken ? { token: previewToken } : { static: valueObject.get() });\n\n            const previewTokens = inputsProcessor.toTokenMap(resolvedBindings.inputs);\n            if (previewToken) {\n                previewTokens[node.path] = previewToken;\n            } else {\n                delete previewTokens[node.path];\n            }\n\n            const updatedInputs = inputsProcessor.createUpdate(\n                devFriendlyInputs,\n                breakpoint.name,\n                previewTokens\n            );\n\n            const patch = previewedBindings.createPatch(updatedInputs, rawBindings);\n\n            editor.executeCommand(Commands.PreviewPatchElement, { elementId, patch });\n        },\n        [elementId, rawBindings, localState, previewedBindings]\n    );\n\n    const setBindingType = useCallback(\n        (type: \"static\" | \"expression\") => {\n            editor.updateDocument(state => {\n                const bindings = state.bindings[elementId];\n                const valueBinding = bindings.inputs![node.path];\n\n                if (type === \"static\") {\n                    // Switching to static bindings means we have to remove the expression binding.\n                    delete valueBinding.expression;\n                } else {\n                    valueBinding.expression = \"$noop\";\n                }\n\n                state.bindings[elementId] = {\n                    ...bindings,\n                    inputs: {\n                        ...bindings.inputs,\n                        [node.path]: valueBinding\n                    }\n                };\n            });\n        },\n        [elementId]\n    );\n\n    const onReset = useCallback(() => {\n        onChange(({ value, metadata }) => {\n            value.unset();\n            metadata.unset();\n        });\n    }, [onChange]);\n\n    return {\n        value: localState ?? value,\n        metadata: inputMetadata,\n        inheritanceMap: inheritanceMap.inputs[node.path],\n        onReset,\n        onChange,\n        onPreviewChange,\n        setBindingType\n    };\n};\n"],"names":["InputValueObject","value","token","undefined","resolvedValue","convertBracketPathToDotPath","path","getDeepValueAtPath","obj","keys","key","Number","acc","withTimeout","cb","args","setTimeout","useInputValue","elementId","node","breakpoint","breakpoints","useBreakpoint","editor","useDocumentEditor","inputsAst","useElementInputsAst","elementFactory","useElementFactory","breakpointNames","useMemo","bp","rawBindings","resolvedBindings","inheritanceMap","useBindingsForElement","stylesProcessor","StylesBindingsProcessor","inputsProcessor","InputsBindingsProcessor","deepInputs","inputMetadata","elementMetadata","ElementMetadata","BreakpointElementMetadata","valueId","generateAlphaNumericLowerCaseId","InputMetadata","localState","setLocalValue","useState","previewedBindings","PreviewedBindings","onChange","useCallback","valueObject","isTokenBinding","updaterInput","valuePath","devFriendlyInputs","set","JSON","devFriendlyStyles","callback","functionConverter","publicApi","params","createElement","ancestorUpdates","executeOnChange","tokens","changedToken","document","inputs","styles","applyAncestorUpdates","onPreviewChange","previewToken","previewTokens","updatedInputs","patch","Commands","setBindingType","type","state","bindings","valueBinding","onReset","metadata"],"mappings":";;;;;;;;;;;;;AAsCO,MAAMA;IAIT,YAAYC,KAAU,EAAEC,KAAsB,CAAE;QAC5C,IAAI,CAAC,KAAK,GAAGD;QACb,IAAI,CAAC,KAAK,GAAGC;IACjB;IASA,IAAID,KAAU,EAAE;QACZ,IAAI,CAAC,KAAK,GAAGA;QACb,IAAI,CAAC,KAAK,GAAGE;IACjB;IAQA,SAASD,KAAqB,EAAEE,aAAmB,EAAE;QACjD,IAAI,CAAC,KAAK,GAAGF;QACb,IAAIE,AAAkBD,WAAlBC,eACA,IAAI,CAAC,KAAK,GAAGA;IAErB;IAEA,WAAW;QACP,OAAO,IAAI,CAAC,KAAK;IACrB;IAEA,MAAM;QACF,OAAO,IAAI,CAAC,KAAK;IACrB;IAEA,QAAQ;QACJ,IAAI,CAAC,KAAK,GAAGD;QACb,IAAI,CAAC,KAAK,GAAGA;IACjB;AACJ;AAEA,SAASE,4BAA4BC,IAAY;IAI7C,OAAOA,KAAK,OAAO,CAAC,OAAO;AAC/B;AAMA,SAASC,mBAAmBC,GAAQ,EAAEF,IAAY;IAC9C,IAAI,CAACA,MACD,OAAOE;IAGX,MAAMC,OAAOH,KAAK,KAAK,CAAC,KAAK,GAAG,CAACI,CAAAA,MAAQ,QAAQ,IAAI,CAACA,OAAOC,OAAOD,OAAOA;IAC3E,OAAOD,KAAK,MAAM,CAAC,CAACG,KAAKF,MAASE,AAAO,QAAPA,MAAcT,SAAYS,GAAG,CAACF,IAAI,EAAGF;AAC3E;AAKA,MAAMK,cAAc,CAAwCC,KAChD,CAAC,GAAGC;QACRC,WAAW;YACPF,MAAMC;QACV,GAAG;IACP;AAGG,MAAME,gBAAgB,CAACC,WAAmBC;IAC7C,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAE,GAAGC;IACpC,MAAMC,SAASC;IACf,MAAMC,YAAYC,oBAAoBR;IACtC,MAAMS,iBAAiBC;IAEvB,MAAMC,kBAAkBC,QAAQ,IAAMT,YAAY,GAAG,CAACU,CAAAA,KAAMA,GAAG,IAAI,GAAG,EAAE;IAGxE,MAAM,EAAEC,WAAW,EAAEC,gBAAgB,EAAEC,cAAc,EAAE,GAAGC,sBAAsBjB;IAEhF,MAAMkB,kBAAkBN,QAAQ,IACrB,IAAIO,wBAAwBnB,aAAa,IAAIW,iBAAiBG,cACtE;QAACd;QAAWc;KAAY;IAE3B,MAAMM,kBAAkBR,QAAQ,IACrB,IAAIS,wBACPrB,aAAa,IACbO,WACAI,iBACAG,aACAL,iBAEL;QAACT;QAAWc;KAAY;IAM3B,MAAM/B,QAAQ6B,QAAQ;QAClB,IAAIX,KAAK,QAAQ,CAAC,MAAM,GAAG,GAAG;YAC1B,MAAMqB,aAAaF,gBAAgB,YAAY,CAACL,iBAAiB,MAAM;YACvE,OAAO1B,mBAAmBiC,YAAYrB,KAAK,IAAI;QACnD;QAEA,OAAOc,iBAAiB,MAAM,CAACd,KAAK,IAAI,CAAC;IAC7C,GAAG;QAACc;QAAkBd,KAAK,IAAI;QAAEmB;KAAgB;IAEjD,MAAMG,gBAAgBX,QAAQ;QAC1B,IAAIY,kBAA6B,IAAIC,gBAAgBzB,WAAWc,YAAY,QAAQ;QAEpF,IAAIb,KAAK,KAAK,CAAC,UAAU,EACrBuB,kBAAkB,IAAIE,0BAClBf,iBACAT,WAAW,IAAI,EACfsB;QAIR,MAAMG,UAAU5C,OAAO,MAAM6C;QAE7B,OAAO,IAAIC,cAAcF,SAASH;IACtC,GAAG;QAACxB;QAAWE,WAAW,IAAI;QAAEY;KAAY;IAE5C,MAAM,CAACgB,YAAYC,cAAc,GAAGC;IAGpC,MAAMC,oBAAoBrB,QAAQ,IAAM,IAAIsB,qBAAqB;QAAClC;KAAU;IAE5E,MAAMmC,WAAWC,YACbzC,YAAY,CAACC;QACT,MAAM0B,aAAaF,gBAAgB,YAAY,CAACL,iBAAiB,MAAM;QAEvE,MAAMsB,cAAc,IAAIvD,iBACpBC,OACAuD,eAAevD,SAASA,MAAM,KAAK,GAAGE;QAG1C,MAAMsD,eAAe;YACjB,OAAOF;YACP,UAAUd;QACd;QAGA3B,GAAG2C;QAEH,MAAMC,YAAYrD,4BAA4Bc,KAAK,IAAI;QACvD,MAAMwC,oBAAoBC,IACtBC,KAAK,KAAK,CAACA,KAAK,SAAS,CAACrB,cAC1BkB,WACAH,YAAY,GAAG;QAGnB,MAAMO,oBAAoB1B,gBAAgB,YAAY,CAACJ,YAAY,MAAM,IAAI,CAAC;QAG9E,IAAIb,KAAK,KAAK,CAAC,QAAQ,EAAE;YACrB,MAAM4C,WAAWC,kBAAkB,WAAW,CAE1C7C,KAAK,KAAK,CAAC,QAAQ;YAIvB,MAAM8C,YAAY;gBACd,QAAQN;gBACR,QAAQG;gBACR,eAAe,CAACI,SACLC,cAAcD;YAE7B;YAGAH,SAASE,WAAW;gBAChB,YAAY7C,WAAW,IAAI;YAC/B;QACJ;QAGA,MAAMgD,kBAAkBC,gBAAgB;YACpC9C;YACAL;YACA,YAAYyC;YACZ,QAAQ;YACR9B;YACA,gBAAgBT,WAAW,IAAI;YAC/BO;YACA,YAAYmC;QAChB;QAMA,MAAMQ,SAAShC,gBAAgB,UAAU,CAACL,iBAAiB,MAAM;QACjE,MAAMsC,eAAehB,YAAY,QAAQ;QACzC,IAAIgB,cACAD,MAAM,CAACnD,KAAK,IAAI,CAAC,GAAGoD;aAEpB,OAAOD,MAAM,CAACnD,KAAK,IAAI,CAAC;QAG5BI,OAAO,cAAc,CAACiD,CAAAA;YAClB,MAAMC,SAASnC,gBAAgB,YAAY,CACvCqB,mBACAvC,WAAW,IAAI,EACfkD;YAEJ,MAAMI,SAAStC,gBAAgB,YAAY,CAAC0B,mBAAmB1C,WAAW,IAAI;YAE9EqD,OAAO,eAAe,CAACD;YACvBE,OAAO,eAAe,CAACF;YAEvB/B,cAAc,eAAe,CAAC+B;YAE9BG,qBACIH,UACAJ,iBACAvC,iBACAT,WAAW,IAAI,EACfO;QAER;QAGAsB,cAAc9C;IAClB,IACA;QAACe;QAAWe;QAAkBb;KAAW;IAM7C,MAAMwD,kBAAkBtB,YACpB,CAACxC;QACG,MAAM0B,aAAaF,gBAAgB,YAAY,CAACL,iBAAiB,MAAM;QAEvE,MAAMsB,cAAc,IAAIvD,iBAAiBgD,cAAc/C;QAEvD,MAAMwD,eAAe;YACjB,OAAOF;YACP,UAAUd;QACd;QAGA3B,GAAG2C;QAEH,MAAMC,YAAYrD,4BAA4Bc,KAAK,IAAI;QACvD,MAAMwC,oBAAoBC,IACtBC,KAAK,KAAK,CAACA,KAAK,SAAS,CAACrB,cAC1BkB,WACAH,YAAY,GAAG;QAGnB,MAAMsB,eAAetB,YAAY,QAAQ;QAIzCN,cAAc4B,eAAe;YAAE,OAAOA;QAAa,IAAI;YAAE,QAAQtB,YAAY,GAAG;QAAG;QAEnF,MAAMuB,gBAAgBxC,gBAAgB,UAAU,CAACL,iBAAiB,MAAM;QACxE,IAAI4C,cACAC,aAAa,CAAC3D,KAAK,IAAI,CAAC,GAAG0D;aAE3B,OAAOC,aAAa,CAAC3D,KAAK,IAAI,CAAC;QAGnC,MAAM4D,gBAAgBzC,gBAAgB,YAAY,CAC9CqB,mBACAvC,WAAW,IAAI,EACf0D;QAGJ,MAAME,QAAQ7B,kBAAkB,WAAW,CAAC4B,eAAe/C;QAE3DT,OAAO,cAAc,CAAC0D,SAAS,mBAAmB,EAAE;YAAE/D;YAAW8D;QAAM;IAC3E,GACA;QAAC9D;QAAWc;QAAagB;QAAYG;KAAkB;IAG3D,MAAM+B,iBAAiB5B,YACnB,CAAC6B;QACG5D,OAAO,cAAc,CAAC6D,CAAAA;YAClB,MAAMC,WAAWD,MAAM,QAAQ,CAAClE,UAAU;YAC1C,MAAMoE,eAAeD,SAAS,MAAO,CAAClE,KAAK,IAAI,CAAC;YAEhD,IAAIgE,AAAS,aAATA,MAEA,OAAOG,aAAa,UAAU;iBAE9BA,aAAa,UAAU,GAAG;YAG9BF,MAAM,QAAQ,CAAClE,UAAU,GAAG;gBACxB,GAAGmE,QAAQ;gBACX,QAAQ;oBACJ,GAAGA,SAAS,MAAM;oBAClB,CAAClE,KAAK,IAAI,CAAC,EAAEmE;gBACjB;YACJ;QACJ;IACJ,GACA;QAACpE;KAAU;IAGf,MAAMqE,UAAUjC,YAAY;QACxBD,SAAS,CAAC,EAAEpD,KAAK,EAAEuF,QAAQ,EAAE;YACzBvF,MAAM,KAAK;YACXuF,SAAS,KAAK;QAClB;IACJ,GAAG;QAACnC;KAAS;IAEb,OAAO;QACH,OAAOL,cAAc/C;QACrB,UAAUwC;QACV,gBAAgBP,eAAe,MAAM,CAACf,KAAK,IAAI,CAAC;QAChDoE;QACAlC;QACAuB;QACAM;IACJ;AACJ"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useRepeatValue.js

@@ -2,27 +2,29 @@ import set from "lodash/set.js";
 import { useCallback } from "react";
 import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
-export const useRepeatValue = elementId => {
-  const editor = useDocumentEditor();
-  const value = useSelectFromDocument(document => {
-    const bindings = document.bindings[elementId] || {};
-    return bindings.$repeat?.expression;
-  }, [elementId]);
-  const onChange = useCallback(value => {
-    editor.updateDocument(document => {
-      const bindings = document.bindings[elementId] ?? {};
-      if (!value) {
-        delete bindings.$repeat;
-      } else {
-        set(bindings, "$repeat.expression", value);
-      }
-      document.bindings[elementId] = bindings;
-    });
-  }, [elementId]);
-  return {
-    value,
-    onChange
-  };
+const useRepeatValue = (elementId)=>{
+    const editor = useDocumentEditor();
+    const value = useSelectFromDocument((document)=>{
+        const bindings = document.bindings[elementId] || {};
+        return bindings.$repeat?.expression;
+    }, [
+        elementId
+    ]);
+    const onChange = useCallback((value)=>{
+        editor.updateDocument((document)=>{
+            const bindings = document.bindings[elementId] ?? {};
+            if (value) set(bindings, "$repeat.expression", value);
+            else delete bindings.$repeat;
+            document.bindings[elementId] = bindings;
+        });
+    }, [
+        elementId
+    ]);
+    return {
+        value,
+        onChange
+    };
 };
+export { useRepeatValue };
 
 //# sourceMappingURL=useRepeatValue.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useRepeatValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["set","useCallback","useSelectFromDocument","useDocumentEditor","useRepeatValue","elementId","editor","value","document","bindings","$repeat","expression","onChange","updateDocument"],"sources":["useRepeatValue.ts"],"sourcesContent":["import set from \"lodash/set.js\";\nimport { useCallback } from \"react\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\n\nexport const useRepeatValue = (elementId: string) => {\n    const editor = useDocumentEditor();\n\n    const value = useSelectFromDocument(\n        document => {\n            const bindings = document.bindings[elementId] || {};\n\n            return bindings.$repeat?.expression;\n        },\n        [elementId]\n    );\n\n    const onChange = useCallback(\n        (value: string | undefined) => {\n            editor.updateDocument(document => {\n                const bindings = document.bindings[elementId] ?? {};\n                if (!value) {\n                    delete bindings.$repeat;\n                } else {\n                    set(bindings, \"$repeat.expression\", value);\n                }\n\n                document.bindings[elementId] = bindings;\n            });\n        },\n        [elementId]\n    );\n\n    return { value, onChange };\n};\n"],"mappings":"AAAA,OAAOA,GAAG,MAAM,eAAe;AAC/B,SAASC,WAAW,QAAQ,OAAO;AACnC,SAASC,qBAAqB;AAC9B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,cAAc,GAAIC,SAAiB,IAAK;EACjD,MAAMC,MAAM,GAAGH,iBAAiB,CAAC,CAAC;EAElC,MAAMI,KAAK,GAAGL,qBAAqB,CAC/BM,QAAQ,IAAI;IACR,MAAMC,QAAQ,GAAGD,QAAQ,CAACC,QAAQ,CAACJ,SAAS,CAAC,IAAI,CAAC,CAAC;IAEnD,OAAOI,QAAQ,CAACC,OAAO,EAAEC,UAAU;EACvC,CAAC,EACD,CAACN,SAAS,CACd,CAAC;EAED,MAAMO,QAAQ,GAAGX,WAAW,CACvBM,KAAyB,IAAK;IAC3BD,MAAM,CAACO,cAAc,CAACL,QAAQ,IAAI;MAC9B,MAAMC,QAAQ,GAAGD,QAAQ,CAACC,QAAQ,CAACJ,SAAS,CAAC,IAAI,CAAC,CAAC;MACnD,IAAI,CAACE,KAAK,EAAE;QACR,OAAOE,QAAQ,CAACC,OAAO;MAC3B,CAAC,MAAM;QACHV,GAAG,CAACS,QAAQ,EAAE,oBAAoB,EAAEF,KAAK,CAAC;MAC9C;MAEAC,QAAQ,CAACC,QAAQ,CAACJ,SAAS,CAAC,GAAGI,QAAQ;IAC3C,CAAC,CAAC;EACN,CAAC,EACD,CAACJ,SAAS,CACd,CAAC;EAED,OAAO;IAAEE,KAAK;IAAEK;EAAS,CAAC;AAC9B,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/useRepeatValue.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/useRepeatValue.ts"],"sourcesContent":["import set from \"lodash/set.js\";\nimport { useCallback } from \"react\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\n\nexport const useRepeatValue = (elementId: string) => {\n    const editor = useDocumentEditor();\n\n    const value = useSelectFromDocument(\n        document => {\n            const bindings = document.bindings[elementId] || {};\n\n            return bindings.$repeat?.expression;\n        },\n        [elementId]\n    );\n\n    const onChange = useCallback(\n        (value: string | undefined) => {\n            editor.updateDocument(document => {\n                const bindings = document.bindings[elementId] ?? {};\n                if (!value) {\n                    delete bindings.$repeat;\n                } else {\n                    set(bindings, \"$repeat.expression\", value);\n                }\n\n                document.bindings[elementId] = bindings;\n            });\n        },\n        [elementId]\n    );\n\n    return { value, onChange };\n};\n"],"names":["useRepeatValue","elementId","editor","useDocumentEditor","value","useSelectFromDocument","document","bindings","onChange","useCallback","set"],"mappings":";;;;AAKO,MAAMA,iBAAiB,CAACC;IAC3B,MAAMC,SAASC;IAEf,MAAMC,QAAQC,sBACVC,CAAAA;QACI,MAAMC,WAAWD,SAAS,QAAQ,CAACL,UAAU,IAAI,CAAC;QAElD,OAAOM,SAAS,OAAO,EAAE;IAC7B,GACA;QAACN;KAAU;IAGf,MAAMO,WAAWC,YACb,CAACL;QACGF,OAAO,cAAc,CAACI,CAAAA;YAClB,MAAMC,WAAWD,SAAS,QAAQ,CAACL,UAAU,IAAI,CAAC;YAClD,IAAKG,OAGDM,IAAIH,UAAU,sBAAsBH;iBAFpC,OAAOG,SAAS,OAAO;YAK3BD,SAAS,QAAQ,CAACL,UAAU,GAAGM;QACnC;IACJ,GACA;QAACN;KAAU;IAGf,OAAO;QAAEG;QAAOI;IAAS;AAC7B"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useStateArrays.js

@@ -1,9 +1,6 @@
 import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
 import { StatePathsExtractor } from "./StatePathsExtractor.js";
-export const useStateArrays = () => {
-  return useSelectFromDocument(document => {
-    return new StatePathsExtractor(document.state).getPaths().filter(option => option.type.isArray()).values();
-  });
-};
+const useStateArrays = ()=>useSelectFromDocument((document)=>new StatePathsExtractor(document.state).getPaths().filter((option)=>option.type.isArray()).values());
+export { useStateArrays };
 
 //# sourceMappingURL=useStateArrays.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useStateArrays.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSelectFromDocument","StatePathsExtractor","useStateArrays","document","state","getPaths","filter","option","type","isArray","values"],"sources":["useStateArrays.ts"],"sourcesContent":["import { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { StatePathsExtractor } from \"~/BaseEditor/defaultConfig/Sidebar/ElementSettings/StatePathsExtractor.js\";\n\nexport const useStateArrays = () => {\n    return useSelectFromDocument(document => {\n        return new StatePathsExtractor(document.state)\n            .getPaths()\n            .filter(option => option.type.isArray())\n            .values();\n    });\n};\n"],"mappings":"AAAA,SAASA,qBAAqB;AAC9B,SAASC,mBAAmB;AAE5B,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAChC,OAAOF,qBAAqB,CAACG,QAAQ,IAAI;IACrC,OAAO,IAAIF,mBAAmB,CAACE,QAAQ,CAACC,KAAK,CAAC,CACzCC,QAAQ,CAAC,CAAC,CACVC,MAAM,CAACC,MAAM,IAAIA,MAAM,CAACC,IAAI,CAACC,OAAO,CAAC,CAAC,CAAC,CACvCC,MAAM,CAAC,CAAC;EACjB,CAAC,CAAC;AACN,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/useStateArrays.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/useStateArrays.ts"],"sourcesContent":["import { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { StatePathsExtractor } from \"~/BaseEditor/defaultConfig/Sidebar/ElementSettings/StatePathsExtractor.js\";\n\nexport const useStateArrays = () => {\n    return useSelectFromDocument(document => {\n        return new StatePathsExtractor(document.state)\n            .getPaths()\n            .filter(option => option.type.isArray())\n            .values();\n    });\n};\n"],"names":["useStateArrays","useSelectFromDocument","document","StatePathsExtractor","option"],"mappings":";;AAGO,MAAMA,iBAAiB,IACnBC,sBAAsBC,CAAAA,WAClB,IAAIC,oBAAoBD,SAAS,KAAK,EACxC,QAAQ,GACR,MAAM,CAACE,CAAAA,SAAUA,OAAO,IAAI,CAAC,OAAO,IACpC,MAAM"}

package/BaseEditor/defaultConfig/Sidebar/InfoMessage.js

@@ -1,20 +1,16 @@
-import React from "react";
-import { Text, Icon } from "@webiny/admin-ui";
-export const InfoMessage = ({
-  message,
-  icon
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "bg-neutral-dimmed p-md flex flex-col items-center"
-  }, icon && /*#__PURE__*/React.createElement(Icon, {
-    label: "Select an element",
-    size: "lg",
-    icon: icon,
-    color: "neutral-light"
-  }), /*#__PURE__*/React.createElement(Text, {
-    size: "md",
-    className: "text-center text-neutral-dimmed my-sm"
-  }, message));
-};
+import react from "react";
+import { Icon, Text } from "@webiny/admin-ui";
+const InfoMessage = ({ message, icon })=>/*#__PURE__*/ react.createElement("div", {
+        className: "bg-neutral-dark/2 rounded-lg p-md flex flex-col items-center w-full"
+    }, icon && /*#__PURE__*/ react.createElement(Icon, {
+        label: "Select an element",
+        size: "lg",
+        icon: icon,
+        color: "neutral-light"
+    }), /*#__PURE__*/ react.createElement(Text, {
+        size: "md",
+        className: "text-center text-neutral-strong my-sm"
+    }, message));
+export { InfoMessage };
 
 //# sourceMappingURL=InfoMessage.js.map

package/BaseEditor/defaultConfig/Sidebar/InfoMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","Icon","InfoMessage","message","icon","createElement","className","label","size","color"],"sources":["InfoMessage.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport React from \"react\";\nimport { Text, Icon } from \"@webiny/admin-ui\";\n\nexport interface InfoMessageProps {\n    message: string;\n    icon?: ReactElement;\n}\n\nexport const InfoMessage = ({ message, icon }: InfoMessageProps) => {\n    return (\n        <div className={\"bg-neutral-dimmed p-md flex flex-col items-center\"}>\n            {icon && (\n                <Icon label=\"Select an element\" size={\"lg\"} icon={icon} color={\"neutral-light\"} />\n            )}\n            <Text size={\"md\"} className={\"text-center text-neutral-dimmed my-sm\"}>\n                {message}\n            </Text>\n        </div>\n    );\n};\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAO7C,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAAEC,OAAO;EAAEC;AAAuB,CAAC,KAAK;EAChE,oBACIL,KAAA,CAAAM,aAAA;IAAKC,SAAS,EAAE;EAAoD,GAC/DF,IAAI,iBACDL,KAAA,CAAAM,aAAA,CAACJ,IAAI;IAACM,KAAK,EAAC,mBAAmB;IAACC,IAAI,EAAE,IAAK;IAACJ,IAAI,EAAEA,IAAK;IAACK,KAAK,EAAE;EAAgB,CAAE,CACpF,eACDV,KAAA,CAAAM,aAAA,CAACL,IAAI;IAACQ,IAAI,EAAE,IAAK;IAACF,SAAS,EAAE;EAAwC,GAChEH,OACC,CACL,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/InfoMessage.js","sources":["../../../../src/BaseEditor/defaultConfig/Sidebar/InfoMessage.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport React from \"react\";\nimport { Text, Icon } from \"@webiny/admin-ui\";\n\nexport interface InfoMessageProps {\n    message: string;\n    icon?: ReactElement;\n}\n\nexport const InfoMessage = ({ message, icon }: InfoMessageProps) => {\n    return (\n        <div className={\"bg-neutral-dark/2 rounded-lg p-md flex flex-col items-center w-full\"}>\n            {icon && (\n                <Icon label=\"Select an element\" size={\"lg\"} icon={icon} color={\"neutral-light\"} />\n            )}\n            <Text size={\"md\"} className={\"text-center text-neutral-strong my-sm\"}>\n                {message}\n            </Text>\n        </div>\n    );\n};\n"],"names":["InfoMessage","message","icon","Icon","Text"],"mappings":";;AASO,MAAMA,cAAc,CAAC,EAAEC,OAAO,EAAEC,IAAI,EAAoB,GACpD,WAAP,GACI,oBAAC;QAAI,WAAW;OACXA,QAAQ,WAARA,GACG,oBAACC,MAAIA;QAAC,OAAM;QAAoB,MAAM;QAAM,MAAMD;QAAM,OAAO;sBAEnE,oBAACE,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBH"}