terra-abstract-modal - npm Package Compare versions

Comparing version 3.48.0 to 3.49.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## 3.49.0 - (March 8, 2024)
+
+* Changes
+  * Re-introduced changes made in `v3.46.0`.
+  * Added promise polyfill to make component compatible with IE11.
+
 ## 3.48.0 - (March 5, 2024)
@@ -7,0 +13,0 @@

lib/_ModalContent.js

@@ -18,6 +18,7 @@ "use strict";
 var _terraVisuallyHiddenText = _interopRequireDefault(require("terra-visually-hidden-text"));
+var _reactFocusOn = require("react-focus-on");
 var _ModalOverlay = _interopRequireDefault(require("./_ModalOverlay"));
 var _inertHelpers = require("./inertHelpers");
 var _ModalContentModule = _interopRequireDefault(require("./ModalContent.module.scss"));
-var _excluded = ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "children", "classNameModal", "classNameOverlay", "closeOnOutsideClick", "onRequestClose", "role", "isFullscreen", "isScrollable", "rootSelector", "zIndex", "setModalFocusElementRef", "isCalledFromNotificationDialog"];
+var _excluded = ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "children", "classNameModal", "classNameOverlay", "closeOnOutsideClick", "onRequestClose", "role", "isFullscreen", "isScrollable", "rootSelector", "zIndex", "setModalFocusElementRef", "isCalledFromNotificationDialog", "shouldTrapFocus"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -89,3 +90,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
    */
-  isCalledFromNotificationDialog: _propTypes.default.bool
+  isCalledFromNotificationDialog: _propTypes.default.bool,
+  /**
+   * If set to true, then the focus lock will get enabled.
+   */
+  shouldTrapFocus: _propTypes.default.bool
 };
@@ -119,2 +124,3 @@ var defaultProps = {
     isCalledFromNotificationDialog = props.isCalledFromNotificationDialog,
+    shouldTrapFocus = props.shouldTrapFocus,
     customProps = (0, _objectWithoutProperties2.default)(props, _excluded);
@@ -142,9 +148,3 @@ (0, _react.useEffect)(function () {
   delete customProps.fallbackFocus;
-  var platformIsiOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ModalOverlay.default, {
-    onClick: closeOnOutsideClick ? onRequestClose : null,
-    className: classNameOverlay,
-    zIndex: zIndexLayer
-  }), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, customProps, {
-    tabIndex: platformIsiOS || isCalledFromNotificationDialog ? '-1' : '0',
+  var modalContent = /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, customProps, {
     "aria-label": ariaLabel,
@@ -183,3 +183,10 @@ "aria-labelledby": ariaLabelledBy,
     });
-  }))));
+  })));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ModalOverlay.default, {
+    onClick: closeOnOutsideClick ? onRequestClose : null,
+    className: classNameOverlay,
+    zIndex: zIndexLayer
+  }), shouldTrapFocus ? /*#__PURE__*/_react.default.createElement(_reactFocusOn.FocusOn, {
+    onClickOutside: closeOnOutsideClick ? onRequestClose : null
+  }, modalContent) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, modalContent));
 });
@@ -186,0 +193,0 @@ ModalContent.propTypes = propTypes;

lib/AbstractModal.js

@@ -11,2 +11,3 @@ "use strict";
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+require("promise-polyfill/dist/polyfill.min");
 var _react = _interopRequireWildcard(require("react"));
@@ -20,3 +21,3 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ModalContent = _interopRequireDefault(require("./_ModalContent"));
-var _excluded = ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "children", "classNameModal", "classNameOverlay", "closeOnEsc", "closeOnOutsideClick", "isFullscreen", "isOpen", "role", "rootSelector", "onRequestClose", "zIndex", "isCalledFromNotificationDialog"];
+var _excluded = ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "children", "classNameModal", "classNameOverlay", "closeOnEsc", "closeOnOutsideClick", "isFullscreen", "isOpen", "role", "rootSelector", "onRequestClose", "zIndex", "isCalledFromNotificationDialog", "shouldTrapFocus"]; // React-focus-on uses native promises which isn't available in IE11
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -91,3 +92,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
    */
