@carbon/react 1.69.0 → 1.70.0

package/es/components/FluidTextArea/FluidTextArea.Skeleton.js

@@ -5,14 +5,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import 'react';
-import 'classnames';
+import React__default from 'react';
+import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
 
-function FluidTextAreaSkeleton(_ref) {
-  usePrefix();
-}
+const FluidTextAreaSkeleton = _ref => {
+  let {
+    className,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
+    className: cx(`${prefix}--form-item ${prefix}--text-area--fluid__skeleton`, className)
+  }, other), /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--label ${prefix}--skeleton`
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--skeleton ${prefix}--text-area`
+  })));
+};
 FluidTextAreaSkeleton.propTypes = {
   /**
    * Specify an optional className to be applied to the outer FluidForm wrapper

package/es/components/Notification/Notification.js

@@ -278,9 +278,7 @@ function ToastNotification(_ref4) {
   }, caption), children), !hideCloseButton && /*#__PURE__*/React__default.createElement(NotificationButton, {
     notificationType: "toast",
     onClick: handleCloseButtonClick,
-    "aria-hidden": "true",
-    "aria-label": deprecatedAriaLabel || ariaLabel,
-    tabIndex: -1
+    "aria-label": deprecatedAriaLabel || ariaLabel
   }));
 }
 ToastNotification.propTypes = {
@@ -415,9 +413,7 @@ function InlineNotification(_ref5) {
   }, subtitle), children)), !hideCloseButton && /*#__PURE__*/React__default.createElement(NotificationButton, {
     notificationType: "inline",
     onClick: handleCloseButtonClick,
-    "aria-hidden": "true",
-    "aria-label": ariaLabel,
-    tabIndex: -1
+    "aria-label": ariaLabel
   }));
 }
 InlineNotification.propTypes = {

package/es/components/NumberInput/NumberInput.Skeleton.d.ts

@@ -15,8 +15,12 @@ export interface NumberInputSkeletonProps extends HTMLAttributes<HTMLDivElement>
      * Specify whether the label should be hidden, or not
      */
     hideLabel?: boolean;
+    /**
+     * Specify the size of the Number Input.
+     */
+    size?: 'sm' | 'md' | 'lg';
 }
