@itwin/itwinui-react 2.10.0 → 2.11.0

package/esm/core/Tabs/Tab.js

@@ -3,8 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
-import React from 'react';
-import { useTheme } from '../utils';
+import * as React from 'react';
+import { useTheme } from '../utils/index.js';
 import '@itwin/itwinui-css/css/tabs.css';
 /**
  * Individual tab component to be used in the `labels` prop of `Tabs`.

package/esm/core/Tabs/Tabs.d.ts

@@ -1,5 +1,29 @@
-import React from 'react';
+import * as React from 'react';
 import '@itwin/itwinui-css/css/tabs.css';
+export declare type OverflowOptions = {
+    /**
+     * Whether to allow tabs list to scroll when there is overflow,
+     * i.e. when there is not enough space to fit all the tabs.
+     *
+     * Not applicable to types `pill` and `borderless`.
+     */
+    useOverflow?: boolean;
+};
+declare type TabsOverflowProps = {
+    /**
+     * Options that can be specified to deal with tabs overflowing the allotted space.
+     */
+    overflowOptions?: OverflowOptions;
+    /**
+     * Type of the tabs.
+     *
+     * If `orientation = 'vertical'`, `pill` is not applicable.
+     * @default 'default'
+     */
+    type?: 'default';
+} | {
+    type: 'pill' | 'borderless';
+};
 declare type TabsOrientationProps = {
     /**
      * Orientation of the tabs.
@@ -75,7 +99,7 @@ export declare type TabsProps = {
      * Content inside the tab panel.
      */
     children?: React.ReactNode;
-} & TabsOrientationProps & TabsTypeProps;
+} & TabsOrientationProps & TabsTypeProps & TabsOverflowProps;
 /**
  * @deprecated Since v2, use `TabProps` with `Tabs`
  */

package/esm/core/Tabs/Tabs.js

@@ -3,10 +3,10 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
-import React from 'react';
-import { useTheme, useMergedRefs, getBoundedValue, useContainerWidth, useIsomorphicLayoutEffect, useIsClient, } from '../utils';
+import * as React from 'react';
+import { useTheme, useMergedRefs, getBoundedValue, useContainerWidth, useIsomorphicLayoutEffect, useIsClient, useResizeObserver, } from '../utils/index.js';
 import '@itwin/itwinui-css/css/tabs.css';
