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

package/types.d.ts

@@ -1,100 +1,82 @@
-import React, { ReactElement } from "react";
-import { Plugin } from "@webiny/plugins/types";
-import { ApolloClient } from "apollo-client";
-import { ItemProps, MenuProps, SectionProps } from "./ui/views/NavigationView/legacyMenu";
-declare type RenderParams = {
-    content: React.ReactNode;
-};
-export declare type AdminGlobalSearchPlugin = Plugin & {
-    type: "admin-global-search";
-    label: string;
-    route: string;
-    search?: {
-        operator?: "and" | "or";
-        fields?: Array<string>;
-    };
-};
-export declare type AdminGlobalSearchPreventHotkeyPlugin = Plugin & {
-    type: "admin-global-search-prevent-hotkey";
-    preventOpen(e: React.KeyboardEvent): boolean | void;
-};
-export declare type AdminDrawerFooterMenuPlugin = Plugin & {
-    type: "admin-drawer-footer-menu";
-    render(params: any): React.ReactElement;
-};
-/**
- * LEGACY TYPE. Only for backwards compatibility.
- */
-export declare type AdminMenuLogoPlugin = Plugin & {
-    name: "admin-menu-logo";
-    type: "admin-menu-logo";
-    render(): React.ReactElement;
-};
-export declare type AdminHeaderUserMenuPlugin = Plugin & {
-    type: "admin-header-user-menu";
-    render(): React.ReactElement;
-};
-export declare type AdminHeaderUserMenuHandlePlugin = Plugin & {
-    name: "admin-header-user-menu-handle";
-    type: "admin-header-user-menu-handle";
-    render(): React.ReactElement;
-};
-export declare type AdminHeaderUserMenuUserInfoPlugin = Plugin & {
-    type: "admin-header-user-menu-user-info";
-    render(): React.ReactElement;
-};
-/**
- * Enables adding custom menu sections and items in the main menu, located on the left side of the screen.
- * @see https://docs.webiny.com/docs/webiny-apps/admin/development/plugins-reference/app#admin-menu
- */
-export declare type AdminMenuPlugin = Plugin & {
-    type: "admin-menu";
-    render(props: {
-        Menu: React.ComponentType<MenuProps>;
-        Section: React.ComponentType<SectionProps>;
-        Item: React.ComponentType<ItemProps>;
-    }): React.ReactNode;
-    order?: number;
-};
-/**
- * Enables adding custom header elements to the right side of the top bar.
- * @see https://docs.webiny.com/docs/webiny-apps/admin/development/plugins-reference/app#admin-header-right
- */
-export declare type AdminHeaderRightPlugin = Plugin & {
-    type: "admin-header-right";
-    render(params: RenderParams): React.ReactNode;
-};
-export declare type AdminFileManagerFileTypePlugin = Plugin & {
+import type { ReactElement } from "react";
+import type React from "react";
+import type { Plugin } from "@webiny/plugins/types";
+import type { ApolloClient } from "apollo-client";
+import type { SecurityPermission } from "@webiny/app-security/types";
+export { Icon } from "./components/IconPicker/types";
+export interface AdminFileManagerFileTypePluginRenderParams {
+    file: FileItem;
+}
+export type AdminFileManagerFileTypePlugin = Plugin & {
     type: "admin-file-manager-file-type";
-    types?: string[];
-    render({ file }: {
-        file: any;
-    }): React.ReactNode;
+    types: string[];
+    render(params: AdminFileManagerFileTypePluginRenderParams): React.ReactNode;
     fileDetails?: {
-        actions: Array<React.FunctionComponent | React.Component>;
+        actions: Array<React.ComponentType | React.Component>;
     };
 };
-export declare type AdminInstallationPlugin = Plugin & {
+export interface AdminInstallationPluginRenderParams {
+    onInstalled: () => Promise<void>;
+}
+export type AdminInstallationPlugin = Plugin & {
     type: "admin-installation";
     getInstalledVersion(params: {
         client: ApolloClient<object>;
-    }): Promise<string>;
+    }): Promise<string | null>;
     title: string;
     dependencies?: string[];
     secure: boolean;
-    render({ onInstalled }: {
-        onInstalled: any;
-    }): React.ReactNode;
-    upgrades?: {
-        version: string;
-        getComponent(): React.ComponentType<{
-            onInstalled: () => void;
-        }>;
-    }[];
+    render(params: AdminInstallationPluginRenderParams): React.ReactNode;
 };
