carbon-react 144.0.1 → 144.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/esm/components/menu/menu-full-screen/menu-full-screen.component.js +2 -1
  2. package/esm/components/modal/modal.component.js +2 -1
  3. package/esm/components/typography/typography.style.js +12 -8
  4. package/esm/hooks/__internal__/useModalManager/useModalManager.d.ts +2 -1
  5. package/esm/hooks/__internal__/useModalManager/useModalManager.js +14 -1
  6. package/lib/components/menu/menu-full-screen/menu-full-screen.component.js +2 -1
  7. package/lib/components/modal/modal.component.js +2 -1
  8. package/lib/components/typography/typography.style.js +12 -8
  9. package/lib/hooks/__internal__/useModalManager/useModalManager.d.ts +2 -1
  10. package/lib/hooks/__internal__/useModalManager/useModalManager.js +14 -1
  11. package/package.json +1 -1
package/esm/components/menu/menu-full-screen/menu-full-screen.component.js CHANGED
@@ -54,7 +54,8 @@ export const MenuFullscreen = ({
54
54
  open: isOpen,
55
55
  closeModal,
56
56
  modalRef: menuRef,
57
- topModalOverride
57
+ topModalOverride,
58
+ focusCallToActionElement: document.activeElement
58
59
  });
59
60
  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(CSSTransition, {
60
61
  nodeRef: menuRef,
package/esm/components/modal/modal.component.js CHANGED
@@ -58,7 +58,8 @@ const Modal = ({
58
58
  closeModal,
59
59
  modalRef: ref,
60
60
  setTriggerRefocusFlag,
61
- topModalOverride
61
+ topModalOverride,
62
+ focusCallToActionElement: document.activeElement
62
63
  });
63
64
  let background;
64
65
  let content;
package/esm/components/typography/typography.style.js CHANGED
@@ -55,23 +55,27 @@ const getLineHeight = variant => {
55
55
  case "h1-large":
56
56
  return "40px";
57
57
  case "h1":
58
- case "segment-subheader":
59
- return "31px";
58
+ return "30px";
60
59
  case "h2":
61
- return "29px";
60
+ return "27.5px";
62
61
  case "h3":
62
+ return "25px";
63
+ case "h4":
64
+ return "22.5px";
65
+ case "h5":
66
+ return "20px";
63
67
  case "segment-header":
64
- return "26px";
68
+ return "25px";
69
+ case "segment-header-small":
70
+ return "22.5px";
71
+ case "segment-subheader":
72
+ return "24px";
65
73
  case "big":
66
74
  return "24px";
67
- case "h4":
68
- case "segment-header-small":
69
- return "23px";
70
75
  case "small":
71
76
  case "sub":
72
77
  case "sup":
73
78
  return "20px";
74
- case "h5":
75
79
  case "segment-subheader-alt":
76
80
  case "p":
77
81
  case "span":
package/esm/hooks/__internal__/useModalManager/useModalManager.d.ts CHANGED
@@ -6,6 +6,7 @@ declare type UseModalManagerArgs = {
6
6
  setTriggerRefocusFlag?: (flag: boolean) => void;
7
7
  triggerRefocusOnClose?: boolean;
8
8
  topModalOverride?: boolean;
9
+ focusCallToActionElement?: HTMLElement;
9
10
  };
10
- declare const useModalManager: ({ open, closeModal, modalRef, setTriggerRefocusFlag, triggerRefocusOnClose, topModalOverride, }: UseModalManagerArgs) => void;
11
+ declare const useModalManager: ({ open, closeModal, modalRef, setTriggerRefocusFlag, triggerRefocusOnClose, topModalOverride, focusCallToActionElement, }: UseModalManagerArgs) => void;
11
12
  export default useModalManager;
package/esm/hooks/__internal__/useModalManager/useModalManager.js CHANGED
@@ -6,10 +6,12 @@ const useModalManager = ({
6
6
  modalRef,
7
7
  setTriggerRefocusFlag,
8
8
  triggerRefocusOnClose = true,
9
- topModalOverride = false
9
+ topModalOverride = false,
10
+ focusCallToActionElement
10
11
  }) => {
11
12
  const listenerAdded = useRef(false);
12
13
  const modalRegistered = useRef(false);
14
+ const lastFocusedElement = useRef(null);
13
15
  const handleClose = useCallback(ev => {
14
16
  const isTopmost = ModalManager.isTopmost(modalRef.current);
15
17
  if (isTopmost) {
@@ -41,6 +43,11 @@ const useModalManager = ({
41
43
  removeListener();
42
44
  };
43
45
  }, [removeListener]);
46
+ useEffect(() => {
47
+ if (!lastFocusedElement.current && focusCallToActionElement && open) {
48
+ lastFocusedElement.current = focusCallToActionElement;
49
+ }
50
+ }, [open, focusCallToActionElement]);
44
51
  const registerModal = useCallback(ref => {
45
52
  /* istanbul ignore else */
46
53
  if (!modalRegistered.current) {
@@ -51,6 +58,12 @@ const useModalManager = ({
51
58
  const unregisterModal = useCallback(ref => {
52
59
  if (modalRegistered.current) {
53
60
  ModalManager.removeModal(ref, triggerRefocusOnClose);
61
+ if (lastFocusedElement.current) {
62
+ setTimeout(() => {
63
+ lastFocusedElement.current?.focus();
64
+ lastFocusedElement.current = null;
65
+ }, 0);
66
+ }
54
67
  modalRegistered.current = false;
55
68
  }
56
69
  }, [triggerRefocusOnClose]);
package/lib/components/menu/menu-full-screen/menu-full-screen.component.js CHANGED
@@ -63,7 +63,8 @@ const MenuFullscreen = ({
63
63
  open: isOpen,
64
64
  closeModal,
65
65
  modalRef: menuRef,
66
- topModalOverride
66
+ topModalOverride,
67
+ focusCallToActionElement: document.activeElement
67
68
  });
68
69
  return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
69
70
  nodeRef: menuRef,
package/lib/components/modal/modal.component.js CHANGED
@@ -67,7 +67,8 @@ const Modal = ({
67
67
  closeModal,
68
68
  modalRef: ref,
69
69
  setTriggerRefocusFlag,
70
- topModalOverride
70
+ topModalOverride,
71
+ focusCallToActionElement: document.activeElement
71
72
  });
72
73
  let background;
73
74
  let content;
package/lib/components/typography/typography.style.js CHANGED
@@ -64,23 +64,27 @@ const getLineHeight = variant => {
64
64
  case "h1-large":
65
65
  return "40px";
66
66
  case "h1":
67
- case "segment-subheader":
68
- return "31px";
67
+ return "30px";
69
68
  case "h2":
70
- return "29px";
69
+ return "27.5px";
71
70
  case "h3":
71
+ return "25px";
72
+ case "h4":
73
+ return "22.5px";
74
+ case "h5":
75
+ return "20px";
72
76
  case "segment-header":
73
- return "26px";
77
+ return "25px";
78
+ case "segment-header-small":
79
+ return "22.5px";
80
+ case "segment-subheader":
81
+ return "24px";
74
82
  case "big":
75
83
  return "24px";
76
- case "h4":
77
- case "segment-header-small":
78
- return "23px";
79
84
  case "small":
80
85
  case "sub":
81
86
  case "sup":
82
87
  return "20px";
83
- case "h5":
84
88
  case "segment-subheader-alt":
85
89
  case "p":
86
90
  case "span":
package/lib/hooks/__internal__/useModalManager/useModalManager.d.ts CHANGED
@@ -6,6 +6,7 @@ declare type UseModalManagerArgs = {
6
6
  setTriggerRefocusFlag?: (flag: boolean) => void;
7
7
  triggerRefocusOnClose?: boolean;
8
8
  topModalOverride?: boolean;
9
+ focusCallToActionElement?: HTMLElement;
9
10
  };
10
- declare const useModalManager: ({ open, closeModal, modalRef, setTriggerRefocusFlag, triggerRefocusOnClose, topModalOverride, }: UseModalManagerArgs) => void;
11
+ declare const useModalManager: ({ open, closeModal, modalRef, setTriggerRefocusFlag, triggerRefocusOnClose, topModalOverride, focusCallToActionElement, }: UseModalManagerArgs) => void;
11
12
  export default useModalManager;
package/lib/hooks/__internal__/useModalManager/useModalManager.js CHANGED
@@ -13,10 +13,12 @@ const useModalManager = ({
13
13
  modalRef,
14
14
  setTriggerRefocusFlag,
15
15
  triggerRefocusOnClose = true,
16
- topModalOverride = false
16
+ topModalOverride = false,
17
+ focusCallToActionElement
17
18
  }) => {
18
19
  const listenerAdded = (0, _react.useRef)(false);
19
20
  const modalRegistered = (0, _react.useRef)(false);
21
+ const lastFocusedElement = (0, _react.useRef)(null);
20
22
  const handleClose = (0, _react.useCallback)(ev => {
21
23
  const isTopmost = _modalManager.default.isTopmost(modalRef.current);
22
24
  if (isTopmost) {
@@ -48,6 +50,11 @@ const useModalManager = ({
48
50
  removeListener();
49
51
  };
50
52
  }, [removeListener]);
53
+ (0, _react.useEffect)(() => {
54
+ if (!lastFocusedElement.current && focusCallToActionElement && open) {
55
+ lastFocusedElement.current = focusCallToActionElement;
56
+ }
57
+ }, [open, focusCallToActionElement]);
51
58
  const registerModal = (0, _react.useCallback)(ref => {
52
59
  /* istanbul ignore else */
53
60
  if (!modalRegistered.current) {
@@ -58,6 +65,12 @@ const useModalManager = ({
58
65
  const unregisterModal = (0, _react.useCallback)(ref => {
59
66
  if (modalRegistered.current) {
60
67
  _modalManager.default.removeModal(ref, triggerRefocusOnClose);
68
+ if (lastFocusedElement.current) {
69
+ setTimeout(() => {
70
+ lastFocusedElement.current?.focus();
71
+ lastFocusedElement.current = null;
72
+ }, 0);
73
+ }
61
74
  modalRegistered.current = false;
62
75
  }
63
76
  }, [triggerRefocusOnClose]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "144.0.1",
3
+ "version": "144.1.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",