@webiny/app-website-builder 6.0.0-alpha.0

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

@@ -0,0 +1,28 @@
+import { toJS } from "mobx";
+import { BindingsProcessor } from "../../../../sdk/BindingsProcessor";
+import { useBreakpoint } from "../../../hooks/useBreakpoint";
+import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
+import { useElementInputsAst } from "../../../hooks/useElementInputsAst";
+import { InheritanceProcessor } from "../../../../sdk/InheritanceProcessor";
+export const useBindingsForElement = elementId => {
+  const {
+    breakpoint,
+    breakpoints
+  } = useBreakpoint();
+  const inputsAst = useElementInputsAst(elementId);
+  return useSelectFromDocument(document => {
+    const bindings = toJS(document.bindings[elementId]) ?? {};
+
+    // Merge element bindings.
+    const breakpointNames = breakpoints.map(bp => bp.name);
+    const bindingsProcessor = new BindingsProcessor(breakpointNames);
+    const inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);
+    return {
+      rawBindings: bindings,
+      resolvedBindings: bindingsProcessor.getBindings(bindings, breakpoint.name),
+      inheritanceMap: inheritanceProcessor.getInheritanceMap(bindings, breakpoint.name)
+    };
+  }, [elementId, breakpoint.name]);
+};
+
+//# sourceMappingURL=useBindingsForElement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["toJS","BindingsProcessor","useBreakpoint","useSelectFromDocument","useElementInputsAst","InheritanceProcessor","useBindingsForElement","elementId","breakpoint","breakpoints","inputsAst","document","bindings","breakpointNames","map","bp","name","bindingsProcessor","inheritanceProcessor","rawBindings","resolvedBindings","getBindings","inheritanceMap","getInheritanceMap"],"sources":["useBindingsForElement.ts"],"sourcesContent":["import { toJS } from \"mobx\";\nimport { BindingsProcessor } from \"~/sdk/BindingsProcessor\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { useElementInputsAst } from \"~/BaseEditor/hooks/useElementInputsAst\";\nimport { InheritanceProcessor } from \"~/sdk/InheritanceProcessor\";\n\nexport const useBindingsForElement = (elementId: string) => {\n    const { breakpoint, breakpoints } = useBreakpoint();\n    const inputsAst = useElementInputsAst(elementId);\n\n    return useSelectFromDocument(\n        document => {\n            const bindings = toJS(document.bindings[elementId]) ?? {};\n\n            // Merge element bindings.\n            const breakpointNames = breakpoints.map(bp => bp.name);\n            const bindingsProcessor = new BindingsProcessor(breakpointNames);\n            const inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);\n\n            return {\n                rawBindings: bindings,\n                resolvedBindings: bindingsProcessor.getBindings(bindings, breakpoint.name),\n                inheritanceMap: inheritanceProcessor.getInheritanceMap(bindings, breakpoint.name)\n            };\n        },\n        [elementId, breakpoint.name]\n    );\n};\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,MAAM;AAC3B,SAASC,iBAAiB;AAC1B,SAASC,aAAa;AACtB,SAASC,qBAAqB;AAC9B,SAASC,mBAAmB;AAC5B,SAASC,oBAAoB;AAE7B,OAAO,MAAMC,qBAAqB,GAAIC,SAAiB,IAAK;EACxD,MAAM;IAAEC,UAAU;IAAEC;EAAY,CAAC,GAAGP,aAAa,CAAC,CAAC;EACnD,MAAMQ,SAAS,GAAGN,mBAAmB,CAACG,SAAS,CAAC;EAEhD,OAAOJ,qBAAqB,CACxBQ,QAAQ,IAAI;IACR,MAAMC,QAAQ,GAAGZ,IAAI,CAACW,QAAQ,CAACC,QAAQ,CAACL,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC;;IAEzD;IACA,MAAMM,eAAe,GAAGJ,WAAW,CAACK,GAAG,CAACC,EAAE,IAAIA,EAAE,CAACC,IAAI,CAAC;IACtD,MAAMC,iBAAiB,GAAG,IAAIhB,iBAAiB,CAACY,eAAe,CAAC;IAChE,MAAMK,oBAAoB,GAAG,IAAIb,oBAAoB,CAACQ,eAAe,EAAEH,SAAS,CAAC;IAEjF,OAAO;MACHS,WAAW,EAAEP,QAAQ;MACrBQ,gBAAgB,EAAEH,iBAAiB,CAACI,WAAW,CAACT,QAAQ,EAAEJ,UAAU,CAACQ,IAAI,CAAC;MAC1EM,cAAc,EAAEJ,oBAAoB,CAACK,iBAAiB,CAACX,QAAQ,EAAEJ,UAAU,CAACQ,IAAI;IACpF,CAAC;EACL,CAAC,EACD,CAACT,SAAS,EAAEC,UAAU,CAACQ,IAAI,CAC/B,CAAC;AACL,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useElementFactory.d.ts