-import { Tab } from './Tab';
+import { Tab } from './Tab.js';
 /**
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
@@ -42,6 +42,15 @@ export const Tabs = (props) => {
         props = { ...props };
         delete props.actions;
     }
+    // Separate overflowOptions from props to avoid adding it to the DOM (using {...rest})
+    let overflowOptions;
+    if (props.type !== 'borderless' &&
+        props.type !== 'pill' &&
+        props.overflowOptions) {
+        overflowOptions = props.overflowOptions;
+        props = { ...props };
+        delete props.overflowOptions;
+    }
     const { labels, activeIndex, onTabSelected, focusActivationMode = 'auto', type = 'default', color = 'blue', orientation = 'horizontal', tabsClassName, contentClassName, wrapperClassName, children, ...rest } = props;
     useTheme();
     const isClient = useIsClient();
@@ -87,12 +96,178 @@ export const Tabs = (props) => {
         setHasSublabel(type !== 'pill' && // pill tabs should never have sublabels
             !!((_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.iui-tab-description')));
     }, [type]);
-    const onTabClick = (index) => {
+    const enableHorizontalScroll = React.useCallback((e) => {
+        var _a;
+        const ownerDoc = tablistRef.current;
+        if (ownerDoc === null) {
+            return;
+        }
+        let scrollLeft = (_a = ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.scrollLeft) !== null && _a !== void 0 ? _a : 0;
+        if (e.deltaY > 0 || e.deltaX > 0) {
+            scrollLeft += 25;
+        }
+        else if (e.deltaY < 0 || e.deltaX < 0) {
+            scrollLeft -= 25;
+        }
+        ownerDoc.scrollLeft = scrollLeft;
+    }, []);
+    // allow normal mouse wheels to scroll horizontally for horizontal overflow
+    React.useEffect(() => {
+        const ownerDoc = tablistRef.current;
+        if (ownerDoc === null) {
+            return;
+        }
+        if (!(overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow) || orientation === 'vertical') {
+            ownerDoc.removeEventListener('wheel', enableHorizontalScroll);
+            return;
+        }
+        ownerDoc.addEventListener('wheel', enableHorizontalScroll);
+    }, [overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow, orientation, enableHorizontalScroll]);
+    const isTabHidden = (activeTab, isVertical) => {
+        const ownerDoc = tablistRef.current;
+        if (ownerDoc === null) {
+            return;
+        }
+        const fadeBuffer = isVertical
+            ? ownerDoc.offsetHeight * 0.05
+            : ownerDoc.offsetWidth * 0.05;
+        const visibleStart = isVertical ? ownerDoc.scrollTop : ownerDoc.scrollLeft;
+        const visibleEnd = isVertical
+            ? ownerDoc.scrollTop + ownerDoc.offsetHeight
+            : ownerDoc.scrollLeft + ownerDoc.offsetWidth;
+        const tabStart = isVertical ? activeTab.offsetTop : activeTab.offsetLeft;
+        const tabEnd = isVertical
+            ? activeTab.offsetTop + activeTab.offsetHeight
+            : activeTab.offsetLeft + activeTab.offsetWidth;
+        if (tabStart > visibleStart + fadeBuffer &&
+            tabEnd < visibleEnd - fadeBuffer) {
+            return 0; // tab is visible
+        }
+        else if (tabStart < visibleStart + fadeBuffer) {
+            return -1; // tab is before visible section
+        }
+        else {
+            return 1; // tab is after visible section
+        }
+    };
+    const easeInOutQuad = (time, beginning, change, duration) => {
+        if ((time /= duration / 2) < 1) {
+            return (change / 2) * time * time + beginning;
+        }
+        return (-change / 2) * (--time * (time - 2) - 1) + beginning;
+    };
+    const scrollToTab = React.useCallback((list, activeTab, duration, isVertical, tabPlacement) => {
+        const start = isVertical ? list.scrollTop : list.scrollLeft;
+        let change = 0;
+        let currentTime = 0;
+        const increment = 20;
+        const fadeBuffer = isVertical
+            ? list.offsetHeight * 0.05
+            : list.offsetWidth * 0.05;
+        if (tabPlacement < 0) {
+            // if tab is before visible section
+            change = isVertical
+                ? activeTab.offsetTop - list.scrollTop
+                : activeTab.offsetLeft - list.scrollLeft;
+            change -= fadeBuffer; // give some space so the active tab isn't covered by the fade
+        }
+        else {
+            // tab is after visible section
+            change = isVertical
+                ? activeTab.offsetTop -
+                    (list.scrollTop + list.offsetHeight) +
+                    activeTab.offsetHeight
+                : activeTab.offsetLeft -
+                    (list.scrollLeft + list.offsetWidth) +
+                    activeTab.offsetWidth;
+            change += fadeBuffer; // give some space so the active tab isn't covered by the fade
+        }
+        const animateScroll = () => {
+            currentTime += increment;
+            const val = easeInOutQuad(currentTime, start, change, duration);
+            if (isVertical) {
+                list.scrollTop = val;
+            }
+            else {
+                list.scrollLeft = val;
+            }
+            if (currentTime < duration) {
+                setTimeout(animateScroll, increment);
+            }
+        };
+        animateScroll();
+    }, []);
+    // scroll to active tab if it is not visible with overflow
+    useIsomorphicLayoutEffect(() => {
+        setTimeout(() => {
+            const ownerDoc = tablistRef.current;
+            if (ownerDoc !== null &&
+                (overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow) &&
+                currentActiveIndex !== undefined) {
+                const activeTab = ownerDoc.querySelectorAll('.iui-tab')[currentActiveIndex];
+                const isVertical = orientation === 'vertical';
+                const tabPlacement = isTabHidden(activeTab, isVertical);
+                if (tabPlacement) {
+                    scrollToTab(ownerDoc, activeTab, 100, isVertical, tabPlacement);
+                }
+            }
+        }, 50);
+    }, [
+        overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow,
+        currentActiveIndex,
+        focusedIndex,
+        orientation,
+        scrollToTab,
+    ]);
+    const [scrollingPlacement, setScrollingPlacement] = React.useState(undefined);
+    const determineScrollingPlacement = React.useCallback(() => {
+        const ownerDoc = tablistRef.current;
+        if (ownerDoc === null) {
+            return;
+        }
+        const isVertical = orientation === 'vertical';
+        const visibleStart = isVertical ? ownerDoc.scrollTop : ownerDoc.scrollLeft;
+        const visibleEnd = isVertical
+            ? ownerDoc.scrollTop + ownerDoc.offsetHeight
+            : ownerDoc.scrollLeft + ownerDoc.offsetWidth;
+        const totalTabsSpace = isVertical
+            ? ownerDoc.scrollHeight
+            : ownerDoc.scrollWidth;
+        if (Math.abs(visibleStart - 0) < 1 &&
+            Math.abs(visibleEnd - totalTabsSpace) < 1) {
+            setScrollingPlacement(undefined);
+        }
+        else if (Math.abs(visibleStart - 0) < 1) {
+            setScrollingPlacement('start');
+        }
+        else if (Math.abs(visibleEnd - totalTabsSpace) < 1) {
+            setScrollingPlacement('end');
+        }
+        else {
+            setScrollingPlacement('center');
+        }
+    }, [orientation, setScrollingPlacement]);
+    // apply correct mask when tabs list is resized
+    const [resizeRef] = useResizeObserver(determineScrollingPlacement);
+    resizeRef(tablistRef === null || tablistRef === void 0 ? void 0 : tablistRef.current);
+    // check if overflow tabs are scrolled to far edges
+    React.useEffect(() => {
+        const ownerDoc = tablistRef.current;
+        if (ownerDoc === null) {
+            return;
+        }
+        if (!(overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow)) {
+            ownerDoc.removeEventListener('scroll', determineScrollingPlacement);
+            return;
+        }
+        ownerDoc.addEventListener('scroll', determineScrollingPlacement);
+    }, [overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow, determineScrollingPlacement]);
+    const onTabClick = React.useCallback((index) => {
         if (onTabSelected) {
             onTabSelected(index);
         }
         setCurrentActiveIndex(index);
-    };
+    }, [onTabSelected]);
     const onKeyDown = (event) => {
         // alt + arrow keys are used by browser / assistive technologies
         if (event.altKey) {
@@ -153,32 +328,33 @@ export const Tabs = (props) => {
                 break;
         }
     };
+    const createTab = React.useCallback((label, index) => {
+        const onClick = () => {
+            setFocusedIndex(index);
+            onTabClick(index);
+        };
+        return (React.createElement("li", { key: index }, !React.isValidElement(label) ? (React.createElement(Tab, { label: label, className: cx({
+                'iui-active': index === currentActiveIndex,
+            }), tabIndex: index === currentActiveIndex ? 0 : -1, onClick: onClick, "aria-selected": index === currentActiveIndex })) : (React.cloneElement(label, {
+            className: cx(label.props.className, {
+                'iui-active': index === currentActiveIndex,
+            }),
+            'aria-selected': index === currentActiveIndex,
+            tabIndex: index === currentActiveIndex ? 0 : -1,
+            onClick: (args) => {
+                var _a, _b;
+                onClick();
+                (_b = (_a = label.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, args);
+            },
+        }))));
+    }, [currentActiveIndex, onTabClick]);
     return (React.createElement("div", { className: cx('iui-tabs-wrapper', `iui-${orientation}`, wrapperClassName), style: stripeProperties },
         React.createElement("ul", { className: cx('iui-tabs', `iui-${type}`, {
                 'iui-green': color === 'green',
                 'iui-animated': type !== 'default' && isClient,
                 'iui-not-animated': type !== 'default' && !isClient,
                 'iui-large': hasSublabel,
-            }, tabsClassName), role: 'tablist', ref: refs, onKeyDown: onKeyDown, ...rest }, labels.map((label, index) => {
-            const onClick = () => {
-                setFocusedIndex(index);
-                onTabClick(index);
-            };
-            return (React.createElement("li", { key: index }, !React.isValidElement(label) ? (React.createElement(Tab, { label: label, className: cx({
-                    'iui-active': index === currentActiveIndex,
-                }), tabIndex: index === currentActiveIndex ? 0 : -1, onClick: onClick, "aria-selected": index === currentActiveIndex })) : (React.cloneElement(label, {
-                className: cx(label.props.className, {
-                    'iui-active': index === currentActiveIndex,
-                }),
-                'aria-selected': index === currentActiveIndex,
-                tabIndex: index === currentActiveIndex ? 0 : -1,
-                onClick: (args) => {
-                    var _a, _b;
-                    onClick();
-                    (_b = (_a = label.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, args);
-                },
-            }))));
-        })),
+            }, tabsClassName), "data-iui-overflow": overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow, "data-iui-scroll-placement": scrollingPlacement, role: 'tablist', ref: refs, onKeyDown: onKeyDown, ...rest }, labels.map((label, index) => createTab(label, index))),
         actions && (React.createElement("div", { className: 'iui-tabs-actions-wrapper' },
             React.createElement("div", { className: 'iui-tabs-actions' }, actions))),
         children && (React.createElement("div", { className: cx('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));

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

@@ -1,4 +1,4 @@
-export { Tabs, VerticalTabs, HorizontalTabs } from './Tabs';
-export type { TabsProps, VerticalTabsProps, HorizontalTabsProps } from './Tabs';
-export { Tab } from './Tab';
-export type { TabProps } from './Tab';
+export { Tabs, VerticalTabs, HorizontalTabs } from './Tabs.js';
+export type { TabsProps, VerticalTabsProps, HorizontalTabsProps, } from './Tabs.js';
+export { Tab } from './Tab.js';
+export type { TabProps } from './Tab.js';

package/esm/core/Tabs/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 { Tabs, VerticalTabs, HorizontalTabs } from './Tabs';
-export { Tab } from './Tab';
+export { Tabs, VerticalTabs, HorizontalTabs } from './Tabs.js';
+export { Tab } from './Tab.js';

package/esm/core/Tag/Tag.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/tag.css';
 export declare type TagProps = {
     /**

package/esm/core/Tag/Tag.js

@@ -3,10 +3,10 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
-import React from 'react';
-import { useTheme, SvgCloseSmall } from '../utils';
+import * as React from 'react';
+import { useTheme, SvgCloseSmall } from '../utils/index.js';
 import '@itwin/itwinui-css/css/tag.css';
-import { IconButton } from '../Buttons';
+import { IconButton } from '../Buttons/index.js';
 /**
  * Tag for showing categories, filters etc.
  * @example

package/esm/core/Tag/TagContainer.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/tag.css';
 export declare type TagContainerProps = {
     /**

package/esm/core/Tag/TagContainer.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 * as React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../utils';
+import { useTheme } from '../utils/index.js';
 import '@itwin/itwinui-css/css/tag.css';
 /**
  * TagContainer for grouping tags.

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

@@ -1,6 +1,6 @@
-export { Tag } from './Tag';
-export type { TagProps } from './Tag';
+export { Tag } from './Tag.js';
+export type { TagProps } from './Tag.js';
 declare const _default: "./Tag";
 export default _default;
-export { TagContainer } from './TagContainer';
-export type { TagContainerProps } from './TagContainer';
+export { TagContainer } from './TagContainer.js';
+export type { TagContainerProps } from './TagContainer.js';

package/esm/core/Tag/index.js

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

package/esm/core/Textarea/Textarea.d.ts

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

package/esm/core/Textarea/Textarea.js

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

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

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

package/esm/core/Textarea/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 { Textarea } from './Textarea';
+export { Textarea } from './Textarea.js';
 export default './Textarea';

package/esm/core/ThemeProvider/ThemeProvider.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { PolymorphicComponentProps, PolymorphicForwardRefComponent, ThemeOptions, ThemeType } from '../utils';
+import * as React from 'react';
+import type { PolymorphicComponentProps, PolymorphicForwardRefComponent, ThemeOptions, ThemeType } from '../utils/index.js';
 import '@itwin/itwinui-css/css/global.css';
 import '@itwin/itwinui-variables/index.css';
 export declare type ThemeProviderProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, ThemeProviderOwnProps>;

package/esm/core/ThemeProvider/ThemeProvider.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 * as React from 'react';
 import cx from 'classnames';
-import { useTheme, useMediaQuery, useMergedRefs, useIsThemeAlreadySet, } from '../utils';
+import { useTheme, useMediaQuery, useMergedRefs, useIsThemeAlreadySet, } from '../utils/index.js';
 import '@itwin/itwinui-css/css/global.css';
 import '@itwin/itwinui-variables/index.css';
 /**

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

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

package/esm/core/ThemeProvider/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 { ThemeProvider } from './ThemeProvider';
+export { ThemeProvider } from './ThemeProvider.js';
 export default './ThemeProvider';

package/esm/core/Tile/Tile.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { PolymorphicComponentProps } from '../utils';
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/tile.css';
 declare type TileActionOwnProps = {};
 /**

package/esm/core/Tile/Tile.js

@@ -2,13 +2,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 * as React from 'react';
 import cx from 'classnames';
-import { StatusIconMap, useTheme, SvgMore, SvgNew, SvgCheckmark, LinkAction, useSafeContext, supportsHas, } from '../utils';
+import { StatusIconMap, useTheme, SvgMore, SvgNew, SvgCheckmark, LinkAction, useSafeContext, supportsHas, } from '../utils/index.js';
 import '@itwin/itwinui-css/css/tile.css';
-import { DropdownMenu } from '../DropdownMenu';
-import { IconButton } from '../Buttons';
-import { ProgressRadial } from '../ProgressIndicators';
+import { DropdownMenu } from '../DropdownMenu/index.js';
+import { IconButton } from '../Buttons/index.js';
+import { ProgressRadial } from '../ProgressIndicators/index.js';
 const TileContext = React.createContext(undefined);
 /**
  * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.

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

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

package/esm/core/Tile/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 { Tile } from './Tile';
+export { Tile } from './Tile.js';
 export default './Tile';

package/esm/core/TimePicker/TimePicker.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { StylingProps } from '../utils';
+import * as React from 'react';
+import type { StylingProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/time-picker.css';
 export declare type MeridiemType = 'AM' | 'PM';
 export declare type Precision = 'hours' | 'minutes' | 'seconds';

package/esm/core/TimePicker/TimePicker.js

@@ -3,8 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
-import React from 'react';
-import { useTheme } from '../utils';
+import * as React from 'react';
+import { useTheme } from '../utils/index.js';
 import '@itwin/itwinui-css/css/time-picker.css';
 const isSameHour = (date1, date2, meridiem) => {
     const adjustedHours = meridiem

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

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

package/esm/core/TimePicker/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 { TimePicker } from './TimePicker';
+export { TimePicker } from './TimePicker.js';
 export default './TimePicker';

package/esm/core/Toast/Toast.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/toast.css';
 export declare type ToastCategory = 'informational' | 'negative' | 'positive' | 'warning';
 export declare type ToastProps = {

package/esm/core/Toast/Toast.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 { Transition } from 'react-transition-group';
 import cx from 'classnames';
-import { getWindow, StatusIconMap, SvgCloseSmall } from '../utils';
+import { getWindow, StatusIconMap, SvgCloseSmall } from '../utils/index.js';
 import '@itwin/itwinui-css/css/toast.css';
-import { IconButton } from '../Buttons';
+import { IconButton } from '../Buttons/index.js';
 const isMotionOk = () => { var _a, _b, _c; return (_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, '(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches; };
 /**
  * Generic Toast Component

package/esm/core/Toast/ToastWrapper.d.ts

@@ -1,7 +1,7 @@
 import '@itwin/itwinui-css/css/toast.css';
-import React from 'react';
-import { ToastProps } from './Toast';
-import { ToasterSettings } from './Toaster';
+import * as React from 'react';
+import type { ToastProps } from './Toast.js';
+import type { ToasterSettings } from './Toaster.js';
 declare type ToastPlacement = NonNullable<ToasterSettings['placement']>;
 export declare type ToastWrapperHandle = {
     setToasts: (toasts: ToastProps[]) => void;

package/esm/core/Toast/ToastWrapper.js

@@ -3,9 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import '@itwin/itwinui-css/css/toast.css';
-import React from 'react';
+import * as React from 'react';
 import cx from 'classnames';
-import Toast from './Toast';
+import Toast from './Toast.js';
 export const ToastWrapper = React.forwardRef((_, ref) => {
     const [toasts, setToasts] = React.useState([]);
     const [placement, setPlacement] = React.useState('top');

package/esm/core/Toast/Toaster.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { ToastProps } from './Toast';
+import * as React from 'react';
+import type { ToastProps } from './Toast.js';
 export declare type ToasterSettings = {
     /**
      * Order of toasts.

package/esm/core/Toast/Toaster.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 * as ReactDOM from 'react-dom';
-import { getContainer, getDocument } from '../utils';
-import { ToastWrapper } from './ToastWrapper';
+import { getContainer, getDocument } from '../utils/index.js';
+import { ToastWrapper } from './ToastWrapper.js';
 const TOASTS_CONTAINER_ID = 'iui-toasts-container';
 export default class Toaster {
     constructor() {