@webiny/app-website-builder 6.4.0-beta.2 → 6.4.0-beta.4

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.ts"],"sourcesContent":["import type { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { StylesBindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport type { IMetadata } from \"~/BaseEditor/metadata/index.js\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    NullMetadata,\n    StylesMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\nimport { autorun, makeAutoObservable, runInAction } from \"mobx\";\nimport { type InheritanceInfo, InheritanceProcessor } from \"@webiny/website-builder-sdk\";\nimport {\n    BindingsProcessor,\n    type DocumentElementBindings,\n    type Document\n} from \"@webiny/website-builder-sdk\";\nimport { $getComponentManifestByElementId } from \"~/editorSdk/utils/index.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { BASE_BREAKPOINT } from \"~/constants.js\";\n\nexport type ElementBreakpointStyles = {\n    styles: Record<string, any>;\n    metadata: IMetadata;\n    inheritanceMap: InheritanceInfo[\"styles\"];\n};\n\nexport class StylesStore {\n    private editor: ReturnType<typeof useDocumentEditor>;\n    private elementId: string;\n    private breakpointNames: string[];\n    private stylesProcessor: StylesBindingsProcessor | undefined;\n    private elementMetadata: IMetadata = new NullMetadata();\n    private devFriendlyStyles: Record<string, any> = {};\n    private localPreviewStyles: Record<string, any> | undefined = undefined;\n    private currentBreakpoint: string;\n    private inheritanceMap: InheritanceInfo[\"styles\"] = {};\n    private rawBindings: DocumentElementBindings = {};\n    private bindingsProcessor: BindingsProcessor;\n    private inheritanceProcessor: InheritanceProcessor;\n    constructor(editor: Editor, elementId: string, breakpointNames: string[]) {\n        this.editor = editor;\n        this.elementId = elementId;\n        this.breakpointNames = breakpointNames;\n\n        const manifest = $getComponentManifestByElementId(editor, elementId ?? \"\");\n        const inputsAst = ComponentManifestToAstConverter.convert(manifest?.inputs ?? []);\n\n        this.bindingsProcessor = new BindingsProcessor(breakpointNames);\n        this.inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);\n\n        const document = this.editor.getDocumentState().read();\n        const editorState = this.editor.getEditorState().read();\n        const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;\n        this.currentBreakpoint = breakpoint;\n\n        // Initial setup.\n        this.calculateStuff(document, breakpoint);\n\n        autorun(() => {\n            const document = this.editor.getDocumentState().read();\n            const editorState = this.editor.getEditorState().read();\n            const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;\n\n            runInAction(() => {\n                this.currentBreakpoint = breakpoint;\n                this.calculateStuff(document, breakpoint);\n            });\n        });\n\n        makeAutoObservable(this);\n    }\n\n    get vm(): ElementBreakpointStyles {\n        return {\n            styles: this.localPreviewStyles ?? this.devFriendlyStyles,\n            metadata: this.elementMetadata,\n            inheritanceMap: this.inheritanceMap\n        };\n    }\n\n    onChange = (cb: (params: { styles: StylesValueObject; metadata: IMetadata }) => void) => {\n        if (!this.stylesProcessor) {\n            return;\n        }\n\n        const styles = new StylesValueObject(this.devFriendlyStyles);\n        cb({ styles, metadata: this.elementMetadata });\n\n        const finalStyles = styles.getAll();\n\n        const updatedStyles = this.stylesProcessor.createUpdate(\n            finalStyles,\n            this.currentBreakpoint\n        );\n\n        this.editor.updateDocument(document => {\n            updatedStyles.applyToDocument(document);\n            this.elementMetadata.applyToDocument(document);\n        });\n\n        this.localPreviewStyles = undefined;\n    };\n\n    onPreviewChange = (\n        cb: (params: { styles: StylesValueObject; metadata: IMetadata }) => void\n    ) => {\n        if (!this.stylesProcessor) {\n            return;\n        }\n\n        const styles = new StylesValueObject(structuredClone(this.devFriendlyStyles));\n\n        cb({ styles, metadata: this.elementMetadata });\n\n        const finalStyles = styles.getAll();\n\n        this.localPreviewStyles = finalStyles;\n\n        const updatedStyles = this.stylesProcessor.createUpdate(\n            finalStyles,\n            this.currentBreakpoint\n        );\n\n        this.editor.executeCommand(Commands.PreviewPatchElement, {\n            elementId: this.elementId,\n            patch: updatedStyles.createJsonPatch(this.rawBindings)\n        });\n    };\n\n    private calculateStuff(document: Document, breakpoint: string) {\n        const bindings = document.bindings[this.elementId] ?? {};\n\n        this.rawBindings = bindings;\n        const resolvedBindings = this.bindingsProcessor.getBindings(bindings, breakpoint);\n\n        const inheritanceMap = this.inheritanceProcessor.getInheritanceMap(bindings, breakpoint);\n\n        this.inheritanceMap = inheritanceMap.styles;\n\n        this.stylesProcessor = new StylesBindingsProcessor(\n            this.elementId,\n            this.breakpointNames,\n            bindings\n        );\n\n        this.elementMetadata = new StylesMetadata(\n            new BreakpointElementMetadata(\n                this.breakpointNames,\n                breakpoint,\n                new ElementMetadata(this.elementId, bindings.metadata)\n            )\n        );\n\n        this.devFriendlyStyles = this.stylesProcessor.toDeepStyles(resolvedBindings.styles);\n    }\n}\n\nexport class StylesValueObject {\n    private readonly value: Record<string, any>;\n\n    constructor(value: any = {}) {\n        this.value = value;\n    }\n\n    set(key: string, value: any) {\n        this.value[key] = value;\n    }\n\n    get(key: string) {\n        return this.value[key];\n    }\n\n    getAll() {\n        return this.value;\n    }\n\n    unset(key: string) {\n        delete this.value[key];\n    }\n}\n"],"names":["StylesStore","editor","elementId","breakpointNames","NullMetadata","undefined","cb","styles","StylesValueObject","finalStyles","updatedStyles","document","structuredClone","Commands","manifest","$getComponentManifestByElementId","inputsAst","ComponentManifestToAstConverter","BindingsProcessor","InheritanceProcessor","editorState","breakpoint","BASE_BREAKPOINT","autorun","runInAction","makeAutoObservable","bindings","resolvedBindings","inheritanceMap","StylesBindingsProcessor","StylesMetadata","BreakpointElementMetadata","ElementMetadata","value","key"],"mappings":"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"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.ts"],"sourcesContent":["import type { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { StylesBindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport type { IMetadata } from \"~/BaseEditor/metadata/index.js\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    NullMetadata,\n    StylesMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\nimport { autorun, makeAutoObservable, runInAction, toJS } from \"mobx\";\nimport { type InheritanceInfo, InheritanceProcessor } from \"@webiny/website-builder-sdk\";\nimport {\n    BindingsProcessor,\n    type DocumentElementBindings,\n    type Document\n} from \"@webiny/website-builder-sdk\";\nimport { $getComponentManifestByElementId } from \"~/editorSdk/utils/index.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { BASE_BREAKPOINT } from \"~/constants.js\";\n\nexport type ElementBreakpointStyles = {\n    styles: Record<string, any>;\n    metadata: IMetadata;\n    inheritanceMap: InheritanceInfo[\"styles\"];\n};\n\nexport class StylesStore {\n    private editor: ReturnType<typeof useDocumentEditor>;\n    private elementId: string;\n    private breakpointNames: string[];\n    private stylesProcessor: StylesBindingsProcessor | undefined;\n    private elementMetadata: IMetadata = new NullMetadata();\n    private devFriendlyStyles: Record<string, any> = {};\n    private localPreviewStyles: Record<string, any> | undefined = undefined;\n    private currentBreakpoint: string;\n    private inheritanceMap: InheritanceInfo[\"styles\"] = {};\n    private rawBindings: DocumentElementBindings = {};\n    private bindingsProcessor: BindingsProcessor;\n    private inheritanceProcessor: InheritanceProcessor;\n    constructor(editor: Editor, elementId: string, breakpointNames: string[]) {\n        this.editor = editor;\n        this.elementId = elementId;\n        this.breakpointNames = breakpointNames;\n\n        const manifest = $getComponentManifestByElementId(editor, elementId ?? \"\");\n        const inputsAst = ComponentManifestToAstConverter.convert(manifest?.inputs ?? []);\n\n        this.bindingsProcessor = new BindingsProcessor(breakpointNames);\n        this.inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);\n\n        const document = this.editor.getDocumentState().read();\n        const editorState = this.editor.getEditorState().read();\n        const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;\n        this.currentBreakpoint = breakpoint;\n\n        // Initial setup.\n        this.calculateStuff(document, breakpoint);\n\n        autorun(() => {\n            const document = this.editor.getDocumentState().read();\n            const editorState = this.editor.getEditorState().read();\n            const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;\n\n            runInAction(() => {\n                this.currentBreakpoint = breakpoint;\n                this.calculateStuff(document, breakpoint);\n            });\n        });\n\n        makeAutoObservable(this);\n    }\n\n    get vm(): ElementBreakpointStyles {\n        return {\n            styles: this.localPreviewStyles ?? this.devFriendlyStyles,\n            metadata: this.elementMetadata,\n            inheritanceMap: this.inheritanceMap\n        };\n    }\n\n    onChange = (cb: (params: { styles: StylesValueObject; metadata: IMetadata }) => void) => {\n        if (!this.stylesProcessor) {\n            return;\n        }\n\n        const styles = new StylesValueObject(this.devFriendlyStyles);\n        cb({ styles, metadata: this.elementMetadata });\n\n        const finalStyles = styles.getAll();\n\n        const updatedStyles = this.stylesProcessor.createUpdate(\n            finalStyles,\n            this.currentBreakpoint\n        );\n\n        this.editor.updateDocument(document => {\n            updatedStyles.applyToDocument(document);\n            this.elementMetadata.applyToDocument(document);\n        });\n\n        this.localPreviewStyles = undefined;\n    };\n\n    onPreviewChange = (\n        cb: (params: { styles: StylesValueObject; metadata: IMetadata }) => void\n    ) => {\n        if (!this.stylesProcessor) {\n            return;\n        }\n\n        const styles = new StylesValueObject(structuredClone(toJS(this.devFriendlyStyles)));\n\n        cb({ styles, metadata: this.elementMetadata });\n\n        const finalStyles = styles.getAll();\n\n        this.localPreviewStyles = finalStyles;\n\n        const updatedStyles = this.stylesProcessor.createUpdate(\n            finalStyles,\n            this.currentBreakpoint\n        );\n\n        this.editor.executeCommand(Commands.PreviewPatchElement, {\n            elementId: this.elementId,\n            patch: updatedStyles.createJsonPatch(this.rawBindings)\n        });\n    };\n\n    private calculateStuff(document: Document, breakpoint: string) {\n        const bindings = document.bindings[this.elementId] ?? {};\n\n        this.rawBindings = bindings;\n        const resolvedBindings = this.bindingsProcessor.getBindings(bindings, breakpoint);\n\n        const inheritanceMap = this.inheritanceProcessor.getInheritanceMap(bindings, breakpoint);\n\n        this.inheritanceMap = inheritanceMap.styles;\n\n        this.stylesProcessor = new StylesBindingsProcessor(\n            this.elementId,\n            this.breakpointNames,\n            bindings\n        );\n\n        this.elementMetadata = new StylesMetadata(\n            new BreakpointElementMetadata(\n                this.breakpointNames,\n                breakpoint,\n                new ElementMetadata(this.elementId, bindings.metadata)\n            )\n        );\n\n        this.devFriendlyStyles = this.stylesProcessor.toDeepStyles(resolvedBindings.styles);\n    }\n}\n\nexport class StylesValueObject {\n    private readonly value: Record<string, any>;\n\n    constructor(value: any = {}) {\n        this.value = value;\n    }\n\n    set(key: string, value: any) {\n        this.value[key] = value;\n    }\n\n    get(key: string) {\n        return this.value[key];\n    }\n\n    getAll() {\n        return this.value;\n    }\n\n    unset(key: string) {\n        delete this.value[key];\n    }\n}\n"],"names":["StylesStore","editor","elementId","breakpointNames","NullMetadata","undefined","cb","styles","StylesValueObject","finalStyles","updatedStyles","document","structuredClone","toJS","Commands","manifest","$getComponentManifestByElementId","inputsAst","ComponentManifestToAstConverter","BindingsProcessor","InheritanceProcessor","editorState","breakpoint","BASE_BREAKPOINT","autorun","runInAction","makeAutoObservable","bindings","resolvedBindings","inheritanceMap","StylesBindingsProcessor","StylesMetadata","BreakpointElementMetadata","ElementMetadata","value","key"],"mappings":"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"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.js

@@ -43,6 +43,7 @@ const UnitValuePicker = (props)=>{
     }, /*#__PURE__*/ react.createElement(Input, {
         disabled: isAuto,
         size: "md",
+        variant: "secondary",
         value: isAuto ? "-" : props.value ?? defaultValue,
         onEnter: onEnter,
         autoSelect: true,
@@ -50,9 +51,10 @@ const UnitValuePicker = (props)=>{
         onBlur: (e)=>setValue(e.target.value),
         autoFocus: true
     })), /*#__PURE__*/ react.createElement("div", {
-        className: "flex-col"
+        className: "w-[80px] shrink-0"
     }, /*#__PURE__*/ react.createElement(Select, {
         size: "md",
+        variant: "secondary",
         value: props.unit,
         options: props.units,
         onChange: setUnit,

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Input, Select } from \"@webiny/admin-ui\";\n\nexport type UnitOption = {\n    label: string;\n    value: string;\n};\n\ninterface UnitValueProps {\n    value: string;\n    unit: string;\n    units: UnitOption[];\n    onChange: (value: string) => void;\n    onChangePreview: (value: string) => void;\n}\n\nclass Value {\n    static from(value: string | undefined) {\n        return value === \"auto\" ? 0 : parseInt(value ?? \"0\");\n    }\n}\n\nconst capTo100 = [\"%\", \"vh\", \"vw\"];\n\nexport const UnitValuePicker = (props: UnitValueProps) => {\n    const [editing, setEditing] = useState(false);\n\n    const defaultValue = editing ? \"\" : 0;\n\n    const isAuto = props.value === \"auto\";\n\n    const currentValue = Value.from(props.value);\n\n    const onEnter = () => {\n        setValue(props.value);\n    };\n\n    const setUnit = (unit: string) => {\n        const value = capTo100.includes(unit) && currentValue > 100 ? 100 : currentValue;\n        props.onChange(unit === \"auto\" ? \"auto\" : `${value}${unit}`);\n    };\n\n    const setValue = (value: string) => {\n        const parsedValue = Value.from(value);\n        const finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        props.onChange(`${finalValue}${props.unit}`);\n    };\n\n    const setPreviewValue = (value: string) => {\n        setEditing(true);\n        let finalValue: string | number = \"\";\n        if (value !== \"\") {\n            const parsedValue = parseInt(value);\n            finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        }\n        props.onChangePreview(`${finalValue}${props.unit}`);\n    };\n\n    return (\n        <div className={\"flex flex-row space-x-sm\"}>\n            <div className={\"flex-col\"}>\n                <Input\n                    disabled={isAuto}\n                    size={\"md\"}\n                    value={isAuto ? \"-\" : (props.value ?? defaultValue)}\n                    onEnter={onEnter}\n                    autoSelect={true}\n                    onChange={value => setPreviewValue(value)}\n                    onBlur={e => setValue(e.target.value)}\n                    autoFocus={true}\n                />\n            </div>\n            <div className={\"flex-col\"}>\n                <Select\n                    size=\"md\"\n                    value={props.unit}\n                    options={props.units}\n                    onChange={setUnit}\n                    displayResetAction={false}\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["Value","value","parseInt","capTo100","UnitValuePicker","props","editing","setEditing","useState","defaultValue","isAuto","currentValue","onEnter","setValue","setUnit","unit","parsedValue","finalValue","isNaN","setPreviewValue","Input","e","Select"],"mappings":";;AAgBA,MAAMA;IACF,OAAO,KAAKC,KAAyB,EAAE;QACnC,OAAOA,AAAU,WAAVA,QAAmB,IAAIC,SAASD,SAAS;IACpD;AACJ;AAEA,MAAME,WAAW;IAAC;IAAK;IAAM;CAAK;AAE3B,MAAMC,kBAAkB,CAACC;IAC5B,MAAM,CAACC,SAASC,WAAW,GAAGC,SAAS;IAEvC,MAAMC,eAAeH,UAAU,KAAK;IAEpC,MAAMI,SAASL,AAAgB,WAAhBA,MAAM,KAAK;IAE1B,MAAMM,eAAeX,MAAM,IAAI,CAACK,MAAM,KAAK;IAE3C,MAAMO,UAAU;QACZC,SAASR,MAAM,KAAK;IACxB;IAEA,MAAMS,UAAU,CAACC;QACb,MAAMd,QAAQE,SAAS,QAAQ,CAACY,SAASJ,eAAe,MAAM,MAAMA;QACpEN,MAAM,QAAQ,CAACU,AAAS,WAATA,OAAkB,SAAS,GAAGd,QAAQc,MAAM;IAC/D;IAEA,MAAMF,WAAW,CAACZ;QACd,MAAMe,cAAchB,MAAM,IAAI,CAACC;QAC/B,MAAMgB,aAAaC,MAAMF,eAAe,IAAIA;QAC5CX,MAAM,QAAQ,CAAC,GAAGY,aAAaZ,MAAM,IAAI,EAAE;IAC/C;IAEA,MAAMc,kBAAkB,CAAClB;QACrBM,WAAW;QACX,IAAIU,aAA8B;QAClC,IAAIhB,AAAU,OAAVA,OAAc;YACd,MAAMe,cAAcd,SAASD;YAC7BgB,aAAaC,MAAMF,eAAe,IAAIA;QAC1C;QACAX,MAAM,eAAe,CAAC,GAAGY,aAAaZ,MAAM,IAAI,EAAE;IACtD;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACe,OAAKA;QACF,UAAUV;QACV,MAAM;QACN,OAAOA,SAAS,MAAOL,MAAM,KAAK,IAAII;QACtC,SAASG;QACT,YAAY;QACZ,UAAUX,CAAAA,QAASkB,gBAAgBlB;QACnC,QAAQoB,CAAAA,IAAKR,SAASQ,EAAE,MAAM,CAAC,KAAK;QACpC,WAAW;uBAGnB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAK;QACL,OAAOjB,MAAM,IAAI;QACjB,SAASA,MAAM,KAAK;QACpB,UAAUS;QACV,oBAAoB;;AAKxC"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Input, Select } from \"@webiny/admin-ui\";\n\nexport type UnitOption = {\n    label: string;\n    value: string;\n};\n\ninterface UnitValueProps {\n    value: string;\n    unit: string;\n    units: UnitOption[];\n    onChange: (value: string) => void;\n    onChangePreview: (value: string) => void;\n}\n\nclass Value {\n    static from(value: string | undefined) {\n        return value === \"auto\" ? 0 : parseInt(value ?? \"0\");\n    }\n}\n\nconst capTo100 = [\"%\", \"vh\", \"vw\"];\n\nexport const UnitValuePicker = (props: UnitValueProps) => {\n    const [editing, setEditing] = useState(false);\n\n    const defaultValue = editing ? \"\" : 0;\n\n    const isAuto = props.value === \"auto\";\n\n    const currentValue = Value.from(props.value);\n\n    const onEnter = () => {\n        setValue(props.value);\n    };\n\n    const setUnit = (unit: string) => {\n        const value = capTo100.includes(unit) && currentValue > 100 ? 100 : currentValue;\n        props.onChange(unit === \"auto\" ? \"auto\" : `${value}${unit}`);\n    };\n\n    const setValue = (value: string) => {\n        const parsedValue = Value.from(value);\n        const finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        props.onChange(`${finalValue}${props.unit}`);\n    };\n\n    const setPreviewValue = (value: string) => {\n        setEditing(true);\n        let finalValue: string | number = \"\";\n        if (value !== \"\") {\n            const parsedValue = parseInt(value);\n            finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        }\n        props.onChangePreview(`${finalValue}${props.unit}`);\n    };\n\n    return (\n        <div className={\"flex flex-row space-x-sm\"}>\n            <div className={\"flex-col\"}>\n                <Input\n                    disabled={isAuto}\n                    size={\"md\"}\n                    variant={\"secondary\"}\n                    value={isAuto ? \"-\" : (props.value ?? defaultValue)}\n                    onEnter={onEnter}\n                    autoSelect={true}\n                    onChange={value => setPreviewValue(value)}\n                    onBlur={e => setValue(e.target.value)}\n                    autoFocus={true}\n                />\n            </div>\n            <div className={\"w-[80px] shrink-0\"}>\n                <Select\n                    size={\"md\"}\n                    variant={\"secondary\"}\n                    value={props.unit}\n                    options={props.units}\n                    onChange={setUnit}\n                    displayResetAction={false}\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["Value","value","parseInt","capTo100","UnitValuePicker","props","editing","setEditing","useState","defaultValue","isAuto","currentValue","onEnter","setValue","setUnit","unit","parsedValue","finalValue","isNaN","setPreviewValue","Input","e","Select"],"mappings":";;AAgBA,MAAMA;IACF,OAAO,KAAKC,KAAyB,EAAE;QACnC,OAAOA,AAAU,WAAVA,QAAmB,IAAIC,SAASD,SAAS;IACpD;AACJ;AAEA,MAAME,WAAW;IAAC;IAAK;IAAM;CAAK;AAE3B,MAAMC,kBAAkB,CAACC;IAC5B,MAAM,CAACC,SAASC,WAAW,GAAGC,SAAS;IAEvC,MAAMC,eAAeH,UAAU,KAAK;IAEpC,MAAMI,SAASL,AAAgB,WAAhBA,MAAM,KAAK;IAE1B,MAAMM,eAAeX,MAAM,IAAI,CAACK,MAAM,KAAK;IAE3C,MAAMO,UAAU;QACZC,SAASR,MAAM,KAAK;IACxB;IAEA,MAAMS,UAAU,CAACC;QACb,MAAMd,QAAQE,SAAS,QAAQ,CAACY,SAASJ,eAAe,MAAM,MAAMA;QACpEN,MAAM,QAAQ,CAACU,AAAS,WAATA,OAAkB,SAAS,GAAGd,QAAQc,MAAM;IAC/D;IAEA,MAAMF,WAAW,CAACZ;QACd,MAAMe,cAAchB,MAAM,IAAI,CAACC;QAC/B,MAAMgB,aAAaC,MAAMF,eAAe,IAAIA;QAC5CX,MAAM,QAAQ,CAAC,GAAGY,aAAaZ,MAAM,IAAI,EAAE;IAC/C;IAEA,MAAMc,kBAAkB,CAAClB;QACrBM,WAAW;QACX,IAAIU,aAA8B;QAClC,IAAIhB,AAAU,OAAVA,OAAc;YACd,MAAMe,cAAcd,SAASD;YAC7BgB,aAAaC,MAAMF,eAAe,IAAIA;QAC1C;QACAX,MAAM,eAAe,CAAC,GAAGY,aAAaZ,MAAM,IAAI,EAAE;IACtD;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACe,OAAKA;QACF,UAAUV;QACV,MAAM;QACN,SAAS;QACT,OAAOA,SAAS,MAAOL,MAAM,KAAK,IAAII;QACtC,SAASG;QACT,YAAY;QACZ,UAAUX,CAAAA,QAASkB,gBAAgBlB;QACnC,QAAQoB,CAAAA,IAAKR,SAASQ,EAAE,MAAM,CAAC,KAAK;QACpC,WAAW;uBAGnB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAM;QACN,SAAS;QACT,OAAOjB,MAAM,IAAI;QACjB,SAASA,MAAM,KAAK;QACpB,UAAUS;QACV,oBAAoB;;AAKxC"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/ValueSelector.js

@@ -50,18 +50,19 @@ const ValueSelector = (props)=>{
         setIsOpen(false);
     };
     const classNames = cn([
-        "cursor-pointer bg-neutral-base",
+        "cursor-pointer bg-neutral-base w-[45px]",
         "border-sm border-solid border-neutral-muted",
-        props.overridden && props.inheritedFrom && "bg-success text-neutral-light",
-        props.disabled && "bg-neutral-disabled text-neutral-disabled pointer-events-none",
-        "flex flex-row text-sm mx-auto justify-center rounded-sm py-px px-xxs"
+        {
+            "bg-success text-neutral-light": props.overridden && props.inheritedFrom
+        },
+        {
+            "text-neutral-dimmed border-neutral-dimmed-darker bg-neutral-subtle pointer-events-none": props.disabled
+        },
+        "flex flex-row text-sm mx-auto justify-center rounded-sm py-xxs px-xs"
     ]);
     const label = /*#__PURE__*/ react.createElement("div", {
         className: classNames,
-        onClick: ()=>setIsOpen(true),
-        style: {
-            width: 45
-        }
+        onClick: ()=>setIsOpen(true)
     }, props.value ?? 0, " ", props.isKeyword ? null : props.unit);
     const controls = /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FormComponentLabel, {
         text: props.label

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/ValueSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/ValueSelector.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/ValueSelector.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from \"react\";\nimport {\n    cn,\n    DropdownMenu,\n    FormComponentLabel,\n    FormComponentNote,\n    Input,\n    Select,\n    Separator\n} from \"@webiny/admin-ui\";\nimport { InheritedFrom } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { BASE_BREAKPOINT } from \"~/constants.js\";\nimport { UnitValue } from \"./UnitValue.js\";\n\ntype Option = {\n    label: string;\n    value: string;\n};\n\ninterface ValueSelectorProps {\n    label: React.ReactNode;\n    value: string;\n    unit: string;\n    isKeyword: boolean;\n    units: Option[];\n    onChange: (value: string) => void;\n    onChangePreview: (value: string) => void;\n    onReset: () => void;\n    inheritedFrom?: string;\n    overridden?: boolean;\n    disabled?: boolean;\n}\n\nexport const ValueSelector = (props: ValueSelectorProps) => {\n    const { breakpoint } = useBreakpoint();\n    const [editing, setEditing] = useState(false);\n    const [isOpen, setIsOpen] = useState(false);\n    const [inputChanged, setInputChanged] = useState(false);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const defaultValue = editing ? \"\" : 0;\n\n    const currentValue = UnitValue.from(props.value);\n\n    const trackTyping = useCallback(() => {\n        setInputChanged(true);\n    }, [setInputChanged]);\n\n    const onEnter = () => {\n        setValue(props.value);\n        setIsOpen(false);\n    };\n\n    const setUnit = (unit: string) => {\n        setEditing(false);\n        currentValue.setUnit(unit);\n        props.onChange(currentValue.toString());\n    };\n\n    const setValue = (value: string) => {\n        const parsedValue = UnitValue.from(value);\n        if (!inputChanged) {\n            return;\n        }\n        const finalValue = parsedValue.getValue(\"0\");\n        props.onChange(`${finalValue}${props.unit}`);\n\n        setInputChanged(false);\n        setTimeout(() => {\n            setEditing(false);\n        }, 20);\n    };\n\n    const setPreviewValue = (value: string) => {\n        setEditing(true);\n        let finalValue: string | number = \"\";\n        if (value !== \"\") {\n            const parsedValue = parseInt(value);\n            finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        }\n        props.onChangePreview(`${finalValue}${props.unit}`);\n    };\n\n    const onReset = () => {\n        props.onReset();\n        setIsOpen(false);\n    };\n\n    const classNames = cn([\n        \"cursor-pointer bg-neutral-base\",\n        \"border-sm border-solid border-neutral-muted\",\n        props.overridden && props.inheritedFrom && \"bg-success text-neutral-light\",\n        props.disabled && \"bg-neutral-disabled text-neutral-disabled pointer-events-none\",\n        \"flex flex-row text-sm mx-auto justify-center rounded-sm py-px px-xxs\"\n    ]);\n\n    const label = (\n        <div className={classNames} onClick={() => setIsOpen(true)} style={{ width: 45 }}>\n            {props.value ?? 0} {props.isKeyword ? null : props.unit}\n        </div>\n    );\n\n    const controls = (\n        <>\n            <FormComponentLabel text={props.label} />\n            <div className={\"flex flex-row space-x-sm\"}>\n                <div className={\"flex-col\"}>\n                    <Input\n                        onKeyDown={trackTyping}\n                        inputRef={inputRef}\n                        disabled={props.isKeyword}\n                        size={\"md\"}\n                        value={props.isKeyword ? \"-\" : (props.value ?? defaultValue)}\n                        onEnter={onEnter}\n                        autoSelect={true}\n                        onChange={value => setPreviewValue(value)}\n                        onBlur={e => setValue(e.target.value)}\n                        autoFocus={true}\n                    />\n                </div>\n                <div className={\"flex-col\"}>\n                    <Select\n                        size=\"md\"\n                        value={props.unit}\n                        options={props.units}\n                        onChange={unit => {\n                            setUnit(unit);\n                            setTimeout(() => {\n                                inputRef.current?.focus();\n                            }, 20);\n                        }}\n                        displayResetAction={false}\n                    />\n                </div>\n            </div>\n            <FormComponentNote text={`Hit \"Enter\" or click outside the menu to close it.`} />\n        </>\n    );\n\n    return (\n        <div className={\"flex flex-col w-full\"}>\n            <DropdownMenu\n                open={isOpen}\n                onOpenChange={() => setIsOpen(false)}\n                trigger={label}\n                align=\"center\"\n                side=\"bottom\"\n                className={\"shadow-lg\"}\n            >\n                <div className={\"p-sm text-sm\"} style={{ width: 200 }}>\n                    {controls}\n                    {BASE_BREAKPOINT === breakpoint.name ? null : (\n                        <>\n                            <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                            <InheritedFrom\n                                inheritedFrom={props.inheritedFrom ?? BASE_BREAKPOINT}\n                                overriddenAt={props.overridden ? breakpoint.name : null}\n                                onReset={onReset}\n                            />\n                        </>\n                    )}\n                </div>\n            </DropdownMenu>\n        </div>\n    );\n};\n"],"names":["ValueSelector","props","breakpoint","useBreakpoint","editing","setEditing","useState","isOpen","setIsOpen","inputChanged","setInputChanged","inputRef","useRef","defaultValue","currentValue","UnitValue","trackTyping","useCallback","onEnter","setValue","setUnit","unit","value","parsedValue","finalValue","setTimeout","setPreviewValue","parseInt","isNaN","onReset","classNames","cn","label","controls","FormComponentLabel","Input","e","Select","FormComponentNote","DropdownMenu","BASE_BREAKPOINT","Separator","InheritedFrom"],"mappings":"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"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/ValueSelector.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/ValueSelector.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from \"react\";\nimport {\n    cn,\n    DropdownMenu,\n    FormComponentLabel,\n    FormComponentNote,\n    Input,\n    Select,\n    Separator\n} from \"@webiny/admin-ui\";\nimport { InheritedFrom } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { BASE_BREAKPOINT } from \"~/constants.js\";\nimport { UnitValue } from \"./UnitValue.js\";\n\ntype Option = {\n    label: string;\n    value: string;\n};\n\ninterface ValueSelectorProps {\n    label: React.ReactNode;\n    value: string;\n    unit: string;\n    isKeyword: boolean;\n    units: Option[];\n    onChange: (value: string) => void;\n    onChangePreview: (value: string) => void;\n    onReset: () => void;\n    inheritedFrom?: string;\n    overridden?: boolean;\n    disabled?: boolean;\n}\n\nexport const ValueSelector = (props: ValueSelectorProps) => {\n    const { breakpoint } = useBreakpoint();\n    const [editing, setEditing] = useState(false);\n    const [isOpen, setIsOpen] = useState(false);\n    const [inputChanged, setInputChanged] = useState(false);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const defaultValue = editing ? \"\" : 0;\n\n    const currentValue = UnitValue.from(props.value);\n\n    const trackTyping = useCallback(() => {\n        setInputChanged(true);\n    }, [setInputChanged]);\n\n    const onEnter = () => {\n        setValue(props.value);\n        setIsOpen(false);\n    };\n\n    const setUnit = (unit: string) => {\n        setEditing(false);\n        currentValue.setUnit(unit);\n        props.onChange(currentValue.toString());\n    };\n\n    const setValue = (value: string) => {\n        const parsedValue = UnitValue.from(value);\n        if (!inputChanged) {\n            return;\n        }\n        const finalValue = parsedValue.getValue(\"0\");\n        props.onChange(`${finalValue}${props.unit}`);\n\n        setInputChanged(false);\n        setTimeout(() => {\n            setEditing(false);\n        }, 20);\n    };\n\n    const setPreviewValue = (value: string) => {\n        setEditing(true);\n        let finalValue: string | number = \"\";\n        if (value !== \"\") {\n            const parsedValue = parseInt(value);\n            finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        }\n        props.onChangePreview(`${finalValue}${props.unit}`);\n    };\n\n    const onReset = () => {\n        props.onReset();\n        setIsOpen(false);\n    };\n\n    const classNames = cn([\n        \"cursor-pointer bg-neutral-base w-[45px]\",\n        \"border-sm border-solid border-neutral-muted\",\n        { \"bg-success text-neutral-light\": props.overridden && props.inheritedFrom },\n        {\n            \"text-neutral-dimmed border-neutral-dimmed-darker bg-neutral-subtle pointer-events-none\":\n                props.disabled\n        },\n        \"flex flex-row text-sm mx-auto justify-center rounded-sm py-xxs px-xs\"\n    ]);\n\n    const label = (\n        <div className={classNames} onClick={() => setIsOpen(true)}>\n            {props.value ?? 0} {props.isKeyword ? null : props.unit}\n        </div>\n    );\n\n    const controls = (\n        <>\n            <FormComponentLabel text={props.label} />\n            <div className={\"flex flex-row space-x-sm\"}>\n                <div className={\"flex-col\"}>\n                    <Input\n                        onKeyDown={trackTyping}\n                        inputRef={inputRef}\n                        disabled={props.isKeyword}\n                        size={\"md\"}\n                        value={props.isKeyword ? \"-\" : (props.value ?? defaultValue)}\n                        onEnter={onEnter}\n                        autoSelect={true}\n                        onChange={value => setPreviewValue(value)}\n                        onBlur={e => setValue(e.target.value)}\n                        autoFocus={true}\n                    />\n                </div>\n                <div className={\"flex-col\"}>\n                    <Select\n                        size=\"md\"\n                        value={props.unit}\n                        options={props.units}\n                        onChange={unit => {\n                            setUnit(unit);\n                            setTimeout(() => {\n                                inputRef.current?.focus();\n                            }, 20);\n                        }}\n                        displayResetAction={false}\n                    />\n                </div>\n            </div>\n            <FormComponentNote text={`Hit \"Enter\" or click outside the menu to close it.`} />\n        </>\n    );\n\n    return (\n        <div className={\"flex flex-col w-full\"}>\n            <DropdownMenu\n                open={isOpen}\n                onOpenChange={() => setIsOpen(false)}\n                trigger={label}\n                align=\"center\"\n                side=\"bottom\"\n                className={\"shadow-lg\"}\n            >\n                <div className={\"p-sm text-sm\"} style={{ width: 200 }}>\n                    {controls}\n                    {BASE_BREAKPOINT === breakpoint.name ? null : (\n                        <>\n                            <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                            <InheritedFrom\n                                inheritedFrom={props.inheritedFrom ?? BASE_BREAKPOINT}\n                                overriddenAt={props.overridden ? breakpoint.name : null}\n                                onReset={onReset}\n                            />\n                        </>\n                    )}\n                </div>\n            </DropdownMenu>\n        </div>\n    );\n};\n"],"names":["ValueSelector","props","breakpoint","useBreakpoint","editing","setEditing","useState","isOpen","setIsOpen","inputChanged","setInputChanged","inputRef","useRef","defaultValue","currentValue","UnitValue","trackTyping","useCallback","onEnter","setValue","setUnit","unit","value","parsedValue","finalValue","setTimeout","setPreviewValue","parseInt","isNaN","onReset","classNames","cn","label","controls","FormComponentLabel","Input","e","Select","FormComponentNote","DropdownMenu","BASE_BREAKPOINT","Separator","InheritedFrom"],"mappings":"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"}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/GridItem.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { ComponentGroupItem } from "@webiny/website-builder-sdk";
+export declare const GridItem: ({ item }: {
+    item: ComponentGroupItem;
+}) => React.JSX.Element;

package/BaseEditor/defaultConfig/Toolbar/InsertElements/GridItem.js

@@ -0,0 +1,24 @@
+import react from "react";
+import { Icon } from "@webiny/admin-ui";
+import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
+import { InlineSvg } from "./InlineSvg.js";
+const useComponent = (name)=>useSelectFromEditor((state)=>state.components?.[name]);
+const GridItem = ({ item })=>{
+    const component = useComponent(item.name);
+    if (!component) return /*#__PURE__*/ react.createElement(react.Fragment, null);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col items-center justify-center gap-sm px-sm py-md bg-neutral-light rounded-lg cursor-grab fill-neutral-strong w-[80px] min-h-[80px]"
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        label: "Icon",
+        icon: /*#__PURE__*/ react.createElement(InlineSvg, {
+            src: component.image
+        }),
+        size: "lg",
+        color: "neutral-strong"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "text-sm font-medium text-neutral-strong text-center leading-tight"
+    }, component.label ?? component.name));
+};
+export { GridItem };
+
+//# sourceMappingURL=GridItem.js.map