-export declare type AdminAppPermissionRendererPlugin = Plugin & {
+export type AdminAppPermissionRendererPlugin = Plugin & {
     type: "admin-app-permissions-renderer";
     system?: boolean;
     render(params: any): ReactElement;
 };
-export {};
+/**
+ * Represents a file as we receive from the GraphQL API.
+ */
+export interface FileItem {
+    id: string;
+    name: string;
+    key: string;
+    src: string;
+    size: number;
+    type: string;
+    tags: string[];
+    aliases: string[];
+    createdOn: string;
+    createdBy: {
+        id: string;
+        displayName: string;
+    };
+    savedOn: string;
+    savedBy: {
+        id: string;
+        displayName: string;
+    };
+    modifiedOn: string;
+    modifiedBy: {
+        id: string;
+        displayName: string;
+    };
+    location: {
+        folderId: string;
+    };
+    meta?: {
+        private?: boolean;
+        width?: number;
+        height?: number;
+    };
+    accessControl?: {
+        type: "public" | "private-authenticated";
+    };
+    extensions?: Record<string, any>;
+}
+export interface FileManagerSecurityPermission extends SecurityPermission {
+    rwd?: string;
+    own?: boolean;
+}
+export type ComponentWithChildren = React.ComponentType<{
+    children?: React.ReactNode;
+}>;

package/types.js

@@ -1 +1,7 @@
-export {};
+export { Icon } from "./components/IconPicker/types";
+
+/**
+ * Represents a file as we receive from the GraphQL API.
+ */
+
+//# sourceMappingURL=types.js.map

package/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Icon"],"sources":["types.ts"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport type React from \"react\";\nimport type { Plugin } from \"@webiny/plugins/types\";\nimport type { ApolloClient } from \"apollo-client\";\nimport type { SecurityPermission } from \"@webiny/app-security/types\";\n\nexport { Icon } from \"~/components/IconPicker/types\";\n\nexport interface AdminFileManagerFileTypePluginRenderParams {\n    file: FileItem;\n}\n\nexport type AdminFileManagerFileTypePlugin = Plugin & {\n    type: \"admin-file-manager-file-type\";\n    types: string[];\n    render(params: AdminFileManagerFileTypePluginRenderParams): React.ReactNode;\n    fileDetails?: {\n        actions: Array<React.ComponentType | React.Component>;\n    };\n};\n\nexport interface AdminInstallationPluginRenderParams {\n    onInstalled: () => Promise<void>;\n}\n\nexport type AdminInstallationPlugin = Plugin & {\n    type: \"admin-installation\";\n    getInstalledVersion(params: { client: ApolloClient<object> }): Promise<string | null>;\n    title: string;\n    dependencies?: string[];\n    secure: boolean;\n    render(params: AdminInstallationPluginRenderParams): React.ReactNode;\n};\n\nexport type AdminAppPermissionRendererPlugin = Plugin & {\n    type: \"admin-app-permissions-renderer\";\n    system?: boolean;\n    render(params: any): ReactElement;\n};\n\n/**\n * Represents a file as we receive from the GraphQL API.\n */\nexport interface FileItem {\n    id: string;\n    name: string;\n    key: string;\n    src: string;\n    size: number;\n    type: string;\n    tags: string[];\n    aliases: string[];\n    createdOn: string;\n    createdBy: {\n        id: string;\n        displayName: string;\n    };\n    savedOn: string;\n    savedBy: {\n        id: string;\n        displayName: string;\n    };\n    modifiedOn: string;\n    modifiedBy: {\n        id: string;\n        displayName: string;\n    };\n    location: {\n        folderId: string;\n    };\n    meta?: {\n        private?: boolean;\n        width?: number;\n        height?: number;\n    };\n    accessControl?: {\n        type: \"public\" | \"private-authenticated\";\n    };\n    extensions?: Record<string, any>;\n}\n\nexport interface FileManagerSecurityPermission extends SecurityPermission {\n    rwd?: string;\n    own?: boolean;\n}\n\nexport type ComponentWithChildren = React.ComponentType<{ children?: React.ReactNode }>;\n"],"mappings":"AAMA,SAASA,IAAI;;AAkCb;AACA;AACA","ignoreList":[]}

package/ui/UIElement.d.ts

@@ -1,2 +1,2 @@
-export type { UIElementConfig, ApplyFunction, ShouldRender } from "@webiny/ui-composer/UIElement";
+export type { UIElementConfig, ApplyFunction, ShouldRender, UiElementRenderProps } from "@webiny/ui-composer/UIElement";
 export { UIElement, UIElementPlugin } from "@webiny/ui-composer/UIElement";

package/ui/UIElement.js

@@ -1 +1,3 @@
-export { UIElement, UIElementPlugin } from "@webiny/ui-composer/UIElement";
+export { UIElement, UIElementPlugin } from "@webiny/ui-composer/UIElement";
+
+//# sourceMappingURL=UIElement.js.map

