carbon-react 144.1.0 → 144.2.0

package/esm/components/box/box.component.d.ts

@@ -23,7 +23,7 @@ export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gri
     scrollVariant?: ScrollVariant;
     /** Set the box-sizing attribute of the Box component */
     boxSizing?: BoxSizing;
-    /** Allows a tabindex to be specified */
+    /** (Deprecated) Allows a tabindex to be specified */
     tabIndex?: number;
     /** Gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
     gap?: Gap;

package/esm/components/box/box.component.js

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps, filterStyledSystemLayoutProps, filterStyledSystemFlexboxProps, filterStyledSystemGridProps } from "../../style/utils";
 import StyledBox from "./box.style";
 import tagComponent from "../../__internal__/utils/helpers/tags";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedTabIndex = false;
 const Box = /*#__PURE__*/React.forwardRef(({
   "data-component": dataComponent,
   as,
@@ -27,6 +29,10 @@ const Box = /*#__PURE__*/React.forwardRef(({
   "aria-hidden": ariaHidden,
   ...rest
 }, ref) => {
+  if (!deprecatedTabIndex && tabIndex !== undefined) {
+    deprecatedTabIndex = true;
+    Logger.deprecate("The `tabIndex` prop for `Box` component has been deprecated and will soon be removed.");
+  }
   return /*#__PURE__*/React.createElement(StyledBox, _extends({
     as: as,
     id: id,

package/esm/components/menu/menu-full-screen/menu-full-screen.component.js

@@ -54,7 +54,8 @@ export const MenuFullscreen = ({
     open: isOpen,
     closeModal,
     modalRef: menuRef,
-    topModalOverride
+    topModalOverride,
+    focusCallToActionElement: document.activeElement
   });
   return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(CSSTransition, {
     nodeRef: menuRef,

package/esm/components/modal/modal.component.js

@@ -58,7 +58,8 @@ const Modal = ({
     closeModal,
     modalRef: ref,
     setTriggerRefocusFlag,
-    topModalOverride
+    topModalOverride,
+    focusCallToActionElement: document.activeElement
   });
   let background;
   let content;

package/esm/hooks/__internal__/useModalManager/useModalManager.d.ts

@@ -6,6 +6,7 @@ declare type UseModalManagerArgs = {
     setTriggerRefocusFlag?: (flag: boolean) => void;
     triggerRefocusOnClose?: boolean;
     topModalOverride?: boolean;
+    focusCallToActionElement?: HTMLElement;
 };
-declare const useModalManager: ({ open, closeModal, modalRef, setTriggerRefocusFlag, triggerRefocusOnClose, topModalOverride, }: UseModalManagerArgs) => void;
+declare const useModalManager: ({ open, closeModal, modalRef, setTriggerRefocusFlag, triggerRefocusOnClose, topModalOverride, focusCallToActionElement, }: UseModalManagerArgs) => void;
 export default useModalManager;

package/esm/hooks/__internal__/useModalManager/useModalManager.js

@@ -6,10 +6,12 @@ const useModalManager = ({
   modalRef,
   setTriggerRefocusFlag,
   triggerRefocusOnClose = true,
-  topModalOverride = false
+  topModalOverride = false,
+  focusCallToActionElement
 }) => {
   const listenerAdded = useRef(false);
   const modalRegistered = useRef(false);
+  const lastFocusedElement = useRef(null);
   const handleClose = useCallback(ev => {
     const isTopmost = ModalManager.isTopmost(modalRef.current);
     if (isTopmost) {
@@ -41,6 +43,11 @@ const useModalManager = ({
       removeListener();
     };
   }, [removeListener]);
+  useEffect(() => {
+    if (!lastFocusedElement.current && focusCallToActionElement && open) {
+      lastFocusedElement.current = focusCallToActionElement;
+    }
+  }, [open, focusCallToActionElement]);
   const registerModal = useCallback(ref => {
     /* istanbul ignore else */
     if (!modalRegistered.current) {
@@ -51,6 +58,12 @@ const useModalManager = ({
   const unregisterModal = useCallback(ref => {
     if (modalRegistered.current) {
       ModalManager.removeModal(ref, triggerRefocusOnClose);
+      if (lastFocusedElement.current) {
+        setTimeout(() => {
+          lastFocusedElement.current?.focus();
+          lastFocusedElement.current = null;
+        }, 0);
+      }
       modalRegistered.current = false;
     }
   }, [triggerRefocusOnClose]);

package/lib/components/box/box.component.d.ts

@@ -23,7 +23,7 @@ export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gri
     scrollVariant?: ScrollVariant;
     /** Set the box-sizing attribute of the Box component */
     boxSizing?: BoxSizing;
-    /** Allows a tabindex to be specified */
+    /** (Deprecated) Allows a tabindex to be specified */
     tabIndex?: number;
     /** Gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
     gap?: Gap;

package/lib/components/box/box.component.js

@@ -9,8 +9,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../../style/utils");
 var _box = _interopRequireDefault(require("./box.style"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedTabIndex = false;
 const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef(({
   "data-component": dataComponent,
   as,
@@ -34,6 +36,10 @@ const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef(({
   "aria-hidden": ariaHidden,
   ...rest
 }, ref) => {
+  if (!deprecatedTabIndex && tabIndex !== undefined) {
+    deprecatedTabIndex = true;
+    _logger.default.deprecate("The `tabIndex` prop for `Box` component has been deprecated and will soon be removed.");
+  }
   return /*#__PURE__*/_react.default.createElement(_box.default, _extends({
     as: as,
     id: id,

package/lib/components/menu/menu-full-screen/menu-full-screen.component.js

@@ -63,7 +63,8 @@ const MenuFullscreen = ({
     open: isOpen,
     closeModal,
     modalRef: menuRef,
-    topModalOverride
+    topModalOverride,
+    focusCallToActionElement: document.activeElement
   });
   return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
     nodeRef: menuRef,

package/lib/components/modal/modal.component.js

@@ -67,7 +67,8 @@ const Modal = ({
     closeModal,
     modalRef: ref,
     setTriggerRefocusFlag,
-    topModalOverride
+    topModalOverride,
+    focusCallToActionElement: document.activeElement
   });
   let background;
   let content;

package/lib/hooks/__internal__/useModalManager/useModalManager.d.ts

@@ -6,6 +6,7 @@ declare type UseModalManagerArgs = {
     setTriggerRefocusFlag?: (flag: boolean) => void;
     triggerRefocusOnClose?: boolean;
     topModalOverride?: boolean;
+    focusCallToActionElement?: HTMLElement;
 };
-declare const useModalManager: ({ open, closeModal, modalRef, setTriggerRefocusFlag, triggerRefocusOnClose, topModalOverride, }: UseModalManagerArgs) => void;
+declare const useModalManager: ({ open, closeModal, modalRef, setTriggerRefocusFlag, triggerRefocusOnClose, topModalOverride, focusCallToActionElement, }: UseModalManagerArgs) => void;
 export default useModalManager;

package/lib/hooks/__internal__/useModalManager/useModalManager.js

@@ -13,10 +13,12 @@ const useModalManager = ({
   modalRef,
   setTriggerRefocusFlag,
   triggerRefocusOnClose = true,
-  topModalOverride = false
+  topModalOverride = false,
+  focusCallToActionElement
 }) => {
   const listenerAdded = (0, _react.useRef)(false);
   const modalRegistered = (0, _react.useRef)(false);
+  const lastFocusedElement = (0, _react.useRef)(null);
   const handleClose = (0, _react.useCallback)(ev => {
     const isTopmost = _modalManager.default.isTopmost(modalRef.current);
     if (isTopmost) {
@@ -48,6 +50,11 @@ const useModalManager = ({
       removeListener();
     };
   }, [removeListener]);
+  (0, _react.useEffect)(() => {
+    if (!lastFocusedElement.current && focusCallToActionElement && open) {
+      lastFocusedElement.current = focusCallToActionElement;
+    }
+  }, [open, focusCallToActionElement]);
   const registerModal = (0, _react.useCallback)(ref => {
     /* istanbul ignore else */
     if (!modalRegistered.current) {
@@ -58,6 +65,12 @@ const useModalManager = ({
   const unregisterModal = (0, _react.useCallback)(ref => {
     if (modalRegistered.current) {
       _modalManager.default.removeModal(ref, triggerRefocusOnClose);
+      if (lastFocusedElement.current) {
+        setTimeout(() => {
+          lastFocusedElement.current?.focus();
+          lastFocusedElement.current = null;
+        }, 0);
+      }
       modalRegistered.current = false;
     }
   }, [triggerRefocusOnClose]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "144.1.0",
+  "version": "144.2.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",

package/esm/__internal__/utils/helpers/tags/tags-specs/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./tags-specs";

package/esm/__internal__/utils/helpers/tags/tags-specs/index.js

@@ -1 +0,0 @@
-export { default } from "./tags-specs";

package/esm/__internal__/utils/helpers/tags/tags-specs/tags-specs.d.ts

@@ -1,3 +0,0 @@
-import { ReactWrapper, ShallowWrapper } from "enzyme";
-declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;
-export default rootTagTest;

package/esm/__internal__/utils/helpers/tags/tags-specs/tags-specs.js

@@ -1,6 +0,0 @@
-const rootTagTest = (rootNode, comp, elem, role) => {
-  expect(rootNode.prop("data-component")).toEqual(comp);
-  expect(rootNode.prop("data-element")).toEqual(elem);
-  expect(rootNode.prop("data-role")).toEqual(role);
-};
-export default rootTagTest;

package/lib/__internal__/utils/helpers/tags/tags-specs/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./tags-specs";

package/lib/__internal__/utils/helpers/tags/tags-specs/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _tagsSpecs.default;
-  }
-});
-var _tagsSpecs = _interopRequireDefault(require("./tags-specs"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/__internal__/utils/helpers/tags/tags-specs/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "../../../../../../esm/__internal__/utils/helpers/tags/tags-specs/index.js",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}

package/lib/__internal__/utils/helpers/tags/tags-specs/tags-specs.d.ts

@@ -1,3 +0,0 @@
-import { ReactWrapper, ShallowWrapper } from "enzyme";
-declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;
-export default rootTagTest;

package/lib/__internal__/utils/helpers/tags/tags-specs/tags-specs.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-const rootTagTest = (rootNode, comp, elem, role) => {
-  expect(rootNode.prop("data-component")).toEqual(comp);
-  expect(rootNode.prop("data-element")).toEqual(elem);
-  expect(rootNode.prop("data-role")).toEqual(role);
-};
-var _default = exports.default = rootTagTest;