@jetbrains/ring-ui-built 7.0.0-beta.1 → 7.0.0-beta.3

package/components/shortcuts/core.js

@@ -1,22 +1,11 @@
-import { b as _createClass, e as _classCallCheck, _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
-import 'core-js/modules/es.array.find-index.js';
-import 'core-js/modules/es.array.includes.js';
-import 'core-js/modules/es.array.map.js';
-import 'core-js/modules/es.array.slice.js';
-import 'core-js/modules/es.array.splice.js';
-import 'core-js/modules/es.object.assign.js';
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.string.includes.js';
-import 'core-js/modules/es.string.match.js';
 import Combokeys from 'combokeys';
 import sniffr from '../global/sniffer.js';
 import 'sniffr';
 
-var Shortcuts = /*#__PURE__*/function () {
-  function Shortcuts() {
-    var _this = this;
-    _classCallCheck(this, Shortcuts);
+class Shortcuts {
+  constructor() {
     _defineProperty(this, "ALLOW_SHORTCUTS_SELECTOR", '.ring-js-shortcuts');
     _defineProperty(this, "ROOT_SCOPE", {
       scopeId: 'ROOT',
@@ -25,16 +14,14 @@ var Shortcuts = /*#__PURE__*/function () {
     _defineProperty(this, "_scopes", {});
     _defineProperty(this, "_scopeChain", []);
     _defineProperty(this, "combokeys", new Combokeys(document.documentElement));
-    _defineProperty(this, "trigger", function (combo) {
-      return _this.combokeys.trigger(combo);
-    });
-    _defineProperty(this, "_dispatcher", function (e, key) {
-      var currentScope;
-      for (var i = _this._scopeChain.length - 1; i >= 0; i--) {
-        var scopeInChain = _this._scopeChain[i];
-        currentScope = _this._scopes[scopeInChain.scopeId];
+    _defineProperty(this, "trigger", combo => this.combokeys.trigger(combo));
+    _defineProperty(this, "_dispatcher", (e, key) => {
+      let currentScope;
+      for (let i = this._scopeChain.length - 1; i >= 0; i--) {
+        const scopeInChain = this._scopeChain[i];
+        currentScope = this._scopes[scopeInChain.scopeId];
         if (currentScope && key != null && currentScope[key]) {
-          var ret = currentScope[key](e, key, scopeInChain.scopeId);
+          const ret = currentScope[key](e, key, scopeInChain.scopeId);
           // Fall down in chain when returning true
           if (ret !== true) {
             return ret;
@@ -46,205 +33,170 @@ var Shortcuts = /*#__PURE__*/function () {
       }
       return undefined;
     });
-    _defineProperty(this, "_defaultFilter", function (e, element, key) {
+    _defineProperty(this, "_defaultFilter", (e, element, key) => {
       // if the element or its parents have the class "ring-js-shortcuts" then no need to stop
-      if (element === document || !(element instanceof HTMLElement) || key == null || element.matches(_this.ALLOW_SHORTCUTS_SELECTOR) || (element.dataset.enabledShortcuts != null ? element.dataset.enabledShortcuts.split(',').includes(key) : element.closest(_this.ALLOW_SHORTCUTS_SELECTOR) != null)) {
+      if (element === document || !(element instanceof HTMLElement) || key == null || element.matches(this.ALLOW_SHORTCUTS_SELECTOR) || (element.dataset.enabledShortcuts != null ? element.dataset.enabledShortcuts.split(',').includes(key) : element.closest(this.ALLOW_SHORTCUTS_SELECTOR) != null)) {
         return false;
       }
-      var elementContentEditableAttribute = element.contentEditable;
-      var isElementContentEditable = elementContentEditableAttribute === 'true' || elementContentEditableAttribute === 'plaintext-only';
+      const elementContentEditableAttribute = element.contentEditable;
+      const isElementContentEditable = elementContentEditableAttribute === 'true' || elementContentEditableAttribute === 'plaintext-only';
       // stop for input, select, textarea and content-editable elements
       return element.matches('input:not([type=checkbox]),select,textarea') || isElementContentEditable;
     });
     this.setFilter();
     this.setScope();
   }
-  return _createClass(Shortcuts, [{
-    key: "bind",
-    value:
-    /**
-     * Binds a handler to a shortcut
-     *
-     * @param params.key {string | Array.<string>) Keys to bind
-     * @param params.handler {Function} Events handle
-     * @param params.scope {string} Scope (optional)
-     * @param params.type {string} Event type, will be passed to Combokeys (optional)
-     */
-    function bind(params) {
-      if (!(params instanceof Object) || typeof params.handler !== 'function') {
-        throw new Error('Shortcut handler should exist');
-      }
-      if (!params.scope) {
-        params.scope = this.ROOT_SCOPE.scopeId;
-      }
-      if (Array.isArray(params.key)) {
-        for (var i = 0; i < params.key.length; i++) {
-          this.bind(Object.assign({}, params, {
-            key: params.key[i]
-          }));
-        }
-        return;
-      }
-      if (typeof params.key !== 'string') {
-        throw new Error('Shortcut key should exist');
-      }
-      var scope = this._scopes[params.scope];
-      if (!scope) {
-        scope = this._scopes[params.scope] = {};
-      }
-      scope[params.key] = params.handler;
-      this.combokeys.bind(params.key, this._dispatcher, this._getKeyboardEventType(params));
+  /**
+   * Binds a handler to a shortcut
+   *
+   * @param params.key {string | Array.<string>) Keys to bind
+   * @param params.handler {Function} Events handle
+   * @param params.scope {string} Scope (optional)
+   * @param params.type {string} Event type, will be passed to Combokeys (optional)
+   */
+  bind(params) {
+    if (!(params instanceof Object) || typeof params.handler !== 'function') {
+      throw new Error('Shortcut handler should exist');
     }
-    /**
-     * Binds a map of shortcuts to handlers with common options
-     *
-     * @map {Object) Keys to handlers map
-     * @options.scope {string} Scope (optional)
-     * @options.type {string} Event type, will be passed to Combokeys (optional)
-     */
-  }, {
-    key: "bindMap",
-    value: function bindMap(map, options) {
-      if (!(map instanceof Object)) {
-        throw new Error('Shortcuts map shouldn\'t be empty');
-      }
-      for (var key in map) {
-        if (map.hasOwnProperty(key)) {
-          this.bind(Object.assign({}, options || {}, {
-            key,
-            handler: map[key]
-          }));
-        }
+    if (!params.scope) {
+      params.scope = this.ROOT_SCOPE.scopeId;
+    }
+    if (Array.isArray(params.key)) {
+      for (let i = 0; i < params.key.length; i++) {
+        this.bind(Object.assign({}, params, {
+          key: params.key[i]
+        }));
       }
+      return;
     }
-  }, {
-    key: "unbindScope",
-    value: function unbindScope(scope) {
-      this._scopes[scope] = null;
+    if (typeof params.key !== 'string') {
+      throw new Error('Shortcut key should exist');
     }
-  }, {
-    key: "getScope",
-    value: function getScope() {
-      return this._scopeChain.slice(1);
+    let scope = this._scopes[params.scope];
+    if (!scope) {
+      scope = this._scopes[params.scope] = {};
     }
-  }, {
-    key: "hasScope",
-    value: function hasScope(scopeId) {
-      return this.indexOfScope(scopeId) !== -1;
+    scope[params.key] = params.handler;
+    this.combokeys.bind(params.key, this._dispatcher, this._getKeyboardEventType(params));
+  }
+  /**
+   * Binds a map of shortcuts to handlers with common options
+   *
+   * @map {Object) Keys to handlers map
+   * @options.scope {string} Scope (optional)
+   * @options.type {string} Event type, will be passed to Combokeys (optional)
+   */
+  bindMap(map, options) {
+    if (!(map instanceof Object)) {
+      throw new Error('Shortcuts map shouldn\'t be empty');
     }
-    /**
-     * Adds a scope to the chain
-     * @param scopeId id of scope to add
-     * @param options options for pushing scope
-     * @param options.modal whether keys should fall through this scope or not.
-     * Useful for modals or overlays
-     */
-  }, {
-    key: "pushScope",
-    value: function pushScope(scopeId) {
-      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      if (scopeId) {
-        var position = this.indexOfScope(scopeId);
-        if (position !== -1) {
-          this._scopeChain.splice(position, 1);
-        }
-        this._scopeChain.push(this.wrapScope(scopeId, options));
+    for (const key in map) {
+      if (map.hasOwnProperty(key)) {
+        this.bind(Object.assign({}, options || {}, {
+          key,
+          handler: map[key]
+        }));
       }
     }
-  }, {
-    key: "popScope",
-    value: function popScope(scopeId) {
-      if (scopeId) {
-        var position = this.indexOfScope(scopeId);
-        if (position !== -1) {
-          return this._scopeChain.splice(position, this._scopeChain.length - 1);
-        }
+  }
+  unbindScope(scope) {
+    this._scopes[scope] = null;
+  }
+  getScope() {
+    return this._scopeChain.slice(1);
+  }
+  hasScope(scopeId) {
+    return this.indexOfScope(scopeId) !== -1;
+  }
+  /**
+   * Adds a scope to the chain
+   * @param scopeId id of scope to add
+   * @param options options for pushing scope
+   * @param options.modal whether keys should fall through this scope or not.
+   * Useful for modals or overlays
+   */
+  pushScope(scopeId) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (scopeId) {
+      const position = this.indexOfScope(scopeId);
+      if (position !== -1) {
+        this._scopeChain.splice(position, 1);
       }
-      return undefined;
+      this._scopeChain.push(this.wrapScope(scopeId, options));
     }
-  }, {
-    key: "spliceScope",
-    value: function spliceScope(scopeId) {
-      if (scopeId) {
-        var position = this.indexOfScope(scopeId);
-        if (position !== -1) {
-          this._scopeChain.splice(position, 1);
-        }
+  }
+  popScope(scopeId) {
+    if (scopeId) {
+      const position = this.indexOfScope(scopeId);
+      if (position !== -1) {
+        return this._scopeChain.splice(position, this._scopeChain.length - 1);
       }
     }
-  }, {
-    key: "setScope",
-    value: function setScope(scope) {
-      var _this2 = this;
-      if (scope) {
-        var scopeChain;
-        if (typeof scope === 'string' || !Array.isArray(scope) && typeof scope === 'object' && scope !== null) {
-          scopeChain = [scope];
-        } else {
-          scopeChain = scope;
-        }
-        if (!Array.isArray(scopeChain)) {
-          return;
-        }
-        var scopes = scopeChain.map(function (scopeItem) {
-          var isScopeId = typeof scopeItem === 'string';
-          return isScopeId ? _this2.wrapScope(scopeItem) : scopeItem;
-        });
-        this._scopeChain = [this.ROOT_SCOPE].concat(scopes);
-      } else {
-        this._scopeChain = [this.ROOT_SCOPE];
+    return undefined;
+  }
+  spliceScope(scopeId) {
+    if (scopeId) {
+      const position = this.indexOfScope(scopeId);
+      if (position !== -1) {
+        this._scopeChain.splice(position, 1);
       }
     }
-  }, {
-    key: "wrapScope",
-    value: function wrapScope(scopeId) {
-      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      return {
-        scopeId,
-        options
-      };
-    }
-  }, {
-    key: "hasKey",
-    value: function hasKey(key, scope) {
-      var _this$_scopes$scope;
-      return !!((_this$_scopes$scope = this._scopes[scope]) !== null && _this$_scopes$scope !== void 0 && _this$_scopes$scope[key]);
-    }
-  }, {
-    key: "_getKeyboardEventType",
-    value: function _getKeyboardEventType(params) {
-      if (!params.type && sniffr.os.name === 'windows') {
-        var isSystemShortcut = typeof params.key === 'string' && params.key.match(/ctrl/i) && params.key.match(/shift/i) && params.key.match(/[0-9]/);
-        /**
-         * Windows system shortcuts (ctrl+shift+[0-9] are caught by the OS on 'keydown', so let's use 'keyup'
-         */
-        if (isSystemShortcut) {
-          return 'keyup';
-        }
+  }
+  setScope(scope) {
+    if (scope) {
+      let scopeChain;
+      if (typeof scope === 'string' || !Array.isArray(scope) && typeof scope === 'object' && scope !== null) {
+        scopeChain = [scope];
+      } else {
+        scopeChain = scope;
       }
-      return params.type;
-    }
-  }, {
-    key: "setFilter",
-    value: function setFilter(fn) {
-      this.combokeys.stopCallback = typeof fn === 'function' ? fn : this._defaultFilter;
-    }
-  }, {
-    key: "indexOfScope",
-    value: function indexOfScope(scopeId) {
-      return this._scopeChain.findIndex(function (scope) {
-        return scope.scopeId === scopeId;
+      if (!Array.isArray(scopeChain)) {
+        return;
+      }
+      const scopes = scopeChain.map(scopeItem => {
+        const isScopeId = typeof scopeItem === 'string';
+        return isScopeId ? this.wrapScope(scopeItem) : scopeItem;
       });
+      this._scopeChain = [this.ROOT_SCOPE].concat(scopes);
+    } else {
+      this._scopeChain = [this.ROOT_SCOPE];
     }
-  }, {
-    key: "reset",
-    value: function reset() {
-      this._scopes = {};
-      this.setScope();
-      this.combokeys.reset();
+  }
+  wrapScope(scopeId) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return {
+      scopeId,
+      options
+    };
+  }
+  hasKey(key, scope) {
+    var _this$_scopes$scope;
+    return !!((_this$_scopes$scope = this._scopes[scope]) !== null && _this$_scopes$scope !== void 0 && _this$_scopes$scope[key]);
+  }
+  _getKeyboardEventType(params) {
+    if (!params.type && sniffr.os.name === 'windows') {
+      const isSystemShortcut = typeof params.key === 'string' && params.key.match(/ctrl/i) && params.key.match(/shift/i) && params.key.match(/[0-9]/);
+      /**
+       * Windows system shortcuts (ctrl+shift+[0-9] are caught by the OS on 'keydown', so let's use 'keyup'
+       */
+      if (isSystemShortcut) {
+        return 'keyup';
+      }
     }
-  }]);
-}();
+    return params.type;
+  }
+  setFilter(fn) {
+    this.combokeys.stopCallback = typeof fn === 'function' ? fn : this._defaultFilter;
+  }
+  indexOfScope(scopeId) {
+    return this._scopeChain.findIndex(scope => scope.scopeId === scopeId);
+  }
+  reset() {
+    this._scopes = {};
+    this.setScope();
+    this.combokeys.reset();
+  }
+}
 var shortcuts = new Shortcuts();
 
 export { shortcuts as default };

package/components/shortcuts/shortcut-title.js

@@ -1,10 +1,8 @@
-import 'core-js/modules/es.array.map.js';
 import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.string.split.js';
 import sniffr from '../global/sniffer.js';
 import 'sniffr';
 
-var macSymbolsMap = {
+const macSymbolsMap = {
   enter: '⏎',
   shift: '⇧',
   meta: '⌘',
@@ -24,7 +22,7 @@ var macSymbolsMap = {
   right: '→',
   down: '↓'
 };
-var winSymbolsMap = {
+const winSymbolsMap = {
   enter: 'Enter',
   shift: 'Shift',
   meta: 'Ctrl',
@@ -45,12 +43,10 @@ var winSymbolsMap = {
   down: '↓'
 };
 function getShortcutTitle(shortcut) {
-  var MAC_OS = sniffr.os.name === 'macos';
-  var KEY_SEPARATOR = MAC_OS ? '' : '+';
-  var symbolsMap = MAC_OS ? macSymbolsMap : winSymbolsMap;
-  return shortcut.split(/\+/g).map(function (symbol) {
-    return symbolsMap[symbol] || symbol.toUpperCase();
-  }).join(KEY_SEPARATOR);
+  const MAC_OS = sniffr.os.name === 'macos';
+  const KEY_SEPARATOR = MAC_OS ? '' : '+';
+  const symbolsMap = MAC_OS ? macSymbolsMap : winSymbolsMap;
+  return shortcut.split(/\+/g).map(symbol => symbolsMap[symbol] || symbol.toUpperCase()).join(KEY_SEPARATOR);
 }
 
 export { getShortcutTitle };

package/components/shortcuts/shortcuts-hoc.js

@@ -1,58 +1,40 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, d as _objectSpread2, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
+import { _ as _defineProperty, a as _objectWithoutProperties, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import getUID from '../global/get-uid.js';
 import Shortcuts from './shortcuts.js';
 import { jsx } from 'react/jsx-runtime';
-import 'core-js/modules/es.object.to-string.js';
-import 'core-js/modules/es.regexp.to-string.js';
-import 'core-js/modules/es.array.map.js';
 import './core.js';
-import 'core-js/modules/es.array.find-index.js';
-import 'core-js/modules/es.array.includes.js';
-import 'core-js/modules/es.array.slice.js';
-import 'core-js/modules/es.array.splice.js';
-import 'core-js/modules/es.object.assign.js';
 import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.string.includes.js';
-import 'core-js/modules/es.string.match.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 
-var _excluded = ["rgShortcutsOptions", "rgShortcutsMap"];
+const _excluded = ["rgShortcutsOptions", "rgShortcutsMap"];
 function shortcutsHOC(ComposedComponent) {
   var _WithShortcuts;
-  return _WithShortcuts = /*#__PURE__*/function (_Component) {
-    function WithShortcuts() {
-      var _this;
-      _classCallCheck(this, WithShortcuts);
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      _this = _callSuper(this, WithShortcuts, [].concat(args));
-      _defineProperty(_this, "_shortcutsScopeUid", getUID('rg-shortcuts-'));
-      return _this;
+  return _WithShortcuts = class WithShortcuts extends Component {
+    constructor() {
+      super(...arguments);
+      _defineProperty(this, "_shortcutsScopeUid", getUID('rg-shortcuts-'));
     }
-    _inherits(WithShortcuts, _Component);
-    return _createClass(WithShortcuts, [{
-      key: "render",
-      value: function render() {
-        var _this$props = this.props,
-          rgShortcutsOptions = _this$props.rgShortcutsOptions,
-          rgShortcutsMap = _this$props.rgShortcutsMap,
-          props = _objectWithoutProperties(_this$props, _excluded);
-        return /*#__PURE__*/jsx(Shortcuts, {
-          scope: this._shortcutsScopeUid,
-          map: rgShortcutsMap,
-          options: rgShortcutsOptions,
-          disabled: rgShortcutsOptions.disabled,
-          children: /*#__PURE__*/jsx(ComposedComponent, _objectSpread2({}, props))
-        });
-      }
-    }]);
-  }(Component), _defineProperty(_WithShortcuts, "propTypes", {
+    render() {
+      const _this$props = this.props,
+        {
+          rgShortcutsOptions,
+          rgShortcutsMap
+        } = _this$props,
+        props = _objectWithoutProperties(_this$props, _excluded);
+      return /*#__PURE__*/jsx(Shortcuts, {
+        scope: this._shortcutsScopeUid,
+        map: rgShortcutsMap,
+        options: rgShortcutsOptions,
+        disabled: rgShortcutsOptions.disabled,
+        children: /*#__PURE__*/jsx(ComposedComponent, _objectSpread2({}, props))
+      });
+    }
+  }, _defineProperty(_WithShortcuts, "propTypes", {
     rgShortcutsOptions: PropTypes.object,
     rgShortcutsMap: PropTypes.object
   }), _WithShortcuts;

package/components/shortcuts/shortcuts.js

@@ -1,81 +1,58 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.map.js';
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import shortcuts from './core.js';
-import 'core-js/modules/es.array.concat.js';
-import 'core-js/modules/es.array.find-index.js';
-import 'core-js/modules/es.array.includes.js';
-import 'core-js/modules/es.array.slice.js';
-import 'core-js/modules/es.array.splice.js';
-import 'core-js/modules/es.object.assign.js';
 import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.string.includes.js';
-import 'core-js/modules/es.string.match.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 
-var Shortcuts = /*#__PURE__*/function (_PureComponent) {
-  function Shortcuts() {
-    _classCallCheck(this, Shortcuts);
-    return _callSuper(this, Shortcuts, arguments);
-  }
-  _inherits(Shortcuts, _PureComponent);
-  return _createClass(Shortcuts, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (!this.props.disabled) {
-        this.turnShorcutsOn();
-      }
+class Shortcuts extends PureComponent {
+  componentDidMount() {
+    if (!this.props.disabled) {
+      this.turnShorcutsOn();
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this$props = this.props,
-        disabled = _this$props.disabled,
-        map = _this$props.map;
-      if (!prevProps.disabled && disabled) {
-        this.turnShorcutsOff();
-      }
-      if (prevProps.disabled && !disabled) {
-        this.turnShorcutsOn();
-      }
-      if (prevProps.map !== map) {
-        shortcuts.bindMap(map, this.props);
-      }
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      disabled,
+      map
+    } = this.props;
+    if (!prevProps.disabled && disabled) {
+      this.turnShorcutsOff();
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (!this.props.disabled) {
-        this.turnShorcutsOff();
-      }
+    if (prevProps.disabled && !disabled) {
+      this.turnShorcutsOn();
     }
-  }, {
-    key: "turnShorcutsOn",
-    value: function turnShorcutsOn() {
-      var _this$props2 = this.props,
-        map = _this$props2.map,
-        scope = _this$props2.scope,
-        options = _this$props2.options;
+    if (prevProps.map !== map) {
       shortcuts.bindMap(map, this.props);
-      shortcuts.pushScope(scope, options);
     }
-  }, {
-    key: "turnShorcutsOff",
-    value: function turnShorcutsOff() {
-      var scope = this.props.scope;
-      shortcuts.unbindScope(scope);
-      shortcuts.spliceScope(scope);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return this.props.children || null;
+  }
+  componentWillUnmount() {
+    if (!this.props.disabled) {
+      this.turnShorcutsOff();
     }
-  }]);
-}(PureComponent);
+  }
+  turnShorcutsOn() {
+    const {
+      map,
+      scope,
+      options
+    } = this.props;
+    shortcuts.bindMap(map, this.props);
+    shortcuts.pushScope(scope, options);
+  }
+  turnShorcutsOff() {
+    const {
+      scope
+    } = this.props;
+    shortcuts.unbindScope(scope);
+    shortcuts.spliceScope(scope);
+  }
+  render() {
+    return this.props.children || null;
+  }
+}
 _defineProperty(Shortcuts, "propTypes", {
   map: PropTypes.object.isRequired,
   scope: PropTypes.string.isRequired,