@zohodesk/components 1.0.0-alpha-222 → 1.0.0-alpha-226

package/lib/ListItem/ListItemWithCheckBox.js

@@ -11,12 +11,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _ListContainer = _interopRequireDefault(require("./ListContainer"));
+
 var _CheckBox = _interopRequireDefault(require("../CheckBox/CheckBox"));
 
 var _Layout = require("../Layout");
 
-var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
-
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -105,39 +105,35 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           isDisabled = _this$props4.isDisabled,
           disableTitle = _this$props4.disableTitle,
           a11y = _this$props4.a11y,
-          customClass = _this$props4.customClass;
-      var role = a11y.role,
-          ariaSelected = a11y.ariaSelected;
+          customClass = _this$props4.customClass,
+          customProps = _this$props4.customProps;
+      var _customProps$ListItem = customProps.ListItemProps,
+          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
+          _customProps$Containe = customProps.ContainerProps,
+          ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe;
       var _customClass$customLi = customClass.customListItem,
           customListItem = _customClass$customLi === void 0 ? '' : _customClass$customLi,
           _customClass$customCh = customClass.customCheckBox,
           customCheckBox = _customClass$customCh === void 0 ? '' : _customClass$customCh,
           _customClass$customLa = customClass.customLabel,
           customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa;
-      var options = {};
-
-      if (active) {
-        options['data-selected'] = active;
-      }
-
-      if (!isDisabled && active) {
-        options.tabindex = '0';
-      }
-
-      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
-        role: role,
-        "aria-selected": ariaSelected,
-        isCover: false,
-        align: "vertical",
-        alignBox: "row",
-        className: "".concat(_ListItemModule["default"].list, " ").concat(_ListItemModule["default"][size], " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"]["active".concat(palette)] : highlight && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Hover")] : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Effect")] : '', " \n        ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(customListItem),
+      return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
+        a11y: a11y,
+        size: size,
+        palette: palette,
+        highlight: highlight,
+        isDisabled: isDisabled,
+        active: active,
+        autoHover: autoHover,
+        customClass: customListItem,
         dataId: "".concat(dataId ? dataId : value, "_ListItemWithCheckBox"),
-        onClick: !isDisabled && this.onClick,
+        onClick: this.onClick,
         onMouseOver: this.onHover,
         eleRef: this.getRef,
-        tagName: "li",
-        "data-title": isDisabled ? disableTitle : null
-      }, options), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        disableTitle: disableTitle,
+        title: null,
+        customProps: ListItemProps
+      }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].iconBox
       }, /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
         checked: checked,
@@ -170,7 +166,8 @@ ListItemWithCheckBox.defaultProps = {
   size: 'medium',
   value: 'List',
   a11y: {},
-  customClass: {}
+  customClass: {},
+  customProps: {}
 };
 ListItemWithCheckBox.propTypes = {
   active: _propTypes["default"].bool,

package/lib/ListItem/ListItemWithIcon.js

@@ -15,7 +15,7 @@ var _Layout = require("../Layout");
 
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
-var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
+var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
@@ -106,6 +106,9 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
           dataId = _this$props4.dataId,
           title = _this$props4.title,
           needTick = _this$props4.needTick,
+          isLink = _this$props4.isLink,
+          href = _this$props4.href,
+          target = _this$props4.target,
           needBorder = _this$props4.needBorder,
           isDisabled = _this$props4.isDisabled,
           disableTitle = _this$props4.disableTitle,
@@ -113,36 +116,34 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps;
       var _customProps$ListItem = customProps.ListItemProps,
-          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
-      var role = a11y.role,
-          ariaSelected = a11y.ariaSelected,
-          _a11y$ariaHidden = a11y.ariaHidden,
+          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
+          _customProps$Containe = customProps.ContainerProps,
+          ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe;
+      var _a11y$ariaHidden = a11y.ariaHidden,
           ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden;
-      var options = {};
-
-      if (active) {
-        options['data-selected'] = active;
-      }
-
-      if (!isDisabled && active) {
-        options.tabindex = '0';
-      }
-
       var dataIdString = dataId ? "".concat(dataId.replace("'", '_')) : value.toLowerCase().replace("'", '_');
-      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
-        role: role,
-        "aria-selected": ariaSelected,
-        isCover: false,
-        align: "vertical",
-        alignBox: "row",
-        className: "".concat(_ListItemModule["default"].list, " ").concat(_ListItemModule["default"][size], " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"]["active".concat(palette)] : highlight && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Hover")] : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Effect")] : '', " ").concat(needTick ? _ListItemModule["default"]["".concat(size, "withTick")] : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? active ? _ListItemModule["default"].activewithBorder : _ListItemModule["default"].withBorder : '', " ").concat(customClass),
+      return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
+        a11y: a11y,
+        size: size,
+        palette: palette,
+        highlight: highlight,
+        isDisabled: isDisabled,
+        active: active,
+        autoHover: autoHover,
+        needTick: needTick,
+        needBorder: needBorder,
+        customClass: customClass,
         dataId: dataIdString,
