@elliemae/ds-shared 1.57.1-rc.0 → 2.0.0-alpha.11

package/esm/FocusGroup/FocusGroup.js

@@ -1,43 +1,32 @@
-import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
-import _createClass from '@babel/runtime/helpers/esm/createClass';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import { get, isFunction } from '@elliemae/ds-utilities';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { get, isFunction } from '@elliemae/ds-utilities/utils';
 import hotkeys from 'hotkeys-js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var defaultOptions = {
+const defaultOptions = {
   orientation: 'vertical'
 };
 
-var safeCallAction = function safeCallAction(e, fun) {
+const safeCallAction = (e, fun, ...args) => {
   if (isFunction(fun)) {
     e.preventDefault();
-
-    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-      args[_key - 2] = arguments[_key];
-    }
-
-    fun.apply(void 0, args);
+    fun(...args);
   }
 };
 
-var registerHotkeys = function registerHotkeys() {
-  var hotKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var params = arguments.length > 1 ? arguments[1] : undefined;
-  var getContainer = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {
-    return document;
-  };
-  Object.keys(hotKeys).forEach(function (hotkey) {
-    var _hotKeys$hotkey = hotKeys[hotkey],
-        options = _hotKeys$hotkey.options,
-        handler = _hotKeys$hotkey.handler,
-        _hotKeys$hotkey$allow = _hotKeys$hotkey.allowDocumentHandler,
-        allowDocumentHandler = _hotKeys$hotkey$allow === void 0 ? false : _hotKeys$hotkey$allow;
-
-    var parameterizedHandler = function parameterizedHandler(e) {
-      var handlerParams = isFunction(params) ? params() : params;
+const registerHotkeys = (hotKeys = {}, params, getContainer = () => document) => {
+  Object.keys(hotKeys).forEach(hotkey => {
+    const {
+      options,
+      handler,
+      allowDocumentHandler = false
+    } = hotKeys[hotkey];
+
+    const parameterizedHandler = e => {
+      const handlerParams = isFunction(params) ? params() : params;
       if (!allowDocumentHandler && handlerParams.item !== document.activeElement) return;
       e.preventDefault();
       handler(handlerParams);
@@ -49,27 +38,22 @@ var registerHotkeys = function registerHotkeys() {
   });
 };
 
-var unregisterHotKeys = function unregisterHotKeys() {
-  var hotKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  Object.keys(hotKeys).forEach(function (hotkey) {
+const unregisterHotKeys = (hotKeys = {}) => {
+  Object.keys(hotKeys).forEach(hotkey => {
     hotkeys.unbind(hotkey);
   });
 };
 
-var noop = function noop() {
-  return null;
-};
-
-var FocusGroup = /*#__PURE__*/function () {
-  function FocusGroup() {
-    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-    _classCallCheck(this, FocusGroup);
+const noop = () => null;
 
+class FocusGroup {
+  constructor(options = {}) {
     _defineProperty(this, "items", []);
 
     this.options = _objectSpread(_objectSpread({}, defaultOptions), options);
-    var orientation = this.options.orientation;
+    const {
+      orientation
+    } = this.options;
     this.keyBindings = _objectSpread({
       ArrowUp: orientation !== 'horizontal' && 'previous',
       ArrowRight: orientation !== 'vertical' && 'next',
@@ -89,9 +73,7 @@ var FocusGroup = /*#__PURE__*/function () {
       first: this.focusFirst.bind(this),
       last: this.focusLast.bind(this),
       exit: this.exit.bind(this),
-      enter: function enter() {
-        return null;
-      }
+      enter: () => null
     };
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.register = this.register.bind(this);
@@ -105,233 +87,198 @@ var FocusGroup = /*#__PURE__*/function () {
     this.getHotKeysParams = this.getHotKeysParams.bind(this);
   }
 
-  _createClass(FocusGroup, [{
-    key: "getHotKeysParams",
-    value: function getHotKeysParams() {
-      var item = this.currentFocusedItem;
+  getHotKeysParams() {
+    const item = this.currentFocusedItem;
+    const {
+      index
+    } = get(item, ['dataset'], {});
+    return {
+      item,
+      index
+    };
+  }
 
-      var _get = get(item, ['dataset'], {}),
-          index = _get.index;
+  activate() {
+    const {
+      getContainer
+    } = this.options;
+    document.addEventListener('keydown', this.handleKeyDown, true);
+    registerHotkeys(this.options.hotKeys, this.getHotKeysParams, getContainer);
+  }
 
-      return {
-        item: item,
-        index: index
-      };
-    }
-  }, {
-    key: "activate",
-    value: function activate() {
-      var getContainer = this.options.getContainer;
-      document.addEventListener('keydown', this.handleKeyDown, true);
-      registerHotkeys(this.options.hotKeys, this.getHotKeysParams, getContainer);
-    }
-  }, {
-    key: "deactivate",
-    value: function deactivate() {
-      document.removeEventListener('keydown', this.handleKeyDown, true);
-      unregisterHotKeys(this.options.hotKeys);
-    }
-  }, {
-    key: "handleKeyDown",
-    value: function handleKeyDown(e) {
-      if (!this.isGroupActive()) return;
-      this.executeActionByEvent(e);
-    }
-  }, {
-    key: "executeActionByEvent",
-    value: function executeActionByEvent(e) {
-      var _this = this;
-
-      var actions = Array.isArray(this.keyBindings[e.key]) ? this.keyBindings[e.key] : [this.keyBindings[e.key]];
-      return actions.map(function (action) {
-        return typeof action === 'string' ? safeCallAction(e, _this.mapActions[action]) : safeCallAction(e, action);
-      });
-    }
-  }, {
-    key: "register",
-    value: function register(node) {
-      var _this2 = this;
-
-      var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      var afterIndex = this.items.findIndex(function (item) {
-        return item.compareDocumentPosition(node) === Node.DOCUMENT_POSITION_PRECEDING;
-      });
-      node.specialOnFocus = props.onFocus || noop;
-      node.specialOnBlur = props.onBlur || noop;
-
-      node.onclick = function () {
-        return _this2.focusItem(node);
-      };
-
-      node.onfocus = function () {
-        _this2.focusItem(node);
-      };
-
-      if (afterIndex === -1) {
-        this.items.push(node);
-      } else {
-        this.items.splice(afterIndex, 0, node);
-      }
-    }
-  }, {
-    key: "unregister",
-    value: function unregister(node) {
-      var index = this.getItemIndexByNode(node);
-      if (index > -1) this.items.splice(index, 1);
-    }
-  }, {
-    key: "exit",
-    value: function exit() {
-      var onExitFocusGroup = this.options.onExitFocusGroup;
-      onExitFocusGroup();
-    }
-  }, {
-    key: "focusItem",
-    value: function focusItem(node) {
-      if (this.currentFocusedItem && this.currentFocusedItem !== node) {
-        this.currentFocusedItem.specialOnBlur();
-        this.currentFocusedItem.setAttribute('tabindex', -1);
-      }
-
-      if (!node) return;
-      this.currentFocusedItem = node;
-      node.setAttribute('tabindex', 0);
-      node.focus();
-      node.specialOnFocus();
-    }
-  }, {
-    key: "focusNext",
-    value: function focusNext() {
-      var item = this.getNextItem();
-      this.focusItem(item);
-    }
-  }, {
-    key: "focusByNode",
-    value: function focusByNode(node) {
-      var index = this.getItemIndexByNode(node);
-      this.focusByIndex(index);
-    }
-  }, {
-    key: "focusByIndex",
-    value: function focusByIndex(index) {
-      var item = this.getItemByIndex(index);
-      this.focusItem(item);
-    }
-  }, {
-    key: "focusPrevious",
-    value: function focusPrevious() {
-      var prevItem = this.getPreviousItem();
-      this.focusItem(prevItem);
-    }
-  }, {
-    key: "focusFirst",
-    value: function focusFirst() {
-      var item = this.getFirstItem();
-      this.focusItem(item);
-    }
-  }, {
-    key: "focusLast",
-    value: function focusLast() {
-      var item = this.getLastItem();
-      this.focusItem(item);
-    }
-  }, {
-    key: "focusCurrent",
-    value: function focusCurrent() {
-      this.focusItem(this.currentFocusedItem);
-    }
-  }, {
-    key: "focusNextGroup",
-    value: function focusNextGroup() {
-      var onFocusNextGroup = this.options.onFocusNextGroup;
-      this.exit();
-      onFocusNextGroup();
-    }
-  }, {
-    key: "focusPreviousGroup",
-    value: function focusPreviousGroup() {
-      var onFocusPreviousGroup = this.options.onFocusPreviousGroup;
-      this.exit();
-      onFocusPreviousGroup();
-    }
-  }, {
-    key: "getNextItem",
-    value: function getNextItem() {
-      var loop = this.options.loop;
-      var currentIndex = this.getFocusedIndex();
-      var supposedNextIndex = currentIndex + 1;
-
-      if (!this.checkCanFocusNext(supposedNextIndex)) {
-        return loop ? this.getFirstItem() : this.focusNextGroup();
-      }
-
-      return this.getItemByIndex(supposedNextIndex);
-    }
-  }, {
-    key: "getPreviousItem",
-    value: function getPreviousItem() {
-      var loop = this.options.loop;
-      var currentIndex = this.getFocusedIndex();
-      var supposedPrevIndex = currentIndex - 1;
-
-      if (!this.checkCanFocusPrev(supposedPrevIndex)) {
-        return loop ? this.getLastItem() : this.focusPreviousGroup();
-      }
-
-      return this.getItemByIndex(supposedPrevIndex);
-    }
-  }, {
-    key: "checkCanFocusNext",
-    value: function checkCanFocusNext(index) {
-      return this.items.length > index;
-    }
-  }, {
-    key: "checkCanFocusPrev",
-    value: function checkCanFocusPrev(index) {
-      return index >= 0;
-    }
-  }, {
-    key: "getItemByIndex",
-    value: function getItemByIndex(index) {
-      return this.items[index];
-    }
-  }, {
-    key: "getItemIndexByNode",
-    value: function getItemIndexByNode(node) {
-      return this.items.findIndex(function (item) {
-        return item === node;
-      });
-    }
-  }, {
-    key: "getFocusedIndex",
-    value: function getFocusedIndex() {
-      return this.getItemIndexByNode(document.activeElement);
-    }
-  }, {
-    key: "getFocusedItem",
-    value: function getFocusedItem() {
-      var index = this.getFocusedIndex();
-      return index > -1 && this.items[index];
+  deactivate() {
+    document.removeEventListener('keydown', this.handleKeyDown, true);
+    unregisterHotKeys(this.options.hotKeys);
+  }
+
+  handleKeyDown(e) {
+    if (!this.isGroupActive()) return;
+    this.executeActionByEvent(e);
+  }
+
+  executeActionByEvent(e) {
+    const actions = Array.isArray(this.keyBindings[e.key]) ? this.keyBindings[e.key] : [this.keyBindings[e.key]];
+    return actions.map(action => typeof action === 'string' ? safeCallAction(e, this.mapActions[action]) : safeCallAction(e, action));
+  }
+
+  register(node, props = {}) {
+    const afterIndex = this.items.findIndex(item => item.compareDocumentPosition(node) === Node.DOCUMENT_POSITION_PRECEDING);
+    node.specialOnFocus = props.onFocus || noop;
+    node.specialOnBlur = props.onBlur || noop;
+
+    node.onclick = () => this.focusItem(node);
+
+    node.onfocus = () => {
+      this.focusItem(node);
+    };
+
+    if (afterIndex === -1) {
+      this.items.push(node);
+    } else {
+      this.items.splice(afterIndex, 0, node);
     }
-  }, {
-    key: "isGroupActive",
-    value: function isGroupActive() {
-      return this.getFocusedIndex() !== -1;
+  }
+
+  unregister(node) {
+    const index = this.getItemIndexByNode(node);
+    if (index > -1) this.items.splice(index, 1);
+  }
+
+  exit() {
+    const {
+      onExitFocusGroup
+    } = this.options;
+    onExitFocusGroup();
+  }
+
+  focusItem(node) {
+    if (this.currentFocusedItem && this.currentFocusedItem !== node) {
+      this.currentFocusedItem.specialOnBlur();
+      this.currentFocusedItem.setAttribute('tabindex', -1);
     }
-  }, {
-    key: "getFirstItem",
-    value: function getFirstItem() {
-      return !!this.items.length && this.items[0];
+
+    if (!node) return;
+    this.currentFocusedItem = node;
+    node.setAttribute('tabindex', 0);
+    node.focus();
+    node.specialOnFocus();
+  }
+
+  focusNext() {
+    const item = this.getNextItem();
+    this.focusItem(item);
+  }
+
+  focusByNode(node) {
+    const index = this.getItemIndexByNode(node);
+    this.focusByIndex(index);
+  }
+
+  focusByIndex(index) {
+    const item = this.getItemByIndex(index);
+    this.focusItem(item);
+  }
+
+  focusPrevious() {
+    const prevItem = this.getPreviousItem();
+    this.focusItem(prevItem);
+  }
+
+  focusFirst() {
+    const item = this.getFirstItem();
+    this.focusItem(item);
+  }
+
+  focusLast() {
+    const item = this.getLastItem();
+    this.focusItem(item);
+  }
+
+  focusCurrent() {
+    this.focusItem(this.currentFocusedItem);
+  }
+
+  focusNextGroup() {
+    const {
+      onFocusNextGroup
+    } = this.options;
+    this.exit();
+    onFocusNextGroup();
+  }
+
+  focusPreviousGroup() {
+    const {
+      onFocusPreviousGroup
+    } = this.options;
+    this.exit();
+    onFocusPreviousGroup();
+  }
+
+  getNextItem() {
+    const {
+      loop
+    } = this.options;
+    const currentIndex = this.getFocusedIndex();
+    const supposedNextIndex = currentIndex + 1;
+
+    if (!this.checkCanFocusNext(supposedNextIndex)) {
+      return loop ? this.getFirstItem() : this.focusNextGroup();
     }
-  }, {
-    key: "getLastItem",
-    value: function getLastItem() {
-      return !!this.items.length && this.items[this.items.length - 1];
+
+    return this.getItemByIndex(supposedNextIndex);
+  }
+
+  getPreviousItem() {
+    const {
+      loop
+    } = this.options;
+    const currentIndex = this.getFocusedIndex();
+    const supposedPrevIndex = currentIndex - 1;
+
+    if (!this.checkCanFocusPrev(supposedPrevIndex)) {
+      return loop ? this.getLastItem() : this.focusPreviousGroup();
     }
-  }]);
 
-  return FocusGroup;
-}();
+    return this.getItemByIndex(supposedPrevIndex);
+  }
+
+  checkCanFocusNext(index) {
+    return this.items.length > index;
+  }
+
+  checkCanFocusPrev(index) {
+    return index >= 0;
+  }
+
+  getItemByIndex(index) {
+    return this.items[index];
+  }
+
+  getItemIndexByNode(node) {
+    return this.items.findIndex(item => item === node);
+  }
+
+  getFocusedIndex() {
+    return this.getItemIndexByNode(document.activeElement);
+  }
+
+  getFocusedItem() {
+    const index = this.getFocusedIndex();
+    return index > -1 && this.items[index];
+  }
+
+  isGroupActive() {
+    return this.getFocusedIndex() !== -1;
+  }
+
+  getFirstItem() {
+    return !!this.items.length && this.items[0];
+  }
+
+  getLastItem() {
+    return !!this.items.length && this.items[this.items.length - 1];
+  }
+
+}
 
 export { FocusGroup as default };
-//# sourceMappingURL=FocusGroup.js.map

package/esm/FocusGroup/FocusGroupContext.js

@@ -3,4 +3,3 @@ import React from 'react';
 var FocusGroupContext = /*#__PURE__*/React.createContext();
 
 export { FocusGroupContext as default };
-//# sourceMappingURL=FocusGroupContext.js.map