@webiny/ui 0.0.0-unstable.8c4d9f045a → 0.0.0-unstable.fcdad0bc61

package/DelayedOnChange/DelayedOnChange.js

@@ -0,0 +1,129 @@
+"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.default = exports.DelayedOnChange = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _excluded = ["children"];
+
+var emptyFunction = function emptyFunction() {
+  return undefined;
+};
+
+var DelayedOnChange = function DelayedOnChange(_ref) {
+  var children = _ref.children,
+      other = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var onChange = other.onChange,
+      _other$delay = other.delay,
+      delay = _other$delay === void 0 ? 400 : _other$delay,
+      initialValue = other.value;
+
+  var _useState = (0, _react.useState)(initialValue),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1]; // Sync state and props
+
+
+  (0, _react.useEffect)(function () {
+    if (initialValue !== value) {
+      setValue(initialValue);
+    }
+  }, [initialValue]);
+
+  var localTimeout = _react.default.useRef(null);
+
+  var applyValue = function applyValue(value) {
+    var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : emptyFunction;
+    localTimeout.current && clearTimeout(localTimeout.current);
+    localTimeout.current = null;
+
+    if (!onChange) {
+      return;
+    }
+
+    onChange(value, callback);
+  };
+
+  var onChangeLocal = _react.default.useCallback(function (value) {
+    setValue(value);
+  }, []); // this is fired upon change value state
+
+
+  var onValueStateChanged = function onValueStateChanged(nextValue) {
+    localTimeout.current && clearTimeout(localTimeout.current);
+    localTimeout.current = null;
+    localTimeout.current = setTimeout(function () {
+      return applyValue(nextValue);
+    }, delay);
+  }; // need to clear the timeout when unmounting the component
+
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (!localTimeout.current) {
+        return;
+      }
+
+      clearTimeout(localTimeout.current);
+      localTimeout.current = null;
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    onValueStateChanged(value || "");
+  }, [value]);
+  var newProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, other), {}, {
+    value: value || "",
+    onChange: onChangeLocal
+  });
+  var renderProp = typeof children === "function" ? children : null;
+  var child = renderProp ? renderProp(newProps) : /*#__PURE__*/_react.default.cloneElement(children, newProps);
+  var props = (0, _objectSpread2.default)({}, child.props);
+  var realOnKeyDown = props.onKeyDown || emptyFunction;
+  var realOnBlur = props.onBlur || emptyFunction; // Need to apply value if input lost focus
+
+  var onBlur = function onBlur(ev) {
+    ev.persist();
+    applyValue(ev.target.value, function () {
+      return realOnBlur(ev);
+    });
+  }; // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.
+
+
+  var onKeyDown = function onKeyDown(ev) {
+    ev.persist();
+
+    if (ev.key === "Tab") {
+      applyValue(ev.target.value, function () {
+        return realOnKeyDown(ev);
+      });
+    } else if (ev.key === "Enter" && props["data-on-enter"]) {
+      applyValue(ev.target.value, function () {
+        return realOnKeyDown(ev);
+      });
+    } else {
+      realOnKeyDown(ev);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.cloneElement(child, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    onBlur: onBlur,
+    onKeyDown: onKeyDown
+  }));
+};
+
+exports.DelayedOnChange = DelayedOnChange;
+var _default = DelayedOnChange;
+exports.default = _default;

