@itwin/itwinui-react 2.10.0 → 2.11.0

package/esm/core/Carousel/CarouselSlide.js

@@ -2,10 +2,10 @@
  * 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 * as React from 'react';
 import cx from 'classnames';
-import { useIntersection, useMergedRefs } from '../utils';
-import { CarouselContext } from './CarouselContext';
+import { useIntersection, useMergedRefs } from '../utils/index.js';
+import { CarouselContext } from './CarouselContext.js';
 /**
  * `CarouselSlide` is used for the actual slide content. The content can be specified through `children`.
  *

package/esm/core/Carousel/CarouselSlider.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */

package/esm/core/Carousel/CarouselSlider.js

@@ -2,10 +2,10 @@
  * 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 * as React from 'react';
 import cx from 'classnames';
-import { CarouselContext } from './CarouselContext';
-import { getWindow, useMergedRefs, useIsomorphicLayoutEffect } from '../utils';
+import { CarouselContext } from './CarouselContext.js';
+import { getWindow, useMergedRefs, useIsomorphicLayoutEffect, } from '../utils/index.js';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */

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

@@ -1,4 +1,4 @@
-export { Carousel } from './Carousel';
-export type { CarouselProps } from './Carousel';
+export { Carousel } from './Carousel.js';
+export type { CarouselProps } from './Carousel.js';
 declare const _default: "./Carousel";
 export default _default;

package/esm/core/Carousel/index.js

@@ -2,5 +2,5 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { Carousel } from './Carousel';
+export { Carousel } from './Carousel.js';
 export default './Carousel';