@@ -0,0 +1,2 @@
+import { ElementFactory } from "../../../../sdk/ElementFactory";
+export declare const useElementFactory: () => ElementFactory;

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

@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor";
+import { ElementFactory } from "../../../../sdk/ElementFactory";
+export const useElementFactory = () => {
+  const components = useSelectFromEditor(state => {
+    return state.components;
+  });
+  return useMemo(() => new ElementFactory(components), [components]);
+};
+
+//# sourceMappingURL=useElementFactory.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useSelectFromEditor","ElementFactory","useElementFactory","components","state"],"sources":["useElementFactory.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { ElementFactory } from \"~/sdk/ElementFactory\";\n\nexport const useElementFactory = () => {\n    const components = useSelectFromEditor(state => {\n        return state.components;\n    });\n\n    return useMemo(() => new ElementFactory(components), [components]);\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,mBAAmB;AAC5B,SAASC,cAAc;AAEvB,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACnC,MAAMC,UAAU,GAAGH,mBAAmB,CAACI,KAAK,IAAI;IAC5C,OAAOA,KAAK,CAACD,UAAU;EAC3B,CAAC,CAAC;EAEF,OAAOJ,OAAO,CAAC,MAAM,IAAIE,cAAc,CAACE,UAAU,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;AACtE,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputRenderer.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { ElementInputRendererProps } from "../../../config/ElementInput";
+export declare const useInputRenderer: (name: string) => React.ComponentType<ElementInputRendererProps>;

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { useEditorConfig } from "../../../config/EditorConfig";
+const NullRenderer = ({
+  name
+}) => {
+  return /*#__PURE__*/React.createElement("div", null, "Missing renderer \"", name, "\".");
+};
+export const useInputRenderer = name => {
+  const config = useEditorConfig();
+  const renderer = config.inputRenderers.find(renderer => renderer.name === name);
+  return renderer ? renderer.component : () => /*#__PURE__*/React.createElement(NullRenderer, {
+    name: name
+  });
+};
+
+//# sourceMappingURL=useInputRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEditorConfig","NullRenderer","name","createElement","useInputRenderer","config","renderer","inputRenderers","find","component"],"sources":["useInputRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { useEditorConfig } from \"~/BaseEditor/config/EditorConfig\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/config/ElementInput\";\n\nconst NullRenderer = ({ name }: { name: string }) => {\n    return <div>Missing renderer &quot;{name}&quot;.</div>;\n};\n\nexport const useInputRenderer = (name: string): React.ComponentType<ElementInputRendererProps> => {\n    const config = useEditorConfig();\n\n    const renderer = config.inputRenderers.find(renderer => renderer.name === name);\n\n    return renderer ? renderer.component : () => <NullRenderer name={name} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AAGxB,MAAMC,YAAY,GAAGA,CAAC;EAAEC;AAAuB,CAAC,KAAK;EACjD,oBAAOH,KAAA,CAAAI,aAAA,cAAK,qBAAuB,EAACD,IAAI,EAAC,KAAY,CAAC;AAC1D,CAAC;AAED,OAAO,MAAME,gBAAgB,GAAIF,IAAY,IAAqD;EAC9F,MAAMG,MAAM,GAAGL,eAAe,CAAC,CAAC;EAEhC,MAAMM,QAAQ,GAAGD,MAAM,CAACE,cAAc,CAACC,IAAI,CAACF,QAAQ,IAAIA,QAAQ,CAACJ,IAAI,KAAKA,IAAI,CAAC;EAE/E,OAAOI,QAAQ,GAAGA,QAAQ,CAACG,SAAS,GAAG,mBAAMV,KAAA,CAAAI,aAAA,CAACF,YAAY;IAACC,IAAI,EAAEA;EAAK,CAAE,CAAC;AAC7E,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.d.ts

