@carbon/react 1.54.0 → 1.55.0

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -36,7 +36,7 @@ const rowHeightInPixels = 16;
 const defaultMaxCollapsedNumberOfRows = 15;
 const defaultMaxExpandedNumberOfRows = 0;
 const defaultMinCollapsedNumberOfRows = 3;
-const defaultMinExpandedNumberOfRows = 0;
+const defaultMinExpandedNumberOfRows = 16;
 function CodeSnippet(_ref) {
   let {
     align = 'bottom',
@@ -67,9 +67,9 @@ function CodeSnippet(_ref) {
   const {
     current: uid
   } = React.useRef(uniqueId["default"]());
-  const codeContentRef = React.useRef();
-  const codeContainerRef = React.useRef();
-  const innerCodeRef = React.useRef();
+  const codeContentRef = React.useRef(null);
+  const codeContainerRef = React.useRef(null);
+  const innerCodeRef = React.useRef(null);
   const [hasLeftOverflow, setHasLeftOverflow] = React.useState(false);
   const [hasRightOverflow, setHasRightOverflow] = React.useState(false);
   const getCodeRef = React.useCallback(() => {
@@ -78,15 +78,17 @@ function CodeSnippet(_ref) {
     }
     if (type === 'multi') {
       return codeContentRef;
+    } else {
+      return innerCodeRef;
     }
   }, [type]);
   const prefix = usePrefix.usePrefix();
   const getCodeRefDimensions = React.useCallback(() => {
     const {
-      clientWidth: codeClientWidth,
-      scrollLeft: codeScrollLeft,
-      scrollWidth: codeScrollWidth
-    } = getCodeRef().current;
+      clientWidth: codeClientWidth = 0,
+      scrollLeft: codeScrollLeft = 0,
+      scrollWidth: codeScrollWidth = 0
+    } = getCodeRef().current || {};
     return {
       horizontalOverflow: codeScrollWidth > codeClientWidth,
       codeClientWidth,
@@ -113,7 +115,7 @@ function CodeSnippet(_ref) {
       if (codeContentRef?.current && type === 'multi') {
         const {
           height
-        } = innerCodeRef.current.getBoundingClientRect();
+        } = codeContentRef.current.getBoundingClientRect();
         if (maxCollapsedNumberOfRows > 0 && (maxExpandedNumberOfRows <= 0 || maxExpandedNumberOfRows > maxCollapsedNumberOfRows) && height > maxCollapsedNumberOfRows * rowHeightInPixels) {
           setShouldShowMoreLessBtn(true);
         } else {
@@ -127,13 +129,13 @@ function CodeSnippet(_ref) {
         handleScroll();
       }
     }
-  }, [type, maxCollapsedNumberOfRows, maxExpandedNumberOfRows, minExpandedNumberOfRows, rowHeightInPixels]);
+  });
   React.useEffect(() => {
     handleScroll();
   }, [handleScroll]);
   const handleCopyClick = evt => {
     if (copyText || innerCodeRef?.current) {
-      copy__default["default"](copyText ?? innerCodeRef?.current?.innerText);
+      copy__default["default"](copyText ?? innerCodeRef?.current?.innerText ?? '');
     }
     if (onClick) {
       onClick(evt);
@@ -167,12 +169,11 @@ function CodeSnippet(_ref) {
       feedback: feedback,
       feedbackTimeout: feedbackTimeout
     }), /*#__PURE__*/React__default["default"].createElement("code", {
-      "aria-live": "assertive",
       id: uid,
       ref: innerCodeRef
     }, children));
   }
-  let containerStyle = {};
+  const containerStyle = {};
   if (type === 'multi') {
     const styles = {};
     if (expandedCode) {
@@ -198,16 +199,16 @@ function CodeSnippet(_ref) {
     className: codeSnippetClasses
   }), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     ref: codeContainerRef,
-    role: type === 'single' || type === 'multi' ? 'textbox' : null,
-    tabIndex: (type === 'single' || type === 'multi') && !disabled ? 0 : null,
+    role: type === 'single' || type === 'multi' ? 'textbox' : undefined,
+    tabIndex: (type === 'single' || type === 'multi') && !disabled ? 0 : undefined,
     className: `${prefix}--snippet-container`,
     "aria-label": deprecatedAriaLabel || ariaLabel || 'code-snippet',
-    "aria-readonly": type === 'single' || type === 'multi' ? true : null,
-    "aria-multiline": type === 'multi' ? true : null,
-    onScroll: type === 'single' && handleScroll || null
+    "aria-readonly": type === 'single' || type === 'multi' ? true : undefined,
+    "aria-multiline": type === 'multi' ? true : undefined,
+    onScroll: type === 'single' && handleScroll || undefined
   }, containerStyle), /*#__PURE__*/React__default["default"].createElement("pre", {
     ref: codeContentRef,
-    onScroll: type === 'multi' && handleScroll || null
+    onScroll: type === 'multi' && handleScroll || undefined
   }, /*#__PURE__*/React__default["default"].createElement("code", {
     ref: innerCodeRef
   }, children))), hasLeftOverflow && /*#__PURE__*/React__default["default"].createElement("div", {

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

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 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 CodeSnippet from './CodeSnippet';
+export default CodeSnippet;
+export { CodeSnippet };
+export { default as CodeSnippetSkeleton } from './CodeSnippet.Skeleton';

package/lib/components/ComboBox/ComboBox.d.ts

@@ -6,7 +6,7 @@
  */
 import Downshift from 'downshift';
 import { ReactNodeLike } from 'prop-types';
-import { type ComponentProps, type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithoutRef, type InputHTMLAttributes, type MouseEvent } from 'react';
+import { type ComponentProps, type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithRef, type InputHTMLAttributes, type MouseEvent } from 'react';
 import { ListBoxSize } from '../ListBox';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
 interface OnChangeData<ItemType> {
@@ -159,7 +159,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     warnText?: ReactNode;
 }
-type ComboboxComponentProps<ItemType> = PropsWithoutRef<PropsWithChildren<ComboBoxProps<ItemType>> & RefAttributes<HTMLInputElement>>;
+type ComboboxComponentProps<ItemType> = PropsWithRef<PropsWithChildren<ComboBoxProps<ItemType>> & RefAttributes<HTMLInputElement>>;
 interface ComboBoxComponent {
     <ItemType>(props: ComboboxComponentProps<ItemType>): ReactElement | null;
 }

package/lib/components/ComboBox/ComboBox.js

@@ -42,9 +42,11 @@ const {
   keyDownArrowUp,
   keyDownEscape,
   clickButton,
+  clickItem,
   blurButton,
   changeInput,
-  blurInput
+  blurInput,
+  unknown
 } = Downshift__default["default"].stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -206,15 +208,16 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     switch (type) {
       case keyDownArrowDown:
       case keyDownArrowUp:
-        setHighlightedIndex(changes.highlightedIndex);
+        if (changes.isOpen) {
+          updateHighlightedIndex(getHighlightedIndex(changes));
+        } else {
+          setHighlightedIndex(changes.highlightedIndex);
+        }
         break;
       case blurButton:
       case keyDownEscape:
         setHighlightedIndex(changes.highlightedIndex);
         break;
-      case clickButton:
-        setHighlightedIndex(changes.highlightedIndex);
-        break;
       case changeInput:
         updateHighlightedIndex(getHighlightedIndex(changes));
         break;
@@ -229,6 +232,11 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
           }
         }
         break;
+      case clickButton:
+      case clickItem:
+      case unknown:
+        setHighlightedIndex(getHighlightedIndex(changes));
+        break;
     }
   };
   const handleToggleClick = isOpen => event => {

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

@@ -0,0 +1,51 @@
+/**
+ * Copyright IBM Corp. 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 React from 'react';
+import { IconButton } from '../IconButton';
+import Button from '../Button';
+import { Menu } from '../Menu';
+interface ComboButtonProps {
+    /**
+     * A collection of `MenuItems` to be rendered as additional actions for this `ComboButton`.
+     */
+    children: React.ComponentProps<typeof Menu>['children'];
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify whether the `ComboButton` should be disabled, or not.
+     */
+    disabled?: boolean;
+    /**
+     * Provide the label to be rendered on the primary action button.
+     */
+    label: React.ComponentProps<typeof Button>['title'];
+    /**
+     * Experimental property. Specify how the menu should align with the button element
+     */
+    menuAlignment?: React.ComponentProps<typeof Menu>['menuAlignment'];
+    /**
+     * Provide an optional function to be called when the primary action element is clicked.
+     */
+    onClick?: React.ComponentProps<typeof Button>['onClick'];
+    /**
+     * Specify the size of the buttons and menu.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify how the trigger tooltip should be aligned.
+     */
+    tooltipAlignment?: React.ComponentProps<typeof IconButton>['align'];
+    /**
+     * Optional method that takes in a message `id` and returns an
+     * internationalized string.
+     */
+    translateWithId?: (id: string) => string;
+}
+declare const ComboButton: React.ForwardRefExoticComponent<ComboButtonProps & React.RefAttributes<HTMLDivElement>>;
+export { ComboButton, type ComboButtonProps };

