@webiny/ui 5.23.1 → 5.25.0-beta.0

package/Grid/Grid.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { Grid as RmwcGrid, GridCell as RmwcGridCell, GridInner as RmwcGridInner } from "@rmwc/grid";
 
 /**

package/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Grid.tsx"],"names":["React","Grid","RmwcGrid","GridCell","RmwcGridCell","GridInner","RmwcGridInner","Cell","props","children","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SACIC,IAAI,IAAIC,QADZ,EAEIC,QAAQ,IAAIC,YAFhB,EAGIC,SAAS,IAAIC,aAHjB,QAMO,YANP;;AAwBA;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAO,CAACC,KAAD,EAAsB;AACtC,sBAAO,oBAAC,YAAD,EAAkBA,KAAlB,EAA0BA,KAAK,CAACC,QAAhC,CAAP;AACH,CAFM;AAcP,OAAO,IAAMJ,SAAS,GAAG,SAAZA,SAAY,CAACG,KAAD,EAA2B;AAChD,sBAAO,oBAAC,aAAD,EAAmBA,KAAnB,EAA2BA,KAAK,CAACC,QAAjC,CAAP;AACH,CAFM;AAIPJ,SAAS,CAACK,WAAV,GAAwB,WAAxB;AAEA;AACA;AACA;;AACA,OAAO,IAAMT,IAAI,GAAG,SAAPA,IAAO,CAACO,KAAD,EAAsB;AACtC,sBAAO,oBAAC,QAAD,EAAcA,KAAd,EAAsBA,KAAK,CAACC,QAA5B,CAAP;AACH,CAFM","sourcesContent":["import React from \"react\";\nimport {\n    Grid as RmwcGrid,\n    GridCell as RmwcGridCell,\n    GridInner as RmwcGridInner,\n    GridCellProps as RmwcGridCellProps,\n    GridProps as RmwcGridProps\n} from \"@rmwc/grid\";\nimport { CSSProperties } from \"react\";\n\nexport type CellProps = RmwcGridCellProps & {\n    // One or more Cell components.\n    children?: React.ReactNode;\n\n    // CSS class name that will be added to the element\n    className?: string;\n\n    style?: { [key: string]: any };\n};\n\nexport type GridProps = RmwcGridProps & {\n    className?: string;\n    style?: CSSProperties;\n};\n\n/**\n * Cell must be direct children of Grid component.\n */\nexport const Cell = (props: CellProps) => {\n    return <RmwcGridCell {...props}>{props.children}</RmwcGridCell>;\n};\n\nexport type GridInnerProps = {\n    // One or more Cell components.\n    children: React.ReactElement<typeof Cell> | React.ReactElement<typeof Cell>[];\n\n    /**\n     * CSS class name\n     */\n    className?: string;\n};\n\nexport const GridInner = (props: GridInnerProps) => {\n    return <RmwcGridInner {...props}>{props.children}</RmwcGridInner>;\n};\n\nGridInner.displayName = \"GridInner\";\n\n/**\n * Use Grid component to display a list of choices, once the handler is triggered.\n */\nexport const Grid = (props: GridProps) => {\n    return <RmwcGrid {...props}>{props.children}</RmwcGrid>;\n};\n"]}

package/Grid/Grid.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Grid.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandbox","readme","Grid","Cell","story","module","add","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SAASC,KAAT,EAAgBC,WAAhB,EAA6BC,YAA7B,QAAiD,+BAAjD;AACA,OAAOC,MAAP;AACA,SAASC,IAAT,EAAeC,IAAf;AAEA,IAAMC,KAAK,GAAGP,SAAS,CAAC,iBAAD,EAAoBQ,MAApB,CAAvB;AAEAD,KAAK,CAACE,GAAN,CACI,OADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcL,MAAd,CADJ,eAEI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,IAAD,qBACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,MAAM,EAAE,CAAvB;AAA0B,IAAA,KAAK,EAAE;AAAjC,cADJ,eAII,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,MAAM,EAAE,CAAvB;AAA0B,IAAA,KAAK,EAAE;AAAjC,eAJJ,eAOI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,MAAM,EAAE,CAAvB;AAA0B,IAAA,KAAK,EAAE;AAAjC,eAPJ,eAUI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,MAAM,EAAE,CAAvB;AAA0B,IAAA,KAAK,EAAE;AAAjC,oBAVJ,CADJ,CAFJ,CADJ;AAqBH,CAxBL,EAyBI;AAAEM,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACN,IAAD,EAAOC,IAAP;AAAd;AAAR,CAzBJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Grid/README.md\";\nimport { Grid, Cell } from \"./Grid\";\n\nconst story = storiesOf(\"Components/Grid\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple grid.\"}>\n                    <Grid>\n                        <Cell span={3} tablet={6} phone={12}>\n                            Apples\n                        </Cell>\n                        <Cell span={3} tablet={6} phone={12}>\n                            Oranges\n                        </Cell>\n                        <Cell span={3} tablet={6} phone={12}>\n                            Bananas\n                        </Cell>\n                        <Cell span={3} tablet={6} phone={12}>\n                            Strawberries\n                        </Cell>\n                    </Grid>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Grid, Cell] } }\n);\n"]}

