carbon-react 113.0.0 → 113.0.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 (7) hide show
  1. package/esm/__internal__/focus-trap/focus-trap-utils.d.ts +1 -1
  2. package/esm/__internal__/focus-trap/focus-trap-utils.js +1 -1
  3. package/esm/__internal__/focus-trap/focus-trap.component.js +25 -26
  4. package/lib/__internal__/focus-trap/focus-trap-utils.d.ts +1 -1
  5. package/lib/__internal__/focus-trap/focus-trap-utils.js +1 -1
  6. package/lib/__internal__/focus-trap/focus-trap.component.js +25 -26
  7. package/package.json +2 -1
package/esm/__internal__/focus-trap/focus-trap-utils.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  declare const defaultFocusableSelectors = "button:not([disabled]), [href], input:not([type=\"hidden\"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]";
2
2
  declare const setElementFocus: (element: HTMLElement) => void;
3
- declare const getNextElement: (element: HTMLElement, focusableElements: HTMLElement[], shiftKey: boolean) => HTMLElement;
3
+ declare const getNextElement: (element: HTMLElement, focusableElements: HTMLElement[], shiftKey: boolean) => HTMLElement | undefined;
4
4
  export { defaultFocusableSelectors, getNextElement, setElementFocus };
package/esm/__internal__/focus-trap/focus-trap-utils.js CHANGED
@@ -51,7 +51,7 @@ const getNextElement = (element, focusableElements, shiftKey) => {
51
51
  return focusableElements[0];
52
52
  }
53
53
 
54
- return element;
54
+ return undefined;
55
55
  }
56
56
 
57
57
  const increment = shiftKey ? -1 : 1;
package/esm/__internal__/focus-trap/focus-trap.component.js CHANGED
@@ -78,33 +78,22 @@ const FocusTrap = ({
78
78
  return;
79
79
  }
80
80
 
81
+ if (ev.key !== "Tab") return;
82
+
83
+ if (!(focusableElements !== null && focusableElements !== void 0 && focusableElements.length)) {
84
+ /* Block the trap */
85
+ ev.preventDefault();
86
+ return;
87
+ }
88
+
81
89
  const activeElement = document.activeElement;
90
+ const isWrapperFocused = activeElement === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
91
+ const elementWhenWrapperFocused = ev.shiftKey ? firstElement : lastElement;
92
+ const elementToFocus = getNextElement(isWrapperFocused ? elementWhenWrapperFocused : activeElement, focusableElements, ev.shiftKey);
82
93
 
83
- if (ev.key === "Tab") {
84
- if (!(focusableElements !== null && focusableElements !== void 0 && focusableElements.length)) {
85
- /* Block the trap */
86
- ev.preventDefault();
87
- } else if (ev.shiftKey) {
88
- /* shift + tab */
89
- let elementToFocus;
90
-
91
- if (activeElement === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
92
- elementToFocus = getNextElement(firstElement, focusableElements, ev.shiftKey);
93
- } else {
94
- elementToFocus = getNextElement(activeElement, focusableElements, ev.shiftKey);
95
- }
96
-
97
- setElementFocus(elementToFocus);
98
- ev.preventDefault();
99
- } else if (activeElement === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
100
- const elementToFocus = getNextElement(lastElement, focusableElements, ev.shiftKey);
101
- setElementFocus(elementToFocus);
102
- ev.preventDefault();
103
- } else {
104
- const elementToFocus = getNextElement(activeElement, focusableElements, ev.shiftKey);
105
- setElementFocus(elementToFocus);
106
- ev.preventDefault();
107
- }
94
+ if (elementToFocus) {
95
+ setElementFocus(elementToFocus);
96
+ ev.preventDefault();
108
97
  }
109
98
  };
110
99
 
@@ -169,7 +158,17 @@ const FocusTrap = ({
169
158
  });
170
159
  return /*#__PURE__*/React.createElement("div", {
171
160
  ref: trapRef
172
- }, clonedChildren);
161
+ }, /*#__PURE__*/React.createElement("div", {
162
+ "data-element": "tab-guard-top" // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
163
+ ,
164
+ tabIndex: 0,
165
+ onFocus: () => setElementFocus(lastElement)
166
+ }), clonedChildren, /*#__PURE__*/React.createElement("div", {
167
+ "data-element": "tab-guard-bottom" // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
168
+ ,
169
+ tabIndex: 0,
170
+ onFocus: () => setElementFocus(firstElement)
171
+ }));
173
172
  };
174
173
 