package/BaseEditor/defaultConfig/Toolbar/InsertElements/GridItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/InsertElements/GridItem.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/InsertElements/GridItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport type { ComponentGroupItem, ComponentManifest } from \"@webiny/website-builder-sdk\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { InlineSvg } from \"./InlineSvg.js\";\n\nconst useComponent = (name: string) => {\n    return useSelectFromEditor<ComponentManifest | undefined>(state => state.components?.[name]);\n};\n\nexport const GridItem = ({ item }: { item: ComponentGroupItem }) => {\n    const component = useComponent(item.name);\n    if (!component) {\n        return <></>;\n    }\n\n    return (\n        <div className=\"flex flex-col items-center justify-center gap-sm px-sm py-md bg-neutral-light rounded-lg cursor-grab fill-neutral-strong w-[80px] min-h-[80px]\">\n            <Icon\n                label=\"Icon\"\n                icon={<InlineSvg src={component.image!} />}\n                size={\"lg\"}\n                color={\"neutral-strong\"}\n            />\n            <div className=\"text-sm font-medium text-neutral-strong text-center leading-tight\">\n                {component.label ?? component.name}\n            </div>\n        </div>\n    );\n};\n"],"names":["useComponent","name","useSelectFromEditor","state","GridItem","item","component","Icon","InlineSvg"],"mappings":";;;;AAMA,MAAMA,eAAe,CAACC,OACXC,oBAAmDC,CAAAA,QAASA,MAAM,UAAU,EAAE,CAACF,KAAK;AAGxF,MAAMG,WAAW,CAAC,EAAEC,IAAI,EAAgC;IAC3D,MAAMC,YAAYN,aAAaK,KAAK,IAAI;IACxC,IAAI,CAACC,WACD,OAAO,WAAP,GAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACC,MAAIA;QACD,OAAM;QACN,oBAAM,oBAACC,WAASA;YAAC,KAAKF,UAAU,KAAK;;QACrC,MAAM;QACN,OAAO;sBAEX,oBAAC;QAAI,WAAU;OACVA,UAAU,KAAK,IAAIA,UAAU,IAAI;AAIlD"}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsGrid.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ComponentGroupItem } from "@webiny/website-builder-sdk";
+interface GroupItemsGridProps {
+    items: ComponentGroupItem[];
+}
+export declare const GroupItemsGrid: ({ items }: GroupItemsGridProps) => React.JSX.Element;
+export {};