package/DelayedOnChange/DelayedOnChange.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["emptyFunction","undefined","DelayedOnChange","children","other","onChange","delay","initialValue","value","useState","setValue","useEffect","localTimeout","React","useRef","applyValue","callback","current","clearTimeout","onChangeLocal","useCallback","onValueStateChanged","nextValue","setTimeout","newProps","renderProp","child","cloneElement","props","realOnKeyDown","onKeyDown","realOnBlur","onBlur","ev","persist","target","key"],"sources":["DelayedOnChange.ts"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nconst emptyFunction = (): undefined => {\n    return undefined;\n};\n\ninterface ApplyValueCb {\n    (value: string, cb: (value: string) => void): void;\n}\n/**\n * This component is used to wrap Input and Textarea components to optimize form re-render.\n * These 2 are the only components that trigger form model change on each character input.\n * This means, whenever you type a letter an entire form re-renders.\n * On complex forms you will feel and see a significant delay if this component is not used.\n *\n * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when\n * a user stops typing for given period of time (400ms by default).\n */\ninterface OnChangeCallable {\n    (value: string, cb?: ApplyValueCb): void;\n}\ninterface OnBlurCallable {\n    (ev: React.SyntheticEvent): void;\n}\ninterface OnKeyDownCallable {\n    (ev: React.KeyboardEvent<HTMLInputElement>): void;\n}\ninterface ChildrenCallableParams {\n    value: string;\n    onChange: OnChangeCallable;\n}\ninterface ChildrenCallable {\n    (params: ChildrenCallableParams): React.ReactElement;\n}\nexport interface DelayedOnChangeProps {\n    value?: string;\n    delay?: number;\n    onChange?: OnChangeCallable;\n    onBlur?: OnBlurCallable;\n    onKeyDown?: OnKeyDownCallable;\n    children: React.ReactNode | ChildrenCallable;\n}\nexport const DelayedOnChange: React.FC<DelayedOnChangeProps> = ({ children, ...other }) => {\n    const { onChange, delay = 400, value: initialValue } = other;\n    const [value, setValue] = useState<string | undefined>(initialValue);\n    // Sync state and props\n    useEffect(() => {\n        if (initialValue !== value) {\n            setValue(initialValue);\n        }\n    }, [initialValue]);\n\n    const localTimeout = React.useRef<number | null>(null);\n\n    const applyValue = (value: string, callback: ApplyValueCb = emptyFunction) => {\n        localTimeout.current && clearTimeout(localTimeout.current);\n        localTimeout.current = null;\n        if (!onChange) {\n            return;\n        }\n        onChange(value, callback);\n    };\n\n    const onChangeLocal = React.useCallback((value: string) => {\n        setValue(value);\n    }, []);\n\n    // this is fired upon change value state\n    const onValueStateChanged = (nextValue: string) => {\n        localTimeout.current && clearTimeout(localTimeout.current);\n        localTimeout.current = null;\n        localTimeout.current = setTimeout(() => applyValue(nextValue), delay) as unknown as number;\n    };\n\n    // need to clear the timeout when unmounting the component\n    useEffect(() => {\n        return () => {\n            if (!localTimeout.current) {\n                return;\n            }\n            clearTimeout(localTimeout.current);\n            localTimeout.current = null;\n        };\n    }, []);\n\n    useEffect(() => {\n        onValueStateChanged(value || \"\");\n    }, [value]);\n\n    const newProps = {\n        ...other,\n        value: value || \"\",\n        onChange: onChangeLocal\n    };\n\n    const renderProp = typeof children === \"function\" ? (children as ChildrenCallable) : null;\n    const child = renderProp\n        ? renderProp(newProps)\n        : React.cloneElement(children as unknown as React.ReactElement, newProps);\n\n    const props = { ...child.props };\n    const realOnKeyDown = props.onKeyDown || emptyFunction;\n    const realOnBlur = props.onBlur || emptyFunction;\n\n    // Need to apply value if input lost focus\n    const onBlur: OnBlurCallable = ev => {\n        ev.persist();\n        applyValue((ev.target as HTMLInputElement).value, () => realOnBlur(ev));\n    };\n\n    // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.\n    const onKeyDown: OnKeyDownCallable = ev => {\n        ev.persist();\n        if (ev.key === \"Tab\") {\n            applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n        } else if (ev.key === \"Enter\" && props[\"data-on-enter\"]) {\n            applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n        } else {\n            realOnKeyDown(ev);\n        }\n    };\n\n    return React.cloneElement(child, { ...props, onBlur, onKeyDown });\n};\n\nexport default DelayedOnChange;\n"],"mappings":"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"}

package/DelayedOnChange/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DelayedOnChange } from "./DelayedOnChange";
+export { default as withDelayedOnChange } from "./withDelayedOnChange";

package/DelayedOnChange/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DelayedOnChange", {
+  enumerable: true,
+  get: function get() {
+    return _DelayedOnChange.default;
+  }
+});
+Object.defineProperty(exports, "withDelayedOnChange", {
+  enumerable: true,
+  get: function get() {
+    return _withDelayedOnChange.default;
+  }
+});
+
+var _DelayedOnChange = _interopRequireDefault(require("./DelayedOnChange"));
+
+var _withDelayedOnChange = _interopRequireDefault(require("./withDelayedOnChange"));

package/DelayedOnChange/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as DelayedOnChange } from \"./DelayedOnChange\";\nexport { default as withDelayedOnChange } from \"./withDelayedOnChange\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA"}