-        onClick: !isDisabled && this.handleClick,
+        isLink: isLink,
+        href: href,
+        target: target,
+        onClick: this.handleClick,
         onMouseOver: this.handleMouseEnter,
         eleRef: this.getRef,
-        tagName: "li",
-        "data-title": isDisabled ? disableTitle : null
-      }, options, ListItemProps), iconName && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        disableTitle: disableTitle,
+        title: null,
+        customProps: ListItemProps
+      }, ContainerProps), iconName && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "aria-hidden": true,
         className: _ListItemModule["default"].iconBox,
         dataId: dataId ? "".concat(dataId, "_Icon") : "".concat(value.toLowerCase().replace("'", '_'), "_Icon")

package/lib/ListItem/ListItemWithRadio.js

@@ -15,14 +15,12 @@ var _Radio = _interopRequireDefault(require("../Radio/Radio"));
 
 var _Layout = require("../Layout");
 
-var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
+var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -94,8 +92,6 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _extends2;
-
       var _this$props4 = this.props,
           size = _this$props4.size,
           active = _this$props4.active,
@@ -110,33 +106,35 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           isDisabled = _this$props4.isDisabled,
           disableTitle = _this$props4.disableTitle,
           a11y = _this$props4.a11y,
-          customClass = _this$props4.customClass;
+          customClass = _this$props4.customClass,
+          customProps = _this$props4.customProps;
+      var _customProps$ListItem = customProps.ListItemProps,
+          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
+          _customProps$Containe = customProps.ContainerProps,
+          ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe;
       var _customClass$customLi = customClass.customListItem,
           customListItem = _customClass$customLi === void 0 ? '' : _customClass$customLi,
           _customClass$customRa = customClass.customRadio,
           customRadio = _customClass$customRa === void 0 ? '' : _customClass$customRa,
           _customClass$customRa2 = customClass.customRadioWrap,
           customRadioWrap = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2;
-      var role = a11y.role,
-          ariaSelected = a11y.ariaSelected;
-      var options = {};
-
-      if (active) {
-        options['data-selected'] = active;
-      }
-
-      if (!isDisabled && active) {
-        options.tabindex = '0';
-      }
-
-      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends((_extends2 = {
-        role: role,
-        "aria-selected": ariaSelected,
-        isCover: false,
-        align: "vertical",
-        alignBox: "row",
-        className: "".concat(_ListItemModule["default"].list, " ").concat(_ListItemModule["default"][size], " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"].active : highlight && !isDisabled ? _ListItemModule["default"].hover : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"].effect : '', "  ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ")
-      }, _defineProperty(_extends2, "className", "".concat(_ListItemModule["default"].list, " ").concat(_ListItemModule["default"][size], " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"]["active".concat(palette)] : highlight && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Hover")] : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Effect")] : '', " \n        ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(customListItem)), _defineProperty(_extends2, "dataId", dataId), _defineProperty(_extends2, "onClick", !isDisabled && this.onClick), _defineProperty(_extends2, "onMouseOver", this.onHover), _defineProperty(_extends2, "eleRef", this.getRef), _defineProperty(_extends2, "tagName", "li"), _defineProperty(_extends2, "data-title", isDisabled ? disableTitle : null), _extends2), options), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
+        a11y: a11y,
+        size: size,
+        palette: palette,
+        highlight: highlight,
+        isDisabled: isDisabled,
+        active: active,
+        autoHover: autoHover,
+        customClass: customListItem,
+        dataId: dataId,
+        onClick: this.onClick,
+        onMouseOver: this.onHover,
+        eleRef: this.getRef,
+        disableTitle: disableTitle,
+        title: null,
+        customProps: ListItemProps
+      }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].iconBox
       }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
         checked: checked,