-declare function NumberInputSkeleton({ hideLabel, className, ...rest }: NumberInputSkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function NumberInputSkeleton({ hideLabel, className, size, ...rest }: NumberInputSkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace NumberInputSkeleton {
     var propTypes: {
         /**
@@ -27,6 +31,10 @@ declare namespace NumberInputSkeleton {
          * Specify whether the label should be hidden, or not
          */
         hideLabel: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the size of the Number Input.
+         */
+        size: PropTypes.Requireable<string>;
     };
 }
 export default NumberInputSkeleton;

package/es/components/NumberInput/NumberInput.Skeleton.js

@@ -15,6 +15,7 @@ function NumberInputSkeleton(_ref) {
   let {
     hideLabel,
     className,
+    size = 'md',
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -23,7 +24,7 @@ function NumberInputSkeleton(_ref) {
   }, rest), !hideLabel && /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--label ${prefix}--skeleton`
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--number ${prefix}--skeleton`
+    className: `${prefix}--number ${prefix}--skeleton ${prefix}--number--${size}`
   }));
 }
 NumberInputSkeleton.propTypes = {
@@ -34,7 +35,11 @@ NumberInputSkeleton.propTypes = {
   /**
    * Specify whether the label should be hidden, or not
    */
-  hideLabel: PropTypes.bool
+  hideLabel: PropTypes.bool,
+  /**
+   * Specify the size of the Number Input.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg'])
 };
 
 export { NumberInputSkeleton as default };

package/es/components/OverflowMenu/OverflowMenu.js

@@ -206,7 +206,7 @@ class OverflowMenu extends React__default.Component {
         direction
       } = _ref;
       const enabledIndices = React__default.Children.toArray(this.props.children).reduce((acc, curr, i) => {
-        if ( /*#__PURE__*/React__default.isValidElement(curr) && !curr.props.disabled) {
+        if (/*#__PURE__*/React__default.isValidElement(curr) && !curr.props.disabled) {
           acc.push(i);
         }
         return acc;

package/es/components/Pagination/Pagination.js

@@ -29,7 +29,7 @@ function renderSelectItems(total) {
   let counter = 1;
   const itemArr = [];
   while (counter <= total) {
-    itemArr.push( /*#__PURE__*/React__default.createElement(SelectItem, {
+    itemArr.push(/*#__PURE__*/React__default.createElement(SelectItem, {
       key: counter,
       value: counter,
       text: String(counter)

package/es/components/Pagination/experimental/PageSelector.js

@@ -30,7 +30,7 @@ function PageSelector(_ref) {
   const renderPages = total => {
     const pages = [];
     for (let counter = 1; counter <= total; counter += 1) {
-      pages.push( /*#__PURE__*/React__default.createElement(SelectItem, {
+      pages.push(/*#__PURE__*/React__default.createElement(SelectItem, {
         key: counter,
         value: counter,
         text: String(counter)

package/es/components/Popover/index.js

@@ -128,6 +128,8 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
     strategy: 'fixed',
     // Middleware order matters, arrow should be last
     middleware: [offset(!isTabTip ? popoverDimensions?.current?.offset : 0), autoAlign && flip({
+      fallbackPlacements: align.includes('bottom') ? ['bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'top', 'top-start', 'top-end'] : ['top', 'top-start', 'top-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end'],
+      fallbackStrategy: 'initialPlacement',
       fallbackAxisSideDirection: 'start'
     }), arrow({
       element: caretRef
@@ -211,7 +213,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
     const isTriggerElement = item?.type === 'button';
     const isTriggerComponent = enableFloatingStyles && displayName && ['ToggletipButton'].includes(displayName);
     const isAllowedTriggerComponent = enableFloatingStyles && !['ToggletipContent', 'PopoverContent'].includes(displayName);
-    if ( /*#__PURE__*/React__default.isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
+    if (/*#__PURE__*/React__default.isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
       const className = item?.props?.className;
       const ref = (item?.props).ref;
       const tabTipClasses = cx(`${prefix}--popover--tab-tip__button`, className);
@@ -334,7 +336,7 @@ Popover.propTypes = {
    */
   open: PropTypes.bool.isRequired
 };
-function PopoverContentRenderFunction( // eslint-disable-next-line react/prop-types
+function PopoverContentRenderFunction(// eslint-disable-next-line react/prop-types
 _ref2, forwardRef) {
   let {
     className,

package/es/components/SkeletonText/SkeletonText.js

@@ -56,7 +56,7 @@ const SkeletonText = _ref => {
   }, [lineCountNumber, paragraph, refs, width, widthNum, widthPercent, widthPx]);
   const lines = [];
   for (let i = 0; i < lineCountNumber; i++) {
-    lines.push( /*#__PURE__*/React__default.createElement("p", _extends({
+    lines.push(/*#__PURE__*/React__default.createElement("p", _extends({
       className: skeletonTextClasses,
       key: i,
       ref: el => refs.current = [...refs.current, el]

package/es/components/Tabs/Tabs.js

@@ -1184,7 +1184,7 @@ function TabPanels(_ref13) {
     }
   });
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, React__default.Children.map(children, (child, index) => {
-    return /*#__PURE__*/React__default.createElement(TabPanelContext.Provider, {
+    return !isElement(child) ? null : /*#__PURE__*/React__default.createElement(TabPanelContext.Provider, {
       value: index
     }, /*#__PURE__*/React__default.cloneElement(child, {
       ref: element => {

package/es/components/TreeView/TreeNode.js

@@ -63,7 +63,7 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
     }
   };
   const nodesWithProps = React__default.Children.map(children, node => {
-    if ( /*#__PURE__*/React__default.isValidElement(node)) {
+    if (/*#__PURE__*/React__default.isValidElement(node)) {
       return /*#__PURE__*/React__default.cloneElement(node, {
         active,
         depth: depth + 1,

package/es/components/TreeView/TreeView.js

@@ -121,7 +121,7 @@ const TreeView = _ref => {
       sharedNodeProps.tabIndex = 0;
       focusTarget = true;
     }
-    if ( /*#__PURE__*/React__default.isValidElement(node)) {
+    if (/*#__PURE__*/React__default.isValidElement(node)) {
       return /*#__PURE__*/React__default.cloneElement(node, sharedNodeProps);
     }
   });

package/es/components/UIShell/HeaderMenu.js

@@ -124,7 +124,7 @@ class HeaderMenu extends React__default.Component {
      * sequence when they might not want to go through all the items.
      */
     _defineProperty(this, "_renderMenuItem", (item, index) => {
-      if ( /*#__PURE__*/React__default.isValidElement(item)) {
+      if (/*#__PURE__*/React__default.isValidElement(item)) {
         return /*#__PURE__*/React__default.cloneElement(item, {
           ref: this.handleItemRef(index)
         });

package/es/components/UIShell/HeaderPanel.js

@@ -62,7 +62,7 @@ const HeaderPanel = /*#__PURE__*/React__default.forwardRef(function HeaderPanel(
     const focusedElement = document.activeElement;
     setLastClickedElement(focusedElement);
     const childJsxElement = children;
-    if (childJsxElement.type?.displayName === 'Switcher' && !focusedElement?.closest(`.${prefix}--header-panel--expanded`) && !focusedElement?.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
+    if (childJsxElement?.type?.displayName === 'Switcher' && !focusedElement?.closest(`.${prefix}--header-panel--expanded`) && !focusedElement?.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
       setExpandedState(false);
       onHeaderPanelFocus();
     }

package/es/components/UIShell/SideNav.js

@@ -96,7 +96,7 @@ function SideNavRenderFunction(_ref, ref) {
   childrenToRender = React__default.Children.map(children, child => {
     // if we are controlled, check for if we have hovered over or the expanded state, else just use the expanded state (uncontrolled)
     const currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded;
-    if ( /*#__PURE__*/isValidElement(child)) {
+    if (/*#__PURE__*/isValidElement(child)) {
       const childJsxElement = child;
       // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
       return /*#__PURE__*/React__default.cloneElement(childJsxElement, {

package/es/components/UIShell/SideNavItems.js

@@ -20,7 +20,7 @@ const SideNavItems = _ref => {
   const prefix = usePrefix();
   const className = cx([`${prefix}--side-nav__items`], customClassName);
   const childrenWithExpandedState = React__default.Children.map(children, child => {
-    if ( /*#__PURE__*/React__default.isValidElement(child)) {
+    if (/*#__PURE__*/React__default.isValidElement(child)) {
       // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
       const childDisplayName = child.type?.displayName;
       return /*#__PURE__*/React__default.cloneElement(child, {

package/es/components/UIShell/SideNavMenu.js

@@ -148,7 +148,7 @@ function hasActiveDescendant(children) {
 
   // We use React.isValidElement(child) to check if the child is a valid React element before accessing its props
 
-  if ( /*#__PURE__*/React__default.isValidElement(children)) {
+  if (/*#__PURE__*/React__default.isValidElement(children)) {
     const props = children.props;
     if (props.isActive === true || props['aria-current']) {
       return true;

package/es/components/UIShell/Switcher.js

@@ -62,7 +62,7 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
   };
   const childrenWithProps = React__default.Children.toArray(children).map((child, index) => {
     // only setup click handlers if onChange event is passed
-    if ( /*#__PURE__*/React__default.isValidElement(child) && child.type && getDisplayName(child.type) === 'Switcher') {
+    if (/*#__PURE__*/React__default.isValidElement(child) && child.type && getDisplayName(child.type) === 'Switcher') {
       return /*#__PURE__*/React__default.cloneElement(child, {
         handleSwitcherItemFocus,
         index,

package/es/feature-flags.js

@@ -13,5 +13,6 @@ FeatureFlags.merge({
   'enable-v11-release': true,
   'enable-experimental-tile-contrast': false,
   'enable-v12-tile-radio-icons': false,
-  'enable-v12-structured-list-visible-icons': false
+  'enable-v12-structured-list-visible-icons': false,
+  'enable-v12-dynamic-floating-styles': false
 });

package/es/index.js

@@ -29,6 +29,7 @@ export { ModalHeader } from './components/ComposedModal/ModalHeader.js';
 export { ModalFooter } from './components/ComposedModal/ModalFooter.js';
 import './components/ContainedList/index.js';
 export { default as ContentSwitcher } from './components/ContentSwitcher/index.js';
+export { default as useContextMenu } from './components/ContextMenu/useContextMenu.js';
 export { default as Copy } from './components/Copy/Copy.js';
 export { default as CopyButton } from './components/CopyButton/CopyButton.js';
 export { default as DangerButton } from './components/DangerButton/DangerButton.js';
@@ -165,6 +166,8 @@ export { default as unstable__FluidComboBoxSkeleton } from './components/FluidCo
 export { default as unstable__FluidDatePicker } from './components/FluidDatePicker/FluidDatePicker.js';
 export { default as unstable__FluidDatePickerSkeleton } from './components/FluidDatePicker/FluidDatePicker.Skeleton.js';
 export { default as unstable__FluidDatePickerInput } from './components/FluidDatePickerInput/FluidDatePickerInput.js';
+export { default as unstable__FluidDropdown } from './components/FluidDropdown/FluidDropdown.js';
+export { default as unstable__FluidDropdownSkeleton } from './components/FluidDropdown/FluidDropdown.Skeleton.js';
 export { default as unstable__FluidMultiSelect } from './components/FluidMultiSelect/FluidMultiSelect.js';
 export { default as unstable__FluidMultiSelectSkeleton } from './components/FluidMultiSelect/FluidMultiSelect.Skeleton.js';
 export { default as unstable__FluidSelect } from './components/FluidSelect/FluidSelect.js';
@@ -202,12 +205,9 @@ export { default as unstable_PageSelector } from './components/Pagination/experi
 export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
 export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
 export { default as ContainedList } from './components/ContainedList/ContainedList.js';
-export { default as useContextMenu } from './components/ContextMenu/useContextMenu.js';
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { default as TextInput } from './components/TextInput/TextInput.js';
-export { default as unstable__FluidDropdown } from './components/FluidDropdown/FluidDropdown.js';
-export { default as unstable__FluidDropdownSkeleton } from './components/FluidDropdown/FluidDropdown.Skeleton.js';
 export { LayoutDirection as unstable_LayoutDirection } from './components/LayoutDirection/LayoutDirection.js';
 export { useLayoutDirection as unstable_useLayoutDirection } from './components/LayoutDirection/useLayoutDirection.js';
 export { Text as unstable_Text } from './components/Text/Text.js';

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -58,7 +58,7 @@ const CheckboxGroup = _ref => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if ( /*#__PURE__*/React__default["default"].isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
+  if (/*#__PURE__*/React__default["default"].isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini',
       kind: 'default'

package/lib/components/ComboBox/ComboBox.js

@@ -16,6 +16,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 require('../Text/index.js');
 var iconsReact = require('@carbon/icons-react');
+var isEqual = require('react-fast-compare');
 var index$1 = require('../ListBox/index.js');
 var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
 var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
@@ -38,6 +39,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 
 const {
   InputBlur,
@@ -235,11 +237,15 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         selectedItem: selectedItemProp,
         prevSelectedItem: prevSelectedItemProp.current
       });
-      setInputValue(currentInputValue);
-      onChange({
-        selectedItem: selectedItemProp,
-        inputValue: currentInputValue
-      });
+
+      // selectedItem has been updated externally, need to update state and call onChange
+      if (inputValue !== currentInputValue) {
+        setInputValue(currentInputValue);
+        onChange({
+          selectedItem: selectedItemProp,
+          inputValue: currentInputValue
+        });
+      }
       prevSelectedItemProp.current = selectedItemProp;
     }
   }, [selectedItemProp]);
@@ -453,9 +459,12 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       let {
         selectedItem
       } = _ref5;
-      onChange({
-        selectedItem
-      });
+      // only call onChange if new selection is updated from previous
+      if (!isEqual__default["default"](selectedItem, selectedItemProp)) {
+        onChange({
+          selectedItem
+        });
+      }
     },
     onHighlightedIndexChange: _ref6 => {
       let {

package/lib/components/ComposedModal/ComposedModal.js

@@ -221,7 +221,8 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
           const el = child;
           return /*#__PURE__*/React__default["default"].cloneElement(el, {
             closeModal,
-            inputref: button
+            inputref: button,
+            danger
           });
         }
       default:
@@ -238,7 +239,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   React.useEffect(() => {
     const initialFocus = focusContainerElement => {
       const containerElement = focusContainerElement || innerModal.current;
-      const primaryFocusElement = containerElement ? containerElement.querySelector(selectorPrimaryFocus) : null;
+      const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
       if (primaryFocusElement) {
         return primaryFocusElement;
       }
@@ -246,8 +247,11 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     };
     const focusButton = focusContainerElement => {
       const target = initialFocus(focusContainerElement);
+      const closeButton = focusContainerElement.querySelector(`.${prefix}--modal-close`);
       if (target) {
         target.focus();
+      } else if (!target && closeButton) {
+        closeButton?.focus();
       }
     };
     if (open && isOpen) {

package/lib/components/ContextMenu/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import useContextMenu from './useContextMenu';
+export { useContextMenu };

package/lib/components/ContextMenu/useContextMenu.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+type TriggerType = Element | Document | Window | React.RefObject<Element>;
+interface ContextMenuProps {
+    open: boolean;
+    x: number;
+    y: number;
+    onClose: () => void;
+    mode: string;
+}
+/**
+ * @param {TriggerType} [trigger=document] The element or ref which should trigger the Menu on right-click
+ * @returns {ContextMenuProps} Props object to pass onto Menu component
+ */
+declare function useContextMenu(trigger?: TriggerType): ContextMenuProps;
+export default useContextMenu;

package/lib/components/ContextMenu/useContextMenu.js

@@ -12,8 +12,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 
 /**
- * @param {Element|Document|Window|object} [trigger=document] The element or ref which should trigger the Menu on right-click
- * @returns {object} Props object to pass onto Menu component
+ * @param {TriggerType} [trigger=document] The element or ref which should trigger the Menu on right-click
+ * @returns {ContextMenuProps} Props object to pass onto Menu component
  */
 function useContextMenu() {
   let trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
@@ -22,8 +22,8 @@ function useContextMenu() {
   function openContextMenu(e) {
     e.preventDefault();
     const {
-      x,
-      y
+      clientX: x,
+      clientY: y
     } = e;
     setPosition([x, y]);
     setOpen(true);
@@ -32,11 +32,12 @@ function useContextMenu() {
     setOpen(false);
   }
   React.useEffect(() => {
-    const el = trigger?.current ?? trigger;
-    if (el && el instanceof Element || el instanceof Document || el instanceof Window) {
-      el.addEventListener('contextmenu', openContextMenu);
+    const el = trigger instanceof Element || trigger instanceof Document || trigger instanceof Window ? trigger : trigger.current;
+    if (el) {
+      const eventListener = e => openContextMenu(e);
+      el.addEventListener('contextmenu', eventListener);
       return () => {
-        el.removeEventListener('contextmenu', openContextMenu);
+        el.removeEventListener('contextmenu', eventListener);
       };
     }
   }, [trigger]);

package/lib/components/DataTable/DataTable.d.ts

@@ -6,6 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
+import type { MouseEvent } from 'react';
 import type { DataTableSortState } from './state/sortStates';
 import Table from './Table';
 import TableActionList from './TableActionList';
@@ -131,13 +132,13 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     }) => {
         ariaLabel: string;
         'aria-label': string;
-        checked?: boolean;
+        checked?: boolean | undefined;
         disabled?: boolean | undefined;
         id: string;
         indeterminate?: boolean;
         name: string;
         onSelect: (e: React.MouseEvent<HTMLInputElement>) => void;
-        radio?: boolean;
+        radio?: boolean | undefined;
         [key: string]: unknown;
     };
     getToolbarProps: (getToolbarPropsArgs?: {

package/lib/components/DataTable/Table.d.ts

@@ -33,9 +33,13 @@ interface TableProps {
      * `true` to add useZebraStyles striping.
      */
     useZebraStyles?: boolean;
+    /**
+     * Specify the table tabIndex
+     */
+    tabIndex?: number;
 }
 export declare const Table: {
-    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Pass in the children that will be rendered within the Table
@@ -70,6 +74,10 @@ export declare const Table: {
          * `true` to add useZebraStyles striping.
          */
         useZebraStyles: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the table tabIndex
+         */
+        tabIndex: PropTypes.Requireable<number>;
     };
 };
 export default Table;

package/lib/components/DataTable/Table.js

@@ -65,6 +65,7 @@ const Table = _ref => {
     stickyHeader,
     overflowMenuOnHover = true,
     experimentalAutoAlign = false,
+    tabIndex,
     ...other
   } = _ref;
   const {
@@ -140,7 +141,7 @@ const Table = _ref => {
     className: `${prefix}--data-table-content`
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     ,
-    tabIndex: isScrollable ? 0 : undefined
+    tabIndex: tabIndex ?? (isScrollable ? 0 : undefined)
   }, /*#__PURE__*/React__default["default"].createElement("table", _rollupPluginBabelHelpers["extends"]({
     "aria-labelledby": titleId,
     "aria-describedby": descriptionId
@@ -185,7 +186,11 @@ Table.propTypes = {
   /**
    * `true` to add useZebraStyles striping.
    */
-  useZebraStyles: PropTypes__default["default"].bool
+  useZebraStyles: PropTypes__default["default"].bool,
+  /**
+   * Specify the table tabIndex
+   */
+  tabIndex: PropTypes__default["default"].number
 };
 
 exports.Table = Table;

package/lib/components/DatePicker/DatePicker.js

@@ -542,9 +542,6 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     const closeCalendar = event => {
       calendarRef.current.close();
       // Remove focus from endDate calendar input
-      if (document.activeElement instanceof HTMLElement) {
-        document.activeElement.blur();
-      }
       onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, {
         type: 'clickOutside'
       });
@@ -570,12 +567,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     if (!calendarRef.current || !startInputField.current) return;
     const handleKeyDown = event => {
       if (match.match(event, keys.Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current.isOpen) {
-        event.preventDefault();
         calendarRef.current.close();
-        // Remove focus from endDate calendar input
-        document.activeElement instanceof HTMLElement &&
-        // this is to fix the TS warning
-        document?.activeElement?.blur();
         onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, event);
       }
     };

package/lib/components/DatePicker/plugins/appendToPlugin.js

@@ -13,7 +13,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * @param {object} config Plugin configuration.
  * @returns {Plugin} A Flatpickr plugin to put adjust the position of calendar dropdown.
  */
-var carbonFlatpickrAppendToPlugin = (config => fp => {
+var carbonFlatpickrAppendToPlugin = config => fp => {
   /**
    * Adjusts the floating menu position after Flatpicker sets it.
    */
@@ -55,6 +55,6 @@ var carbonFlatpickrAppendToPlugin = (config => fp => {
     onReady: register,
     onPreCalendarPosition: handlePreCalendarPosition
   };
-});
+};
 
 exports["default"] = carbonFlatpickrAppendToPlugin;

package/lib/components/DatePicker/plugins/fixEventsPlugin.js

@@ -16,7 +16,7 @@ var keys = require('../../../internal/keyboard/keys.js');
  * @param {object} config Plugin configuration.
  * @returns {Plugin} A Flatpickr plugin to fix Flatpickr's behavior of certain events.
  */
-var carbonFlatpickrFixEventsPlugin = (config => fp => {
+var carbonFlatpickrFixEventsPlugin = config => fp => {
   const {
     inputFrom,
     inputTo,
@@ -154,6 +154,6 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
     onReady: [register, init],
     onDestroy: [release]
   };
-});
+};
 
 exports["default"] = carbonFlatpickrFixEventsPlugin;

package/lib/components/DatePicker/plugins/rangePlugin.js

@@ -22,7 +22,7 @@ var rangePlugin__default = /*#__PURE__*/_interopDefaultLegacy(rangePlugin);
  *     Workaround for: https://github.com/flatpickr/flatpickr/issues/1944
  *   * A logic to ensure `fp.setDate()` call won't end up with "startDate to endDate" set to the first `<input>`
  */
-var carbonFlatpickrRangePlugin = (config => {
+var carbonFlatpickrRangePlugin = config => {
   const factory = rangePlugin__default["default"](Object.assign({
     position: 'left'
   }, config));
@@ -57,6 +57,6 @@ var carbonFlatpickrRangePlugin = (config => {
       onPreCalendarPosition() {}
     });
   };
-});
+};
 
 exports["default"] = carbonFlatpickrRangePlugin;