@webiny/app-admin 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/components/OverlayLayout/index.js

@@ -1 +1,3 @@
-export { OverlayLayout } from "./OverlayLayout";
+export * from "./OverlayLayout";
+
+//# sourceMappingURL=index.js.map

package/components/OverlayLayout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./OverlayLayout\";\n"],"mappings":"AAAA","ignoreList":[]}

package/components/Permissions/CannotUseAaclAlert.d.ts

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

package/components/Permissions/CannotUseAaclAlert.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Alert } from "@webiny/admin-ui";
+export const CannotUseAaclAlert = () => {
+  return /*#__PURE__*/React.createElement(Alert, {
+    title: "Advanced Access Control Layer (AACL) not activated",
+    type: "warning"
+  }, /*#__PURE__*/React.createElement("strong", null, "Custom access"), " option cannot be used because the Advanced Access Control Layer (AACL) is not activated. ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "To learn more, please visit the official\xA0", /*#__PURE__*/React.createElement("a", {
+    href: "https://webiny.link/aacl",
+    target: "_blank",
+    rel: "noreferrer"
+  }, "documentation"), ".");
+};
+
+//# sourceMappingURL=CannotUseAaclAlert.js.map

package/components/Permissions/CannotUseAaclAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Alert","CannotUseAaclAlert","createElement","title","type","href","target","rel"],"sources":["CannotUseAaclAlert.tsx"],"sourcesContent":["import React from \"react\";\nimport { Alert } from \"@webiny/admin-ui\";\n\nexport const CannotUseAaclAlert = () => {\n    return (\n        <Alert title={\"Advanced Access Control Layer (AACL) not activated\"} type={\"warning\"}>\n            <strong>Custom access</strong> option cannot be used because the Advanced Access Control\n            Layer (AACL) is not activated. <br />\n            <br />\n            To learn more, please visit the official&nbsp;\n            <a href={\"https://webiny.link/aacl\"} target={\"_blank\"} rel={\"noreferrer\"}>\n                documentation\n            </a>\n            .\n        </Alert>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,QAAQ,kBAAkB;AAExC,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,oBACIF,KAAA,CAAAG,aAAA,CAACF,KAAK;IAACG,KAAK,EAAE,oDAAqD;IAACC,IAAI,EAAE;EAAU,gBAChFL,KAAA,CAAAG,aAAA,iBAAQ,eAAqB,CAAC,8FACC,eAAAH,KAAA,CAAAG,aAAA,WAAK,CAAC,eACrCH,KAAA,CAAAG,aAAA,WAAK,CAAC,gDAEN,eAAAH,KAAA,CAAAG,aAAA;IAAGG,IAAI,EAAE,0BAA2B;IAACC,MAAM,EAAE,QAAS;IAACC,GAAG,EAAE;EAAa,GAAC,eAEvE,CAAC,KAED,CAAC;AAEhB,CAAC","ignoreList":[]}

package/components/Permissions/Permissions.d.ts

@@ -1,7 +1,9 @@
-/// <reference types="react" />
-import { BindComponentRenderProp } from "@webiny/form";
-declare type Props = BindComponentRenderProp & {
+import React from "react";
+import type { BindComponentRenderProp } from "@webiny/form";
+import type { PermissionRendererPlugin } from "../../plugins/PermissionRendererPlugin";
+interface PermissionsProps extends BindComponentRenderProp {
     id: string;
-};
-export declare const Permissions: ({ id, value, onChange }: Props) => JSX.Element;
+    plugins?: PermissionRendererPlugin[];
+}
+export declare const Permissions: ({ id, value, onChange, ...props }: PermissionsProps) => React.JSX.Element;
 export {};

package/components/Permissions/Permissions.js

@@ -1,37 +1,42 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React, { useMemo } from "react";
 import { Accordion } from "@webiny/ui/Accordion";
 import { plugins } from "@webiny/plugins";