@@ -0,0 +1,27 @@
+import type { ValueBinding } from "../../../../sdk/types";
+import { InputAstNode } from "../../../../sdk/ComponentManifestToAstConverter";
+import { type IMetadata } from "../../../metadata";
+export type OnChangeParams = {
+    value: InputValueObject;
+    metadata: IMetadata;
+};
+export type InputBindingOnChange = (cb: (params: OnChangeParams) => void) => void;
+export declare class InputValueObject {
+    private value;
+    constructor(value: any);
+    set(value: any): void;
+    get(): any;
+    unset(): void;
+}
+export declare const useInputValue: (elementId: string, node: InputAstNode) => {
+    value: ValueBinding;
+    metadata: IMetadata;
+    inheritanceMap: {
+        overridden: boolean;
+        inheritedFrom?: string | undefined;
+    };
+    onReset: () => void;
+    onChange: (cb: (params: OnChangeParams) => void) => void;
+    onPreviewChange: (cb: (params: OnChangeParams) => void) => void;
+    setBindingType: (type: "static" | "expression") => void;
+};

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

@@ -0,0 +1,175 @@
+import { useCallback, useMemo, useState } from "react";
+import set from "lodash/set";
+import { generateAlphaNumericLowerCaseId } from "@webiny/utils/generateId";
+import { useDocumentEditor } from "../../../../DocumentEditor";
+import { Commands } from "../../..";
+import { functionConverter } from "../../../../sdk";
+import { useBreakpoint } from "../../../hooks/useBreakpoint";
+import { useBindingsForElement } from "./useBindingsForElement";
+import { useElementInputsAst } from "../../../hooks/useElementInputsAst";
+import { InputsBindingsProcessor } from "../../../../sdk/InputBindingsProcessor";
+import { StylesBindingsProcessor } from "../../../../sdk/StylesBindingsProcessor";
+import { createElement } from "../../../../sdk/createElement";
+import { BreakpointElementMetadata, ElementMetadata, InputMetadata } from "../../../metadata";
+import { useElementFactory } from "./useElementFactory";
+export class InputValueObject {
+  constructor(value) {
+    this.value = value;
+  }
+  set(value) {
+    this.value = value;
+  }
+  get() {
+    return this.value;
+  }
+  unset() {
+    this.value = undefined;
+  }
+}
+function convertBracketPathToDotPath(path) {
+  return path.replace(/\/(\d+)\//g, ".$1");
+}
+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(cb => {
+    const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);
+    const valueObject = new InputValueObject(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());
+    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);
+        }
+      };
+
+      // Run input's `onChange` callback.
+      callback(publicApi, {
+        breakpoint: breakpoint.name
+      });
+    }
+    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);
+    });
+
+    // 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);
+    editor.executeCommand(Commands.PreviewPatchElement, {
+      elementId: elementId,
+      patch: updatedInputs.createJsonPatch(rawBindings)
+    });
+  }, [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
+        }
+      };
+    });
+  }, [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
+  };
+};
+
+//# sourceMappingURL=useInputValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useMemo","useState","set","generateAlphaNumericLowerCaseId","useDocumentEditor","Commands","functionConverter","useBreakpoint","useBindingsForElement","useElementInputsAst","InputsBindingsProcessor","StylesBindingsProcessor","createElement","BreakpointElementMetadata","ElementMetadata","InputMetadata","useElementFactory","InputValueObject","constructor","value","get","unset","undefined","convertBracketPathToDotPath","path","replace","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","cb","deepInputs","toDeepInputs","valueObject","updaterInput","valuePath","devFriendlyInputs","structuredClone","devFriendlyStyles","toDeepStyles","styles","callback","deserialize","publicApi","params","updateDocument","document","createUpdate","applyToDocument","onPreviewChange","static","updatedInputs","executeCommand","PreviewPatchElement","patch","createJsonPatch","setBindingType","type","state","bindings","valueBinding","expression","onReset"],"sources":["useInputValue.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport set from \"lodash/set\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils/generateId\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport type { ValueBinding } from \"~/sdk/types\";\nimport { Commands } from \"~/BaseEditor\";\nimport { InputAstNode } from \"~/sdk/ComponentManifestToAstConverter\";\nimport { functionConverter } from \"~/sdk\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { useBindingsForElement } from \"./useBindingsForElement\";\nimport { useElementInputsAst } from \"~/BaseEditor/hooks/useElementInputsAst\";\nimport { InputsBindingsProcessor } from \"~/sdk/InputBindingsProcessor\";\nimport { StylesBindingsProcessor } from \"~/sdk/StylesBindingsProcessor\";\nimport { createElement, CreateElementParams } from \"~/sdk/createElement\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    InputMetadata,\n    type IMetadata\n} from \"~/BaseEditor/metadata\";\nimport { useElementFactory } from \"./useElementFactory\";\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\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        (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            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            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\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\n            editor.executeCommand(Commands.PreviewPatchElement, {\n                elementId: elementId,\n                patch: updatedInputs.createJsonPatch(rawBindings)\n            });\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":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useRepeatValue.d.ts