package/esm/core/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import '@itwin/itwinui-css/css/checkbox.css';
 export declare type CheckboxProps = {
     /**

package/esm/core/Checkbox/Checkbox.js

@@ -3,9 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
-import React from 'react';
-import { ProgressRadial } from '../ProgressIndicators';
-import { useMergedRefs, useTheme } from '../utils';
+import * as React from 'react';
+import { ProgressRadial } from '../ProgressIndicators/index.js';
+import { useMergedRefs, useTheme } from '../utils/index.js';
 import '@itwin/itwinui-css/css/checkbox.css';
 /**
  * Simple input checkbox

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

@@ -1,4 +1,4 @@
-export { Checkbox } from './Checkbox';
-export type { CheckboxProps } from './Checkbox';
+export { Checkbox } from './Checkbox.js';
+export type { CheckboxProps } from './Checkbox.js';
 declare const _default: "./Checkbox";
 export default _default;

package/esm/core/Checkbox/index.js

@@ -2,5 +2,5 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { Checkbox } from './Checkbox';
+export { Checkbox } from './Checkbox.js';
 export default './Checkbox';

package/esm/core/ColorPicker/ColorBuilder.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { CommonProps } from '../utils';
+import * as React from 'react';
+import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/color-picker.css';
 export declare type ColorBuilderProps = Omit<CommonProps, 'title'>;
 /**

package/esm/core/ColorPicker/ColorBuilder.js

@@ -2,12 +2,12 @@
  * 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 * as React from 'react';
 import cx from 'classnames';
-import { ColorValue, getBoundedValue, useEventListener, useMergedRefs, useTheme, } from '../utils';
-import { Slider } from '../Slider';
+import { ColorValue, getBoundedValue, useEventListener, useMergedRefs, useTheme, } from '../utils/index.js';
+import { Slider } from '../Slider/index.js';
 import '@itwin/itwinui-css/css/color-picker.css';
-import { useColorPickerContext } from './ColorPickerContext';
+import { useColorPickerContext } from './ColorPickerContext.js';
 const getVerticalPercentageOfRectangle = (rect, pointer) => {
     const position = getBoundedValue(pointer, rect.top, rect.bottom);
     return ((position - rect.top) / rect.height) * 100;

package/esm/core/ColorPicker/ColorInputPanel.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { CommonProps } from '../utils';
+import * as React from 'react';
+import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/color-picker.css';
 export declare type ColorInputPanelProps = {
     /**

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -2,12 +2,12 @@
  * 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 * as React from 'react';
 import cx from 'classnames';
-import { IconButton } from '../Buttons';
-import { Input } from '../Input';
-import { ColorValue, InputContainer, useTheme, SvgSwap, } from '../utils';
-import { useColorPickerContext } from './ColorPickerContext';
+import { IconButton } from '../Buttons/index.js';
+import { Input } from '../Input/index.js';
+import { ColorValue, InputContainer, useTheme, SvgSwap, } from '../utils/index.js';
+import { useColorPickerContext } from './ColorPickerContext.js';
 import '@itwin/itwinui-css/css/color-picker.css';
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.

package/esm/core/ColorPicker/ColorPalette.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
-import { ColorType, ColorValue, CommonProps } from '../utils';
+import * as React from 'react';
+import { ColorValue } from '../utils/index.js';
+import type { CommonProps, ColorType } from '../utils/index.js';
 import '@itwin/itwinui-css/css/color-picker.css';
 export declare type ColorPaletteProps = {
     /**

package/esm/core/ColorPicker/ColorPalette.js

@@ -2,12 +2,12 @@
  * 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 * as React from 'react';
 import cx from 'classnames';
-import { getFocusableElements, useMergedRefs, useTheme, } from '../utils';
-import { getColorValue } from './ColorPicker';
-import { ColorSwatch } from './ColorSwatch';
-import { useColorPickerContext } from './ColorPickerContext';
+import { ColorValue, getFocusableElements, useMergedRefs, useTheme, } from '../utils/index.js';
+import { getColorValue } from './ColorPicker.js';
+import { ColorSwatch } from './ColorSwatch.js';
+import { useColorPickerContext } from './ColorPickerContext.js';
 import '@itwin/itwinui-css/css/color-picker.css';
 /**
  * `ColorPalette` is used to show a group of `ColorSwatch` components.

package/esm/core/ColorPicker/ColorPicker.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
+import * as React from 'react';
 import '@itwin/itwinui-css/css/color-picker.css';
-import { CommonProps, ColorType, ColorValue } from '../utils';
+import { ColorValue } from '../utils/index.js';
+import type { CommonProps, ColorType } from '../utils/index.js';
 export declare const getColorValue: (color: ColorType | ColorValue | undefined) => ColorValue;
 export declare type ColorPickerProps = {
     /**

package/esm/core/ColorPicker/ColorPicker.js

@@ -2,11 +2,11 @@
  * 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 * as React from 'react';
 import '@itwin/itwinui-css/css/color-picker.css';
-import { useTheme, ColorValue, getTabbableElements, } from '../utils';
+import { useTheme, ColorValue, getTabbableElements } from '../utils/index.js';
 import cx from 'classnames';
-import { ColorPickerContext } from './ColorPickerContext';
+import { ColorPickerContext } from './ColorPickerContext.js';
 export const getColorValue = (color) => {
     if (color instanceof ColorValue) {
         return color;

package/esm/core/ColorPicker/ColorPickerContext.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { ColorValue, HsvColor } from '../utils';
+import * as React from 'react';
+import type { ColorValue, HsvColor } from '../utils/index.js';
 export declare const ColorPickerContext: React.Context<{
     activeColor: ColorValue;
     setActiveColor: (color: ColorValue | ((prevColor: ColorValue) => ColorValue)) => void;

package/esm/core/ColorPicker/ColorPickerContext.js

@@ -2,7 +2,7 @@
  * 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 * as React from 'react';
 export const ColorPickerContext = React.createContext(undefined);
 export const useColorPickerContext = () => {
     const context = React.useContext(ColorPickerContext);

package/esm/core/ColorPicker/ColorSwatch.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
+import * as React from 'react';
 import '@itwin/itwinui-css/css/color-picker.css';
-import { ColorValue, ColorType } from '../utils';
+import { ColorValue } from '../utils/index.js';
+import type { ColorType } from '../utils/index.js';
 export declare type ColorSwatchProps = {
     /**
      * Color code.

package/esm/core/ColorPicker/ColorSwatch.js

@@ -2,11 +2,11 @@
  * 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 * as React from 'react';
 import cx from 'classnames';
 import '@itwin/itwinui-css/css/color-picker.css';
-import { useTheme } from '../utils';
-import { getColorValue } from './ColorPicker';
+import { useTheme, ColorValue } from '../utils/index.js';
+import { getColorValue } from './ColorPicker.js';
 /**
  * ColorSwatch component to display within a color palette.
  * @example

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

@@ -1,12 +1,12 @@
-export { ColorPicker } from './ColorPicker';
-export type { ColorPickerProps } from './ColorPicker';
+export { ColorPicker } from './ColorPicker.js';
+export type { ColorPickerProps } from './ColorPicker.js';
 declare const _default: "./ColorPicker";
 export default _default;
-export { ColorSwatch } from './ColorSwatch';
-export type { ColorSwatchProps } from './ColorSwatch';
-export { ColorPalette } from './ColorPalette';
-export type { ColorPaletteProps } from './ColorPalette';
-export { ColorBuilder } from './ColorBuilder';
-export type { ColorBuilderProps } from './ColorBuilder';
-export { ColorInputPanel } from './ColorInputPanel';
-export type { ColorInputPanelProps } from './ColorInputPanel';
+export { ColorSwatch } from './ColorSwatch.js';
+export type { ColorSwatchProps } from './ColorSwatch.js';
+export { ColorPalette } from './ColorPalette.js';
+export type { ColorPaletteProps } from './ColorPalette.js';
+export { ColorBuilder } from './ColorBuilder.js';
+export type { ColorBuilderProps } from './ColorBuilder.js';
+export { ColorInputPanel } from './ColorInputPanel.js';
+export type { ColorInputPanelProps } from './ColorInputPanel.js';

package/esm/core/ColorPicker/index.js

@@ -2,9 +2,9 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { ColorPicker } from './ColorPicker';
+export { ColorPicker } from './ColorPicker.js';
 export default './ColorPicker';
-export { ColorSwatch } from './ColorSwatch';
-export { ColorPalette } from './ColorPalette';
-export { ColorBuilder } from './ColorBuilder';
-export { ColorInputPanel } from './ColorInputPanel';
+export { ColorSwatch } from './ColorSwatch.js';
+export { ColorPalette } from './ColorPalette.js';
+export { ColorBuilder } from './ColorBuilder.js';
+export { ColorInputPanel } from './ColorInputPanel.js';

package/esm/core/ComboBox/ComboBox.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { InputProps } from '../Input';
-import { SelectOption } from '../Select';
-import { PopoverProps, CommonProps, InputContainerProps } from '../utils';
+import * as React from 'react';
+import type { InputProps } from '../Input/index.js';
+import type { SelectOption } from '../Select/index.js';
+import type { PopoverProps, CommonProps, InputContainerProps } from '../utils/index.js';
 import 'tippy.js/animations/shift-away.css';
 declare type ActionType = 'added' | 'removed';
 declare type MultipleOnChangeProps<T> = {

package/esm/core/ComboBox/ComboBox.js

@@ -2,20 +2,20 @@
  * 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 * as React from 'react';
 import cx from 'classnames';
-import { MenuExtraContent } from '../Menu';
-import SelectTag from '../Select/SelectTag';
-import { Text } from '../Typography';
-import { useTheme, getRandomValue, mergeRefs, useLatestRef, useIsomorphicLayoutEffect, } from '../utils';
+import { MenuExtraContent } from '../Menu/index.js';
+import SelectTag from '../Select/SelectTag.js';
+import { Text } from '../Typography/index.js';
+import { useTheme, getRandomValue, mergeRefs, useLatestRef, useIsomorphicLayoutEffect, AutoclearingHiddenLiveRegion, } from '../utils/index.js';
 import 'tippy.js/animations/shift-away.css';
-import { ComboBoxActionContext, comboBoxReducer, ComboBoxRefsContext, ComboBoxStateContext, } from './helpers';
-import { ComboBoxDropdown } from './ComboBoxDropdown';
-import { ComboBoxEndIcon } from './ComboBoxEndIcon';
-import { ComboBoxInput } from './ComboBoxInput';
-import { ComboBoxInputContainer } from './ComboBoxInputContainer';
-import { ComboBoxMenu } from './ComboBoxMenu';
-import { ComboBoxMenuItem } from './ComboBoxMenuItem';
+import { ComboBoxActionContext, comboBoxReducer, ComboBoxRefsContext, ComboBoxStateContext, } from './helpers.js';
+import { ComboBoxDropdown } from './ComboBoxDropdown.js';
+import { ComboBoxEndIcon } from './ComboBoxEndIcon.js';
+import { ComboBoxInput } from './ComboBoxInput.js';
+import { ComboBoxInputContainer } from './ComboBoxInputContainer.js';
+import { ComboBoxMenu } from './ComboBoxMenu.js';
+import { ComboBoxMenuItem } from './ComboBoxMenuItem.js';
 // Type guard for enabling multiple
 const isMultipleEnabled = (variable, multiple) => {
     return multiple && (Array.isArray(variable) || variable === undefined);
@@ -140,6 +140,7 @@ export const ComboBox = (props) => {
     }, [options]);
     // Filter options based on input value
     const [inputValue, setInputValue] = React.useState((_b = (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.value) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '');
+    const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
     const handleOnInput = React.useCallback((event) => {
         var _a, _b;
         const { value } = event.currentTarget;
@@ -224,6 +225,11 @@ export const ComboBox = (props) => {
             const newArray = selectedChangeHandler(__originalIndex, actionType);
             dispatch({ type: 'multiselect', value: newArray });
             onChangeHandler(__originalIndex, actionType, newArray);
+            // update live region
+            setLiveRegionSelection(newArray
+                .map((item) => { var _a; return (_a = optionsRef.current[item]) === null || _a === void 0 ? void 0 : _a.label; })
+                .filter(Boolean)
+                .join(', '));
         }
         else {
             dispatch({ type: 'select', value: __originalIndex });
@@ -302,7 +308,8 @@ export const ComboBox = (props) => {
                                     return (React.createElement(SelectTag, { key: item.label, label: item.label }));
                                 })
                                 : undefined })),
-                    React.createElement(ComboBoxEndIcon, { disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, isOpen: isOpen })),
+                    React.createElement(ComboBoxEndIcon, { disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, isOpen: isOpen }),
+                    multiple ? (React.createElement(AutoclearingHiddenLiveRegion, { text: liveRegionSelection })) : null),
                 React.createElement(ComboBoxDropdown, { ...dropdownMenuProps, onShow: onShow, onHide: onHide },
                     React.createElement(ComboBoxMenu, null, filteredOptions.length > 0 && !enableVirtualization
                         ? filteredOptions.map(getMenuItem)

package/esm/core/ComboBox/ComboBoxDropdown.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { PopoverProps } from '../utils';
+import * as React from 'react';
+import type { PopoverProps } from '../utils/index.js';
 declare type ComboBoxDropdownProps = PopoverProps & {
     children: JSX.Element;
 };

package/esm/core/ComboBox/ComboBoxDropdown.js

@@ -2,9 +2,9 @@
  * 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 { Popover, useSafeContext } from '../utils';
-import { ComboBoxStateContext, ComboBoxActionContext, ComboBoxRefsContext, } from './helpers';
+import * as React from 'react';
+import { Popover, useSafeContext } from '../utils/index.js';
+import { ComboBoxStateContext, ComboBoxActionContext, ComboBoxRefsContext, } from './helpers.js';
 export const ComboBoxDropdown = React.forwardRef((props, forwardedRef) => {
     const { children, ...rest } = props;
     const { isOpen } = useSafeContext(ComboBoxStateContext);

package/esm/core/ComboBox/ComboBoxEndIcon.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const ComboBoxEndIcon: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
     disabled?: boolean | undefined;
     isOpen?: boolean | undefined;

package/esm/core/ComboBox/ComboBoxEndIcon.js

@@ -3,9 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
-import React from 'react';
-import { useSafeContext, useMergedRefs, SvgCaretDownSmall } from '../utils';
-import { ComboBoxActionContext, ComboBoxRefsContext } from './helpers';
+import * as React from 'react';
+import { useSafeContext, useMergedRefs, SvgCaretDownSmall, } from '../utils/index.js';
+import { ComboBoxActionContext, ComboBoxRefsContext } from './helpers.js';
 export const ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
     const { className, children, onClick: onClickProp, disabled, isOpen, ...rest } = props;
     const dispatch = useSafeContext(ComboBoxActionContext);

package/esm/core/ComboBox/ComboBoxInput.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const ComboBoxInput: React.ForwardRefExoticComponent<{
     selectTags?: JSX.Element[] | undefined;
 } & {

package/esm/core/ComboBox/ComboBoxInput.js

@@ -2,11 +2,11 @@
  * 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 { Input } from '../Input';
-import { useSafeContext, useMergedRefs, useContainerWidth } from '../utils';
-import { ComboBoxMultipleContainer } from './ComboBoxMultipleContainer';
-import { ComboBoxStateContext, ComboBoxActionContext, ComboBoxRefsContext, } from './helpers';
+import * as React from 'react';
+import { Input } from '../Input/index.js';
+import { useSafeContext, useMergedRefs, useContainerWidth, } from '../utils/index.js';
+import { ComboBoxMultipleContainer } from './ComboBoxMultipleContainer.js';
+import { ComboBoxStateContext, ComboBoxActionContext, ComboBoxRefsContext, } from './helpers.js';
 export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     const { onKeyDown: onKeyDownProp, onFocus: onFocusProp, onClick: onClickProp, selectTags, ...rest } = props;
     const { isOpen, id, focusedIndex, enableVirtualization, multiple, onClickHandler, } = useSafeContext(ComboBoxStateContext);
@@ -137,7 +137,7 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     return (React.createElement(React.Fragment, null,
         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 }))));
+                : undefined, role: 'combobox', "aria-controls": isOpen ? `${id}-list` : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off', style: multiple ? { paddingLeft: tagContainerWidth + 18 } : {}, "aria-describedby": multiple ? `${id}-selected-live` : undefined, ...rest }),
+        multiple && selectTags ? (React.createElement(ComboBoxMultipleContainer, { ref: tagContainerWidthRef, selectedItems: selectTags, id: `${id}-selected-live` })) : null));
 });
 ComboBoxInput.displayName = 'ComboBoxInput';

package/esm/core/ComboBox/ComboBoxInputContainer.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { InputContainerProps } from '../utils';
+import * as React from 'react';
+import type { InputContainerProps } from '../utils/index.js';
 declare type ComboBoxInputContainerProps = React.ComponentPropsWithoutRef<'div'> & Pick<InputContainerProps, 'status' | 'message' | 'disabled'>;
 export declare const ComboBoxInputContainer: {
     (props: ComboBoxInputContainerProps): JSX.Element;

package/esm/core/ComboBox/ComboBoxInputContainer.js

@@ -2,10 +2,10 @@
  * 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 { StatusMessage } from '../StatusMessage';
-import { InputContainer, useSafeContext } from '../utils';
-import { ComboBoxStateContext } from './helpers';
+import * as React from 'react';
+import { StatusMessage } from '../StatusMessage/index.js';
+import { InputContainer, useSafeContext } from '../utils/index.js';
+import { ComboBoxStateContext } from './helpers.js';
 export const ComboBoxInputContainer = (props) => {
     const { className, status, message, children, ...rest } = props;
     const { id } = useSafeContext(ComboBoxStateContext);

package/esm/core/ComboBox/ComboBoxMenu.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import { MenuProps } from '../Menu';
+import * as React from 'react';
+import type { MenuProps } from '../Menu/index.js';
 export declare const ComboBoxMenu: React.ForwardRefExoticComponent<Omit<MenuProps, "onClick"> & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof React.HTMLAttributes<HTMLUListElement>> & React.RefAttributes<HTMLUListElement>>;

package/esm/core/ComboBox/ComboBoxMenu.js

@@ -3,11 +3,11 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
-import React from 'react';
-import { Menu } from '../Menu';
-import { Surface } from '../Surface';
-import { useSafeContext, useMergedRefs, useVirtualization, mergeRefs, getWindow, } from '../utils';
-import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers';
+import * as React from 'react';
+import { Menu } from '../Menu/index.js';
+import { Surface } from '../Surface/index.js';
+import { useSafeContext, useMergedRefs, useVirtualization, mergeRefs, getWindow, } from '../utils/index.js';
+import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers.js';
 const isOverflowOverlaySupported = () => { var _a, _b, _c; return (_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, 'overflow: overlay'); };
 const VirtualizedComboBoxMenu = React.forwardRef(({ children, className, style, ...rest }, forwardedRef) => {
     const { minWidth, id, filteredOptions, getMenuItem, focusedIndex } = useSafeContext(ComboBoxStateContext);

package/esm/core/ComboBox/ComboBoxMenuItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const ComboBoxMenuItem: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
     isSelected?: boolean | undefined;
     disabled?: boolean | undefined;
@@ -16,6 +16,6 @@ export declare const ComboBoxMenuItem: React.MemoExoticComponent<React.ForwardRe
     id?: string | undefined;
 } & {
     style?: React.CSSProperties | undefined;
-} & import("../utils").ClassNameProps & {
+} & import("../utils/props.js").ClassNameProps & {
     index: number;
 } & React.RefAttributes<HTMLLIElement>>>;

package/esm/core/ComboBox/ComboBoxMenuItem.js

@@ -3,9 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
-import React from 'react';
-import { useSafeContext, useMergedRefs } from '../utils';
-import { ComboBoxStateContext } from './helpers';
+import * as React from 'react';
+import { useSafeContext, useMergedRefs } from '../utils/index.js';
+import { ComboBoxStateContext } from './helpers.js';
 export const ComboBoxMenuItem = React.memo(React.forwardRef((props, forwardedRef) => {
     const { children, isSelected, disabled, value, onClick, sublabel, size = !!sublabel ? 'large' : 'default', icon, badge, className, role = 'option', index, ...rest } = props;
     const { focusedIndex, enableVirtualization } = useSafeContext(ComboBoxStateContext);

package/esm/core/ComboBox/ComboBoxMultipleContainer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const ComboBoxMultipleContainer: React.ForwardRefExoticComponent<{
     selectedItems?: React.ReactNode[] | undefined;
 } & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "children"> & React.RefAttributes<HTMLDivElement>>;

package/esm/core/ComboBox/ComboBoxMultipleContainer.js

@@ -2,8 +2,8 @@
  * 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 SelectTagContainer from '../Select/SelectTagContainer';
+import * as React from 'react';
+import SelectTagContainer from '../Select/SelectTagContainer.js';
 export const ComboBoxMultipleContainer = React.forwardRef((props, ref) => {
     const { selectedItems = [], ...rest } = props;
     return React.createElement(SelectTagContainer, { ref: ref, tags: selectedItems, ...rest });

package/esm/core/ComboBox/helpers.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { SelectOption } from '../Select/Select';
+import * as React from 'react';
+import type { SelectOption } from '../Select/Select.js';
 declare type ComboBoxAction = {
     type: 'multiselect';
     value: number[];

package/esm/core/ComboBox/helpers.js

@@ -2,7 +2,7 @@
  * 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 * as React from 'react';
 export const comboBoxReducer = (state, action) => {
     var _a, _b, _c, _d, _e;
     switch (action.type) {

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

@@ -1,4 +1,4 @@
-export { ComboBox } from './ComboBox';
-export type { ComboBoxProps } from './ComboBox';
+export { ComboBox } from './ComboBox.js';
+export type { ComboBoxProps } from './ComboBox.js';
 declare const _default: "./ComboBox";
 export default _default;

package/esm/core/ComboBox/index.js

@@ -2,5 +2,5 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { ComboBox } from './ComboBox';
+export { ComboBox } from './ComboBox.js';
 export default './ComboBox';

package/esm/core/DatePicker/DatePicker.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import '@itwin/itwinui-css/css/date-picker.css';
-import { TimePickerProps } from '../TimePicker';
+import type { TimePickerProps } from '../TimePicker/index.js';
 /**
  * Generate localized months and days strings using `Intl.DateTimeFormat` for passed locale to use in DatePicker component.
  * If locale is not passed, browser locale will be used.