@webiny/ui 5.39.0-beta.0 → 5.39.0-beta.2

package/Drawer/Drawer.js

@@ -1,12 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DrawerHeader = exports.DrawerContent = exports.Drawer = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.DrawerRight = exports.DrawerLeft = exports.DrawerHeader = exports.DrawerContent = exports.Drawer = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _drawer = require("@rmwc/drawer");
+var _excluded = ["style", "children"];
 /**
  * Shows header of the drawer.
  */
@@ -21,12 +25,35 @@ var DrawerContent = function DrawerContent(props) {
   return /*#__PURE__*/_react.default.createElement(_drawer.DrawerContent, props);
 };
 exports.DrawerContent = DrawerContent;
+var DirectionRTL = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "DirectionRTL",
+  target: "el0bo470"
+})(".mdc-drawer.mdc-drawer--modal,.mdc-drawer.mdc-drawer--dismissable{left:initial;right:0;}.mdc-drawer--animate{-webkit-transform:translateX(100%);transform:translateX(100%);}.mdc-drawer.mdc-drawer--opening{-webkit-transform:translateX(0%) !important;transform:translateX(0%) !important;}.mdc-drawer.mdc-drawer--closing{-webkit-transform:translateX(100%) !important;transform:translateX(100%) !important;}");
+
 /**
  * Use Drawer component to display navigation for the whole app or just a small section of it.
  */
-var Drawer = function Drawer(props) {
-  return /*#__PURE__*/_react.default.createElement(_drawer.Drawer, props);
+var Drawer = function Drawer(_ref) {
+  var style = _ref.style,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // Style the drawer using the styles that were passed in.
+  var Drawer = (0, _react.useMemo)(function () {
+    return style ? /*#__PURE__*/(0, _styled.default)(_drawer.Drawer, {
+      target: "el0bo471",
+      label: "Drawer"
+    })(style) : _drawer.Drawer;
+  }, [style]);
+  return /*#__PURE__*/_react.default.createElement(Drawer, props, children);
 };
 exports.Drawer = Drawer;
+var DrawerRight = function DrawerRight(props) {
+  return /*#__PURE__*/_react.default.createElement(DirectionRTL, null, /*#__PURE__*/_react.default.createElement(Drawer, props));
+};
+exports.DrawerRight = DrawerRight;
+var DrawerLeft = function DrawerLeft(props) {
+  return /*#__PURE__*/_react.default.createElement(Drawer, props);
+};
+exports.DrawerLeft = DrawerLeft;
 
 //# sourceMappingURL=Drawer.js.map

package/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_drawer","DrawerHeader","props","default","createElement","exports","DrawerContent","Drawer"],"sources":["Drawer.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    Drawer as RmwcDrawer,\n    DrawerContent as RmwcDrawerContent,\n    DrawerHeader as RmwcDrawerHeader,\n    DrawerProps as RmwcDrawerProps,\n    DrawerHeaderProps as RmwcDrawerHeaderProps,\n    DrawerContentProps as RmwcDrawerContentProps\n} from \"@rmwc/drawer\";\n\ntype DrawerHeaderProps = RmwcDrawerHeaderProps & {\n    /**\n     * Drawer direction.\n     */\n    dir?: string;\n    /**\n     * Drawer content.\n     */\n    children: React.ReactNode;\n\n    /**\n     * CSS class name\n     */\n    className?: string;\n};\n\n/**\n * Shows header of the drawer.\n */\nconst DrawerHeader = (props: DrawerHeaderProps) => <RmwcDrawerHeader {...props} />;\n\nexport type DrawerContentProps = RmwcDrawerContentProps & {\n    /**\n     * Drawer direction.\n     */\n    dir?: string;\n    /**\n     * Drawer content.\n     */\n    children: React.ReactNode;\n\n    /**\n     * CSS class name\n     */\n    className?: string;\n};\n\n/**\n * Shows drawer content. It can be anything, but commonly a List component would suffice here.\n */\nconst DrawerContent = (props: DrawerContentProps) => <RmwcDrawerContent {...props} />;\n\ntype DrawerProps = RmwcDrawerProps & {\n    /**\n     * Drawer direction.\n     */\n    dir?: string;\n    /**\n     * Drawer content.\n     */\n    children: React.ReactNode;\n\n    /**\n     * CSS class name\n     */\n    className?: string;\n};\n/**\n * Use Drawer component to display navigation for the whole app or just a small section of it.\n */\nconst Drawer = (props: DrawerProps) => {\n    return <RmwcDrawer {...props} />;\n};\n\nexport { Drawer, DrawerHeader, DrawerContent };\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAyBA;AACA;AACA;AACA,IAAME,YAAY,GAAG,SAAfA,YAAYA,CAAIC,KAAwB;EAAA,oBAAKL,MAAA,CAAAM,OAAA,CAAAC,aAAA,CAACJ,OAAA,CAAAC,YAAgB,EAAKC,KAAQ,CAAC;AAAA;AAACG,OAAA,CAAAJ,YAAA,GAAAA,YAAA;AAkBnF;AACA;AACA;AACA,IAAMK,aAAa,GAAG,SAAhBA,aAAaA,CAAIJ,KAAyB;EAAA,oBAAKL,MAAA,CAAAM,OAAA,CAAAC,aAAA,CAACJ,OAAA,CAAAM,aAAiB,EAAKJ,KAAQ,CAAC;AAAA;AAACG,OAAA,CAAAC,aAAA,GAAAA,aAAA;AAiBtF;AACA;AACA;AACA,IAAMC,MAAM,GAAG,SAATA,MAAMA,CAAIL,KAAkB,EAAK;EACnC,oBAAOL,MAAA,CAAAM,OAAA,CAAAC,aAAA,CAACJ,OAAA,CAAAO,MAAU,EAAKL,KAAQ,CAAC;AACpC,CAAC;AAACG,OAAA,CAAAE,MAAA,GAAAA,MAAA"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_styled","_interopRequireDefault","_drawer","_excluded","DrawerHeader","props","default","createElement","exports","DrawerContent","DirectionRTL","styled","label","target","Drawer","_ref","style","children","_objectWithoutProperties2","useMemo","RmwcDrawer","DrawerRight","DrawerLeft"],"sources":["Drawer.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { CSSObject } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport {\n    Drawer as RmwcDrawer,\n    DrawerContent as RmwcDrawerContent,\n    DrawerHeader as RmwcDrawerHeader,\n    DrawerProps as RmwcDrawerProps,\n    DrawerHeaderProps as RmwcDrawerHeaderProps,\n    DrawerContentProps as RmwcDrawerContentProps\n} from \"@rmwc/drawer\";\n\ntype DrawerHeaderProps = RmwcDrawerHeaderProps & {\n    /**\n     * Drawer content.\n     */\n    children: React.ReactNode;\n\n    /**\n     * CSS class name\n     */\n    className?: string;\n};\n\n/**\n * Shows header of the drawer.\n */\nconst DrawerHeader = (props: DrawerHeaderProps) => <RmwcDrawerHeader {...props} />;\n\nexport type DrawerContentProps = RmwcDrawerContentProps & {\n    /**\n     * Drawer content.\n     */\n    children: React.ReactNode;\n\n    /**\n     * CSS class name\n     */\n    className?: string;\n};\n\n/**\n * Shows drawer content. It can be anything, but commonly a List component would suffice here.\n */\nconst DrawerContent = (props: DrawerContentProps) => <RmwcDrawerContent {...props} />;\n\ntype DrawerProps = RmwcDrawerProps & {\n    /**\n     * Drawer content.\n     */\n    children: React.ReactNode;\n\n    /**\n     * CSS class name\n     */\n    className?: string;\n\n    style?: CSSObject;\n};\n\nconst DirectionRTL = styled.div`\n    .mdc-drawer.mdc-drawer--modal,\n    .mdc-drawer.mdc-drawer--dismissable {\n        left: initial;\n        right: 0;\n    }\n\n    .mdc-drawer--animate {\n        -webkit-transform: translateX(100%);\n        transform: translateX(100%);\n    }\n\n    .mdc-drawer.mdc-drawer--opening {\n        -webkit-transform: translateX(0%) !important;\n        transform: translateX(0%) !important;\n    }\n\n    .mdc-drawer.mdc-drawer--closing {\n        -webkit-transform: translateX(100%) !important;\n        transform: translateX(100%) !important;\n    }\n`;\n\n/**\n * Use Drawer component to display navigation for the whole app or just a small section of it.\n */\nconst Drawer = ({ style, children, ...props }: DrawerProps) => {\n    // Style the drawer using the styles that were passed in.\n    const Drawer = useMemo(() => (style ? styled(RmwcDrawer)(style) : RmwcDrawer), [style]);\n\n    return <Drawer {...props}>{children}</Drawer>;\n};\n\nconst DrawerRight = (props: DrawerProps) => {\n    return (\n        <DirectionRTL>\n            <Drawer {...props} />\n        </DirectionRTL>\n    );\n};\n\nconst DrawerLeft = (props: DrawerProps) => {\n    return <Drawer {...props} />;\n};\n\nexport { Drawer, DrawerHeader, DrawerContent, DrawerRight, DrawerLeft };\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAOsB,IAAAI,SAAA;AActB;AACA;AACA;AACA,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAIC,KAAwB;EAAA,oBAAKR,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACL,OAAA,CAAAE,YAAgB,EAAKC,KAAQ,CAAC;AAAA;AAACG,OAAA,CAAAJ,YAAA,GAAAA,YAAA;AAcnF;AACA;AACA;AACA,IAAMK,aAAa,GAAG,SAAhBA,aAAaA,CAAIJ,KAAyB;EAAA,oBAAKR,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACL,OAAA,CAAAO,aAAiB,EAAKJ,KAAQ,CAAC;AAAA;AAACG,OAAA,CAAAC,aAAA,GAAAA,aAAA;AAgBtF,IAAMC,YAAY,oBAAGC,eAAM;EAAAC,KAAA;EAAAC,MAAA;AAAA,wZAqB1B;;AAED;AACA;AACA;AACA,IAAMC,MAAM,GAAG,SAAAA,OAAAC,IAAA,EAAgD;EAAA,IAA7CC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAKZ,KAAK,OAAAa,yBAAA,CAAAZ,OAAA,EAAAS,IAAA,EAAAZ,SAAA;EACvC;EACA,IAAMW,MAAM,GAAG,IAAAK,cAAO,EAAC;IAAA,OAAOH,KAAK,oBAAGL,eAAM,EAACS,cAAU;MAAAP,MAAA;MAAAD,KAAA;IAAA,GAAEI,KAAK,IAAII,cAAU;EAAA,CAAC,EAAE,CAACJ,KAAK,CAAC,CAAC;EAEvF,oBAAOnB,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACO,MAAM,EAAKT,KAAK,EAAGY,QAAiB,CAAC;AACjD,CAAC;AAACT,OAAA,CAAAM,MAAA,GAAAA,MAAA;AAEF,IAAMO,WAAW,GAAG,SAAdA,WAAWA,CAAIhB,KAAkB,EAAK;EACxC,oBACIR,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACG,YAAY,qBACTb,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACO,MAAM,EAAKT,KAAQ,CACV,CAAC;AAEvB,CAAC;AAACG,OAAA,CAAAa,WAAA,GAAAA,WAAA;AAEF,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAIjB,KAAkB,EAAK;EACvC,oBAAOR,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACO,MAAM,EAAKT,KAAQ,CAAC;AAChC,CAAC;AAACG,OAAA,CAAAc,UAAA,GAAAA,UAAA"}

