@elliemae/ds-shared 2.3.0-next.0 → 3.0.0-alpha.0

package/dist/esm/FocusGroup/FocusGrid.js

@@ -0,0 +1,151 @@
+import * as React from "react";
+import React2, { createContext, useEffect, useMemo, useRef } from "react";
+import { isFunction, runAll, get, useHotkeys, mergeRefs } from "@elliemae/ds-utilities";
+import { getNextCellPosition } from "./utils/getNextCellPosition";
+const FocusGridContext = createContext();
+const { Provider } = FocusGridContext;
+const preventDefault = (e) => e.preventDefault();
+function registerHotKeysHooks(hotKeys, { focusedRow, focusedCell }) {
+  Object.keys(hotKeys).forEach((key) => {
+    const { handler, options } = hotKeys[key];
+    useHotkeys({
+      keys: key,
+      handler: (e) => {
+        e.preventDefault();
+        handler({
+          rowIndex: focusedRow.current,
+          cellIndex: focusedCell.current
+        });
+      },
+      options
+    });
+  });
+}
+const FocusGridProvider = ({
+  shouldWrapRows = false,
+  shouldWrapCells = false,
+  shouldRefocus = true,
+  children,
+  keyBindings,
+  hotKeys
+}) => {
+  const focusedRow = useRef();
+  const focusedCell = useRef();
+  const grid = useRef([]);
+  const containerRef = useRef(document);
+  const child = React2.Children.only(children);
+  const decoratedChild = React2.cloneElement(child, {
+    innerRef: mergeRefs(child.props.innerRef, containerRef)
+  });
+  const getNode = ({ rowIndex, cellIndex }) => get(grid.current, [rowIndex, cellIndex]);
+  const register = (node, rowIndex, columnIndex) => {
+    if (!node)
+      return;
+    if (!Array.isArray(grid.current[rowIndex])) {
+      grid.current[rowIndex] = [];
+    }
+    if (rowIndex === 0 && columnIndex === 0) {
+      node.setAttribute("tabindex", 0);
+    } else {
+      node.setAttribute("tabindex", -1);
+    }
+    node.onfocus = () => {
+      const prevNode = getNode({
+        rowIndex: focusedRow.current,
+        cellIndex: focusedCell.current
+      });
+      if (prevNode)
+        prevNode.setAttribute("tabindex", -1);
+      node.setAttribute("tabindex", 0);
+      focusedRow.current = rowIndex;
+      focusedCell.current = columnIndex;
+    };
+    grid.current[rowIndex][columnIndex] = node;
+  };
+  useEffect(() => {
+    if (shouldRefocus) {
+      const rowIndex = focusedRow.current;
+      const cellIndex = focusedCell.current;
+      const node = get(grid.current, [rowIndex, cellIndex]);
+      if (node)
+        node.focus();
+    }
+  });
+  const focusNextCell = (directionY, directionX, position) => {
+    const { rowIndex, cellIndex } = position || getNextCellPosition({
+      grid: grid.current,
+      currentCell: focusedCell.current,
+      currentRow: focusedRow.current,
+      directionX,
+      directionY,
+      shouldWrapCells,
+      shouldWrapRows
+    });
+    const node = getNode({ rowIndex, cellIndex });
+    if (node) {
+      node.focus();
+      focusedRow.current = rowIndex;
+      focusedCell.current = cellIndex;
+    }
+  };
+  registerHotKeysHooks(hotKeys, { focusedCell, focusedRow });
+  const defaultKeyBindings = {
+    ArrowUp: runAll(preventDefault, () => focusNextCell(-1, 0)),
+    ArrowRight: runAll(preventDefault, () => focusNextCell(0, 1)),
+    ArrowDown: runAll(preventDefault, () => focusNextCell(1, 0)),
+    ArrowLeft: runAll(preventDefault, () => focusNextCell(0, -1)),
+    Home: runAll(preventDefault, (e) => {
+      let rowIndex = focusedRow.current;
+      if (e.ctrlKey) {
+        rowIndex = 0;
+      }
+      focusNextCell(0, 0, { rowIndex, cellIndex: 0 });
+    }),
+    End: runAll(preventDefault, (e) => {
+      let rowIndex = focusedRow.current;
+      if (e.ctrlKey) {
+        rowIndex = grid.current.length - 1;
+      }
+      focusNextCell(0, 0, { rowIndex, cellIndex: grid.current[0].length - 1 });
+    }),
+    ...keyBindings
+  };
+  const nextKeyBindings = isFunction(keyBindings) ? keyBindings({
+    defaultBindings: defaultKeyBindings,
+    rowIndex: focusedRow.current,
+    cellIndex: focusedCell.current
+  }) : { ...defaultKeyBindings, ...keyBindings };
+  const onKeyDown = (e) => {
+    if (e.target.tagName.toLowerCase() === "input")
+      return;
+    const action = nextKeyBindings[e.key];
+    if (isFunction(action))
+      action(e);
+  };
+  const activate = (container) => {
+    container.addEventListener("keydown", onKeyDown, true);
+  };
+  const deactivate = (container) => {
+    container.removeEventListener("keydown", onKeyDown, true);
+  };
+  useEffect(() => {
+    activate(containerRef.current);
+    return () => {
+      deactivate(containerRef.current);
+    };
+  }, []);
+  const valueProvider = useMemo(() => ({
+    register
+  }), []);
+  return /* @__PURE__ */ React2.createElement(Provider, {
+    value: valueProvider
+  }, decoratedChild);
+};
+var FocusGrid_default = FocusGridProvider;
+export {
+  FocusGridProvider as FocusGrid,
+  FocusGridContext,
+  FocusGridProvider,
+  FocusGrid_default as default
+};
+//# sourceMappingURL=FocusGrid.js.map