package/ui/UIElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["UIElement","UIElementPlugin"],"sources":["UIElement.tsx"],"sourcesContent":["export type {\n    UIElementConfig,\n    ApplyFunction,\n    ShouldRender,\n    UiElementRenderProps\n} from \"@webiny/ui-composer/UIElement\";\n\nexport { UIElement, UIElementPlugin } from \"@webiny/ui-composer/UIElement\";\n"],"mappings":"AAOA,SAASA,SAAS,EAAEC,eAAe,QAAQ,+BAA+B","ignoreList":[]}

package/ui/UILayout.js

@@ -1 +1,3 @@
-export { UILayout, UILayoutPlugin } from "@webiny/ui-composer/UILayout";
+export { UILayout, UILayoutPlugin } from "@webiny/ui-composer/UILayout";
+
+//# sourceMappingURL=UILayout.js.map

package/ui/UILayout.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["UILayout","UILayoutPlugin"],"sources":["UILayout.tsx"],"sourcesContent":["export { UILayout, UILayoutPlugin } from \"@webiny/ui-composer/UILayout\";\n"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,QAAQ,8BAA8B","ignoreList":[]}

package/ui/UIRenderer.js

@@ -1 +1,3 @@
-export { UIRenderer } from "@webiny/ui-composer/UIRenderer";
+export { UIRenderer } from "@webiny/ui-composer/UIRenderer";
+
+//# sourceMappingURL=UIRenderer.js.map

package/ui/UIRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["UIRenderer"],"sources":["UIRenderer.tsx"],"sourcesContent":["export { UIRenderer } from \"@webiny/ui-composer/UIRenderer\";\nexport type { UIRenderParams, RenderNext } from \"@webiny/ui-composer/UIRenderer\";\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,gCAAgC","ignoreList":[]}

package/ui/UIView.d.ts

@@ -1,2 +1,2 @@
-export type { ApplyFunction, UIElementWrapperProps, UIElementWrapper } from "@webiny/ui-composer/UIView";
+export type { ApplyFunction, UIElementWrapperProps, UIElementWrapper, UIViewProps } from "@webiny/ui-composer/UIView";
 export { UIView, UIViewComponent, UIViewPlugin } from "@webiny/ui-composer/UIView";

package/ui/UIView.js

@@ -1 +1,3 @@
-export { UIView, UIViewComponent, UIViewPlugin } from "@webiny/ui-composer/UIView";
+export { UIView, UIViewComponent, UIViewPlugin } from "@webiny/ui-composer/UIView";
+
+//# sourceMappingURL=UIView.js.map

package/ui/UIView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["UIView","UIViewComponent","UIViewPlugin"],"sources":["UIView.tsx"],"sourcesContent":["export type {\n    ApplyFunction,\n    UIElementWrapperProps,\n    UIElementWrapper,\n    UIViewProps\n} from \"@webiny/ui-composer/UIView\";\nexport { UIView, UIViewComponent, UIViewPlugin } from \"@webiny/ui-composer/UIView\";\n"],"mappings":"AAMA,SAASA,MAAM,EAAEC,eAAe,EAAEC,YAAY,QAAQ,4BAA4B","ignoreList":[]}

package/ui/elements/AccordionElement.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-import { UIElement, UIElementConfig } from "../UIElement";
+import type { UIElementConfig, UiElementRenderProps } from "../UIElement";
+import { UIElement } from "../UIElement";
 interface GetterWithProps<TProps, T> {
     (props: TProps): T;
 }
@@ -11,17 +12,17 @@ interface Item<TProps = any> extends UIElementConfig {
     open?: boolean | GetterWithProps<TProps, boolean>;
 }
 export declare class AccordionItemElement extends UIElement<Item> {
-    constructor(id: any, config: Item);
+    constructor(id: string, config: Item);
     setTitle(title: string): void;
     setDescription(description: string): void;
-    render(props: any): JSX.Element;
+    render(props: UiElementRenderProps): React.ReactNode;
 }
 interface Config extends UIElementConfig {
     items: Item[];
 }
 export declare class AccordionElement extends UIElement<Config> {
-    constructor(id: any, config: Config);
+    constructor(id: string, config: Config);
     getAccordionItemElement(id: string): AccordionItemElement;
-    render(props: any): JSX.Element;
+    render(props: UiElementRenderProps): React.ReactNode;
 }
 export {};

package/ui/elements/AccordionElement.js

@@ -1,86 +1,48 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _get from "@babel/runtime/helpers/get";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-var _excluded = ["open"];
 import React from "react";
 import { UIElement } from "../UIElement";
 import { Accordion, AccordionItem } from "@webiny/ui/Accordion";
