@carbon/react 1.70.0-rc.0 → 1.70.0

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 (44) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +829 -829
  2. package/es/components/CheckboxGroup/CheckboxGroup.js +1 -1
  3. package/es/components/ComboBox/ComboBox.js +16 -8
  4. package/es/components/ComposedModal/ComposedModal.js +6 -2
  5. package/es/components/DataTable/Table.d.ts +9 -1
  6. package/es/components/DataTable/Table.js +7 -2
  7. package/es/components/DatePicker/DatePicker.js +0 -8
  8. package/es/components/DatePicker/plugins/appendToPlugin.js +2 -2
  9. package/es/components/DatePicker/plugins/fixEventsPlugin.js +2 -2
  10. package/es/components/DatePicker/plugins/rangePlugin.js +2 -2
  11. package/es/components/OverflowMenu/OverflowMenu.js +1 -1
  12. package/es/components/Pagination/Pagination.js +1 -1
  13. package/es/components/Pagination/experimental/PageSelector.js +1 -1
  14. package/es/components/Popover/index.js +2 -2
  15. package/es/components/SkeletonText/SkeletonText.js +1 -1
  16. package/es/components/TreeView/TreeNode.js +1 -1
  17. package/es/components/TreeView/TreeView.js +1 -1
  18. package/es/components/UIShell/HeaderMenu.js +1 -1
  19. package/es/components/UIShell/SideNav.js +1 -1
  20. package/es/components/UIShell/SideNavItems.js +1 -1
  21. package/es/components/UIShell/SideNavMenu.js +1 -1
  22. package/es/components/UIShell/Switcher.js +1 -1
  23. package/lib/components/CheckboxGroup/CheckboxGroup.js +1 -1
  24. package/lib/components/ComboBox/ComboBox.js +17 -8
  25. package/lib/components/ComposedModal/ComposedModal.js +6 -2
  26. package/lib/components/DataTable/Table.d.ts +9 -1
  27. package/lib/components/DataTable/Table.js +7 -2
  28. package/lib/components/DatePicker/DatePicker.js +0 -8
  29. package/lib/components/DatePicker/plugins/appendToPlugin.js +2 -2
  30. package/lib/components/DatePicker/plugins/fixEventsPlugin.js +2 -2
  31. package/lib/components/DatePicker/plugins/rangePlugin.js +2 -2
  32. package/lib/components/OverflowMenu/OverflowMenu.js +1 -1
  33. package/lib/components/Pagination/Pagination.js +1 -1
  34. package/lib/components/Pagination/experimental/PageSelector.js +1 -1
  35. package/lib/components/Popover/index.js +2 -2
  36. package/lib/components/SkeletonText/SkeletonText.js +1 -1
  37. package/lib/components/TreeView/TreeNode.js +1 -1
  38. package/lib/components/TreeView/TreeView.js +1 -1
  39. package/lib/components/UIShell/HeaderMenu.js +1 -1
  40. package/lib/components/UIShell/SideNav.js +1 -1
  41. package/lib/components/UIShell/SideNavItems.js +1 -1
  42. package/lib/components/UIShell/SideNavMenu.js +1 -1
  43. package/lib/components/UIShell/Switcher.js +1 -1
  44. package/package.json +4 -4
@@ -48,7 +48,7 @@ const CheckboxGroup = _ref => {
48
48
 
49
49
  // Slug is always size `mini`
50
50
  let normalizedSlug;
51
- if ( /*#__PURE__*/React__default.isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
51
+ if (/*#__PURE__*/React__default.isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
52
52
  normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
53
53
  size: 'mini',
54
54
  kind: 'default'
@@ -12,6 +12,7 @@ import PropTypes from 'prop-types';
12
12
  import React__default, { forwardRef, useRef, useEffect, useState, useContext, useCallback, useMemo } from 'react';
13
13
  import '../Text/index.js';
14
14
  import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
15
+ import isEqual from 'react-fast-compare';
15
16
  import ListBox from '../ListBox/index.js';
16
17
  import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
17
18
  import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
@@ -225,11 +226,15 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
225
226
  selectedItem: selectedItemProp,
226
227
  prevSelectedItem: prevSelectedItemProp.current
227
228
  });
228
- setInputValue(currentInputValue);
229
- onChange({
230
- selectedItem: selectedItemProp,
231
- inputValue: currentInputValue
232
- });
229
+
230
+ // selectedItem has been updated externally, need to update state and call onChange
231
+ if (inputValue !== currentInputValue) {
232
+ setInputValue(currentInputValue);
233
+ onChange({
234
+ selectedItem: selectedItemProp,
235
+ inputValue: currentInputValue
236
+ });
237
+ }
233
238
  prevSelectedItemProp.current = selectedItemProp;
234
239
  }