package/DelayedOnChange/withDelayedOnChange.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { DelayedOnChangeProps } from "./DelayedOnChange";
+export default function withDelayedOnChange(): (Component: React.FC<DelayedOnChangeProps>) => (props: DelayedOnChangeProps) => JSX.Element;

package/DelayedOnChange/withDelayedOnChange.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = withDelayedOnChange;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DelayedOnChange = _interopRequireDefault(require("./DelayedOnChange"));
+
+var _excluded = ["value", "onChange"];
+
+function withDelayedOnChange() {
+  return function decorator(Component) {
+    return function WithDelayedOnChange(props) {
+      var value = props.value,
+          onChange = props.onChange,
+          rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+      return /*#__PURE__*/_react.default.createElement(_DelayedOnChange.default, {
+        value: value,
+        onChange: onChange
+      }, function (_ref) {
+        var value = _ref.value,
+            onChange = _ref.onChange;
+        return /*#__PURE__*/_react.default.createElement(Component, Object.assign({}, rest, {
+          value: value,
+          onChange: onChange
+        }));
+      });
+    };
+  };
+}

package/DelayedOnChange/withDelayedOnChange.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["withDelayedOnChange","decorator","Component","WithDelayedOnChange","props","value","onChange","rest"],"sources":["withDelayedOnChange.tsx"],"sourcesContent":["import React from \"react\";\nimport Delayed, { DelayedOnChangeProps } from \"./DelayedOnChange\";\n\nexport default function withDelayedOnChange() {\n    return function decorator(Component: React.FC<DelayedOnChangeProps>) {\n        return function WithDelayedOnChange(props: DelayedOnChangeProps) {\n            const { value, onChange, ...rest } = props;\n            return (\n                <Delayed value={value} onChange={onChange}>\n                    {({ value, onChange }) => (\n                        <Component {...rest} value={value} onChange={onChange} />\n                    )}\n                </Delayed>\n            );\n        };\n    };\n}\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEe,SAASA,mBAAT,GAA+B;EAC1C,OAAO,SAASC,SAAT,CAAmBC,SAAnB,EAA8D;IACjE,OAAO,SAASC,mBAAT,CAA6BC,KAA7B,EAA0D;MAC7D,IAAQC,KAAR,GAAqCD,KAArC,CAAQC,KAAR;MAAA,IAAeC,QAAf,GAAqCF,KAArC,CAAeE,QAAf;MAAA,IAA4BC,IAA5B,0CAAqCH,KAArC;MACA,oBACI,6BAAC,wBAAD;QAAS,KAAK,EAAEC,KAAhB;QAAuB,QAAQ,EAAEC;MAAjC,GACK;QAAA,IAAGD,KAAH,QAAGA,KAAH;QAAA,IAAUC,QAAV,QAAUA,QAAV;QAAA,oBACG,6BAAC,SAAD,oBAAeC,IAAf;UAAqB,KAAK,EAAEF,KAA5B;UAAmC,QAAQ,EAAEC;QAA7C,GADH;MAAA,CADL,CADJ;IAOH,CATD;EAUH,CAXD;AAYH"}

package/Image/Image.js