-export var Permissions = function Permissions(_ref) {
-  var id = _ref.id,
-      value = _ref.value,
-      onChange = _ref.onChange;
-
-  var _useMemo = useMemo(function () {
-    return plugins.byType("admin-app-permissions-renderer").reduce(function (acc, plugin) {
+export const Permissions = ({
+  id,
+  value,
+  onChange,
+  ...props
+}) => {
+  const {
+    systemPlugins,
+    permissionPlugins
+  } = useMemo(() => {
+    if (props.plugins) {
+      return {
+        permissionPlugins: props.plugins,
+        systemPlugins: []
+      };
+    }
+    return plugins.byType("admin-app-permissions-renderer").reduce((acc, plugin) => {
       if (plugin.system === true) {
         acc.systemPlugins.push(plugin);
       } else {
         acc.permissionPlugins.push(plugin);
       }
-
       return acc;
     }, {
       systemPlugins: [],
       permissionPlugins: []
     });
-  }, []),
-      systemPlugins = _useMemo.systemPlugins,
-      permissionPlugins = _useMemo.permissionPlugins;
-
+  }, []);
   return /*#__PURE__*/React.createElement(Accordion, {
     elevation: 0
-  }, [].concat(_toConsumableArray(systemPlugins), _toConsumableArray(permissionPlugins)).map(function (pl) {
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: pl.name + "." + id
-    }, pl.render({
-      value: value,
-      onChange: onChange
-    }));
-  }));
-};
+  }, [...systemPlugins, ...permissionPlugins].map(pl => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: pl.name + "." + id
+  }, pl.render({
+    value,
+    onChange
+  }))));
+};
+
+//# sourceMappingURL=Permissions.js.map

package/components/Permissions/Permissions.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Accordion","plugins","Permissions","id","value","onChange","props","systemPlugins","permissionPlugins","byType","reduce","acc","plugin","system","push","createElement","elevation","map","pl","Fragment","key","name","render"],"sources":["Permissions.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { AdminAppPermissionRendererPlugin } from \"~/types\";\nimport { Accordion } from \"@webiny/ui/Accordion\";\nimport { plugins } from \"@webiny/plugins\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\nimport type { PermissionRendererPlugin } from \"~/plugins/PermissionRendererPlugin\";\n\ninterface PermissionsProps extends BindComponentRenderProp {\n    id: string;\n    plugins?: PermissionRendererPlugin[];\n}\n\ninterface PermissionPlugins {\n    systemPlugins: (AdminAppPermissionRendererPlugin | PermissionRendererPlugin)[];\n    permissionPlugins: (AdminAppPermissionRendererPlugin | PermissionRendererPlugin)[];\n}\n\nexport const Permissions = ({ id, value, onChange, ...props }: PermissionsProps) => {\n    const { systemPlugins, permissionPlugins } = useMemo<PermissionPlugins>(() => {\n        if (props.plugins) {\n            return { permissionPlugins: props.plugins, systemPlugins: [] };\n        }\n\n        return plugins\n            .byType<AdminAppPermissionRendererPlugin>(\"admin-app-permissions-renderer\")\n            .reduce(\n                (acc, plugin) => {\n                    if (plugin.system === true) {\n                        acc.systemPlugins.push(plugin);\n                    } else {\n                        acc.permissionPlugins.push(plugin);\n                    }\n                    return acc;\n                },\n                { systemPlugins: [], permissionPlugins: [] } as PermissionPlugins\n            );\n    }, []);\n\n    return (\n        <Accordion elevation={0}>\n            {[...systemPlugins, ...permissionPlugins].map(pl => (\n                <React.Fragment key={pl.name + \".\" + id}>\n                    {pl.render({\n                        value,\n                        onChange\n                    })}\n                </React.Fragment>\n            ))}\n        </Accordion>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAEtC,SAASC,SAAS,QAAQ,sBAAsB;AAChD,SAASC,OAAO,QAAQ,iBAAiB;AAczC,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAAEC,EAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAwB,CAAC,KAAK;EAChF,MAAM;IAAEC,aAAa;IAAEC;EAAkB,CAAC,GAAGT,OAAO,CAAoB,MAAM;IAC1E,IAAIO,KAAK,CAACL,OAAO,EAAE;MACf,OAAO;QAAEO,iBAAiB,EAAEF,KAAK,CAACL,OAAO;QAAEM,aAAa,EAAE;MAAG,CAAC;IAClE;IAEA,OAAON,OAAO,CACTQ,MAAM,CAAmC,gCAAgC,CAAC,CAC1EC,MAAM,CACH,CAACC,GAAG,EAAEC,MAAM,KAAK;MACb,IAAIA,MAAM,CAACC,MAAM,KAAK,IAAI,EAAE;QACxBF,GAAG,CAACJ,aAAa,CAACO,IAAI,CAACF,MAAM,CAAC;MAClC,CAAC,MAAM;QACHD,GAAG,CAACH,iBAAiB,CAACM,IAAI,CAACF,MAAM,CAAC;MACtC;MACA,OAAOD,GAAG;IACd,CAAC,EACD;MAAEJ,aAAa,EAAE,EAAE;MAAEC,iBAAiB,EAAE;IAAG,CAC/C,CAAC;EACT,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIV,KAAA,CAAAiB,aAAA,CAACf,SAAS;IAACgB,SAAS,EAAE;EAAE,GACnB,CAAC,GAAGT,aAAa,EAAE,GAAGC,iBAAiB,CAAC,CAACS,GAAG,CAACC,EAAE,iBAC5CpB,KAAA,CAAAiB,aAAA,CAACjB,KAAK,CAACqB,QAAQ;IAACC,GAAG,EAAEF,EAAE,CAACG,IAAI,GAAG,GAAG,GAAGlB;EAAG,GACnCe,EAAE,CAACI,MAAM,CAAC;IACPlB,KAAK;IACLC;EACJ,CAAC,CACW,CACnB,CACM,CAAC;AAEpB,CAAC","ignoreList":[]}