package/lib/components/ComboButton/index.js

@@ -80,10 +80,12 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     }
   }
   function handleOpen() {
-    menuRef.current.style.inlineSize = `${width}px`;
-    menuRef.current.style.minInlineSize = `${width}px`;
-    if (menuAlignment !== 'bottom' && menuAlignment !== 'top') {
-      menuRef.current.style.inlineSize = `fit-content`;
+    if (menuRef.current) {
+      menuRef.current.style.inlineSize = `${width}px`;
+      menuRef.current.style.minInlineSize = `${width}px`;
+      if (menuAlignment !== 'bottom' && menuAlignment !== 'top') {
+        menuRef.current.style.inlineSize = `fit-content`;
+      }
     }
   }
   const containerClasses = cx__default["default"](`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size}`, {
@@ -95,7 +97,7 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: containerClasses,
     ref: ref,
-    "aria-owns": open ? id : null
+    "aria-owns": open ? id : undefined
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: primaryActionClasses
   }, /*#__PURE__*/React__default["default"].createElement(Button["default"], {
@@ -113,7 +115,7 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     "aria-expanded": open,
     onClick: handleTriggerClick,
     onMouseDown: handleTriggerMousedown,
-    "aria-controls": open ? id : null
+    "aria-controls": open ? id : undefined
   }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, null))), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
     containerRef: containerRef,
     menuAlignment: menuAlignment,