@@ -9,10 +9,12 @@ exports.Image = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var Image = function Image(_ref) {
-  var rest = Object.assign({}, _ref);
+  var rest = Object.assign({}, ((0, _objectDestructuringEmpty2.default)(_ref), _ref));
   var finalProps = (0, _objectSpread2.default)({}, rest);
   var srcSet = finalProps.srcSet;
 

package/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["Image","rest","finalProps","srcSet","Object","keys","map","key","join"],"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;;AAQA,IAAMA,KAAsB,GAAG,SAAzBA,KAAyB,OAAiB;EAAA,IAAXC,IAAW;EAC5C,IAAMC,UAAU,mCAAQD,IAAR,CAAhB;EACA,IAAME,MAAM,GAAGD,UAAU,CAACC,MAA1B;;EACA,IAAIA,MAAM,IAAI,OAAOA,MAAP,KAAkB,QAAhC,EAA0C;IACtCD,UAAU,CAACC,MAAX,GAAoBC,MAAM,CAACC,IAAP,CAAYF,MAAZ,EACfG,GADe,CACX,UAAAC,GAAG;MAAA,iBAAOJ,MAAM,CAACI,GAAD,CAAb,cAAsBA,GAAtB;IAAA,CADQ,EAEfC,IAFe,CAEV,IAFU,CAApB;EAGH;;EAED,oBAAO,oCAASN,UAAT,CAAP;AACH,CAVD"}
+{"version":3,"names":["Image","rest","finalProps","srcSet","Object","keys","map","key","join"],"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;;AAQA,IAAMA,KAAsB,GAAG,SAAzBA,KAAyB,OAAiB;EAAA,IAAXC,IAAW;EAC5C,IAAMC,UAAU,mCAAQD,IAAR,CAAhB;EACA,IAAME,MAAM,GAAGD,UAAU,CAACC,MAA1B;;EACA,IAAIA,MAAM,IAAI,OAAOA,MAAP,KAAkB,QAAhC,EAA0C;IACtCD,UAAU,CAACC,MAAX,GAAoBC,MAAM,CAACC,IAAP,CAAYF,MAAZ,EACfG,GADe,CACX,UAAAC,GAAG;MAAA,iBAAOJ,MAAM,CAACI,GAAD,CAAb,cAAsBA,GAAtB;IAAA,CADQ,EAEfC,IAFe,CAEV,IAFU,CAApB;EAGH;;EAED,oBAAO,oCAASN,UAAT,CAAP;AACH,CAVD"}

package/ImageUpload/styled.d.ts

@@ -7,15 +7,15 @@ export declare const AddImageWrapperRound: import("@emotion/styled-base").Styled
     theme?: object | undefined;
 } & {
     children?: import("react").ReactNode;
-}, "key" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "theme"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     theme?: object | undefined;
 } & {
     children?: import("react").ReactNode;
-}, "key" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "theme"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+}, keyof import("react").HTMLAttributes<HTMLDivElement> | "theme">, object>;
 export declare const RemoveImage: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
 export declare const EditImage: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
 export declare const ImagePreviewWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;

package/List/DataList/Loader.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
-declare const Loader: React.FC;
+import { ReactElement } from "react";
+declare const Loader: () => ReactElement;
 export default Loader;

package/List/DataList/Loader.js

@@ -11,62 +11,48 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
+var _Skeleton = require("../../Skeleton");
 
-/**
- * Package react-loading-skeleton does not have types.
- */
-// @ts-ignore
 var LoaderUl = /*#__PURE__*/(0, _styled.default)("ul", {
-  target: "e1nb7uzc0",
-  label: "LoaderUl"
-})({
-  listStyle: "none",
-  padding: "10px 20px",
-  "li > div": {
-    display: "inline-block",
-    verticalAlign: "middle",
-    ".react-loading-skeleton": {
-      backgroundColor: "var(--mdc-theme-background)",
-      backgroundImage: "linear-gradient(90deg, var(--mdc-theme-background), var(--mdc-theme-surface), var(--mdc-theme-background))"
-    }
-  },
-  ".graphic": {
-    fontSize: 36,
-    width: 36
-  },
-  ".data": {
-    width: "calc(-36px + 75%)",
-    marginLeft: 10
-  },
-  ".actions": {
-    width: "calc(-36px + 25%)",
-    marginLeft: 10,
-    textAlign: "right",
-    "> div": {
-      display: "inline-block",
-      fontSize: 24,
-      marginLeft: 10,
-      width: 24
-    }
-  }
-});
+  label: "LoaderUl",
+  target: "e1nb7uzc0"
+})("list-style:none;padding:24px 20px;");
+var LoaderWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "LoaderWrapper",
+  target: "e1nb7uzc1"
+})("margin-bottom:16px;display:flex;width:100%;align-items:center;justify-content:space-around;");
+var Graphic = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Graphic",
+  target: "e1nb7uzc2"
+})("width:36px;");
+var Data = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Data",
+  target: "e1nb7uzc3"
+})("width:calc(-42px + 75%);.data-skeleton-container{height:36px;display:flex;flex-direction:column;justify-content:space-between;}");
+var Actions = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Actions",
+  target: "e1nb7uzc4"
+})("width:calc(-42px + 25%);margin-left:10px;text-align:right;.actions-skeleton-container{height:24px;display:flex;justify-content:end;}.actions-skeleton{width:24px;height:24px;margin-left:16px;}");
 
 var Loader = function Loader() {
+  var lines = Array.from(Array(5).keys());
   return /*#__PURE__*/_react.default.createElement(LoaderUl, {
     "data-testid": "default-data-list.loading"
-  }, [1, 2, 3, 4, 5].map(function (item) {
+  }, lines.map(function (line) {
     return /*#__PURE__*/_react.default.createElement("li", {
-      key: "list-" + item
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "graphic"
-    }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, null)), /*#__PURE__*/_react.default.createElement("div", {
-      className: "data"
-    }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-      count: 2
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "actions"
-    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, null)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, null))));
+      key: "list-" + line
+    }, /*#__PURE__*/_react.default.createElement(LoaderWrapper, null, /*#__PURE__*/_react.default.createElement(Graphic, null, /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, {
+      height: 36
+    })), /*#__PURE__*/_react.default.createElement(Data, null, /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, {
+      inline: true,
+      count: 2,
+      containerClassName: "data-skeleton-container"
+    })), /*#__PURE__*/_react.default.createElement(Actions, null, /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, {
+      inline: true,
+      count: 2,
+      className: "actions-skeleton",
+      containerClassName: "actions-skeleton-container"
+    }))));
   }));
 };
 

