@carbon/ibm-products 2.54.0-canary.29 → 2.54.0-canary.31

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/es/components/APIKeyModal/APIKeyModal.js +2 -14
  2. package/es/components/AboutModal/AboutModal.js +3 -6
  3. package/es/components/Tearsheet/TearsheetShell.js +3 -24
  4. package/es/global/js/hooks/useFocus.d.ts +1 -0
  5. package/es/global/js/hooks/useFocus.js +21 -1
  6. package/lib/components/APIKeyModal/APIKeyModal.js +1 -13
  7. package/lib/components/AboutModal/AboutModal.js +2 -5
  8. package/lib/components/Tearsheet/TearsheetShell.js +2 -23
  9. package/lib/global/js/hooks/useFocus.d.ts +1 -0
  10. package/lib/global/js/hooks/useFocus.js +21 -0
  11. package/package.json +2 -2
package/es/components/APIKeyModal/APIKeyModal.js CHANGED
@@ -17,7 +17,7 @@ import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
17
17
  import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
18
18
  import { isRequiredIf } from '../../global/js/utils/props-helper.js';
19
19
  import uuidv4 from '../../global/js/utils/uuidv4.js';
20
- import { useFocus, getSpecificElement } from '../../global/js/hooks/useFocus.js';
20
+ import { useFocus, claimFocus } from '../../global/js/hooks/useFocus.js';
21
21
  import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
22
22
 
23
23
  var _ErrorFilled, _InformationFilled;
@@ -129,19 +129,7 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
129
129
  useEffect(function () {
130
130
  if (open) {
131
131
  // Focusing the first element or selectorPrimaryFocus element
132
- if (selectorPrimaryFocus && getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
133
- var _window;
134
- var specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
135
- if (specifiedEl && ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(specifiedEl)) === null || _window === void 0 ? void 0 : _window.display) !== 'none') {
136
- setTimeout(function () {
137
- return specifiedEl.focus();
138
- }, 0);
139
- return;
140
- }
141
- }
142
- setTimeout(function () {
143
- firstElement === null || firstElement === void 0 || firstElement.focus();
144
- }, 0);
132
+ claimFocus(firstElement, modalRef, selectorPrimaryFocus);
145
133
  }
146
134
  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
147
135
  useEffect(function () {
package/es/components/AboutModal/AboutModal.js CHANGED
@@ -11,7 +11,7 @@ import React__default, { useRef, useEffect } from 'react';
11
11
  import PropTypes from '../../_virtual/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
+ import { useFocus, claimFocus } from '../../global/js/hooks/useFocus.js';
15
15
  import { pkg } from '../../settings.js';
16
16
  import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
17
17
  import uuidv4 from '../../global/js/utils/uuidv4.js';
@@ -62,12 +62,9 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
62
62
  }, [bodyRef]);
63
63
  useEffect(function () {
64
64
  if (open) {
65
- setTimeout(function () {
66
- return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
67
- }, 0);
65
+ claimFocus(firstElement, modalRef);
68
66
  }
69
- // eslint-disable-next-line react-hooks/exhaustive-deps
70
- }, [open]);
67
+ }, [firstElement, modalRef, open]);
71
68
  return renderPortalUse( /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
72
69
  enableExperimentalFocusWrapWithoutSentinels: true
73
70
  }, /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
package/es/components/Tearsheet/TearsheetShell.js CHANGED
@@ -18,7 +18,7 @@ import { Button, usePrefix, unstable_FeatureFlags, ComposedModal, ModalHeader, L
18
18
  import { ActionSet } from '../ActionSet/ActionSet.js';
19
19
  import { Wrap } from '../../global/js/utils/Wrap.js';
20
20
  import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
21
- import { useFocus, getSpecificElement } from '../../global/js/hooks/useFocus.js';
21
+ import { useFocus, claimFocus } from '../../global/js/hooks/useFocus.js';
22
22
  import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
23
23
 
24
24
  var _excluded = ["actions", "aiLabel", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
@@ -146,33 +146,12 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
146
146
 
147
147
  // Callback to give the tearsheet the opportunity to claim focus
148
148
  handleStackChange.claimFocus = function () {
149
- if (selectorPrimaryFocus && getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
150
- var _window;
151
- var specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
152
- if (specifiedEl && ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(specifiedEl)) === null || _window === void 0 ? void 0 : _window.display) !== 'none') {
153
- return specifiedEl.focus();
154
- }
155
- }
156
- setTimeout(function () {
157
- return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
158
- }, 0);
149
+ claimFocus(firstElement, modalRef, selectorPrimaryFocus);
159
150
  };
160
151
  useEffect(function () {
161
152
  if (open) {
162
153
  // Focusing the first element or selectorPrimaryFocus element
163
- if (selectorPrimaryFocus && getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
164
- var _window2;
165
- var specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
166
- if (specifiedEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specifiedEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
167
- setTimeout(function () {
168
- return specifiedEl.focus();
169
- }, 0);
170
- return;
171
- }
172
- }
173
- setTimeout(function () {
174
- return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
175
- }, 0);
154
+ claimFocus(firstElement, modalRef, selectorPrimaryFocus);
176
155
  }
177
156
  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
178
157
  useEffect(function () {
package/es/global/js/hooks/useFocus.d.ts CHANGED
@@ -12,3 +12,4 @@ export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
12
12
  specified: any;
13
13
  };
14
14
  };
15
+ export function claimFocus(firstElement: any, modalRef: any, selectorPrimaryFocus?: string | undefined): any;
package/es/global/js/hooks/useFocus.js CHANGED
@@ -104,4 +104,24 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
104
104
  };
105
105
  };