package/BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsGrid.js

@@ -0,0 +1,18 @@
+import react from "react";
+import { Draggable } from "../../../components/Draggable.js";
+import { GridItem } from "./GridItem.js";
+const GroupItemsGrid = ({ items })=>/*#__PURE__*/ react.createElement("div", {
+        className: "grid grid-cols-3 gap-sm px-lg py-sm",
+        "data-role": "group-items"
+    }, items.map((item)=>/*#__PURE__*/ react.createElement(Draggable, {
+            key: item.name,
+            type: "ELEMENT",
+            item: {
+                componentName: item.name
+            }
+        }, ({ dragRef })=>dragRef(/*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(GridItem, {
+                item: item
+            }))))));
+export { GroupItemsGrid };
+
+//# sourceMappingURL=GroupItemsGrid.js.map

package/BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsGrid.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsGrid.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentGroupItem } from \"@webiny/website-builder-sdk\";\nimport { Draggable } from \"~/BaseEditor/components/Draggable.js\";\nimport { GridItem } from \"./GridItem.js\";\n\ninterface GroupItemsGridProps {\n    items: ComponentGroupItem[];\n}\n\nexport const GroupItemsGrid = ({ items }: GroupItemsGridProps) => (\n    <div className={\"grid grid-cols-3 gap-sm px-lg py-sm\"} data-role={\"group-items\"}>\n        {items.map(item => (\n            <Draggable key={item.name} type=\"ELEMENT\" item={{ componentName: item.name }}>\n                {({ dragRef }) =>\n                    dragRef(\n                        <div>\n                            <GridItem item={item} />\n                        </div>\n                    )\n                }\n            </Draggable>\n        ))}\n    </div>\n);\n"],"names":["GroupItemsGrid","items","item","Draggable","dragRef","GridItem"],"mappings":";;;AASO,MAAMA,iBAAiB,CAAC,EAAEC,KAAK,EAAuB,iBACzD,oBAAC;QAAI,WAAW;QAAuC,aAAW;OAC7DA,MAAM,GAAG,CAACC,CAAAA,OAAAA,WAAAA,GACP,oBAACC,WAASA;YAAC,KAAKD,KAAK,IAAI;YAAE,MAAK;YAAU,MAAM;gBAAE,eAAeA,KAAK,IAAI;YAAC;WACtE,CAAC,EAAEE,OAAO,EAAE,GACTA,QAAQ,WAARA,GACI,oBAAC,2BACG,oBAACC,UAAQA;gBAAC,MAAMH"}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsList.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ComponentGroupItem } from "@webiny/website-builder-sdk";
+interface GroupItemsListProps {
+    items: ComponentGroupItem[];
+}
+export declare const GroupItemsList: ({ items }: GroupItemsListProps) => React.JSX.Element;
+export {};

package/BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsList.js

@@ -0,0 +1,18 @@
+import react from "react";
+import { Draggable } from "../../../components/Draggable.js";
+import { ListItem } from "./ListItem.js";
+const GroupItemsList = ({ items })=>/*#__PURE__*/ react.createElement("div", {
+        className: "py-sm px-xl flex flex-col gap-y-xs",
+        "data-role": "group-items"
+    }, items.map((item)=>/*#__PURE__*/ react.createElement(Draggable, {
+            key: item.name,
+            type: "ELEMENT",
+            item: {
+                componentName: item.name
+            }
+        }, ({ dragRef })=>dragRef(/*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(ListItem, {
+                item: item
+            }))))));
+export { GroupItemsList };
+
+//# sourceMappingURL=GroupItemsList.js.map

package/BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsList.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsList.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentGroupItem } from \"@webiny/website-builder-sdk\";\nimport { Draggable } from \"~/BaseEditor/components/Draggable.js\";\nimport { ListItem } from \"./ListItem.js\";\n\ninterface GroupItemsListProps {\n    items: ComponentGroupItem[];\n}\n\nexport const GroupItemsList = ({ items }: GroupItemsListProps) => (\n    <div className={\"py-sm px-xl flex flex-col gap-y-xs\"} data-role={\"group-items\"}>\n        {items.map(item => (\n            <Draggable key={item.name} type=\"ELEMENT\" item={{ componentName: item.name }}>\n                {({ dragRef }) =>\n                    dragRef(\n                        <div>\n                            <ListItem item={item} />\n                        </div>\n                    )\n                }\n            </Draggable>\n        ))}\n    </div>\n);\n"],"names":["GroupItemsList","items","item","Draggable","dragRef","ListItem"],"mappings":";;;AASO,MAAMA,iBAAiB,CAAC,EAAEC,KAAK,EAAuB,iBACzD,oBAAC;QAAI,WAAW;QAAsC,aAAW;OAC5DA,MAAM,GAAG,CAACC,CAAAA,OAAAA,WAAAA,GACP,oBAACC,WAASA;YAAC,KAAKD,KAAK,IAAI;YAAE,MAAK;YAAU,MAAM;gBAAE,eAAeA,KAAK,IAAI;YAAC;WACtE,CAAC,EAAEE,OAAO,EAAE,GACTA,QAAQ,WAARA,GACI,oBAAC,2BACG,oBAACC,UAAQA;gBAAC,MAAMH"}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElements.js

@@ -1,45 +1,81 @@
-import react from "react";
-import { Card, Icon } from "@webiny/admin-ui";
-import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
-import { InlineSvg } from "./InlineSvg.js";
-import { Draggable } from "../../../components/Draggable.js";
+import react, { useState } from "react";
+import { FillViewportHeight, Icon, InputPrimitive, ScrollArea, Text, ToggleGroupPrimitive } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/search.svg";
+import { ReactComponent as format_list_bulleted_svg_ReactComponent } from "@webiny/icons/format_list_bulleted.svg";
+import { ReactComponent as grid_view_svg_ReactComponent } from "@webiny/icons/grid_view.svg";
+import { ReactComponent as dashboard_customize_svg_ReactComponent } from "@webiny/icons/dashboard_customize.svg";
 import { useComponentGroups } from "./useComponentGroups.js";
-const GroupComponent = ({ item })=>{
-    const components = useSelectFromEditor((state)=>state.components ?? {});
-    const component = components[item.name];
-    if (!component) return /*#__PURE__*/ react.createElement(react.Fragment, null);
+import { InlineSvg } from "./InlineSvg.js";
+import { GroupItemsList } from "./GroupItemsList.js";
+import { GroupItemsGrid } from "./GroupItemsGrid.js";
+const VIEW_ITEMS = [
+    {
+        value: "list",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(format_list_bulleted_svg_ReactComponent, null),
+            label: "List view"
+        })
+    },
+    {
+        value: "grid",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(grid_view_svg_ReactComponent, null),
+            label: "Grid view"
+        })
+    }
+];
+const InsertElements = ()=>{
+    const [search, setSearch] = useState("");
+    const [viewType, setViewType] = useState("list");
+    const groups = useComponentGroups();
+    const query = search.toLowerCase().trim();
+    const isGrid = "grid" === viewType;
     return /*#__PURE__*/ react.createElement("div", {
-        className: "flex flex-row items-center p-sm bg-neutral-light rounded-sm gap-sm cursor-grab fill-neutral-strong"
-    }, /*#__PURE__*/ react.createElement(Icon, {
-        label: "Icon",
-        icon: /*#__PURE__*/ react.createElement(InlineSvg, {
-            src: component.image
+        className: "mb-sm pt-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-xs mb-md"
+    }, /*#__PURE__*/ react.createElement(InputPrimitive, {
+        value: search,
+        onChange: (value)=>setSearch(value ?? ""),
+        onEscape: ()=>setSearch(""),
+        placeholder: "Search...",
+        startIcon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Search"
         }),
+        variant: "secondary",
         size: "md"
-    }), /*#__PURE__*/ react.createElement("div", {
-        className: "text-sm font-medium text-neutral-primary text-center"
-    }, component.label ?? component.name));
-};
-const InsertElements = ()=>{
-    const groups = useComponentGroups();
-    return /*#__PURE__*/ react.createElement(react.Fragment, null, groups.map((group)=>{
-        if (!group.items.length) return null;
-        return /*#__PURE__*/ react.createElement(Card, {
+    }), /*#__PURE__*/ react.createElement(ToggleGroupPrimitive, {
+        items: VIEW_ITEMS,
+        value: viewType,
+        onChange: (v)=>v && setViewType(v),
+        variant: "ghost",
+        size: "md"
+    })), /*#__PURE__*/ react.createElement(FillViewportHeight, null, /*#__PURE__*/ react.createElement(ScrollArea, {
+        className: "h-full"
+    }, /*#__PURE__*/ react.createElement("div", null, groups.map((group)=>{
+        const items = query ? group.items.filter((item)=>(item.label ?? item.name).toLowerCase().includes(query)) : group.items;
+        if (!items.length) return null;
+        return /*#__PURE__*/ react.createElement("div", {
             key: group.name,
-            title: group.label,
-            description: group.description
+            className: "p-sm flex flex-col gap-y-sm"
         }, /*#__PURE__*/ react.createElement("div", {
-            className: "flex flex-col gap-sm p-sm justify-start"
-        }, group.items.map((item)=>/*#__PURE__*/ react.createElement(Draggable, {
-                key: item.name,
-                type: "ELEMENT",
-                item: {
-                    componentName: item.name
-                }
-            }, ({ dragRef })=>dragRef(/*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(GroupComponent, {
-                    item: item
-                })))))));
-    }));
+            className: "flex gap-x-sm"
+        }, /*#__PURE__*/ react.createElement(Icon, {
+            color: "accent",
+            icon: group.icon ? /*#__PURE__*/ react.createElement(InlineSvg, {
+                src: group.icon
+            }) : /*#__PURE__*/ react.createElement(dashboard_customize_svg_ReactComponent, null),
+            label: group.label
+        }), /*#__PURE__*/ react.createElement(Text, {
+            size: "md",
+            className: "font-semibold"
+        }, group.label)), isGrid ? /*#__PURE__*/ react.createElement(GroupItemsGrid, {
+            items: items
+        }) : /*#__PURE__*/ react.createElement(GroupItemsList, {
+            items: items
+        }));
+    })))));
 };
 export { InsertElements };
 

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElements.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElements.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElements.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Card } from \"@webiny/admin-ui\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport type { ComponentGroupItem, ComponentManifest } from \"@webiny/website-builder-sdk\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\nimport { Draggable } from \"~/BaseEditor/components/Draggable.js\";\nimport { useComponentGroups } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/useComponentGroups.js\";\n\nconst GroupComponent = ({ item }: { item: ComponentGroupItem }) => {\n    const components = useSelectFromEditor<Record<string, ComponentManifest>>(state => {\n        return state.components ?? {};\n    });\n\n    const component = components[item.name];\n\n    if (!component) {\n        return <></>;\n    }\n\n    return (\n        <div className=\"flex flex-row items-center p-sm bg-neutral-light rounded-sm gap-sm cursor-grab fill-neutral-strong\">\n            <Icon label=\"Icon\" icon={<InlineSvg src={component.image!} />} size={\"md\"} />\n            <div className=\"text-sm font-medium text-neutral-primary text-center\">\n                {component.label ?? component.name}\n            </div>\n        </div>\n    );\n};\n\nexport const InsertElements = () => {\n    const groups = useComponentGroups();\n\n    return (\n        <>\n            {groups.map(group => {\n                if (!group.items.length) {\n                    return null;\n                }\n\n                return (\n                    <Card\n                        key={group.name}\n                        title={group.label}\n                        description={group.description}\n                        // borderRadius={\"none\"}\n                        // padding={\"\"}\n                    >\n                        <div className=\"flex flex-col gap-sm p-sm justify-start\">\n                            {group.items.map(item => {\n                                return (\n                                    <Draggable\n                                        key={item.name}\n                                        type=\"ELEMENT\"\n                                        item={{ componentName: item.name }}\n                                    >\n                                        {({ dragRef }) =>\n                                            dragRef(\n                                                <div>\n                                                    <GroupComponent item={item} />\n                                                </div>\n                                            )\n                                        }\n                                    </Draggable>\n                                );\n                            })}\n                        </div>\n                    </Card>\n                );\n            })}\n        </>\n    );\n};\n"],"names":["GroupComponent","item","components","useSelectFromEditor","state","component","Icon","InlineSvg","InsertElements","groups","useComponentGroups","group","Card","Draggable","dragRef"],"mappings":";;;;;;AAQA,MAAMA,iBAAiB,CAAC,EAAEC,IAAI,EAAgC;IAC1D,MAAMC,aAAaC,oBAAuDC,CAAAA,QAC/DA,MAAM,UAAU,IAAI,CAAC;IAGhC,MAAMC,YAAYH,UAAU,CAACD,KAAK,IAAI,CAAC;IAEvC,IAAI,CAACI,WACD,OAAO,WAAP,GAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACC,MAAIA;QAAC,OAAM;QAAO,oBAAM,oBAACC,WAASA;YAAC,KAAKF,UAAU,KAAK;;QAAO,MAAM;sBACrE,oBAAC;QAAI,WAAU;OACVA,UAAU,KAAK,IAAIA,UAAU,IAAI;AAIlD;AAEO,MAAMG,iBAAiB;IAC1B,MAAMC,SAASC;IAEf,OAAO,WAAP,GACI,0CACKD,OAAO,GAAG,CAACE,CAAAA;QACR,IAAI,CAACA,MAAM,KAAK,CAAC,MAAM,EACnB,OAAO;QAGX,OAAO,WAAP,GACI,oBAACC,MAAIA;YACD,KAAKD,MAAM,IAAI;YACf,OAAOA,MAAM,KAAK;YAClB,aAAaA,MAAM,WAAW;yBAI9B,oBAAC;YAAI,WAAU;WACVA,MAAM,KAAK,CAAC,GAAG,CAACV,CAAAA,OACN,WAAP,GACI,oBAACY,WAASA;gBACN,KAAKZ,KAAK,IAAI;gBACd,MAAK;gBACL,MAAM;oBAAE,eAAeA,KAAK,IAAI;gBAAC;eAEhC,CAAC,EAAEa,OAAO,EAAE,GACTA,QAAQ,WAARA,GACI,oBAAC,2BACG,oBAACd,gBAAcA;oBAAC,MAAMC;;IAU9D;AAGZ"}
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElements.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElements.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n    Icon,\n    Text,\n    ScrollArea,\n    InputPrimitive,\n    ToggleGroupPrimitive,\n    FillViewportHeight\n} from \"@webiny/admin-ui\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { ReactComponent as ListIcon } from \"@webiny/icons/format_list_bulleted.svg\";\nimport { ReactComponent as GridIcon } from \"@webiny/icons/grid_view.svg\";\nimport { ReactComponent as DashboardIcon } from \"@webiny/icons/dashboard_customize.svg\";\nimport { useComponentGroups } from \"./useComponentGroups.js\";\nimport { InlineSvg } from \"./InlineSvg.js\";\nimport { GroupItemsList } from \"./GroupItemsList.js\";\nimport { GroupItemsGrid } from \"./GroupItemsGrid.js\";\n\nconst VIEW_ITEMS = [\n    { value: \"list\", icon: <Icon icon={<ListIcon />} label={\"List view\"} /> },\n    { value: \"grid\", icon: <Icon icon={<GridIcon />} label={\"Grid view\"} /> }\n];\n\nexport const InsertElements = () => {\n    const [search, setSearch] = useState(\"\");\n    const [viewType, setViewType] = useState(\"list\");\n    const groups = useComponentGroups();\n    const query = search.toLowerCase().trim();\n    const isGrid = viewType === \"grid\";\n\n    return (\n        <div className={\"mb-sm pt-sm\"}>\n            <div className={\"flex items-center gap-xs mb-md\"}>\n                <InputPrimitive\n                    value={search}\n                    onChange={value => setSearch(value ?? \"\")}\n                    onEscape={() => setSearch(\"\")}\n                    placeholder={\"Search...\"}\n                    startIcon={<Icon icon={<SearchIcon />} label={\"Search\"} />}\n                    variant={\"secondary\"}\n                    size={\"md\"}\n                />\n                <ToggleGroupPrimitive\n                    items={VIEW_ITEMS}\n                    value={viewType}\n                    onChange={v => v && setViewType(v)}\n                    variant={\"ghost\"}\n                    size={\"md\"}\n                />\n            </div>\n            <FillViewportHeight>\n                <ScrollArea className={\"h-full\"}>\n                    <div>\n                        {groups.map(group => {\n                            const items = query\n                                ? group.items.filter(item =>\n                                      (item.label ?? item.name).toLowerCase().includes(query)\n                                  )\n                                : group.items;\n\n                            if (!items.length) {\n                                return null;\n                            }\n\n                            return (\n                                <div key={group.name} className={\"p-sm flex flex-col gap-y-sm\"}>\n                                    <div className={\"flex gap-x-sm\"}>\n                                        <Icon\n                                            color={\"accent\"}\n                                            icon={\n                                                group.icon ? (\n                                                    <InlineSvg src={group.icon} />\n                                                ) : (\n                                                    <DashboardIcon />\n                                                )\n                                            }\n                                            label={group.label}\n                                        />\n                                        <Text size={\"md\"} className={\"font-semibold\"}>\n                                            {group.label}\n                                        </Text>\n                                    </div>\n                                    {isGrid ? (\n                                        <GroupItemsGrid items={items} />\n                                    ) : (\n                                        <GroupItemsList items={items} />\n                                    )}\n                                </div>\n                            );\n                        })}\n                    </div>\n                </ScrollArea>\n            </FillViewportHeight>\n        </div>\n    );\n};\n"],"names":["VIEW_ITEMS","Icon","ListIcon","GridIcon","InsertElements","search","setSearch","useState","viewType","setViewType","groups","useComponentGroups","query","isGrid","InputPrimitive","value","SearchIcon","ToggleGroupPrimitive","v","FillViewportHeight","ScrollArea","group","items","item","InlineSvg","DashboardIcon","Text","GroupItemsGrid","GroupItemsList"],"mappings":";;;;;;;;;;AAkBA,MAAMA,aAAa;IACf;QAAE,OAAO;QAAQ,MAAM,WAAN,GAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,yCAAQA;YAAK,OAAO;;IAAgB;IACxE;QAAE,OAAO;QAAQ,MAAM,WAAN,GAAM,oBAACD,MAAIA;YAAC,oBAAM,oBAACE,8BAAQA;YAAK,OAAO;;IAAgB;CAC3E;AAEM,MAAMC,iBAAiB;IAC1B,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAAS;IACrC,MAAM,CAACC,UAAUC,YAAY,GAAGF,SAAS;IACzC,MAAMG,SAASC;IACf,MAAMC,QAAQP,OAAO,WAAW,GAAG,IAAI;IACvC,MAAMQ,SAASL,AAAa,WAAbA;IAEf,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACM,gBAAcA;QACX,OAAOT;QACP,UAAUU,CAAAA,QAAST,UAAUS,SAAS;QACtC,UAAU,IAAMT,UAAU;QAC1B,aAAa;QACb,yBAAW,oBAACL,MAAIA;YAAC,oBAAM,oBAACe,gBAAUA;YAAK,OAAO;;QAC9C,SAAS;QACT,MAAM;sBAEV,oBAACC,sBAAoBA;QACjB,OAAOjB;QACP,OAAOQ;QACP,UAAUU,CAAAA,IAAKA,KAAKT,YAAYS;QAChC,SAAS;QACT,MAAM;uBAGd,oBAACC,oBAAkBA,MAAAA,WAAAA,GACf,oBAACC,YAAUA;QAAC,WAAW;qBACnB,oBAAC,aACIV,OAAO,GAAG,CAACW,CAAAA;QACR,MAAMC,QAAQV,QACRS,MAAM,KAAK,CAAC,MAAM,CAACE,CAAAA,OACdA,AAAAA,CAAAA,KAAK,KAAK,IAAIA,KAAK,IAAG,EAAG,WAAW,GAAG,QAAQ,CAACX,UAErDS,MAAM,KAAK;QAEjB,IAAI,CAACC,MAAM,MAAM,EACb,OAAO;QAGX,OAAO,WAAP,GACI,oBAAC;YAAI,KAAKD,MAAM,IAAI;YAAE,WAAW;yBAC7B,oBAAC;YAAI,WAAW;yBACZ,oBAACpB,MAAIA;YACD,OAAO;YACP,MACIoB,MAAM,IAAI,GAAG,WAAH,GACN,oBAACG,WAASA;gBAAC,KAAKH,MAAM,IAAI;+BAE1B,oBAACI,wCAAaA;YAGtB,OAAOJ,MAAM,KAAK;0BAEtB,oBAACK,MAAIA;YAAC,MAAM;YAAM,WAAW;WACxBL,MAAM,KAAK,IAGnBR,SAAS,WAATA,GACG,oBAACc,gBAAcA;YAAC,OAAOL;2BAEvB,oBAACM,gBAAcA;YAAC,OAAON;;IAIvC;AAMxB"}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElementsTab.js

@@ -1,17 +1,16 @@
 import react from "react";
-import { Icon, Tabs } from "@webiny/admin-ui";
-import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer.js";
+import { Icon } from "@webiny/admin-ui";
 import { ReactComponent } from "@webiny/icons/add_circle_outline.svg";
+import { Toolbar } from "../../../config/Toolbar/Toolbar.js";
 import { InsertElements } from "./InsertElements.js";
-const InsertElementsTab = ()=>/*#__PURE__*/ react.createElement(Tabs.Tab, {
-        value: "insert",
-        trigger: "Insert",
-        spacing: "sm",
+const InsertElementsTab = ()=>/*#__PURE__*/ react.createElement(Toolbar.Tab, {
+        name: "insert",
+        label: "Insert",
         icon: /*#__PURE__*/ react.createElement(Icon, {
             icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
             label: "Insert Element"
         }),
-        content: /*#__PURE__*/ react.createElement(ScrollableContainer, null, /*#__PURE__*/ react.createElement(InsertElements, null))
+        element: /*#__PURE__*/ react.createElement(InsertElements, null)
     });
 export { InsertElementsTab };
 

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElementsTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElementsTab.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElementsTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Tabs } from \"@webiny/admin-ui\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer.js\";\nimport { ReactComponent as InsertIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport { InsertElements } from \"./InsertElements.js\";\n\nexport const InsertElementsTab = () => {\n    return (\n        <Tabs.Tab\n            value=\"insert\"\n            trigger={\"Insert\"}\n            spacing={\"sm\"}\n            icon={<Icon icon={<InsertIcon />} label={\"Insert Element\"} />}\n            content={\n                <ScrollableContainer>\n                    <InsertElements />\n                </ScrollableContainer>\n            }\n        />\n    );\n};\n"],"names":["InsertElementsTab","Tabs","Icon","InsertIcon","ScrollableContainer","InsertElements"],"mappings":";;;;;AAMO,MAAMA,oBAAoB,IACtB,WAAP,GACI,oBAACC,KAAK,GAAG;QACL,OAAM;QACN,SAAS;QACT,SAAS;QACT,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAUA;YAAK,OAAO;;QACzC,uBACI,oBAACC,qBAAmBA,MAAAA,WAAAA,GAChB,oBAACC,gBAAcA"}
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElementsTab.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElementsTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as InsertIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport { Toolbar } from \"~/BaseEditor/config/Toolbar/Toolbar.js\";\nimport { InsertElements } from \"./InsertElements.js\";\n\nexport const InsertElementsTab = () => (\n    <Toolbar.Tab\n        name={\"insert\"}\n        label={\"Insert\"}\n        icon={<Icon icon={<InsertIcon />} label={\"Insert Element\"} />}\n        element={<InsertElements />}\n    />\n);\n"],"names":["InsertElementsTab","Toolbar","Icon","InsertIcon","InsertElements"],"mappings":";;;;;AAMO,MAAMA,oBAAoB,kBAC7B,oBAACC,QAAQ,GAAG;QACR,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAUA;YAAK,OAAO;;QACzC,uBAAS,oBAACC,gBAAcA"}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/ListItem.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { ComponentGroupItem } from "@webiny/website-builder-sdk";
+export declare const ListItem: ({ item }: {
+    item: ComponentGroupItem;
+}) => React.JSX.Element;