package/DynamicFieldset/Fieldset.d.ts

@@ -14,8 +14,8 @@ interface ChildrenRenderPropEmptyCallable {
 }
 interface ChildrenRenderProp {
     actions: {
-        add: Function;
-        remove: Function;
+        add: (index?: number) => () => void;
+        remove: (index: number) => () => void;
     };
     header: (cb: ChildrenRenderPropHeaderCallable) => React.ReactNode;
     row: (cb: ChildrenRenderPropRowCallable) => React.ReactNode;
@@ -28,7 +28,7 @@ interface FieldsetProps {
         isValid: null | boolean;
         message?: string;
     };
-    onChange: Function;
+    onChange: (value: any) => void;
     children: (props: ChildrenRenderProp) => React.ReactNode;
 }
 declare class Fieldset extends React.Component<FieldsetProps> {

package/DynamicFieldset/Fieldset.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_dotPropImmutable","_FormElementMessage","_styled","DynamicFieldsetRow","styled","target","label","paddingBottom","padding","display","Fieldset","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","add","index","undefined","addData","remove","removeData","_this$props","props","value","onChange","dotProp","delete","_toConsumableArray2","slice","cb","header","rows","map","record","createElement","key","data","empty","_createClass2","renderComponent","children","actions","renderHeader","row","renderRow","renderEmpty","Fragment","render","_this$props2","description","_this$props2$validati","validation","isValid","FormElementMessage","error","message","React","Component","_default","exports"],"sources":["Fieldset.tsx"],"sourcesContent":["import React from \"react\";\nimport dotProp from \"dot-prop-immutable\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport styled from \"@emotion/styled\";\n\ninterface ChildrenRenderPropRowCallableParams {\n    index: number;\n    data: any;\n}\ninterface ChildrenRenderPropRowCallable {\n    (params: ChildrenRenderPropRowCallableParams): React.ReactNode;\n}\n\ninterface ChildrenRenderPropHeaderCallable {\n    (): React.ReactNode;\n}\ninterface ChildrenRenderPropEmptyCallable {\n    (): React.ReactNode;\n}\ninterface ChildrenRenderProp {\n    actions: {\n        add: Function;\n        remove: Function;\n    };\n    header: (cb: ChildrenRenderPropHeaderCallable) => React.ReactNode;\n    row: (cb: ChildrenRenderPropRowCallable) => React.ReactNode;\n    empty: (cb: ChildrenRenderPropEmptyCallable) => React.ReactNode;\n}\n\ninterface FieldsetProps {\n    value?: any[];\n    description?: string;\n    validation?: { isValid: null | boolean; message?: string };\n    onChange: Function;\n    children: (props: ChildrenRenderProp) => React.ReactNode;\n}\n\nconst DynamicFieldsetRow = styled(\"div\")({\n    paddingBottom: 10,\n    \"> .mdc-layout-grid\": {\n        padding: 0,\n        \"> .mdc-layout-grid__inner\": {\n            display: \"block\"\n        }\n    }\n});\n\nclass Fieldset extends React.Component<FieldsetProps> {\n    static defaultProps: Partial<FieldsetProps> = {\n        value: []\n    };\n\n    header: React.ReactNode = null;\n    rows: React.ReactNode = null;\n    empty: React.ReactNode = null;\n\n    actions = {\n        add:\n            (index = -1) =>\n            () =>\n                this.addData(index),\n        remove:\n            (index = -1) =>\n            () =>\n                this.removeData(index)\n    };\n\n    removeData = (index: number) => {\n        const { value, onChange } = this.props;\n        onChange(dotProp.delete(value, index));\n    };\n\n    addData = (index = -1) => {\n        const { onChange } = this.props;\n        let value = this.props.value;\n        if (!value) {\n            value = [];\n        }\n        if (index < 0) {\n            onChange([...value, {}]);\n        } else {\n            onChange([...value.slice(0, index + 1), {}, ...value.slice(index + 1)]);\n        }\n    };\n\n    renderHeader = (cb: () => React.ReactNode): React.ReactNode => {\n        this.header = cb();\n        return null;\n    };\n\n    renderRow = (cb: ChildrenRenderPropRowCallable): React.ReactNode => {\n        const { value } = this.props;\n        if (!value) {\n            return null;\n        }\n        this.rows = value.map((record, index) => {\n            return (\n                <DynamicFieldsetRow key={index}>{cb({ data: record, index })}</DynamicFieldsetRow>\n            );\n        });\n        return null;\n    };\n\n    renderEmpty = (cb: () => React.ReactNode): React.ReactNode => {\n        this.empty = cb();\n        return null;\n    };\n\n    public renderComponent(): React.ReactNode {\n        const { value } = this.props;\n        const { children } = this.props;\n\n        children({\n            actions: this.actions,\n            header: this.renderHeader,\n            row: this.renderRow,\n            empty: this.renderEmpty\n        });\n\n        if (!value || value.length === 0) {\n            return this.empty;\n        }\n\n        return (\n            <React.Fragment>\n                {this.header}\n                {this.rows}\n            </React.Fragment>\n        );\n    }\n\n    public override render() {\n        const { description, validation = { isValid: null } } = this.props;\n\n        return (\n            <>\n                {this.renderComponent()}\n                {validation.isValid === false && (\n                    <FormElementMessage error>{validation.message}</FormElementMessage>\n                )}\n\n                {validation.isValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </>\n        );\n    }\n}\n\nexport default Fieldset;\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_dotPropImmutable","_FormElementMessage","_styled","DynamicFieldsetRow","styled","target","label","paddingBottom","padding","display","Fieldset","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","add","index","undefined","addData","remove","removeData","_this$props","props","value","onChange","dotProp","delete","_toConsumableArray2","slice","cb","header","rows","map","record","createElement","key","data","empty","_createClass2","renderComponent","children","actions","renderHeader","row","renderRow","renderEmpty","Fragment","render","_this$props2","description","_this$props2$validati","validation","isValid","FormElementMessage","error","message","React","Component","_default","exports"],"sources":["Fieldset.tsx"],"sourcesContent":["import React from \"react\";\nimport dotProp from \"dot-prop-immutable\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport styled from \"@emotion/styled\";\n\ninterface ChildrenRenderPropRowCallableParams {\n    index: number;\n    data: any;\n}\ninterface ChildrenRenderPropRowCallable {\n    (params: ChildrenRenderPropRowCallableParams): React.ReactNode;\n}\n\ninterface ChildrenRenderPropHeaderCallable {\n    (): React.ReactNode;\n}\ninterface ChildrenRenderPropEmptyCallable {\n    (): React.ReactNode;\n}\ninterface ChildrenRenderProp {\n    actions: {\n        add: (index?: number) => () => void;\n        remove: (index: number) => () => void;\n    };\n    header: (cb: ChildrenRenderPropHeaderCallable) => React.ReactNode;\n    row: (cb: ChildrenRenderPropRowCallable) => React.ReactNode;\n    empty: (cb: ChildrenRenderPropEmptyCallable) => React.ReactNode;\n}\n\ninterface FieldsetProps {\n    value?: any[];\n    description?: string;\n    validation?: { isValid: null | boolean; message?: string };\n    onChange: (value: any) => void;\n    children: (props: ChildrenRenderProp) => React.ReactNode;\n}\n\nconst DynamicFieldsetRow = styled(\"div\")({\n    paddingBottom: 10,\n    \"> .mdc-layout-grid\": {\n        padding: 0,\n        \"> .mdc-layout-grid__inner\": {\n            display: \"block\"\n        }\n    }\n});\n\nclass Fieldset extends React.Component<FieldsetProps> {\n    static defaultProps: Partial<FieldsetProps> = {\n        value: []\n    };\n\n    header: React.ReactNode = null;\n    rows: React.ReactNode = null;\n    empty: React.ReactNode = null;\n\n    actions = {\n        add:\n            (index = -1) =>\n            () =>\n                this.addData(index),\n        remove:\n            (index = -1) =>\n            () =>\n                this.removeData(index)\n    };\n\n    removeData = (index: number) => {\n        const { value, onChange } = this.props;\n        onChange(dotProp.delete(value, index));\n    };\n\n    addData = (index = -1) => {\n        const { onChange } = this.props;\n        let value = this.props.value;\n        if (!value) {\n            value = [];\n        }\n        if (index < 0) {\n            onChange([...value, {}]);\n        } else {\n            onChange([...value.slice(0, index + 1), {}, ...value.slice(index + 1)]);\n        }\n    };\n\n    renderHeader = (cb: () => React.ReactNode): React.ReactNode => {\n        this.header = cb();\n        return null;\n    };\n\n    renderRow = (cb: ChildrenRenderPropRowCallable): React.ReactNode => {\n        const { value } = this.props;\n        if (!value) {\n            return null;\n        }\n        this.rows = value.map((record, index) => {\n            return (\n                <DynamicFieldsetRow key={index}>{cb({ data: record, index })}</DynamicFieldsetRow>\n            );\n        });\n        return null;\n    };\n\n    renderEmpty = (cb: () => React.ReactNode): React.ReactNode => {\n        this.empty = cb();\n        return null;\n    };\n\n    public renderComponent(): React.ReactNode {\n        const { value } = this.props;\n        const { children } = this.props;\n\n        children({\n            actions: this.actions,\n            header: this.renderHeader,\n            row: this.renderRow,\n            empty: this.renderEmpty\n        });\n\n        if (!value || value.length === 0) {\n            return this.empty;\n        }\n\n        return (\n            <React.Fragment>\n                {this.header}\n                {this.rows}\n            </React.Fragment>\n        );\n    }\n\n    public override render() {\n        const { description, validation = { isValid: null } } = this.props;\n\n        return (\n            <>\n                {this.renderComponent()}\n                {validation.isValid === false && (\n                    <FormElementMessage error>{validation.message}</FormElementMessage>\n                )}\n\n                {validation.isValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </>\n        );\n    }\n}\n\nexport default Fieldset;\n"],"mappings":"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"}