@@ -144,7 +146,7 @@ ComboButton.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
   /**
-   * Provide the label to be renderd on the primary action button.
+   * Provide the label to be rendered on the primary action button.
    */
   label: PropTypes__default["default"].string.isRequired,
   /**

package/lib/components/ComposedModal/ComposedModal.d.ts

@@ -68,7 +68,7 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
      */
     selectorPrimaryFocus?: string;
     /** Specify the CSS selectors that match the floating menus. */
-    selectorsFloatingMenus?: Array<string | null | undefined>;
+    selectorsFloatingMenus?: string[];
     size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `ComposedModal` component

package/lib/components/ComposedModal/ComposedModal.js

@@ -159,9 +159,9 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     onKeyDown?.(event);
   }
   function handleMousedown(evt) {
+    const target = evt.target;
     evt.stopPropagation();
-    const isInside = innerModal.current?.contains(evt.target);
-    if (!isInside && !preventCloseOnClickOutside) {
+    if (!preventCloseOnClickOutside && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
       closeModal(evt);
     }
   }
@@ -253,11 +253,11 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     }
   }, [open, selectorPrimaryFocus, isOpen]);
 
-  // Slug is always size `lg`
+  // Slug is always size `sm`
   let normalizedSlug;
   if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
-      size: 'lg'
+      size: 'sm'
     });
   }
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
@@ -347,7 +347,7 @@ ComposedModal.propTypes = {
   /**
    * Specify the CSS selectors that match the floating menus
    */
-  selectorsFloatingMenus: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+  selectorsFloatingMenus: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string.isRequired),
   /**
    * Specify the size variant.
    */

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

