@elliemae/ds-utilities 2.4.1 → 2.4.2-rc.11

package/cjs/hooks/index.js

@@ -64,4 +64,5 @@ exports.useParentElement = useParentElement.useParentElement;
 exports.useOnElementResize = useOnElementResize.useOnElementResize;
 exports.useIsShowingEllipsis = useIsShowingEllipsis.useIsShowingEllipsis;
 exports.useCallbackAfterRender = useCallbackAfterRender.useCallbackAfterRender;
+exports.UseFocusTrapWithSchema = useFocusTrap.UseFocusTrapWithSchema;
 exports.useFocusTrap = useFocusTrap.useFocusTrap;

package/cjs/hooks/useFocusTrap.js

@@ -3,13 +3,65 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 
-const useFocusTrap = _ref => {
-  let {
+const useFocusTrapProps = {
+  firstElementRef: 'object',
+  lastElementRef: 'object',
+  onKeyDown: 'function'
+};
+
+const getVariableType = arg => {
+  if (Array.isArray(arg)) return 'array';
+  if (arg === null) return 'null';
+  if (arg === undefined) return 'undefined';
+  return typeof arg;
+};
+
+const throwTypeError = (validPropKey, invalidProp) => {
+  throw new Error("Warning: You are trying to pass a not valid \"".concat(validPropKey, "\" property to use a useFocusTrap hook, please provide a valid type.\n\n  Received: ").concat(getVariableType(invalidProp), "\n  Expected: ").concat(useFocusTrapProps[validPropKey], "\n  "));
+};
+
+const throwRequiredError = validPropKey => {
+  throw new Error("Warning: Please provide a \"".concat(validPropKey, "\" property to use a useFocusTrap hook, this property is required."));
+};
+
+const validateProps = componentProps => {
+  if (componentProps.firstElementRef === undefined) {
+    throwRequiredError('firstElementRef');
+  }
+
+  if (componentProps.lastElementRef === undefined) {
+    throwRequiredError('lastElementRef');
+  }
+
+  if (componentProps.firstElementRef && typeof componentProps.firstElementRef !== 'object') {
+    throwTypeError('firstElementRef', componentProps.firstElementRef);
+  }
+
+  if (componentProps.lastElementRef && typeof componentProps.lastElementRef !== 'object') {
+    throwTypeError('lastElementRef', componentProps.lastElementRef);
+  }
+
+  if (componentProps.onKeyDown && typeof componentProps.onKeyDown !== 'function') {
+    throwTypeError('onKeyDown', componentProps.onKeyDown);
+  }
+};
+
+const propTypes = {
+  firstElementRef: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.oneOf([null]), dsPropsHelpers.PropTypes.node]).description('Reference to the first element in the focus trap.').isRequired,
+  lastElementRef: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.oneOf([null]), dsPropsHelpers.PropTypes.node]).description('Reference to the second element in the focus trap.').isRequired,
+  onKeyDown: dsPropsHelpers.PropTypes.func.description('Optional onKeyDown callback.')
+};
+
+const useFocusTrap = props => {
+  // We need to investigate how to validate references with useValidateTypescriptPropTypes.
+  React.useEffect(() => validateProps(props), [props]);
+  const {
     firstElementRef,
     lastElementRef,
     onKeyDown
-  } = _ref;
+  } = props;
   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
@@ -28,4 +80,8 @@ const useFocusTrap = _ref => {
   }, [firstElementRef, lastElementRef, onKeyDown]);
 };
 
+const UseFocusTrapWithSchema = dsPropsHelpers.describe(useFocusTrap);
+UseFocusTrapWithSchema.propTypes = propTypes;
+
+exports.UseFocusTrapWithSchema = UseFocusTrapWithSchema;
 exports.useFocusTrap = useFocusTrap;

package/cjs/index.js

@@ -106,6 +106,7 @@ exports.useParentElement = useParentElement.useParentElement;
 exports.useOnElementResize = useOnElementResize.useOnElementResize;
 exports.useIsShowingEllipsis = useIsShowingEllipsis.useIsShowingEllipsis;
 exports.useCallbackAfterRender = useCallbackAfterRender.useCallbackAfterRender;
+exports.UseFocusTrapWithSchema = useFocusTrap.UseFocusTrapWithSchema;
 exports.useFocusTrap = useFocusTrap.useFocusTrap;
 exports.addLeadingZeros = timeUtils.addLeadingZeros;
 exports.getVisibleTimeByFormat = timeUtils.getVisibleTimeByFormat;

package/esm/hooks/index.js

@@ -18,4 +18,4 @@ 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';
+export { UseFocusTrapWithSchema, useFocusTrap } from './useFocusTrap.js';

