@elliemae/ds-utilities 2.3.0-next.15 → 2.3.0-next.19

package/cjs/hooks/index.js

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

package/cjs/hooks/useCallbackAfterRender.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useCallbackAfterRender = () => {
+  const lastRun = React.useRef(null);
+  React.useLayoutEffect(() => {
+    var _lastRun$current;
+
+    (_lastRun$current = lastRun.current) === null || _lastRun$current === void 0 ? void 0 : _lastRun$current.call(lastRun);
+    lastRun.current = null;
+  });
+  return callback => {
+    lastRun.current = callback; // schedule callback after render
+  };
+};
+
+exports.useCallbackAfterRender = useCallbackAfterRender;

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,8 @@ 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 useCallbackAfterRender = require('./hooks/useCallbackAfterRender.js');
+var useFocusTrap = require('./hooks/useFocusTrap.js');
 var timeUtils = require('./timeUtils.js');
 var compose = require('./compose.js');
 var platform = require('./platform.js');
@@ -103,6 +105,8 @@ exports.useSetRef = useSetRef.useSetRef;
 exports.useParentElement = useParentElement.useParentElement;
 exports.useOnElementResize = useOnElementResize.useOnElementResize;
 exports.useIsShowingEllipsis = useIsShowingEllipsis.useIsShowingEllipsis;
+exports.useCallbackAfterRender = useCallbackAfterRender.useCallbackAfterRender;
+exports.useFocusTrap = useFocusTrap.useFocusTrap;
 exports.addLeadingZeros = timeUtils.addLeadingZeros;
 exports.getVisibleTimeByFormat = timeUtils.getVisibleTimeByFormat;
 exports.compose = compose.compose;

package/esm/hooks/index.js

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

package/esm/hooks/useCallbackAfterRender.js

@@ -0,0 +1,16 @@
+import { useRef, useLayoutEffect } from 'react';
+
+const useCallbackAfterRender = () => {
+  const lastRun = useRef(null);
+  useLayoutEffect(() => {
+    var _lastRun$current;
+
+    (_lastRun$current = lastRun.current) === null || _lastRun$current === void 0 ? void 0 : _lastRun$current.call(lastRun);
+    lastRun.current = null;
+  });
+  return callback => {
+    lastRun.current = callback; // schedule callback after render
+  };
+};
+
+export { useCallbackAfterRender };

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,8 @@ 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 { useCallbackAfterRender } from './hooks/useCallbackAfterRender.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.0-next.15",
+  "version": "2.3.0-next.19",
   "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"
@@ -107,6 +111,10 @@
       "import": "./esm/hooks/useCancellableDelayedCallback.js",
       "require": "./cjs/hooks/useCancellableDelayedCallback.js"
     },
+    "./hooks/useCallbackAfterRender": {
+      "import": "./esm/hooks/useCallbackAfterRender.js",
+      "require": "./cjs/hooks/useCallbackAfterRender.js"
+    },
     "./hooks": {
       "import": "./esm/hooks/index.js",
       "require": "./cjs/hooks/index.js"

package/types/hooks/index.d.ts

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

package/types/hooks/useCallbackAfterRender.d.ts

@@ -0,0 +1,3 @@
+export declare const useCallbackAfterRender: () => Callback;
+declare type Callback = (callback: () => void) => void;
+export {};

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 {};