235
240
  }, [selectedItemProp]);
@@ -443,9 +448,12 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
443
448
  let {
444
449
  selectedItem
445
450
  } = _ref5;
446
- onChange({
447
- selectedItem
448
- });
451
+ // only call onChange if new selection is updated from previous
452
+ if (!isEqual(selectedItem, selectedItemProp)) {
453
+ onChange({
454
+ selectedItem
455
+ });
456
+ }
449
457
  },
450
458
  onHighlightedIndexChange: _ref6 => {
451
459
  let {
@@ -210,7 +210,8 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
210
210
  const el = child;
211
211
  return /*#__PURE__*/React__default.cloneElement(el, {
212
212
  closeModal,
213
- inputref: button
213
+ inputref: button,
214
+ danger
214
215
  });
215
216
  }
216
217
  default:
@@ -227,7 +228,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
227
228
  useEffect(() => {
228
229
  const initialFocus = focusContainerElement => {
229
230
  const containerElement = focusContainerElement || innerModal.current;
230
- const primaryFocusElement = containerElement ? containerElement.querySelector(selectorPrimaryFocus) : null;
231
+ const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
231
232
  if (primaryFocusElement) {
232
233
  return primaryFocusElement;
233
234
  }
@@ -235,8 +236,11 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
235
236
  };
236
237
  const focusButton = focusContainerElement => {
237
238
  const target = initialFocus(focusContainerElement);
239
+ const closeButton = focusContainerElement.querySelector(`.${prefix}--modal-close`);
238
240
  if (target) {
239
241
  target.focus();
242
+ } else if (!target && closeButton) {
243
+ closeButton?.focus();
240
244
  }
241
245
  };
242
246
  if (open && isOpen) {
@@ -33,9 +33,13 @@ interface TableProps {
33
33
  * `true` to add useZebraStyles striping.
34
34
  */
35
35
  useZebraStyles?: boolean;
36
+ /**
37
+ * Specify the table tabIndex
38
+ */
39
+ tabIndex?: number;
36
40
  }
37
41
  export declare const Table: {
38
- ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
42
+ ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
39
43
  propTypes: {
40
44
  /**
41
45
  * Pass in the children that will be rendered within the Table
@@ -70,6 +74,10 @@ export declare const Table: {
70
74
  * `true` to add useZebraStyles striping.
71
75
  */
72
76
  useZebraStyles: PropTypes.Requireable<boolean>;
77
+ /**
78
+ * Specify the table tabIndex
79
+ */
80
+ tabIndex: PropTypes.Requireable<number>;
73
81
  };
74
82
  };
75
83
  export default Table;
@@ -54,6 +54,7 @@ const Table = _ref => {
54
54
  stickyHeader,
55
55
  overflowMenuOnHover = true,
56
56
  experimentalAutoAlign = false,
57
+ tabIndex,
57
58
  ...other
58
59
  } = _ref;
59
60
  const {
@@ -129,7 +130,7 @@ const Table = _ref => {
129
130
  className: `${prefix}--data-table-content`
130
131
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
131
132
  ,
132
- tabIndex: isScrollable ? 0 : undefined
133
+ tabIndex: tabIndex ?? (isScrollable ? 0 : undefined)
133
134
  }, /*#__PURE__*/React__default.createElement("table", _extends({
134
135
  "aria-labelledby": titleId,
135
136
  "aria-describedby": descriptionId
@@ -174,7 +175,11 @@ Table.propTypes = {
174
175
  /**
175
176
  * `true` to add useZebraStyles striping.
176
177
  */
177
- useZebraStyles: PropTypes.bool
178
+ useZebraStyles: PropTypes.bool,
179
+ /**
180
+ * Specify the table tabIndex
181
+ */
182
+ tabIndex: PropTypes.number
178
183
  };
179
184
 
180
185
  export { Table, Table as default };
@@ -530,9 +530,6 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
530
530
  const closeCalendar = event => {
531
531
  calendarRef.current.close();
532
532
  // Remove focus from endDate calendar input
533
- if (document.activeElement instanceof HTMLElement) {
534
- document.activeElement.blur();
535
- }
536
533
  onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, {
537
534
  type: 'clickOutside'
538
535
  });
@@ -558,12 +555,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
558
555
  if (!calendarRef.current || !startInputField.current) return;
559
556
  const handleKeyDown = event => {
560
557
  if (match(event, Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current.isOpen) {
561
- event.preventDefault();
562
558
  calendarRef.current.close();
563
- // Remove focus from endDate calendar input
564
- document.activeElement instanceof HTMLElement &&
565
- // this is to fix the TS warning
566
- document?.activeElement?.blur();
567
559
  onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, event);
568
560
  }
569
561
  };
@@ -9,7 +9,7 @@
9
9
  * @param {object} config Plugin configuration.
10
10
  * @returns {Plugin} A Flatpickr plugin to put adjust the position of calendar dropdown.
11
11
  */
12
- var carbonFlatpickrAppendToPlugin = (config => fp => {
12
+ var carbonFlatpickrAppendToPlugin = config => fp => {
13
13
  /**
14
14
  * Adjusts the floating menu position after Flatpicker sets it.
15
15
  */
@@ -51,6 +51,6 @@ var carbonFlatpickrAppendToPlugin = (config => fp => {
51
51
  onReady: register,
52
52
  onPreCalendarPosition: handlePreCalendarPosition
53
53
  };
54
- });
54
+ };
55
55
 
56
56
  export { carbonFlatpickrAppendToPlugin as default };
@@ -12,7 +12,7 @@ import { Enter, ArrowLeft, ArrowRight, ArrowDown } from '../../../internal/keybo
12
12
  * @param {object} config Plugin configuration.
13
13
  * @returns {Plugin} A Flatpickr plugin to fix Flatpickr's behavior of certain events.
14
14
  */
15
- var carbonFlatpickrFixEventsPlugin = (config => fp => {
15
+ var carbonFlatpickrFixEventsPlugin = config => fp => {
16
16
  const {
17
17
  inputFrom,
18
18
  inputTo,
@@ -150,6 +150,6 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
150
150
  onReady: [register, init],
151
151
  onDestroy: [release]
152
152
  };
153
- });
153
+ };
154
154
 
155
155
  export { carbonFlatpickrFixEventsPlugin as default };
@@ -14,7 +14,7 @@ import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
14
14
  * Workaround for: https://github.com/flatpickr/flatpickr/issues/1944
15
15
  * * A logic to ensure `fp.setDate()` call won't end up with "startDate to endDate" set to the first `<input>`
16
16
  */
17
- var carbonFlatpickrRangePlugin = (config => {
17
+ var carbonFlatpickrRangePlugin = config => {
18
18
  const factory = rangePlugin(Object.assign({
19
19
  position: 'left'
20
20
  }, config));
@@ -49,6 +49,6 @@ var carbonFlatpickrRangePlugin = (config => {
49
49
  onPreCalendarPosition() {}
50
50
  });
51
51
  };
52
- });
52
+ };
53
53
 
54
54
  export { carbonFlatpickrRangePlugin as default };
@@ -206,7 +206,7 @@ class OverflowMenu extends React__default.Component {
206
206
  direction
207
207
  } = _ref;
208
208
  const enabledIndices = React__default.Children.toArray(this.props.children).reduce((acc, curr, i) => {
209
- if ( /*#__PURE__*/React__default.isValidElement(curr) && !curr.props.disabled) {
209
+ if (/*#__PURE__*/React__default.isValidElement(curr) && !curr.props.disabled) {
210
210
  acc.push(i);
211
211
  }
212
212
  return acc;
@@ -29,7 +29,7 @@ function renderSelectItems(total) {
29
29
  let counter = 1;
30
30
  const itemArr = [];
31
31
  while (counter <= total) {
32
- itemArr.push( /*#__PURE__*/React__default.createElement(SelectItem, {
32
+ itemArr.push(/*#__PURE__*/React__default.createElement(SelectItem, {
33
33
  key: counter,
34
34
  value: counter,
35
35
  text: String(counter)
@@ -30,7 +30,7 @@ function PageSelector(_ref) {
30
30
  const renderPages = total => {
31
31
  const pages = [];
32
32
  for (let counter = 1; counter <= total; counter += 1) {
33
- pages.push( /*#__PURE__*/React__default.createElement(SelectItem, {
33
+ pages.push(/*#__PURE__*/React__default.createElement(SelectItem, {
34
34
  key: counter,
35
35
  value: counter,
36
36
  text: String(counter)
@@ -213,7 +213,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
213
213
  const isTriggerElement = item?.type === 'button';
214
214
  const isTriggerComponent = enableFloatingStyles && displayName && ['ToggletipButton'].includes(displayName);
215
215
  const isAllowedTriggerComponent = enableFloatingStyles && !['ToggletipContent', 'PopoverContent'].includes(displayName);
216
- if ( /*#__PURE__*/React__default.isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
216
+ if (/*#__PURE__*/React__default.isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
217
217
  const className = item?.props?.className;
218
218
  const ref = (item?.props).ref;
219
219
  const tabTipClasses = cx(`${prefix}--popover--tab-tip__button`, className);
@@ -336,7 +336,7 @@ Popover.propTypes = {
336
336
  */
337
337
  open: PropTypes.bool.isRequired
338
338
  };
339
- function PopoverContentRenderFunction( // eslint-disable-next-line react/prop-types
339
+ function PopoverContentRenderFunction(// eslint-disable-next-line react/prop-types
340
340
  _ref2, forwardRef) {
341
341
  let {
342
342
  className,
@@ -56,7 +56,7 @@ const SkeletonText = _ref => {
56
56
  }, [lineCountNumber, paragraph, refs, width, widthNum, widthPercent, widthPx]);
57
57
  const lines = [];
58
58
  for (let i = 0; i < lineCountNumber; i++) {
59
- lines.push( /*#__PURE__*/React__default.createElement("p", _extends({
59
+ lines.push(/*#__PURE__*/React__default.createElement("p", _extends({
60
60
  className: skeletonTextClasses,
61
61
  key: i,
62
62
  ref: el => refs.current = [...refs.current, el]
@@ -63,7 +63,7 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
63
63
  }
64
64
  };
65
65
  const nodesWithProps = React__default.Children.map(children, node => {
66
- if ( /*#__PURE__*/React__default.isValidElement(node)) {
66
+ if (/*#__PURE__*/React__default.isValidElement(node)) {
67
67
  return /*#__PURE__*/React__default.cloneElement(node, {
68
68
  active,
69
69
  depth: depth + 1,
@@ -121,7 +121,7 @@ const TreeView = _ref => {
121
121
  sharedNodeProps.tabIndex = 0;
122
122
  focusTarget = true;
123
123
  }
124
- if ( /*#__PURE__*/React__default.isValidElement(node)) {
124
+ if (/*#__PURE__*/React__default.isValidElement(node)) {
125
125
  return /*#__PURE__*/React__default.cloneElement(node, sharedNodeProps);
126
126
  }
127
127
  });
@@ -124,7 +124,7 @@ class HeaderMenu extends React__default.Component {
124
124
  * sequence when they might not want to go through all the items.
125
125
  */
126
126
  _defineProperty(this, "_renderMenuItem", (item, index) => {
127
- if ( /*#__PURE__*/React__default.isValidElement(item)) {
127
+ if (/*#__PURE__*/React__default.isValidElement(item)) {
128
128
  return /*#__PURE__*/React__default.cloneElement(item, {
129
129
  ref: this.handleItemRef(index)
130
130
  });
@@ -96,7 +96,7 @@ function SideNavRenderFunction(_ref, ref) {
96
96
  childrenToRender = React__default.Children.map(children, child => {
97
97
  // if we are controlled, check for if we have hovered over or the expanded state, else just use the expanded state (uncontrolled)
98
98
  const currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded;
99
- if ( /*#__PURE__*/isValidElement(child)) {
99
+ if (/*#__PURE__*/isValidElement(child)) {
100
100
  const childJsxElement = child;
101
101
  // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
102
102
  return /*#__PURE__*/React__default.cloneElement(childJsxElement, {
@@ -20,7 +20,7 @@ const SideNavItems = _ref => {
20
20
  const prefix = usePrefix();
21
21
  const className = cx([`${prefix}--side-nav__items`], customClassName);
22
22
  const childrenWithExpandedState = React__default.Children.map(children, child => {
23
- if ( /*#__PURE__*/React__default.isValidElement(child)) {
23
+ if (/*#__PURE__*/React__default.isValidElement(child)) {
24
24
  // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
25
25
  const childDisplayName = child.type?.displayName;
26
26
  return /*#__PURE__*/React__default.cloneElement(child, {
@@ -148,7 +148,7 @@ function hasActiveDescendant(children) {
148
148
 
149
149
  // We use React.isValidElement(child) to check if the child is a valid React element before accessing its props
150
150
 
151
- if ( /*#__PURE__*/React__default.isValidElement(children)) {
151
+ if (/*#__PURE__*/React__default.isValidElement(children)) {
152
152
  const props = children.props;
153
153
  if (props.isActive === true || props['aria-current']) {
154
154
  return true;
@@ -62,7 +62,7 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
62
62
  };
63
63
  const childrenWithProps = React__default.Children.toArray(children).map((child, index) => {
64
64
  // only setup click handlers if onChange event is passed
65
- if ( /*#__PURE__*/React__default.isValidElement(child) && child.type && getDisplayName(child.type) === 'Switcher') {
65
+ if (/*#__PURE__*/React__default.isValidElement(child) && child.type && getDisplayName(child.type) === 'Switcher') {
66
66
  return /*#__PURE__*/React__default.cloneElement(child, {
67
67
  handleSwitcherItemFocus,
68
68
  index,
@@ -58,7 +58,7 @@ const CheckboxGroup = _ref => {
58
58
 
59
59
  // Slug is always size `mini`
60
60
  let normalizedSlug;
61
- if ( /*#__PURE__*/React__default["default"].isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
61
+ if (/*#__PURE__*/React__default["default"].isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
62
62
  normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
63
63
  size: 'mini',
64
64
  kind: 'default'
@@ -16,6 +16,7 @@ var PropTypes = require('prop-types');
16
16
  var React = require('react');
17
17
  require('../Text/index.js');
18
18
  var iconsReact = require('@carbon/icons-react');
19
+ var isEqual = require('react-fast-compare');
19
20
  var index$1 = require('../ListBox/index.js');
20
21
  var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
21
22
  var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
@@ -38,6 +39,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
38
39
  var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
39
40
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
40
41
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
42
+ var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
41
43
 
42
44
  const {
43
45
  InputBlur,
@@ -235,11 +237,15 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
235
237
  selectedItem: selectedItemProp,
236
238
  prevSelectedItem: prevSelectedItemProp.current
237
239
  });
238
- setInputValue(currentInputValue);
239
- onChange({
240
- selectedItem: selectedItemProp,
241
- inputValue: currentInputValue
242
- });
240
+
241
+ // selectedItem has been updated externally, need to update state and call onChange
242
+ if (inputValue !== currentInputValue) {
243
+ setInputValue(currentInputValue);
244
+ onChange({
245
+ selectedItem: selectedItemProp,
246
+ inputValue: currentInputValue
247
+ });
248
+ }
243
249
  prevSelectedItemProp.current = selectedItemProp;
244
250
  }
245
251
  }, [selectedItemProp]);
@@ -453,9 +459,12 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
453
459
  let {
454
460
  selectedItem
455
461
  } = _ref5;
456
- onChange({
457
- selectedItem
458
- });
462
+ // only call onChange if new selection is updated from previous
463
+ if (!isEqual__default["default"](selectedItem, selectedItemProp)) {
464
+ onChange({
465
+ selectedItem
466
+ });
467
+ }
459
468
  },
460
469
  onHighlightedIndexChange: _ref6 => {
461
470
  let {
@@ -221,7 +221,8 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
221
221
  const el = child;
222
222
  return /*#__PURE__*/React__default["default"].cloneElement(el, {
223
223
  closeModal,
224
- inputref: button
224
+ inputref: button,
225
+ danger
225
226
  });
226
227
  }
227
228
  default:
@@ -238,7 +239,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
238
239
  React.useEffect(() => {
239
240
  const initialFocus = focusContainerElement => {
240
241
  const containerElement = focusContainerElement || innerModal.current;
241
- const primaryFocusElement = containerElement ? containerElement.querySelector(selectorPrimaryFocus) : null;
242
+ const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
242
243
  if (primaryFocusElement) {
243
244
  return primaryFocusElement;
244
245
  }
@@ -246,8 +247,11 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
246
247
  };
247
248
  const focusButton = focusContainerElement => {
248
249
  const target = initialFocus(focusContainerElement);
250
+ const closeButton = focusContainerElement.querySelector(`.${prefix}--modal-close`);
249
251
  if (target) {
250
252
  target.focus();
253
+ } else if (!target && closeButton) {
254
+ closeButton?.focus();
251
255
  }
252
256
  };
253
257
  if (open && isOpen) {
@@ -33,9 +33,13 @@ interface TableProps {
33
33
  * `true` to add useZebraStyles striping.
34
34
  */
35
35
  useZebraStyles?: boolean;
36
+ /**
37
+ * Specify the table tabIndex
38
+ */
39
+ tabIndex?: number;
36
40
  }
37
41
  export declare const Table: {
38
- ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
42
+ ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
39
43
  propTypes: {
40
44
  /**
41
45
  * Pass in the children that will be rendered within the Table
@@ -70,6 +74,10 @@ export declare const Table: {
70
74
  * `true` to add useZebraStyles striping.
71
75
  */
72
76
  useZebraStyles: PropTypes.Requireable<boolean>;
77
+ /**
78
+ * Specify the table tabIndex
79
+ */
80
+ tabIndex: PropTypes.Requireable<number>;
73
81
  };
74
82
  };
75
83
  export default Table;
@@ -65,6 +65,7 @@ const Table = _ref => {
65
65
  stickyHeader,
66
66
  overflowMenuOnHover = true,
67
67
  experimentalAutoAlign = false,
68
+ tabIndex,
68
69
  ...other
69
70
  } = _ref;
70
71
  const {
@@ -140,7 +141,7 @@ const Table = _ref => {
140
141
  className: `${prefix}--data-table-content`
141
142
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
142
143
  ,
143
- tabIndex: isScrollable ? 0 : undefined
144
+ tabIndex: tabIndex ?? (isScrollable ? 0 : undefined)
144
145
  }, /*#__PURE__*/React__default["default"].createElement("table", _rollupPluginBabelHelpers["extends"]({
145
146
  "aria-labelledby": titleId,
146
147
  "aria-describedby": descriptionId
@@ -185,7 +186,11 @@ Table.propTypes = {
185
186
  /**
186
187
  * `true` to add useZebraStyles striping.
187
188
  */
188
- useZebraStyles: PropTypes__default["default"].bool
189
+ useZebraStyles: PropTypes__default["default"].bool,
190
+ /**
191
+ * Specify the table tabIndex
192
+ */
193
+ tabIndex: PropTypes__default["default"].number
189
194
  };
190
195
 
191
196
  exports.Table = Table;
@@ -542,9 +542,6 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
542
542
  const closeCalendar = event => {
543
543
  calendarRef.current.close();
544
544
  // Remove focus from endDate calendar input
545
- if (document.activeElement instanceof HTMLElement) {
546
- document.activeElement.blur();
547
- }
548
545
  onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, {
549
546
  type: 'clickOutside'
550
547
  });
@@ -570,12 +567,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
570
567
  if (!calendarRef.current || !startInputField.current) return;
571
568
  const handleKeyDown = event => {
572
569
  if (match.match(event, keys.Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current.isOpen) {
573
- event.preventDefault();
574
570
  calendarRef.current.close();
575
- // Remove focus from endDate calendar input
576
- document.activeElement instanceof HTMLElement &&
577
- // this is to fix the TS warning
578
- document?.activeElement?.blur();
579
571
  onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, event);
580
572
  }
581
573
  };
@@ -13,7 +13,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
13
13
  * @param {object} config Plugin configuration.
14
14
  * @returns {Plugin} A Flatpickr plugin to put adjust the position of calendar dropdown.
15
15
  */
16
- var carbonFlatpickrAppendToPlugin = (config => fp => {
16
+ var carbonFlatpickrAppendToPlugin = config => fp => {
17
17
  /**
18
18
  * Adjusts the floating menu position after Flatpicker sets it.
19
19
  */
@@ -55,6 +55,6 @@ var carbonFlatpickrAppendToPlugin = (config => fp => {
55
55
  onReady: register,
56
56
  onPreCalendarPosition: handlePreCalendarPosition
57
57
  };
58
- });
58
+ };
59
59
 
60
60
  exports["default"] = carbonFlatpickrAppendToPlugin;
@@ -16,7 +16,7 @@ var keys = require('../../../internal/keyboard/keys.js');
16
16
  * @param {object} config Plugin configuration.
17
17
  * @returns {Plugin} A Flatpickr plugin to fix Flatpickr's behavior of certain events.
18
18
  */
19
- var carbonFlatpickrFixEventsPlugin = (config => fp => {
19
+ var carbonFlatpickrFixEventsPlugin = config => fp => {
20
20
  const {
21
21
  inputFrom,
22
22
  inputTo,
@@ -154,6 +154,6 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
154
154
  onReady: [register, init],
155
155
  onDestroy: [release]
156
156
  };
157
- });
157
+ };
158
158
 
159
159
  exports["default"] = carbonFlatpickrFixEventsPlugin;
@@ -22,7 +22,7 @@ var rangePlugin__default = /*#__PURE__*/_interopDefaultLegacy(rangePlugin);
22
22
  * Workaround for: https://github.com/flatpickr/flatpickr/issues/1944
23
23
  * * A logic to ensure `fp.setDate()` call won't end up with "startDate to endDate" set to the first `<input>`
24
24
  */
25
- var carbonFlatpickrRangePlugin = (config => {
25
+ var carbonFlatpickrRangePlugin = config => {
26
26
  const factory = rangePlugin__default["default"](Object.assign({
27
27
  position: 'left'
28
28
  }, config));
@@ -57,6 +57,6 @@ var carbonFlatpickrRangePlugin = (config => {
57
57
  onPreCalendarPosition() {}
58
58
  });
59
59
  };
60
- });
60
+ };
61
61
 
62
62
  exports["default"] = carbonFlatpickrRangePlugin;
@@ -217,7 +217,7 @@ class OverflowMenu extends React__default["default"].Component {
217
217
  direction
218
218
  } = _ref;
219
219
  const enabledIndices = React__default["default"].Children.toArray(this.props.children).reduce((acc, curr, i) => {
220
- if ( /*#__PURE__*/React__default["default"].isValidElement(curr) && !curr.props.disabled) {
220
+ if (/*#__PURE__*/React__default["default"].isValidElement(curr) && !curr.props.disabled) {
221
221
  acc.push(i);
222
222
  }
223
223
  return acc;
@@ -39,7 +39,7 @@ function renderSelectItems(total) {
39
39
  let counter = 1;
40
40
  const itemArr = [];
41
41
  while (counter <= total) {
42
- itemArr.push( /*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
42
+ itemArr.push(/*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
43
43
  key: counter,
44
44
  value: counter,
45
45
  text: String(counter)
@@ -40,7 +40,7 @@ function PageSelector(_ref) {
40
40
  const renderPages = total => {
41
41
  const pages = [];
42
42
  for (let counter = 1; counter <= total; counter += 1) {
43
- pages.push( /*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
43
+ pages.push(/*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
44
44
  key: counter,
45
45
  value: counter,
46
46
  text: String(counter)
@@ -223,7 +223,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
223
223
  const isTriggerElement = item?.type === 'button';
224
224
  const isTriggerComponent = enableFloatingStyles && displayName && ['ToggletipButton'].includes(displayName);
225
225
  const isAllowedTriggerComponent = enableFloatingStyles && !['ToggletipContent', 'PopoverContent'].includes(displayName);
226
- if ( /*#__PURE__*/React__default["default"].isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
226
+ if (/*#__PURE__*/React__default["default"].isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
227
227
  const className = item?.props?.className;
228
228
  const ref = (item?.props).ref;
229
229
  const tabTipClasses = cx__default["default"](`${prefix}--popover--tab-tip__button`, className);
@@ -346,7 +346,7 @@ Popover.propTypes = {
346
346
  */
347
347
  open: PropTypes__default["default"].bool.isRequired
348
348
  };
349
- function PopoverContentRenderFunction( // eslint-disable-next-line react/prop-types
349
+ function PopoverContentRenderFunction(// eslint-disable-next-line react/prop-types
350
350
  _ref2, forwardRef) {
351
351
  let {
352
352
  className,
@@ -66,7 +66,7 @@ const SkeletonText = _ref => {
66
66
  }, [lineCountNumber, paragraph, refs, width, widthNum, widthPercent, widthPx]);
67
67
  const lines = [];
68
68
  for (let i = 0; i < lineCountNumber; i++) {
69
- lines.push( /*#__PURE__*/React__default["default"].createElement("p", _rollupPluginBabelHelpers["extends"]({
69
+ lines.push(/*#__PURE__*/React__default["default"].createElement("p", _rollupPluginBabelHelpers["extends"]({
70
70
  className: skeletonTextClasses,
71
71
  key: i,
72
72
  ref: el => refs.current = [...refs.current, el]