package/esm/hooks/useFocusTrap.js

@@ -1,11 +1,63 @@
-import { useCallback } from 'react';
+import { useEffect, useCallback } from 'react';
+import { PropTypes, describe } from '@elliemae/ds-props-helpers';
 
-const useFocusTrap = _ref => {
-  let {
+const useFocusTrapProps = {
+  firstElementRef: 'object',
+  lastElementRef: 'object',
+  onKeyDown: 'function'
+};
+
+const getVariableType = arg => {
+  if (Array.isArray(arg)) return 'array';
+  if (arg === null) return 'null';
+  if (arg === undefined) return 'undefined';
+  return typeof arg;
+};
+
+const throwTypeError = (validPropKey, invalidProp) => {
+  throw new Error("Warning: You are trying to pass a not valid \"".concat(validPropKey, "\" property to use a useFocusTrap hook, please provide a valid type.\n\n  Received: ").concat(getVariableType(invalidProp), "\n  Expected: ").concat(useFocusTrapProps[validPropKey], "\n  "));
+};
+
+const throwRequiredError = validPropKey => {
+  throw new Error("Warning: Please provide a \"".concat(validPropKey, "\" property to use a useFocusTrap hook, this property is required."));
+};
+
+const validateProps = componentProps => {
+  if (componentProps.firstElementRef === undefined) {
+    throwRequiredError('firstElementRef');
+  }
+
+  if (componentProps.lastElementRef === undefined) {
+    throwRequiredError('lastElementRef');
+  }
+
+  if (componentProps.firstElementRef && typeof componentProps.firstElementRef !== 'object') {
+    throwTypeError('firstElementRef', componentProps.firstElementRef);
+  }
+
+  if (componentProps.lastElementRef && typeof componentProps.lastElementRef !== 'object') {
+    throwTypeError('lastElementRef', componentProps.lastElementRef);
+  }
+
+  if (componentProps.onKeyDown && typeof componentProps.onKeyDown !== 'function') {
+    throwTypeError('onKeyDown', componentProps.onKeyDown);
+  }
+};
+
+const propTypes = {
+  firstElementRef: PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.node]).description('Reference to the first element in the focus trap.').isRequired,
+  lastElementRef: PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.node]).description('Reference to the second element in the focus trap.').isRequired,
+  onKeyDown: PropTypes.func.description('Optional onKeyDown callback.')
+};
+
+const useFocusTrap = props => {
+  // We need to investigate how to validate references with useValidateTypescriptPropTypes.
+  useEffect(() => validateProps(props), [props]);
+  const {
     firstElementRef,
     lastElementRef,
     onKeyDown
-  } = _ref;
+  } = props;
   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
@@ -24,4 +76,7 @@ const useFocusTrap = _ref => {
   }, [firstElementRef, lastElementRef, onKeyDown]);
 };
 
-export { useFocusTrap };
+const UseFocusTrapWithSchema = describe(useFocusTrap);
+UseFocusTrapWithSchema.propTypes = propTypes;
+
+export { UseFocusTrapWithSchema, useFocusTrap };

package/esm/index.js

@@ -24,7 +24,7 @@ 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 { UseFocusTrapWithSchema, 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.4.1",
+  "version": "2.4.2-rc.11",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Utilities",
   "module": "./esm/index.js",

package/types/hooks/index.d.ts

@@ -18,4 +18,4 @@ export * from './useParentElement';
 export * from './useOnElementResize';
 export * from './useIsShowingEllipsis';
 export * from './useCallbackAfterRender';
-export * from './useFocusTrap';
+export { useFocusTrap, UseFocusTrapWithSchema } from './useFocusTrap';

package/types/hooks/useFocusTrap.d.ts

@@ -4,5 +4,10 @@ declare type UseFocusTrapT = <T extends HTMLElement = HTMLElement, K extends HTM
     lastElementRef: React.MutableRefObject<K | null>;
     onKeyDown?: (e: KeyboardEvent) => void;
 }) => (e: KeyboardEvent) => void;
-export declare const useFocusTrap: UseFocusTrapT;
-export {};
+declare const useFocusTrap: UseFocusTrapT;
+declare const UseFocusTrapWithSchema: import("@elliemae/ds-props-helpers/types/propTypes/types").DocumentedReactComponent<{
+    firstElementRef: React.MutableRefObject<HTMLElement | null>;
+    lastElementRef: React.MutableRefObject<HTMLElement | null>;
+    onKeyDown?: ((e: KeyboardEvent) => void) | undefined;
+}>;
+export { useFocusTrap, UseFocusTrapWithSchema };