@@ -0,0 +1,4 @@
+export declare const useRepeatValue: (elementId: string) => {
+    value: string | undefined;
+    onChange: (value: string | undefined) => void;
+};

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

@@ -0,0 +1,28 @@
+import set from "lodash/set";
+import { useCallback } from "react";
+import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
+import { useDocumentEditor } from "../../../../DocumentEditor";
+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
+  };
+};
+
+//# sourceMappingURL=useRepeatValue.js.map

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

@@ -0,0 +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\";\nimport { useCallback } from \"react\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\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,YAAY;AAC5B,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":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useStateArrays.d.ts

@@ -0,0 +1 @@
+export declare const useStateArrays: () => import("./StatePathsCollection").PathOption[];

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

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

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

@@ -0,0 +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\";\nimport { StatePathsExtractor } from \"~/BaseEditor/defaultConfig/Sidebar/ElementSettings/StatePathsExtractor\";\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":[]}

package/BaseEditor/defaultConfig/Sidebar/InfoMessage.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactElement } from "react";
+export interface InfoMessageProps {
+    message: string;
+    icon?: ReactElement;
+}
+export declare const InfoMessage: ({ message, icon }: InfoMessageProps) => React.JSX.Element;

package/BaseEditor/defaultConfig/Sidebar/InfoMessage.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Text, Icon } from "@webiny/admin-ui";
+export const InfoMessage = ({
+  message,
+  icon
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-neutral-dimmed wby-p-md wby-flex wby-flex-col wby-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: "wby-text-center wby-text-neutral-dimmed wby-my-sm"
+  }, message));
+};
+
+//# sourceMappingURL=InfoMessage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Text","Icon","InfoMessage","message","icon","createElement","className","label","size","color"],"sources":["InfoMessage.tsx"],"sourcesContent":["import React, { ReactElement } 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={\"wby-bg-neutral-dimmed wby-p-md wby-flex wby-flex-col wby-items-center\"}>\n            {icon && (\n                <Icon label=\"Select an element\" size={\"lg\"} icon={icon} color={\"neutral-light\"} />\n            )}\n            <Text size={\"md\"} className={\"wby-text-center wby-text-neutral-dimmed wby-my-sm\"}>\n                {message}\n            </Text>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAwB,OAAO;AAC3C,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;EAAwE,GACnFF,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;EAAoD,GAC5EH,OACC,CACL,CAAC;AAEd,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface InheritanceLabelProps {
+    text: React.ReactNode;
+    isOverridden: boolean;
+    onReset: () => void;
+    inheritedFrom?: string;
+}
+export declare const InheritanceLabel: ({ inheritedFrom, isOverridden, text, onReset }: InheritanceLabelProps) => React.JSX.Element;
+interface InheritedFromProps {
+    overriddenAt: string | null;
+    inheritedFrom?: string;
+    onReset: () => void;
+}
+export declare const InheritedFrom: ({ overriddenAt, inheritedFrom, onReset }: InheritedFromProps) => React.JSX.Element;
+export {};

package/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js

