@elliemae/ds-shared 2.3.0-alpha.8 → 2.3.0-next.10

package/cjs/FocusGroup/FocusGroup.js

@@ -0,0 +1,308 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+var dsUtilities = require('@elliemae/ds-utilities');
+var hotkeys = require('hotkeys-js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var hotkeys__default = /*#__PURE__*/_interopDefaultLegacy(hotkeys);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const defaultOptions = {
+  orientation: 'vertical'
+};
+
+const safeCallAction = function (e, fun) {
+  if (dsUtilities.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(...args);
+  }
+};
+
+const registerHotkeys = function () {
+  let hotKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let params = arguments.length > 1 ? arguments[1] : undefined;
+  let getContainer = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : () => document;
+  Object.keys(hotKeys).forEach(hotkey => {
+    const {
+      options,
+      handler,
+      allowDocumentHandler = false
+    } = hotKeys[hotkey];
+
+    const parameterizedHandler = e => {
+      const handlerParams = dsUtilities.isFunction(params) ? params() : params;
+      if (!allowDocumentHandler && handlerParams.item !== document.activeElement) return;
+      e.preventDefault();
+      handler(handlerParams);
+    };
+
+    hotkeys__default["default"](hotkey, _objectSpread({
+      element: getContainer()
+    }, options), parameterizedHandler);
+  });
+};
+
+const unregisterHotKeys = function () {
+  let hotKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  Object.keys(hotKeys).forEach(hotkey => {
+    hotkeys__default["default"].unbind(hotkey);
+  });
+};
+
+const noop = () => null;
+
+class FocusGroup {
+  constructor() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    this.items = [];
+    this.options = _objectSpread(_objectSpread({}, defaultOptions), options);
+    const {
+      orientation
+    } = this.options;
+    this.keyBindings = _objectSpread({
+      ArrowUp: orientation !== 'horizontal' && 'previous',
+      ArrowRight: orientation !== 'vertical' && 'next',
+      ArrowDown: orientation !== 'horizontal' && 'next',
+      ArrowLeft: orientation !== 'vertical' && 'previous',
+      Home: 'first',
+      End: 'last',
+      PageUp: 'first',
+      PageDown: 'last',
+      Escape: 'exit'
+    }, options.keyBindings);
+    this.currentFocusedItem = null;
+    this.currIndex = null;
+    this.mapActions = {
+      previous: this.focusPrevious.bind(this),
+      next: this.focusNext.bind(this),
+      first: this.focusFirst.bind(this),
+      last: this.focusLast.bind(this),
+      exit: this.exit.bind(this),
+      enter: () => null
+    };
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.register = this.register.bind(this);
+    this.focusFirst = this.focusFirst.bind(this);
+    this.focusLast = this.focusLast.bind(this);
+    this.isGroupActive = this.isGroupActive.bind(this);
+    this.focusNext = this.focusNext.bind(this);
+    this.focusPrevious = this.focusPrevious.bind(this);
+    this.focusItem = this.focusItem.bind(this);
+    this.focusCurrent = this.focusCurrent.bind(this);
+    this.getHotKeysParams = this.getHotKeysParams.bind(this);
+  }
+
+  getHotKeysParams() {
+    const item = this.currentFocusedItem;
+    const {
+      index
+    } = dsUtilities.get(item, ['dataset'], {});
+    return {
+      item,
+      index
+    };
+  }
+
+  activate() {
+    const {
+      getContainer
+    } = this.options;
+    document.addEventListener('keydown', this.handleKeyDown, true);
+    registerHotkeys(this.options.hotKeys, this.getHotKeysParams, getContainer);
+  }
+
+  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) {
+    let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    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);
+    }
+  }
+
+  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);
+    }
+
+    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();
+    }
+
+    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 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];
+  }
+
+}
+
+module.exports = FocusGroup;

package/cjs/FocusGroup/FocusGroupContext.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var FocusGroupContext = /*#__PURE__*/React__default["default"].createContext();
+
+module.exports = FocusGroupContext;

package/cjs/FocusGroup/FocusGroupManager.js