package/dist/esm/FocusGroup/FocusGrid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/FocusGroup/FocusGrid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { createContext, useEffect, useMemo, useRef } from 'react';\nimport { isFunction, runAll, get, useHotkeys, mergeRefs } from '@elliemae/ds-utilities';\nimport { getNextCellPosition } from './utils/getNextCellPosition';\n\nconst FocusGridContext = createContext();\nconst { Provider } = FocusGridContext;\n\nconst preventDefault = e => e.preventDefault();\n\nfunction registerHotKeysHooks(hotKeys, { focusedRow, focusedCell }) {\n  Object.keys(hotKeys).forEach(key => {\n    const { handler, options } = hotKeys[key];\n    useHotkeys({\n      keys: key,\n      handler: e => {\n        e.preventDefault();\n        handler({\n          rowIndex: focusedRow.current,\n          cellIndex: focusedCell.current,\n        });\n      },\n      options,\n    });\n  });\n}\n\n// eslint-disable-next-line max-statements\nconst FocusGridProvider = ({\n  shouldWrapRows = false,\n  shouldWrapCells = false,\n  shouldRefocus = true,\n  children,\n  keyBindings,\n  hotKeys,\n}) => {\n  const focusedRow = useRef();\n  const focusedCell = useRef();\n  const grid = useRef([]);\n  const containerRef = useRef(document);\n  const child = React.Children.only(children);\n  const decoratedChild = React.cloneElement(child, {\n    innerRef: mergeRefs(child.props.innerRef, containerRef),\n  });\n\n  const getNode = ({ rowIndex, cellIndex }) =>\n    get(grid.current, [rowIndex, cellIndex]);\n\n  const register = (node, rowIndex, columnIndex) => {\n    if (!node) return;\n    if (!Array.isArray(grid.current[rowIndex])) {\n      grid.current[rowIndex] = [];\n    }\n\n    if (rowIndex === 0 && columnIndex === 0) {\n      node.setAttribute('tabindex', 0);\n    } else {\n      node.setAttribute('tabindex', -1);\n    }\n\n    node.onfocus = () => {\n      const prevNode = getNode({\n        rowIndex: focusedRow.current,\n        cellIndex: focusedCell.current,\n      });\n\n      if (prevNode) prevNode.setAttribute('tabindex', -1);\n\n      node.setAttribute('tabindex', 0);\n      focusedRow.current = rowIndex;\n      focusedCell.current = columnIndex;\n    };\n    grid.current[rowIndex][columnIndex] = node;\n  };\n\n  useEffect(() => {\n    if (shouldRefocus) {\n      const rowIndex = focusedRow.current;\n      const cellIndex = focusedCell.current;\n\n      const node = get(grid.current, [rowIndex, cellIndex]);\n      if (node) node.focus();\n    }\n  });\n\n  const focusNextCell = (directionY, directionX, position) => {\n    const { rowIndex, cellIndex } =\n      position ||\n      getNextCellPosition({\n        grid: grid.current,\n        currentCell: focusedCell.current,\n        currentRow: focusedRow.current,\n        directionX,\n        directionY,\n        shouldWrapCells,\n        shouldWrapRows,\n      });\n\n    const node = getNode({ rowIndex, cellIndex });\n\n    // can focus\n    if (node) {\n      node.focus();\n      focusedRow.current = rowIndex;\n      focusedCell.current = cellIndex;\n    }\n  };\n\n  registerHotKeysHooks(hotKeys, { focusedCell, focusedRow });\n\n  const defaultKeyBindings = {\n    ArrowUp: runAll(preventDefault, () => focusNextCell(-1, 0)),\n    ArrowRight: runAll(preventDefault, () => focusNextCell(0, 1)),\n    ArrowDown: runAll(preventDefault, () => focusNextCell(1, 0)),\n    ArrowLeft: runAll(preventDefault, () => focusNextCell(0, -1)),\n    Home: runAll(preventDefault, e => {\n      let rowIndex = focusedRow.current;\n      if (e.ctrlKey) {\n        rowIndex = 0;\n      }\n      focusNextCell(0, 0, { rowIndex, cellIndex: 0 });\n    }),\n    End: runAll(preventDefault, e => {\n      let rowIndex = focusedRow.current;\n      if (e.ctrlKey) {\n        rowIndex = grid.current.length - 1;\n      }\n      focusNextCell(0, 0, { rowIndex, cellIndex: grid.current[0].length - 1 });\n    }),\n    ...keyBindings,\n  };\n  const nextKeyBindings = isFunction(keyBindings)\n    ? keyBindings({\n        defaultBindings: defaultKeyBindings,\n        rowIndex: focusedRow.current,\n        cellIndex: focusedCell.current,\n      })\n    : { ...defaultKeyBindings, ...keyBindings };\n\n  const onKeyDown = e => {\n    if (e.target.tagName.toLowerCase() === 'input') return;\n    const action = nextKeyBindings[e.key];\n    if (isFunction(action)) action(e);\n  };\n\n  const activate = container => {\n    container.addEventListener('keydown', onKeyDown, true);\n  };\n\n  const deactivate = container => {\n    container.removeEventListener('keydown', onKeyDown, true);\n  };\n\n  useEffect(() => {\n    activate(containerRef.current);\n    return () => {\n      deactivate(containerRef.current);\n    };\n  }, []);\n\n  const valueProvider = useMemo(\n    () => ({\n      register,\n    }),\n    [],\n  );\n\n  return <Provider value={valueProvider}>{decoratedChild}</Provider>;\n};\n\nexport { FocusGridProvider, FocusGridProvider as FocusGrid, FocusGridContext };\nexport default FocusGridProvider;\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -1,86 +1,51 @@
-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; }
+import * as React from "react";
+import { isFunction, get } from "@elliemae/ds-utilities";
+import hotkeys from "hotkeys-js";
 const defaultOptions = {
-  orientation: 'vertical'
+  orientation: "vertical"
 };