-  isCalledFromNotificationDialog: _propTypes.default.bool
+  isCalledFromNotificationDialog: _propTypes.default.bool,
+  /**
+   * If set to true, then the focus lock will get enabled.
+   */
+  shouldTrapFocus: _propTypes.default.bool
 };
@@ -103,3 +108,4 @@ var defaultProps = {
   zIndex: '6000',
-  isCalledFromNotificationDialog: false
+  isCalledFromNotificationDialog: false,
+  shouldTrapFocus: false
 };
@@ -122,2 +128,3 @@ var AbstractModal = function AbstractModal(props) {
     isCalledFromNotificationDialog = props.isCalledFromNotificationDialog,
+    shouldTrapFocus = props.shouldTrapFocus,
     customProps = (0, _objectWithoutProperties2.default)(props, _excluded);
@@ -177,3 +184,4 @@ var modalElementRef = (0, _react.useRef)();
     onKeyDown: handleKeydown,
-    isCalledFromNotificationDialog: isCalledFromNotificationDialog
+    isCalledFromNotificationDialog: isCalledFromNotificationDialog,
+    shouldTrapFocus: shouldTrapFocus
   }), children));
@@ -180,0 +188,0 @@ };

package.json

 {
   "name": "terra-abstract-modal",
-  "version": "3.48.0",
+  "version": "3.49.0",
   "description": "The abstract modal is a structural component that provides the ability to display portal'd content in a layer above the app.",
@@ -38,3 +38,5 @@ "author": "Cerner Corporation",
     "mutationobserver-shim": "<=0.3.3",
+    "promise-polyfill": "^8.3.0",
     "prop-types": "^15.5.8",
+    "react-focus-on": "^3.9.1",
     "react-portal": "^4.1.2",
@@ -66,3 +68,3 @@ "terra-theme-context": "^1.9.0",
   },
-  "gitHead": "b9b36a30ab7673cab36c3a64a0d04a8ef6bb60af"
+  "gitHead": "3d40bd63a6a6345a86946ff596a7477a34e59253"
 }

src/_ModalContent.jsx

@@ -8,2 +8,3 @@ import React, { forwardRef, useEffect } from 'react';
 import VisuallyHiddenText from 'terra-visually-hidden-text';
+import { FocusOn } from 'react-focus-on';
 import ModalOverlay from './_ModalOverlay';
@@ -80,2 +81,6 @@ import { hideModalDomUpdates, showModalDomUpdates } from './inertHelpers';
   isCalledFromNotificationDialog: PropTypes.bool,
+  /**
+   * If set to true, then the focus lock will get enabled.
+   */
+  shouldTrapFocus: PropTypes.bool,
 };
@@ -112,2 +117,3 @@
     isCalledFromNotificationDialog,
+    shouldTrapFocus,
     ...customProps
@@ -144,3 +150,45 @@ } = props;
 
-  const platformIsiOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
+  const modalContent = (
+    <div
+      {...customProps}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      aria-describedby={ariaDescribedBy}
+      className={modalClassName}
+      role={role}
+      ref={ref}
+    >
+      <div className={modalContainerClassName} ref={setModalFocusElementRef} data-terra-abstract-modal-begin tabIndex="-1">
+        {(!isCalledFromNotificationDialog) && (
+        <FormattedMessage id="Terra.AbstractModal.BeginModalDialog">
+          {text => {
+            // In the latest version of react-intl this param is an array, when previous versions it was a string.
+            let useText = text;
+            if (Array.isArray(text)) {
+              useText = text.join('');
+            }
+            return (
+              <VisuallyHiddenText text={useText} />
+            );
+          }}
+        </FormattedMessage>
+        )}
+        {children}
+        {(!isCalledFromNotificationDialog) && (
+        <FormattedMessage id="Terra.AbstractModal.EndModalDialog">
+          {text => {
+            // In the latest version of react-intl this param is an array, when previous versions it was a string.
+            let useText = text;
+            if (Array.isArray(text)) {
+              useText = text.join('');
+            }
+            return (
+              <VisuallyHiddenText text={useText} />
+            );
+          }}
+        </FormattedMessage>
+        )}
+      </div>
+    </div>
+  );
 