package/components/Permissions/PermissionsGroup.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface PermissionsGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: React.ReactNode;
+}
+declare const PermissionsGroup: ({ className, children, title, ...props }: PermissionsGroupProps) => React.JSX.Element;
+export { PermissionsGroup, type PermissionsGroupProps };

package/components/Permissions/PermissionsGroup.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { cn, Heading } from "@webiny/admin-ui";
+const PermissionsGroup = ({
+  className,
+  children,
+  title,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: cn("wby-mb-lg wby-p-md-extra wby-border-sm wby-border-neutral-dimmed wby-rounded-lg", className)
+  }), /*#__PURE__*/React.createElement(Heading, {
+    level: 6,
+    className: "wby-mb-sm"
+  }, title), children);
+};
+export { PermissionsGroup };
+
+//# sourceMappingURL=PermissionsGroup.js.map

package/components/Permissions/PermissionsGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","Heading","PermissionsGroup","className","children","title","props","createElement","Object","assign","level"],"sources":["PermissionsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, Heading } from \"@webiny/admin-ui\";\n\ninterface PermissionsGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n    title?: React.ReactNode;\n}\n\nconst PermissionsGroup = ({ className, children, title, ...props }: PermissionsGroupProps) => {\n    return (\n        <div\n            {...props}\n            className={cn(\n                \"wby-mb-lg wby-p-md-extra wby-border-sm wby-border-neutral-dimmed wby-rounded-lg\",\n                className\n            )}\n        >\n            <Heading level={6} className={\"wby-mb-sm\"}>\n                {title}\n            </Heading>\n            {children}\n        </div>\n    );\n};\n\nexport { PermissionsGroup, type PermissionsGroupProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,OAAO,QAAQ,kBAAkB;AAM9C,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAA6B,CAAC,KAAK;EAC1F,oBACIP,KAAA,CAAAQ,aAAA,QAAAC,MAAA,CAAAC,MAAA,KACQH,KAAK;IACTH,SAAS,EAAEH,EAAE,CACT,iFAAiF,EACjFG,SACJ;EAAE,iBAEFJ,KAAA,CAAAQ,aAAA,CAACN,OAAO;IAACS,KAAK,EAAE,CAAE;IAACP,SAAS,EAAE;EAAY,GACrCE,KACI,CAAC,EACTD,QACA,CAAC;AAEd,CAAC;AAED,SAASF,gBAAgB","ignoreList":[]}