@@ -22,11 +22,7 @@ export interface TableBatchActionProps extends React.ButtonHTMLAttributes<HTMLBu
     renderIcon?: React.ElementType;
 }
 declare const TableBatchAction: {
-    ({ renderIcon, iconDescription, ...props }: {
-        [x: string]: any;
-        renderIcon?: import("@carbon/icons-react").CarbonIconType | undefined;
-        iconDescription?: string | undefined;
-    }): import("react/jsx-runtime").JSX.Element;
+    ({ renderIcon, iconDescription, ...props }: TableBatchActionProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify if the button is an icon-only button

package/lib/components/Dropdown/Dropdown.js

@@ -36,7 +36,8 @@ const {
   ToggleButtonKeyDownArrowUp,
   ToggleButtonKeyDownHome,
   ToggleButtonKeyDownEnd,
-  ItemMouseMove
+  ItemMouseMove,
+  MenuMouseLeave
 } = Downshift.useSelect.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -121,6 +122,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
         }
         return changes;
       case ItemMouseMove:
+      case MenuMouseLeave:
         return {
           ...changes,
           highlightedIndex: state.highlightedIndex

package/lib/components/Modal/Modal.js

@@ -119,7 +119,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   function handleMousedown(evt) {
     const target = evt.target;
     evt.stopPropagation();
-    if (innerModal.current && !innerModal.current.contains(target) && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
+    if (!preventCloseOnClickOutside && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
       onRequestClose(evt);
     }
   }
@@ -237,11 +237,11 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     };
   }, []);
 
-  // Slug is always size `lg`
+  // Slug is always size `sm`
   let normalizedSlug;
   if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
-      size: 'lg'
+      size: 'sm'
     });
   }
   const modalButton = /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -149,6 +149,9 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     if (onMenuChange) {
       onMenuChange(nextIsOpen);
     }
+    if (!isOpen) {
+      setHighlightedIndex(0);
+    }
   }
   function handleOnOuterClick() {
     handleOnMenuChange(false);
@@ -172,6 +175,34 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
         break;
       case stateChangeTypes.keyDownEscape:
         handleOnMenuChange(false);
+        setHighlightedIndex(0);
+        break;
+      case stateChangeTypes.changeInput:
+        setHighlightedIndex(0);
+        break;
+      case stateChangeTypes.keyDownEnter:
+        if (!isOpen) {
+          setHighlightedIndex(0);
+        }
+        break;
+      case stateChangeTypes.clickItem:
+        if (isOpen) {
+          const sortedItems = sortItems(filterItems(items, {
+            itemToString: itemToString$1,
+            inputValue
+          }), {
+            selectedItems: {
+              top: changes.selectedItems,
+              fixed: [],
+              'top-after-reopen': topItems
+            }[selectionFeedback],
+            itemToString: itemToString$1,
+            compareItems,
+            locale
+          });
+          const sortedSelectedIndex = sortedItems.indexOf(changes.selectedItem);
+          setHighlightedIndex(sortedSelectedIndex);
+        }
         break;
     }
   }

package/lib/components/MultiSelect/MultiSelect.js

