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

package/{dist/esm → esm}/FocusGroup/FocusGroup.js

@@ -1,51 +1,86 @@
-import * as React from "react";
-import { isFunction, get } from "@elliemae/ds-utilities";
-import hotkeys from "hotkeys-js";
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { get, isFunction } from '@elliemae/ds-utilities';
+import hotkeys from 'hotkeys-js';
+
+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(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"
+  orientation: 'vertical'
 };
-const safeCallAction = (e, fun, ...args) => {
+
+const safeCallAction = function (e, fun) {
   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(...args);
   }
 };
-const registerHotkeys = (hotKeys = {}, params, getContainer = () => document) => {
-  Object.keys(hotKeys).forEach((hotkey) => {
-    const { options, handler, allowDocumentHandler = false } = hotKeys[hotkey];
-    const parameterizedHandler = (e) => {
+
+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 = isFunction(params) ? params() : params;
-      if (!allowDocumentHandler && handlerParams.item !== document.activeElement)
-        return;
+      if (!allowDocumentHandler && handlerParams.item !== document.activeElement) return;
       e.preventDefault();
       handler(handlerParams);
     };
-    hotkeys(hotkey, { element: getContainer(), ...options }, parameterizedHandler);
+
+    hotkeys(hotkey, _objectSpread({
+      element: getContainer()
+    }, options), parameterizedHandler);
   });
 };
