@carbon/ibm-products 2.43.2-canary.191 → 2.43.2-canary.194

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 (3) hide show
  1. package/es/components/AboutModal/AboutModal.js +23 -6
  2. package/lib/components/AboutModal/AboutModal.js +22 -5
  3. package/package.json +4 -4
package/es/components/AboutModal/AboutModal.js CHANGED
@@ -6,11 +6,12 @@
6
6
  */
7
7
 
8
8
  import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
- import { ComposedModal, ModalHeader, ModalBody, Theme, ModalFooter } from '@carbon/react';
9
+ import { unstable_FeatureFlags, ComposedModal, ModalHeader, ModalBody, Theme, ModalFooter } from '@carbon/react';
10
10
  import React__default, { useRef, useEffect } from 'react';
11
11
  import PropTypes from '../../node_modules/prop-types/index.js';
12
12
  import cx from 'classnames';
13
13
  import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
14
+ import { useFocus } from '../../global/js/hooks/useFocus.js';
14
15
  import { pkg } from '../../settings.js';
15
16
  import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
16
17
  import uuidv4 from '../../global/js/utils/uuidv4.js';
@@ -45,9 +46,13 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
45
46
  version = _ref.version,
46
47
  rest = _objectWithoutProperties(_ref, _excluded);
47
48
  var bodyRef = useRef(null);
49
+ var localRef = useRef();
50
+ var modalRef = ref || localRef;
48
51
  var contentRef = useRef(null);
49
52
  var contentId = uuidv4();
50
53
  var renderPortalUse = usePortalTarget(portalTargetIn);
54
+ var _useFocus = useFocus(modalRef),
55
+ firstElement = _useFocus.firstElement;
51
56
 
52
57
  // We can't add a ref directly to the ModalBody, so track it in a ref
53
58
  // as the parent of the current bodyRef element
@@ -55,16 +60,28 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
55
60
  var _contentRef$current;
56
61
  bodyRef.current = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.parentElement;
57
62
  }, [bodyRef]);
58
- return renderPortalUse( /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
63
+ useEffect(function () {
64
+ if (open) {
65
+ setTimeout(function () {
66
+ return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
67
+ }, 0);
68
+ }
69
+ // eslint-disable-next-line react-hooks/exhaustive-deps
70
+ }, [open]);
71
+ return renderPortalUse( /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
72
+ flags: {
73
+ 'enable-experimental-focus-wrap-without-sentinels': true
74
+ }
75
+ }, /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
59
76
  className: cx(blockClass,
60
77
  // Apply the block class to the main HTML element
61
78
  className // Apply any supplied class names to the main HTML element.
62
79
  ),
63
- "aria-label": modalAriaLabel
80
+ "aria-label": modalAriaLabel,
81
+ ref: modalRef
64
82
  }, _objectSpread2({
65
83
  onClose: onClose,
66
- open: open,
67
- ref: ref
84
+ open: open
68
85
  }, getDevtoolsProps(componentName))), /*#__PURE__*/React__default.createElement("div", {
69
86
  className: "".concat(blockClass, "__logo")
70
87
  }, logo), /*#__PURE__*/React__default.createElement(ModalHeader, {
@@ -95,7 +112,7 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
95
112
  theme: "g100"
96
113
  }, /*#__PURE__*/React__default.createElement(ModalFooter, {
97
114
  className: "".concat(blockClass, "__footer")
98
- }, additionalInfo))));
115
+ }, additionalInfo)))));
99
116
  });
100
117
 
101
118
  // Return a placeholder if not released and not enabled by feature flag
package/lib/components/AboutModal/AboutModal.js CHANGED
@@ -15,6 +15,7 @@ var React = require('react');
15
15
  var index = require('../../node_modules/prop-types/index.js');
16
16
  var cx = require('classnames');
17
17
  var devtools = require('../../global/js/utils/devtools.js');
18
+ var useFocus = require('../../global/js/hooks/useFocus.js');
18
19
  var settings = require('../../settings.js');
19
20
  var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
20
21
  var uuidv4 = require('../../global/js/utils/uuidv4.js');