package/Grid/index.js.map

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

package/Helpers/ClassNames.d.ts

@@ -3,8 +3,9 @@
  * the provided appendClasses(string) and any class names defined inside your props.
  * To you the function just do: {...getClasses (props)}
  * and make sure you are not spreading the `props` element, as this will clone and spread your current `props` element already.
- * @param {*} propList
- * @param {*} appendClasses
  */
-declare const getClasses: (propList: any, appendClasses: any) => any;
+/**
+ * TODO @ts-refactor figure out propList type
+ */
+declare const getClasses: (propList: any, appendClasses: string[] | string) => any;
 export { getClasses };

package/Helpers/ClassNames.js

@@ -6,11 +6,13 @@ import classnames from "classnames";
  * the provided appendClasses(string) and any class names defined inside your props.
  * To you the function just do: {...getClasses (props)}
  * and make sure you are not spreading the `props` element, as this will clone and spread your current `props` element already.
- * @param {*} propList
- * @param {*} appendClasses
+ */
+
+/**
+ * TODO @ts-refactor figure out propList type
  */
 var getClasses = function getClasses(propList, appendClasses) {
-  var classes = {};
+  var classes = "";
 
   var props = _clone(propList);
 

package/Helpers/ClassNames.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClassNames.ts"],"names":["classnames","getClasses","propList","appendClasses","classes","props","hasOwnProperty","className"],"mappings":";AAAA,OAAOA,UAAP,MAAuB,YAAvB;;AAGA;AACA;AACA;AACA;AACA;AACA;;AACA;AACA;AACA;AACA,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,QAAD,EAAgBC,aAAhB,EAAqD;AACpE,MAAIC,OAAO,GAAG,EAAd;;AACA,MAAMC,KAAK,GAAG,OAAMH,QAAN,CAAd;;AACA,MAAIA,QAAQ,CAACI,cAAT,CAAwB,WAAxB,CAAJ,EAA0C;AACtCF,IAAAA,OAAO,GAAGJ,UAAU,CAACE,QAAQ,CAACK,SAAV,CAApB;AACA,WAAOF,KAAK,CAACE,SAAb;AACH;;AAED,MAAI,OAAOJ,aAAP,KAAyB,WAA7B,EAA0C;AACtCC,IAAAA,OAAO,GAAGJ,UAAU,CAACI,OAAD,EAAUD,aAAV,CAApB;AACH;;AAEDE,EAAAA,KAAK,CAACE,SAAN,GAAkBH,OAAlB;AAEA,SAAOC,KAAP;AACH,CAfD;;AAiBA,SAASJ,UAAT","sourcesContent":["import classnames from \"classnames\";\nimport { clone } from \"lodash\";\n\n/**\n * This is a pass-through that modifies your object's props and creates the required className prop by merging\n * the provided appendClasses(string) and any class names defined inside your props.\n * To you the function just do: {...getClasses (props)}\n * and make sure you are not spreading the `props` element, as this will clone and spread your current `props` element already.\n */\n/**\n * TODO @ts-refactor figure out propList type\n */\nconst getClasses = (propList: any, appendClasses: string[] | string) => {\n    let classes = \"\";\n    const props = clone(propList);\n    if (propList.hasOwnProperty(\"className\")) {\n        classes = classnames(propList.className);\n        delete props.className;\n    }\n\n    if (typeof appendClasses !== \"undefined\") {\n        classes = classnames(classes, appendClasses);\n    }\n\n    props.className = classes;\n\n    return props;\n};\n\nexport { getClasses };\n"]}

package/Helpers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["getClasses"],"mappings":"AAAA,SAASA,UAAT;AAEA,SAASA,UAAT","sourcesContent":["import { getClasses } from \"./ClassNames\";\n\nexport { getClasses };\n"]}

package/Icon/Icon.d.ts

