@itwin/itwinui-react 2.8.2 → 2.9.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 2.9.0
+
+### Minor Changes
+
+- [#1106](https://github.com/iTwin/iTwinUI/pull/1106): Added new List and ListItem components.
+
+  ```jsx
+  <List>
+    <ListItem>item 1</ListItem>
+    <ListItem>item 2</ListItem>
+    <ListItem>item 3</ListItem>
+  </List>
+  ```
+
+### Patch Changes
+
+- [#1210](https://github.com/iTwin/iTwinUI/pull/1210): Removed incorrect `role=tooltip` from Popover, DropdownMenu, Select and ComboBox.
+- [#1209](https://github.com/iTwin/iTwinUI/pull/1209): Fixed an issue in ComboBox where disabled items didn't have a proper focus outline and were still selectable with keyboard.
+- [#1149](https://github.com/iTwin/iTwinUI/pull/1149): added event.altKey to file with handleKeyDown and onKeyDown function
+- Updated dependencies:
+  - @itwin/itwinui-css@1.10.0
+
 ## 2.8.2
 
 ### Patch Changes

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -121,6 +121,9 @@ exports.ColorBuilder = react_1.default.forwardRef((props, ref) => {
     const keysPressed = react_1.default.useRef({}); // keep track of which keys are currently pressed
     // Arrow key navigation for color dot
     const handleColorDotKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         let x = squareLeft;
         let y = squareTop;
         keysPressed.current[event.key] = true;

package/cjs/core/ColorPicker/ColorPalette.js

@@ -42,6 +42,9 @@ exports.ColorPalette = react_1.default.forwardRef((props, ref) => {
     const paletteRefs = (0, utils_1.useMergedRefs)(paletteRef, setDefaultTabIndex);
     // Color palette arrow key navigation
     const handleKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         const swatches = (0, utils_1.getFocusableElements)(paletteRef.current);
         if (!swatches.length) {
             return;

package/cjs/core/ComboBox/ComboBox.js

@@ -218,6 +218,11 @@ const ComboBox = (props) => {
         }
     }, [multiple, onChangeProp, optionsRef]);
     const onClickHandler = react_1.default.useCallback((__originalIndex) => {
+        var _a, _b;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); // return focus to input
+        if ((_b = optionsRef.current[__originalIndex]) === null || _b === void 0 ? void 0 : _b.disabled) {
+            return;
+        }
         if (isMultipleEnabled(selected, multiple)) {
             const actionType = isMenuItemSelected(__originalIndex)
                 ? 'removed'
@@ -237,6 +242,7 @@ const ComboBox = (props) => {
         multiple,
         onChangeHandler,
         selected,
+        optionsRef,
     ]);
     const getMenuItem = react_1.default.useCallback((option, filteredIndex) => {
         const optionId = getOptionId(option, id);

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -14,7 +14,7 @@ const utils_1 = require("../utils");
 const ComboBoxMultipleContainer_1 = require("./ComboBoxMultipleContainer");
 const helpers_1 = require("./helpers");
 exports.ComboBoxInput = react_1.default.forwardRef((props, forwardedRef) => {
-    const { onKeyDown: onKeyDownProp, onFocus: onFocusProp, selectTags, ...rest } = props;
+    const { onKeyDown: onKeyDownProp, onFocus: onFocusProp, onClick: onClickProp, selectTags, ...rest } = props;
     const { isOpen, id, focusedIndex, enableVirtualization, multiple, onClickHandler, } = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext);
     const dispatch = (0, utils_1.useSafeContext)(helpers_1.ComboBoxActionContext);
     const { inputRef, menuRef, optionsExtraInfoRef } = (0, utils_1.useSafeContext)(helpers_1.ComboBoxRefsContext);
@@ -31,6 +31,9 @@ exports.ComboBoxInput = react_1.default.forwardRef((props, forwardedRef) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(event);
         const length = (_a = Object.keys(optionsExtraInfoRef.current).length) !== null && _a !== void 0 ? _a : 0;
+        if (event.altKey) {
+            return;
+        }
         switch (event.key) {
             case 'ArrowDown': {
                 event.preventDefault();
@@ -57,7 +60,7 @@ exports.ComboBoxInput = react_1.default.forwardRef((props, forwardedRef) => {
                     const currentElement = (_f = menuRef.current) === null || _f === void 0 ? void 0 : _f.querySelector(`[data-iui-index="${nextIndex}"]`);
                     const nextElement = (_g = currentElement === null || currentElement === void 0 ? void 0 : currentElement.nextElementSibling) !== null && _g !== void 0 ? _g : (_h = menuRef.current) === null || _h === void 0 ? void 0 : _h.querySelector('[data-iui-index]');
                     nextIndex = Number(nextElement === null || nextElement === void 0 ? void 0 : nextElement.getAttribute('data-iui-index'));
-                    if ((nextElement === null || nextElement === void 0 ? void 0 : nextElement.ariaDisabled) !== 'true') {
+                    if (nextElement) {
                         return dispatch({ type: 'focus', value: nextIndex });
                     }
                 } while (nextIndex !== focusedIndexRef.current);
@@ -87,7 +90,7 @@ exports.ComboBoxInput = react_1.default.forwardRef((props, forwardedRef) => {
                     const currentElement = (_o = menuRef.current) === null || _o === void 0 ? void 0 : _o.querySelector(`[data-iui-index="${prevIndex}"]`);
                     const prevElement = (_p = currentElement === null || currentElement === void 0 ? void 0 : currentElement.previousElementSibling) !== null && _p !== void 0 ? _p : (_q = menuRef.current) === null || _q === void 0 ? void 0 : _q.querySelector('[data-iui-index]:last-of-type');
                     prevIndex = Number(prevElement === null || prevElement === void 0 ? void 0 : prevElement.getAttribute('data-iui-index'));
-                    if ((prevElement === null || prevElement === void 0 ? void 0 : prevElement.ariaDisabled) !== 'true') {
+                    if (prevElement) {
                         return dispatch({ type: 'focus', value: prevIndex });
                     }
                 } while (prevIndex !== focusedIndexRef.current);
@@ -96,18 +99,8 @@ exports.ComboBoxInput = react_1.default.forwardRef((props, forwardedRef) => {
             case 'Enter': {
                 event.preventDefault();
                 if (isOpen) {
-                    if (multiple) {
-                        // Keep menu open when multiselect is enabled and user selects an item
-                        if (focusedIndexRef.current > -1) {
-                            onClickHandler === null || onClickHandler === void 0 ? void 0 : onClickHandler(focusedIndexRef.current);
-                        }
-                        else {
-                            dispatch({ type: 'close' });
-                        }
-                    }
-                    else {
+                    if (focusedIndexRef.current > -1) {
                         onClickHandler === null || onClickHandler === void 0 ? void 0 : onClickHandler(focusedIndexRef.current);
-                        dispatch({ type: 'close' });
                     }
                 }
                 else {
@@ -129,7 +122,6 @@ exports.ComboBoxInput = react_1.default.forwardRef((props, forwardedRef) => {
         enableVirtualization,
         isOpen,
         menuRef,
-        multiple,
         onClickHandler,
         onKeyDownProp,
         optionsExtraInfoRef,
@@ -138,9 +130,18 @@ exports.ComboBoxInput = react_1.default.forwardRef((props, forwardedRef) => {
         dispatch({ type: 'open' });
         onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(event);
     }, [dispatch, onFocusProp]);
+    const handleClick = react_1.default.useCallback((e) => {
+        onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
+        if (e.isDefaultPrevented()) {
+            return;
+        }
+        if (!isOpen) {
+            dispatch({ type: 'open' });
+        }
+    }, [dispatch, isOpen, onClickProp]);
     const [tagContainerWidthRef, tagContainerWidth] = (0, utils_1.useContainerWidth)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Input_1.Input, { ref: refs, onKeyDown: handleKeyDown, onFocus: handleFocus, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
+        react_1.default.createElement(Input_1.Input, { ref: refs, onKeyDown: handleKeyDown, onClick: handleClick, onFocus: handleFocus, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
                 ? getIdFromIndex(focusedIndex)
                 : undefined, role: 'combobox', "aria-controls": isOpen ? `${id}-list` : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off', style: multiple ? { paddingLeft: tagContainerWidth + 18 } : {}, ...rest }),
         multiple && selectTags && (react_1.default.createElement(ComboBoxMultipleContainer_1.ComboBoxMultipleContainer, { ref: tagContainerWidthRef, selectedItems: selectTags }))));

package/cjs/core/ComboBox/ComboBoxMenuItem.js

@@ -26,7 +26,7 @@ exports.ComboBoxMenuItem = react_1.default.memo(react_1.default.forwardRef((prop
             'iui-active': isSelected,
             'iui-disabled': disabled,
             'iui-focused': focusedIndex === index,
-        }, className), ref: refs, onClick: () => !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value)), role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-disabled": disabled, "data-iui-index": index, ...rest },
+        }, className), ref: refs, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(value), role: role, tabIndex: role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-disabled": disabled, "data-iui-index": index, ...rest },
         icon &&
             react_1.default.cloneElement(icon, {
                 className: (0, classnames_1.default)(icon.props.className, 'iui-icon'),

package/cjs/core/DatePicker/DatePicker.js

@@ -272,6 +272,9 @@ const DatePicker = (props) => {
     const isPreviousYearDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear - 1, 11, 31));
     const isNextYearDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear + 1, 0, 1));
     const handleCalendarKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         if (!focusedDay) {
             return;
         }

package/cjs/core/Dialog/DialogMain.js

@@ -73,6 +73,9 @@ exports.DialogMain = react_1.default.forwardRef((props, ref) => {
         };
     }, [isOpen, preventDocumentScroll]);
     const handleKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         // Prevents React from resetting its properties
         event.persist();
         if (isDismissible && closeOnEsc && event.key === 'Escape' && onClose) {

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -34,6 +34,9 @@ const ExpandableBlock = (props) => {
         onToggle === null || onToggle === void 0 ? void 0 : onToggle(!expanded);
     };
     const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         if (event.key === 'Enter' ||
             event.key === ' ' ||
             event.key === 'Spacebar') {

package/cjs/core/List/List.d.ts

@@ -0,0 +1,6 @@
+import type { PolymorphicForwardRefComponent, PolymorphicComponentProps } from '../utils';
+import '@itwin/itwinui-css/css/menu.css';
+export declare const List: PolymorphicForwardRefComponent<"ul", ListOwnProps>;
+declare type ListOwnProps = {};
+export declare type ListProps = PolymorphicComponentProps<'ul', ListOwnProps>;
+export {};

package/cjs/core/List/List.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
+require("@itwin/itwinui-css/css/menu.css");
+exports.List = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'ul', className, ...rest } = props;
+    (0, utils_1.useTheme)();
+    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-list', className), ref: ref, role: 'list', ...rest }));
+});

package/cjs/core/List/ListItem.d.ts

@@ -0,0 +1,79 @@
+import type { PolymorphicForwardRefComponent, PolymorphicComponentProps } from '../utils';
+import '@itwin/itwinui-css/css/menu.css';
+declare type ListItemOwnProps = {
+    /**
+     * Size of the ListItem. Can be explicitly specified to be 'large',
+     * but if a description is included in addition to the label, then
+     * it will automatically become large.
+     */
+    size?: 'default' | 'large';
+    /**
+     * If true, the ListItem has disabled (dimmed) styling.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the ListItem has active (selected) styling.
+     */
+    active?: boolean;
+    /**
+     * If true, the ListItem will get actionable styling, such as hover styling and cursor.
+     */
+    actionable?: boolean;
+    /**
+     * If true, the ListItem has focus styling.
+     *
+     * By default, focus styling is automatically applied if the item is
+     * focused, or if the item contains a `LinkAction` and it is focused.
+     * This prop is useful for custom focus management (e.g. using `aria-activedescendant`).
+     */
+    focused?: boolean;
+};
+declare type ListItemIconOwnProps = {};
+declare type ListItemContentOwnProps = {};
+declare type ListItemDescriptionOwnProps = {};
+/**
+ * A generic ListItem component that can be used simply for displaying data, or as a base
+ * for the list items in a more complex component (e.g. a custom Select).
+ *
+ * Includes support for left/right icons, multiple lines of text, and hover/focus/active/disabled styling.
+ *
+ * @example
+ * <List>
+ *   <ListItem>item 1</ListItem>
+ *   <ListItem>item 2</ListItem>
+ *   <ListItem>item 3</ListItem>
+ * </List>
+ */
+export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnProps> & {
+    /**
+     * Icon to be placed at the beginning or end of the ListItem.
+     */
+    Icon: PolymorphicForwardRefComponent<"div", ListItemIconOwnProps>;
+    /**
+     * Wrapper for the main content of the ListItem.
+     *
+     * For basic list items, this wrapper is not needed, but it can be useful for two cases:
+     * - When using an end icon. The `ListItem.Content` will fill the available space
+     *   and push the icon to the end
+     * - When using `ListItem.Description`.
+     */
+    Content: PolymorphicForwardRefComponent<"div", ListItemContentOwnProps>;
+    /**
+     * Description to be used in addition to the main label of the ListItem.
+     * Should be used as a child of `ListItem.Content`.
+     *
+     * @example
+     * <ListItem>
+     *  <ListItem.Content>
+     *   <div>some list item</div>
+     *   <ListItem.Description>description for this item</ListItem.Description>
+     *  </ListItem.Content>
+     * </ListItem>
+     */
+    Description: PolymorphicForwardRefComponent<"div", ListItemDescriptionOwnProps>;
+};
+export declare type ListItemProps = PolymorphicComponentProps<'li', ListItemOwnProps>;
+export declare type ListItemIconProps = PolymorphicComponentProps<'li', ListItemIconOwnProps>;
+export declare type ListItemContentProps = PolymorphicComponentProps<'li', ListItemContentOwnProps>;
+export declare type ListItemDescriptionProps = PolymorphicComponentProps<'li', ListItemDescriptionOwnProps>;
+export {};

package/cjs/core/List/ListItem.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItem = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
+require("@itwin/itwinui-css/css/menu.css");
+const ListItemComponent = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'li', size = 'default', disabled = false, active = false, actionable = false, focused = false, className, ...rest } = props;
+    (0, utils_1.useTheme)();
+    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-list-item', className), "data-iui-active": active ? 'true' : undefined, "data-iui-disabled": disabled ? 'true' : undefined, "data-iui-size": size === 'large' ? 'large' : undefined, "data-iui-actionable": actionable ? 'true' : undefined, "data-iui-focused": focused ? 'true' : undefined, ref: ref, ...rest }));
+});
+// ----------------------------------------------------------------------------
+const ListItemIcon = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'div', className, ...rest } = props;
+    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-list-item-icon', className), ref: ref, ...rest }));
+});
+// ----------------------------------------------------------------------------
+const ListItemContent = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'div', className, ...rest } = props;
+    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-list-item-content', className), ref: ref, ...rest }));
+});
+// ----------------------------------------------------------------------------
+const ListItemDescription = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'div', className, ...rest } = props;
+    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-list-item-description', className), ref: ref, ...rest }));
+});
+// ----------------------------------------------------------------------------
+// Exported compound component
+/**
+ * A generic ListItem component that can be used simply for displaying data, or as a base
+ * for the list items in a more complex component (e.g. a custom Select).
+ *
+ * Includes support for left/right icons, multiple lines of text, and hover/focus/active/disabled styling.
+ *
+ * @example
+ * <List>
+ *   <ListItem>item 1</ListItem>
+ *   <ListItem>item 2</ListItem>
+ *   <ListItem>item 3</ListItem>
+ * </List>
+ */
+exports.ListItem = Object.assign(ListItemComponent, {
+    /**
+     * Icon to be placed at the beginning or end of the ListItem.
+     */
+    Icon: ListItemIcon,
+    /**
+     * Wrapper for the main content of the ListItem.
+     *
+     * For basic list items, this wrapper is not needed, but it can be useful for two cases:
+     * - When using an end icon. The `ListItem.Content` will fill the available space
+     *   and push the icon to the end
+     * - When using `ListItem.Description`.
+     */
+    Content: ListItemContent,
+    /**
+     * Description to be used in addition to the main label of the ListItem.
+     * Should be used as a child of `ListItem.Content`.
+     *
+     * @example
+     * <ListItem>
+     *  <ListItem.Content>
+     *   <div>some list item</div>
+     *   <ListItem.Description>description for this item</ListItem.Description>
+     *  </ListItem.Content>
+     * </ListItem>
+     */
+    Description: ListItemDescription,
+});

package/cjs/core/List/index.d.ts

@@ -0,0 +1,4 @@
+export { List } from './List';
+export type { ListProps } from './List';
+export { ListItem } from './ListItem';
+export type { ListItemProps, ListItemIconProps, ListItemContentProps, ListItemDescriptionProps, } from './ListItem';

package/cjs/core/List/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItem = exports.List = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var List_1 = require("./List");
+Object.defineProperty(exports, "List", { enumerable: true, get: function () { return List_1.List; } });
+var ListItem_1 = require("./ListItem");
+Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return ListItem_1.ListItem; } });

package/cjs/core/Menu/Menu.js

@@ -39,6 +39,9 @@ exports.Menu = react_1.default.forwardRef((props, ref) => {
         }
     }, [setFocus, focusedIndex, getFocusableNodes]);
     const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         const items = getFocusableNodes();
         if (!(items === null || items === void 0 ? void 0 : items.length)) {
             return;

package/cjs/core/Select/Select.js

@@ -103,6 +103,9 @@ const Select = (props) => {
         }
     }, [isOpen]);
     const onKeyDown = (event, toggle) => {
+        if (event.altKey) {
+            return;
+        }
         switch (event.key) {
             case 'Enter':
             case ' ':

package/cjs/core/Stepper/StepperStep.js

@@ -22,6 +22,9 @@ const StepperStep = (props) => {
         }
     };
     const onKeyDown = (e) => {
+        if (e.altKey) {
+            return;
+        }
         if (!isClickable) {
             return;
         }

package/cjs/core/Table/filters/DateRangeFilter/DateRangeFilter.js

@@ -57,6 +57,9 @@ const DateRangeFilter = (props) => {
         });
     }, []);
     const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         if (event.key === 'Enter') {
             setFilter([from, to]);
         }

package/cjs/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js

@@ -29,6 +29,9 @@ const NumberRangeFilter = (props) => {
         return !value || isNaN(Number(value)) ? undefined : Number(value);
     };
     const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         if (event.key === 'Enter') {
             setFilter([parseInputValue(from), parseInputValue(to)]);
         }

package/cjs/core/Table/filters/TextFilter/TextFilter.js

@@ -20,6 +20,9 @@ const TextFilter = (props) => {
     (0, utils_1.useTheme)();
     const [text, setText] = react_1.default.useState((_a = column.filterValue) !== null && _a !== void 0 ? _a : '');
     const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         if (event.key === 'Enter') {
             setFilter(text);
         }

package/cjs/core/TimePicker/TimePicker.js

@@ -227,6 +227,9 @@ const TimePickerColumn = (props) => {
         isSame && (ref === null || ref === void 0 ? void 0 : ref.scrollIntoView({ block: 'nearest', inline: 'nearest' }));
     };
     const handleTimeKeyDown = (event, maxValue, onFocus, onSelect, currentValue) => {
+        if (event.altKey) {
+            return;
+        }
         switch (event.key) {
             case 'ArrowDown':
                 if (currentValue + 1 > maxValue) {

package/cjs/core/Tree/Tree.js

@@ -77,6 +77,9 @@ const Tree = (props) => {
         return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
     }, []);
     const handleKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         const items = getFocusableNodes();
         if (!(items === null || items === void 0 ? void 0 : items.length)) {
             return;

package/cjs/core/Tree/TreeNode.js

@@ -41,6 +41,9 @@ const TreeNode = (props) => {
     const nodeRef = react_1.default.useRef(null);
     const onKeyDown = (event) => {
         var _a, _b, _c, _d, _e, _f;
+        if (event.altKey) {
+            return;
+        }
         const isNodeFocused = nodeRef.current === ((_a = nodeRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement);
         switch (event.key) {
             case 'ArrowLeft': {

package/cjs/core/index.d.ts

@@ -40,6 +40,8 @@ export { Footer, defaultFooterElements } from './Footer';
 export type { FooterProps, FooterElement, TitleTranslations } from './Footer';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export type { HeaderProps, HeaderBreadcrumbsProps, HeaderButtonProps, HeaderLogoProps, } from './Header';
+export { List, ListItem } from './List';
+export type { ListProps, ListItemProps, ListItemIconProps, ListItemContentProps, ListItemDescriptionProps, } from './List';
 export { VerticalTabs, Tabs, Tab, HorizontalTabs } from './Tabs';
 export type { VerticalTabsProps, TabProps, HorizontalTabsProps } from './Tabs';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';

package/cjs/core/index.js

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTabs = exports.Tab = exports.Tabs = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileEmptyCard = exports.FileUploadCard = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.NonIdealState = exports.ErrorPage = exports.DropdownMenu = exports.Dialog = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.UserIconGroup = exports.AvatarGroup = exports.UserIcon = exports.Avatar = exports.Alert = void 0;
-exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.NotificationMarker = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = void 0;
-exports.Divider = exports.VisuallyHidden = exports.Flex = exports.Icon = exports.LinkAction = exports.LinkBox = exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = void 0;
+exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTabs = exports.Tab = exports.Tabs = exports.VerticalTabs = exports.ListItem = exports.List = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileEmptyCard = exports.FileUploadCard = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.NonIdealState = exports.ErrorPage = exports.DropdownMenu = exports.Dialog = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.UserIconGroup = exports.AvatarGroup = exports.UserIcon = exports.Avatar = exports.Alert = void 0;
+exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.NotificationMarker = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = void 0;
+exports.Divider = exports.VisuallyHidden = exports.Flex = exports.Icon = exports.LinkAction = exports.LinkBox = exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -71,6 +71,9 @@ Object.defineProperty(exports, "Header", { enumerable: true, get: function () {
 Object.defineProperty(exports, "HeaderBreadcrumbs", { enumerable: true, get: function () { return Header_1.HeaderBreadcrumbs; } });
 Object.defineProperty(exports, "HeaderButton", { enumerable: true, get: function () { return Header_1.HeaderButton; } });
 Object.defineProperty(exports, "HeaderLogo", { enumerable: true, get: function () { return Header_1.HeaderLogo; } });
+var List_1 = require("./List");
+Object.defineProperty(exports, "List", { enumerable: true, get: function () { return List_1.List; } });
+Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return List_1.ListItem; } });
 var Tabs_1 = require("./Tabs");
 Object.defineProperty(exports, "VerticalTabs", { enumerable: true, get: function () { return Tabs_1.VerticalTabs; } });
 Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });

package/cjs/core/utils/components/Popover.js

@@ -48,7 +48,7 @@ exports.Popover = react_1.default.forwardRef((props, ref) => {
         arrow: false,
         duration: 0,
         interactive: true,
-        role: undefined,
+        role: '',
         offset: [0, 0],
         maxWidth: '',
         zIndex: 99999,
@@ -103,6 +103,9 @@ exports.hideOnEscOrTab = {
             return !descendents.some((el) => (el === null || el === void 0 ? void 0 : el.tabIndex) >= 0);
         };
         const onKeyDown = (event) => {
+            if (event.altKey) {
+                return;
+            }
             switch (event.key) {
                 case 'Escape':
                     instance.hide();

package/esm/core/ColorPicker/ColorBuilder.js

@@ -115,6 +115,9 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
     const keysPressed = React.useRef({}); // keep track of which keys are currently pressed
     // Arrow key navigation for color dot
     const handleColorDotKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         let x = squareLeft;
         let y = squareTop;
         keysPressed.current[event.key] = true;

package/esm/core/ColorPicker/ColorPalette.js

@@ -36,6 +36,9 @@ export const ColorPalette = React.forwardRef((props, ref) => {
     const paletteRefs = useMergedRefs(paletteRef, setDefaultTabIndex);
     // Color palette arrow key navigation
     const handleKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         const swatches = getFocusableElements(paletteRef.current);
         if (!swatches.length) {
             return;

package/esm/core/ComboBox/ComboBox.js

@@ -212,6 +212,11 @@ export const ComboBox = (props) => {
         }
     }, [multiple, onChangeProp, optionsRef]);
     const onClickHandler = React.useCallback((__originalIndex) => {
+        var _a, _b;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); // return focus to input
+        if ((_b = optionsRef.current[__originalIndex]) === null || _b === void 0 ? void 0 : _b.disabled) {
+            return;
+        }
         if (isMultipleEnabled(selected, multiple)) {
             const actionType = isMenuItemSelected(__originalIndex)
                 ? 'removed'
@@ -231,6 +236,7 @@ export const ComboBox = (props) => {
         multiple,
         onChangeHandler,
         selected,
+        optionsRef,
     ]);
     const getMenuItem = React.useCallback((option, filteredIndex) => {
         const optionId = getOptionId(option, id);

package/esm/core/ComboBox/ComboBoxInput.js

@@ -8,7 +8,7 @@ import { useSafeContext, useMergedRefs, useContainerWidth } from '../utils';
 import { ComboBoxMultipleContainer } from './ComboBoxMultipleContainer';
 import { ComboBoxStateContext, ComboBoxActionContext, ComboBoxRefsContext, } from './helpers';
 export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
-    const { onKeyDown: onKeyDownProp, onFocus: onFocusProp, selectTags, ...rest } = props;
+    const { onKeyDown: onKeyDownProp, onFocus: onFocusProp, onClick: onClickProp, selectTags, ...rest } = props;
     const { isOpen, id, focusedIndex, enableVirtualization, multiple, onClickHandler, } = useSafeContext(ComboBoxStateContext);
     const dispatch = useSafeContext(ComboBoxActionContext);
     const { inputRef, menuRef, optionsExtraInfoRef } = useSafeContext(ComboBoxRefsContext);
@@ -25,6 +25,9 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(event);
         const length = (_a = Object.keys(optionsExtraInfoRef.current).length) !== null && _a !== void 0 ? _a : 0;
+        if (event.altKey) {
+            return;
+        }
         switch (event.key) {
             case 'ArrowDown': {
                 event.preventDefault();
@@ -51,7 +54,7 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
                     const currentElement = (_f = menuRef.current) === null || _f === void 0 ? void 0 : _f.querySelector(`[data-iui-index="${nextIndex}"]`);
                     const nextElement = (_g = currentElement === null || currentElement === void 0 ? void 0 : currentElement.nextElementSibling) !== null && _g !== void 0 ? _g : (_h = menuRef.current) === null || _h === void 0 ? void 0 : _h.querySelector('[data-iui-index]');
                     nextIndex = Number(nextElement === null || nextElement === void 0 ? void 0 : nextElement.getAttribute('data-iui-index'));
-                    if ((nextElement === null || nextElement === void 0 ? void 0 : nextElement.ariaDisabled) !== 'true') {
+                    if (nextElement) {
                         return dispatch({ type: 'focus', value: nextIndex });
                     }
                 } while (nextIndex !== focusedIndexRef.current);
@@ -81,7 +84,7 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
                     const currentElement = (_o = menuRef.current) === null || _o === void 0 ? void 0 : _o.querySelector(`[data-iui-index="${prevIndex}"]`);
                     const prevElement = (_p = currentElement === null || currentElement === void 0 ? void 0 : currentElement.previousElementSibling) !== null && _p !== void 0 ? _p : (_q = menuRef.current) === null || _q === void 0 ? void 0 : _q.querySelector('[data-iui-index]:last-of-type');
                     prevIndex = Number(prevElement === null || prevElement === void 0 ? void 0 : prevElement.getAttribute('data-iui-index'));
-                    if ((prevElement === null || prevElement === void 0 ? void 0 : prevElement.ariaDisabled) !== 'true') {
+                    if (prevElement) {
                         return dispatch({ type: 'focus', value: prevIndex });
                     }
                 } while (prevIndex !== focusedIndexRef.current);
@@ -90,18 +93,8 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
             case 'Enter': {
                 event.preventDefault();
                 if (isOpen) {
-                    if (multiple) {
-                        // Keep menu open when multiselect is enabled and user selects an item
-                        if (focusedIndexRef.current > -1) {
-                            onClickHandler === null || onClickHandler === void 0 ? void 0 : onClickHandler(focusedIndexRef.current);
-                        }
-                        else {
-                            dispatch({ type: 'close' });
-                        }
-                    }
-                    else {
+                    if (focusedIndexRef.current > -1) {
                         onClickHandler === null || onClickHandler === void 0 ? void 0 : onClickHandler(focusedIndexRef.current);
-                        dispatch({ type: 'close' });
                     }
                 }
                 else {
@@ -123,7 +116,6 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         enableVirtualization,
         isOpen,
         menuRef,
-        multiple,
         onClickHandler,
         onKeyDownProp,
         optionsExtraInfoRef,
@@ -132,9 +124,18 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         dispatch({ type: 'open' });
         onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(event);
     }, [dispatch, onFocusProp]);
+    const handleClick = React.useCallback((e) => {
+        onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
+        if (e.isDefaultPrevented()) {
+            return;
+        }
+        if (!isOpen) {
+            dispatch({ type: 'open' });
+        }
+    }, [dispatch, isOpen, onClickProp]);
     const [tagContainerWidthRef, tagContainerWidth] = useContainerWidth();
     return (React.createElement(React.Fragment, null,
-        React.createElement(Input, { ref: refs, onKeyDown: handleKeyDown, onFocus: handleFocus, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
+        React.createElement(Input, { ref: refs, onKeyDown: handleKeyDown, onClick: handleClick, onFocus: handleFocus, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
                 ? getIdFromIndex(focusedIndex)
                 : undefined, role: 'combobox', "aria-controls": isOpen ? `${id}-list` : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off', style: multiple ? { paddingLeft: tagContainerWidth + 18 } : {}, ...rest }),
         multiple && selectTags && (React.createElement(ComboBoxMultipleContainer, { ref: tagContainerWidthRef, selectedItems: selectTags }))));

package/esm/core/ComboBox/ComboBoxMenuItem.js

@@ -20,7 +20,7 @@ export const ComboBoxMenuItem = React.memo(React.forwardRef((props, forwardedRef
             'iui-active': isSelected,
             'iui-disabled': disabled,
             'iui-focused': focusedIndex === index,
-        }, className), ref: refs, onClick: () => !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value)), role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-disabled": disabled, "data-iui-index": index, ...rest },
+        }, className), ref: refs, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(value), role: role, tabIndex: role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-disabled": disabled, "data-iui-index": index, ...rest },
         icon &&
             React.cloneElement(icon, {
                 className: cx(icon.props.className, 'iui-icon'),

package/esm/core/DatePicker/DatePicker.js

@@ -265,6 +265,9 @@ export const DatePicker = (props) => {
     const isPreviousYearDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear - 1, 11, 31));
     const isNextYearDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear + 1, 0, 1));
     const handleCalendarKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         if (!focusedDay) {
             return;
         }

package/esm/core/Dialog/DialogMain.js

@@ -67,6 +67,9 @@ export const DialogMain = React.forwardRef((props, ref) => {
         };
     }, [isOpen, preventDocumentScroll]);
     const handleKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         // Prevents React from resetting its properties
         event.persist();
         if (isDismissible && closeOnEsc && event.key === 'Escape' && onClose) {

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -28,6 +28,9 @@ export const ExpandableBlock = (props) => {
         onToggle === null || onToggle === void 0 ? void 0 : onToggle(!expanded);
     };
     const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         if (event.key === 'Enter' ||
             event.key === ' ' ||
             event.key === 'Spacebar') {

package/esm/core/List/List.d.ts

@@ -0,0 +1,6 @@
+import type { PolymorphicForwardRefComponent, PolymorphicComponentProps } from '../utils';
+import '@itwin/itwinui-css/css/menu.css';
+export declare const List: PolymorphicForwardRefComponent<"ul", ListOwnProps>;
+declare type ListOwnProps = {};
+export declare type ListProps = PolymorphicComponentProps<'ul', ListOwnProps>;
+export {};

package/esm/core/List/List.js

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/menu.css';
+export const List = React.forwardRef((props, ref) => {
+    const { as: Element = 'ul', className, ...rest } = props;
+    useTheme();
+    return (React.createElement(Element, { className: cx('iui-list', className), ref: ref, role: 'list', ...rest }));
+});

package/esm/core/List/ListItem.d.ts

@@ -0,0 +1,79 @@
+import type { PolymorphicForwardRefComponent, PolymorphicComponentProps } from '../utils';
+import '@itwin/itwinui-css/css/menu.css';
+declare type ListItemOwnProps = {
+    /**
+     * Size of the ListItem. Can be explicitly specified to be 'large',
+     * but if a description is included in addition to the label, then
+     * it will automatically become large.
+     */
+    size?: 'default' | 'large';
+    /**
+     * If true, the ListItem has disabled (dimmed) styling.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the ListItem has active (selected) styling.
+     */
+    active?: boolean;
+    /**
+     * If true, the ListItem will get actionable styling, such as hover styling and cursor.
+     */
+    actionable?: boolean;
+    /**
+     * If true, the ListItem has focus styling.
+     *
+     * By default, focus styling is automatically applied if the item is
+     * focused, or if the item contains a `LinkAction` and it is focused.
+     * This prop is useful for custom focus management (e.g. using `aria-activedescendant`).
+     */
+    focused?: boolean;
+};
+declare type ListItemIconOwnProps = {};
+declare type ListItemContentOwnProps = {};
+declare type ListItemDescriptionOwnProps = {};
+/**
+ * A generic ListItem component that can be used simply for displaying data, or as a base
+ * for the list items in a more complex component (e.g. a custom Select).
+ *
+ * Includes support for left/right icons, multiple lines of text, and hover/focus/active/disabled styling.
+ *
+ * @example
+ * <List>
+ *   <ListItem>item 1</ListItem>
+ *   <ListItem>item 2</ListItem>
+ *   <ListItem>item 3</ListItem>
+ * </List>
+ */
+export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnProps> & {
+    /**
+     * Icon to be placed at the beginning or end of the ListItem.
+     */
+    Icon: PolymorphicForwardRefComponent<"div", ListItemIconOwnProps>;
+    /**
+     * Wrapper for the main content of the ListItem.
+     *
+     * For basic list items, this wrapper is not needed, but it can be useful for two cases:
+     * - When using an end icon. The `ListItem.Content` will fill the available space
+     *   and push the icon to the end
+     * - When using `ListItem.Description`.
+     */
+    Content: PolymorphicForwardRefComponent<"div", ListItemContentOwnProps>;
+    /**
+     * Description to be used in addition to the main label of the ListItem.
+     * Should be used as a child of `ListItem.Content`.
+     *
+     * @example
+     * <ListItem>
+     *  <ListItem.Content>
+     *   <div>some list item</div>
+     *   <ListItem.Description>description for this item</ListItem.Description>
+     *  </ListItem.Content>
+     * </ListItem>
+     */
+    Description: PolymorphicForwardRefComponent<"div", ListItemDescriptionOwnProps>;
+};
+export declare type ListItemProps = PolymorphicComponentProps<'li', ListItemOwnProps>;
+export declare type ListItemIconProps = PolymorphicComponentProps<'li', ListItemIconOwnProps>;
+export declare type ListItemContentProps = PolymorphicComponentProps<'li', ListItemContentOwnProps>;
+export declare type ListItemDescriptionProps = PolymorphicComponentProps<'li', ListItemDescriptionOwnProps>;
+export {};

package/esm/core/List/ListItem.js

@@ -0,0 +1,71 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/menu.css';
+const ListItemComponent = React.forwardRef((props, ref) => {
+    const { as: Element = 'li', size = 'default', disabled = false, active = false, actionable = false, focused = false, className, ...rest } = props;
+    useTheme();
+    return (React.createElement(Element, { className: cx('iui-list-item', className), "data-iui-active": active ? 'true' : undefined, "data-iui-disabled": disabled ? 'true' : undefined, "data-iui-size": size === 'large' ? 'large' : undefined, "data-iui-actionable": actionable ? 'true' : undefined, "data-iui-focused": focused ? 'true' : undefined, ref: ref, ...rest }));
+});
+// ----------------------------------------------------------------------------
+const ListItemIcon = React.forwardRef((props, ref) => {
+    const { as: Element = 'div', className, ...rest } = props;
+    return (React.createElement(Element, { className: cx('iui-list-item-icon', className), ref: ref, ...rest }));
+});
+// ----------------------------------------------------------------------------
+const ListItemContent = React.forwardRef((props, ref) => {
+    const { as: Element = 'div', className, ...rest } = props;
+    return (React.createElement(Element, { className: cx('iui-list-item-content', className), ref: ref, ...rest }));
+});
+// ----------------------------------------------------------------------------
+const ListItemDescription = React.forwardRef((props, ref) => {
+    const { as: Element = 'div', className, ...rest } = props;
+    return (React.createElement(Element, { className: cx('iui-list-item-description', className), ref: ref, ...rest }));
+});
+// ----------------------------------------------------------------------------
+// Exported compound component
+/**
+ * A generic ListItem component that can be used simply for displaying data, or as a base
+ * for the list items in a more complex component (e.g. a custom Select).
+ *
+ * Includes support for left/right icons, multiple lines of text, and hover/focus/active/disabled styling.
+ *
+ * @example
+ * <List>
+ *   <ListItem>item 1</ListItem>
+ *   <ListItem>item 2</ListItem>
+ *   <ListItem>item 3</ListItem>
+ * </List>
+ */
+export const ListItem = Object.assign(ListItemComponent, {
+    /**
+     * Icon to be placed at the beginning or end of the ListItem.
+     */
+    Icon: ListItemIcon,
+    /**
+     * Wrapper for the main content of the ListItem.
+     *
+     * For basic list items, this wrapper is not needed, but it can be useful for two cases:
+     * - When using an end icon. The `ListItem.Content` will fill the available space
+     *   and push the icon to the end
+     * - When using `ListItem.Description`.
+     */
+    Content: ListItemContent,
+    /**
+     * Description to be used in addition to the main label of the ListItem.
+     * Should be used as a child of `ListItem.Content`.
+     *
+     * @example
+     * <ListItem>
+     *  <ListItem.Content>
+     *   <div>some list item</div>
+     *   <ListItem.Description>description for this item</ListItem.Description>
+     *  </ListItem.Content>
+     * </ListItem>
+     */
+    Description: ListItemDescription,
+});

package/esm/core/List/index.d.ts

@@ -0,0 +1,4 @@
+export { List } from './List';
+export type { ListProps } from './List';
+export { ListItem } from './ListItem';
+export type { ListItemProps, ListItemIconProps, ListItemContentProps, ListItemDescriptionProps, } from './ListItem';

package/esm/core/List/index.js

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { List } from './List';
+export { ListItem } from './ListItem';

package/esm/core/Menu/Menu.js

@@ -33,6 +33,9 @@ export const Menu = React.forwardRef((props, ref) => {
         }
     }, [setFocus, focusedIndex, getFocusableNodes]);
     const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         const items = getFocusableNodes();
         if (!(items === null || items === void 0 ? void 0 : items.length)) {
             return;

package/esm/core/Select/Select.js

@@ -97,6 +97,9 @@ export const Select = (props) => {
         }
     }, [isOpen]);
     const onKeyDown = (event, toggle) => {
+        if (event.altKey) {
+            return;
+        }
         switch (event.key) {
             case 'Enter':
             case ' ':

package/esm/core/Stepper/StepperStep.js

@@ -16,6 +16,9 @@ export const StepperStep = (props) => {
         }
     };
     const onKeyDown = (e) => {
+        if (e.altKey) {
+            return;
+        }
         if (!isClickable) {
             return;
         }

package/esm/core/Table/filters/DateRangeFilter/DateRangeFilter.js

@@ -51,6 +51,9 @@ export const DateRangeFilter = (props) => {
         });
     }, []);
     const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         if (event.key === 'Enter') {
             setFilter([from, to]);
         }

package/esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js

@@ -23,6 +23,9 @@ export const NumberRangeFilter = (props) => {
         return !value || isNaN(Number(value)) ? undefined : Number(value);
     };
     const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         if (event.key === 'Enter') {
             setFilter([parseInputValue(from), parseInputValue(to)]);
         }

package/esm/core/Table/filters/TextFilter/TextFilter.js

@@ -14,6 +14,9 @@ export const TextFilter = (props) => {
     useTheme();
     const [text, setText] = React.useState((_a = column.filterValue) !== null && _a !== void 0 ? _a : '');
     const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         if (event.key === 'Enter') {
             setFilter(text);
         }

package/esm/core/TimePicker/TimePicker.js

@@ -220,6 +220,9 @@ const TimePickerColumn = (props) => {
         isSame && (ref === null || ref === void 0 ? void 0 : ref.scrollIntoView({ block: 'nearest', inline: 'nearest' }));
     };
     const handleTimeKeyDown = (event, maxValue, onFocus, onSelect, currentValue) => {
+        if (event.altKey) {
+            return;
+        }
         switch (event.key) {
             case 'ArrowDown':
                 if (currentValue + 1 > maxValue) {

package/esm/core/Tree/Tree.js

@@ -71,6 +71,9 @@ export const Tree = (props) => {
         return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
     }, []);
     const handleKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
         const items = getFocusableNodes();
         if (!(items === null || items === void 0 ? void 0 : items.length)) {
             return;

package/esm/core/Tree/TreeNode.js

@@ -35,6 +35,9 @@ export const TreeNode = (props) => {
     const nodeRef = React.useRef(null);
     const onKeyDown = (event) => {
         var _a, _b, _c, _d, _e, _f;
+        if (event.altKey) {
+            return;
+        }
         const isNodeFocused = nodeRef.current === ((_a = nodeRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement);
         switch (event.key) {
             case 'ArrowLeft': {

package/esm/core/index.d.ts

@@ -40,6 +40,8 @@ export { Footer, defaultFooterElements } from './Footer';
 export type { FooterProps, FooterElement, TitleTranslations } from './Footer';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export type { HeaderProps, HeaderBreadcrumbsProps, HeaderButtonProps, HeaderLogoProps, } from './Header';
+export { List, ListItem } from './List';
+export type { ListProps, ListItemProps, ListItemIconProps, ListItemContentProps, ListItemDescriptionProps, } from './List';
 export { VerticalTabs, Tabs, Tab, HorizontalTabs } from './Tabs';
 export type { VerticalTabsProps, TabProps, HorizontalTabsProps } from './Tabs';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';

package/esm/core/index.js

@@ -23,6 +23,7 @@ export { Fieldset } from './Fieldset';
 export { FileUpload, FileUploadTemplate, FileUploadCard, FileEmptyCard, } from './FileUpload';
 export { Footer, defaultFooterElements } from './Footer';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
+export { List, ListItem } from './List';
 export { VerticalTabs, Tabs, Tab, HorizontalTabs } from './Tabs';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';
 export { Input } from './Input';

package/esm/core/utils/components/Popover.js

@@ -42,7 +42,7 @@ export const Popover = React.forwardRef((props, ref) => {
         arrow: false,
         duration: 0,
         interactive: true,
-        role: undefined,
+        role: '',
         offset: [0, 0],
         maxWidth: '',
         zIndex: 99999,
@@ -97,6 +97,9 @@ export const hideOnEscOrTab = {
             return !descendents.some((el) => (el === null || el === void 0 ? void 0 : el.tabIndex) >= 0);
         };
         const onKeyDown = (event) => {
+            if (event.altKey) {
+                return;
+            }
             switch (event.key) {
                 case 'Escape':
                     instance.hide();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.8.2",
+  "version": "2.9.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -62,7 +62,7 @@
     "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\""
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^1.9.0",
+    "@itwin/itwinui-css": "^1.10.0",
     "@itwin/itwinui-illustrations-react": "^2.0.0",
     "@itwin/itwinui-variables": "^2.0.0",
     "@tippyjs/react": "^4.2.6",