package/List/DataList/Loader.js.map

@@ -1 +1 @@
-{"version":3,"names":["LoaderUl","styled","listStyle","padding","display","verticalAlign","backgroundColor","backgroundImage","fontSize","width","marginLeft","textAlign","Loader","map","item"],"sources":["Loader.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\n/**\n * Package react-loading-skeleton does not have types.\n */\n// @ts-ignore\nimport Skeleton from \"react-loading-skeleton\";\n\nconst LoaderUl = styled(\"ul\")({\n    listStyle: \"none\",\n    padding: \"10px 20px\",\n    \"li > div\": {\n        display: \"inline-block\",\n        verticalAlign: \"middle\",\n        \".react-loading-skeleton\": {\n            backgroundColor: \"var(--mdc-theme-background)\",\n            backgroundImage:\n                \"linear-gradient(90deg, var(--mdc-theme-background), var(--mdc-theme-surface), var(--mdc-theme-background))\"\n        }\n    },\n    \".graphic\": {\n        fontSize: 36,\n        width: 36\n    },\n    \".data\": {\n        width: \"calc(-36px + 75%)\",\n        marginLeft: 10\n    },\n    \".actions\": {\n        width: \"calc(-36px + 25%)\",\n        marginLeft: 10,\n        textAlign: \"right\",\n        \"> div\": {\n            display: \"inline-block\",\n            fontSize: 24,\n            marginLeft: 10,\n            width: 24\n        }\n    }\n});\n\nconst Loader: React.FC = () => (\n    <LoaderUl data-testid={\"default-data-list.loading\"}>\n        {[1, 2, 3, 4, 5].map(item => (\n            <li key={\"list-\" + item}>\n                <div className=\"graphic\">\n                    <Skeleton />\n                </div>\n                <div className=\"data\">\n                    <Skeleton count={2} />\n                </div>\n                <div className=\"actions\">\n                    <div>\n                        <Skeleton />\n                    </div>\n                    <div>\n                        <Skeleton />\n                    </div>\n                </div>\n            </li>\n        ))}\n    </LoaderUl>\n);\n\nexport default Loader;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAKA;;AAJA;AACA;AACA;AACA;AAGA,IAAMA,QAAQ,oBAAGC,eAAH,EAAU,IAAV;EAAA;EAAA;AAAA,GAAgB;EAC1BC,SAAS,EAAE,MADe;EAE1BC,OAAO,EAAE,WAFiB;EAG1B,YAAY;IACRC,OAAO,EAAE,cADD;IAERC,aAAa,EAAE,QAFP;IAGR,2BAA2B;MACvBC,eAAe,EAAE,6BADM;MAEvBC,eAAe,EACX;IAHmB;EAHnB,CAHc;EAY1B,YAAY;IACRC,QAAQ,EAAE,EADF;IAERC,KAAK,EAAE;EAFC,CAZc;EAgB1B,SAAS;IACLA,KAAK,EAAE,mBADF;IAELC,UAAU,EAAE;EAFP,CAhBiB;EAoB1B,YAAY;IACRD,KAAK,EAAE,mBADC;IAERC,UAAU,EAAE,EAFJ;IAGRC,SAAS,EAAE,OAHH;IAIR,SAAS;MACLP,OAAO,EAAE,cADJ;MAELI,QAAQ,EAAE,EAFL;MAGLE,UAAU,EAAE,EAHP;MAILD,KAAK,EAAE;IAJF;EAJD;AApBc,CAAhB,CAAd;;AAiCA,IAAMG,MAAgB,GAAG,SAAnBA,MAAmB;EAAA,oBACrB,6BAAC,QAAD;IAAU,eAAa;EAAvB,GACK,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,EAAU,CAAV,EAAa,CAAb,EAAgBC,GAAhB,CAAoB,UAAAC,IAAI;IAAA,oBACrB;MAAI,GAAG,EAAE,UAAUA;IAAnB,gBACI;MAAK,SAAS,EAAC;IAAf,gBACI,6BAAC,6BAAD,OADJ,CADJ,eAII;MAAK,SAAS,EAAC;IAAf,gBACI,6BAAC,6BAAD;MAAU,KAAK,EAAE;IAAjB,EADJ,CAJJ,eAOI;MAAK,SAAS,EAAC;IAAf,gBACI,uDACI,6BAAC,6BAAD,OADJ,CADJ,eAII,uDACI,6BAAC,6BAAD,OADJ,CAJJ,CAPJ,CADqB;EAAA,CAAxB,CADL,CADqB;AAAA,CAAzB;;eAuBeF,M"}
+{"version":3,"names":["LoaderUl","styled","LoaderWrapper","Graphic","Data","Actions","Loader","lines","Array","from","keys","map","line"],"sources":["Loader.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { Skeleton } from \"~/Skeleton\";\n\nconst LoaderUl = styled(\"ul\")`\n    list-style: none;\n    padding: 24px 20px;\n`;\n\nconst LoaderWrapper = styled(\"div\")`\n    margin-bottom: 16px;\n    display: flex;\n    width: 100%;\n    align-items: center;\n    justify-content: space-around;\n`;\n\nconst Graphic = styled(\"div\")`\n    width: 36px;\n`;\n\nconst Data = styled(\"div\")`\n    width: calc(-42px + 75%);\n\n    .data-skeleton-container {\n        height: 36px;\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n    }\n`;\n\nconst Actions = styled(\"div\")`\n    width: calc(-42px + 25%);\n    margin-left: 10px;\n    text-align: right;\n\n    .actions-skeleton-container {\n        height: 24px;\n        display: flex;\n        justify-content: end;\n    }\n\n    .actions-skeleton {\n        width: 24px;\n        height: 24px;\n        margin-left: 16px;\n    }\n`;\n\nconst Loader = (): ReactElement => {\n    const lines = Array.from(Array(5).keys());\n\n    return (\n        <LoaderUl data-testid={\"default-data-list.loading\"}>\n            {lines.map(line => (\n                <li key={\"list-\" + line}>\n                    <LoaderWrapper>\n                        <Graphic>\n                            <Skeleton height={36} />\n                        </Graphic>\n                        <Data>\n                            <Skeleton\n                                inline={true}\n                                count={2}\n                                containerClassName={\"data-skeleton-container\"}\n                            />\n                        </Data>\n                        <Actions>\n                            <Skeleton\n                                inline={true}\n                                count={2}\n                                className={\"actions-skeleton\"}\n                                containerClassName={\"actions-skeleton-container\"}\n                            />\n                        </Actions>\n                    </LoaderWrapper>\n                </li>\n            ))}\n        </LoaderUl>\n    );\n};\n\nexport default Loader;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AAEA,IAAMA,QAAQ,oBAAGC,eAAH,EAAU,IAAV;EAAA;EAAA;AAAA,wCAAd;AAKA,IAAMC,aAAa,oBAAGD,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,iGAAnB;AAQA,IAAME,OAAO,oBAAGF,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,iBAAb;AAIA,IAAMG,IAAI,oBAAGH,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,qIAAV;AAWA,IAAMI,OAAO,oBAAGJ,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,qMAAb;;AAkBA,IAAMK,MAAM,GAAG,SAATA,MAAS,GAAoB;EAC/B,IAAMC,KAAK,GAAGC,KAAK,CAACC,IAAN,CAAWD,KAAK,CAAC,CAAD,CAAL,CAASE,IAAT,EAAX,CAAd;EAEA,oBACI,6BAAC,QAAD;IAAU,eAAa;EAAvB,GACKH,KAAK,CAACI,GAAN,CAAU,UAAAC,IAAI;IAAA,oBACX;MAAI,GAAG,EAAE,UAAUA;IAAnB,gBACI,6BAAC,aAAD,qBACI,6BAAC,OAAD,qBACI,6BAAC,kBAAD;MAAU,MAAM,EAAE;IAAlB,EADJ,CADJ,eAII,6BAAC,IAAD,qBACI,6BAAC,kBAAD;MACI,MAAM,EAAE,IADZ;MAEI,KAAK,EAAE,CAFX;MAGI,kBAAkB,EAAE;IAHxB,EADJ,CAJJ,eAWI,6BAAC,OAAD,qBACI,6BAAC,kBAAD;MACI,MAAM,EAAE,IADZ;MAEI,KAAK,EAAE,CAFX;MAGI,SAAS,EAAE,kBAHf;MAII,kBAAkB,EAAE;IAJxB,EADJ,CAXJ,CADJ,CADW;EAAA,CAAd,CADL,CADJ;AA4BH,CA/BD;;eAiCeN,M"}

package/Skeleton/README.md

@@ -0,0 +1,21 @@
+# Skeleton
+
+### Additional information
+
+[https://www.npmjs.com/package/react-loading-skeleton](https://www.npmjs.com/package/react-loading-skeleton)
+
+### Description
+
+`Skeleton` component is used to render animated loading skeletons within Webiny.
+
+### Usage
+
+```jsx
+import { Skeleton } from "@webiny/ui/Skeleton";
+
+...
+
+return (
+    <Skeleton />
+)
+```

package/Skeleton/Skeleton.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from "react";
+import { SkeletonProps } from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+export declare const Skeleton: (props: SkeletonProps) => ReactElement;

package/Skeleton/Skeleton.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Skeleton = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactLoadingSkeleton = _interopRequireWildcard(require("react-loading-skeleton"));
+
+require("react-loading-skeleton/dist/skeleton.css");
+
+var Skeleton = function Skeleton(props) {
+  return /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.SkeletonTheme, {
+    baseColor: "var(--mdc-theme-background)",
+    highlightColor: "var(--mdc-theme-surface)"
+  }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, props));
+};
+
+exports.Skeleton = Skeleton;

package/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Skeleton","props"],"sources":["Skeleton.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport ReactLoadingSkeleton, { SkeletonProps, SkeletonTheme } from \"react-loading-skeleton\";\n\nimport \"react-loading-skeleton/dist/skeleton.css\";\n\nexport const Skeleton = (props: SkeletonProps): ReactElement => {\n    return (\n        <SkeletonTheme\n            baseColor={\"var(--mdc-theme-background)\"}\n            highlightColor={\"var(--mdc-theme-surface)\"}\n        >\n            <ReactLoadingSkeleton {...props} />\n        </SkeletonTheme>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AAEO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAwC;EAC5D,oBACI,6BAAC,mCAAD;IACI,SAAS,EAAE,6BADf;IAEI,cAAc,EAAE;EAFpB,gBAII,6BAAC,6BAAD,EAA0BA,KAA1B,CAJJ,CADJ;AAQH,CATM"}