@@ -1,9 +1,9 @@
-import * as React from "react";
+import React from "react";
 export declare type IconProps = {
     /**
      * SvgComponent containing the svg icon
      */
-    icon: React.ReactElement<any>;
+    icon: React.ReactElement;
     /**
      * Optional onclick handler
      */
@@ -16,9 +16,6 @@ export declare type IconProps = {
 };
 /**
  * Use Icon component to display an icon.
- * @param props
- * @returns {*}
- * @constructor
  */
-declare const Icon: (props: IconProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+declare const Icon: React.FC<IconProps>;
 export { Icon };

package/Icon/Icon.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { css } from "emotion";
 import classNames from "classnames";
 var webinyIcon = /*#__PURE__*/css({}, {
@@ -10,9 +10,6 @@ var webinyIcon = /*#__PURE__*/css({}, {
 }, "label:webinyIcon;");
 /**
  * Use Icon component to display an icon.
- * @param props
- * @returns {*}
- * @constructor
  */
 
 var Icon = function Icon(props) {

package/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Icon.tsx"],"names":["React","css","classNames","webinyIcon","marginLeft","width","display","Icon","props","cloneElement","icon","className","onClick"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,GAAT,QAAoB,SAApB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAsBA,IAAMC,UAAU,gBAAGF,GAAG,CAClB,EADkB,EAElB;AACI,wBAAsB;AAClBG,IAAAA,UAAU,EAAE,CADM;AAElBC,IAAAA,KAAK,EAAE,SAFW;AAGlBC,IAAAA,OAAO,EAAE;AAHS;AAD1B,CAFkB,sBAAtB;AAWA;AACA;AACA;;AACA,IAAMC,IAAyB,GAAG,SAA5BA,IAA4B,CAAAC,KAAK,EAAI;AACvC,sBAAOR,KAAK,CAACS,YAAN,CAAmBD,KAAK,CAACE,IAAzB,EAA+B;AAClC,mBAAeF,KAAK,CAAC,aAAD,CADc;AAElCG,IAAAA,SAAS,EAAET,UAAU,CAAC,iCAAD,EAAoCC,UAApC,EAAgDK,KAAK,CAACG,SAAtD,CAFa;AAGlCC,IAAAA,OAAO,EAAEJ,KAAK,CAACI;AAHmB,GAA/B,CAAP;AAKH,CAND;;AAQA,SAASL,IAAT","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"]}

package/Icon/Icon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Icon.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandbox","readme","ReactComponent","AutoRenewIcon","CloudDoneIcon","BaselineDeleteIcon","BaselineDoneIcon","Icon","story","module","add","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SAASC,KAAT,EAAgBC,WAAhB,EAA6BC,YAA7B,QAAiD,+BAAjD;AACA,OAAOC,MAAP;AAEA,SAASC,cAAc,IAAIC,aAA3B;AACA,SAASD,cAAc,IAAIE,aAA3B;AACA,SAASF,cAAc,IAAIG,kBAA3B;AACA,SAASH,cAAc,IAAII,gBAA3B;AACA,SAASC,IAAT;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,iBAAD,EAAoBY,MAApB,CAAvB;AAEAD,KAAK,CAACE,GAAN,CACI,OADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcT,MAAd,CADJ,eAEI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,8CACI,oBAAC,IAAD;AAAM,IAAA,IAAI,eAAE,oBAAC,aAAD;AAAZ,IADJ,uBAGI,oBAAC,IAAD;AAAM,IAAA,IAAI,eAAE,oBAAC,aAAD;AAAZ,IAHJ,uBAKI,oBAAC,IAAD;AAAM,IAAA,IAAI,eAAE,oBAAC,kBAAD;AAAZ,IALJ,uBAOI,oBAAC,IAAD;AAAM,IAAA,IAAI,eAAE,oBAAC,gBAAD;AAAZ,IAPJ,SADJ,CAFJ,CADJ;AAiBH,CApBL,EAqBI;AAAEU,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACL,IAAD;AAAd;AAAR,CArBJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Icon/README.md\";\n\nimport { ReactComponent as AutoRenewIcon } from \"./svg/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./svg/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as BaselineDeleteIcon } from \"./svg/baseline-delete-24px.svg\";\nimport { ReactComponent as BaselineDoneIcon } from \"./svg/baseline-done-24px.svg\";\nimport { Icon } from \"./Icon\";\n\nconst story = storiesOf(\"Components/Icon\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple icon\"}>\n                    <div>\n                        <Icon icon={<AutoRenewIcon />} />\n                        &nbsp;\n                        <Icon icon={<CloudDoneIcon />} />\n                        &nbsp;\n                        <Icon icon={<BaselineDeleteIcon />} />\n                        &nbsp;\n                        <Icon icon={<BaselineDoneIcon />} />\n                        &nbsp;\n                    </div>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Icon] } }\n);\n"]}

package/Icon/index.js.map

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

package/Image/Image.d.ts

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

package/Image/Image.js

@@ -1,14 +1,16 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import * as React from "react"; // Accepts all props that a normal <img> element would accept.
+import React from "react"; // Accepts all props that a normal <img> element would accept.
 
 var Image = function Image(_ref) {
   var rest = Object.assign({}, _ref);
 
   var finalProps = _objectSpread({}, rest);
 
-  if (finalProps.srcSet && typeof finalProps.srcSet === "object") {
-    finalProps.srcSet = Object.keys(finalProps.srcSet).map(function (key) {
-      return "".concat(finalProps.srcSet[key], " ").concat(key);
+  var srcSet = finalProps.srcSet;
+
+  if (srcSet && typeof srcSet === "object") {
+    finalProps.srcSet = Object.keys(srcSet).map(function (key) {
+      return "".concat(srcSet[key], " ").concat(key);
     }).join(", ");
   }
 

package/Image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Image.tsx"],"names":["React","Image","rest","finalProps","srcSet","Object","keys","map","key","join"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB,C,CAEA;;AAMA,IAAMC,KAAsB,GAAG,SAAzBA,KAAyB,OAAiB;AAAA,MAAXC,IAAW;;AAC5C,MAAMC,UAAU,qBAAQD,IAAR,CAAhB;;AACA,MAAME,MAAM,GAAGD,UAAU,CAACC,MAA1B;;AACA,MAAIA,MAAM,IAAI,OAAOA,MAAP,KAAkB,QAAhC,EAA0C;AACtCD,IAAAA,UAAU,CAACC,MAAX,GAAoBC,MAAM,CAACC,IAAP,CAAYF,MAAZ,EACfG,GADe,CACX,UAAAC,GAAG;AAAA,uBAAOJ,MAAM,CAACI,GAAD,CAAb,cAAsBA,GAAtB;AAAA,KADQ,EAEfC,IAFe,CAEV,IAFU,CAApB;AAGH;;AAED,sBAAO,2BAASN,UAAT,CAAP;AACH,CAVD;;AAYA,SAASF,KAAT","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"]}

package/Image/Image.stories.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { storiesOf } from "@storybook/react";
 import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
 import readme from "./../Image/README.md";

package/Image/Image.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Image.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","withKnobs","Image","story","module","addDecorator","add","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAQA,OAAOC,MAAP;AACA,SAASC,SAAT,QAA0B,wBAA1B;AAEA,SAASC,KAAT;AAEA,IAAMC,KAAK,GAAGT,SAAS,CAAC,kBAAD,EAAqBU,MAArB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBJ,SAAnB;AAEAE,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcN,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD,qBACI,oBAAC,KAAD;AAAO,IAAA,GAAG,EAAC,iCAAX;AAA6C,IAAA,GAAG,EAAC;AAAjD,IADJ,CADJ,eAII,oBAAC,gBAAD,qBACI,oBAAC,KAAD;AAAO,IAAA,GAAG,EAAC,iCAAX;AAA6C,IAAA,GAAG,EAAC;AAAjD,IADJ,CAJJ,CAFJ,CADJ;AAaH,CAhBL,EAiBI;AAAEO,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACN,KAAD;AAAd;AAAR,CAjBJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\n\nimport readme from \"./../Image/README.md\";\nimport { withKnobs } from \"@storybook/addon-knobs\";\n\nimport { Image } from \"./Image\";\n\nconst story = storiesOf(\"Components/Image\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Image src=\"http://i.pravatar.cc/150?img=49\" alt=\"Nice image.\" />\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        <Image src=\"http://i.pravatar.cc/150?img=49\" alt=\"Nice image.\" />\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Image] } }\n);\n"]}

package/Image/index.js.map

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

package/ImageEditor/ImageEditor.d.ts

@@ -1,47 +1,45 @@
-import * as React from "react";
-import { ImageEditorTool } from "./toolbar/types";
-export declare type ToolbarTool = "crop" | "flip" | "rotate" | "filter";
-declare type RenderPropArgs = {
+import React from "react";
+import { ImageEditorTool, ToolbarTool } from "./toolbar/types";
+interface RenderPropArgs {
     render: Function;
     getCanvasDataUrl: () => string;
-    activeTool?: ImageEditorTool;
-    applyActiveTool: Function;
-    cancelActiveTool: Function;
-};
-declare type Props = {
+    activeTool: ImageEditorTool | null;
+    applyActiveTool: () => Promise<void>;
+    cancelActiveTool: () => Promise<void>;
+}
+interface ImageEditorPropsPropsOptions {
+    autoEnable: boolean;
+}
+interface ImageEditorProps {
     src: string;
     tools: ToolbarTool[];
     options?: {
-        [key: string]: any;
+        flip: ImageEditorPropsPropsOptions;
+        filter: ImageEditorPropsPropsOptions;
+        crop: ImageEditorPropsPropsOptions;
+        rotate: ImageEditorPropsPropsOptions;
     };
     onToolActivate?: Function;
     onToolDeactivate?: Function;
     children?: (props: RenderPropArgs) => React.ReactNode;
-};
-declare type State = {
-    tool?: {
-        [key: string]: any;
-    };
+}
+interface ImageEditorState {
+    tool: ImageEditorTool | null;
     src: string;
-};
-declare class ImageEditor extends React.Component<Props, State> {
-    static defaultProps: {
-        tools: string[];
-    };
-    state: {
-        tool: any;
-        src: string;
-    };
-    canvas: React.RefObject<unknown>;
-    image: any;
+}
+declare class ImageEditor extends React.Component<ImageEditorProps, ImageEditorState> {
+    static defaultProps: Partial<ImageEditorProps>;
+    state: ImageEditorState;
+    canvas: React.RefObject<HTMLCanvasElement>;
+    image?: HTMLImageElement;
     componentDidMount(): void;
-    updateCanvas: () => void;
-    activateTool: (tool: string | ImageEditorTool) => void;
-    deactivateTool: () => void;
-    getCanvasDataUrl: () => string;
-    applyActiveTool: () => Promise<void>;
-    cancelActiveTool: () => Promise<void>;
-    getToolOptions: (tool: ImageEditorTool) => any;
-    render(): {};
+    private readonly updateCanvas;
+    private readonly activateTool;
+    private readonly deactivateTool;
+    readonly getCanvasDataUrl: () => string;
+    private readonly applyActiveTool;
+    private readonly cancelActiveTool;
+    private readonly getToolOptions;
+    render(): React.ReactNode;
 }
 export { ImageEditor };

package/ImageEditor/ImageEditor.js

@@ -6,12 +6,23 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import * as React from "react";
-import * as toolbar from "./toolbar";
+import React from "react";
+import { flip, filter, crop, rotate } from "./toolbar";
 import styled from "@emotion/styled";
 import classNames from "classnames";
 import { ButtonSecondary, ButtonPrimary } from "../Button";
+/**
+ * Package load-script does not have types.
+ */
+// @ts-ignore
+
 import loadScript from "load-script";
+var toolbar = {
+  flip: flip,
+  filter: filter,
+  crop: crop,
+  rotate: rotate
+};
 var Toolbar = /*#__PURE__*/styled("div", {
   target: "eq22gs70",
   label: "Toolbar"
@@ -82,7 +93,7 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "canvas", /*#__PURE__*/React.createRef());
 
-    _defineProperty(_assertThisInitialized(_this), "image", null);
+    _defineProperty(_assertThisInitialized(_this), "image", void 0);
 
     _defineProperty(_assertThisInitialized(_this), "updateCanvas", function () {
       var src = _this.props.src;
@@ -157,22 +168,20 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
               return _context.abrupt("return");
 
             case 3:
-              _context.t0 = tool.apply;
-
-              if (!_context.t0) {
-                _context.next = 7;
+              if (!tool.apply) {
+                _context.next = 6;
                 break;
               }
 
-              _context.next = 7;
+              _context.next = 6;
               return tool.apply({
                 canvas: _this.canvas
               });
 
-            case 7:
+            case 6:
               _this.deactivateTool();
 
-            case 8:
+            case 7:
             case "end":
               return _context.stop();
           }
@@ -196,22 +205,20 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
               return _context2.abrupt("return");
 
             case 3:
-              _context2.t0 = tool.cancel;
-
-              if (!_context2.t0) {
-                _context2.next = 7;
+              if (!tool.cancel) {
+                _context2.next = 6;
                 break;
               }
 
-              _context2.next = 7;
+              _context2.next = 6;
               return tool.cancel({
                 canvas: _this.canvas
               });
 
-            case 7:
+            case 6:
               _this.deactivateTool();
 
-            case 8:
+            case 7:
             case "end":
               return _context2.stop();
           }
@@ -243,13 +250,17 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
         setTimeout(function () {
           var options = _this2.props.options;
 
-          if (typeof options === "object" && options) {
-            for (var _key2 in options) {
-              if (options[_key2].autoEnable === true) {
-                var tool = toolbar[_key2];
-                tool && _this2.activateTool(tool);
-                break;
-              }
+          if (!options || typeof options !== "object") {
+            return;
+          }
+
+          for (var key in options) {
+            var option = options[key];
+
+            if (option.autoEnable === true) {
+              var tool = toolbar[key];
+              tool && _this2.activateTool(tool);
+              break;
             }
           }
         }, 250);
@@ -287,9 +298,13 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
         image: this.image,
         canvas: this.canvas
       }), /*#__PURE__*/React.createElement(ApplyCancelActions, null, /*#__PURE__*/React.createElement(ButtonSecondary, {
-        onClick: this.cancelActiveTool
+        onClick: function onClick() {
+          _this3.cancelActiveTool();
+        }
       }, "Cancel"), "\xA0", /*#__PURE__*/React.createElement(ButtonPrimary, {
-        onClick: this.applyActiveTool
+        onClick: function onClick() {
+          _this3.applyActiveTool();
+        }
       }, "Apply"))) : /*#__PURE__*/React.createElement("div", {
         style: {
           textAlign: "center"

package/ImageEditor/ImageEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ImageEditor.tsx"],"names":["React","flip","filter","crop","rotate","styled","classNames","ButtonSecondary","ButtonPrimary","loadScript","toolbar","Toolbar","display","justifyContent","alignItems","backgroundColor","margin","padding","position","width","boxSizing","zIndex","opacity","pointerEvents","ToolOptions","borderTop","ApplyCancelActions","textAlign","initScripts","Promise","resolve","window","Caman","ImageEditor","tool","src","createRef","props","image","Image","canvas","current","onload","height","ctx","getContext","drawImage","setState","tt","onActivate","options","getToolOptions","startsWith","toDataURL","state","apply","deactivateTool","cancel","name","then","updateCanvas","setTimeout","key","option","autoEnable","activateTool","tools","children","editor","map","disabled","icon","renderForm","cancelActiveTool","applyActiveTool","maxWidth","render","getCanvasDataUrl","activeTool","Component"],"mappings":"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","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                                    onClick={() => {\n                                        this.cancelActiveTool();\n                                    }}\n                                >\n                                    Cancel\n                                </ButtonSecondary>\n                                &nbsp;\n                                <ButtonPrimary\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"]}

package/ImageEditor/index.js.map

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

package/ImageEditor/toolbar/crop.js

@@ -4,7 +4,7 @@ import { IconButton } from "../../Button";
 import { Tooltip } from "../../Tooltip";
 import Cropper from "cropperjs";
 import "cropperjs/dist/cropper.css";
-var cropper = null;
+var cropper = undefined;
 
 var renderForm = function renderForm() {
   return /*#__PURE__*/React.createElement("div", {
@@ -23,7 +23,9 @@ var tool = {
       content: "Crop"
     }, /*#__PURE__*/React.createElement(IconButton, {
       icon: /*#__PURE__*/React.createElement(CropIcon, null),
-      onClick: activateTool
+      onClick: function onClick() {
+        return activateTool("crop");
+      }
     }));
   },
   renderForm: renderForm,
@@ -62,7 +64,7 @@ var tool = {
       }
 
       cropper.destroy();
-      cropper = null;
+      cropper = undefined;
     });
   }
 };

package/ImageEditor/toolbar/crop.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["crop.tsx"],"names":["React","ReactComponent","CropIcon","IconButton","Tooltip","Cropper","cropper","undefined","renderForm","textAlign","tool","name","icon","activateTool","onActivate","canvas","options","current","cancel","destroy","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","width","height"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,cAAc,IAAIC,QAA3B;AACA,SAASC,UAAT;AACA,SAASC,OAAT;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAO,4BAAP;AAEA,IAAIC,OAA4B,GAAGC,SAAnC;;AAEA,IAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACrB,sBACI;AAAK,IAAA,KAAK,EAAE;AAAEC,MAAAA,SAAS,EAAE;AAAb;AAAZ,0FADJ;AAKH,CAND;;AAQA,IAAMC,IAAqB,GAAG;AAC1BC,EAAAA,IAAI,EAAE,MADoB;AAE1BC,EAAAA,IAF0B,sBAEH;AAAA,QAAhBC,YAAgB,QAAhBA,YAAgB;AACnB,wBACI,oBAAC,OAAD;AAAS,MAAA,SAAS,EAAE,QAApB;AAA8B,MAAA,OAAO,EAAE;AAAvC,oBACI,oBAAC,UAAD;AAAY,MAAA,IAAI,eAAE,oBAAC,QAAD,OAAlB;AAAgC,MAAA,OAAO,EAAE;AAAA,eAAMA,YAAY,CAAC,MAAD,CAAlB;AAAA;AAAzC,MADJ,CADJ;AAKH,GARyB;AAS1BL,EAAAA,UAAU,EAAVA,UAT0B;AAU1BM,EAAAA,UAAU,EAAE,2BAAyB;AAAA,QAAtBC,MAAsB,SAAtBA,MAAsB;AAAA,QAAdC,OAAc,SAAdA,OAAc;AACjCV,IAAAA,OAAO,GAAG,IAAID,OAAJ,CAAYU,MAAM,CAACE,OAAnB,EAAiDD,OAAjD,CAAV;AACH,GAZyB;AAa1BE,EAAAA,MAAM,EAAE;AAAA,WAAMZ,OAAO,IAAIA,OAAO,CAACa,OAAR,EAAjB;AAAA,GAbkB;AAc1BC,EAAAA,KAAK,EAAE,sBAAgB;AAAA,QAAbL,MAAa,SAAbA,MAAa;AACnB,WAAO,IAAIM,OAAJ,CAAY,UAACC,OAAD,EAAkB;AACjC,UAAI,CAAChB,OAAL,EAAc;AACVgB,QAAAA,OAAO;AACP;AACH;;AAED,UAAML,OAAO,GAAGF,MAAM,CAACE,OAAvB;AACA,UAAMM,GAAG,GAAGjB,OAAO,CAACkB,gBAAR,GAA2BC,SAA3B,EAAZ;;AACA,UAAIR,OAAJ,EAAa;AACT,YAAMS,KAAK,GAAG,IAAIC,MAAM,CAACC,KAAX,EAAd;AACA,YAAMC,GAAG,GAAGZ,OAAO,CAACa,UAAR,CAAmB,IAAnB,CAAZ;;AACAJ,QAAAA,KAAK,CAACK,MAAN,GAAe,YAAM;AACjBF,UAAAA,GAAG,CAACG,SAAJ,CAAcN,KAAd,EAAqB,CAArB,EAAwB,CAAxB;AACAT,UAAAA,OAAO,CAACgB,KAAR,GAAgBP,KAAK,CAACO,KAAtB;AACAhB,UAAAA,OAAO,CAACiB,MAAR,GAAiBR,KAAK,CAACQ,MAAvB;AAEAL,UAAAA,GAAG,CAACG,SAAJ,CAAcN,KAAd,EAAqB,CAArB,EAAwB,CAAxB;AACAJ,UAAAA,OAAO;AACV,SAPD;;AAQAI,QAAAA,KAAK,CAACH,GAAN,GAAYA,GAAZ;AACH;;AAEDjB,MAAAA,OAAO,CAACa,OAAR;AACAb,MAAAA,OAAO,GAAGC,SAAV;AACH,KAxBM,CAAP;AAyBH;AAxCyB,CAA9B;AA2CA,eAAeG,IAAf","sourcesContent":["import React from \"react\";\nimport { ImageEditorTool } from \"./types\";\nimport { ReactComponent as CropIcon } from \"./icons/crop.svg\";\nimport { IconButton } from \"~/Button\";\nimport { Tooltip } from \"~/Tooltip\";\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nlet cropper: Cropper | undefined = undefined;\n\nconst renderForm = () => {\n    return (\n        <div style={{ textAlign: \"center\" }}>\n            Click and drag to crop a portion of the image. Hold Shift to persist aspect ratio.\n        </div>\n    );\n};\n\nconst tool: ImageEditorTool = {\n    name: \"crop\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Crop\"}>\n                <IconButton icon={<CropIcon />} onClick={() => activateTool(\"crop\")} />\n            </Tooltip>\n        );\n    },\n    renderForm,\n    onActivate: ({ canvas, options }) => {\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, options);\n    },\n    cancel: () => cropper && cropper.destroy(),\n    apply: ({ canvas }) => {\n        return new Promise((resolve: any) => {\n            if (!cropper) {\n                resolve();\n                return;\n            }\n\n            const current = canvas.current;\n            const src = cropper.getCroppedCanvas().toDataURL();\n            if (current) {\n                const image = new window.Image();\n                const ctx = current.getContext(\"2d\") as CanvasRenderingContext2D;\n                image.onload = () => {\n                    ctx.drawImage(image, 0, 0);\n                    current.width = image.width;\n                    current.height = image.height;\n\n                    ctx.drawImage(image, 0, 0);\n                    resolve();\n                };\n                image.src = src;\n            }\n\n            cropper.destroy();\n            cropper = undefined;\n        });\n    }\n};\n\nexport default tool;\n"]}

package/ImageEditor/toolbar/filter.js

@@ -199,7 +199,9 @@ var tool = {
       content: "Filter"
     }, /*#__PURE__*/React.createElement(IconButton, {
       icon: /*#__PURE__*/React.createElement(FilterIcon, null),
-      onClick: activateTool
+      onClick: function onClick() {
+        return activateTool("filter");
+      }
     }));
   },
   renderForm: function renderForm(props) {

package/ImageEditor/toolbar/filter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["filter.tsx"],"names":["React","ReactComponent","FilterIcon","Slider","IconButton","ButtonDefault","Tooltip","styled","Wrapper","ul","textAlign","li","display","width","padding","sliders","key","label","min","RenderForm","processing","values","canvas","props","state","component","Caman","current","revert","Object","keys","forEach","render","setState","reduce","output","resetFiltersValues","map","value","applyFilters","Component","tool","name","icon","activateTool","renderForm","cancel"],"mappings":"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","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\";\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 icon={<FilterIcon />} onClick={() => activateTool(\"filter\")} />\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"]}