package/components/Permissions/StyledComponents.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
-export declare const flexClass: string;
-export declare const gridNoPaddingClass: string;
-export declare const PermissionInfo: ({ title }: {
-    title: any;
-}) => JSX.Element;
+import React from "react";
+export declare const gridWithPaddingClass: string;
+interface PermissionInfoProps {
+    title: string;
+}
+export declare const PermissionInfo: ({ title }: PermissionInfoProps) => React.JSX.Element;
+export {};

package/components/Permissions/StyledComponents.js

@@ -1,19 +1,15 @@
 import React from "react";
 import { css } from "emotion";
-import { Typography } from "@webiny/ui/Typography";
-export var flexClass = /*#__PURE__*/css({
-  display: "flex",
-  alignItems: "center",
-  height: "100%"
-}, "label:flexClass;");
-export var gridNoPaddingClass = /*#__PURE__*/css({
-  padding: "0px !important"
-}, "label:gridNoPaddingClass;");
-export var PermissionInfo = function PermissionInfo(_ref) {
-  var title = _ref.title;
-  return /*#__PURE__*/React.createElement("div", {
-    className: flexClass
-  }, /*#__PURE__*/React.createElement(Typography, {
-    use: "subtitle2"
-  }, title));
-};
+import { Label } from "@webiny/admin-ui";
+export const gridWithPaddingClass = css({
+  paddingTop: "var(--padding-md)"
+});
+export const PermissionInfo = ({
+  title
+}) => /*#__PURE__*/React.createElement("div", {
+  className: "wby-flex wby-items-center wby-h-full"
+}, /*#__PURE__*/React.createElement(Label, {
+  text: title
+}));
+
+//# sourceMappingURL=StyledComponents.js.map

package/components/Permissions/StyledComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","css","Label","gridWithPaddingClass","paddingTop","PermissionInfo","title","createElement","className","text"],"sources":["StyledComponents.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Label } from \"@webiny/admin-ui\";\n\nexport const gridWithPaddingClass = css({\n    paddingTop: \"var(--padding-md)\"\n});\n\ninterface PermissionInfoProps {\n    title: string;\n}\nexport const PermissionInfo = ({ title }: PermissionInfoProps) => (\n    <div className={\"wby-flex wby-items-center wby-h-full\"}>\n        <Label text={title} />\n    </div>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,QAAQ,SAAS;AAC7B,SAASC,KAAK,QAAQ,kBAAkB;AAExC,OAAO,MAAMC,oBAAoB,GAAGF,GAAG,CAAC;EACpCG,UAAU,EAAE;AAChB,CAAC,CAAC;AAKF,OAAO,MAAMC,cAAc,GAAGA,CAAC;EAAEC;AAA2B,CAAC,kBACzDN,KAAA,CAAAO,aAAA;EAAKC,SAAS,EAAE;AAAuC,gBACnDR,KAAA,CAAAO,aAAA,CAACL,KAAK;EAACO,IAAI,EAAEH;AAAM,CAAE,CACpB,CACR","ignoreList":[]}

package/components/Permissions/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./StyledComponents";
 export { Permissions } from "./Permissions";
+export { CannotUseAaclAlert } from "./CannotUseAaclAlert";
+export * from "./PermissionsGroup";

package/components/Permissions/index.js

@@ -1,2 +1,6 @@
 export * from "./StyledComponents";
-export { Permissions } from "./Permissions";
+export { Permissions } from "./Permissions";
+export { CannotUseAaclAlert } from "./CannotUseAaclAlert";
+export * from "./PermissionsGroup";
+
+//# sourceMappingURL=index.js.map