@@ -0,0 +1,95 @@
+import React, { useMemo } from "react";
+import { Text, Tag, Icon, Button, Separator, DropdownMenu, FormComponentLabel } from "@webiny/admin-ui";
+import { useBreakpoint } from "../../hooks/useBreakpoint";
+const getBreakpointIcon = (breakpoints, name) => {
+  const bp = breakpoints.find(breakpoint => breakpoint.name === name);
+  return bp ? bp.icon : null;
+};
+const iconClassName = "wby-cursor-pointer wby-mr-xs wby-mb-[2px]";
+export const InheritanceLabel = ({
+  inheritedFrom,
+  isOverridden,
+  text,
+  onReset
+}) => {
+  const {
+    breakpoint,
+    breakpoints,
+    isBaseBreakpoint
+  } = useBreakpoint();
+  const baseBreakpoint = breakpoints[0];
+  const icon = useMemo(() => {
+    const bp = inheritedFrom ?? baseBreakpoint.name;
+    return getBreakpointIcon(breakpoints, bp);
+  }, [inheritedFrom, breakpoint.name]);
+  if (isBaseBreakpoint) {
+    return /*#__PURE__*/React.createElement(FormComponentLabel, {
+      text: text
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-items-center"
+  }, /*#__PURE__*/React.createElement(DropdownMenu, {
+    trigger: isOverridden ? /*#__PURE__*/React.createElement(Icon, {
+      icon: icon,
+      label: "",
+      size: "sm",
+      color: "neutral-strong",
+      className: iconClassName,
+      style: {
+        fill: "hsl(var(--bg-success-default))"
+      }
+    }) : /*#__PURE__*/React.createElement(Icon, {
+      icon: icon,
+      label: "",
+      size: "sm",
+      color: "neutral-strong",
+      className: iconClassName
+    }),
+    align: "center",
+    side: "bottom",
+    className: "wy-p-sm wby-shadow-lg"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-p-sm wby-text-sm",
+    style: {
+      width: 200
+    }
+  }, /*#__PURE__*/React.createElement(InheritedFrom, {
+    inheritedFrom: inheritedFrom ?? baseBreakpoint.name,
+    overriddenAt: isOverridden ? breakpoint.name : null,
+    onReset: onReset
+  }))), /*#__PURE__*/React.createElement(FormComponentLabel, {
+    text: text
+  }));
+};
+export const InheritedFrom = ({
+  overriddenAt,
+  inheritedFrom,
+  onReset
+}) => {
+  if (overriddenAt) {
+    return /*#__PURE__*/React.createElement("div", null, "This value is set on the current breakpoint.", /*#__PURE__*/React.createElement(Separator, {
+      variant: "dimmed",
+      margin: "lg"
+    }), /*#__PURE__*/React.createElement(Button, {
+      variant: "primary",
+      onClick: onReset,
+      text: "Reset value",
+      size: "sm"
+    }), /*#__PURE__*/React.createElement(Separator, {
+      variant: "dimmed",
+      margin: "lg"
+    }), "Resetting will inherit the value from the", " ", /*#__PURE__*/React.createElement(Tag, {
+      variant: "neutral-muted",
+      content: inheritedFrom
+    }), " breakpoint.");
+  }
+  return /*#__PURE__*/React.createElement(Text, {
+    size: "sm"
+  }, "This value is inherited from the", " ", /*#__PURE__*/React.createElement(Tag, {
+    variant: "neutral-muted",
+    content: inheritedFrom
+  }), " breakpoint.");
+};
+
+//# sourceMappingURL=InheritanceLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Text","Tag","Icon","Button","Separator","DropdownMenu","FormComponentLabel","useBreakpoint","getBreakpointIcon","breakpoints","name","bp","find","breakpoint","icon","iconClassName","InheritanceLabel","inheritedFrom","isOverridden","text","onReset","isBaseBreakpoint","baseBreakpoint","createElement","className","trigger","label","size","color","style","fill","align","side","width","InheritedFrom","overriddenAt","variant","margin","onClick","content"],"sources":["InheritanceLabel.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Text, Tag, Icon, Button, Separator, DropdownMenu, FormComponentLabel } from \"@webiny/admin-ui\";\nimport { EditorBreakpoint, useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\n\nexport interface InheritanceLabelProps {\n    text: React.ReactNode;\n    isOverridden: boolean;\n    onReset: () => void;\n    inheritedFrom?: string;\n}\n\nconst getBreakpointIcon = (breakpoints: EditorBreakpoint[], name: string) => {\n    const bp = breakpoints.find(breakpoint => breakpoint.name === name);\n    return bp ? bp.icon : null;\n};\n\nconst iconClassName = \"wby-cursor-pointer wby-mr-xs wby-mb-[2px]\";\n\nexport const InheritanceLabel = ({\n    inheritedFrom,\n    isOverridden,\n    text,\n    onReset\n}: InheritanceLabelProps) => {\n    const { breakpoint, breakpoints, isBaseBreakpoint } = useBreakpoint();\n    const baseBreakpoint = breakpoints[0];\n\n    const icon = useMemo(() => {\n        const bp = inheritedFrom ?? baseBreakpoint.name;\n        return getBreakpointIcon(breakpoints, bp);\n    }, [inheritedFrom, breakpoint.name]);\n\n    if (isBaseBreakpoint) {\n        return <FormComponentLabel text={text}/>;\n    }\n\n    return (\n        <div className={\"wby-flex wby-items-center\"}>\n            <DropdownMenu\n                trigger={\n                    isOverridden ? (\n                        <Icon\n                            icon={icon}\n                            label=\"\"\n                            size=\"sm\"\n                            color=\"neutral-strong\"\n                            className={iconClassName}\n                            style={{ fill: \"hsl(var(--bg-success-default))\" }}\n                        />\n                    ) : (\n                        <Icon\n                            icon={icon}\n                            label=\"\"\n                            size=\"sm\"\n                            color=\"neutral-strong\"\n                            className={iconClassName}\n                        />\n                    )\n                }\n                align=\"center\"\n                side=\"bottom\"\n                className={\"wy-p-sm wby-shadow-lg\"}\n            >\n                <div className={\"wby-p-sm wby-text-sm\"} style={{ width: 200 }}>\n                    <InheritedFrom\n                        inheritedFrom={inheritedFrom ?? baseBreakpoint.name}\n                        overriddenAt={isOverridden ? breakpoint.name : null}\n                        onReset={onReset}\n                    />\n                </div>\n            </DropdownMenu>\n            <FormComponentLabel text={text}/>\n        </div>\n    );\n};\n\ninterface InheritedFromProps {\n    overriddenAt: string | null;\n    inheritedFrom?: string;\n    onReset: () => void;\n}\n\nexport const InheritedFrom = ({ overriddenAt, inheritedFrom, onReset }: InheritedFromProps) => {\n    if (overriddenAt) {\n        return (\n            <div>\n                This value is set on the current breakpoint.\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                <Button variant={\"primary\"} onClick={onReset} text={\"Reset value\"} size={\"sm\"} />\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                Resetting will inherit the value from the{\" \"}\n                <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n            </div>\n        );\n    }\n\n    return (\n        <Text size={\"sm\"}>\n            This value is inherited from the{\" \"}\n            <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n        </Text>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const BackgroundColor: (({ elementId }: {
+    elementId: string;
+}) => React.JSX.Element) & {
+    displayName: string;
+};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.js