@@ -48,9 +48,11 @@ const {
   ToggleButtonKeyDownEscape,
   ToggleButtonKeyDownSpaceButton,
   ItemMouseMove,
+  MenuMouseLeave,
   ToggleButtonClick,
-  ToggleButtonKeyDownHome,
-  ToggleButtonKeyDownEnd
+  ToggleButtonKeyDownPageDown,
+  ToggleButtonKeyDownPageUp,
+  FunctionSetHighlightedIndex
 } = Downshift.useSelect.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -146,7 +148,8 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     getMenuProps,
     getItemProps,
     selectedItem,
-    highlightedIndex
+    highlightedIndex,
+    setHighlightedIndex
   } = Downshift.useSelect(selectProps);
   const toggleButtonProps = getToggleButtonProps({
     onFocus: () => {
@@ -165,6 +168,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
           setItemsCleared(true);
         }
         if ((match.match(e, keys.Space) || match.match(e, keys.ArrowDown) || match.match(e, keys.Enter)) && !isOpen) {
+          setHighlightedIndex(0);
           setItemsCleared(false);
           setIsOpenWrapper(true);
         }
@@ -248,7 +252,6 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
       setTopItems(controlledSelectedItems);
     }
     switch (type) {
-      case ItemClick:
       case ToggleButtonKeyDownSpaceButton:
       case ToggleButtonKeyDownEnter:
         if (changes.selectedItem === undefined) {
@@ -268,11 +271,38 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
         break;
       case ToggleButtonClick:
         setIsOpenWrapper(changes.isOpen || false);
-        break;
+        return {
+          ...changes,
+          highlightedIndex: 0
+        };
+      case ItemClick:
+        setHighlightedIndex(changes.selectedItem);
+        onItemChange(changes.selectedItem);
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
+      case MenuMouseLeave:
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
+      case FunctionSetHighlightedIndex:
+        if (!isOpen) {
+          return {
+            ...changes,
+            highlightedIndex: 0
+          };
+        } else {
+          return {
+            ...changes,
+            highlightedIndex: props.items.indexOf(highlightedIndex)
+          };
+        }
       case ToggleButtonKeyDownArrowDown:
       case ToggleButtonKeyDownArrowUp:
-      case ToggleButtonKeyDownHome:
-      case ToggleButtonKeyDownEnd:
+      case ToggleButtonKeyDownPageDown:
+      case ToggleButtonKeyDownPageUp:
         if (highlightedIndex > -1) {
           const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
           props.scrollIntoView(itemArray[highlightedIndex]);

package/lib/components/Slug/index.js

@@ -148,26 +148,21 @@ Slug.propTypes = {
    */
   align: PropTypes__default["default"].oneOf(['top', 'top-left',
   // deprecated use top-start instead
-  'top-right',
+  'top-start', 'top-right',
   // deprecated use top-end instead
-
-  'bottom', 'bottom-left',
+  'top-end', 'bottom', 'bottom-left',
   // deprecated use bottom-start instead
-  'bottom-right',
+  'bottom-start', 'bottom-right',
   // deprecated use bottom-end instead
-
-  'left', 'left-bottom',
+  'bottom-end', 'left', 'left-bottom',
   // deprecated use left-end instead
-  'left-top',
+  'left-end', 'left-top',
   // deprecated use left-start instead
-
-  'right', 'right-bottom',
+  'left-start', 'right', 'right-bottom',
   // deprecated use right-end instead
-  'right-top',
+  'right-end', 'right-top',
   // deprecated use right-start instead
-
-  // new values to match floating-ui
-  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  'right-start']),
   /**
    * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
    */

package/lib/components/Tabs/Tabs.js

@@ -210,7 +210,8 @@ function TabList(_ref2) {
     // TODO: V12 - Remove this class
     [`${prefix}--layout--size-lg`]: iconSize === 'lg',
     [`${prefix}--tabs--tall`]: hasSecondaryLabelTabs,
-    [`${prefix}--tabs--full-width`]: distributeWidth
+    [`${prefix}--tabs--full-width`]: distributeWidth,
+    [`${prefix}--tabs--dismissable`]: dismissable
   }, customClassName);
 
   // Previous Button
@@ -552,6 +553,25 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref5, forwardRef) {
   const handleClose = evt => {
     evt.stopPropagation();
     onTabCloseRequest?.(index);
+
+    // set focus after removing tab
+    if (tabRef.current && tabRef.current.parentElement) {
+      // determine number of tabs, excluding disabled
+      const tabCount = Array.from(tabRef.current.parentElement.childNodes).filter(node => {
+        const element = node;
+        return element.classList.contains('cds--tabs__nav-link') && !element.classList.contains('cds--tabs__nav-item--disabled');
+      }).length;
+
+      // if not removing last tab focus on next tab
+      if (tabRef.current && index + 1 !== tabCount) {
+        tabRef.current.focus();
+      }
+      // if removing last tab focus on previous tab
+      else {
+        const prevTabIndex = (tabCount - 2) * 2;
+        tabRef.current.parentElement.childNodes[prevTabIndex]?.focus();
+      }
+    }
   };
   const handleKeyDown = event => {
     if (dismissable && match.match(event, keys.Delete)) {
@@ -560,20 +580,31 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref5, forwardRef) {
     onKeyDown?.(event);
   };
   const DismissIcon = /*#__PURE__*/React__default["default"].createElement("div", {
-    tabIndex: -1,
-    "aria-hidden": true,
-    className: cx__default["default"](`${prefix}--tabs__nav-item--close-icon`, {
-      [`${prefix}--visually-hidden`]: !dismissable
+    className: cx__default["default"]({
+      [`${prefix}--tabs__nav-item--close`]: dismissable,
+      [`${prefix}--tabs__nav-item--close--hidden`]: !dismissable
+    })
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    tabIndex: selectedIndex === index && dismissable ? 0 : -1,
+    "aria-disabled": disabled,
+    "aria-hidden": selectedIndex === index && dismissable ? 'false' : 'true',
+    disabled: disabled,
+    className: cx__default["default"]({
+      [`${prefix}--tabs__nav-item--close-icon`]: dismissable,
+      [`${prefix}--visually-hidden`]: !dismissable,
+      [`${prefix}--tabs__nav-item--close-icon--selected`]: selectedIndex === index,
+      [`${prefix}--tabs__nav-item--close-icon--disabled`]: disabled
     }),
     onClick: handleClose,
-    title: "Close tab",
+    title: `Remove ${typeof children === 'string' ? children : ''} tab`,
     ref: dismissIconRef
   }, /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
-    "aria-hidden": dismissable ? 'false' : 'true',
-    "aria-label": "Press delete to close tab"
-  }));
+    "aria-hidden": selectedIndex === index && dismissable ? 'false' : 'true',
+    "aria-label": `Press delete to remove ${typeof children === 'string' ? children : ''} tab`
+  })));
   const hasIcon = Icon ?? dismissable;
-  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-controls": panelId,
     "aria-disabled": disabled,
     "aria-selected": selectedIndex === index,
@@ -600,17 +631,17 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref5, forwardRef) {
     size: 16
   })), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     className: `${prefix}--tabs__nav-item-label`
-  }, children), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, children), !dismissable && Icon && /*#__PURE__*/React__default["default"].createElement("div", {
     className: cx__default["default"](`${prefix}--tabs__nav-item--icon`, {
       [`${prefix}--visually-hidden`]: !hasIcon
     })
-  }, DismissIcon, !dismissable && Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }, !dismissable && Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
     size: 16
   }))), hasSecondaryLabel && secondaryLabel && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "div",
     className: `${prefix}--tabs__nav-item-secondary-label`,
     title: secondaryLabel
-  }, secondaryLabel));
+  }, secondaryLabel)), DismissIcon);
 });
 Tab.propTypes = {
   /**