package/components/Permissions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Permissions","CannotUseAaclAlert"],"sources":["index.ts"],"sourcesContent":["export * from \"./StyledComponents\";\nexport { Permissions } from \"./Permissions\";\nexport { CannotUseAaclAlert } from \"./CannotUseAaclAlert\";\nexport * from \"./PermissionsGroup\";\n"],"mappings":"AAAA;AACA,SAASA,WAAW;AACpB,SAASC,kBAAkB;AAC3B","ignoreList":[]}

package/components/ResizablePanels/index.d.ts

@@ -0,0 +1 @@
+export { Panel, type PanelProps, PanelGroup, type PanelGroupProps, PanelResizeHandle, type PanelResizeHandleProps } from "react-resizable-panels";

package/components/ResizablePanels/index.js

@@ -0,0 +1,3 @@
+export { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+
+//# sourceMappingURL=index.js.map

package/components/ResizablePanels/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Panel","PanelGroup","PanelResizeHandle"],"sources":["index.tsx"],"sourcesContent":["export {\n    Panel,\n    type PanelProps,\n    PanelGroup,\n    type PanelGroupProps,\n    PanelResizeHandle,\n    type PanelResizeHandleProps\n} from \"react-resizable-panels\";\n"],"mappings":"AAAA,SACIA,KAAK,EAELC,UAAU,EAEVC,iBAAiB,QAEd,wBAAwB","ignoreList":[]}

package/components/RichTextEditor/RichTextEditor.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { RichTextEditorProps } from "@webiny/ui/RichTextEditor";
-export declare const RichTextEditor: (props: RichTextEditorProps) => JSX.Element;
+import React from "react";
+import type { RichTextEditorProps } from "@webiny/ui/RichTextEditor";
+export declare const RichTextEditor: (props: RichTextEditorProps) => React.JSX.Element;

package/components/RichTextEditor/RichTextEditor.js

@@ -1,15 +1,16 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import React from "react";
 import { RichTextEditor as UiRichTextEditor } from "@webiny/ui/RichTextEditor";
-import { FileManager } from "../FileManager";
-export var RichTextEditor = function RichTextEditor(props) {
-  return /*#__PURE__*/React.createElement(FileManager, null, function (_ref) {
-    var showFileManager = _ref.showFileManager;
-    return /*#__PURE__*/React.createElement(UiRichTextEditor, Object.assign({}, props, {
-      placeholder: props.placeholder || "Click here to type",
-      context: _objectSpread(_objectSpread({}, props.context), {}, {
-        showFileManager: showFileManager
-      })
-    }));
-  });
-};
+import { FileManager } from "./..";
+export const RichTextEditor = props => {
+  return /*#__PURE__*/React.createElement(FileManager, null, ({
+    showFileManager
+  }) => /*#__PURE__*/React.createElement(UiRichTextEditor, Object.assign({}, props, {
+    placeholder: props.placeholder || "Click here to type",
+    context: {
+      ...props.context,
+      showFileManager
+    }
+  })));
+};
+
+//# sourceMappingURL=RichTextEditor.js.map

package/components/RichTextEditor/RichTextEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","RichTextEditor","UiRichTextEditor","FileManager","props","createElement","showFileManager","Object","assign","placeholder","context"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport type { RichTextEditorProps } from \"@webiny/ui/RichTextEditor\";\nimport { RichTextEditor as UiRichTextEditor } from \"@webiny/ui/RichTextEditor\";\nimport { FileManager } from \"~/components\";\n\nexport const RichTextEditor = (props: RichTextEditorProps) => {\n    return (\n        <FileManager>\n            {({ showFileManager }) => (\n                <UiRichTextEditor\n                    {...props}\n                    placeholder={props.placeholder || \"Click here to type\"}\n                    context={{ ...props.context, showFileManager }}\n                />\n            )}\n        </FileManager>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,cAAc,IAAIC,gBAAgB,QAAQ,2BAA2B;AAC9E,SAASC,WAAW;AAEpB,OAAO,MAAMF,cAAc,GAAIG,KAA0B,IAAK;EAC1D,oBACIJ,KAAA,CAAAK,aAAA,CAACF,WAAW,QACP,CAAC;IAAEG;EAAgB,CAAC,kBACjBN,KAAA,CAAAK,aAAA,CAACH,gBAAgB,EAAAK,MAAA,CAAAC,MAAA,KACTJ,KAAK;IACTK,WAAW,EAAEL,KAAK,CAACK,WAAW,IAAI,oBAAqB;IACvDC,OAAO,EAAE;MAAE,GAAGN,KAAK,CAACM,OAAO;MAAEJ;IAAgB;EAAE,EAClD,CAEI,CAAC;AAEtB,CAAC","ignoreList":[]}