package/ImageEditor/toolbar/flip.js

@@ -4,7 +4,7 @@ import Cropper from "cropperjs";
 import "cropperjs/dist/cropper.css";
 import { IconButton, ButtonDefault } from "../../Button";
 import { Tooltip } from "../../Tooltip";
-var cropper = null;
+var cropper;
 var flipped = {
   x: 1,
   y: 1
@@ -45,7 +45,9 @@ var tool = {
       content: "Flip"
     }, /*#__PURE__*/React.createElement(IconButton, {
       icon: /*#__PURE__*/React.createElement(FlipIcon, null),
-      onClick: activateTool
+      onClick: function onClick() {
+        return activateTool("flip");
+      }
     }));
   },
   renderForm: renderForm,

package/ImageEditor/toolbar/flip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["flip.tsx"],"names":["React","ReactComponent","FlipIcon","Cropper","IconButton","ButtonDefault","Tooltip","cropper","flipped","x","y","renderForm","textAlign","scaleX","scaleY","tool","name","icon","activateTool","cancel","destroy","onActivate","canvas","current","background","modal","guides","dragMode","highlight","autoCrop","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","width","height"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { ImageEditorTool } from \"./types\";\nimport { ReactComponent as FlipIcon } from \"./icons/flip.svg\";\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nimport { IconButton, ButtonDefault } from \"../../Button\";\nimport { Tooltip } from \"~/Tooltip\";\n\nlet cropper: Cropper;\n\nconst flipped = { x: 1, y: 1 };\n\nconst renderForm = () => {\n    return (\n        <div style={{ textAlign: \"center\" }}>\n            <ButtonDefault\n                onClick={() => {\n                    if (!cropper) {\n                        return;\n                    }\n\n                    flipped.x = flipped.x === 1 ? -1 : 1;\n                    cropper.scaleX(flipped.x);\n                }}\n            >\n                FlipX\n            </ButtonDefault>\n            <ButtonDefault\n                onClick={() => {\n                    if (!cropper) {\n                        return;\n                    }\n\n                    flipped.y = flipped.y === 1 ? -1 : 1;\n                    cropper.scaleY(flipped.y);\n                }}\n            >\n                FlipY\n            </ButtonDefault>\n        </div>\n    );\n};\n\nconst tool: ImageEditorTool = {\n    name: \"flip\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Flip\"}>\n                <IconButton icon={<FlipIcon />} onClick={() => activateTool(\"flip\")} />\n            </Tooltip>\n        );\n    },\n    renderForm,\n    cancel: () => cropper && cropper.destroy(),\n    onActivate: ({ canvas }) => {\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, {\n            background: false,\n            modal: false,\n            guides: false,\n            dragMode: \"none\",\n            highlight: false,\n            autoCrop: false\n        });\n    },\n    apply: ({ canvas }) => {\n        return new Promise((resolve: any) => {\n            if (!cropper) {\n                resolve();\n                return;\n            }\n\n            const current = canvas.current;\n            const src = cropper.getCroppedCanvas().toDataURL();\n            if (current) {\n                const image = new window.Image();\n                const ctx = current.getContext(\"2d\") as CanvasRenderingContext2D;\n                image.onload = () => {\n                    ctx.drawImage(image, 0, 0);\n                    current.width = image.width;\n                    current.height = image.height;\n\n                    ctx.drawImage(image, 0, 0);\n                    resolve();\n                };\n                image.src = src;\n            }\n\n            cropper.destroy();\n        });\n    }\n};\n\nexport default tool;\n"]}