@@ -171,7 +169,8 @@ ListItemWithRadio.defaultProps = {
   value: 'List',
   dataId: 'listItemWithRadioComp',
   a11y: {},
-  customClass: {}
+  customClass: {},
+  customProps: {}
 };
 ListItemWithRadio.propTypes = {
   active: _propTypes["default"].bool,

package/lib/PopOver/PopOver.module.css

@@ -1,6 +1,6 @@
 .popup {
   position: relative;
-  background-color: var(--dot_bg_white);
+  background-color: var(--dot_white);
 }
 .target {
   composes: offSelection from '../common/common.module.css';

package/lib/Provider.js

@@ -15,49 +15,49 @@ var _Layout = require("./Layout");
 
 var _Switch = _interopRequireDefault(require("./Switch/Switch"));
 
-require("./Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
 
-require("./Appearance/default/themes/green/greenDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
 
-require("./Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
 
-require("./Appearance/default/themes/red/redDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/red/redDefaultCTATheme.module.css");
 
-require("./Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
 
-require("./Appearance/default/themes/blue/blueDefaultComponentTheme.module.css");
+require("../assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css");
 
-require("./Appearance/default/themes/green/greenDefaultComponentTheme.module.css");
+require("../assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css");
 
-require("./Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css");
+require("../assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css");
 
-require("./Appearance/default/themes/red/redDefaultComponentTheme.module.css");
+require("../assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css");
 
-require("./Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css");
+require("../assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css");
 
-require("./Appearance/default/mode/defaultMode.module.css");
+require("../assets/Appearance/default/mode/defaultMode.module.css");
 
-require("./Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
 
-require("./Appearance/dark/themes/green/greenDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
 
-require("./Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
 
-require("./Appearance/dark/themes/red/redDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/red/redDarkCTATheme.module.css");
 
-require("./Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
 
-require("./Appearance/dark/themes/blue/blueDarkComponentTheme.module.css");
+require("../assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css");
 
-require("./Appearance/dark/themes/green/greenDarkComponentTheme.module.css");
+require("../assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css");
 
-require("./Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css");
+require("../assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css");
 
-require("./Appearance/dark/themes/red/redDarkComponentTheme.module.css");
+require("../assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css");
 
-require("./Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css");
+require("../assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css");
 
-require("./Appearance/dark/mode/darkMode.module.css");
+require("../assets/Appearance/dark/mode/darkMode.module.css");
 
 var _LibraryContextInit = _interopRequireDefault(require("./Provider/LibraryContextInit"));
 

package/lib/Stencils/Stencils.module.css

@@ -14,28 +14,18 @@
   background-size: 800px 1px;
 }
 [dir=ltr] .stencil {
-  animation-duration: var(--zd_transition10);
+  animation-name:  placeHolderShimmer-ltr ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name:  placeHolderShimmer-ltr ;
+  animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name:  placeHolderShimmer-ltr ;
-  -webkit-animation-timing-function: linear;
 }
 [dir=rtl] .stencil {
-  animation-duration: var(--zd_transition10);
+  animation-name:  placeHolderShimmer-rtl ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name:  placeHolderShimmer-rtl ;
+  animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name:  placeHolderShimmer-rtl ;
-  -webkit-animation-timing-function: linear;
 }
 @keyframes placeHolderShimmer-ltr {
   0% {

package/lib/common/docStyle.module.css

@@ -94,18 +94,18 @@
 }
 
 .blue {
-  color: var(--zd_text_prime);
+  color: var(--zd_prime);
 }
 
 .dark {
   composes: p10;
-  background-color: var(--dot_bg_black);
+  background-color: var(--dot_black);
 }
 
 .table {
   composes: p10;
   composes: cboth;
-  border: 1px solid var(--zd_border_smoke84);
+  border: 1px solid var(--zd_smoke84);
   border-radius: 3px;
 }
 
@@ -119,7 +119,7 @@
 
 .tableheading {
   composes: blue;
-  background: var(--zd_bg_smoke1);
+  background:var(--zd_smoke1);
 }
 
 .palette {
@@ -130,13 +130,13 @@
   width: 200px;
   composes: tcenter;
   font-weight: bold;
-  border: 1px solid var(--zd_border_smoke83);
+  border: 1px solid var(--zd_smoke83);
   border-radius: 3px;
 }
 
 .palette .palettecard {
   height: 80px;
-  border: 1px solid var(--zd_border_smoke83);
+  border: 1px solid var(--zd_smoke83);
 }
 
 .palette span {
@@ -149,7 +149,7 @@
   composes: tcenter;
   composes: p10;
   composes: m10;
-  border: 1px solid var(--zd_border_smoke83);
+  border: 1px solid var(--zd_smoke83);
   border-radius: 3px;
 }
 
@@ -161,7 +161,7 @@
 .cover {
   composes: p10;
   composes: m10;
-  border: 1px solid var(--zd_border_smoke1);
+  border: 1px solid var(--zd_smoke1);
   border-radius: 5px;
 }
 
@@ -759,4 +759,4 @@
   --textarea_text_color: hsl(var(--hue), 100%, 80%);
   --textarea_padding: 2px 10px;
   background-color: hsl(var(--hue), 100%, 97%);
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-222",
+  "version": "1.0.0-alpha-226",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -34,12 +34,12 @@
   },
   "devDependencies": {
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/variables": "1.0.0-beta.25",
-    "@zohodesk/icons": "1.0.0-beta.85",
+    "@zohodesk/variables": "1.0.0-beta.29",
+    "@zohodesk/icons": "1.0.0-beta.92",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "^1.4.1",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/svg": "1.0.0-beta.37"
+    "@zohodesk/svg": "1.0.0-beta.41"
   },
   "dependencies": {
     "hoist-non-react-statics": "3.0.1",
@@ -48,9 +48,9 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "^1.0.0-beta.85",
-    "@zohodesk/variables": "^1.0.0-beta.24",
-    "@zohodesk/svg": "^1.0.0-beta.37",
+    "@zohodesk/icons": "1.0.0-beta.92",
+    "@zohodesk/variables": "1.0.0-beta.29",
+    "@zohodesk/svg": "1.0.0-beta.41",
     "@zohodesk/virtualizer": "^1.0.3",
     "velocity-react": "^1.4.1",
     "react-sortable-hoc": "^0.8.3"
@@ -69,4 +69,4 @@
       "hasRTL": true
     }
   }
-}
+}

package/README_Beta.md

@@ -1,2 +0,0 @@
-- FocusScope added
-- Focus Ring added

package/__testUtils__/globals.js

@@ -1,46 +0,0 @@
-let moduleMapKey = require('./moduleMapKey.json');
-global.SupportUI = {
-  Departments: {
-    getDepartmentAgents() {},
-    getDepartmentName() {}
-  },
-  CurrentUser: {
-    getSelectedDepartmentId() {},
-    getAccessibleDepartments() {},
-    getZuid() {}
-  },
-  CurrentPortal: {
-    getPortalZgId() {
-      return this.zgid;
-    },
-    getPortalName() {
-      return this.portalName;
-    },
-    getBaseDomain() {},
-    getMarketplaceDomain() {},
-    additioninfo: {
-      LICENSE_TYPE: ''
-    },
-    portalName: 'MyPortal',
-    zgid: '1234456'
-  },
-  History: {
-    changeHashSilently() {}
-  }
-};
-global.showLoadingBar = function() {};
-global.hideLoadingBar = function() {};
-global.showAnimateMessageDiv = function() {};
-global.hideAnimateMessageDiv = function() {};
-global.requestAnimationFrame = function(fn) {
-  setTimeout(fn, 16);
-};
-
-global.moduleMapKey = moduleMapKey;
-global.MutationObserver = function() {
-  return {
-    replaceObservationElement: () => {},
-    disconnect: () => {},
-    observe: () => {}
-  };
-};