package/Skeleton/Skeleton.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/Skeleton/Skeleton.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _README = _interopRequireDefault(require("./../Skeleton/README.md"));
+
+var _Skeleton = require("./Skeleton");
+
+var story = (0, _react2.storiesOf)("Components/Skeleton", module);
+story.add("usage", function () {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "A simple loading Skeleton, single line"
+  }, /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, null)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "A loading Skeleton, with 3 lines"
+  }, /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, {
+    count: 3
+  })));
+}, {
+  info: {
+    propTables: [_Skeleton.Skeleton]
+  }
+});

package/Skeleton/Skeleton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Skeleton"],"sources":["Skeleton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Skeleton/README.md\";\nimport { Skeleton } from \"./Skeleton\";\n\nconst story = storiesOf(\"Components/Skeleton\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple loading Skeleton, single line\"}>\n                    <Skeleton />\n                </StorySandbox>\n                <StorySandbox title={\"A loading Skeleton, with 3 lines\"}>\n                    <Skeleton count={3} />\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Skeleton] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,qBAAV,EAAiCC,MAAjC,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,kBAAD,OADJ,CAFJ,eAKI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,kBAAD;IAAU,KAAK,EAAE;EAAjB,EADJ,CALJ,CADJ;AAWH,CAdL,EAeI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,kBAAD;EAAd;AAAR,CAfJ"}