-const unregisterHotKeys = (hotKeys = {}) => {
-  Object.keys(hotKeys).forEach((hotkey) => {
+
+const unregisterHotKeys = function () {
+  let hotKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  Object.keys(hotKeys).forEach(hotkey => {
     hotkeys.unbind(hotkey);
   });
 };
+
 const noop = () => null;
+
 class FocusGroup {
-  constructor(options = {}) {
+  constructor() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     this.items = [];
-    this.options = { ...defaultOptions, ...options };
-    const { orientation } = this.options;
-    this.keyBindings = {
-      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.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 = {
@@ -67,154 +102,200 @@ class FocusGroup {
     this.focusCurrent = this.focusCurrent.bind(this);
     this.getHotKeysParams = this.getHotKeysParams.bind(this);
   }
+
   getHotKeysParams() {
     const item = this.currentFocusedItem;
-    const { index } = get(item, ["dataset"], {});
+    const {
+      index
+    } = get(item, ['dataset'], {});
     return {
       item,
       index
     };
   }
+
   activate() {
-    const { getContainer } = this.options;
-    document.addEventListener("keydown", this.handleKeyDown, true);
+    const {
+      getContainer
+    } = this.options;
+    document.addEventListener('keydown', this.handleKeyDown, true);
     registerHotkeys(this.options.hotKeys, this.getHotKeysParams, getContainer);
   }
+
   deactivate() {
-    document.removeEventListener("keydown", this.handleKeyDown, true);
+    document.removeEventListener('keydown', this.handleKeyDown, true);
     unregisterHotKeys(this.options.hotKeys);
   }
+
   handleKeyDown(e) {
-    if (!this.isGroupActive())
-      return;
+    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));
+    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);
+
+  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);
+    if (index > -1) this.items.splice(index, 1);
   }
+
   exit() {
-    const { onExitFocusGroup } = this.options;
+    const {
+      onExitFocusGroup
+    } = this.options;
     onExitFocusGroup();
   }
+
   focusItem(node) {
     if (this.currentFocusedItem && this.currentFocusedItem !== node) {
       this.currentFocusedItem.specialOnBlur();
-      this.currentFocusedItem.setAttribute("tabindex", -1);
+      this.currentFocusedItem.setAttribute('tabindex', -1);
     }
-    if (!node)
-      return;
+
+    if (!node) return;
     this.currentFocusedItem = node;
-    node.setAttribute("tabindex", 0);
+    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;
+    const {
+      onFocusNextGroup
+    } = this.options;
     this.exit();
     onFocusNextGroup();
   }
+
   focusPreviousGroup() {
-    const { onFocusPreviousGroup } = this.options;
+    const {
+      onFocusPreviousGroup
+    } = this.options;
     this.exit();
     onFocusPreviousGroup();
   }
+
   getNextItem() {
-    const { loop } = this.options;
+    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 {
+      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);
+    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];
   }
+
 }
-var FocusGroup_default = FocusGroup;
-export {
-  FocusGroup,
-  FocusGroup_default as default
-};
-//# sourceMappingURL=FocusGroup.js.map
+
+export { FocusGroup as default };

package/esm/FocusGroup/FocusGroupContext.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+var FocusGroupContext = /*#__PURE__*/React.createContext();
+
+export { FocusGroupContext as default };

package/{dist/esm → esm}/FocusGroup/FocusGroupManager.js

@@ -1,9 +1,11 @@
-import * as React from "react";
-import React2, { Component } from "react";
-import { isFunction } from "@elliemae/ds-utilities";
-import { FocusGroup } from "./FocusGroup";
-import { FocusGroupContext } from "./FocusGroupContext";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { Component } from 'react';
+import { isFunction } from '@elliemae/ds-utilities';
+import FocusGroup from './FocusGroup.js';
+import FocusGroupContext from './FocusGroupContext.js';
+
 const noop = () => null;
+
 class FocusGroupProvider extends Component {
   constructor(props) {
     super(props);
@@ -25,58 +27,75 @@ class FocusGroupProvider extends Component {
       focusPrevious: this.focusGroup.focusPrevious
     };
   }
+
   componentDidMount() {
-    const { autoFocusOnMount } = this.props;
+    const {
+      autoFocusOnMount
+    } = this.props;
     this.activate();
+
     if (autoFocusOnMount) {
       setTimeout(() => {
         this.actions.focusFirst();
       }, 0);
     }
   }
+
   componentWillUnmount() {
     this.deactivate();
   }
+
   activate() {
-    const { onActivate } = this.props;
+    const {
+      onActivate
+    } = this.props;
     this.focusGroup.activate();
     this.activated = true;
-    if (isFunction(onActivate))
-      onActivate();
+    if (isFunction(onActivate)) onActivate();
   }
+
   deactivate() {
-    const { onExitFocusGroup } = this.props;
+    const {
+      onExitFocusGroup
+    } = this.props;
     this.activated = false;
     this.focusGroup.deactivate();
+
     if (isFunction(onExitFocusGroup)) {
       onExitFocusGroup();
     }
   }
+
   register(item) {
     this.focusGroup.register(item);
   }
+
   unregister(item) {
     this.focusGroup.unregister(item);
   }
+
   focusItemByIndex(index) {
-    if (!this.activated)
-      this.activate();
+    if (!this.activated) this.activate();
     setTimeout(() => {
       this.focusGroup.focusByIndex(index);
     }, 200);
   }
+
   focusItemByNode(node) {
-    if (!this.activated)
-      this.activate();
+    if (!this.activated) this.activate();
     const index = this.focusGroup.getItemIndexByNode(node);
     this.focusItemByIndex(index);
   }
+
   render() {
-    const { children } = this.props;
-    return /* @__PURE__ */ React2.createElement(FocusGroupContext.Provider, {
+    const {
+      children
+    } = this.props;
+    return /*#__PURE__*/_jsx(FocusGroupContext.Provider, {
       value: this.actions
-    }, children);
+    }, void 0, children);
   }
+
 }
 FocusGroupProvider.defaultProps = {
   exitWhenNoPrevious: false,
@@ -88,10 +107,5 @@ FocusGroupProvider.defaultProps = {
   onFocusNextGroup: noop,
   onFocusGroupSet: noop
 };
-var FocusGroupManager_default = FocusGroupProvider;
-export {
-  FocusGroupProvider as FocusGroupManager,
-  FocusGroupProvider,
-  FocusGroupManager_default as default
-};
-//# sourceMappingURL=FocusGroupManager.js.map
+
+export { FocusGroupProvider as default };

package/esm/FocusGroup/focusGroupManagerHoc.js

@@ -0,0 +1,37 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import FocusGroupProvider from './FocusGroupManager.js';
+import { jsx } from 'react/jsx-runtime';
+
+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(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(_ref, _excluded);
+
+    return /*#__PURE__*/jsx(FocusGroupProvider, _objectSpread(_objectSpread({
+      keyBindings: focusKeyBindings,
+      onExitFocusGroup: onExitFocusGroup,
+      onFocusPrevGroup: onFocusPrevGroup
+    }, options), {}, {
+      children: /*#__PURE__*/jsx(WrappedComponent, _objectSpread(_objectSpread({}, props), options))
+    }));
+  };
+}
+
+export { FocusGroupHoc as default };

package/esm/FocusGroup/index.js

@@ -0,0 +1,6 @@
+export { default as FocusGroup } from './FocusGroup.js';
+export { default as FocusGroupContext } from './FocusGroupContext.js';
+export { default as FocusGroupManager } from './FocusGroupManager.js';
+export { default as useFocusGroupItem, useFocusGroupWithState } from './useFocusGroupItem.js';
+export { default as focusGroupManagerHoc } from './focusGroupManagerHoc.js';
+export { default as FocusGrid, FocusGridContext } from './FocusGrid.js';

package/esm/FocusGroup/useFocusGroupItem.js

@@ -0,0 +1,50 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { useContext, useEffect } from 'react';
+import FocusGroupContext from './FocusGroupContext.js';
+
+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 = useContext(FocusGroupContext) || {},
+        {
+    register,
+    unregister
+  } = _ref,
+        otherActions = _objectWithoutProperties(_ref, _excluded);
+
+  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 = useContext(FocusGroupContext) || {},
+        {
+    register,
+    unregister
+  } = _ref2,
+        otherActions = _objectWithoutProperties(_ref2, _excluded2);
+
+  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;
+};
+
+export { useFocusGroupItem as default, useFocusGroupWithState };

package/{dist/esm → esm}/FocusGroup/utils/getNextCellPosition.js

@@ -1,35 +1,45 @@
-import * as React from "react";
-function getNextCellPosition({
-  grid,
-  currentRow = 0,
-  currentCell = 0,
-  directionY,
-  directionX,
-  shouldWrapCells,
-  shouldWrapRows
-}) {
+// 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;
+
+  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;
       }
@@ -38,14 +48,11 @@ function getNextCellPosition({
       nextCell += 1;
     }
   }
+
   return {
     cellIndex: nextCell,
     rowIndex: nextRow
   };
 }
-var getNextCellPosition_default = getNextCellPosition;
-export {
-  getNextCellPosition_default as default,
-  getNextCellPosition
-};
-//# sourceMappingURL=getNextCellPosition.js.map
+
+export { getNextCellPosition as default };