175
174
  FocusTrap.propTypes = {
package/lib/__internal__/focus-trap/focus-trap-utils.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  declare const defaultFocusableSelectors = "button:not([disabled]), [href], input:not([type=\"hidden\"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]";
2
2
  declare const setElementFocus: (element: HTMLElement) => void;
3
- declare const getNextElement: (element: HTMLElement, focusableElements: HTMLElement[], shiftKey: boolean) => HTMLElement;
3
+ declare const getNextElement: (element: HTMLElement, focusableElements: HTMLElement[], shiftKey: boolean) => HTMLElement | undefined;
4
4
  export { defaultFocusableSelectors, getNextElement, setElementFocus };
package/lib/__internal__/focus-trap/focus-trap-utils.js CHANGED
@@ -60,7 +60,7 @@ const getNextElement = (element, focusableElements, shiftKey) => {
60
60
  return focusableElements[0];
61
61
  }
62
62
 
63
- return element;
63
+ return undefined;
64
64
  }
65
65
 
66
66
  const increment = shiftKey ? -1 : 1;
package/lib/__internal__/focus-trap/focus-trap.component.js CHANGED
@@ -95,33 +95,22 @@ const FocusTrap = ({
95
95
  return;
96
96
  }
97
97
 
98
+ if (ev.key !== "Tab") return;
99
+
100
+ if (!(focusableElements !== null && focusableElements !== void 0 && focusableElements.length)) {
101
+ /* Block the trap */
102
+ ev.preventDefault();
103
+ return;
104
+ }
105
+
98
106
  const activeElement = document.activeElement;
107
+ const isWrapperFocused = activeElement === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
108
+ const elementWhenWrapperFocused = ev.shiftKey ? firstElement : lastElement;
109
+ const elementToFocus = (0, _focusTrapUtils.getNextElement)(isWrapperFocused ? elementWhenWrapperFocused : activeElement, focusableElements, ev.shiftKey);
99
110
 
100
- if (ev.key === "Tab") {
101
- if (!(focusableElements !== null && focusableElements !== void 0 && focusableElements.length)) {
102
- /* Block the trap */
103
- ev.preventDefault();
104
- } else if (ev.shiftKey) {
105
- /* shift + tab */
106
- let elementToFocus;
107
-
108
- if (activeElement === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
109
- elementToFocus = (0, _focusTrapUtils.getNextElement)(firstElement, focusableElements, ev.shiftKey);
110
- } else {
111
- elementToFocus = (0, _focusTrapUtils.getNextElement)(activeElement, focusableElements, ev.shiftKey);
112
- }
113
-
114
- (0, _focusTrapUtils.setElementFocus)(elementToFocus);
115
- ev.preventDefault();
116
- } else if (activeElement === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
117
- const elementToFocus = (0, _focusTrapUtils.getNextElement)(lastElement, focusableElements, ev.shiftKey);
118
- (0, _focusTrapUtils.setElementFocus)(elementToFocus);
119
- ev.preventDefault();
120
- } else {
121
- const elementToFocus = (0, _focusTrapUtils.getNextElement)(activeElement, focusableElements, ev.shiftKey);
122
- (0, _focusTrapUtils.setElementFocus)(elementToFocus);
123
- ev.preventDefault();
124
- }
111
+ if (elementToFocus) {
112
+ (0, _focusTrapUtils.setElementFocus)(elementToFocus);
113
+ ev.preventDefault();
125
114
  }
126
115
  };
127
116
 
@@ -187,7 +176,17 @@ const FocusTrap = ({
187
176
 
188
177
  return /*#__PURE__*/_react.default.createElement("div", {
189
178
  ref: trapRef
190
- }, clonedChildren);
179
+ }, /*#__PURE__*/_react.default.createElement("div", {
180
+ "data-element": "tab-guard-top" // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
181
+ ,
182
+ tabIndex: 0,
183
+ onFocus: () => (0, _focusTrapUtils.setElementFocus)(lastElement)
184
+ }), clonedChildren, /*#__PURE__*/_react.default.createElement("div", {
185
+ "data-element": "tab-guard-bottom" // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
186
+ ,
187
+ tabIndex: 0,
188
+ onFocus: () => (0, _focusTrapUtils.setElementFocus)(firstElement)
189
+ }));
191
190
  };
192
191
 
193
192
  FocusTrap.propTypes = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "113.0.0",
3
+ "version": "113.0.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",
@@ -82,6 +82,7 @@
82
82
  "@storybook/theming": "^6.4.18",
83
83
  "@testing-library/jest-dom": "^5.16.2",
84
84
  "@testing-library/react": "^12.1.3",
85
+ "@testing-library/user-event": "^14.4.3",
85
86
  "@types/crypto-js": "^4.1.1",
86
87
  "@types/draft-js": "^0.11.7",
87
88
  "@types/enzyme": "^3.10.3",