@@ -0,0 +1,61 @@
+import React, { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { ColorPicker } from "@webiny/admin-ui";
+import { useStyles } from "../../useStyles";
+import { InheritanceLabel } from "../../../InheritanceLabel";
+export const BackgroundColor = observer(({
+  elementId
+}) => {
+  const {
+    styles,
+    onChange,
+    onPreviewChange,
+    inheritanceMap
+  } = useStyles(elementId);
+  const [value, setValue] = useState(styles.backgroundColor ?? "transparent");
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    if (styles.backgroundColor !== value) {
+      setValue(styles.backgroundColor ?? "transparent");
+    }
+  }, [styles.backgroundColor]);
+  const handleChange = value => {
+    setValue(value);
+    onPreviewChange(({
+      styles
+    }) => {
+      styles.set("backgroundColor", value);
+    });
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      onChange(({
+        styles
+      }) => {
+        styles.set("backgroundColor", value);
+      });
+    }, 300); // wait 300ms after last input event
+  };
+  const onReset = () => {
+    onChange(({
+      styles
+    }) => {
+      styles.unset("backgroundColor");
+    });
+  };
+  const inheritance = inheritanceMap?.backgroundColor ?? {};
+  return /*#__PURE__*/React.createElement(ColorPicker, {
+    label: /*#__PURE__*/React.createElement(InheritanceLabel, {
+      onReset: onReset,
+      isOverridden: inheritance?.overridden ?? false,
+      inheritedFrom: inheritance?.inheritedFrom,
+      text: "Color"
+    }),
+    description: "Select your background color",
+    value: value,
+    onChange: handleChange
+  });
+});
+
+//# sourceMappingURL=BackgroundColor.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","useState","observer","ColorPicker","useStyles","InheritanceLabel","BackgroundColor","elementId","styles","onChange","onPreviewChange","inheritanceMap","value","setValue","backgroundColor","timeoutRef","handleChange","set","current","clearTimeout","setTimeout","onReset","unset","inheritance","createElement","label","isOverridden","overridden","inheritedFrom","text","description"],"sources":["BackgroundColor.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { ColorPicker } from \"@webiny/admin-ui\";\n\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel\";\n\nexport const BackgroundColor = observer(({ elementId }: { elementId: string }) => {\n    const { styles, onChange, onPreviewChange, inheritanceMap } = useStyles(elementId);\n    const [value, setValue] = useState(styles.backgroundColor ?? \"transparent\");\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n        if (styles.backgroundColor !== value) {\n            setValue(styles.backgroundColor ?? \"transparent\");\n        }\n    }, [styles.backgroundColor]);\n\n    const handleChange = (value: string) => {\n        setValue(value);\n        onPreviewChange(({ styles }) => {\n            styles.set(\"backgroundColor\", value);\n        });\n\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n\n        timeoutRef.current = setTimeout(() => {\n            onChange(({ styles }) => {\n                styles.set(\"backgroundColor\", value);\n            });\n        }, 300); // wait 300ms after last input event\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundColor\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundColor ?? {};\n\n    return (\n        <ColorPicker\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Color\"}\n                />\n            }\n            description=\"Select your background color\"\n            value={value}\n            onChange={handleChange}\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC1D,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,WAAW,QAAQ,kBAAkB;AAE9C,SAASC,SAAS;AAClB,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,eAAe,GAAGJ,QAAQ,CAAC,CAAC;EAAEK;AAAiC,CAAC,KAAK;EAC9E,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,eAAe;IAAEC;EAAe,CAAC,GAAGP,SAAS,CAACG,SAAS,CAAC;EAClF,MAAM,CAACK,KAAK,EAAEC,QAAQ,CAAC,GAAGZ,QAAQ,CAACO,MAAM,CAACM,eAAe,IAAI,aAAa,CAAC;EAC3E,MAAMC,UAAU,GAAGf,MAAM,CAAuC,IAAI,CAAC;EAErED,SAAS,CAAC,MAAM;IACZ,IAAIS,MAAM,CAACM,eAAe,KAAKF,KAAK,EAAE;MAClCC,QAAQ,CAACL,MAAM,CAACM,eAAe,IAAI,aAAa,CAAC;IACrD;EACJ,CAAC,EAAE,CAACN,MAAM,CAACM,eAAe,CAAC,CAAC;EAE5B,MAAME,YAAY,GAAIJ,KAAa,IAAK;IACpCC,QAAQ,CAACD,KAAK,CAAC;IACfF,eAAe,CAAC,CAAC;MAAEF;IAAO,CAAC,KAAK;MAC5BA,MAAM,CAACS,GAAG,CAAC,iBAAiB,EAAEL,KAAK,CAAC;IACxC,CAAC,CAAC;IAEF,IAAIG,UAAU,CAACG,OAAO,EAAE;MACpBC,YAAY,CAACJ,UAAU,CAACG,OAAO,CAAC;IACpC;IAEAH,UAAU,CAACG,OAAO,GAAGE,UAAU,CAAC,MAAM;MAClCX,QAAQ,CAAC,CAAC;QAAED;MAAO,CAAC,KAAK;QACrBA,MAAM,CAACS,GAAG,CAAC,iBAAiB,EAAEL,KAAK,CAAC;MACxC,CAAC,CAAC;IACN,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;EACb,CAAC;EAED,MAAMS,OAAO,GAAGA,CAAA,KAAM;IAClBZ,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACc,KAAK,CAAC,iBAAiB,CAAC;IACnC,CAAC,CAAC;EACN,CAAC;EAED,MAAMC,WAAW,GAAGZ,cAAc,EAAEG,eAAe,IAAI,CAAC,CAAC;EAEzD,oBACIhB,KAAA,CAAA0B,aAAA,CAACrB,WAAW;IACRsB,KAAK,eACD3B,KAAA,CAAA0B,aAAA,CAACnB,gBAAgB;MACbgB,OAAO,EAAEA,OAAQ;MACjBK,YAAY,EAAEH,WAAW,EAAEI,UAAU,IAAI,KAAM;MAC/CC,aAAa,EAAEL,WAAW,EAAEK,aAAc;MAC1CC,IAAI,EAAE;IAAQ,CACjB,CACJ;IACDC,WAAW,EAAC,8BAA8B;IAC1ClB,KAAK,EAAEA,KAAM;IACbH,QAAQ,EAAEO;EAAa,CAC1B,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}