package/BaseEditor/defaultConfig/Toolbar/InsertElements/ListItem.js

@@ -0,0 +1,23 @@
+import react from "react";
+import { Icon } from "@webiny/admin-ui";
+import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
+import { InlineSvg } from "./InlineSvg.js";
+const useComponent = (name)=>useSelectFromEditor((state)=>state.components?.[name]);
+const ListItem = ({ item })=>{
+    const component = useComponent(item.name);
+    if (!component) return /*#__PURE__*/ react.createElement(react.Fragment, null);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-row items-center p-sm bg-neutral-light rounded-lg gap-sm cursor-grab fill-neutral-strong"
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        label: "Icon",
+        icon: /*#__PURE__*/ react.createElement(InlineSvg, {
+            src: component.image
+        }),
+        size: "md"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "text-sm font-medium text-neutral-primary"
+    }, component.label ?? component.name));
+};
+export { ListItem };
+
+//# sourceMappingURL=ListItem.js.map

package/BaseEditor/defaultConfig/Toolbar/InsertElements/ListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/InsertElements/ListItem.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/InsertElements/ListItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport type { ComponentGroupItem, ComponentManifest } from \"@webiny/website-builder-sdk\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { InlineSvg } from \"./InlineSvg.js\";\n\nconst useComponent = (name: string) => {\n    return useSelectFromEditor<ComponentManifest | undefined>(state => state.components?.[name]);\n};\n\nexport const ListItem = ({ item }: { item: ComponentGroupItem }) => {\n    const component = useComponent(item.name);\n    if (!component) {\n        return <></>;\n    }\n\n    return (\n        <div className=\"flex flex-row items-center p-sm bg-neutral-light rounded-lg gap-sm cursor-grab fill-neutral-strong\">\n            <Icon label=\"Icon\" icon={<InlineSvg src={component.image!} />} size={\"md\"} />\n            <div className=\"text-sm font-medium text-neutral-primary\">\n                {component.label ?? component.name}\n            </div>\n        </div>\n    );\n};\n"],"names":["useComponent","name","useSelectFromEditor","state","ListItem","item","component","Icon","InlineSvg"],"mappings":";;;;AAMA,MAAMA,eAAe,CAACC,OACXC,oBAAmDC,CAAAA,QAASA,MAAM,UAAU,EAAE,CAACF,KAAK;AAGxF,MAAMG,WAAW,CAAC,EAAEC,IAAI,EAAgC;IAC3D,MAAMC,YAAYN,aAAaK,KAAK,IAAI;IACxC,IAAI,CAACC,WACD,OAAO,WAAP,GAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACC,MAAIA;QAAC,OAAM;QAAO,oBAAM,oBAACC,WAASA;YAAC,KAAKF,UAAU,KAAK;;QAAO,MAAM;sBACrE,oBAAC;QAAI,WAAU;OACVA,UAAU,KAAK,IAAIA,UAAU,IAAI;AAIlD"}

