npm - @webiny/app-website-builder - Versions diffs - 6.4.11 → 6.6.0-alpha.1 - Mend

@webiny/app-website-builder 6.4.11 → 6.6.0-alpha.1

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

Files changed (1700) hide show

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useBindingsForElement.d.ts CHANGED Viewed

@@ -3,22 +3,6 @@ export declare const useBindingsForElement: (elementId: string) => {
     resolvedBindings: import("@webiny/website-builder-sdk").DocumentElementBindings & {
         inputs: import("@webiny/website-builder-sdk").DocumentElementInputBindings;
         styles: Partial<{
-            clipPath?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ClipPath | undefined> | undefined;
-            filter?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Filter | undefined> | undefined;
-            mask?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Mask<string | number> | undefined> | undefined;
-            transform?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Transform | undefined> | undefined;
-            fill?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Fill | undefined> | undefined;
-            height?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Height<string | number> | undefined> | undefined;
-            left?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Left<string | number> | undefined> | undefined;
-            top?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Top<string | number> | undefined> | undefined;
-            width?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Width<string | number> | undefined> | undefined;
-            position?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Position | undefined> | undefined;
-            content?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Content | undefined> | undefined;
-            translate?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Translate<string | number> | undefined> | undefined;
-            color?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Color | undefined> | undefined;
-            bottom?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Bottom<string | number> | undefined> | undefined;
-            right?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Right<string | number> | undefined> | undefined;
-            page?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Page | undefined> | undefined;
             accentColor?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.AccentColor | undefined> | undefined;
             alignContent?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.AlignContent | undefined> | undefined;
             alignItems?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.AlignItems | undefined> | undefined;
@@ -89,6 +73,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             borderTopRightRadius?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.BorderTopRightRadius<string | number> | undefined> | undefined;
             borderTopStyle?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.BorderTopStyle | undefined> | undefined;
             borderTopWidth?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.BorderTopWidth<string | number> | undefined> | undefined;
+            bottom?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Bottom<string | number> | undefined> | undefined;
             boxDecorationBreak?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.BoxDecorationBreak | undefined> | undefined;
             boxSizing?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.BoxSizing | undefined> | undefined;
             breakAfter?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.BreakAfter | undefined> | undefined;
@@ -98,7 +83,9 @@ export declare const useBindingsForElement: (elementId: string) => {
             caretColor?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.CaretColor | undefined> | undefined;
             caretShape?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.CaretShape | undefined> | undefined;
             clear?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Clear | undefined> | undefined;
+            clipPath?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ClipPath | undefined> | undefined;
             clipRule?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ClipRule | undefined> | undefined;
+            color?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Color | undefined> | undefined;
             colorAdjust?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PrintColorAdjust | undefined> | undefined;
             colorInterpolationFilters?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ColorInterpolationFilters | undefined> | undefined;
             colorScheme?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ColorScheme | undefined> | undefined;
@@ -117,6 +104,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             containIntrinsicWidth?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ContainIntrinsicWidth<string | number> | undefined> | undefined;
             containerName?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ContainerName | undefined> | undefined;
             containerType?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ContainerType | undefined> | undefined;
+            content?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Content | undefined> | undefined;
             contentVisibility?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ContentVisibility | undefined> | undefined;
             counterIncrement?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.CounterIncrement | undefined> | undefined;
             counterReset?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.CounterReset | undefined> | undefined;
@@ -130,8 +118,10 @@ export declare const useBindingsForElement: (elementId: string) => {
             dominantBaseline?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.DominantBaseline | undefined> | undefined;
             emptyCells?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.EmptyCells | undefined> | undefined;
             fieldSizing?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FieldSizing | undefined> | undefined;
+            fill?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Fill | undefined> | undefined;
             fillOpacity?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FillOpacity | undefined> | undefined;
             fillRule?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FillRule | undefined> | undefined;
+            filter?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Filter | undefined> | undefined;
             flexBasis?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexBasis<string | number> | undefined> | undefined;
             flexDirection?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexDirection | undefined> | undefined;
             flexGrow?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexGrow | undefined> | undefined;
@@ -177,6 +167,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             gridTemplateColumns?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.GridTemplateColumns<string | number> | undefined> | undefined;
             gridTemplateRows?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.GridTemplateRows<string | number> | undefined> | undefined;
             hangingPunctuation?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.HangingPunctuation | undefined> | undefined;
+            height?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Height<string | number> | undefined> | undefined;
             hyphenateCharacter?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.HyphenateCharacter | undefined> | undefined;
             hyphenateLimitChars?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.HyphenateLimitChars | undefined> | undefined;
             hyphens?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Hyphens | undefined> | undefined;
@@ -196,6 +187,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             justifyItems?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.JustifyItems | undefined> | undefined;
             justifySelf?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.JustifySelf | undefined> | undefined;
             justifyTracks?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.JustifyTracks | undefined> | undefined;
+            left?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Left<string | number> | undefined> | undefined;
             letterSpacing?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.LetterSpacing<string | number> | undefined> | undefined;
             lightingColor?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.LightingColor | undefined> | undefined;
             lineBreak?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.LineBreak | undefined> | undefined;
@@ -284,10 +276,12 @@ export declare const useBindingsForElement: (elementId: string) => {
             paddingLeft?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PaddingLeft<string | number> | undefined> | undefined;
             paddingRight?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PaddingRight<string | number> | undefined> | undefined;
             paddingTop?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PaddingTop<string | number> | undefined> | undefined;
+            page?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Page | undefined> | undefined;
             paintOrder?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PaintOrder | undefined> | undefined;
             perspective?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Perspective<string | number> | undefined> | undefined;
             perspectiveOrigin?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PerspectiveOrigin<string | number> | undefined> | undefined;
             pointerEvents?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PointerEvents | undefined> | undefined;
+            position?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Position | undefined> | undefined;
             positionAnchor?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PositionAnchor | undefined> | undefined;
             positionArea?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PositionArea | undefined> | undefined;
             positionTryFallbacks?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PositionTryFallbacks | undefined> | undefined;
@@ -297,6 +291,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             quotes?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Quotes | undefined> | undefined;
             r?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.R<string | number> | undefined> | undefined;
             resize?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Resize | undefined> | undefined;
+            right?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Right<string | number> | undefined> | undefined;
             rotate?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Rotate | undefined> | undefined;
             rowGap?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.RowGap<string | number> | undefined> | undefined;
             rubyAlign?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.RubyAlign | undefined> | undefined;
@@ -382,7 +377,9 @@ export declare const useBindingsForElement: (elementId: string) => {
             textWrapMode?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TextWrapMode | undefined> | undefined;
             textWrapStyle?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TextWrapStyle | undefined> | undefined;
             timelineScope?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TimelineScope | undefined> | undefined;
+            top?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Top<string | number> | undefined> | undefined;
             touchAction?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TouchAction | undefined> | undefined;
+            transform?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Transform | undefined> | undefined;
             transformBox?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransformBox | undefined> | undefined;
             transformOrigin?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransformOrigin<string | number> | undefined> | undefined;
             transformStyle?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransformStyle | undefined> | undefined;
@@ -391,6 +388,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             transitionDuration?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransitionDuration<string & {}> | undefined> | undefined;
             transitionProperty?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransitionProperty | undefined> | undefined;
             transitionTimingFunction?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransitionTimingFunction | undefined> | undefined;
+            translate?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Translate<string | number> | undefined> | undefined;
             unicodeBidi?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.UnicodeBidi | undefined> | undefined;
             userSelect?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.UserSelect | undefined> | undefined;
             vectorEffect?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.VectorEffect | undefined> | undefined;
@@ -404,6 +402,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             whiteSpace?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WhiteSpace | undefined> | undefined;
             whiteSpaceCollapse?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WhiteSpaceCollapse | undefined> | undefined;
             widows?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Widows | undefined> | undefined;
+            width?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Width<string | number> | undefined> | undefined;
             willChange?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WillChange | undefined> | undefined;
             wordBreak?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WordBreak | undefined> | undefined;
             wordSpacing?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WordSpacing<string | number> | undefined> | undefined;
@@ -437,6 +436,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             lineClamp?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.LineClamp | undefined> | undefined;
             marginBlock?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.MarginBlock<string | number> | undefined> | undefined;
             marginInline?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.MarginInline<string | number> | undefined> | undefined;
+            mask?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Mask<string | number> | undefined> | undefined;
             maskBorder?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.MaskBorder | undefined> | undefined;
             motion?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Offset<string | number> | undefined> | undefined;
             offset?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Offset<string | number> | undefined> | undefined;

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

@@ -1,4 +1,3 @@
-import type { ValueBinding } from "@webiny/website-builder-sdk";
 import type { InputAstNode } from "@webiny/website-builder-sdk";
 import { type IMetadata } from "../../../../BaseEditor/metadata/index.js";
 export type OnChangeParams = {
@@ -14,7 +13,7 @@ export declare class InputValueObject {
     unset(): void;
 }
 export declare const useInputValue: (elementId: string, node: InputAstNode) => {
-    value: ValueBinding;
+    value: any;
     metadata: IMetadata;
     inheritanceMap: {
         overridden: boolean;

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

@@ -25,7 +25,12 @@ class InputValueObject {
     }
 }
 function convertBracketPathToDotPath(path) {
-    return path.replace(/\/(\d+)\//g, ".$1");
+    return path.replace(/\//g, ".");
+}
+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(()=>{
@@ -47,7 +52,17 @@ const useInputValue = (elementId, node)=>{
         elementId,
         rawBindings
     ]);
-    const value = resolvedBindings.inputs[node.path];
+    const value = useMemo(()=>{
+        if (node.children.length > 0) {
+            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);
+            return getDeepValueAtPath(deepInputs, node.path);
+        }
+        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);

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

	@@ -1 +1 @@
1	- {"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 { 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"],"names":["InputValueObject","value","undefined","convertBracketPathToDotPath","path","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","inputMetadata","elementMetadata","ElementMetadata","BreakpointElementMetadata","valueId","generateAlphaNumericLowerCaseId","InputMetadata","localState","setLocalValue","useState","onChange","useCallback","deepInputs","valueObject","updaterInput","valuePath","devFriendlyInputs","set","structuredClone","devFriendlyStyles","callback","functionConverter","publicApi","params","createElement","ancestorUpdates","executeOnChange","document","inputs","styles","applyAncestorUpdates","onPreviewChange","updatedInputs","patch","Commands","setBindingType","type","state","bindings","valueBinding","onReset","metadata"],"mappings":";;;;;;;;;;;;AAgCO,MAAMA;IAGT,YAAYC,KAAU,CAAE;QACpB,IAAI,CAAC,KAAK,GAAGA;IACjB;IAEA,IAAIA,KAAU,EAAE;QACZ,IAAI,CAAC,KAAK,GAAGA;IACjB;IAEA,MAAM;QACF,OAAO,IAAI,CAAC,KAAK;IACrB;IAEA,QAAQ;QACJ,IAAI,CAAC,KAAK,GAAGC;IACjB;AACJ;AAEA,SAASC,4BAA4BC,IAAY;IAC7C,OAAOA,KAAK,OAAO,CAAC,cAAc;AACtC;AAKA,MAAMC,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;IAG3B,MAAMvB,QAAQwB,iBAAiB,MAAM,CAACd,KAAK,IAAI,CAAC;IAEhD,MAAMqB,gBAAgBV,QAAQ;QAC1B,IAAIW,kBAA6B,IAAIC,gBAAgBxB,WAAWc,YAAY,QAAQ;QAEpF,IAAIb,KAAK,KAAK,CAAC,UAAU,EACrBsB,kBAAkB,IAAIE,0BAClBd,iBACAT,WAAW,IAAI,EACfqB;QAIR,MAAMG,UAAUnC,OAAO,MAAMoC;QAE7B,OAAO,IAAIC,cAAcF,SAASH;IACtC,GAAG;QAACvB;QAAWE,WAAW,IAAI;QAAEY;KAAY;IAE5C,MAAM,CAACe,YAAYC,cAAc,GAAGC;IAEpC,MAAMC,WAAWC,YACbtC,YAAY,CAACC;QACT,MAAMsC,aAAad,gBAAgB,YAAY,CAACL,iBAAiB,MAAM;QAEvE,MAAMoB,cAAc,IAAI7C,iBAAiBC;QAEzC,MAAM6C,eAAe;YACjB,OAAOD;YACP,UAAUb;QACd;QAGA1B,GAAGwC;QAEH,MAAMC,YAAY5C,4BAA4BQ,KAAK,IAAI;QACvD,MAAMqC,oBAAoBC,IACtBC,gBAAgBN,aAChBG,WACAF,YAAY,GAAG;QAGnB,MAAMM,oBAAoBvB,gBAAgB,YAAY,CAACJ,YAAY,MAAM,IAAI,CAAC;QAG9E,IAAIb,KAAK,KAAK,CAAC,QAAQ,EAAE;YACrB,MAAMyC,WAAWC,kBAAkB,WAAW,CAE1C1C,KAAK,KAAK,CAAC,QAAQ;YAIvB,MAAM2C,YAAY;gBACd,QAAQN;gBACR,QAAQG;gBACR,eAAe,CAACI,SACLC,cAAcD;YAE7B;YAGAH,SAASE,WAAW;gBAChB,YAAY1C,WAAW,IAAI;YAC/B;QACJ;QAGA,MAAM6C,kBAAkBC,gBAAgB;YACpC3C;YACAL;YACA,YAAYsC;YACZ,QAAQ;YACR3B;YACA,gBAAgBT,WAAW,IAAI;YAC/BO;YACA,YAAYgC;QAChB;QAEApC,OAAO,cAAc,CAAC4C,CAAAA;YAClB,MAAMC,SAAS9B,gBAAgB,YAAY,CAACkB,mBAAmBpC,WAAW,IAAI;YAC9E,MAAMiD,SAASjC,gBAAgB,YAAY,CAACuB,mBAAmBvC,WAAW,IAAI;YAE9EgD,OAAO,eAAe,CAACD;YACvBE,OAAO,eAAe,CAACF;YAEvB3B,cAAc,eAAe,CAAC2B;YAE9BG,qBACIH,UACAF,iBACApC,iBACAT,WAAW,IAAI,EACfO;QAER;QAGAqB,cAActC;IAClB,IACA;QAACQ;QAAWe;QAAkBb;KAAW;IAM7C,MAAMmD,kBAAkBpB,YACpB,CAACrC;QACG,MAAMsC,aAAad,gBAAgB,YAAY,CAACL,iBAAiB,MAAM;QAEvE,MAAMoB,cAAc,IAAI7C,iBAAiBuC,cAActC;QAEvD,MAAM6C,eAAe;YACjB,OAAOD;YACP,UAAUb;QACd;QAGA1B,GAAGwC;QAEH,MAAMC,YAAY5C,4BAA4BQ,KAAK,IAAI;QACvD,MAAMqC,oBAAoBC,IACtBC,gBAAgBN,aAChBG,WACAF,YAAY,GAAG;QAGnBL,cAAc;YAAE,QAAQK,YAAY,GAAG;QAAG;QAE1C,MAAMmB,gBAAgBlC,gBAAgB,YAAY,CAACkB,mBAAmBpC,WAAW,IAAI;QACrF,MAAMqD,QAAQD,cAAc,eAAe,CAACxC;QAE5CT,OAAO,cAAc,CAACmD,SAAS,mBAAmB,EAAE;YAAExD;YAAWuD;QAAM;IAC3E,GACA;QAACvD;QAAWc;QAAae;KAAW;IAGxC,MAAM4B,iBAAiBxB,YACnB,CAACyB;QACGrD,OAAO,cAAc,CAACsD,CAAAA;YAClB,MAAMC,WAAWD,MAAM,QAAQ,CAAC3D,UAAU;YAC1C,MAAM6D,eAAeD,SAAS,MAAO,CAAC3D,KAAK,IAAI,CAAC;YAEhD,IAAIyD,AAAS,aAATA,MAEA,OAAOG,aAAa,UAAU;iBAE9BA,aAAa,UAAU,GAAG;YAG9BF,MAAM,QAAQ,CAAC3D,UAAU,GAAG;gBACxB,GAAG4D,QAAQ;gBACX,QAAQ;oBACJ,GAAGA,SAAS,MAAM;oBAClB,CAAC3D,KAAK,IAAI,CAAC,EAAE4D;gBACjB;YACJ;QACJ;IACJ,GACA;QAAC7D;KAAU;IAGf,MAAM8D,UAAU7B,YAAY;QACxBD,SAAS,CAAC,EAAEzC,KAAK,EAAEwE,QAAQ,EAAE;YACzBxE,MAAM,KAAK;YACXwE,SAAS,KAAK;QAClB;IACJ,GAAG;QAAC/B;KAAS;IAEb,OAAO;QACH,OAAOH,cAActC;QACrB,UAAU+B;QACV,gBAAgBN,eAAe,MAAM,CAACf,KAAK,IAAI,CAAC;QAChD6D;QACA9B;QACAqB;QACAI;IACJ;AACJ"}
1	+ {"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 { 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 // 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 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"],"names":["InputValueObject","value","undefined","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","onChange","useCallback","valueObject","updaterInput","valuePath","devFriendlyInputs","set","structuredClone","devFriendlyStyles","callback","functionConverter","publicApi","params","createElement","ancestorUpdates","executeOnChange","document","inputs","styles","applyAncestorUpdates","onPreviewChange","updatedInputs","patch","Commands","setBindingType","type","state","bindings","valueBinding","onReset","metadata"],"mappings":"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"}

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

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

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.d.ts CHANGED Viewed

@@ -2,6 +2,10 @@ import React from "react";
 export declare const parseValue: (value: string) => undefined;
 export declare const BackgroundImage: (({ elementId }: {
     elementId: string;
-}) => React.JSX.Element) & {
-    displayName: string;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    elementId: string;
+}> & {
+    readonly type: ({ elementId }: {
+        elementId: string;
+    }) => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.js CHANGED Viewed

@@ -65,13 +65,6 @@ const BackgroundImage = observer(({ elementId })=>{
     };
     const inheritance = inheritanceMap?.backgroundImage ?? {};
     const fileInfo = metadata.get("backgroundImage");
-    const pickerValue = url && fileInfo ? {
-        id: fileInfo.id,
-        name: fileInfo.name,
-        size: fileInfo.size,
-        mimeType: fileInfo.type,
-        src: fileInfo.url
-    } : void 0;
     return /*#__PURE__*/ react.createElement(SidebarRow, {
         label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
             onReset: onReset,
@@ -85,9 +78,10 @@ const BackgroundImage = observer(({ elementId })=>{
         render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(FilePicker, {
                 variant: "secondary",
                 type: "compact",
-                value: pickerValue,
+                value: url ? fileInfo : void 0,
                 onSelectItem: ()=>showFileManager(),
-                onRemoveItem: onRemove
+                onRemoveItem: onRemove,
+                onEditItem: ()=>showFileManager()
             })
     }));
 });

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.tsx"],"sourcesContent":["import React, { useEffect, useState, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { FilePicker } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InheritanceLabel } from \"../../../InheritanceLabel.js\";\nimport { SidebarRow } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js\";\n\ntype FileInfo = {\n id: string;\n name: string;\n size: number;\n type: string;\n url: string;\n};\n\nconst DEFAULT_POSITION = \"center\";\nconst DEFAULT_SCALING = {\n backgroundSize: \"cover\",\n backgroundRepeat: \"no-repeat\"\n};\n\nexport const parseValue = (value: string) => {\n if (!value) {\n return undefined;\n }\n\n return;\n};\n\nexport const BackgroundImage = observer(({ elementId }: { elementId: string }) => {\n const { isBaseBreakpoint } = useBreakpoint();\n const { styles, metadata, onChange, inheritanceMap } = useStyles(elementId);\n const [localValue, setLocalValue] = useState<string \| null>(styles.backgroundImage);\n const url = useMemo(() => {\n const parser = new BackgroundImageParser(styles.backgroundImage);\n const rules = parser.getRules();\n const urlRule = rules.find(r => r.type === \"url\");\n if (urlRule && urlRule.type === \"url\") {\n return urlRule.parsed.url;\n }\n return null;\n }, [styles.backgroundImage]);\n\n useEffect(() => {\n if (styles.backgroundImage !== localValue) {\n setLocalValue(styles.backgroundImage);\n }\n }, [styles.backgroundImage]);\n\n const onFileChange = (file: FileManagerFileItem) => {\n onChange(({ styles, metadata }) => {\n styles.set(\"backgroundPosition\", DEFAULT_POSITION);\n styles.set(\"backgroundSize\", DEFAULT_SCALING.backgroundSize);\n styles.set(\"backgroundRepeat\", DEFAULT_SCALING.backgroundRepeat);\n styles.set(\"backgroundImage\", `url(\"${file.src}\")`);\n\n metadata.set(\"backgroundImage\", {\n id: file.id,\n name: file.name,\n size: file.size,\n type: file.type,\n url: file.src \|\| \"\"\n });\n });\n };\n\n const onRemove = () => {\n onChange(({ styles, metadata }) => {\n // On base breakpoint, we unset the image and all styles related to it.\n if (isBaseBreakpoint) {\n styles.unset(\"backgroundImage\");\n styles.unset(\"backgroundPosition\");\n styles.unset(\"backgroundSize\");\n styles.unset(\"backgroundRepeat\");\n } else {\n styles.set(\"backgroundImage\", \"none\");\n }\n\n metadata.unset(\"backgroundImage\");\n });\n };\n\n const onReset = () => {\n onChange(({ styles }) => {\n styles.unset(\"backgroundImage\");\n\n metadata.unset(\"backgroundImage\");\n });\n };\n\n const inheritance = inheritanceMap?.backgroundImage ?? {};\n\n const fileInfo = metadata.get<FileInfo>(\"backgroundImage\");\n\n // The FilePicker expects a FileItemDto (`mimeType`, `src`), but our metadata stores the\n // legacy shape (`type`, `url`). Map it across so the picker can detect an image and render\n // the thumbnail (otherwise `mimeType` is undefined and it shows the generic file icon).\n const pickerValue =\n url && fileInfo\n ? {\n id: fileInfo.id,\n name: fileInfo.name,\n size: fileInfo.size,\n mimeType: fileInfo.type,\n src: fileInfo.url\n }\n : undefined;\n\n return (\n <SidebarRow\n label={\n <InheritanceLabel\n onReset={onReset}\n isOverridden={inheritance?.overridden ?? false}\n inheritedFrom={inheritance?.inheritedFrom}\n text={\"Image\"}\n />\n }\n >\n <FileManager\n images={true}\n onChange={onFileChange}\n render={({ showFileManager }) => (\n <FilePicker\n variant={\"secondary\"}\n type=\"compact\"\n value={~~pickerValue~~}\n onSelectItem={() => showFileManager()}\n onRemoveItem={onRemove}\n />\n )}\n />\n </SidebarRow>\n );\n});\n"],"names":["DEFAULT_POSITION","DEFAULT_SCALING","parseValue","value","BackgroundImage","observer","elementId","isBaseBreakpoint","useBreakpoint","styles","metadata","onChange","inheritanceMap","useStyles","localValue","setLocalValue","useState","url","useMemo","parser","BackgroundImageParser","rules","urlRule","r","useEffect","onFileChange","file","onRemove","onReset","inheritance","fileInfo","~~pickerValue","undefined","~~SidebarRow","InheritanceLabel","FileManager","showFileManager","FilePicker"],"mappings":";;;;;;;;;AAkBA,MAAMA,mBAAmB;AACzB,MAAMC,kBAAkB;IACpB,gBAAgB;IAChB,kBAAkB;AACtB;AAEO,MAAMC,aAAa,CAACC,SAM3B;AAEO,MAAMC,kBAAkBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IACzE,MAAM,EAAEC,gBAAgB,EAAE,GAAGC;IAC7B,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUP;IACjE,MAAM,CAACQ,YAAYC,cAAc,GAAGC,SAAwBP,OAAO,eAAe;IAClF,MAAMQ,MAAMC,QAAQ;QAChB,MAAMC,SAAS,IAAIC,sBAAsBX,OAAO,eAAe;QAC/D,MAAMY,QAAQF,OAAO,QAAQ;QAC7B,MAAMG,UAAUD,MAAM,IAAI,CAACE,CAAAA,IAAKA,AAAW,UAAXA,EAAE,IAAI;QACtC,IAAID,WAAWA,AAAiB,UAAjBA,QAAQ,IAAI,EACvB,OAAOA,QAAQ,MAAM,CAAC,GAAG;QAE7B,OAAO;IACX,GAAG;QAACb,OAAO,eAAe;KAAC;IAE3Be,UAAU;QACN,IAAIf,OAAO,eAAe,KAAKK,YAC3BC,cAAcN,OAAO,eAAe;IAE5C,GAAG;QAACA,OAAO,eAAe;KAAC;IAE3B,MAAMgB,eAAe,CAACC;QAClBf,SAAS,CAAC,EAAEF,MAAM,EAAEC,QAAQ,EAAE;YAC1BD,OAAO,GAAG,CAAC,sBAAsBT;YACjCS,OAAO,GAAG,CAAC,kBAAkBR,gBAAgB,cAAc;YAC3DQ,OAAO,GAAG,CAAC,oBAAoBR,gBAAgB,gBAAgB;YAC/DQ,OAAO,GAAG,CAAC,mBAAmB,CAAC,KAAK,EAAEiB,KAAK,GAAG,CAAC,EAAE,CAAC;YAElDhB,SAAS,GAAG,CAAC,mBAAmB;gBAC5B,IAAIgB,KAAK,EAAE;gBACX,MAAMA,KAAK,IAAI;gBACf,MAAMA,KAAK,IAAI;gBACf,MAAMA,KAAK,IAAI;gBACf,KAAKA,KAAK,GAAG,IAAI;YACrB;QACJ;IACJ;IAEA,MAAMC,WAAW;QACbhB,SAAS,CAAC,EAAEF,MAAM,EAAEC,QAAQ,EAAE;YAE1B,IAAIH,kBAAkB;gBAClBE,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;YACjB,OACIA,OAAO,GAAG,CAAC,mBAAmB;YAGlCC,SAAS,KAAK,CAAC;QACnB;IACJ;IAEA,MAAMkB,UAAU;QACZjB,SAAS,CAAC,EAAEF,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YAEbC,SAAS,KAAK,CAAC;QACnB;IACJ;IAEA,MAAMmB,cAAcjB,gBAAgB,mBAAmB,CAAC;IAExD,MAAMkB,WAAWpB,SAAS,GAAG,CAAW;~~IAKxC~~,~~MAAMqB,cACFd,OAAOa,WACD;QACI,IAAIA,SAAS,EAAE;QACf,MAAMA,SAAS,IAAI;QACnB,MAAMA,SAAS,IAAI;QACnB,UAAUA,SAAS,IAAI;QACvB,KAAKA,SAAS,GAAG;IACrB,IACAE;IAEV,~~OAAO,WAAP,GACI,~~oBAACC~~,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,~~SAASN~~;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;qBAId,~~oBAACM~~,aAAWA;QACR,QAAQ;QACR,~~UAAUV~~;QACV,QAAQ,CAAC,~~EAAEW~~,eAAe,EAAE,iBACxB,oBAACC,YAAUA;gBACP,SAAS;gBACT,MAAK;gBACL,~~OAAON~~;~~gBACP~~,cAAc,~~IAAMK~~;gBACpB,~~cAAcT~~;;;~~AAMtC~~"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.tsx"],"sourcesContent":["import React, { useEffect, useState, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { FilePicker } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InheritanceLabel } from \"../../../InheritanceLabel.js\";\nimport { SidebarRow } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js\";\n\ntype FileInfo = {\n id: string;\n name: string;\n size: number;\n type: string;\n url: string;\n};\n\nconst DEFAULT_POSITION = \"center\";\nconst DEFAULT_SCALING = {\n backgroundSize: \"cover\",\n backgroundRepeat: \"no-repeat\"\n};\n\nexport const parseValue = (value: string) => {\n if (!value) {\n return undefined;\n }\n\n return;\n};\n\nexport const BackgroundImage = observer(({ elementId }: { elementId: string }) => {\n const { isBaseBreakpoint } = useBreakpoint();\n const { styles, metadata, onChange, inheritanceMap } = useStyles(elementId);\n const [localValue, setLocalValue] = useState<string \| null>(styles.backgroundImage);\n const url = useMemo(() => {\n const parser = new BackgroundImageParser(styles.backgroundImage);\n const rules = parser.getRules();\n const urlRule = rules.find(r => r.type === \"url\");\n if (urlRule && urlRule.type === \"url\") {\n return urlRule.parsed.url;\n }\n return null;\n }, [styles.backgroundImage]);\n\n useEffect(() => {\n if (styles.backgroundImage !== localValue) {\n setLocalValue(styles.backgroundImage);\n }\n }, [styles.backgroundImage]);\n\n const onFileChange = (file: FileManagerFileItem) => {\n onChange(({ styles, metadata }) => {\n styles.set(\"backgroundPosition\", DEFAULT_POSITION);\n styles.set(\"backgroundSize\", DEFAULT_SCALING.backgroundSize);\n styles.set(\"backgroundRepeat\", DEFAULT_SCALING.backgroundRepeat);\n styles.set(\"backgroundImage\", `url(\"${file.src}\")`);\n\n metadata.set(\"backgroundImage\", {\n id: file.id,\n name: file.name,\n size: file.size,\n type: file.type,\n url: file.src \|\| \"\"\n });\n });\n };\n\n const onRemove = () => {\n onChange(({ styles, metadata }) => {\n // On base breakpoint, we unset the image and all styles related to it.\n if (isBaseBreakpoint) {\n styles.unset(\"backgroundImage\");\n styles.unset(\"backgroundPosition\");\n styles.unset(\"backgroundSize\");\n styles.unset(\"backgroundRepeat\");\n } else {\n styles.set(\"backgroundImage\", \"none\");\n }\n\n metadata.unset(\"backgroundImage\");\n });\n };\n\n const onReset = () => {\n onChange(({ styles }) => {\n styles.unset(\"backgroundImage\");\n\n metadata.unset(\"backgroundImage\");\n });\n };\n\n const inheritance = inheritanceMap?.backgroundImage ?? {};\n\n const fileInfo = metadata.get<FileInfo>(\"backgroundImage\");\n\n return (\n <SidebarRow\n label={\n <InheritanceLabel\n onReset={onReset}\n isOverridden={inheritance?.overridden ?? false}\n inheritedFrom={inheritance?.inheritedFrom}\n text={\"Image\"}\n />\n }\n >\n <FileManager\n images={true}\n onChange={onFileChange}\n render={({ showFileManager }) => (\n <FilePicker\n variant={\"secondary\"}\n type=\"compact\"\n value={url ? fileInfo : undefined}\n onSelectItem={() => showFileManager()}\n onRemoveItem={onRemove}\n onEditItem={() => showFileManager()}\n />\n )}\n />\n </SidebarRow>\n );\n});\n"],"names":["DEFAULT_POSITION","DEFAULT_SCALING","parseValue","value","BackgroundImage","observer","elementId","isBaseBreakpoint","useBreakpoint","styles","metadata","onChange","inheritanceMap","useStyles","localValue","setLocalValue","useState","url","useMemo","parser","BackgroundImageParser","rules","urlRule","r","useEffect","onFileChange","file","onRemove","onReset","inheritance","fileInfo","SidebarRow","InheritanceLabel","FileManager","showFileManager","FilePicker","undefined"],"mappings":";;;;;;;;;AAkBA,MAAMA,mBAAmB;AACzB,MAAMC,kBAAkB;IACpB,gBAAgB;IAChB,kBAAkB;AACtB;AAEO,MAAMC,aAAa,CAACC,SAM3B;AAEO,MAAMC,kBAAkBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IACzE,MAAM,EAAEC,gBAAgB,EAAE,GAAGC;IAC7B,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUP;IACjE,MAAM,CAACQ,YAAYC,cAAc,GAAGC,SAAwBP,OAAO,eAAe;IAClF,MAAMQ,MAAMC,QAAQ;QAChB,MAAMC,SAAS,IAAIC,sBAAsBX,OAAO,eAAe;QAC/D,MAAMY,QAAQF,OAAO,QAAQ;QAC7B,MAAMG,UAAUD,MAAM,IAAI,CAACE,CAAAA,IAAKA,AAAW,UAAXA,EAAE,IAAI;QACtC,IAAID,WAAWA,AAAiB,UAAjBA,QAAQ,IAAI,EACvB,OAAOA,QAAQ,MAAM,CAAC,GAAG;QAE7B,OAAO;IACX,GAAG;QAACb,OAAO,eAAe;KAAC;IAE3Be,UAAU;QACN,IAAIf,OAAO,eAAe,KAAKK,YAC3BC,cAAcN,OAAO,eAAe;IAE5C,GAAG;QAACA,OAAO,eAAe;KAAC;IAE3B,MAAMgB,eAAe,CAACC;QAClBf,SAAS,CAAC,EAAEF,MAAM,EAAEC,QAAQ,EAAE;YAC1BD,OAAO,GAAG,CAAC,sBAAsBT;YACjCS,OAAO,GAAG,CAAC,kBAAkBR,gBAAgB,cAAc;YAC3DQ,OAAO,GAAG,CAAC,oBAAoBR,gBAAgB,gBAAgB;YAC/DQ,OAAO,GAAG,CAAC,mBAAmB,CAAC,KAAK,EAAEiB,KAAK,GAAG,CAAC,EAAE,CAAC;YAElDhB,SAAS,GAAG,CAAC,mBAAmB;gBAC5B,IAAIgB,KAAK,EAAE;gBACX,MAAMA,KAAK,IAAI;gBACf,MAAMA,KAAK,IAAI;gBACf,MAAMA,KAAK,IAAI;gBACf,KAAKA,KAAK,GAAG,IAAI;YACrB;QACJ;IACJ;IAEA,MAAMC,WAAW;QACbhB,SAAS,CAAC,EAAEF,MAAM,EAAEC,QAAQ,EAAE;YAE1B,IAAIH,kBAAkB;gBAClBE,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;YACjB,OACIA,OAAO,GAAG,CAAC,mBAAmB;YAGlCC,SAAS,KAAK,CAAC;QACnB;IACJ;IAEA,MAAMkB,UAAU;QACZjB,SAAS,CAAC,EAAEF,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YAEbC,SAAS,KAAK,CAAC;QACnB;IACJ;IAEA,MAAMmB,cAAcjB,gBAAgB,mBAAmB,CAAC;IAExD,MAAMkB,WAAWpB,SAAS,GAAG,CAAW;IAExC,OAAO,WAAP,GACI,oBAACqB,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,SAASJ;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;qBAId,oBAACI,aAAWA;QACR,QAAQ;QACR,UAAUR;QACV,QAAQ,CAAC,EAAES,eAAe,EAAE,iBACxB,oBAACC,YAAUA;gBACP,SAAS;gBACT,MAAK;gBACL,OAAOlB,MAAMa,WAAWM;gBACxB,cAAc,IAAMF;gBACpB,cAAcP;gBACd,YAAY,IAAMO;;;AAM1C"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundPosition.d.ts CHANGED Viewed

@@ -1,6 +1,10 @@
 import React from "react";
 export declare const BackgroundPosition: (({ elementId }: {
     elementId: string;
-}) => React.JSX.Element) & {
-    displayName: string;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    elementId: string;
+}> & {
+    readonly type: ({ elementId }: {
+        elementId: string;
+    }) => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundScaling.d.ts CHANGED Viewed

@@ -1,6 +1,10 @@
 import React from "react";
 export declare const BackgroundScaling: (({ elementId }: {
     elementId: string;
-}) => React.JSX.Element) & {
-    displayName: string;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    elementId: string;
+}> & {
+    readonly type: ({ elementId }: {
+        elementId: string;
+    }) => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderColor.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import React from "react";
 interface BorderColorProps {
     elementId: string;
 }
-export declare const BorderColor: (({ elementId }: BorderColorProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const BorderColor: (({ elementId }: BorderColorProps) => React.JSX.Element) & React.NamedExoticComponent<BorderColorProps> & {
+    readonly type: ({ elementId }: BorderColorProps) => React.JSX.Element;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderRadius.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import React from "react";
 interface BorderRadiusProps {
     elementId: string;
 }
-export declare const BorderRadius: (({ elementId }: BorderRadiusProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const BorderRadius: (({ elementId }: BorderRadiusProps) => React.JSX.Element) & React.NamedExoticComponent<BorderRadiusProps> & {
+    readonly type: ({ elementId }: BorderRadiusProps) => React.JSX.Element;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderStyle.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import React from "react";
 interface BorderStyleProps {
     elementId: string;
 }
-export declare const BorderStyle: (({ elementId }: BorderStyleProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const BorderStyle: (({ elementId }: BorderStyleProps) => React.JSX.Element) & React.NamedExoticComponent<BorderStyleProps> & {
+    readonly type: ({ elementId }: BorderStyleProps) => React.JSX.Element;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderWidth.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import React from "react";
 interface BorderWidthProps {
     elementId: string;
 }
-export declare const BorderWidth: (({ elementId }: BorderWidthProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const BorderWidth: (({ elementId }: BorderWidthProps) => React.JSX.Element) & React.NamedExoticComponent<BorderWidthProps> & {
+    readonly type: ({ elementId }: BorderWidthProps) => React.JSX.Element;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/Alignment.d.ts CHANGED Viewed

@@ -13,6 +13,10 @@ import React from "react";
  */
 export declare const Alignment: (({ elementId }: {
     elementId: string;
-}) => React.JSX.Element) & {
-    displayName: string;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    elementId: string;
+}> & {
+    readonly type: ({ elementId }: {
+        elementId: string;
+    }) => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/LengthWithUnitInput.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ interface LengthWithUnitInputProps {
     unitOptions: UnitOption[];
     defaultValue?: string;
 }
-export declare const LengthWithUnitInput: (({ elementId, label, propertyName, defaultValue, unitOptions }: LengthWithUnitInputProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const LengthWithUnitInput: (({ elementId, label, propertyName, defaultValue, unitOptions }: LengthWithUnitInputProps) => React.JSX.Element) & React.NamedExoticComponent<LengthWithUnitInputProps> & {
+    readonly type: ({ elementId, label, propertyName, defaultValue, unitOptions }: LengthWithUnitInputProps) => React.JSX.Element;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Margin.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ interface MarginProps {
     elementId: string;
     children: React.ReactNode;
 }
-export declare const Margin: (({ elementId, children }: MarginProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const Margin: (({ elementId, children }: MarginProps) => React.JSX.Element) & React.NamedExoticComponent<MarginProps> & {
+    readonly type: ({ elementId, children }: MarginProps) => React.JSX.Element;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Padding.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import React from "react";
 interface PaddingProps {
     elementId: string;
 }
-export declare const Padding: (({ elementId }: PaddingProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const Padding: (({ elementId }: PaddingProps) => React.JSX.Element) & React.NamedExoticComponent<PaddingProps> & {
+    readonly type: ({ elementId }: PaddingProps) => React.JSX.Element;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/Visibility.d.ts CHANGED Viewed

@@ -2,6 +2,6 @@ import React from "react";
 export interface VisibilityProps {
     elementId: string;
 }
-export declare const Visibility: (({ elementId }: VisibilityProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const Visibility: (({ elementId }: VisibilityProps) => React.JSX.Element) & React.NamedExoticComponent<VisibilityProps> & {
+    readonly type: ({ elementId }: VisibilityProps) => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js CHANGED Viewed

@@ -2,9 +2,9 @@ import react from "react";
 import { Icon, Tooltip } from "@webiny/admin-ui";
 import { ReactComponent } from "@webiny/icons/info.svg";
 const SidebarRow = ({ label, tooltip, children })=>/*#__PURE__*/ react.createElement("div", {
-        className: "flex items-start gap-xxs"
+        className: "flex items-center gap-xxs"
     }, /*#__PURE__*/ react.createElement("div", {
-        className: "w-[80px] pt-sm flex flex-row items-center gap-xxs shrink-0 text-sm text-neutral-strong"
+        className: "w-[80px] flex flex-row items-center gap-xxs shrink-0 text-sm text-neutral-strong"
     }, label, tooltip ? /*#__PURE__*/ react.createElement(Tooltip, {
         trigger: /*#__PURE__*/ react.createElement(Icon, {
             icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
@@ -17,7 +17,7 @@ const SidebarRow = ({ label, tooltip, children })=>/*#__PURE__*/ react.createEle
     }) : /*#__PURE__*/ react.createElement("div", {
         className: "w-xs shrink-0"
     })), /*#__PURE__*/ react.createElement("div", {
-        className: "flex-1 min-w-0"
+        className: "flex-1"
     }, children));
 export { SidebarRow };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\n\ninterface SidebarRowProps {\n label: React.ReactNode;\n tooltip?: React.ReactNode;\n children: React.ReactNode;\n}\n\nexport const SidebarRow = ({ label, tooltip, children }: SidebarRowProps) => {\n return (\n // The label sits at the top of the row rather than centered against the value, so that a\n // row is free to render something taller than one control - the file picker's stacked\n // preview, say - without the label drifting to the middle of it.\n <div className={\"flex items-~~start~~ gap-xxs\"}>\n {/* `pt-sm` is half the difference between a standard control (a `size=\"md\"` Select is\n 32px) and this label's 16px line, which puts the label exactly where centering\n would for the ordinary single-control row, and leaves it there for taller ones. /}\n <div\n className={\n \"w-[80px] ~~pt-sm~~ flex flex-row items-center gap-xxs shrink-0 text-sm text-neutral-strong\"\n }\n >\n {label}\n\n {tooltip ? (\n <Tooltip\n trigger={\n <Icon\n icon={<InfoIcon />}\n size={\"xs\"}\n label={\"More information\"}\n color={\"neutral-light\"}\n />\n }\n content={tooltip}\n side={\"left\"}\n />\n ) : (\n <div className={\"w-xs shrink-0\"} />\n )}\n </div>\n {/ min-w-0 lets the cell shrink below its content's intrinsic width, so long\n unbroken values (e.g. a hashed file name) truncate instead of widening the\n row and pushing controls past the sidebar edge. */}\n <div className={\"flex-1 ~~min-w-0~~\"}>{children}</div>\n </div>\n );\n};\n"],"names":["SidebarRow","label","tooltip","children","Tooltip","Icon","InfoIcon"],"mappings":";;;AAUO,MAAMA,aAAa,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAAEC,QAAQ,EAAmB,G,~~cAKhE~~,oBAAC;QAAI,WAAW;~~qBAIZ~~,oBAAC;QACG,WACI;OAGHF,OAEAC,UAAU,WAAVA,GACG,oBAACE,SAAOA;QACJ,uBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACC,gBAAQA;YACf,MAAM;YACN,OAAO;YACP,OAAO;;QAGf,SAASJ;QACT,MAAM;uBAGV,oBAAC;QAAI,WAAW;~~uBAMxB~~,oBAAC;QAAI,WAAW;~~OAAmBC~~"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\n\ninterface SidebarRowProps {\n label: React.ReactNode;\n tooltip?: React.ReactNode;\n children: React.ReactNode;\n}\n\nexport const SidebarRow = ({ label, tooltip, children }: SidebarRowProps) => {\n return (\n <div className={\"flex items-center gap-xxs\"}>\n <div\n className={\n \"w-[80px] flex flex-row items-center gap-xxs shrink-0 text-sm text-neutral-strong\"\n }\n >\n {label}\n\n {tooltip ? (\n <Tooltip\n trigger={\n <Icon\n icon={<InfoIcon />}\n size={\"xs\"}\n label={\"More information\"}\n color={\"neutral-light\"}\n />\n }\n content={tooltip}\n side={\"left\"}\n />\n ) : (\n <div className={\"w-xs shrink-0\"} />\n )}\n </div>\n <div className={\"flex-1\"}>{children}</div>\n </div>\n );\n};\n"],"names":["SidebarRow","label","tooltip","children","Tooltip","Icon","InfoIcon"],"mappings":";;;AAUO,MAAMA,aAAa,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAAEC,QAAQ,EAAmB,GAC7D,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QACG,WACI;OAGHF,OAEAC,UAAU,WAAVA,GACG,oBAACE,SAAOA;QACJ,uBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACC,gBAAQA;YACf,MAAM;YACN,OAAO;YACP,OAAO;;QAGf,SAASJ;QACT,MAAM;uBAGV,oBAAC;QAAI,WAAW;uBAGxB,oBAAC;QAAI,WAAW;OAAWC"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordion.d.ts CHANGED Viewed

@@ -1,8 +1,10 @@
 import React from "react";
+import { StyleAccordionItem } from "./StyleAccordionItem.js";
 interface StyleAccordionProps {
     children: React.ReactNode;
 }
-export declare const StyleAccordion: (({ children }: StyleAccordionProps) => React.JSX.Element) & {
-    Item: ({ title, icon, defaultOpen, noPadding, children }: import("./StyleAccordionItem.js").StyleAccordionItemProps) => React.JSX.Element;
+declare const StyleAccordionRoot: ({ children }: StyleAccordionProps) => React.JSX.Element;
+export declare const StyleAccordion: typeof StyleAccordionRoot & {
+    Item: typeof StyleAccordionItem;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js CHANGED Viewed

@@ -12,9 +12,13 @@ import { Layout } from "./Groups/Layout.js";
 const StyleProperties = ()=>{
     const [element] = useActiveElement();
     if (!element) return null;
-    return /*#__PURE__*/ react.createElement(ElementStyleProperties, {
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "pt-md mb-md px-sm"
+    }, /*#__PURE__*/ react.createElement(ElementPreview, {
+        element: element
+    })), /*#__PURE__*/ react.createElement(ElementStyleProperties, {
         element: element
-    });
+    }));
 };
 const defaultHidden = [];
 const ElementStyleProperties = ({ element })=>{
@@ -23,11 +27,7 @@ const ElementStyleProperties = ({ element })=>{
     const isHidden = useCallback((name)=>hideStyles.includes(name), [
         hideStyles
     ]);
-    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
-        className: "pt-md mb-md px-sm"
-    }, /*#__PURE__*/ react.createElement(ElementPreview, {
-        element: element
-    })), /*#__PURE__*/ react.createElement(StyleAccordion, null, isHidden(StyleSettings.Layout) ? null : /*#__PURE__*/ react.createElement(Layout, {
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(StyleAccordion, null, isHidden(StyleSettings.Layout) ? null : /*#__PURE__*/ react.createElement(Layout, {
         elementId: element.id
     }), isHidden(StyleSettings.MarginPadding) ? null : /*#__PURE__*/ react.createElement(MarginPadding, {
         elementId: element.id

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { StyleAccordion } from \"./StyleAccordion.js\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { ElementPreview } from \"~/BaseEditor/defaultConfig/Sidebar/ElementPreview.js\";\nimport { Background } from \"./Groups/Background.js\";\nimport { Border } from \"./Groups/Border.js\";\nimport { MarginPadding } from \"./Groups/MarginPadding.js\";\nimport { VisibilityGroup } from \"./Groups/VisibilityGroup.js\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport { StyleSettings } from \"@webiny/website-builder-sdk\";\nimport { Layout } from \"./Groups/Layout.js\";\n\nexport const StyleProperties = () => {\n const [element] = useActiveElement();\n if (!element) {\n return null;\n }\n\n return <ElementStyleProperties element={element} ~~/>;\~~n};\n\nconst defaultHidden: string[] = [];\n\nconst ElementStyleProperties = ({ element }: { element: DocumentElement }) => {\n const componentManifest = useElementComponentManifest(element.id);\n const hideStyles = componentManifest?.hideStyleSettings ?? defaultHidden;\n\n const isHidden = useCallback(\n (name: string) => {\n return hideStyles.includes(name);\n },\n [hideStyles]\n );\n\n return (\n <>\n <~~div className={\"pt-md mb-md px-sm\"}>\n <ElementPreview element={element} />\n </div>\n <~~StyleAccordion>\n {isHidden(StyleSettings.Layout) ? null : <Layout elementId={element.id} />}\n {isHidden(StyleSettings.MarginPadding) ? null : (\n <MarginPadding elementId={element.id} />\n )}\n {isHidden(StyleSettings.Border) ? null : <Border elementId={element.id} />}\n {isHidden(StyleSettings.Background) ? null : <Background elementId={element.id} />}\n {isHidden(StyleSettings.Visibility) ? null : (\n <VisibilityGroup elementId={element.id} />\n )}\n </StyleAccordion>\n </>\n );\n};\n"],"names":["StyleProperties","element","useActiveElement","ElementStyleProperties","defaultHidden","componentManifest","useElementComponentManifest","hideStyles","isHidden","useCallback","name","~~ElementPreview","~~StyleAccordion","StyleSettings","Layout","MarginPadding","Border","Background","VisibilityGroup"],"mappings":";;;;;;;;;;;AAaO,MAAMA,kBAAkB;IAC3B,MAAM,CAACC,QAAQ,GAAGC;IAClB,IAAI,CAACD,SACD,OAAO;IAGX,OAAO,WAAP,~~GAAO~~,oBAACE,wBAAsBA;QAAC,~~SAASF~~;;~~AAC5C~~;AAEA,~~MAAMG~~,gBAA0B,EAAE;AAElC,MAAMD,yBAAyB,CAAC,~~EAAEF~~,OAAO,EAAgC;IACrE,~~MAAMI~~,oBAAoBC,~~4BAA4BL~~,QAAQ,EAAE;IAChE,~~MAAMM~~,aAAaF,mBAAmB,qBAAqBD;IAE3D,MAAMI,WAAWC,YACb,CAACC,OACUH,WAAW,QAAQ,CAACG,OAE/B;QAACH;KAAW;IAGhB,OAAO,WAAP,GACI,wDACI,~~oBAAC;QAAI,WAAW;qBACZ,~~oBAACI,gBAAcA~~;QAAC~~,~~SAASV;uBAE7B~~,~~oBAACW~~,~~gBAAcA,MACVJ,SAASK,~~cAAc,MAAM,IAAI,OAAO,WAAP,GAAO,oBAACC,QAAMA;QAAC,WAAWb,QAAQ,EAAE;~~QACrEO~~,~~SAASK~~,cAAc,aAAa,IAAI,OAAO,WAAP,GACrC,oBAACE,eAAaA;QAAC,WAAWd,QAAQ,EAAE;~~QAEvCO~~,~~SAASK~~,cAAc,MAAM,IAAI,OAAO,WAAP,GAAO,oBAACG,QAAMA;QAAC,WAAWf,QAAQ,EAAE;~~QACrEO~~,~~SAASK~~,cAAc,UAAU,IAAI,OAAO,WAAP,GAAO,oBAACI,YAAUA;QAAC,WAAWhB,QAAQ,EAAE;~~QAC7EO~~,~~SAASK~~,cAAc,UAAU,IAAI,OAAO,WAAP,GAClC,oBAACK,iBAAeA;QAAC,WAAWjB,QAAQ,EAAE;;AAK1D"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { StyleAccordion } from \"./StyleAccordion.js\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { ElementPreview } from \"~/BaseEditor/defaultConfig/Sidebar/ElementPreview.js\";\nimport { Background } from \"./Groups/Background.js\";\nimport { Border } from \"./Groups/Border.js\";\nimport { MarginPadding } from \"./Groups/MarginPadding.js\";\nimport { VisibilityGroup } from \"./Groups/VisibilityGroup.js\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport { StyleSettings } from \"@webiny/website-builder-sdk\";\nimport { Layout } from \"./Groups/Layout.js\";\n\nexport const StyleProperties = () => {\n const [element] = useActiveElement();\n if (!element) {\n return null;\n }\n\n return (\n <>\n <div className={\"pt-md mb-md px-sm\"}>\n <ElementPreview element={element} />\n </div>\n <ElementStyleProperties element={element} />\n </>\n );\n};\n\nconst defaultHidden: string[] = [];\n\nconst ElementStyleProperties = ({ element }: { element: DocumentElement }) => {\n const componentManifest = useElementComponentManifest(element.id);\n const hideStyles = componentManifest?.hideStyleSettings ?? defaultHidden;\n\n const isHidden = useCallback(\n (name: string) => {\n return hideStyles.includes(name);\n },\n [hideStyles]\n );\n\n return (\n <>\n <StyleAccordion>\n {isHidden(StyleSettings.Layout) ? null : <Layout elementId={element.id} />}\n {isHidden(StyleSettings.MarginPadding) ? null : (\n <MarginPadding elementId={element.id} />\n )}\n {isHidden(StyleSettings.Border) ? null : <Border elementId={element.id} />}\n {isHidden(StyleSettings.Background) ? null : <Background elementId={element.id} />}\n {isHidden(StyleSettings.Visibility) ? null : (\n <VisibilityGroup elementId={element.id} />\n )}\n </StyleAccordion>\n </>\n );\n};\n"],"names":["StyleProperties","element","useActiveElement","ElementPreview","ElementStyleProperties","defaultHidden","componentManifest","useElementComponentManifest","hideStyles","isHidden","useCallback","name","StyleAccordion","StyleSettings","Layout","MarginPadding","Border","Background","VisibilityGroup"],"mappings":";;;;;;;;;;;AAaO,MAAMA,kBAAkB;IAC3B,MAAM,CAACC,QAAQ,GAAGC;IAClB,IAAI,CAACD,SACD,OAAO;IAGX,OAAO,WAAP,GACI,wDACI,oBAAC;QAAI,WAAW;qBACZ,oBAACE,gBAAcA;QAAC,SAASF;uBAE7B,oBAACG,wBAAsBA;QAAC,SAASH;;AAG7C;AAEA,MAAMI,gBAA0B,EAAE;AAElC,MAAMD,yBAAyB,CAAC,EAAEH,OAAO,EAAgC;IACrE,MAAMK,oBAAoBC,4BAA4BN,QAAQ,EAAE;IAChE,MAAMO,aAAaF,mBAAmB,qBAAqBD;IAE3D,MAAMI,WAAWC,YACb,CAACC,OACUH,WAAW,QAAQ,CAACG,OAE/B;QAACH;KAAW;IAGhB,OAAO,WAAP,GACI,wDACI,oBAACI,gBAAcA,MACVH,SAASI,cAAc,MAAM,IAAI,OAAO,WAAP,GAAO,oBAACC,QAAMA;QAAC,WAAWb,QAAQ,EAAE;QACrEQ,SAASI,cAAc,aAAa,IAAI,OAAO,WAAP,GACrC,oBAACE,eAAaA;QAAC,WAAWd,QAAQ,EAAE;QAEvCQ,SAASI,cAAc,MAAM,IAAI,OAAO,WAAP,GAAO,oBAACG,QAAMA;QAAC,WAAWf,QAAQ,EAAE;QACrEQ,SAASI,cAAc,UAAU,IAAI,OAAO,WAAP,GAAO,oBAACI,YAAUA;QAAC,WAAWhB,QAAQ,EAAE;QAC7EQ,SAASI,cAAc,UAAU,IAAI,OAAO,WAAP,GAClC,oBAACK,iBAAeA;QAAC,WAAWjB,QAAQ,EAAE;;AAK1D"}