@elliemae/ds-utilities 2.3.1-rc.0 → 2.3.1-rc.1

package/cjs/hooks/index.js

@@ -21,6 +21,7 @@ var useSetRef = require('./useSetRef.js');
 var useParentElement = require('./useParentElement.js');
 var useOnElementResize = require('./useOnElementResize.js');
 var useIsShowingEllipsis = require('./useIsShowingEllipsis.js');
+var useFocusTrap = require('./useFocusTrap.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -61,3 +62,4 @@ exports.useSetRef = useSetRef.useSetRef;
 exports.useParentElement = useParentElement.useParentElement;
 exports.useOnElementResize = useOnElementResize.useOnElementResize;
 exports.useIsShowingEllipsis = useIsShowingEllipsis.useIsShowingEllipsis;
+exports.useFocusTrap = useFocusTrap.useFocusTrap;

package/cjs/hooks/useFocusTrap.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useFocusTrap = _ref => {
+  let {
+    firstElementRef,
+    lastElementRef,
+    onKeyDown
+  } = _ref;
+  return React.useCallback(e => {
+    if (onKeyDown) onKeyDown(e); // we need to check all the condition before preventing default
+    // because we want last-element/first-element tab/shift-tab to keep working
+
+    if (e.key === 'Tab' && !e.shiftKey && e.target === lastElementRef.current && firstElementRef.current) {
+      e.preventDefault();
+      e.stopPropagation();
+      firstElementRef.current.focus();
+    }
+
+    if (e.key === 'Tab' && e.shiftKey && e.target === firstElementRef.current && lastElementRef.current) {
+      e.preventDefault();
+      e.stopPropagation();
+      lastElementRef.current.focus();
+    }
+  }, [firstElementRef, lastElementRef, onKeyDown]);
+};
+
+exports.useFocusTrap = useFocusTrap;

package/cjs/index.js

@@ -27,6 +27,7 @@ var useSetRef = require('./hooks/useSetRef.js');
 var useParentElement = require('./hooks/useParentElement.js');
 var useOnElementResize = require('./hooks/useOnElementResize.js');
 var useIsShowingEllipsis = require('./hooks/useIsShowingEllipsis.js');
+var useFocusTrap = require('./hooks/useFocusTrap.js');
 var timeUtils = require('./timeUtils.js');
 var compose = require('./compose.js');
 var platform = require('./platform.js');
@@ -103,6 +104,7 @@ exports.useSetRef = useSetRef.useSetRef;
 exports.useParentElement = useParentElement.useParentElement;
 exports.useOnElementResize = useOnElementResize.useOnElementResize;
 exports.useIsShowingEllipsis = useIsShowingEllipsis.useIsShowingEllipsis;
+exports.useFocusTrap = useFocusTrap.useFocusTrap;
 exports.addLeadingZeros = timeUtils.addLeadingZeros;
 exports.getVisibleTimeByFormat = timeUtils.getVisibleTimeByFormat;
 exports.compose = compose.compose;

package/esm/hooks/index.js

@@ -17,3 +17,4 @@ export { useSetRef } from './useSetRef.js';
 export { useParentElement } from './useParentElement.js';
 export { useOnElementResize } from './useOnElementResize.js';
 export { useIsShowingEllipsis } from './useIsShowingEllipsis.js';
+export { useFocusTrap } from './useFocusTrap.js';

package/esm/hooks/useFocusTrap.js

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+
+const useFocusTrap = _ref => {
+  let {
+    firstElementRef,
+    lastElementRef,
+    onKeyDown
+  } = _ref;
+  return useCallback(e => {
+    if (onKeyDown) onKeyDown(e); // we need to check all the condition before preventing default
+    // because we want last-element/first-element tab/shift-tab to keep working
+
+    if (e.key === 'Tab' && !e.shiftKey && e.target === lastElementRef.current && firstElementRef.current) {
+      e.preventDefault();
+      e.stopPropagation();
+      firstElementRef.current.focus();
+    }
+
+    if (e.key === 'Tab' && e.shiftKey && e.target === firstElementRef.current && lastElementRef.current) {
+      e.preventDefault();
+      e.stopPropagation();
+      lastElementRef.current.focus();
+    }
+  }, [firstElementRef, lastElementRef, onKeyDown]);
+};
+
+export { useFocusTrap };

package/esm/index.js

@@ -23,6 +23,7 @@ export { useSetRef } from './hooks/useSetRef.js';
 export { useParentElement } from './hooks/useParentElement.js';
 export { useOnElementResize } from './hooks/useOnElementResize.js';
 export { useIsShowingEllipsis } from './hooks/useIsShowingEllipsis.js';
+export { useFocusTrap } from './hooks/useFocusTrap.js';
 export { addLeadingZeros, getVisibleTimeByFormat } from './timeUtils.js';
 export { compose } from './compose.js';
 export { DOCUMENT, WINDOW } from './platform.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-utilities",
-  "version": "2.3.1-rc.0",
+  "version": "2.3.1-rc.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Utilities",
   "module": "./esm/index.js",
@@ -91,6 +91,10 @@
       "import": "./esm/hooks/useHotkeys.js",
       "require": "./cjs/hooks/useHotkeys.js"
     },
+    "./hooks/useFocusTrap": {
+      "import": "./esm/hooks/useFocusTrap.js",
+      "require": "./cjs/hooks/useFocusTrap.js"
+    },
     "./hooks/useExpandState": {
       "import": "./esm/hooks/useExpandState.js",
       "require": "./cjs/hooks/useExpandState.js"

package/types/hooks/index.d.ts

@@ -17,3 +17,4 @@ export * from './useSetRef';
 export * from './useParentElement';
 export * from './useOnElementResize';
 export * from './useIsShowingEllipsis';
+export * from './useFocusTrap';

package/types/hooks/useFocusTrap.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare type UseFocusTrapT = <T extends HTMLElement = HTMLElement, K extends HTMLElement = HTMLElement>({ firstElementRef, lastElementRef, onKeyDown, }: {
+    firstElementRef: React.MutableRefObject<T | null>;
+    lastElementRef: React.MutableRefObject<K | null>;
+    onKeyDown?: (e: KeyboardEvent) => void;
+}) => (e: KeyboardEvent) => void;
+export declare const useFocusTrap: UseFocusTrapT;
+export {};