106
106
 
107
- export { getSpecificElement, useFocus };
107
+ /**
108
+ *
109
+ * @param {*} firstElement
110
+ * @param {*} modalRef
111
+ * @param {string | undefined} selectorPrimaryFocus
112
+ */
113
+ var claimFocus = function claimFocus(firstElement, modalRef) {
114
+ var selectorPrimaryFocus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
115
+ if (selectorPrimaryFocus && getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
116
+ var _window2;
117
+ var specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
118
+ if (specifiedEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specifiedEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
119
+ return specifiedEl.focus();
120
+ }
121
+ }
122
+ setTimeout(function () {
123
+ return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
124
+ }, 0);
125
+ };
126
+
127
+ export { claimFocus, getSpecificElement, useFocus };
package/lib/components/APIKeyModal/APIKeyModal.js CHANGED
@@ -131,19 +131,7 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
131
131
  React.useEffect(function () {
132
132
  if (open) {
133
133
  // Focusing the first element or selectorPrimaryFocus element
134
- if (selectorPrimaryFocus && useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
135
- var _window;
136
- var specifiedEl = useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
137
- if (specifiedEl && ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(specifiedEl)) === null || _window === void 0 ? void 0 : _window.display) !== 'none') {
138
- setTimeout(function () {
139
- return specifiedEl.focus();
140
- }, 0);
141
- return;
142
- }
143
- }
144
- setTimeout(function () {
145
- firstElement === null || firstElement === void 0 || firstElement.focus();
146
- }, 0);
134
+ useFocus.claimFocus(firstElement, modalRef, selectorPrimaryFocus);
147
135
  }
148
136
  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
149
137
  React.useEffect(function () {
package/lib/components/AboutModal/AboutModal.js CHANGED
@@ -64,12 +64,9 @@ exports.AboutModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
64
64
  }, [bodyRef]);
65
65
  React.useEffect(function () {
66
66
  if (open) {
67
- setTimeout(function () {
68
- return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
69
- }, 0);
67
+ useFocus.claimFocus(firstElement, modalRef);
70
68
  }
71
- // eslint-disable-next-line react-hooks/exhaustive-deps
72
- }, [open]);
69
+ }, [firstElement, modalRef, open]);
73
70
  return renderPortalUse( /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
74
71
  enableExperimentalFocusWrapWithoutSentinels: true
75
72
  }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
package/lib/components/Tearsheet/TearsheetShell.js CHANGED
@@ -148,33 +148,12 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
148
148
 
149
149
  // Callback to give the tearsheet the opportunity to claim focus
150
150
  handleStackChange.claimFocus = function () {
151
- if (selectorPrimaryFocus && useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
152
- var _window;
153
- var specifiedEl = useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
154
- if (specifiedEl && ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(specifiedEl)) === null || _window === void 0 ? void 0 : _window.display) !== 'none') {
155
- return specifiedEl.focus();
156
- }
157
- }
158
- setTimeout(function () {
159
- return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
160
- }, 0);
151
+ useFocus.claimFocus(firstElement, modalRef, selectorPrimaryFocus);
161
152
  };
162
153
  React.useEffect(function () {
163
154
  if (open) {
164
155
  // Focusing the first element or selectorPrimaryFocus element
165
- if (selectorPrimaryFocus && useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
166
- var _window2;
167
- var specifiedEl = useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
168
- if (specifiedEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specifiedEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
169
- setTimeout(function () {
170
- return specifiedEl.focus();
171
- }, 0);
172
- return;
173
- }
174
- }
175
- setTimeout(function () {
176
- return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
177
- }, 0);
156
+ useFocus.claimFocus(firstElement, modalRef, selectorPrimaryFocus);
178
157
  }
179
158
  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
180
159
  React.useEffect(function () {
package/lib/global/js/hooks/useFocus.d.ts CHANGED
@@ -12,3 +12,4 @@ export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
12
12
  specified: any;
13
13
  };
14
14
  };
15
+ export function claimFocus(firstElement: any, modalRef: any, selectorPrimaryFocus?: string | undefined): any;
package/lib/global/js/hooks/useFocus.js CHANGED
@@ -106,5 +106,26 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
106
106
  };
107
107
  };
108
108
 
109
+ /**
110
+ *
111
+ * @param {*} firstElement
112
+ * @param {*} modalRef
113
+ * @param {string | undefined} selectorPrimaryFocus
114
+ */
115
+ var claimFocus = function claimFocus(firstElement, modalRef) {
116
+ var selectorPrimaryFocus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
117
+ if (selectorPrimaryFocus && getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
118
+ var _window2;
119
+ var specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
120
+ if (specifiedEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specifiedEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
121
+ return specifiedEl.focus();
122
+ }
123
+ }
124
+ setTimeout(function () {
125
+ return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
126
+ }, 0);
127
+ };
128
+
129
+ exports.claimFocus = claimFocus;
109
130
  exports.getSpecificElement = getSpecificElement;
110
131
  exports.useFocus = useFocus;
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.54.0-canary.29+01ece2b9f",
4
+ "version": "2.54.0-canary.31+0cf0f70e0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -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": "01ece2b9fd1c5836f4967c5d7d3edd9b0d470cfd"
123
+ "gitHead": "0cf0f70e0987b59b5c98b159bc67a4a82f26aa3a"
124
124
  }