@@ -0,0 +1,117 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var dsUtilities = require('@elliemae/ds-utilities');
+var FocusGroup = require('./FocusGroup.js');
+var FocusGroupContext = require('./FocusGroupContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const noop = () => null;
+
+class FocusGroupProvider extends React.Component {
+  constructor(props) {
+    super(props);
+    this.activated = false;
+    this.focusGroup = new FocusGroup(props);
+    props.onFocusGroupSet(this);
+    this.actions = {
+      activate: this.activate.bind(this),
+      deactivate: this.deactivate.bind(this),
+      register: this.focusGroup.register,
+      unregister: this.unregister.bind(this),
+      focusFirst: this.focusGroup.focusFirst,
+      focusLast: this.focusGroup.focusLast,
+      focusItemByIndex: this.focusItemByIndex.bind(this),
+      focusItemByNode: this.focusItemByNode.bind(this),
+      focus: this.focusGroup.focusCurrent,
+      isGroupActive: this.focusGroup.isGroupActive,
+      focusNext: this.focusGroup.focusNext,
+      focusPrevious: this.focusGroup.focusPrevious
+    };
+  }
+
+  componentDidMount() {
+    const {
+      autoFocusOnMount
+    } = this.props;
+    this.activate();
+
+    if (autoFocusOnMount) {
+      setTimeout(() => {
+        this.actions.focusFirst();
+      }, 0);
+    }
+  }
+
+  componentWillUnmount() {
+    this.deactivate();
+  }
+
+  activate() {
+    const {
+      onActivate
+    } = this.props;
+    this.focusGroup.activate();
+    this.activated = true;
+    if (dsUtilities.isFunction(onActivate)) onActivate();
+  }
+
+  deactivate() {
+    const {
+      onExitFocusGroup
+    } = this.props;
+    this.activated = false;
+    this.focusGroup.deactivate();
+
+    if (dsUtilities.isFunction(onExitFocusGroup)) {
+      onExitFocusGroup();
+    }
+  }
+
+  register(item) {
+    this.focusGroup.register(item);
+  }
+
+  unregister(item) {
+    this.focusGroup.unregister(item);
+  }
+
+  focusItemByIndex(index) {
+    if (!this.activated) this.activate();
+    setTimeout(() => {
+      this.focusGroup.focusByIndex(index);
+    }, 200);
+  }
+
+  focusItemByNode(node) {
+    if (!this.activated) this.activate();
+    const index = this.focusGroup.getItemIndexByNode(node);
+    this.focusItemByIndex(index);
+  }
+
+  render() {
+    const {
+      children
+    } = this.props;
+    return /*#__PURE__*/_jsx__default["default"](FocusGroupContext.Provider, {
+      value: this.actions
+    }, void 0, children);
+  }
+
+}
+FocusGroupProvider.defaultProps = {
+  exitWhenNoPrevious: false,
+  exitWhenNoNext: false,
+  keyBindings: {},
+  onFocus: noop,
+  onExitFocusGroup: noop,
+  onFocusPreviousGroup: noop,
+  onFocusNextGroup: noop,
+  onFocusGroupSet: noop
+};
+
+module.exports = FocusGroupProvider;

package/cjs/FocusGroup/focusGroupManagerHoc.js

@@ -0,0 +1,44 @@
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var FocusGroupManager = require('./FocusGroupManager.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["onExitFocusGroup", "onFocusPrevGroup", "focusKeyBindings"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function FocusGroupHoc(WrappedComponent) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return _ref => {
+    let {
+      onExitFocusGroup,
+      onFocusPrevGroup,
+      focusKeyBindings
+    } = _ref,
+        props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+    return /*#__PURE__*/jsxRuntime.jsx(FocusGroupManager, _objectSpread(_objectSpread({
+      keyBindings: focusKeyBindings,
+      onExitFocusGroup: onExitFocusGroup,
+      onFocusPrevGroup: onFocusPrevGroup
+    }, options), {}, {
+      children: /*#__PURE__*/jsxRuntime.jsx(WrappedComponent, _objectSpread(_objectSpread({}, props), options))
+    }));
+  };
+}
+
+module.exports = FocusGroupHoc;