package/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from "./Skeleton";

package/Skeleton/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Skeleton = require("./Skeleton");
+
+Object.keys(_Skeleton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Skeleton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Skeleton[key];
+    }
+  });
+});

package/Skeleton/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/ui",
-	"version": "0.0.0-unstable.8c4d9f045a",
+	"version": "0.0.0-unstable.fcdad0bc61",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -14,13 +14,14 @@
 	],
 	"license": "MIT",
 	"dependencies": {
-		"@babel/runtime": "7.18.9",
+		"@babel/runtime": "7.19.0",
 		"@editorjs/editorjs": "2.25.0",
 		"@emotion/core": "10.3.1",
 		"@emotion/styled": "10.3.0",
 		"@rmwc/button": "7.0.3",
 		"@rmwc/checkbox": "7.0.3",
 		"@rmwc/chip": "7.0.3",
+		"@rmwc/data-table": "7.0.3",
 		"@rmwc/dialog": "7.0.3",
 		"@rmwc/drawer": "7.0.3",
 		"@rmwc/elevation": "7.0.3",
@@ -39,9 +40,10 @@
 		"@rmwc/textfield": "7.0.3",
 		"@rmwc/top-app-bar": "7.0.3",
 		"@rmwc/typography": "7.0.3",
-		"@svgr/webpack": "6.3.1",
+		"@svgr/webpack": "6.4.0",
+		"@tanstack/react-table": "8.5.22",
 		"brace": "0.11.1",
-		"classnames": "2.3.1",
+		"classnames": "2.3.2",
 		"cropperjs": "1.5.12",
 		"dot-prop-immutable": "2.1.1",
 		"downshift": "2.2.3",
@@ -58,33 +60,32 @@
 		"react-color": "2.19.3",
 		"react-columned": "1.1.3",
 		"react-custom-scrollbars": "4.2.1",
-		"react-loading-skeleton": "0.5.0",
+		"react-loading-skeleton": "3.1.0",
 		"react-spinner-material": "1.1.4",
 		"react-transition-group": "4.4.5",
 		"shortid": "2.2.16"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.16.0",
-		"@babel/core": "^7.16.0",
-		"@babel/plugin-proposal-class-properties": "^7.16.0",
-		"@babel/preset-env": "^7.16.4",
-		"@babel/preset-typescript": "^7.16.0",
+		"@babel/cli": "^7.19.3",
+		"@babel/core": "^7.19.3",
+		"@babel/plugin-proposal-class-properties": "^7.18.6",
+		"@babel/preset-env": "^7.19.4",
+		"@babel/preset-typescript": "^7.18.6",
 		"@storybook/addon-info": "^5.2.8",
 		"@storybook/addon-knobs": "^5.0.5",
 		"@storybook/addon-links": "^5.0.5",
 		"@storybook/react": "^5.2.8",
 		"@testing-library/react": "^12.1.2",
-		"@types/classnames": "^2.2.7",
 		"@types/nprogress": "^0.2.0",
 		"@types/rc-tooltip": "^3.7.2",
 		"@types/react-custom-scrollbars": "^4.0.10",
 		"@types/react-transition-group": "^4.4.4",
 		"@types/shortid": "^0.0.29",
-		"@webiny/cli": "^0.0.0-unstable.8c4d9f045a",
-		"@webiny/form": "^0.0.0-unstable.8c4d9f045a",
-		"@webiny/project-utils": "^0.0.0-unstable.8c4d9f045a",
-		"@webiny/storybook-utils": "^0.0.0-unstable.8c4d9f045a",
-		"@webiny/validation": "^0.0.0-unstable.8c4d9f045a",
+		"@webiny/cli": "^0.0.0-unstable.fcdad0bc61",
+		"@webiny/form": "^0.0.0-unstable.fcdad0bc61",
+		"@webiny/project-utils": "^0.0.0-unstable.fcdad0bc61",
+		"@webiny/storybook-utils": "^0.0.0-unstable.fcdad0bc61",
+		"@webiny/validation": "^0.0.0-unstable.fcdad0bc61",
 		"babel-loader": "^8.0.0-beta.6",
 		"babel-plugin-emotion": "^9.2.8",
 		"execa": "^5.0.0",
@@ -130,5 +131,5 @@
 			]
 		}
 	},
-	"gitHead": "5f904a53a5956269bd80a9c084cc04f92b824d36"
+	"gitHead": "40d639c3665e384a5e2d26674d43ce26f3295e8c"
 }