@webiny/app-website-builder 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

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":";;;;;;AAkCO,MAAMA,gBAAgB,CAACC;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC;IACvB,MAAM,CAACC,SAASC,WAAW,GAAGC,SAAS;IACvC,MAAM,CAACC,QAAQC,UAAU,GAAGF,SAAS;IACrC,MAAM,CAACG,cAAcC,gBAAgB,GAAGJ,SAAS;IACjD,MAAMK,WAAWC,OAAgC;IAEjD,MAAMC,eAAeT,UAAU,KAAK;IAEpC,MAAMU,eAAeC,UAAU,IAAI,CAACd,MAAM,KAAK;IAE/C,MAAMe,cAAcC,YAAY;QAC5BP,gBAAgB;IACpB,GAAG;QAACA;KAAgB;IAEpB,MAAMQ,UAAU;QACZC,SAASlB,MAAM,KAAK;QACpBO,UAAU;IACd;IAEA,MAAMY,UAAU,CAACC;QACbhB,WAAW;QACXS,aAAa,OAAO,CAACO;QACrBpB,MAAM,QAAQ,CAACa,aAAa,QAAQ;IACxC;IAEA,MAAMK,WAAW,CAACG;QACd,MAAMC,cAAcR,UAAU,IAAI,CAACO;QACnC,IAAI,CAACb,cACD;QAEJ,MAAMe,aAAaD,YAAY,QAAQ,CAAC;QACxCtB,MAAM,QAAQ,CAAC,GAAGuB,aAAavB,MAAM,IAAI,EAAE;QAE3CS,gBAAgB;QAChBe,WAAW;YACPpB,WAAW;QACf,GAAG;IACP;IAEA,MAAMqB,kBAAkB,CAACJ;QACrBjB,WAAW;QACX,IAAImB,aAA8B;QAClC,IAAIF,AAAU,OAAVA,OAAc;YACd,MAAMC,cAAcI,SAASL;YAC7BE,aAAaI,MAAML,eAAe,IAAIA;QAC1C;QACAtB,MAAM,eAAe,CAAC,GAAGuB,aAAavB,MAAM,IAAI,EAAE;IACtD;IAEA,MAAM4B,UAAU;QACZ5B,MAAM,OAAO;QACbO,UAAU;IACd;IAEA,MAAMsB,aAAaC,GAAG;QAClB;QACA;QACA9B,MAAM,UAAU,IAAIA,MAAM,aAAa,IAAI;QAC3CA,MAAM,QAAQ,IAAI;QAClB;KACH;IAED,MAAM+B,QAAQ,WAARA,GACF,oBAAC;QAAI,WAAWF;QAAY,SAAS,IAAMtB,UAAU;QAAO,OAAO;YAAE,OAAO;QAAG;OAC1EP,MAAM,KAAK,IAAI,GAAE,KAAEA,MAAM,SAAS,GAAG,OAAOA,MAAM,IAAI;IAI/D,MAAMgC,WAAW,WAAXA,GACF,wDACI,oBAACC,oBAAkBA;QAAC,MAAMjC,MAAM,KAAK;sBACrC,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACkC,OAAKA;QACF,WAAWnB;QACX,UAAUL;QACV,UAAUV,MAAM,SAAS;QACzB,MAAM;QACN,OAAOA,MAAM,SAAS,GAAG,MAAOA,MAAM,KAAK,IAAIY;QAC/C,SAASK;QACT,YAAY;QACZ,UAAUI,CAAAA,QAASI,gBAAgBJ;QACnC,QAAQc,CAAAA,IAAKjB,SAASiB,EAAE,MAAM,CAAC,KAAK;QACpC,WAAW;uBAGnB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAK;QACL,OAAOpC,MAAM,IAAI;QACjB,SAASA,MAAM,KAAK;QACpB,UAAUoB,CAAAA;YACND,QAAQC;YACRI,WAAW;gBACPd,SAAS,OAAO,EAAE;YACtB,GAAG;QACP;QACA,oBAAoB;wBAIhC,oBAAC2B,mBAAiBA;QAAC,MAAM;;IAIjC,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,cAAYA;QACT,MAAMhC;QACN,cAAc,IAAMC,UAAU;QAC9B,SAASwB;QACT,OAAM;QACN,MAAK;QACL,WAAW;qBAEX,oBAAC;QAAI,WAAW;QAAgB,OAAO;YAAE,OAAO;QAAI;OAC/CC,UACAO,oBAAoBtC,WAAW,IAAI,GAAG,OAAO,WAAP,GACnC,wDACI,oBAACuC,WAASA;QAAC,SAAS;QAAU,QAAQ;sBACtC,oBAACC,eAAaA;QACV,eAAezC,MAAM,aAAa,IAAIuC;QACtC,cAAcvC,MAAM,UAAU,GAAGC,WAAW,IAAI,GAAG;QACnD,SAAS2B;;AAQzC"}
+{"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;

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

@@ -0,0 +1,94 @@
+import react from "react";
+const LayoutIllustration = ()=>/*#__PURE__*/ react.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "104",
+        height: "86",
+        viewBox: "0 0 104 86",
+        fill: "none"
+    }, /*#__PURE__*/ react.createElement("g", {
+        filter: "url(#filter0_d_6405_31803)"
+    }, /*#__PURE__*/ react.createElement("path", {
+        d: "M7.01172 11.7C7.01172 8.55198 9.5637 6 12.7117 6H90.3742C93.5222 6 96.0742 8.55198 96.0742 11.7V71.55C96.0742 74.698 93.5222 77.25 90.3742 77.25H12.7117C9.56369 77.25 7.01172 74.698 7.01172 71.55V11.7Z",
+        fill: "white"
+    })), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "14.8105",
+        cy: "13.4043",
+        rx: "1.76361",
+        ry: "1.78125",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "20.5429",
+        cy: "13.4043",
+        rx: "1.76361",
+        ry: "1.78125",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "26.7148",
+        cy: "13.4043",
+        rx: "1.76361",
+        ry: "1.78125",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "15.1016",
+        y: "23.0527",
+        width: "23.8155",
+        height: "45.9626",
+        rx: "1.4012",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "43.0762",
+        y: "23.0527",
+        width: "44.814",
+        height: "21.4722",
+        rx: "1.4012",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "43.0762",
+        y: "47.873",
+        width: "20.7899",
+        height: "21.1422",
+        rx: "1.4012",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "67.0996",
+        y: "47.873",
+        width: "20.7899",
+        height: "21.1422",
+        rx: "1.4012",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("defs", null, /*#__PURE__*/ react.createElement("filter", {
+        id: "filter0_d_6405_31803",
+        x: "0.000718594",
+        y: "-7.95126e-05",
+        width: "103.085",
+        height: "85.272",
+        filterUnits: "userSpaceOnUse",
+        colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/ react.createElement("feFlood", {
+        floodOpacity: "0",
+        result: "BackgroundImageFix"
+    }), /*#__PURE__*/ react.createElement("feColorMatrix", {
+        in: "SourceAlpha",
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+        result: "hardAlpha"
+    }), /*#__PURE__*/ react.createElement("feOffset", {
+        dy: "1.01092"
+    }), /*#__PURE__*/ react.createElement("feGaussianBlur", {
+        stdDeviation: "3.5055"
+    }), /*#__PURE__*/ react.createElement("feColorMatrix", {
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+    }), /*#__PURE__*/ react.createElement("feBlend", {
+        mode: "normal",
+        in2: "BackgroundImageFix",
+        result: "effect1_dropShadow_6405_31803"
+    }), /*#__PURE__*/ react.createElement("feBlend", {
+        mode: "normal",
+        in: "SourceGraphic",
+        in2: "effect1_dropShadow_6405_31803",
+        result: "shape"
+    }))));
+export { LayoutIllustration };
+
+//# sourceMappingURL=LayoutIllustration.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/Navigator/LayoutIllustration.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/Navigator/LayoutIllustration.tsx"],"sourcesContent":["import React from \"react\";\n\nexport const LayoutIllustration = () => (\n    <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"104\"\n        height=\"86\"\n        viewBox=\"0 0 104 86\"\n        fill=\"none\"\n    >\n        <g filter=\"url(#filter0_d_6405_31803)\">\n            <path\n                d=\"M7.01172 11.7C7.01172 8.55198 9.5637 6 12.7117 6H90.3742C93.5222 6 96.0742 8.55198 96.0742 11.7V71.55C96.0742 74.698 93.5222 77.25 90.3742 77.25H12.7117C9.56369 77.25 7.01172 74.698 7.01172 71.55V11.7Z\"\n                fill=\"white\"\n            />\n        </g>\n        <ellipse cx=\"14.8105\" cy=\"13.4043\" rx=\"1.76361\" ry=\"1.78125\" fill=\"#FA5723\" />\n        <ellipse cx=\"20.5429\" cy=\"13.4043\" rx=\"1.76361\" ry=\"1.78125\" fill=\"#FA5723\" />\n        <ellipse cx=\"26.7148\" cy=\"13.4043\" rx=\"1.76361\" ry=\"1.78125\" fill=\"#FA5723\" />\n        <rect x=\"15.1016\" y=\"23.0527\" width=\"23.8155\" height=\"45.9626\" rx=\"1.4012\" fill=\"#F0F1F3\" />\n        <rect x=\"43.0762\" y=\"23.0527\" width=\"44.814\" height=\"21.4722\" rx=\"1.4012\" fill=\"#F0F1F3\" />\n        <rect x=\"43.0762\" y=\"47.873\" width=\"20.7899\" height=\"21.1422\" rx=\"1.4012\" fill=\"#F0F1F3\" />\n        <rect x=\"67.0996\" y=\"47.873\" width=\"20.7899\" height=\"21.1422\" rx=\"1.4012\" fill=\"#F0F1F3\" />\n        <defs>\n            <filter\n                id=\"filter0_d_6405_31803\"\n                x=\"0.000718594\"\n                y=\"-7.95126e-05\"\n                width=\"103.085\"\n                height=\"85.272\"\n                filterUnits=\"userSpaceOnUse\"\n                colorInterpolationFilters=\"sRGB\"\n            >\n                <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n                <feColorMatrix\n                    in=\"SourceAlpha\"\n                    type=\"matrix\"\n                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                    result=\"hardAlpha\"\n                />\n                <feOffset dy=\"1.01092\" />\n                <feGaussianBlur stdDeviation=\"3.5055\" />\n                <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\" />\n                <feBlend\n                    mode=\"normal\"\n                    in2=\"BackgroundImageFix\"\n                    result=\"effect1_dropShadow_6405_31803\"\n                />\n                <feBlend\n                    mode=\"normal\"\n                    in=\"SourceGraphic\"\n                    in2=\"effect1_dropShadow_6405_31803\"\n                    result=\"shape\"\n                />\n            </filter>\n        </defs>\n    </svg>\n);\n"],"names":["LayoutIllustration"],"mappings":";AAEO,MAAMA,qBAAqB,kBAC9B,oBAAC;QACG,OAAM;QACN,OAAM;QACN,QAAO;QACP,SAAQ;QACR,MAAK;qBAEL,oBAAC;QAAE,QAAO;qBACN,oBAAC;QACG,GAAE;QACF,MAAK;uBAGb,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,MAAK;sBAClE,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,MAAK;sBAClE,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,MAAK;sBAClE,oBAAC;QAAK,GAAE;QAAU,GAAE;QAAU,OAAM;QAAU,QAAO;QAAU,IAAG;QAAS,MAAK;sBAChF,oBAAC;QAAK,GAAE;QAAU,GAAE;QAAU,OAAM;QAAS,QAAO;QAAU,IAAG;QAAS,MAAK;sBAC/E,oBAAC;QAAK,GAAE;QAAU,GAAE;QAAS,OAAM;QAAU,QAAO;QAAU,IAAG;QAAS,MAAK;sBAC/E,oBAAC;QAAK,GAAE;QAAU,GAAE;QAAS,OAAM;QAAU,QAAO;QAAU,IAAG;QAAS,MAAK;sBAC/E,oBAAC,4BACG,oBAAC;QACG,IAAG;QACH,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,aAAY;QACZ,2BAA0B;qBAE1B,oBAAC;QAAQ,cAAa;QAAI,QAAO;sBACjC,oBAAC;QACG,IAAG;QACH,MAAK;QACL,QAAO;QACP,QAAO;sBAEX,oBAAC;QAAS,IAAG;sBACb,oBAAC;QAAe,cAAa;sBAC7B,oBAAC;QAAc,MAAK;QAAS,QAAO;sBACpC,oBAAC;QACG,MAAK;QACL,KAAI;QACJ,QAAO;sBAEX,oBAAC;QACG,MAAK;QACL,IAAG;QACH,KAAI;QACJ,QAAO"}

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

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