package/ImageEditor/toolbar/icons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["ReactComponent","CropIcon","DrawIcon","FilterIcon","FlipIcon","RedoIcon","RotateLeftIcon","RotateRightIcon","UndoIcon"],"mappings":"AAAA,SAASA,cAAc,IAAIC,QAA3B;AACA,SAASD,cAAc,IAAIE,QAA3B;AACA,SAASF,cAAc,IAAIG,UAA3B;AACA,SAASH,cAAc,IAAII,QAA3B;AACA,SAASJ,cAAc,IAAIK,QAA3B;AACA,SAASL,cAAc,IAAIM,cAA3B;AACA,SAASN,cAAc,IAAIO,eAA3B;AACA,SAASP,cAAc,IAAIQ,QAA3B","sourcesContent":["export { ReactComponent as CropIcon } from \"./crop.svg\";\nexport { ReactComponent as DrawIcon } from \"./draw.svg\";\nexport { ReactComponent as FilterIcon } from \"./filter.svg\";\nexport { ReactComponent as FlipIcon } from \"./flip.svg\";\nexport { ReactComponent as RedoIcon } from \"./redo.svg\";\nexport { ReactComponent as RotateLeftIcon } from \"./rotateLeft.svg\";\nexport { ReactComponent as RotateRightIcon } from \"./rotateRight.svg\";\nexport { ReactComponent as UndoIcon } from \"./undo.svg\";\n"]}