package/components/RichTextEditor/index.js

@@ -1,2 +1,4 @@
 export { RichTextEditor } from "./RichTextEditor";
-export { createPropsFromConfig } from "@webiny/ui/RichTextEditor";
+export { createPropsFromConfig } from "@webiny/ui/RichTextEditor";
+
+//# sourceMappingURL=index.js.map

package/components/RichTextEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RichTextEditor","createPropsFromConfig"],"sources":["index.ts"],"sourcesContent":["export { RichTextEditor } from \"./RichTextEditor\";\nexport { createPropsFromConfig } from \"@webiny/ui/RichTextEditor\";\n"],"mappings":"AAAA,SAASA,cAAc;AACvB,SAASC,qBAAqB,QAAQ,2BAA2B","ignoreList":[]}

package/components/RichTextEditor/styles.scss

@@ -1,9 +1,18 @@
 .codex-editor {
-  /**
-  * The context menu of the rich text editor is getting obscured if directly below is another rich text editor.
-  * This change help us fix that visual issue.
-  */
-  z-index: unset;
+  .ce-toolbox {
+    position: absolute;
+    background-color: #fff;
+    border: 1px solid #e8e8eb;
+    box-shadow: 0 3px 15px -3px rgb(13 20 33 / 13%);
+    border-radius: 6px;
+    z-index: 2;
+  }
+
+  .ce-toolbox--opened {
+    animation-duration: 0.1s;
+    animation-name: panelShowing;
+    padding: 5px 5px 5px 0;
+  }
 
   .codex-editor__redactor {
     padding-bottom: 0 !important;
@@ -24,6 +33,15 @@
     letter-spacing: 0.2em;
   }
 
+  .ce-settings {
+    position: absolute;
+    background-color: #fff;
+    border: 1px solid #e8e8eb;
+    box-shadow: 0 3px 15px -3px rgb(13 20 33 / 13%);
+    border-radius: 6px;
+    z-index: 2;
+  }
+
   // Reset default styles
   .ce-block__content:focus {
     outline: none;
@@ -43,9 +61,23 @@
     content: none !important;
   }
 
-  // Reset Toolbar style
+  .ce-toolbar__actions {
+    right: unset;
+  }
+
+  .ce-toolbar__actions--opened {
+    opacity: 1;
+    background-color: white;
+    border-radius: 5px;
+    border: 1px solid #e8e8eb;
+    padding: 3px;
+    top: -3px;
+  }
+
   .ce-toolbar__content {
-    max-width: 92%;
+    max-width: 650px;
+    margin: 0 auto;
+    position: absolute;
   }
 }
 

package/components/RichTextEditor/tools/header/index.d.ts