@@ -160,44 +208,7 @@ return (
       }
-      <div
-        {...customProps}
-        tabIndex={platformIsiOS || isCalledFromNotificationDialog ? '-1' : '0'}
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledBy}
-        aria-describedby={ariaDescribedBy}
-        className={modalClassName}
-        role={role}
-        ref={ref}
-      >
-        <div className={modalContainerClassName} ref={setModalFocusElementRef} data-terra-abstract-modal-begin tabIndex="-1">
-          {(!isCalledFromNotificationDialog) && (
-            <FormattedMessage id="Terra.AbstractModal.BeginModalDialog">
-              {text => {
-                // In the latest version of react-intl this param is an array, when previous versions it was a string.
-                let useText = text;
-                if (Array.isArray(text)) {
-                  useText = text.join('');
-                }
-                return (
-                  <VisuallyHiddenText text={useText} />
-                );
-              }}
-            </FormattedMessage>
-          )}
-          {children}
-          {(!isCalledFromNotificationDialog) && (
-            <FormattedMessage id="Terra.AbstractModal.EndModalDialog">
-              {text => {
-                // In the latest version of react-intl this param is an array, when previous versions it was a string.
-                let useText = text;
-                if (Array.isArray(text)) {
-                  useText = text.join('');
-                }
-                return (
-                  <VisuallyHiddenText text={useText} />
-                );
-              }}
-            </FormattedMessage>
-          )}
-        </div>
-      </div>
+      {
+        shouldTrapFocus
+          ? <FocusOn onClickOutside={closeOnOutsideClick ? onRequestClose : null}>{modalContent}</FocusOn>
+          : <>{modalContent}</>
+      }
     </React.Fragment>
@@ -204,0 +215,0 @@ );

src/AbstractModal.jsx

@@ -0,1 +1,3 @@
+// React-focus-on uses native promises which isn't available in IE11
+import 'promise-polyfill/dist/polyfill.min';
 import React, {
@@ -81,2 +83,6 @@ useLayoutEffect, useEffect, useRef, useCallback,
   isCalledFromNotificationDialog: PropTypes.bool,
+  /**
+   * If set to true, then the focus lock will get enabled.
+   */
+  shouldTrapFocus: PropTypes.bool,
 };
@@ -94,2 +100,3 @@
   isCalledFromNotificationDialog: false,
+  shouldTrapFocus: false,
 };
@@ -114,2 +121,3 @@
     isCalledFromNotificationDialog,
+    shouldTrapFocus,
     ...customProps
@@ -180,2 +188,3 @@ } = props;
         isCalledFromNotificationDialog={isCalledFromNotificationDialog}
+        shouldTrapFocus={shouldTrapFocus}
       >
@@ -182,0 +191,0 @@ {children}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

152515

increased by0.86%

Lines of code

2280

increased by1.6%

Worsened metrics

Dependency count

13

increased by18.18%

Dependency changes

• + Addedpromise-polyfill@^8.3.0

• + Addedreact-focus-on@^3.9.1

• + Added@babel/runtime@7.26.0(transitive)

• + Addedaria-hidden@1.2.4(transitive)

• + Addeddetect-node-es@1.1.0(transitive)

• + Addedfocus-lock@1.3.5(transitive)

• + Addedget-nonce@1.0.1(transitive)

• + Addedinvariant@2.2.4(transitive)

• + Addedpromise-polyfill@8.3.0(transitive)

• + Addedreact-clientside-effect@1.2.6(transitive)

• + Addedreact-focus-lock@2.13.2(transitive)

• + Addedreact-focus-on@3.9.4(transitive)

• + Addedreact-remove-scroll@2.6.0(transitive)

• + Addedreact-remove-scroll-bar@2.3.6(transitive)

• + Addedreact-style-singleton@2.2.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addeduse-callback-ref@1.3.2(transitive)

• + Addeduse-sidecar@1.1.2(transitive)