package/BaseEditor/defaultConfig/Toolbar/Navigator/ElementActions.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const ElementActions: ({ elementId }: {
+    elementId: string;
+}) => React.JSX.Element | null;

package/BaseEditor/defaultConfig/Toolbar/Navigator/ElementActions.js

@@ -0,0 +1,29 @@
+import react from "react";
+import { Tooltip, Tree } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/visibility_off.svg";
+import { useStyles } from "../../../hooks/useStyles.js";
+const ElementActions = ({ elementId })=>{
+    const { styles, onChange } = useStyles(elementId);
+    const isVisible = "none" !== styles.display;
+    const unhideElement = ()=>{
+        onChange(({ styles })=>{
+            styles.set("display", "flex");
+        });
+    };
+    if (isVisible) return null;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex"
+    }, /*#__PURE__*/ react.createElement(Tooltip, {
+        trigger: /*#__PURE__*/ react.createElement(Tree.Item.Icon, {
+            size: "sm",
+            className: "cursor-pointer",
+            element: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "This element is hidden.",
+            onClick: unhideElement
+        }),
+        content: "This element is hidden. Click to unhide."
+    }));
+};
+export { ElementActions };
+
+//# sourceMappingURL=ElementActions.js.map

package/BaseEditor/defaultConfig/Toolbar/Navigator/ElementActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/Navigator/ElementActions.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/Navigator/ElementActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tooltip, Tree } from \"@webiny/admin-ui\";\nimport { ReactComponent as VisibilityNone } from \"@webiny/icons/visibility_off.svg\";\nimport { useStyles } from \"~/BaseEditor/hooks/useStyles.js\";\n\nexport const ElementActions = ({ elementId }: { elementId: string }) => {\n    const { styles, onChange } = useStyles(elementId);\n    const isVisible = styles.display !== \"none\";\n\n    const unhideElement = () => {\n        onChange(({ styles }) => {\n            styles.set(\"display\", \"flex\");\n        });\n    };\n\n    if (isVisible) {\n        return null;\n    }\n\n    return (\n        <div className={\"flex\"}>\n            <Tooltip\n                trigger={\n                    <Tree.Item.Icon\n                        size={\"sm\"}\n                        className={\"cursor-pointer\"}\n                        element={<VisibilityNone />}\n                        label={\"This element is hidden.\"}\n                        onClick={unhideElement}\n                    />\n                }\n                content={\"This element is hidden. Click to unhide.\"}\n            />\n        </div>\n    );\n};\n"],"names":["ElementActions","elementId","styles","onChange","useStyles","isVisible","unhideElement","Tooltip","Tree","VisibilityNone"],"mappings":";;;;AAKO,MAAMA,iBAAiB,CAAC,EAAEC,SAAS,EAAyB;IAC/D,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGC,UAAUH;IACvC,MAAMI,YAAYH,AAAmB,WAAnBA,OAAO,OAAO;IAEhC,MAAMI,gBAAgB;QAClBH,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,WAAW;QAC1B;IACJ;IAEA,IAAIG,WACA,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACE,SAAOA;QACJ,uBACI,oBAACC,KAAK,IAAI,CAAC,IAAI;YACX,MAAM;YACN,WAAW;YACX,uBAAS,oBAACC,gBAAcA;YACxB,OAAO;YACP,SAASH;;QAGjB,SAAS;;AAIzB"}

package/BaseEditor/defaultConfig/Toolbar/Navigator/LayoutIllustration.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const LayoutIllustration: () => React.JSX.Element;