@@ -1,21 +1,26 @@
-import { API } from "@editorjs/editorjs";
-import { TextAlign, Alignment } from "../utils";
-declare type Typography = {
+import type { HTMLPasteEvent } from "@editorjs/editorjs";
+import type { Alignment } from "../utils";
+import { TextAlign } from "../utils";
+interface Typography {
     [key: string]: {
         label: string;
         component: string;
         className: string;
     };
-};
-declare type HeaderData = {
+}
+export interface HeaderData {
     text: string;
-    level: any;
-    textAlign: TextAlign;
-};
-declare type HeaderConfig = {
+    level: number;
+    textAlign?: TextAlign;
+    alignment?: Alignment;
+    className?: string;
+}
+interface HeaderConfig {
     levels: number[];
     typography: Typography;
-};
+    placeholder?: string;
+    defaultLevel?: number;
+}
 interface HeaderArgs {
     data: HeaderData;
     config: HeaderConfig;
@@ -23,15 +28,15 @@ interface HeaderArgs {
     readOnly: boolean;
 }
 declare class Header {
-    api: API;
-    readOnly: boolean;
-    settingsButtons: any[];
-    _CSS: any;
-    _settings: any;
-    _data: any;
-    _element: any;
-    alignments: Alignment[];
-    typography: Typography;
+    private readonly api;
+    private readonly readOnly;
+    private readonly settingsButtons;
+    private readonly _CSS;
+    private readonly _settings;
+    private _data;
+    private _element;
+    private readonly alignments;
+    private readonly typography;
     /**
      * Render plugin`s main Element and fill it with saved data
      *
@@ -50,7 +55,7 @@ declare class Header {
      * @returns {HeaderData}
      * @private
      */
-    normalizeData(data: any): any;
+    normalizeData(data: Partial<HeaderData>): HeaderData;
     /**
      * Return Tool's view
      *
@@ -69,13 +74,13 @@ declare class Header {
      *
      * @param {number} level - level to set
      */
-    setLevel(level: any): void;
+    setLevel(level: number): void;
     /**
      * Callback for Block's settings buttons
      *
      * @param {number} alignment - level to set
      */
-    setAlignment(alignment: any): void;
+    setAlignment(alignment: Alignment): void;
     /**
      * Method that specified how to merge two Text blocks.
      * Called by Editor.js by backspace at the beginning of the Block
@@ -83,7 +88,7 @@ declare class Header {
      * @param {HeaderData} data - saved data to merger with current block
      * @public
      */
-    merge(data: any): void;
+    merge(data: HeaderData): void;
     /**
      * Validate Text block data:
      * - check for emptiness
@@ -92,7 +97,7 @@ declare class Header {
      * @returns {boolean} false if saved data is not correct, otherwise true
      * @public
      */
-    validate(blockData: any): boolean;
+    validate(blockData: HeaderData): boolean;
     /**
      * Extract Tool's data from the view
      *
@@ -100,19 +105,14 @@ declare class Header {
      * @returns {HeaderData} - saved data
      * @public
      */
-    save(toolsContent: any): {
-        text: any;
-        level: number;
-        textAlign: TextAlign.START;
-        className: any;
-    };
+    save(toolsContent: HTMLHeadingElement): HeaderData;
     /**
      * Extract textAlign from className
      *
      * @param {string} className - heading element className
      * @returns {TextAlign} textAlign
      */
-    getTextAlign(className: any): TextAlign.START;
+    getTextAlign(className: string): TextAlign;
     /**
      * Allow Header to be converted to/from other blocks
      */
@@ -139,7 +139,7 @@ declare class Header {
      * @returns {HeaderData} Current data
      * @private
      */
-    get data(): any;
+    get data(): HeaderData;
     /**
      * Store data in plugin:
      * - at the this._data property
@@ -148,7 +148,7 @@ declare class Header {
      * @param {HeaderData} data — data to set
      * @private
      */
-    set data(data: any);
+    set data(data: HeaderData);
     /**
      * Get tag for target level
      * By default returns second-leveled header
@@ -201,9 +201,9 @@ declare class Header {
     /**
      * Handle H1-H6 tags on paste to substitute it with header Tool
      *
-     * @param {PasteEvent} event - event with pasted content
+     * @param {HTMLPasteEvent} event - event with pasted content
      */
-    onPaste(event: any): void;
+    onPaste(event: HTMLPasteEvent): void;
     /**
      * Used by Editor.js paste handling API.
      * Provides configuration to handle H1-H6 tags.