package/ImageEditor/toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["default","crop","flip","filter","rotate"],"mappings":"AAAA,SAASA,OAAO,IAAIC,IAApB;AACA,SAASD,OAAO,IAAIE,IAApB;AACA,SAASF,OAAO,IAAIG,MAApB;AACA,SAASH,OAAO,IAAII,MAApB","sourcesContent":["export { default as crop } from \"./crop\";\nexport { default as flip } from \"./flip\";\nexport { default as filter } from \"./filter\";\nexport { default as rotate } from \"./rotate\";\n"]}

package/ImageEditor/toolbar/rotate.js

@@ -13,7 +13,7 @@ import { Tooltip } from "../../Tooltip";
 import { IconButton } from "../../Button";
 import Cropper from "cropperjs";
 import "cropperjs/dist/cropper.css";
-var cropper = null;
+var cropper;
 
 var RenderForm = /*#__PURE__*/function (_React$Component) {
   _inherits(RenderForm, _React$Component);
@@ -92,7 +92,9 @@ var tool = {
       content: "Rotate"
     }, /*#__PURE__*/React.createElement(IconButton, {
       icon: /*#__PURE__*/React.createElement(RotateRight, null),
-      onClick: activateTool
+      onClick: function onClick() {
+        return activateTool("rotate");
+      }
     }));
   },
   renderForm: function renderForm(props) {
@@ -100,6 +102,10 @@ var tool = {
   },
   onActivate: function onActivate(_ref3) {
     var canvas = _ref3.canvas;
+
+    /**
+     * We can safely cast canvas.current as HTMLCanvasElement
+     */
     cropper = new Cropper(canvas.current, {
       background: false,
       modal: false,