package/Icon/Icon.d.ts

@@ -7,7 +7,7 @@ export declare type IconProps = {
     /**
      * Optional onclick handler
      */
-    onClick?: Function;
+    onClick?: (value: any) => void;
     /**
      * CSS class to be added to the icon
      */
@@ -17,5 +17,5 @@ export declare type IconProps = {
 /**
  * Use Icon component to display an icon.
  */
-declare const Icon: React.FC<IconProps>;
+declare const Icon: (props: IconProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export { Icon };

package/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_emotion","_classnames","webinyIcon","css","marginLeft","width","display","Icon","props","React","cloneElement","icon","className","classNames","onClick","exports"],"sources":["Icon.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type IconProps = {\n    /**\n     * SvgComponent containing the svg icon\n     */\n    icon: React.ReactElement;\n\n    /**\n     * Optional onclick handler\n     */\n    onClick?: Function;\n\n    /**\n     * CSS class to be added to the icon\n     */\n    className?: string;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n};\n\nconst webinyIcon = css(\n    {},\n    {\n        \"&.mdc-button__icon\": {\n            marginLeft: 0,\n            width: \"inherit\",\n            display: \"block\"\n        }\n    }\n);\n\n/**\n * Use Icon component to display an icon.\n */\nconst Icon: React.FC<IconProps> = props => {\n    return React.cloneElement(props.icon, {\n        \"data-testid\": props[\"data-testid\"],\n        className: classNames(\"mdc-button__icon webiny-ui-icon\", webinyIcon, props.className),\n        onClick: props.onClick\n    });\n};\n\nexport { Icon };\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAH,sBAAA,CAAAC,OAAA;AAsBA,IAAMG,UAAU,gBAAG,IAAAC,YAAG,EAClB,CAAC,CAAC,EACF;EACI,oBAAoB,EAAE;IAClBC,UAAU,EAAE,CAAC;IACbC,KAAK,EAAE,SAAS;IAChBC,OAAO,EAAE;EACb;AACJ,CAAC,qBACL,CAAC;;AAED;AACA;AACA;AACA,IAAMC,IAAyB,GAAG,SAA5BA,IAAyBA,CAAGC,KAAK,EAAI;EACvC,oBAAOC,cAAK,CAACC,YAAY,CAACF,KAAK,CAACG,IAAI,EAAE;IAClC,aAAa,EAAEH,KAAK,CAAC,aAAa,CAAC;IACnCI,SAAS,EAAE,IAAAC,mBAAU,EAAC,iCAAiC,EAAEX,UAAU,EAAEM,KAAK,CAACI,SAAS,CAAC;IACrFE,OAAO,EAAEN,KAAK,CAACM;EACnB,CAAC,CAAC;AACN,CAAC;AAACC,OAAA,CAAAR,IAAA,GAAAA,IAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_emotion","_classnames","webinyIcon","css","marginLeft","width","display","Icon","props","React","cloneElement","icon","className","classNames","onClick","exports"],"sources":["Icon.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type IconProps = {\n    /**\n     * SvgComponent containing the svg icon\n     */\n    icon: React.ReactElement;\n\n    /**\n     * Optional onclick handler\n     */\n    onClick?: (value: any) => void;\n\n    /**\n     * CSS class to be added to the icon\n     */\n    className?: string;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n};\n\nconst webinyIcon = css(\n    {},\n    {\n        \"&.mdc-button__icon\": {\n            marginLeft: 0,\n            width: \"inherit\",\n            display: \"block\"\n        }\n    }\n);\n\n/**\n * Use Icon component to display an icon.\n */\nconst Icon = (props: IconProps) => {\n    return React.cloneElement(props.icon, {\n        \"data-testid\": props[\"data-testid\"],\n        className: classNames(\"mdc-button__icon webiny-ui-icon\", webinyIcon, props.className),\n        onClick: props.onClick\n    });\n};\n\nexport { Icon };\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAH,sBAAA,CAAAC,OAAA;AAsBA,IAAMG,UAAU,gBAAG,IAAAC,YAAG,EAClB,CAAC,CAAC,EACF;EACI,oBAAoB,EAAE;IAClBC,UAAU,EAAE,CAAC;IACbC,KAAK,EAAE,SAAS;IAChBC,OAAO,EAAE;EACb;AACJ,CAAC,qBACL,CAAC;;AAED;AACA;AACA;AACA,IAAMC,IAAI,GAAG,SAAPA,IAAIA,CAAIC,KAAgB,EAAK;EAC/B,oBAAOC,cAAK,CAACC,YAAY,CAACF,KAAK,CAACG,IAAI,EAAE;IAClC,aAAa,EAAEH,KAAK,CAAC,aAAa,CAAC;IACnCI,SAAS,EAAE,IAAAC,mBAAU,EAAC,iCAAiC,EAAEX,UAAU,EAAEM,KAAK,CAACI,SAAS,CAAC;IACrFE,OAAO,EAAEN,KAAK,CAACM;EACnB,CAAC,CAAC;AACN,CAAC;AAACC,OAAA,CAAAR,IAAA,GAAAA,IAAA"}

package/Image/Image.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="web" />
 import React from "react";
 interface Props extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
     [key: string]: any;
 }
-declare const Image: React.FC<Props>;
+declare const Image: ({ ...rest }: Props) => JSX.Element;
 export { Image };

package/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","Image","_ref","rest","Object","assign","_objectDestructuringEmpty2","default","finalProps","_objectSpread2","srcSet","keys","map","key","concat","join","createElement","exports"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\n\n// Accepts all props that a normal <img> element would accept.\ninterface Props\n    extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {\n    [key: string]: any;\n}\n\nconst Image: React.FC<Props> = ({ ...rest }) => {\n    const finalProps = { ...rest };\n    const srcSet = finalProps.srcSet;\n    if (srcSet && typeof srcSet === \"object\") {\n        finalProps.srcSet = Object.keys(srcSet)\n            .map(key => `${srcSet[key]} ${key}`)\n            .join(\", \");\n    }\n\n    return <img {...finalProps} />;\n};\n\nexport { Image };\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA;;AAMA,IAAMC,KAAsB,GAAG,SAAzBA,KAAsBA,CAAAC,IAAA,EAAoB;EAAA,IAAXC,IAAI,GAAAC,MAAA,CAAAC,MAAA,UAAAC,0BAAA,CAAAC,OAAA,EAAAL,IAAA,GAAAA,IAAA;EACrC,IAAMM,UAAU,OAAAC,cAAA,CAAAF,OAAA,MAAQJ,IAAI,CAAE;EAC9B,IAAMO,MAAM,GAAGF,UAAU,CAACE,MAAM;EAChC,IAAIA,MAAM,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;IACtCF,UAAU,CAACE,MAAM,GAAGN,MAAM,CAACO,IAAI,CAACD,MAAM,CAAC,CAClCE,GAAG,CAAC,UAAAC,GAAG;MAAA,UAAAC,MAAA,CAAOJ,MAAM,CAACG,GAAG,CAAC,OAAAC,MAAA,CAAID,GAAG;IAAA,CAAE,CAAC,CACnCE,IAAI,CAAC,IAAI,CAAC;EACnB;EAEA,oBAAOjB,MAAA,CAAAS,OAAA,CAAAS,aAAA,QAASR,UAAa,CAAC;AAClC,CAAC;AAACS,OAAA,CAAAhB,KAAA,GAAAA,KAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","Image","_ref","rest","Object","assign","_objectDestructuringEmpty2","default","finalProps","_objectSpread2","srcSet","keys","map","key","concat","join","createElement","exports"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\n\n// Accepts all props that a normal <img> element would accept.\ninterface Props\n    extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {\n    [key: string]: any;\n}\n\nconst Image = ({ ...rest }: Props) => {\n    const finalProps = { ...rest };\n    const srcSet = finalProps.srcSet;\n    if (srcSet && typeof srcSet === \"object\") {\n        finalProps.srcSet = Object.keys(srcSet)\n            .map(key => `${srcSet[key]} ${key}`)\n            .join(\", \");\n    }\n\n    return <img {...finalProps} />;\n};\n\nexport { Image };\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA;;AAMA,IAAMC,KAAK,GAAG,SAARA,KAAKA,CAAAC,IAAA,EAA2B;EAAA,IAAlBC,IAAI,GAAAC,MAAA,CAAAC,MAAA,UAAAC,0BAAA,CAAAC,OAAA,EAAAL,IAAA,GAAAA,IAAA;EACpB,IAAMM,UAAU,OAAAC,cAAA,CAAAF,OAAA,MAAQJ,IAAI,CAAE;EAC9B,IAAMO,MAAM,GAAGF,UAAU,CAACE,MAAM;EAChC,IAAIA,MAAM,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;IACtCF,UAAU,CAACE,MAAM,GAAGN,MAAM,CAACO,IAAI,CAACD,MAAM,CAAC,CAClCE,GAAG,CAAC,UAAAC,GAAG;MAAA,UAAAC,MAAA,CAAOJ,MAAM,CAACG,GAAG,CAAC,OAAAC,MAAA,CAAID,GAAG;IAAA,CAAE,CAAC,CACnCE,IAAI,CAAC,IAAI,CAAC;EACnB;EAEA,oBAAOjB,MAAA,CAAAS,OAAA,CAAAS,aAAA,QAASR,UAAa,CAAC;AAClC,CAAC;AAACS,OAAA,CAAAhB,KAAA,GAAAA,KAAA"}

package/ImageEditor/ImageEditor.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="web" />
 import React from "react";
 import { ImageEditorTool, ToolbarTool } from "./toolbar/types";
 interface RenderPropArgs {
-    render: Function;
+    render: () => React.ReactNode;
     getCanvasDataUrl: () => string;
     activeTool: ImageEditorTool | null;
     applyActiveTool: () => Promise<void>;
@@ -20,8 +19,8 @@ interface ImageEditorProps {
         crop: ImageEditorPropsPropsOptions;
         rotate: ImageEditorPropsPropsOptions;
     };
-    onToolActivate?: Function;
-    onToolDeactivate?: Function;
+    onToolActivate?: () => void;
+    onToolDeactivate?: () => void;
     children?: (props: RenderPropArgs) => React.ReactNode;
 }
 interface ImageEditorState {

package/ImageEditor/ImageEditor.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImageEditor = void 0;
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -21,7 +19,7 @@ var _Button = require("../Button");
 var _loadScript = _interopRequireDefault(require("load-script"));
 /**
  * Package load-script does not have types.
- */ // @ts-ignore
+ */ // @ts-expect-error
 var toolbar = {
   flip: _toolbar.flip,
   filter: _toolbar.filter,
@@ -65,7 +63,7 @@ var ApplyCancelActions = /*#__PURE__*/(0, _styled.default)("div", {
 });
 var initScripts = function initScripts() {
   return new Promise(function (resolve) {
-    // @ts-ignore
+    // @ts-expect-error
     if (window.Caman) {
       return resolve();
     }
@@ -133,62 +131,30 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
       }
       return "";
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "applyActiveTool", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
-      var tool;
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            tool = _this.state.tool;
-            if (tool) {
-              _context.next = 3;
-              break;
-            }
-            return _context.abrupt("return");
-          case 3:
-            if (!tool.apply) {
-              _context.next = 6;
-              break;
-            }
-            _context.next = 6;
-            return tool.apply({
-              canvas: _this.canvas
-            });
-          case 6:
-            _this.deactivateTool();
-          case 7:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    })));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "cancelActiveTool", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
-      var tool;
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            tool = _this.state.tool;
-            if (tool) {
-              _context2.next = 3;
-              break;
-            }
-            return _context2.abrupt("return");
-          case 3:
-            if (!tool.cancel) {
-              _context2.next = 6;
-              break;
-            }
-            _context2.next = 6;
-            return tool.cancel({
-              canvas: _this.canvas
-            });
-          case 6:
-            _this.deactivateTool();
-          case 7:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    })));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "applyActiveTool", async function () {
+      var tool = _this.state.tool;
+      if (!tool) {
+        return;
+      }
+      if (tool.apply) {
+        await tool.apply({
+          canvas: _this.canvas
+        });
+      }
+      _this.deactivateTool();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "cancelActiveTool", async function () {
+      var tool = _this.state.tool;
+      if (!tool) {
+        return;
+      }
+      if (tool.cancel) {
+        await tool.cancel({
+          canvas: _this.canvas
+        });
+      }
+      _this.deactivateTool();
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getToolOptions", function (tool) {
       var options = _this.props.options;
       if (!options || typeof options !== "object") {

package/ImageEditor/ImageEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_toolbar","_styled","_classnames","_Button","_loadScript","toolbar","flip","filter","crop","rotate","Toolbar","styled","target","label","display","justifyContent","alignItems","backgroundColor","margin","padding","position","width","boxSizing","zIndex","opacity","pointerEvents","ToolOptions","borderTop","ApplyCancelActions","textAlign","initScripts","Promise","resolve","window","Caman","loadScript","ImageEditor","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","tool","src","React","createRef","props","image","Image","canvas","current","onload","height","ctx","getContext","drawImage","setState","tt","onActivate","options","getToolOptions","startsWith","toDataURL","_asyncToGenerator2","_regeneratorRuntime2","mark","_callee","wrap","_callee$","_context","prev","next","state","abrupt","deactivateTool","stop","_callee2","_callee2$","_context2","cancel","name","_createClass2","key","value","componentDidMount","_this2","then","updateCanvas","setTimeout","option","autoEnable","activateTool","render","_this3","_this$props","tools","children","editor","createElement","Fragment","map","className","classNames","disabled","icon","renderForm","ButtonSecondary","onClick","cancelActiveTool","ButtonPrimary","applyActiveTool","style","id","maxWidth","ref","getCanvasDataUrl","activeTool","Component","exports"],"sources":["ImageEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { flip, filter, crop, rotate } from \"./toolbar\";\nimport { ImageEditorTool, ToolbarTool } from \"./toolbar/types\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport { ButtonSecondary, ButtonPrimary } from \"../Button\";\n/**\n * Package load-script does not have types.\n */\n// @ts-ignore\nimport loadScript from \"load-script\";\n\nconst toolbar = {\n    flip,\n    filter,\n    crop,\n    rotate\n};\n\nconst Toolbar = styled(\"div\")({\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    backgroundColor: \"var(--mdc-theme-secondary)\",\n    margin: \"-24px -24px 0px -24px\",\n    padding: 2,\n    position: \"absolute\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    zIndex: 10,\n    \"> div.disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst ToolOptions = styled(\"div\")({\n    margin: \"50px -24px 10px -24px\",\n    boxSizing: \"border-box\",\n    padding: 10,\n    backgroundColor: \"var(--mdc-theme-background)\",\n    borderTop: \"1px solid var(--mdc-theme-on-background)\"\n});\n\nconst ApplyCancelActions = styled(\"div\")({\n    textAlign: \"center\"\n});\n\nconst initScripts = (): Promise<string> => {\n    return new Promise((resolve: any) => {\n        // @ts-ignore\n        if (window.Caman) {\n            return resolve();\n        }\n        return loadScript(\n            \"https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js\",\n            resolve\n        );\n    });\n};\n\ninterface RenderPropArgs {\n    render: Function;\n    getCanvasDataUrl: () => string;\n    activeTool: ImageEditorTool | null;\n    applyActiveTool: () => Promise<void>;\n    cancelActiveTool: () => Promise<void>;\n}\n\ninterface ImageEditorPropsPropsOptions {\n    autoEnable: boolean;\n}\n\ninterface ImageEditorProps {\n    src: string;\n    tools: ToolbarTool[];\n    options?: {\n        flip: ImageEditorPropsPropsOptions;\n        filter: ImageEditorPropsPropsOptions;\n        crop: ImageEditorPropsPropsOptions;\n        rotate: ImageEditorPropsPropsOptions;\n    };\n    onToolActivate?: Function;\n    onToolDeactivate?: Function;\n    children?: (props: RenderPropArgs) => React.ReactNode;\n}\n\ninterface ImageEditorState {\n    tool: ImageEditorTool | null;\n    src: string;\n}\n\nclass ImageEditor extends React.Component<ImageEditorProps, ImageEditorState> {\n    static defaultProps: Partial<ImageEditorProps> = {\n        tools: [\"crop\", \"flip\", \"rotate\", \"filter\"]\n    };\n\n    public override state: ImageEditorState = {\n        tool: null,\n        src: \"\"\n    };\n\n    public canvas = React.createRef<HTMLCanvasElement>();\n    public image?: HTMLImageElement;\n\n    public override componentDidMount() {\n        initScripts().then(() => {\n            this.updateCanvas();\n            setTimeout(() => {\n                const { options } = this.props;\n                if (!options || typeof options !== \"object\") {\n                    return;\n                }\n                for (const key in options) {\n                    const option = options[key as ToolbarTool];\n                    if (option.autoEnable === true) {\n                        const tool: ImageEditorTool | null = toolbar[key as ToolbarTool];\n                        tool && this.activateTool(tool);\n                        break;\n                    }\n                }\n            }, 250);\n        });\n    }\n\n    private readonly updateCanvas = (): void => {\n        const { src } = this.props;\n        this.image = new window.Image();\n        const canvas = this.canvas.current;\n        if (canvas) {\n            this.image.onload = () => {\n                if (this.image) {\n                    canvas.width = this.image.width;\n                    canvas.height = this.image.height;\n                    const ctx = canvas.getContext(\"2d\") as CanvasRenderingContext2D;\n                    ctx.drawImage(this.image, 0, 0);\n                }\n            };\n\n            this.image.src = src;\n        }\n    };\n\n    private readonly activateTool = (tool: ToolbarTool | ImageEditorTool): void => {\n        if (typeof tool === \"string\") {\n            tool = toolbar[tool];\n        }\n\n        this.setState({ tool }, () => {\n            const tt = tool as ImageEditorTool;\n            typeof tt.onActivate === \"function\" &&\n                tt.onActivate({ canvas: this.canvas, options: this.getToolOptions(tt) });\n        });\n    };\n\n    private readonly deactivateTool = (): void => {\n        this.setState({\n            tool: null\n        });\n    };\n\n    public readonly getCanvasDataUrl = (): string => {\n        const canvas = this.canvas.current as HTMLCanvasElement;\n        if (canvas) {\n            const { src } = this.props;\n            if (src.startsWith(\"data:image/jpeg;\")) {\n                return canvas.toDataURL(\"image/jpeg\", 1.0);\n            }\n\n            return canvas.toDataURL();\n        }\n\n        return \"\";\n    };\n\n    private readonly applyActiveTool = async (): Promise<void> => {\n        const { tool } = this.state;\n        if (!tool) {\n            return;\n        }\n\n        if (tool.apply) {\n            await tool.apply({\n                canvas: this.canvas\n            });\n        }\n        this.deactivateTool();\n    };\n\n    private readonly cancelActiveTool = async (): Promise<void> => {\n        const { tool } = this.state;\n        if (!tool) {\n            return;\n        }\n\n        if (tool.cancel) {\n            await tool.cancel({\n                canvas: this.canvas\n            });\n        }\n        this.deactivateTool();\n    };\n\n    private readonly getToolOptions = (\n        tool: ImageEditorTool\n    ): Partial<ImageEditorPropsPropsOptions> => {\n        const { options } = this.props;\n        if (!options || typeof options !== \"object\") {\n            return {};\n        }\n\n        return options[tool.name as ToolbarTool] || {};\n    };\n\n    public override render(): React.ReactNode {\n        const { src, tools, children } = this.props;\n        const { tool } = this.state;\n        const editor = (\n            <React.Fragment>\n                <Toolbar>\n                    {tools.map(key => {\n                        const tool: ImageEditorTool = toolbar[key];\n                        if (!tool) {\n                            return null;\n                        }\n\n                        return (\n                            <div key={key} className={classNames({ disabled: this.state.tool })}>\n                                {tool.icon({\n                                    activateTool: () => this.activateTool(tool)\n                                })}\n                            </div>\n                        );\n                    })}\n                </Toolbar>\n\n                <ToolOptions>\n                    {tool ? (\n                        <>\n                            {typeof tool.renderForm === \"function\" &&\n                                tool.renderForm({\n                                    options: this.getToolOptions(tool as ImageEditorTool),\n                                    image: this.image as HTMLImageElement,\n                                    canvas: this.canvas\n                                })}\n\n                            <ApplyCancelActions>\n                                <ButtonSecondary\n                                    data-testid=\"button-cancel\"\n                                    onClick={() => {\n                                        this.cancelActiveTool();\n                                    }}\n                                >\n                                    Cancel\n                                </ButtonSecondary>\n                                &nbsp;\n                                <ButtonPrimary\n                                    data-testid=\"button-apply\"\n                                    onClick={() => {\n                                        this.applyActiveTool();\n                                    }}\n                                >\n                                    Apply\n                                </ButtonPrimary>\n                            </ApplyCancelActions>\n                        </>\n                    ) : (\n                        <div style={{ textAlign: \"center\" }}>\n                            Select a tool to start working on your image.\n                        </div>\n                    )}\n                </ToolOptions>\n\n                <div style={{ margin: \"0 auto\", textAlign: \"center\" }}>\n                    <canvas\n                        key={src}\n                        id={\"canvas\"}\n                        style={{ maxWidth: 700 }}\n                        ref={this.canvas as React.Ref<any>}\n                    />\n                </div>\n            </React.Fragment>\n        );\n\n        if (typeof children === \"function\") {\n            return children({\n                render: () => editor,\n                // canvas: this.canvas,\n                getCanvasDataUrl: this.getCanvasDataUrl,\n                activeTool: this.state.tool,\n                applyActiveTool: this.applyActiveTool,\n                cancelActiveTool: this.cancelActiveTool\n            });\n        }\n\n        return editor;\n    }\n}\n\nexport { ImageEditor };\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_toolbar","_styled","_classnames","_Button","_loadScript","toolbar","flip","filter","crop","rotate","Toolbar","styled","target","label","display","justifyContent","alignItems","backgroundColor","margin","padding","position","width","boxSizing","zIndex","opacity","pointerEvents","ToolOptions","borderTop","ApplyCancelActions","textAlign","initScripts","Promise","resolve","window","Caman","loadScript","ImageEditor","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","tool","src","React","createRef","props","image","Image","canvas","current","onload","height","ctx","getContext","drawImage","setState","tt","onActivate","options","getToolOptions","startsWith","toDataURL","state","deactivateTool","cancel","name","_createClass2","key","value","componentDidMount","_this2","then","updateCanvas","setTimeout","option","autoEnable","activateTool","render","_this3","_this$props","tools","children","editor","createElement","Fragment","map","className","classNames","disabled","icon","renderForm","ButtonSecondary","onClick","cancelActiveTool","ButtonPrimary","applyActiveTool","style","id","maxWidth","ref","getCanvasDataUrl","activeTool","Component","exports"],"sources":["ImageEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { flip, filter, crop, rotate } from \"./toolbar\";\nimport { ImageEditorTool, ToolbarTool } from \"./toolbar/types\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport { ButtonSecondary, ButtonPrimary } from \"../Button\";\n/**\n * Package load-script does not have types.\n */\n// @ts-expect-error\nimport loadScript from \"load-script\";\n\nconst toolbar = {\n    flip,\n    filter,\n    crop,\n    rotate\n};\n\nconst Toolbar = styled(\"div\")({\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    backgroundColor: \"var(--mdc-theme-secondary)\",\n    margin: \"-24px -24px 0px -24px\",\n    padding: 2,\n    position: \"absolute\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    zIndex: 10,\n    \"> div.disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst ToolOptions = styled(\"div\")({\n    margin: \"50px -24px 10px -24px\",\n    boxSizing: \"border-box\",\n    padding: 10,\n    backgroundColor: \"var(--mdc-theme-background)\",\n    borderTop: \"1px solid var(--mdc-theme-on-background)\"\n});\n\nconst ApplyCancelActions = styled(\"div\")({\n    textAlign: \"center\"\n});\n\nconst initScripts = (): Promise<string> => {\n    return new Promise((resolve: any) => {\n        // @ts-expect-error\n        if (window.Caman) {\n            return resolve();\n        }\n        return loadScript(\n            \"https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js\",\n            resolve\n        );\n    });\n};\n\ninterface RenderPropArgs {\n    render: () => React.ReactNode;\n    getCanvasDataUrl: () => string;\n    activeTool: ImageEditorTool | null;\n    applyActiveTool: () => Promise<void>;\n    cancelActiveTool: () => Promise<void>;\n}\n\ninterface ImageEditorPropsPropsOptions {\n    autoEnable: boolean;\n}\n\ninterface ImageEditorProps {\n    src: string;\n    tools: ToolbarTool[];\n    options?: {\n        flip: ImageEditorPropsPropsOptions;\n        filter: ImageEditorPropsPropsOptions;\n        crop: ImageEditorPropsPropsOptions;\n        rotate: ImageEditorPropsPropsOptions;\n    };\n    onToolActivate?: () => void;\n    onToolDeactivate?: () => void;\n    children?: (props: RenderPropArgs) => React.ReactNode;\n}\n\ninterface ImageEditorState {\n    tool: ImageEditorTool | null;\n    src: string;\n}\n\nclass ImageEditor extends React.Component<ImageEditorProps, ImageEditorState> {\n    static defaultProps: Partial<ImageEditorProps> = {\n        tools: [\"crop\", \"flip\", \"rotate\", \"filter\"]\n    };\n\n    public override state: ImageEditorState = {\n        tool: null,\n        src: \"\"\n    };\n\n    public canvas = React.createRef<HTMLCanvasElement>();\n    public image?: HTMLImageElement;\n\n    public override componentDidMount() {\n        initScripts().then(() => {\n            this.updateCanvas();\n            setTimeout(() => {\n                const { options } = this.props;\n                if (!options || typeof options !== \"object\") {\n                    return;\n                }\n                for (const key in options) {\n                    const option = options[key as ToolbarTool];\n                    if (option.autoEnable === true) {\n                        const tool: ImageEditorTool | null = toolbar[key as ToolbarTool];\n                        tool && this.activateTool(tool);\n                        break;\n                    }\n                }\n            }, 250);\n        });\n    }\n\n    private readonly updateCanvas = (): void => {\n        const { src } = this.props;\n        this.image = new window.Image();\n        const canvas = this.canvas.current;\n        if (canvas) {\n            this.image.onload = () => {\n                if (this.image) {\n                    canvas.width = this.image.width;\n                    canvas.height = this.image.height;\n                    const ctx = canvas.getContext(\"2d\") as CanvasRenderingContext2D;\n                    ctx.drawImage(this.image, 0, 0);\n                }\n            };\n\n            this.image.src = src;\n        }\n    };\n\n    private readonly activateTool = (tool: ToolbarTool | ImageEditorTool): void => {\n        if (typeof tool === \"string\") {\n            tool = toolbar[tool];\n        }\n\n        this.setState({ tool }, () => {\n            const tt = tool as ImageEditorTool;\n            typeof tt.onActivate === \"function\" &&\n                tt.onActivate({ canvas: this.canvas, options: this.getToolOptions(tt) });\n        });\n    };\n\n    private readonly deactivateTool = (): void => {\n        this.setState({\n            tool: null\n        });\n    };\n\n    public readonly getCanvasDataUrl = (): string => {\n        const canvas = this.canvas.current as HTMLCanvasElement;\n        if (canvas) {\n            const { src } = this.props;\n            if (src.startsWith(\"data:image/jpeg;\")) {\n                return canvas.toDataURL(\"image/jpeg\", 1.0);\n            }\n\n            return canvas.toDataURL();\n        }\n\n        return \"\";\n    };\n\n    private readonly applyActiveTool = async (): Promise<void> => {\n        const { tool } = this.state;\n        if (!tool) {\n            return;\n        }\n\n        if (tool.apply) {\n            await tool.apply({\n                canvas: this.canvas\n            });\n        }\n        this.deactivateTool();\n    };\n\n    private readonly cancelActiveTool = async (): Promise<void> => {\n        const { tool } = this.state;\n        if (!tool) {\n            return;\n        }\n\n        if (tool.cancel) {\n            await tool.cancel({\n                canvas: this.canvas\n            });\n        }\n        this.deactivateTool();\n    };\n\n    private readonly getToolOptions = (\n        tool: ImageEditorTool\n    ): Partial<ImageEditorPropsPropsOptions> => {\n        const { options } = this.props;\n        if (!options || typeof options !== \"object\") {\n            return {};\n        }\n\n        return options[tool.name as ToolbarTool] || {};\n    };\n\n    public override render(): React.ReactNode {\n        const { src, tools, children } = this.props;\n        const { tool } = this.state;\n        const editor = (\n            <React.Fragment>\n                <Toolbar>\n                    {tools.map(key => {\n                        const tool: ImageEditorTool = toolbar[key];\n                        if (!tool) {\n                            return null;\n                        }\n\n                        return (\n                            <div key={key} className={classNames({ disabled: this.state.tool })}>\n                                {tool.icon({\n                                    activateTool: () => this.activateTool(tool)\n                                })}\n                            </div>\n                        );\n                    })}\n                </Toolbar>\n\n                <ToolOptions>\n                    {tool ? (\n                        <>\n                            {typeof tool.renderForm === \"function\" &&\n                                tool.renderForm({\n                                    options: this.getToolOptions(tool as ImageEditorTool),\n                                    image: this.image as HTMLImageElement,\n                                    canvas: this.canvas\n                                })}\n\n                            <ApplyCancelActions>\n                                <ButtonSecondary\n                                    data-testid=\"button-cancel\"\n                                    onClick={() => {\n                                        this.cancelActiveTool();\n                                    }}\n                                >\n                                    Cancel\n                                </ButtonSecondary>\n                                &nbsp;\n                                <ButtonPrimary\n                                    data-testid=\"button-apply\"\n                                    onClick={() => {\n                                        this.applyActiveTool();\n                                    }}\n                                >\n                                    Apply\n                                </ButtonPrimary>\n                            </ApplyCancelActions>\n                        </>\n                    ) : (\n                        <div style={{ textAlign: \"center\" }}>\n                            Select a tool to start working on your image.\n                        </div>\n                    )}\n                </ToolOptions>\n\n                <div style={{ margin: \"0 auto\", textAlign: \"center\" }}>\n                    <canvas\n                        key={src}\n                        id={\"canvas\"}\n                        style={{ maxWidth: 700 }}\n                        ref={this.canvas as React.Ref<any>}\n                    />\n                </div>\n            </React.Fragment>\n        );\n\n        if (typeof children === \"function\") {\n            return children({\n                render: () => editor,\n                // canvas: this.canvas,\n                getCanvasDataUrl: this.getCanvasDataUrl,\n                activeTool: this.state.tool,\n                applyActiveTool: this.applyActiveTool,\n                cancelActiveTool: this.cancelActiveTool\n            });\n        }\n\n        return editor;\n    }\n}\n\nexport { ImageEditor };\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAEA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,WAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAKA,IAAAK,WAAA,GAAAN,sBAAA,CAAAC,OAAA;AAJA;AACA;AACA,GAFA,CAGA;AAGA,IAAMM,OAAO,GAAG;EACZC,IAAI,EAAJA,aAAI;EACJC,MAAM,EAANA,eAAM;EACNC,IAAI,EAAJA,aAAI;EACJC,MAAM,EAANA;AACJ,CAAC;AAED,IAAMC,OAAO,oBAAGC,eAAM,EAAC,KAAK;EAAAC,MAAA;EAAAC,KAAA;AAAA,GAAE;EAC1BC,OAAO,EAAE,MAAM;EACfC,cAAc,EAAE,QAAQ;EACxBC,UAAU,EAAE,QAAQ;EACpBC,eAAe,EAAE,4BAA4B;EAC7CC,MAAM,EAAE,uBAAuB;EAC/BC,OAAO,EAAE,CAAC;EACVC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE,MAAM;EACbC,SAAS,EAAE,YAAY;EACvBC,MAAM,EAAE,EAAE;EACV,gBAAgB,EAAE;IACdC,OAAO,EAAE,GAAG;IACZC,aAAa,EAAE;EACnB;AACJ,CAAC,CAAC;AAEF,IAAMC,WAAW,oBAAGf,eAAM,EAAC,KAAK;EAAAC,MAAA;EAAAC,KAAA;AAAA,GAAE;EAC9BK,MAAM,EAAE,uBAAuB;EAC/BI,SAAS,EAAE,YAAY;EACvBH,OAAO,EAAE,EAAE;EACXF,eAAe,EAAE,6BAA6B;EAC9CU,SAAS,EAAE;AACf,CAAC,CAAC;AAEF,IAAMC,kBAAkB,oBAAGjB,eAAM,EAAC,KAAK;EAAAC,MAAA;EAAAC,KAAA;AAAA,GAAE;EACrCgB,SAAS,EAAE;AACf,CAAC,CAAC;AAEF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAA0B;EACvC,OAAO,IAAIC,OAAO,CAAC,UAACC,OAAY,EAAK;IACjC;IACA,IAAIC,MAAM,CAACC,KAAK,EAAE;MACd,OAAOF,OAAO,CAAC,CAAC;IACpB;IACA,OAAO,IAAAG,mBAAU,EACb,wEAAwE,EACxEH,OACJ,CAAC;EACL,CAAC,CAAC;AACN,CAAC;AAAC,IAiCII,WAAW,0BAAAC,gBAAA;EAAA,IAAAC,UAAA,CAAAC,OAAA,EAAAH,WAAA,EAAAC,gBAAA;EAAA,IAAAG,MAAA,OAAAC,aAAA,CAAAF,OAAA,EAAAH,WAAA;EAAA,SAAAA,YAAA;IAAA,IAAAM,KAAA;IAAA,IAAAC,gBAAA,CAAAJ,OAAA,QAAAH,WAAA;IAAA,SAAAQ,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,KAAA,GAAAF,MAAA,CAAAU,IAAA,CAAAC,KAAA,CAAAX,MAAA,SAAAY,MAAA,CAAAL,IAAA;IAAA,IAAAM,gBAAA,CAAAd,OAAA,MAAAe,uBAAA,CAAAf,OAAA,EAAAG,KAAA,YAK6B;MACtCa,IAAI,EAAE,IAAI;MACVC,GAAG,EAAE;IACT,CAAC;IAAA,IAAAH,gBAAA,CAAAd,OAAA,MAAAe,uBAAA,CAAAf,OAAA,EAAAG,KAAA,0BAEee,cAAK,CAACC,SAAS,CAAoB,CAAC;IAAA,IAAAL,gBAAA,CAAAd,OAAA,MAAAe,uBAAA,CAAAf,OAAA,EAAAG,KAAA,mBAuBpB,YAAY;MACxC,IAAQc,GAAG,GAAKd,KAAA,CAAKiB,KAAK,CAAlBH,GAAG;MACXd,KAAA,CAAKkB,KAAK,GAAG,IAAI3B,MAAM,CAAC4B,KAAK,CAAC,CAAC;MAC/B,IAAMC,MAAM,GAAGpB,KAAA,CAAKoB,MAAM,CAACC,OAAO;MAClC,IAAID,MAAM,EAAE;QACRpB,KAAA,CAAKkB,KAAK,CAACI,MAAM,GAAG,YAAM;UACtB,IAAItB,KAAA,CAAKkB,KAAK,EAAE;YACZE,MAAM,CAACzC,KAAK,GAAGqB,KAAA,CAAKkB,KAAK,CAACvC,KAAK;YAC/ByC,MAAM,CAACG,MAAM,GAAGvB,KAAA,CAAKkB,KAAK,CAACK,MAAM;YACjC,IAAMC,GAAG,GAAGJ,MAAM,CAACK,UAAU,CAAC,IAAI,CAA6B;YAC/DD,GAAG,CAACE,SAAS,CAAC1B,KAAA,CAAKkB,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;UACnC;QACJ,CAAC;QAEDlB,KAAA,CAAKkB,KAAK,CAACJ,GAAG,GAAGA,GAAG;MACxB;IACJ,CAAC;IAAA,IAAAH,gBAAA,CAAAd,OAAA,MAAAe,uBAAA,CAAAf,OAAA,EAAAG,KAAA,mBAE+B,UAACa,IAAmC,EAAW;MAC3E,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;QAC1BA,IAAI,GAAGlD,OAAO,CAACkD,IAAI,CAAC;MACxB;MAEAb,KAAA,CAAK2B,QAAQ,CAAC;QAAEd,IAAI,EAAJA;MAAK,CAAC,EAAE,YAAM;QAC1B,IAAMe,EAAE,GAAGf,IAAuB;QAClC,OAAOe,EAAE,CAACC,UAAU,KAAK,UAAU,IAC/BD,EAAE,CAACC,UAAU,CAAC;UAAET,MAAM,EAAEpB,KAAA,CAAKoB,MAAM;UAAEU,OAAO,EAAE9B,KAAA,CAAK+B,cAAc,CAACH,EAAE;QAAE,CAAC,CAAC;MAChF,CAAC,CAAC;IACN,CAAC;IAAA,IAAAjB,gBAAA,CAAAd,OAAA,MAAAe,uBAAA,CAAAf,OAAA,EAAAG,KAAA,qBAEiC,YAAY;MAC1CA,KAAA,CAAK2B,QAAQ,CAAC;QACVd,IAAI,EAAE;MACV,CAAC,CAAC;IACN,CAAC;IAAA,IAAAF,gBAAA,CAAAd,OAAA,MAAAe,uBAAA,CAAAf,OAAA,EAAAG,KAAA,uBAEkC,YAAc;MAC7C,IAAMoB,MAAM,GAAGpB,KAAA,CAAKoB,MAAM,CAACC,OAA4B;MACvD,IAAID,MAAM,EAAE;QACR,IAAQN,GAAG,GAAKd,KAAA,CAAKiB,KAAK,CAAlBH,GAAG;QACX,IAAIA,GAAG,CAACkB,UAAU,CAAC,kBAAkB,CAAC,EAAE;UACpC,OAAOZ,MAAM,CAACa,SAAS,CAAC,YAAY,EAAE,GAAG,CAAC;QAC9C;QAEA,OAAOb,MAAM,CAACa,SAAS,CAAC,CAAC;MAC7B;MAEA,OAAO,EAAE;IACb,CAAC;IAAA,IAAAtB,gBAAA,CAAAd,OAAA,MAAAe,uBAAA,CAAAf,OAAA,EAAAG,KAAA,sBAEkC,kBAA2B;MAC1D,IAAQa,IAAI,GAAKb,KAAA,CAAKkC,KAAK,CAAnBrB,IAAI;MACZ,IAAI,CAACA,IAAI,EAAE;QACP;MACJ;MAEA,IAAIA,IAAI,CAACJ,KAAK,EAAE;QACZ,MAAMI,IAAI,CAACJ,KAAK,CAAC;UACbW,MAAM,EAAEpB,KAAA,CAAKoB;QACjB,CAAC,CAAC;MACN;MACApB,KAAA,CAAKmC,cAAc,CAAC,CAAC;IACzB,CAAC;IAAA,IAAAxB,gBAAA,CAAAd,OAAA,MAAAe,uBAAA,CAAAf,OAAA,EAAAG,KAAA,uBAEmC,kBAA2B;MAC3D,IAAQa,IAAI,GAAKb,KAAA,CAAKkC,KAAK,CAAnBrB,IAAI;MACZ,IAAI,CAACA,IAAI,EAAE;QACP;MACJ;MAEA,IAAIA,IAAI,CAACuB,MAAM,EAAE;QACb,MAAMvB,IAAI,CAACuB,MAAM,CAAC;UACdhB,MAAM,EAAEpB,KAAA,CAAKoB;QACjB,CAAC,CAAC;MACN;MACApB,KAAA,CAAKmC,cAAc,CAAC,CAAC;IACzB,CAAC;IAAA,IAAAxB,gBAAA,CAAAd,OAAA,MAAAe,uBAAA,CAAAf,OAAA,EAAAG,KAAA,qBAEiC,UAC9Ba,IAAqB,EACmB;MACxC,IAAQiB,OAAO,GAAK9B,KAAA,CAAKiB,KAAK,CAAtBa,OAAO;MACf,IAAI,CAACA,OAAO,IAAI,OAAOA,OAAO,KAAK,QAAQ,EAAE;QACzC,OAAO,CAAC,CAAC;MACb;MAEA,OAAOA,OAAO,CAACjB,IAAI,CAACwB,IAAI,CAAgB,IAAI,CAAC,CAAC;IAClD,CAAC;IAAA,OAAArC,KAAA;EAAA;EAAA,IAAAsC,aAAA,CAAAzC,OAAA,EAAAH,WAAA;IAAA6C,GAAA;IAAAC,KAAA,EA3GD,SAAAC,kBAAA,EAAoC;MAAA,IAAAC,MAAA;MAChCtD,WAAW,CAAC,CAAC,CAACuD,IAAI,CAAC,YAAM;QACrBD,MAAI,CAACE,YAAY,CAAC,CAAC;QACnBC,UAAU,CAAC,YAAM;UACb,IAAQf,OAAO,GAAKY,MAAI,CAACzB,KAAK,CAAtBa,OAAO;UACf,IAAI,CAACA,OAAO,IAAI,OAAOA,OAAO,KAAK,QAAQ,EAAE;YACzC;UACJ;UACA,KAAK,IAAMS,GAAG,IAAIT,OAAO,EAAE;YACvB,IAAMgB,MAAM,GAAGhB,OAAO,CAACS,GAAG,CAAgB;YAC1C,IAAIO,MAAM,CAACC,UAAU,KAAK,IAAI,EAAE;cAC5B,IAAMlC,IAA4B,GAAGlD,OAAO,CAAC4E,GAAG,CAAgB;cAChE1B,IAAI,IAAI6B,MAAI,CAACM,YAAY,CAACnC,IAAI,CAAC;cAC/B;YACJ;UACJ;QACJ,CAAC,EAAE,GAAG,CAAC;MACX,CAAC,CAAC;IACN;EAAC;IAAA0B,GAAA;IAAAC,KAAA,EA2FD,SAAAS,OAAA,EAA0C;MAAA,IAAAC,MAAA;MACtC,IAAAC,WAAA,GAAiC,IAAI,CAAClC,KAAK;QAAnCH,GAAG,GAAAqC,WAAA,CAAHrC,GAAG;QAAEsC,KAAK,GAAAD,WAAA,CAALC,KAAK;QAAEC,QAAQ,GAAAF,WAAA,CAARE,QAAQ;MAC5B,IAAQxC,IAAI,GAAK,IAAI,CAACqB,KAAK,CAAnBrB,IAAI;MACZ,IAAMyC,MAAM,gBACRnG,MAAA,CAAA0C,OAAA,CAAA0D,aAAA,CAACpG,MAAA,CAAA0C,OAAK,CAAC2D,QAAQ,qBACXrG,MAAA,CAAA0C,OAAA,CAAA0D,aAAA,CAACvF,OAAO,QACHoF,KAAK,CAACK,GAAG,CAAC,UAAAlB,GAAG,EAAI;QACd,IAAM1B,IAAqB,GAAGlD,OAAO,CAAC4E,GAAG,CAAC;QAC1C,IAAI,CAAC1B,IAAI,EAAE;UACP,OAAO,IAAI;QACf;QAEA,oBACI1D,MAAA,CAAA0C,OAAA,CAAA0D,aAAA;UAAKhB,GAAG,EAAEA,GAAI;UAACmB,SAAS,EAAE,IAAAC,mBAAU,EAAC;YAAEC,QAAQ,EAAEV,MAAI,CAAChB,KAAK,CAACrB;UAAK,CAAC;QAAE,GAC/DA,IAAI,CAACgD,IAAI,CAAC;UACPb,YAAY,EAAE,SAAAA,aAAA;YAAA,OAAME,MAAI,CAACF,YAAY,CAACnC,IAAI,CAAC;UAAA;QAC/C,CAAC,CACA,CAAC;MAEd,CAAC,CACI,CAAC,eAEV1D,MAAA,CAAA0C,OAAA,CAAA0D,aAAA,CAACvE,WAAW,QACP6B,IAAI,gBACD1D,MAAA,CAAA0C,OAAA,CAAA0D,aAAA,CAAApG,MAAA,CAAA0C,OAAA,CAAA2D,QAAA,QACK,OAAO3C,IAAI,CAACiD,UAAU,KAAK,UAAU,IAClCjD,IAAI,CAACiD,UAAU,CAAC;QACZhC,OAAO,EAAE,IAAI,CAACC,cAAc,CAAClB,IAAuB,CAAC;QACrDK,KAAK,EAAE,IAAI,CAACA,KAAyB;QACrCE,MAAM,EAAE,IAAI,CAACA;MACjB,CAAC,CAAC,eAENjE,MAAA,CAAA0C,OAAA,CAAA0D,aAAA,CAACrE,kBAAkB,qBACf/B,MAAA,CAAA0C,OAAA,CAAA0D,aAAA,CAAC9F,OAAA,CAAAsG,eAAe;QACZ,eAAY,eAAe;QAC3BC,OAAO,EAAE,SAAAA,QAAA,EAAM;UACXd,MAAI,CAACe,gBAAgB,CAAC,CAAC;QAC3B;MAAE,GACL,QAEgB,CAAC,QAElB,eAAA9G,MAAA,CAAA0C,OAAA,CAAA0D,aAAA,CAAC9F,OAAA,CAAAyG,aAAa;QACV,eAAY,cAAc;QAC1BF,OAAO,EAAE,SAAAA,QAAA,EAAM;UACXd,MAAI,CAACiB,eAAe,CAAC,CAAC;QAC1B;MAAE,GACL,OAEc,CACC,CACtB,CAAC,gBAEHhH,MAAA,CAAA0C,OAAA,CAAA0D,aAAA;QAAKa,KAAK,EAAE;UAAEjF,SAAS,EAAE;QAAS;MAAE,GAAC,+CAEhC,CAEA,CAAC,eAEdhC,MAAA,CAAA0C,OAAA,CAAA0D,aAAA;QAAKa,KAAK,EAAE;UAAE5F,MAAM,EAAE,QAAQ;UAAEW,SAAS,EAAE;QAAS;MAAE,gBAClDhC,MAAA,CAAA0C,OAAA,CAAA0D,aAAA;QACIhB,GAAG,EAAEzB,GAAI;QACTuD,EAAE,EAAE,QAAS;QACbD,KAAK,EAAE;UAAEE,QAAQ,EAAE;QAAI,CAAE;QACzBC,GAAG,EAAE,IAAI,CAACnD;MAAyB,CACtC,CACA,CACO,CACnB;MAED,IAAI,OAAOiC,QAAQ,KAAK,UAAU,EAAE;QAChC,OAAOA,QAAQ,CAAC;UACZJ,MAAM,EAAE,SAAAA,OAAA;YAAA,OAAMK,MAAM;UAAA;UACpB;UACAkB,gBAAgB,EAAE,IAAI,CAACA,gBAAgB;UACvCC,UAAU,EAAE,IAAI,CAACvC,KAAK,CAACrB,IAAI;UAC3BsD,eAAe,EAAE,IAAI,CAACA,eAAe;UACrCF,gBAAgB,EAAE,IAAI,CAACA;QAC3B,CAAC,CAAC;MACN;MAEA,OAAOX,MAAM;IACjB;EAAC;EAAA,OAAA5D,WAAA;AAAA,EA5MqBqB,cAAK,CAAC2D,SAAS;AAAAC,OAAA,CAAAjF,WAAA,GAAAA,WAAA;AAAA,IAAAiB,gBAAA,CAAAd,OAAA,EAAnCH,WAAW,kBACoC;EAC7C0D,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ;AAC9C,CAAC"}

package/ImageEditor/toolbar/filter.js

@@ -20,7 +20,7 @@ var _Tooltip = require("../../Tooltip");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 /**
- * When using Caman, we added @ts-ignore because it does not exist in packages, but it is loaded in packages/ui/src/ImageEditor/ImageEditor.tsx:38.
+ * When using Caman, we added @ts-expect-error because it does not exist in packages, but it is loaded in packages/ui/src/ImageEditor/ImageEditor.tsx:38.
  * TODO: use some other library to edit images
  */
 
@@ -103,17 +103,17 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
       // eslint-disable-next-line @typescript-eslint/no-this-alias
       var component = (0, _assertThisInitialized2.default)(_this);
 
-      // @ts-ignore
+      // @ts-expect-error
       Caman(canvas.current, function () {
         var _this2 = this;
-        // @ts-ignore
+        // @ts-expect-error
         this.revert(false);
         Object.keys(values).forEach(
-        // @ts-ignore
+        // @ts-expect-error
         function (key) {
           return values[key] !== 0 && _this2[key] && _this2[key](values[key]);
         });
-        // @ts-ignore
+        // @ts-expect-error
         this.render();
         component.setState({
           processing: false
@@ -200,11 +200,11 @@ var tool = {
   },
   cancel: function cancel(_ref2) {
     var canvas = _ref2.canvas;
-    // @ts-ignore
+    // @ts-expect-error
     Caman(canvas.current, function () {
-      // @ts-ignore
+      // @ts-expect-error
       this.revert(false);
-      // @ts-ignore
+      // @ts-expect-error
       this.render();
     });
   }

package/ImageEditor/toolbar/filter.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_filter","_Slider","_Button","_Tooltip","_debounce","_styled","Wrapper","styled","target","label","ul","textAlign","li","display","width","padding","sliders","key","min","RenderForm","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","processing","values","debounce","canvas","props","state","component","Caman","current","_this2","revert","Object","keys","forEach","render","setState","reduce","output","_createClass2","value","componentDidMount","resetFiltersValues","_this3","createElement","map","Slider","assign","max","disabled","onInput","_objectSpread2","applyFilters","style","ButtonDefault","onClick","React","Component","tool","name","icon","_ref","activateTool","Tooltip","placement","content","IconButton","ReactComponent","renderForm","cancel","_ref2","_default","exports"],"sources":["filter.tsx"],"sourcesContent":["/**\n * When using Caman, we added @ts-ignore because it does not exist in packages, but it is loaded in packages/ui/src/ImageEditor/ImageEditor.tsx:38.\n * TODO: use some other library to edit images\n */\nimport React from \"react\";\nimport { ReactComponent as FilterIcon } from \"./icons/filter.svg\";\nimport { Slider } from \"~/Slider\";\nimport { ImageEditorTool } from \"./types\";\nimport { IconButton, ButtonDefault } from \"~/Button\";\nimport { Tooltip } from \"~/Tooltip\";\nimport debounce from \"lodash/debounce\";\nimport styled from \"@emotion/styled\";\n\ninterface RenderFormState {\n    values: Record<string, any>;\n    processing: boolean;\n}\n\ninterface RenderFormProps {\n    canvas: any;\n    renderApplyCancel?: Function;\n}\n\nconst Wrapper = styled(\"div\")({\n    ul: {\n        textAlign: \"center\",\n        li: {\n            display: \"inline-block\",\n            width: 180,\n            padding: 10\n        }\n    },\n    \".buttons\": {\n        textAlign: \"center\"\n    }\n});\n\nconst sliders = [\n    {\n        key: \"brightness\",\n        label: \"Brightness\",\n        min: -100\n    },\n    {\n        key: \"vibrance\",\n        label: \"Vibrance\",\n        min: -100\n    },\n    {\n        key: \"hue\",\n        label: \"Hue\",\n        min: -100\n    },\n    {\n        key: \"gamma\",\n        label: \"Gamma\"\n    },\n    {\n        key: \"clip\",\n        label: \"Clip\"\n    },\n    {\n        key: \"stackBlur\",\n        label: \"Blur\"\n    },\n    {\n        key: \"contrast\",\n        label: \"Contrast\",\n        min: -100\n    },\n    {\n        key: \"saturation\",\n        label: \"Saturation\",\n        min: -100\n    },\n    {\n        key: \"exposure\",\n        label: \"Exposure\",\n        min: -100\n    },\n    {\n        key: \"sepia\",\n        label: \"Sepia\"\n    },\n    {\n        key: \"noise\",\n        label: \"Noise\"\n    },\n    {\n        key: \"sharpen\",\n        label: \"Sharpen\"\n    }\n];\n\nclass RenderForm extends React.Component<RenderFormProps, RenderFormState> {\n    public override state: RenderFormState = {\n        processing: false,\n        values: {}\n    };\n\n    public override componentDidMount() {\n        this.resetFiltersValues();\n    }\n\n    private readonly applyFilters = debounce(() => {\n        const { canvas } = this.props;\n        const { values } = this.state;\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const component = this;\n\n        // @ts-ignore\n        Caman(canvas.current, function () {\n            // @ts-ignore\n            this.revert(false);\n            Object.keys(values).forEach(\n                // @ts-ignore\n                key => values[key] !== 0 && this[key] && this[key](values[key])\n            );\n            // @ts-ignore\n            this.render();\n            component.setState({ processing: false });\n        });\n    }, 200);\n\n    private readonly resetFiltersValues = () => {\n        this.setState(state => {\n            sliders.reduce((output, current) => {\n                state.values[current.key] = 0;\n                return output;\n            }, {});\n\n            return state;\n        });\n    };\n\n    public override render() {\n        return (\n            <Wrapper>\n                <ul>\n                    {sliders.map(props => (\n                        <li key={props.key}>\n                            <Slider\n                                value={this.state.values[props.key]}\n                                min={0}\n                                max={100}\n                                disabled={this.state.processing}\n                                onInput={(value: string) => {\n                                    this.setState(state => {\n                                        const values = { ...state.values };\n                                        values[props.key] = value;\n\n                                        return { ...state, processing: true, values };\n                                    }, this.applyFilters);\n                                }}\n                                {...props}\n                            />\n                        </li>\n                    ))}\n                </ul>\n\n                <div style={{ textAlign: \"center\" }}>\n                    <ButtonDefault\n                        onClick={() => {\n                            this.setState({ processing: true }, () => {\n                                this.resetFiltersValues();\n                                this.applyFilters();\n                                this.setState({ processing: false });\n                            });\n                        }}\n                    >\n                        Reset filters\n                    </ButtonDefault>\n                </div>\n            </Wrapper>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"filter\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Filter\"}>\n                <IconButton\n                    icon={<FilterIcon />}\n                    onClick={() => activateTool(\"filter\")}\n                    data-testid={\"filter-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    cancel: ({ canvas }) => {\n        // @ts-ignore\n        Caman(canvas.current, function () {\n            // @ts-ignore\n            this.revert(false);\n            // @ts-ignore\n            this.render();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_filter","_Slider","_Button","_Tooltip","_debounce","_styled","Wrapper","styled","target","label","ul","textAlign","li","display","width","padding","sliders","key","min","RenderForm","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","processing","values","debounce","canvas","props","state","component","Caman","current","_this2","revert","Object","keys","forEach","render","setState","reduce","output","_createClass2","value","componentDidMount","resetFiltersValues","_this3","createElement","map","Slider","assign","max","disabled","onInput","_objectSpread2","applyFilters","style","ButtonDefault","onClick","React","Component","tool","name","icon","_ref","activateTool","Tooltip","placement","content","IconButton","ReactComponent","renderForm","cancel","_ref2","_default","exports"],"sources":["filter.tsx"],"sourcesContent":["/**\n * When using Caman, we added @ts-expect-error because it does not exist in packages, but it is loaded in packages/ui/src/ImageEditor/ImageEditor.tsx:38.\n * TODO: use some other library to edit images\n */\nimport React from \"react\";\nimport { ReactComponent as FilterIcon } from \"./icons/filter.svg\";\nimport { Slider } from \"~/Slider\";\nimport { ImageEditorTool } from \"./types\";\nimport { IconButton, ButtonDefault } from \"~/Button\";\nimport { Tooltip } from \"~/Tooltip\";\nimport debounce from \"lodash/debounce\";\nimport styled from \"@emotion/styled\";\n\ninterface RenderFormState {\n    values: Record<string, any>;\n    processing: boolean;\n}\n\ninterface RenderFormProps {\n    canvas: any;\n    renderApplyCancel?: () => void;\n}\n\nconst Wrapper = styled(\"div\")({\n    ul: {\n        textAlign: \"center\",\n        li: {\n            display: \"inline-block\",\n            width: 180,\n            padding: 10\n        }\n    },\n    \".buttons\": {\n        textAlign: \"center\"\n    }\n});\n\nconst sliders = [\n    {\n        key: \"brightness\",\n        label: \"Brightness\",\n        min: -100\n    },\n    {\n        key: \"vibrance\",\n        label: \"Vibrance\",\n        min: -100\n    },\n    {\n        key: \"hue\",\n        label: \"Hue\",\n        min: -100\n    },\n    {\n        key: \"gamma\",\n        label: \"Gamma\"\n    },\n    {\n        key: \"clip\",\n        label: \"Clip\"\n    },\n    {\n        key: \"stackBlur\",\n        label: \"Blur\"\n    },\n    {\n        key: \"contrast\",\n        label: \"Contrast\",\n        min: -100\n    },\n    {\n        key: \"saturation\",\n        label: \"Saturation\",\n        min: -100\n    },\n    {\n        key: \"exposure\",\n        label: \"Exposure\",\n        min: -100\n    },\n    {\n        key: \"sepia\",\n        label: \"Sepia\"\n    },\n    {\n        key: \"noise\",\n        label: \"Noise\"\n    },\n    {\n        key: \"sharpen\",\n        label: \"Sharpen\"\n    }\n];\n\nclass RenderForm extends React.Component<RenderFormProps, RenderFormState> {\n    public override state: RenderFormState = {\n        processing: false,\n        values: {}\n    };\n\n    public override componentDidMount() {\n        this.resetFiltersValues();\n    }\n\n    private readonly applyFilters = debounce(() => {\n        const { canvas } = this.props;\n        const { values } = this.state;\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const component = this;\n\n        // @ts-expect-error\n        Caman(canvas.current, function () {\n            // @ts-expect-error\n            this.revert(false);\n            Object.keys(values).forEach(\n                // @ts-expect-error\n                key => values[key] !== 0 && this[key] && this[key](values[key])\n            );\n            // @ts-expect-error\n            this.render();\n            component.setState({ processing: false });\n        });\n    }, 200);\n\n    private readonly resetFiltersValues = () => {\n        this.setState(state => {\n            sliders.reduce((output, current) => {\n                state.values[current.key] = 0;\n                return output;\n            }, {});\n\n            return state;\n        });\n    };\n\n    public override render() {\n        return (\n            <Wrapper>\n                <ul>\n                    {sliders.map(props => (\n                        <li key={props.key}>\n                            <Slider\n                                value={this.state.values[props.key]}\n                                min={0}\n                                max={100}\n                                disabled={this.state.processing}\n                                onInput={(value: string) => {\n                                    this.setState(state => {\n                                        const values = { ...state.values };\n                                        values[props.key] = value;\n\n                                        return { ...state, processing: true, values };\n                                    }, this.applyFilters);\n                                }}\n                                {...props}\n                            />\n                        </li>\n                    ))}\n                </ul>\n\n                <div style={{ textAlign: \"center\" }}>\n                    <ButtonDefault\n                        onClick={() => {\n                            this.setState({ processing: true }, () => {\n                                this.resetFiltersValues();\n                                this.applyFilters();\n                                this.setState({ processing: false });\n                            });\n                        }}\n                    >\n                        Reset filters\n                    </ButtonDefault>\n                </div>\n            </Wrapper>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"filter\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Filter\"}>\n                <IconButton\n                    icon={<FilterIcon />}\n                    onClick={() => activateTool(\"filter\")}\n                    data-testid={\"filter-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    cancel: ({ canvas }) => {\n        // @ts-expect-error\n        Caman(canvas.current, function () {\n            // @ts-expect-error\n            this.revert(false);\n            // @ts-expect-error\n            this.render();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}

package/ImageEditor/toolbar/rotate.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -56,19 +54,11 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
         onInput: function onInput(value) {
           _this2.setState({
             rangeInput: value
-          }, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
-            return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-              while (1) switch (_context.prev = _context.next) {
-                case 0:
-                  if (cropper) {
-                    cropper.rotateTo(parseInt(value, 10));
-                  }
-                case 1:
-                case "end":
-                  return _context.stop();
-              }
-            }, _callee);
-          })));
+          }, async function () {
+            if (cropper) {
+              cropper.rotateTo(parseInt(value, 10));
+            }
+          });
         }
       }));
     }
@@ -77,8 +67,8 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
 }(_react.default.Component);
 var tool = {
   name: "rotate",
-  icon: function icon(_ref2) {
-    var activateTool = _ref2.activateTool;
+  icon: function icon(_ref) {
+    var activateTool = _ref.activateTool;
     return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
       placement: "bottom",
       content: "Rotate"
@@ -93,8 +83,8 @@ var tool = {
   renderForm: function renderForm(props) {
     return /*#__PURE__*/_react.default.createElement(RenderForm, props);
   },
-  onActivate: function onActivate(_ref3) {
-    var canvas = _ref3.canvas;
+  onActivate: function onActivate(_ref2) {
+    var canvas = _ref2.canvas;
     /**
      * We can safely cast canvas.current as HTMLCanvasElement
      */
@@ -110,8 +100,8 @@ var tool = {
   cancel: function cancel() {
     return cropper && cropper.destroy();
   },
-  apply: function apply(_ref4) {
-    var canvas = _ref4.canvas;
+  apply: function apply(_ref3) {
+    var canvas = _ref3.canvas;
     return new Promise(function (resolve) {
       if (!cropper) {
         resolve();