-export var AccordionItemElement = /*#__PURE__*/function (_UIElement) {
-  _inherits(AccordionItemElement, _UIElement);
-
-  var _super = _createSuper(AccordionItemElement);
-
-  function AccordionItemElement(id, config) {
-    _classCallCheck(this, AccordionItemElement);
-
-    return _super.call(this, id, config);
+export class AccordionItemElement extends UIElement {
+  constructor(id, config) {
+    super(id, config);
   }
-
-  _createClass(AccordionItemElement, [{
-    key: "setTitle",
-    value: function setTitle(title) {
-      this.config.title = title;
-    }
-  }, {
-    key: "setDescription",
-    value: function setDescription(description) {
-      this.config.description = description;
-    }
-  }, {
-    key: "render",
-    value: function render(props) {
-      var _this$config = this.config,
-          open = _this$config.open,
-          rest = _objectWithoutProperties(_this$config, _excluded);
-
-      var isOpened = typeof open === "function" ? open(props) : open;
-      return /*#__PURE__*/React.createElement(AccordionItem, Object.assign({
-        open: isOpened
-      }, rest), _get(_getPrototypeOf(AccordionItemElement.prototype), "render", this).call(this, props));
-    }
-  }]);
-
-  return AccordionItemElement;
-}(UIElement);
-export var AccordionElement = /*#__PURE__*/function (_UIElement2) {
-  _inherits(AccordionElement, _UIElement2);
-
-  var _super2 = _createSuper(AccordionElement);
-
-  function AccordionElement(id, config) {
-    var _this;
-
-    _classCallCheck(this, AccordionElement);
-
-    _this = _super2.call(this, id, config);
-
-    _this.useGrid(false);
-
-    _this.config.items.forEach(function (item) {
-      _this.addElement(new AccordionItemElement(item.id, item));
+  setTitle(title) {
+    this.config.title = title;
+  }
+  setDescription(description) {
+    this.config.description = description;
+  }
+  render(props) {
+    const {
+      open,
+      ...rest
+    } = this.config;
+    const isOpened = typeof open === "function" ? open(props) : open;
+    return /*#__PURE__*/React.createElement(AccordionItem, Object.assign({
+      open: isOpened
+    }, rest), super.render(props));
+  }
+}
+export class AccordionElement extends UIElement {
+  constructor(id, config) {
+    super(id, config);
+    this.useGrid(false);
+    this.config.items.forEach(item => {
+      this.addElement(new AccordionItemElement(item.id, item));
     });
-
-    return _this;
   }
+  getAccordionItemElement(id) {
+    return this.getElement(id);
+  }
+  render(props) {
+    /**
+     * Figure out correct way to have props.children typed.
+     * TODO @ts-refactor
+     */
+    // @ts-expect-error
+    return /*#__PURE__*/React.createElement(Accordion, {
+      elevation: 0
+    }, super.render(props));
+  }
+}
 
-  _createClass(AccordionElement, [{
-    key: "getAccordionItemElement",
-    value: function getAccordionItemElement(id) {
-      return this.getElement(id);
-    }
-  }, {
-    key: "render",
-    value: function render(props) {
-      // @ts-ignore
-      return /*#__PURE__*/React.createElement(Accordion, {
-        elevation: 0
-      }, _get(_getPrototypeOf(AccordionElement.prototype), "render", this).call(this, props));
-    }
-  }]);
-
-  return AccordionElement;
-}(UIElement);
+//# sourceMappingURL=AccordionElement.js.map

package/ui/elements/AccordionElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","UIElement","Accordion","AccordionItem","AccordionItemElement","constructor","id","config","setTitle","title","setDescription","description","render","props","open","rest","isOpened","createElement","Object","assign","AccordionElement","useGrid","items","forEach","item","addElement","getAccordionItemElement","getElement","elevation"],"sources":["AccordionElement.tsx"],"sourcesContent":["import React from \"react\";\nimport type { UIElementConfig, UiElementRenderProps } from \"~/ui/UIElement\";\nimport { UIElement } from \"~/ui/UIElement\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\n\ninterface GetterWithProps<TProps, T> {\n    (props: TProps): T;\n}\n\ninterface Item<TProps = any> extends UIElementConfig {\n    id: string;\n    title: string;\n    description: string;\n    icon: React.ReactElement;\n    open?: boolean | GetterWithProps<TProps, boolean>;\n}\n\nexport class AccordionItemElement extends UIElement<Item> {\n    public constructor(id: string, config: Item) {\n        super(id, config);\n    }\n\n    public setTitle(title: string): void {\n        this.config.title = title;\n    }\n\n    public setDescription(description: string): void {\n        this.config.description = description;\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        const { open, ...rest } = this.config;\n        const isOpened = typeof open === \"function\" ? open(props) : open;\n        return (\n            <AccordionItem open={isOpened} {...rest}>\n                {super.render(props)}\n            </AccordionItem>\n        );\n    }\n}\n\ninterface Config extends UIElementConfig {\n    items: Item[];\n}\n\nexport class AccordionElement extends UIElement<Config> {\n    public constructor(id: string, config: Config) {\n        super(id, config);\n\n        this.useGrid(false);\n\n        this.config.items.forEach(item => {\n            this.addElement(new AccordionItemElement(item.id, item));\n        });\n    }\n\n    public getAccordionItemElement(id: string): AccordionItemElement {\n        return this.getElement(id) as AccordionItemElement;\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        /**\n         * Figure out correct way to have props.children typed.\n         * TODO @ts-refactor\n         */\n        // @ts-expect-error\n        return <Accordion elevation={0}>{super.render(props)}</Accordion>;\n    }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS;AAClB,SAASC,SAAS,EAAEC,aAAa,QAAQ,sBAAsB;AAc/D,OAAO,MAAMC,oBAAoB,SAASH,SAAS,CAAO;EAC/CI,WAAWA,CAACC,EAAU,EAAEC,MAAY,EAAE;IACzC,KAAK,CAACD,EAAE,EAAEC,MAAM,CAAC;EACrB;EAEOC,QAAQA,CAACC,KAAa,EAAQ;IACjC,IAAI,CAACF,MAAM,CAACE,KAAK,GAAGA,KAAK;EAC7B;EAEOC,cAAcA,CAACC,WAAmB,EAAQ;IAC7C,IAAI,CAACJ,MAAM,CAACI,WAAW,GAAGA,WAAW;EACzC;EAEgBC,MAAMA,CAACC,KAA2B,EAAmB;IACjE,MAAM;MAAEC,IAAI;MAAE,GAAGC;IAAK,CAAC,GAAG,IAAI,CAACR,MAAM;IACrC,MAAMS,QAAQ,GAAG,OAAOF,IAAI,KAAK,UAAU,GAAGA,IAAI,CAACD,KAAK,CAAC,GAAGC,IAAI;IAChE,oBACId,KAAA,CAAAiB,aAAA,CAACd,aAAa,EAAAe,MAAA,CAAAC,MAAA;MAACL,IAAI,EAAEE;IAAS,GAAKD,IAAI,GAClC,KAAK,CAACH,MAAM,CAACC,KAAK,CACR,CAAC;EAExB;AACJ;AAMA,OAAO,MAAMO,gBAAgB,SAASnB,SAAS,CAAS;EAC7CI,WAAWA,CAACC,EAAU,EAAEC,MAAc,EAAE;IAC3C,KAAK,CAACD,EAAE,EAAEC,MAAM,CAAC;IAEjB,IAAI,CAACc,OAAO,CAAC,KAAK,CAAC;IAEnB,IAAI,CAACd,MAAM,CAACe,KAAK,CAACC,OAAO,CAACC,IAAI,IAAI;MAC9B,IAAI,CAACC,UAAU,CAAC,IAAIrB,oBAAoB,CAACoB,IAAI,CAAClB,EAAE,EAAEkB,IAAI,CAAC,CAAC;IAC5D,CAAC,CAAC;EACN;EAEOE,uBAAuBA,CAACpB,EAAU,EAAwB;IAC7D,OAAO,IAAI,CAACqB,UAAU,CAACrB,EAAE,CAAC;EAC9B;EAEgBM,MAAMA,CAACC,KAA2B,EAAmB;IACjE;AACR;AACA;AACA;IACQ;IACA,oBAAOb,KAAA,CAAAiB,aAAA,CAACf,SAAS;MAAC0B,SAAS,EAAE;IAAE,GAAE,KAAK,CAAChB,MAAM,CAACC,KAAK,CAAa,CAAC;EACrE;AACJ","ignoreList":[]}

package/ui/elements/ButtonElement.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
-import { UIElement, UIElementConfig } from "../UIElement";
-export declare type ButtonElementType = "default" | "primary" | "secondary";
+import type { UIElementConfig, UiElementRenderProps } from "../UIElement";
+import { UIElement } from "../UIElement";
+export type ButtonElementType = "default" | "primary" | "secondary";
 export interface ButtonOnClick<TRenderProps = any> {
     (props: TRenderProps): void;
 }
@@ -12,13 +13,13 @@ export interface ButtonElementConfig<TRenderProps> extends UIElementConfig {
     label: string | GetterWithProps<TRenderProps, string>;
     onClick: ButtonOnClick<TRenderProps>;
 }
-export declare class ButtonElement<TRenderProps = any> extends UIElement<ButtonElementConfig<TRenderProps>> {
+export declare class ButtonElement<TRenderProps extends UiElementRenderProps = UiElementRenderProps> extends UIElement<ButtonElementConfig<TRenderProps>> {
     setLabel<TProps extends TRenderProps = TRenderProps>(label: string | GetterWithProps<TProps, string>): void;
-    getLabel(props?: any): string;
+    getLabel(props?: TRenderProps): string;
     setType(type: ButtonElementType): void;
-    getType(props?: any): ButtonElementType;
+    getType(props?: TRenderProps): ButtonElementType;
     setOnClick(onClick: ButtonOnClick<TRenderProps>): void;
     getOnClick(): ButtonOnClick<TRenderProps>;
-    render(props: any): React.ReactElement;
+    render(props: TRenderProps): React.ReactElement;
 }
 export {};

package/ui/elements/ButtonElement.js

@@ -1,78 +1,52 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
 import React from "react";
 import { ButtonDefault, ButtonPrimary, ButtonSecondary } from "@webiny/ui/Button";
 import { UIElement } from "../UIElement";
-var BUTTONS = {
+import kebabCase from "lodash/kebabCase";
+const BUTTONS = {
   default: ButtonDefault,
   primary: ButtonPrimary,
   secondary: ButtonSecondary
 };
-export var ButtonElement = /*#__PURE__*/function (_UIElement) {
-  _inherits(ButtonElement, _UIElement);
-
-  var _super = _createSuper(ButtonElement);
-
-  function ButtonElement() {
-    _classCallCheck(this, ButtonElement);
-
-    return _super.apply(this, arguments);
+export class ButtonElement extends UIElement {
+  setLabel(label) {
+    /**
+     * TODO @ts-refactor
+     * 'TProps' could be instantiated with an arbitrary type which could be unrelated to 'TRenderProps'
+     */
+    // @ts-expect-error
+    this.config.label = label;
   }
-
-  _createClass(ButtonElement, [{
-    key: "setLabel",
-    value: function setLabel(label) {
-      this.config.label = label;
-    }
-  }, {
-    key: "getLabel",
-    value: function getLabel(props) {
-      if (typeof this.config.label === "function") {
-        return this.config.label(props);
-      }
-
-      return this.config.label;
-    }
-  }, {
-    key: "setType",
-    value: function setType(type) {
-      this.config.type = type;
-    }
-  }, {
-    key: "getType",
-    value: function getType(props) {
-      if (typeof this.config.type === "function") {
-        return this.config.type(props);
-      }
-
-      return this.config.type;
-    }
-  }, {
-    key: "setOnClick",
-    value: function setOnClick(onClick) {
-      this.config.onClick = onClick;
+  getLabel(props) {
+    if (typeof this.config.label === "function") {
+      // TODO @ts-refactor find out correct types to pass
+      return this.config.label(props);
     }
-  }, {
-    key: "getOnClick",
-    value: function getOnClick() {
-      return this.config.onClick;
-    }
-  }, {
-    key: "render",
-    value: function render(props) {
-      var Component = BUTTONS[this.getType(props)];
-
-      var _onClick = this.getOnClick();
-
-      return /*#__PURE__*/React.createElement(Component, {
-        onClick: function onClick() {
-          return _onClick(props);
-        }
-      }, this.getLabel(props));
+    return this.config.label;
+  }
+  setType(type) {
+    this.config.type = type;
+  }
+  getType(props) {
+    if (typeof this.config.type === "function") {
+      // TODO @ts-refactor find out correct types to pass
+      return this.config.type(props);
     }
-  }]);
+    return this.config.type;
+  }
+  setOnClick(onClick) {
+    this.config.onClick = onClick;
+  }
+  getOnClick() {
+    return this.config.onClick;
+  }
+  render(props) {
+    const Component = BUTTONS[this.getType(props)];
+    const onClick = this.getOnClick();
+    return /*#__PURE__*/React.createElement(Component, {
+      onClick: () => onClick(props),
+      "data-testid": `button-element-${kebabCase(this.getLabel(props))}`
+    }, this.getLabel(props));
+  }
+}
 
-  return ButtonElement;
-}(UIElement);
+//# sourceMappingURL=ButtonElement.js.map

package/ui/elements/ButtonElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ButtonDefault","ButtonPrimary","ButtonSecondary","UIElement","kebabCase","BUTTONS","default","primary","secondary","ButtonElement","setLabel","label","config","getLabel","props","setType","type","getType","setOnClick","onClick","getOnClick","render","Component","createElement"],"sources":["ButtonElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { ButtonDefault, ButtonPrimary, ButtonSecondary } from \"@webiny/ui/Button\";\nimport type { UIElementConfig, UiElementRenderProps } from \"../UIElement\";\nimport { UIElement } from \"../UIElement\";\nimport kebabCase from \"lodash/kebabCase\";\n\nexport type ButtonElementType = \"default\" | \"primary\" | \"secondary\";\n\nexport interface ButtonOnClick<TRenderProps = any> {\n    (props: TRenderProps): void;\n}\n\ninterface GetterWithProps<TProps, TReturn> {\n    (props: TProps): TReturn;\n}\n\nexport interface ButtonElementConfig<TRenderProps> extends UIElementConfig {\n    type: ButtonElementType | GetterWithProps<TRenderProps, ButtonElementType>;\n    label: string | GetterWithProps<TRenderProps, string>;\n    onClick: ButtonOnClick<TRenderProps>;\n}\n\nconst BUTTONS = {\n    default: ButtonDefault,\n    primary: ButtonPrimary,\n    secondary: ButtonSecondary\n};\n\nexport class ButtonElement<\n    TRenderProps extends UiElementRenderProps = UiElementRenderProps\n> extends UIElement<ButtonElementConfig<TRenderProps>> {\n    public setLabel<TProps extends TRenderProps = TRenderProps>(\n        label: string | GetterWithProps<TProps, string>\n    ): void {\n        /**\n         * TODO @ts-refactor\n         * 'TProps' could be instantiated with an arbitrary type which could be unrelated to 'TRenderProps'\n         */\n        // @ts-expect-error\n        this.config.label = label;\n    }\n\n    public getLabel(props?: TRenderProps): string {\n        if (typeof this.config.label === \"function\") {\n            // TODO @ts-refactor find out correct types to pass\n            return this.config.label(props as TRenderProps);\n        }\n        return this.config.label;\n    }\n\n    public setType(type: ButtonElementType): void {\n        this.config.type = type;\n    }\n\n    public getType(props?: TRenderProps): ButtonElementType {\n        if (typeof this.config.type === \"function\") {\n            // TODO @ts-refactor find out correct types to pass\n            return this.config.type(props as TRenderProps);\n        }\n        return this.config.type;\n    }\n\n    public setOnClick(onClick: ButtonOnClick<TRenderProps>): void {\n        this.config.onClick = onClick;\n    }\n\n    public getOnClick() {\n        return this.config.onClick;\n    }\n\n    public override render(props: TRenderProps): React.ReactElement {\n        const Component = BUTTONS[this.getType(props)];\n        const onClick = this.getOnClick();\n\n        return (\n            <Component\n                onClick={() => onClick(props)}\n                data-testid={`button-element-${kebabCase(this.getLabel(props))}`}\n            >\n                {this.getLabel(props)}\n            </Component>\n        );\n    }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,aAAa,EAAEC,aAAa,EAAEC,eAAe,QAAQ,mBAAmB;AAEjF,SAASC,SAAS;AAClB,OAAOC,SAAS,MAAM,kBAAkB;AAkBxC,MAAMC,OAAO,GAAG;EACZC,OAAO,EAAEN,aAAa;EACtBO,OAAO,EAAEN,aAAa;EACtBO,SAAS,EAAEN;AACf,CAAC;AAED,OAAO,MAAMO,aAAa,SAEhBN,SAAS,CAAoC;EAC5CO,QAAQA,CACXC,KAA+C,EAC3C;IACJ;AACR;AACA;AACA;IACQ;IACA,IAAI,CAACC,MAAM,CAACD,KAAK,GAAGA,KAAK;EAC7B;EAEOE,QAAQA,CAACC,KAAoB,EAAU;IAC1C,IAAI,OAAO,IAAI,CAACF,MAAM,CAACD,KAAK,KAAK,UAAU,EAAE;MACzC;MACA,OAAO,IAAI,CAACC,MAAM,CAACD,KAAK,CAACG,KAAqB,CAAC;IACnD;IACA,OAAO,IAAI,CAACF,MAAM,CAACD,KAAK;EAC5B;EAEOI,OAAOA,CAACC,IAAuB,EAAQ;IAC1C,IAAI,CAACJ,MAAM,CAACI,IAAI,GAAGA,IAAI;EAC3B;EAEOC,OAAOA,CAACH,KAAoB,EAAqB;IACpD,IAAI,OAAO,IAAI,CAACF,MAAM,CAACI,IAAI,KAAK,UAAU,EAAE;MACxC;MACA,OAAO,IAAI,CAACJ,MAAM,CAACI,IAAI,CAACF,KAAqB,CAAC;IAClD;IACA,OAAO,IAAI,CAACF,MAAM,CAACI,IAAI;EAC3B;EAEOE,UAAUA,CAACC,OAAoC,EAAQ;IAC1D,IAAI,CAACP,MAAM,CAACO,OAAO,GAAGA,OAAO;EACjC;EAEOC,UAAUA,CAAA,EAAG;IAChB,OAAO,IAAI,CAACR,MAAM,CAACO,OAAO;EAC9B;EAEgBE,MAAMA,CAACP,KAAmB,EAAsB;IAC5D,MAAMQ,SAAS,GAAGjB,OAAO,CAAC,IAAI,CAACY,OAAO,CAACH,KAAK,CAAC,CAAC;IAC9C,MAAMK,OAAO,GAAG,IAAI,CAACC,UAAU,CAAC,CAAC;IAEjC,oBACIrB,KAAA,CAAAwB,aAAA,CAACD,SAAS;MACNH,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACL,KAAK,CAAE;MAC9B,eAAa,kBAAkBV,SAAS,CAAC,IAAI,CAACS,QAAQ,CAACC,KAAK,CAAC,CAAC;IAAG,GAEhE,IAAI,CAACD,QAAQ,CAACC,KAAK,CACb,CAAC;EAEpB;AACJ","ignoreList":[]}

package/ui/elements/ButtonGroupElement.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
+import type { UiElementRenderProps } from "../UIElement";
 import { UIElement } from "../UIElement";
 export declare class ButtonGroupElement extends UIElement<any> {
     constructor(id: string);
-    render(props?: any): React.ReactNode;
+    render(props?: UiElementRenderProps): React.ReactNode;
 }

package/ui/elements/ButtonGroupElement.js

@@ -1,48 +1,29 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _get from "@babel/runtime/helpers/get";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 import React from "react";
 import { UIElement } from "../UIElement";
-import styled from "@emotion/styled";
-var ButtonGroup = /*#__PURE__*/styled("div", {
+const ButtonGroup = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "eztnaqv0"
+} : {
   target: "eztnaqv0",
   label: "ButtonGroup"
-})({
-  display: "flex",
-  height: "100%",
-  width: "100%",
-  alignItems: "center",
-  justifyContent: "center",
-  "> button": {
-    marginRight: 15
-  }
+})(process.env.NODE_ENV === "production" ? {
+  name: "1qjl64w",
+  styles: "display:flex;height:100%;width:100%;align-items:center;justify-content:center;> button{margin-right:15px;}"
+} : {
+  name: "1qjl64w",
+  styles: "display:flex;height:100%;width:100%;align-items:center;justify-content:center;> button{margin-right:15px;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJ1dHRvbkdyb3VwRWxlbWVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTW9CIiwiZmlsZSI6IkJ1dHRvbkdyb3VwRWxlbWVudC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5cbmltcG9ydCB0eXBlIHsgVWlFbGVtZW50UmVuZGVyUHJvcHMgfSBmcm9tIFwifi91aS9VSUVsZW1lbnRcIjtcbmltcG9ydCB7IFVJRWxlbWVudCB9IGZyb20gXCJ+L3VpL1VJRWxlbWVudFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmNvbnN0IEJ1dHRvbkdyb3VwID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuICAgIFwiPiBidXR0b25cIjoge1xuICAgICAgICBtYXJnaW5SaWdodDogMTVcbiAgICB9XG59KTtcblxuZXhwb3J0IGNsYXNzIEJ1dHRvbkdyb3VwRWxlbWVudCBleHRlbmRzIFVJRWxlbWVudDxhbnk+IHtcbiAgICBwdWJsaWMgY29uc3RydWN0b3IoaWQ6IHN0cmluZykge1xuICAgICAgICBzdXBlcihpZCk7XG5cbiAgICAgICAgdGhpcy51c2VHcmlkKGZhbHNlKTtcbiAgICB9XG5cbiAgICBwdWJsaWMgb3ZlcnJpZGUgcmVuZGVyKHByb3BzPzogVWlFbGVtZW50UmVuZGVyUHJvcHMpOiBSZWFjdC5SZWFjdE5vZGUge1xuICAgICAgICByZXR1cm4gPEJ1dHRvbkdyb3VwPntzdXBlci5yZW5kZXIocHJvcHMpfTwvQnV0dG9uR3JvdXA+O1xuICAgIH1cbn1cbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-export var ButtonGroupElement = /*#__PURE__*/function (_UIElement) {
-  _inherits(ButtonGroupElement, _UIElement);
-
-  var _super = _createSuper(ButtonGroupElement);
-
-  function ButtonGroupElement(id) {
-    var _this;
-
-    _classCallCheck(this, ButtonGroupElement);
-
-    _this = _super.call(this, id);
-
-    _this.useGrid(false);
-
-    return _this;
+export class ButtonGroupElement extends UIElement {
+  constructor(id) {
+    super(id);
+    this.useGrid(false);
   }
+  render(props) {
+    return /*#__PURE__*/React.createElement(ButtonGroup, null, super.render(props));
+  }
+}
 
-  _createClass(ButtonGroupElement, [{
-    key: "render",
-    value: function render(props) {
-      return /*#__PURE__*/React.createElement(ButtonGroup, null, _get(_getPrototypeOf(ButtonGroupElement.prototype), "render", this).call(this, props));
-    }
-  }]);
-
-  return ButtonGroupElement;
-}(UIElement);
+//# sourceMappingURL=ButtonGroupElement.js.map