@@ -54,9 +55,13 @@ exports.AboutModal = /*#__PURE__*/React__default["default"].forwardRef(function
54
55
  version = _ref.version,
55
56
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
56
57
  var bodyRef = React.useRef(null);
58
+ var localRef = React.useRef();
59
+ var modalRef = ref || localRef;
57
60
  var contentRef = React.useRef(null);
58
61
  var contentId = uuidv4["default"]();
59
62
  var renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
63
+ var _useFocus = useFocus.useFocus(modalRef),
64
+ firstElement = _useFocus.firstElement;
60
65
 
61
66
  // We can't add a ref directly to the ModalBody, so track it in a ref
62
67
  // as the parent of the current bodyRef element
@@ -64,16 +69,28 @@ exports.AboutModal = /*#__PURE__*/React__default["default"].forwardRef(function
64
69
  var _contentRef$current;
65
70
  bodyRef.current = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.parentElement;
66
71
  }, [bodyRef]);
67
- return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
72
+ React.useEffect(function () {
73
+ if (open) {
74
+ setTimeout(function () {
75
+ return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
76
+ }, 0);
77
+ }
78
+ // eslint-disable-next-line react-hooks/exhaustive-deps
79
+ }, [open]);
80
+ return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.unstable_FeatureFlags, {
81
+ flags: {
82
+ 'enable-experimental-focus-wrap-without-sentinels': true
83
+ }
84
+ }, /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
68
85
  className: cx__default["default"](blockClass,
69
86
  // Apply the block class to the main HTML element
70
87
  className // Apply any supplied class names to the main HTML element.
71
88
  ),
72
- "aria-label": modalAriaLabel
89
+ "aria-label": modalAriaLabel,
90
+ ref: modalRef
73
91
  }, _rollupPluginBabelHelpers.objectSpread2({
74
92
  onClose: onClose,
75
- open: open,
76
- ref: ref
93
+ open: open
77
94
  }, devtools.getDevtoolsProps(componentName))), /*#__PURE__*/React__default["default"].createElement("div", {
78
95
  className: "".concat(blockClass, "__logo")
79
96
  }, logo), /*#__PURE__*/React__default["default"].createElement(react.ModalHeader, {
@@ -104,7 +121,7 @@ exports.AboutModal = /*#__PURE__*/React__default["default"].forwardRef(function
104
121
  theme: "g100"
105
122
  }, /*#__PURE__*/React__default["default"].createElement(react.ModalFooter, {
106
123
  className: "".concat(blockClass, "__footer")
107
- }, additionalInfo))));
124
+ }, additionalInfo)))));
108
125
  });
109
126
 
110
127
  // Return a placeholder if not released and not enabled by feature flag
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/ibm-products",
3
3
  "description": "Carbon for IBM Products",
4
- "version": "2.43.2-canary.191+694128bb7",
4
+ "version": "2.43.2-canary.194+e37beeafa",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -81,7 +81,7 @@
81
81
  "fs-extra": "^11.2.0",
82
82
  "glob": "^10.3.10",
83
83
  "jest": "^29.7.0",
84
- "jest-config-ibm-cloud-cognitive": "^1.7.0",
84
+ "jest-config-ibm-cloud-cognitive": "^1.8.0-rc.0",
85
85
  "jest-environment-jsdom": "^29.7.0",
86
86
  "namor": "^1.1.2",
87
87
  "npm-check-updates": "^16.14.12",
@@ -96,7 +96,7 @@
96
96
  "dependencies": {
97
97
  "@babel/runtime": "^7.23.9",
98
98
  "@carbon/feature-flags": "^0.20.0",
99
- "@carbon/ibm-products-styles": "^2.39.1-canary.201+694128bb7",
99
+ "@carbon/ibm-products-styles": "^2.45.0-rc.0",
100
100
  "@carbon/telemetry": "^0.1.0",
101
101
  "@dnd-kit/core": "^6.0.8",
102
102
  "@dnd-kit/modifiers": "^7.0.0",
@@ -120,5 +120,5 @@
120
120
  "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
121
121
  "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
122
122
  },
123
- "gitHead": "694128bb707a2400d67e6618af3fea3f3ffba86f"
123
+ "gitHead": "e37beeafa1f592de3c9a38930487ed7cf4e8239b"
124
124
  }