-
-const safeCallAction = function (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(...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 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;
+      if (!allowDocumentHandler && handlerParams.item !== document.activeElement)
+        return;
       e.preventDefault();
       handler(handlerParams);
     };
-
-    hotkeys(hotkey, _objectSpread({
-      element: getContainer()
-    }, options), parameterizedHandler);
+    hotkeys(hotkey, { element: getContainer(), ...options }, parameterizedHandler);
   });
 };
-
-const unregisterHotKeys = function () {
-  let hotKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  Object.keys(hotKeys).forEach(hotkey => {
+const unregisterHotKeys = (hotKeys = {}) => {
+  Object.keys(hotKeys).forEach((hotkey) => {
     hotkeys.unbind(hotkey);
   });
 };
-
 const noop = () => null;
-
 class FocusGroup {
-  constructor() {
-    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  constructor(options = {}) {
     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.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.currentFocusedItem = null;
     this.currIndex = null;
     this.mapActions = {
@@ -102,200 +67,154 @@ 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) {
-    let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    const afterIndex = this.items.findIndex(item => item.compareDocumentPosition(node) === Node.DOCUMENT_POSITION_PRECEDING);
+  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);
     }
   }
-
   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];
   }
-
 }
-
-export { FocusGroup as default };
+var FocusGroup_default = FocusGroup;
+export {
+  FocusGroup,
+  FocusGroup_default as default
+};
+//# sourceMappingURL=FocusGroup.js.map

package/dist/esm/FocusGroup/FocusGroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/FocusGroup/FocusGroup.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-param-reassign */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { isFunction, get } from '@elliemae/ds-utilities';\nimport hotkeys from 'hotkeys-js';\n\nconst defaultOptions = {\n  orientation: 'vertical',\n};\n\nconst safeCallAction = (e, fun, ...args) => {\n  if (isFunction(fun)) {\n    e.preventDefault();\n    fun(...args);\n  }\n};\n\nconst registerHotkeys = (\n  hotKeys = {},\n  params,\n  getContainer = () => document,\n) => {\n  Object.keys(hotKeys).forEach((hotkey) => {\n    const { options, handler, allowDocumentHandler = false } = hotKeys[hotkey];\n    const parameterizedHandler = (e) => {\n      const handlerParams = isFunction(params) ? params() : params;\n      if (\n        !allowDocumentHandler &&\n        handlerParams.item !== document.activeElement\n      )\n        return;\n      e.preventDefault();\n      handler(handlerParams);\n    };\n    hotkeys(\n      hotkey,\n      { element: getContainer(), ...options },\n      parameterizedHandler,\n    );\n  });\n};\n\nconst unregisterHotKeys = (hotKeys = {}) => {\n  Object.keys(hotKeys).forEach((hotkey) => {\n    hotkeys.unbind(hotkey);\n  });\n};\n\nconst noop = () => null;\n\nclass FocusGroup {\n  items = [];\n\n  constructor(options = {}) {\n    this.options = { ...defaultOptions, ...options };\n\n    const { orientation } = this.options;\n\n    this.keyBindings = {\n      ArrowUp: orientation !== 'horizontal' && 'previous',\n      ArrowRight: orientation !== 'vertical' && 'next',\n      ArrowDown: orientation !== 'horizontal' && 'next',\n      ArrowLeft: orientation !== 'vertical' && 'previous',\n      Home: 'first',\n      End: 'last',\n      PageUp: 'first',\n      PageDown: 'last',\n      Escape: 'exit',\n      ...options.keyBindings,\n    };\n\n    this.currentFocusedItem = null;\n    this.currIndex = null;\n\n    this.mapActions = {\n      previous: this.focusPrevious.bind(this),\n      next: this.focusNext.bind(this),\n      first: this.focusFirst.bind(this),\n      last: this.focusLast.bind(this),\n      exit: this.exit.bind(this),\n      enter: () => null,\n    };\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.register = this.register.bind(this);\n    this.focusFirst = this.focusFirst.bind(this);\n    this.focusLast = this.focusLast.bind(this);\n    this.isGroupActive = this.isGroupActive.bind(this);\n    this.focusNext = this.focusNext.bind(this);\n    this.focusPrevious = this.focusPrevious.bind(this);\n    this.focusItem = this.focusItem.bind(this);\n    this.focusCurrent = this.focusCurrent.bind(this);\n    this.getHotKeysParams = this.getHotKeysParams.bind(this);\n  }\n\n  getHotKeysParams() {\n    const item = this.currentFocusedItem;\n    const { index } = get(item, ['dataset'], {});\n    return {\n      item,\n      index,\n    };\n  }\n\n  activate() {\n    const { getContainer } = this.options;\n    document.addEventListener('keydown', this.handleKeyDown, true);\n    registerHotkeys(this.options.hotKeys, this.getHotKeysParams, getContainer);\n  }\n\n  deactivate() {\n    document.removeEventListener('keydown', this.handleKeyDown, true);\n    unregisterHotKeys(this.options.hotKeys);\n  }\n\n  handleKeyDown(e) {\n    if (!this.isGroupActive()) return;\n    this.executeActionByEvent(e);\n  }\n\n  executeActionByEvent(e) {\n    const actions = Array.isArray(this.keyBindings[e.key])\n      ? this.keyBindings[e.key]\n      : [this.keyBindings[e.key]];\n    return actions.map((action) =>\n      typeof action === 'string'\n        ? safeCallAction(e, this.mapActions[action])\n        : safeCallAction(e, action),\n    );\n  }\n\n  register(node, props = {}) {\n    const afterIndex = this.items.findIndex(\n      (item) =>\n        item.compareDocumentPosition(node) === Node.DOCUMENT_POSITION_PRECEDING,\n    );\n    node.specialOnFocus = props.onFocus || noop;\n    node.specialOnBlur = props.onBlur || noop;\n    node.onclick = () => this.focusItem(node);\n    node.onfocus = () => {\n      this.focusItem(node);\n    };\n    if (afterIndex === -1) {\n      this.items.push(node);\n    } else {\n      this.items.splice(afterIndex, 0, node);\n    }\n  }\n\n  unregister(node) {\n    const index = this.getItemIndexByNode(node);\n    if (index > -1) this.items.splice(index, 1);\n  }\n\n  exit() {\n    const { onExitFocusGroup } = this.options;\n    onExitFocusGroup();\n  }\n\n  focusItem(node) {\n    if (this.currentFocusedItem && this.currentFocusedItem !== node) {\n      this.currentFocusedItem.specialOnBlur();\n      this.currentFocusedItem.setAttribute('tabindex', -1);\n    }\n    if (!node) return;\n    this.currentFocusedItem = node;\n    node.setAttribute('tabindex', 0);\n    node.focus();\n    node.specialOnFocus();\n  }\n\n  focusNext() {\n    const item = this.getNextItem();\n    this.focusItem(item);\n  }\n\n  focusByNode(node) {\n    const index = this.getItemIndexByNode(node);\n    this.focusByIndex(index);\n  }\n\n  focusByIndex(index) {\n    const item = this.getItemByIndex(index);\n    this.focusItem(item);\n  }\n\n  focusPrevious() {\n    const prevItem = this.getPreviousItem();\n    this.focusItem(prevItem);\n  }\n\n  focusFirst() {\n    const item = this.getFirstItem();\n    this.focusItem(item);\n  }\n\n  focusLast() {\n    const item = this.getLastItem();\n    this.focusItem(item);\n  }\n\n  focusCurrent() {\n    this.focusItem(this.currentFocusedItem);\n  }\n\n  focusNextGroup() {\n    const { onFocusNextGroup } = this.options;\n    this.exit();\n    onFocusNextGroup();\n  }\n\n  focusPreviousGroup() {\n    const { onFocusPreviousGroup } = this.options;\n    this.exit();\n    onFocusPreviousGroup();\n  }\n\n  getNextItem() {\n    const { loop } = this.options;\n    const currentIndex = this.getFocusedIndex();\n    const supposedNextIndex = currentIndex + 1;\n    if (!this.checkCanFocusNext(supposedNextIndex)) {\n      return loop ? this.getFirstItem() : this.focusNextGroup();\n    }\n    return this.getItemByIndex(supposedNextIndex);\n  }\n\n  getPreviousItem() {\n    const { loop } = this.options;\n    const currentIndex = this.getFocusedIndex();\n    const supposedPrevIndex = currentIndex - 1;\n    if (!this.checkCanFocusPrev(supposedPrevIndex)) {\n      return loop ? this.getLastItem() : this.focusPreviousGroup();\n    }\n    return this.getItemByIndex(supposedPrevIndex);\n  }\n\n  checkCanFocusNext(index) {\n    return this.items.length > index;\n  }\n\n  checkCanFocusPrev(index) {\n    return index >= 0;\n  }\n\n  getItemByIndex(index) {\n    return this.items[index];\n  }\n\n  getItemIndexByNode(node) {\n    return this.items.findIndex((item) => item === node);\n  }\n\n  getFocusedIndex() {\n    return this.getItemIndexByNode(document.activeElement);\n  }\n\n  getFocusedItem() {\n    const index = this.getFocusedIndex();\n    return index > -1 && this.items[index];\n  }\n\n  isGroupActive() {\n    return this.getFocusedIndex() !== -1;\n  }\n\n  getFirstItem() {\n    return !!this.items.length && this.items[0];\n  }\n\n  getLastItem() {\n    return !!this.items.length && this.items[this.items.length - 1];\n  }\n}\n\nexport { FocusGroup };\nexport default FocusGroup;"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/FocusGroup/FocusGroupContext.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import React2 from "react";
+const FocusGroupContext = React2.createContext();
+var FocusGroupContext_default = FocusGroupContext;
+export {
+  FocusGroupContext,
+  FocusGroupContext_default as default
+};
+//# sourceMappingURL=FocusGroupContext.js.map

package/dist/esm/FocusGroup/FocusGroupContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/FocusGroup/FocusGroupContext.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\n\nconst FocusGroupContext = React.createContext();\nexport { FocusGroupContext };\nexport default FocusGroupContext;\n"],
+  "mappings": "AAAA;ACAA;AAEA,MAAM,oBAAoB,OAAM;AAEhC,IAAO,4BAAQ;",
+  "names": []
+}