package/cjs/FocusGroup/index.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var FocusGroup = require('./FocusGroup.js');
+var FocusGroupContext = require('./FocusGroupContext.js');
+var FocusGroupManager = require('./FocusGroupManager.js');
+var useFocusGroupItem = require('./useFocusGroupItem.js');
+var focusGroupManagerHoc = require('./focusGroupManagerHoc.js');
+var FocusGrid = require('./FocusGrid.js');
+
+
+
+exports.FocusGroup = FocusGroup;
+exports.FocusGroupContext = FocusGroupContext;
+exports.FocusGroupManager = FocusGroupManager;
+exports.useFocusGroupItem = useFocusGroupItem["default"];
+exports.useFocusGroupWithState = useFocusGroupItem.useFocusGroupWithState;
+exports.focusGroupManagerHoc = focusGroupManagerHoc;
+exports.FocusGrid = FocusGrid["default"];
+exports.FocusGridContext = FocusGrid.FocusGridContext;

package/cjs/FocusGroup/useFocusGroupItem.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var FocusGroupContext = require('./FocusGroupContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["register", "unregister"],
+      _excluded2 = ["register", "unregister"];
+function useFocusGroupItem() {
+  let ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let props = arguments.length > 1 ? arguments[1] : undefined;
+
+  const _ref = React.useContext(FocusGroupContext) || {},
+        {
+    register,
+    unregister
+  } = _ref,
+        otherActions = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  React.useEffect(() => {
+    if (ref.current && register) register(ref.current, props);
+    return () => {
+      if (ref.current && unregister) unregister(ref.current);
+    };
+  }); // if the focus item is not wrapped with the focus provider then return null
+
+  if (!register) return {};
+  return otherActions;
+}
+const useFocusGroupWithState = function () {
+  let ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let props = arguments.length > 1 ? arguments[1] : undefined;
+
+  const _ref2 = React.useContext(FocusGroupContext) || {},
+        {
+    register,
+    unregister
+  } = _ref2,
+        otherActions = _objectWithoutProperties__default["default"](_ref2, _excluded2);
+
+  React.useEffect(() => {
+    if (ref && register) register(ref, props);
+    return () => {
+      if (ref && unregister) unregister(ref);
+    };
+  }, [ref]); // if the focus item is not wrapped with the focus provider then return null
+
+  if (!register) return {};
+  return otherActions;
+};
+
+exports["default"] = useFocusGroupItem;
+exports.useFocusGroupWithState = useFocusGroupWithState;

package/cjs/FocusGroup/utils/getNextCellPosition.js

@@ -0,0 +1,60 @@
+'use strict';
+
+// eslint-disable-next-line max-statements
+function getNextCellPosition(_ref) {
+  let {
+    grid,
+    currentRow = 0,
+    currentCell = 0,
+    directionY,
+    directionX,
+    shouldWrapCells,
+    shouldWrapRows
+  } = _ref;
+  let nextRow = currentRow + directionY;
+  let nextCell = currentCell + directionX;
+  const rowCount = grid.length;
+  const isLeftRight = directionX !== 0;
+
+  if (!rowCount) {
+    return false;
+  }
+
+  const cellsLength = grid[0].length; // moving horizontally
+
+  if (shouldWrapCells && isLeftRight) {
+    // to left
+    if (nextCell < 0) {
+      nextCell = cellsLength - 1;
+      nextRow -= 1;
+    }
+
+    if (nextCell >= cellsLength) {
+      nextCell = 0;
+      nextRow += 1;
+    }
+  } // moving vertically
+
+
+  if (shouldWrapRows && !isLeftRight) {
+    // to top
+    if (nextRow < 0) {
+      nextCell -= 1;
+      nextRow = rowCount - 1;
+
+      if (grid[nextRow] && nextCell >= 0 && !grid[nextRow][nextCell]) {
+        nextRow -= 1;
+      }
+    } else if (nextRow >= rowCount || !grid[nextRow][nextCell]) {
+      nextRow = 0;
+      nextCell += 1;
+    }
+  }
+
+  return {
+    cellIndex: nextCell,
+    rowIndex: nextRow
+  };
+}
+
+module.exports = getNextCellPosition;