@carbon/react 1.36.0 → 1.37.0-rc.0

package/es/components/ComboBox/ComboBox.js

@@ -208,7 +208,7 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     }
     if (event.target === textInput.current && isOpen) {
       event.preventDownshiftDefault = true;
-      event.persist();
+      event?.persist?.();
     }
   };
   const showWarning = !invalid && warn;
@@ -289,8 +289,6 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       }
     });
     const inputProps = getInputProps({
-      // Remove excess aria `aria-labelledby`. HTML <label for> provides this aria information.
-      'aria-labelledby': null,
       disabled,
       placeholder,
       onClick() {
@@ -307,7 +305,7 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
           if (event.target === textInput.current && isOpen) {
             toggleMenu();
             event.preventDownshiftDefault = true;
-            event.persist();
+            event?.persist?.();
           }
         }
         if (match(event, Home)) {

package/es/components/DataTable/DataTable.d.ts

@@ -99,6 +99,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         [key: string]: unknown;
     }) => {
         ariaLabel: string;
+        ['aria-label']: string;
         isExpanded: boolean;
         onExpand: (e: MouseEvent) => void;
         [key: string]: unknown;
@@ -109,6 +110,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         [key: string]: unknown;
     }) => {
         ariaLabel: string;
+        ['aria-label']: string;
         disabled: boolean | undefined;
         isExpanded?: boolean;
         isSelected?: boolean;
@@ -116,6 +118,13 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         onExpand: (e: MouseEvent) => void;
         [key: string]: unknown;
     };
+    getExpandedRowProps: (getExpandedRowPropsArgs: {
+        row: DataTableRow<ColTypes>;
+        [key: string]: unknown;
+    }) => {
+        ['id']: string;
+        [key: string]: unknown;
+    };
     getSelectionProps: (getSelectionPropsArgs: {
         onClick?: (e: MouseEvent) => void;
         row: DataTableRow<ColTypes>;
@@ -375,6 +384,8 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         onExpand?: ((e: MouseEvent) => void) | undefined;
     }) => {
         ariaLabel: string;
+        'aria-label': string;
+        'aria-controls': string;
         isExpanded: boolean;
         onExpand: any;
     };
@@ -411,9 +422,24 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         onExpand: any;
         isExpanded: boolean | undefined;
         ariaLabel: string;
+        'aria-label': string;
+        'aria-controls': string;
         isSelected: boolean | undefined;
         disabled: boolean | undefined;
     };
+    /**
+     * Get the props associated with an expanded row
+     *
+     * @param {object} config
+     * @param {object} config.row the parent row we want the props for
+     * @returns {object}
+     */
+    getExpandedRowProps: ({ row, ...rest }: {
+        [key: string]: unknown;
+        row: DataTableRow<ColTypes>;
+    }) => {
+        id: string;
+    };
     /**
      * Gets the props associated with selection for a header or a row, where
      * applicable. Most often used to indicate selection status of the table or

package/es/components/DataTable/DataTable.js

@@ -151,6 +151,10 @@ class DataTable extends React__default.Component {
       return {
         ...rest,
         ariaLabel: t(translationKey),
+        // TODO: remove in v12
+        'aria-label': t(translationKey),
+        // Provide a string of all the expanded row id's, separated by a space.
+        'aria-controls': rowIds.map(id => `expanded-row-${id}`).join(' '),
         isExpanded,
         // Compose the event handlers so we don't overwrite a consumer's `onClick`
         // handler
@@ -205,10 +209,30 @@ class DataTable extends React__default.Component {
         onExpand: composeEventHandlers([this.handleOnExpandRow(row.id), onClick]),
         isExpanded: row.isExpanded,
         ariaLabel: t(translationKey),
+        // TODO remove in v12
+        'aria-label': t(translationKey),
+        'aria-controls': `expanded-row-${row.id}`,
         isSelected: row.isSelected,
         disabled: row.disabled
       };
     });
+    /**
+     * Get the props associated with an expanded row
+     *
+     * @param {object} config
+     * @param {object} config.row the parent row we want the props for
+     * @returns {object}
+     */
+    _defineProperty(this, "getExpandedRowProps", _ref3 => {
+      let {
+        row,
+        ...rest
+      } = _ref3;
+      return {
+        ...rest,
+        id: `expanded-row-${row.id}`
+      };
+    });
     /**
      * Gets the props associated with selection for a header or a row, where
      * applicable. Most often used to indicate selection status of the table or
@@ -586,6 +610,7 @@ class DataTable extends React__default.Component {
       getHeaderProps: this.getHeaderProps,
       getExpandHeaderProps: this.getExpandHeaderProps,
       getRowProps: this.getRowProps,
+      getExpandedRowProps: this.getExpandedRowProps,
       getSelectionProps: this.getSelectionProps,
       getToolbarProps: this.getToolbarProps,
       getBatchActionProps: this.getBatchActionProps,

package/es/components/DataTable/TableExpandHeader.d.ts

@@ -8,11 +8,21 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { ReactAttr } from '../../types/common';
 type TableExpandHeaderPropsBase = {
+    /**
+     * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandHeader
+     */
+    ['aria-controls']: string;
+    /**
+     * @deprecated This prop has been deprecated and will be
+     * removed in the next major release of Carbon. Use the
+     * `aria-label` prop instead.
+     */
+    ariaLabel?: string;
     /**
      * Specify the string read by a voice reader when the expand trigger is
      * focused
      */
-    ariaLabel?: string;
+    ['aria-label']: string;
     /**
      * @deprecated The enableExpando prop is being replaced by `enableToggle`
      */
@@ -35,25 +45,37 @@ type TableExpandHeaderPropsBase = {
      */
     onExpand?(event: React.MouseEvent<HTMLButtonElement>): void;
 } & ReactAttr<HTMLTableCellElement>;
-type TableExpandHeaderPropsWithToggle = Omit<TableExpandHeaderPropsBase, 'ariaLabel' | 'enableToggle' | 'onExpand'> & {
+type TableExpandHeaderPropsWithToggle = Omit<TableExpandHeaderPropsBase, 'ariaLabel' | 'aria-label' | 'enableToggle' | 'onExpand'> & {
     enableToggle: true;
     ariaLabel: string;
+    ['aria-label']: string;
     onExpand(event: React.MouseEvent<HTMLButtonElement>): void;
 };
-type TableExpandHeaderPropsWithExpando = Omit<TableExpandHeaderPropsBase, 'ariaLabel' | 'enableExpando' | 'onExpand'> & {
+type TableExpandHeaderPropsWithExpando = Omit<TableExpandHeaderPropsBase, 'ariaLabel' | 'aria-label' | 'enableExpando' | 'onExpand'> & {
     enableExpando: true;
     ariaLabel: string;
+    ['aria-label']: string;
     onExpand(event: React.MouseEvent<HTMLButtonElement>): void;
 };
 export type TableExpandHeaderProps = TableExpandHeaderPropsWithToggle | TableExpandHeaderPropsWithExpando | TableExpandHeaderPropsBase;
 declare const TableExpandHeader: {
-    ({ ariaLabel, className: headerClassName, enableExpando, enableToggle, id, isExpanded, onExpand, expandIconDescription, children, ...rest }: TableExpandHeaderProps): JSX.Element;
+    ({ ["aria-controls"]: ariaControls, ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, className: headerClassName, enableExpando, enableToggle, id, isExpanded, onExpand, expandIconDescription, children, ...rest }: TableExpandHeaderProps): JSX.Element;
     propTypes: {
         /**
+         * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandHeader
+         */
+        "aria-controls": PropTypes.Requireable<string>;
+        /**
+         * Specify the string read by a voice reader when the expand trigger is
+         * focused
+         */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
          * Specify the string read by a voice reader when the expand trigger is
          * focused
          */
-        ariaLabel: PropTypes.Requireable<any>;
+        ariaLabel: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         /**

package/es/components/DataTable/TableExpandHeader.js

@@ -16,7 +16,9 @@ import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsT
 
 const TableExpandHeader = _ref => {
   let {
-    ariaLabel,
+    ['aria-controls']: ariaControls,
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
     className: headerClassName,
     enableExpando,
     enableToggle,
@@ -40,7 +42,9 @@ const TableExpandHeader = _ref => {
     className: `${prefix}--table-expand__button`,
     onClick: onExpand,
     title: expandIconDescription,
-    "aria-label": ariaLabel
+    "aria-label": deprecatedAriaLabel || ariaLabel,
+    "aria-expanded": isExpanded,
+    "aria-controls": ariaControls
   }, /*#__PURE__*/React__default.createElement(ChevronRight, {
     className: `${prefix}--table-expand__svg`,
     "aria-label": expandIconDescription
@@ -48,10 +52,20 @@ const TableExpandHeader = _ref => {
 };
 TableExpandHeader.propTypes = {
   /**
+   * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandHeader
+   */
+  ['aria-controls']: PropTypes.string,
+  /**
+   * Specify the string read by a voice reader when the expand trigger is
+   * focused
+   */
+  ['aria-label']: PropTypes.string,
+  /**
+   * Deprecated, please use `aria-label` instead.
    * Specify the string read by a voice reader when the expand trigger is
    * focused
    */
-  ariaLabel: PropTypes.oneOfType([requiredIfGivenPropIsTruthy('enableExpando', PropTypes.string), requiredIfGivenPropIsTruthy('enableToggle', PropTypes.string)]),
+  ariaLabel: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
   /**

package/es/components/DataTable/TableExpandRow.d.ts

@@ -8,11 +8,21 @@ import PropTypes from 'prop-types';
 import { MouseEventHandler, PropsWithChildren } from 'react';
 import { TableRowProps } from './TableRow';
 interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
+    /**
+     * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
+     */
+    ['aria-controls']: string;
+    /**
+     * @deprecated This prop has been deprecated and will be
+     * removed in the next major release of Carbon. Use the
+     * `aria-label` prop instead.
+     */
+    ariaLabel?: string;
     /**
      * Specify the string read by a voice reader when the expand trigger is
      * focused
      */
-    ariaLabel: string;
+    ['aria-label']: string;
     /**
      * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
      */
@@ -32,13 +42,24 @@ interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
     onExpand: MouseEventHandler<HTMLButtonElement>;
 }
 declare const TableExpandRow: {
-    ({ ariaLabel, className: rowClassName, children, isExpanded, onExpand, expandIconDescription, isSelected, expandHeader, ...rest }: TableExpandRowProps): JSX.Element;
+    ({ ["aria-controls"]: ariaControls, ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, className: rowClassName, children, isExpanded, onExpand, expandIconDescription, isSelected, expandHeader, ...rest }: TableExpandRowProps): JSX.Element;
     propTypes: {
         /**
+         * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
+         * TODO: make this required in v12
+         */
+        "aria-controls": PropTypes.Requireable<string>;
+        /**
+         * Specify the string read by a voice reader when the expand trigger is
+         * focused
+         */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
          * Specify the string read by a voice reader when the expand trigger is
          * focused
          */
-        ariaLabel: PropTypes.Validator<string>;
+        ariaLabel: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         /**

package/es/components/DataTable/TableExpandRow.js

@@ -15,7 +15,9 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 const TableExpandRow = _ref => {
   let {
-    ariaLabel,
+    ['aria-controls']: ariaControls,
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
     className: rowClassName,
     children,
     isExpanded,
@@ -44,7 +46,9 @@ const TableExpandRow = _ref => {
     className: `${prefix}--table-expand__button`,
     onClick: onExpand,
     title: expandIconDescription,
-    "aria-label": ariaLabel
+    "aria-label": deprecatedAriaLabel || ariaLabel,
+    "aria-expanded": isExpanded,
+    "aria-controls": ariaControls
   }, /*#__PURE__*/React__default.createElement(ChevronRight, {
     className: `${prefix}--table-expand__svg`,
     "aria-label": expandIconDescription
@@ -52,10 +56,21 @@ const TableExpandRow = _ref => {
 };
 TableExpandRow.propTypes = {
   /**
+   * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
+   * TODO: make this required in v12
+   */
+  ['aria-controls']: PropTypes.string,
+  /**
+   * Specify the string read by a voice reader when the expand trigger is
+   * focused
+   */
+  ['aria-label']: PropTypes.string,
+  /**
+   * Deprecated, please use `aria-label` instead.
    * Specify the string read by a voice reader when the expand trigger is
    * focused
    */
-  ariaLabel: PropTypes.string.isRequired,
+  ariaLabel: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
   /**

package/es/components/DataTable/TableRow.js

@@ -19,7 +19,7 @@ const TableRow = props => {
     [`${prefix}--data-table--selected`]: props.isSelected
   });
   const cleanProps = {
-    ...omit(props, ['ariaLabel', 'onExpand', 'isExpanded', 'isSelected']),
+    ...omit(props, ['ariaLabel', 'aria-label', 'aria-controls', 'onExpand', 'isExpanded', 'isSelected']),
     className: className || undefined
   };
   return /*#__PURE__*/React__default.createElement("tr", cleanProps);

package/es/components/Dropdown/Dropdown.d.ts

@@ -71,7 +71,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * given item to a string label. By default, it extracts the `label` field
      * from a given item to serve as the item label in the list.
      */
-    itemToString?(item: ItemType): string;
+    itemToString?(item: ItemType | null): string;
     /**
      * We try to stay as generic as possible here to allow individuals to pass
      * in a collection of whatever kind of data structure they prefer

package/es/components/Dropdown/Dropdown.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useContext, useRef } from 'react';
+import React__default, { useContext, useRef, useState } from 'react';
 import { useSelect } from 'downshift';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -22,11 +22,11 @@ import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
 const getInstanceId = setupGetInstanceId();
 const {
-  MenuBlur,
-  MenuKeyDownArrowDown,
-  MenuKeyDownArrowUp,
-  MenuKeyDownEscape,
-  ToggleButtonClick
+  ToggleButtonKeyDownArrowDown,
+  ToggleButtonKeyDownArrowUp,
+  ToggleButtonKeyDownHome,
+  ToggleButtonKeyDownEnd,
+  ItemMouseMove
 } = useSelect.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -72,7 +72,6 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     ...other
   } = _ref;
   const prefix = usePrefix();
-  const [highlightedIndex, setHighlightedIndex] = useState();
   const {
     isFluid
   } = useContext(FormContext);
@@ -80,31 +79,43 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     ...downshiftProps,
     items,
     itemToString,
-    highlightedIndex,
     initialSelectedItem,
     onSelectedItemChange,
-    onStateChange
+    stateReducer,
+    isItemDisabled(item, _index) {
+      const isObject = item !== null && typeof item === 'object';
+      return isObject && 'disabled' in item && item.disabled === true;
+    }
   };
   const {
     current: dropdownInstanceId
   } = useRef(getInstanceId());
-  function onStateChange(changes) {
+  function stateReducer(state, actionAndChanges) {
     const {
+      changes,
+      props,
       type
+    } = actionAndChanges;
+    const {
+      highlightedIndex
     } = changes;
     switch (type) {
-      case MenuKeyDownArrowDown:
-      case MenuKeyDownArrowUp:
-        setHighlightedIndex(changes.highlightedIndex);
-        break;
-      case MenuBlur:
-      case MenuKeyDownEscape:
-        setHighlightedIndex(changes.highlightedIndex);
-        break;
-      case ToggleButtonClick:
-        setHighlightedIndex(changes.highlightedIndex);
-        break;
+      case ToggleButtonKeyDownArrowDown:
+      case ToggleButtonKeyDownArrowUp:
+      case ToggleButtonKeyDownHome:
+      case ToggleButtonKeyDownEnd:
+        if (highlightedIndex > -1) {
+          const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
+          props.scrollIntoView(itemArray[highlightedIndex]);
+        }
+        return changes;
+      case ItemMouseMove:
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
     }
+    return changes;
   }
 
   // only set selectedItem if the prop is defined. Setting if it is undefined
@@ -118,7 +129,8 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     getLabelProps,
     getMenuProps,
     getItemProps,
-    selectedItem
+    selectedItem,
+    highlightedIndex
   } = useSelect(selectProps);
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
@@ -162,14 +174,12 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     let {
       selectedItem
     } = _ref2;
-    setIsFocused(false);
     if (onChange) {
       onChange({
         selectedItem: selectedItem ?? null
       });
     }
   }
-  const menuItemOptionRefs = useRef(items.map(_ => /*#__PURE__*/React__default.createRef()));
   const handleFocus = evt => {
     setIsFocused(evt.type === 'focus' ? true : false);
   };
@@ -200,10 +210,6 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
         setIsTyping(true);
       }
       if (isTyping && evt.code === 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
-        if (evt.code === 'Space') {
-          evt.preventDefault();
-          return;
-        }
         if (currTimer) {
           clearTimeout(currTimer);
         }
@@ -211,7 +217,9 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
           setIsTyping(false);
         }, 3000));
       }
-      toggleButtonProps.onKeyDown(evt);
+      if (toggleButtonProps.onKeyDown) {
+        toggleButtonProps.onKeyDown(evt);
+      }
     }
   };
   const menuProps = getMenuProps();
@@ -240,16 +248,12 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     type: "button"
     // aria-expanded is already being passed through {...toggleButtonProps}
     ,
-    role: "combobox" // eslint-disable-line jsx-a11y/role-has-required-aria-props
-    ,
-    "aria-owns": getMenuProps().id,
-    "aria-controls": getMenuProps().id,
     className: `${prefix}--list-box__field`,
     disabled: disabled,
     "aria-disabled": readOnly ? true : undefined // aria-disabled to remain focusable
     ,
     "aria-describedby": !inline && !invalid && !warn && helper ? helperId : undefined,
-    title: selectedItem && itemToString !== undefined ? itemToString(selectedItem) : label
+    title: selectedItem && itemToString !== undefined ? itemToString(selectedItem) : defaultItemToString(label)
   }, toggleButtonProps, readOnlyEventHandlers, {
     ref: mergedRef
   }), /*#__PURE__*/React__default.createElement("span", {
@@ -259,11 +263,9 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     translateWithId: translateWithId
   })), /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen && items.map((item, index) => {
     const isObject = item !== null && typeof item === 'object';
-    const disabled = isObject && 'disabled' in item && item.disabled === true;
     const itemProps = getItemProps({
       item,
-      index,
-      disabled
+      index
     });
     const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
     return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
@@ -271,9 +273,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       isActive: selectedItem === item,
       isHighlighted: highlightedIndex === index,
       title: title,
-      ref: {
-        menuItemOptionRef: menuItemOptionRefs.current[index]
-      }
+      disabled: itemProps['aria-disabled']
     }, itemProps), typeof item === 'object' && ItemToElement !== undefined && ItemToElement !== null ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
       key: itemProps.id
     }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default.createElement(Checkmark, {

package/es/components/ListBox/ListBoxMenu.d.ts

@@ -6,13 +6,13 @@
  */
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id';
-export interface ListBoxMenuProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
+export interface ListBoxMenuProps extends Omit<ReactAttr<HTMLUListElement>, ExcludedAttributes> {
     /**
      * Specify a custom `id`
      */
     id: string;
 }
-export type ListBoxMenuComponent = ForwardRefReturn<HTMLDivElement, ListBoxMenuProps>;
+export type ListBoxMenuComponent = ForwardRefReturn<HTMLUListElement, ListBoxMenuProps>;
 /**
  * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
  * class into a single component. It is also being used to validate given

package/es/components/ListBox/ListBoxMenu.js

@@ -23,7 +23,7 @@ const ListBoxMenu = /*#__PURE__*/React__default.forwardRef(function ListBoxMenu(
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement("ul", _extends({
     ref: ref,
     id: id,
     className: `${prefix}--list-box__menu`,

package/es/components/ListBox/ListBoxMenuItem.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { ForwardedRef } from 'react';
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
-export interface ListBoxMenuItemProps extends ReactAttr<HTMLDivElement> {
+export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
     /**
      * Specify whether the current menu item is "active".
      */
@@ -15,8 +15,12 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLDivElement> {
      * Specify whether the current menu item is "highlighted".
      */
     isHighlighted?: boolean;
+    /**
+     * Specify whether the item should be disabled
+     */
+    disabled?: boolean;
 }
-export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLDivElement> & {
+export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLLIElement> & {
     menuItemOptionRef?: React.Ref<HTMLDivElement>;
 }) | null;
 export type ListBoxMenuItemComponent = ForwardRefReturn<ListBoxMenuItemForwardedRef, ListBoxMenuItemProps>;

package/es/components/ListBox/ListBoxMenuItem.js

@@ -42,10 +42,9 @@ const ListBoxMenuItem = /*#__PURE__*/React__default.forwardRef(function ListBoxM
     [`${prefix}--list-box__menu-item--active`]: isActive,
     [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
   });
-  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+  return /*#__PURE__*/React__default.createElement("li", _extends({}, rest, {
     className: className,
-    title: isTruncated ? title : undefined,
-    tabIndex: -1
+    title: isTruncated ? title : undefined
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--list-box__menu-item__option`,
     ref: forwardedRef?.menuItemOptionRef || ref
@@ -58,6 +57,10 @@ ListBoxMenuItem.propTypes = {
    * Menu Item
    */
   children: PropTypes.node,
+  /**
+   * Specify if the item should be disabled
+   */
+  disabled: PropTypes.bool,
   /**
    * Specify whether the current menu item is "active".
    */