@itwin/itwinui-react 2.10.1 → 2.11.0

package/esm/core/utils/components/InputContainer.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';
 import cx from 'classnames';
 import '@itwin/itwinui-css/css/utils.css';
 /**

package/esm/core/utils/components/InputFlexContainer.d.ts

@@ -0,0 +1,13 @@
+import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props.js';
+import '@itwin/itwinui-css/css/input-container.css';
+declare type InputFlexContainerOwnProps = {
+    isDisabled?: boolean;
+    status?: 'positive' | 'warning' | 'negative';
+};
+/**
+ * Utility component for input container with display flex abilities.
+ * @private
+ */
+export declare const InputFlexContainer: PolymorphicForwardRefComponent<"div", InputFlexContainerOwnProps>;
+export declare type InputFlexContainerProps = PolymorphicComponentProps<'div', InputFlexContainerOwnProps>;
+export {};

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

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 '@itwin/itwinui-css/css/input-container.css';
+/**
+ * Utility component for input container with display flex abilities.
+ * @private
+ */
+export const InputFlexContainer = React.forwardRef((props, ref) => {
+    const { as: Element = 'div', isDisabled, status, children, className, style, ...rest } = props;
+    return (React.createElement(Element, { className: cx('iui-input-flex-container', className), "data-iui-status": status, "data-iui-disabled": isDisabled ? 'true' : undefined, ref: ref, style: style, ...rest }, children));
+});

package/esm/core/utils/components/LinkAction.d.ts

@@ -1,4 +1,4 @@
-import { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props';
+import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props.js';
 import '@itwin/itwinui-css/css/utils.css';
 declare type LinkActionOwnProps = {};
 declare type LinkBoxOwnProps = {};

package/esm/core/utils/components/LinkAction.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';
 import cx from 'classnames';
 import '@itwin/itwinui-css/css/utils.css';
 /**

package/esm/core/utils/components/MiddleTextTruncation.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { CommonProps } from '../props';
+import * as React from 'react';
+import type { CommonProps } from '../props.js';
 export declare type MiddleTextTruncationProps = {
     /**
      * Text to truncate.

package/esm/core/utils/components/MiddleTextTruncation.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 { useOverflow } from '../hooks/useOverflow';
+import * as React from 'react';
+import { useOverflow } from '../hooks/useOverflow.js';
 const ELLIPSIS_CHAR = '…';
 /**
  * Truncates text with the ellipsis in the middle,

package/esm/core/utils/components/Popover.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { TippyProps } from '@tippyjs/react';
+import * as React from 'react';
+import type { TippyProps } from '@tippyjs/react';
 import type { Placement, Instance } from 'tippy.js';
 export declare type PopoverInstance = Instance;
 import '@itwin/itwinui-css/css/utils.css';

package/esm/core/utils/components/Popover.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 Tippy from '@tippyjs/react';
-import { useMergedRefs } from '../hooks/useMergedRefs';
+import { useMergedRefs, useIsClient } from '../hooks/index.js';
 import '@itwin/itwinui-css/css/utils.css';
-import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
+import { ThemeContext } from '../../ThemeProvider/ThemeProvider.js';
 /**
  * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
@@ -17,6 +17,7 @@ export const Popover = React.forwardRef((props, ref) => {
     var _a;
     const [mounted, setMounted] = React.useState(false);
     const themeInfo = React.useContext(ThemeContext);
+    const isDomAvailable = useIsClient();
     const tippyRef = React.useRef(null);
     const refs = useMergedRefs(tippyRef, ref);
     // Plugin to allow lazy mounting. See https://github.com/atomiks/tippyjs-react#lazy-mounting
@@ -48,6 +49,9 @@ export const Popover = React.forwardRef((props, ref) => {
         zIndex: 99999,
         ...props,
         className: cx('iui-popover', props.className),
+        // add additional check for isDomAvailable when using in controlled mode,
+        // because rootRef is not available in first render
+        visible: props.visible !== undefined ? props.visible && isDomAvailable : undefined,
         plugins: [
             lazyLoad,
             removeTabIndex,

package/esm/core/utils/components/Resizer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare type ResizerProps = {
     /**
      * Ref of the element that is being resized.

package/esm/core/utils/components/Resizer.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 { getBoundedValue, getTranslateValues } from '../functions';
+import * as React from 'react';
+import { getBoundedValue, getTranslateValues } from '../functions/index.js';
 /**
  * Component that allows to resize parent element.
  * Parent must have `position: relative`.

package/esm/core/utils/components/VirtualScroll.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare type VirtualScrollProps = {
     /**
      * Length of the items to virtualize.

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

@@ -3,9 +3,9 @@ var _a;
  * 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 { mergeRefs, useResizeObserver, useIsomorphicLayoutEffect, } from '../hooks';
+import { mergeRefs, useResizeObserver, useIsomorphicLayoutEffect, } from '../hooks/index.js';
 const unstable_batchedUpdates = (_a = ReactDOM.unstable_batchedUpdates) !== null && _a !== void 0 ? _a : ((cb) => void cb());
 const getScrollableParent = (element, ownerDocument = document) => {
     if (!element || element === ownerDocument.body) {

package/esm/core/utils/components/VisuallyHidden.d.ts

@@ -1,5 +1,5 @@
 import '@itwin/itwinui-css/css/utils.css';
-import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props';
+import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props.js';
 declare type VisuallyHiddenOwnProps = {
     /**
      * When VisuallyHidden is used with an interactive element (e.g. button),

package/esm/core/utils/components/VisuallyHidden.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 '../hooks';
+import { useTheme } from '../hooks/index.js';
 import '@itwin/itwinui-css/css/utils.css';
 /**
  * Hides content visually but keeps it still accessible to screen readers

package/esm/core/utils/components/WithCSSTransition.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 export declare const WithCSSTransition: (props: Partial<CSSTransitionProps> & {
     children: JSX.Element;
     dimension?: 'height' | 'width';

package/esm/core/utils/components/WithCSSTransition.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';
 import { CSSTransition } from 'react-transition-group';
 export const WithCSSTransition = (props) => {
     const { in: visible, dimension = 'height', children, ...rest } = props;

package/esm/core/utils/components/index.d.ts

@@ -1,12 +1,14 @@
-export * from './Popover';
-export * from './Resizer';
-export * from './FocusTrap';
-export * from './InputContainer';
-export * from './WithCSSTransition';
-export * from './MiddleTextTruncation';
-export * from './VirtualScroll';
-export * from './VisuallyHidden';
-export * from './Icon';
-export * from './Flex';
-export * from './Divider';
-export * from './LinkAction';
+export * from './Popover.js';
+export * from './Resizer.js';
+export * from './FocusTrap.js';
+export * from './InputContainer.js';
+export * from './InputFlexContainer.js';
+export * from './WithCSSTransition.js';
+export * from './MiddleTextTruncation.js';
+export * from './VirtualScroll.js';
+export * from './VisuallyHidden.js';
+export * from './Icon.js';
+export * from './Flex.js';
+export * from './Divider.js';
+export * from './LinkAction.js';
+export * from './AutoclearingHiddenLiveRegion.js';

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

@@ -2,15 +2,17 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export * from './Popover';
-export * from './Resizer';
-export * from './FocusTrap';
-export * from './InputContainer';
-export * from './WithCSSTransition';
-export * from './MiddleTextTruncation';
-export * from './VirtualScroll';
-export * from './VisuallyHidden';
-export * from './Icon';
-export * from './Flex';
-export * from './Divider';
-export * from './LinkAction';
+export * from './Popover.js';
+export * from './Resizer.js';
+export * from './FocusTrap.js';
+export * from './InputContainer.js';
+export * from './InputFlexContainer.js';
+export * from './WithCSSTransition.js';
+export * from './MiddleTextTruncation.js';
+export * from './VirtualScroll.js';
+export * from './VisuallyHidden.js';
+export * from './Icon.js';
+export * from './Flex.js';
+export * from './Divider.js';
+export * from './LinkAction.js';
+export * from './AutoclearingHiddenLiveRegion.js';

package/esm/core/utils/functions/index.d.ts

@@ -1,7 +1,7 @@
-export * from './date';
-export * from './dom';
-export * from './colors';
-export * from './numbers';
-export * from './focusable';
-export * from './styles';
-export * from './supports';
+export * from './date.js';
+export * from './dom.js';
+export * from './colors.js';
+export * from './numbers.js';
+export * from './focusable.js';
+export * from './styles.js';
+export * from './supports.js';

package/esm/core/utils/functions/index.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.
  *--------------------------------------------------------------------------------------------*/
-export * from './date';
-export * from './dom';
-export * from './colors';
-export * from './numbers';
-export * from './focusable';
-export * from './styles';
-export * from './supports';
+export * from './date.js';
+export * from './dom.js';
+export * from './colors.js';
+export * from './numbers.js';
+export * from './focusable.js';
+export * from './styles.js';
+export * from './supports.js';

package/esm/core/utils/functions/supports.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 { getWindow } from './dom';
+import { getWindow } from './dom.js';
 /**
  * Returns true if the :has selector is supported in the browser
  */

package/esm/core/utils/hooks/index.d.ts

@@ -1,14 +1,14 @@
-export * from './useEventListener';
-export * from './useMergedRefs';
-export * from './useOverflow';
-export * from './useResizeObserver';
-export * from './useContainerWidth';
-export * from './useTheme';
-export * from './useIntersection';
-export * from './useMediaQuery';
-export * from './useSafeContext';
-export * from './useLatestRef';
-export * from './useIsomorphicLayoutEffect';
-export * from './useIsThemeAlreadySet';
-export * from './useIsClient';
-export * from './useId';
+export * from './useEventListener.js';
+export * from './useMergedRefs.js';
+export * from './useOverflow.js';
+export * from './useResizeObserver.js';
+export * from './useContainerWidth.js';
+export * from './useTheme.js';
+export * from './useIntersection.js';
+export * from './useMediaQuery.js';
+export * from './useSafeContext.js';
+export * from './useLatestRef.js';
+export * from './useIsomorphicLayoutEffect.js';
+export * from './useIsThemeAlreadySet.js';
+export * from './useIsClient.js';
+export * from './useId.js';

package/esm/core/utils/hooks/index.js

@@ -2,17 +2,17 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export * from './useEventListener';
-export * from './useMergedRefs';
-export * from './useOverflow';
-export * from './useResizeObserver';
-export * from './useContainerWidth';
-export * from './useTheme';
-export * from './useIntersection';
-export * from './useMediaQuery';
-export * from './useSafeContext';
-export * from './useLatestRef';
-export * from './useIsomorphicLayoutEffect';
-export * from './useIsThemeAlreadySet';
-export * from './useIsClient';
-export * from './useId';
+export * from './useEventListener.js';
+export * from './useMergedRefs.js';
+export * from './useOverflow.js';
+export * from './useResizeObserver.js';
+export * from './useContainerWidth.js';
+export * from './useTheme.js';
+export * from './useIntersection.js';
+export * from './useMediaQuery.js';
+export * from './useSafeContext.js';
+export * from './useLatestRef.js';
+export * from './useIsomorphicLayoutEffect.js';
+export * from './useIsThemeAlreadySet.js';
+export * from './useIsClient.js';
+export * from './useId.js';

package/esm/core/utils/hooks/useContainerWidth.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 { useMergedRefs } from './useMergedRefs';
-import { useResizeObserver } from './useResizeObserver';
+import * as React from 'react';
+import { useMergedRefs } from './useMergedRefs.js';
+import { useResizeObserver } from './useResizeObserver.js';
 /**
  * Hook that returns the width of an element in three stages:
  *  - initialized with 0

package/esm/core/utils/hooks/useDragAndDrop.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 /**
  * Helper hook that handles elements drag logic.
  * @param elementRef Element ref that is draggable.

package/esm/core/utils/hooks/useDragAndDrop.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 { getTranslateValues, getWindow } from '../functions';
-import { useEventListener } from './useEventListener';
-import { useResizeObserver } from './useResizeObserver';
+import * as React from 'react';
+import { getTranslateValues, getWindow } from '../functions/index.js';
+import { useEventListener } from './useEventListener.js';
+import { useResizeObserver } from './useResizeObserver.js';
 const getContainerRect = (containerRef) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();

package/esm/core/utils/hooks/useEventListener.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';
 /**
  * Hook that adds and removes Event listeners.
  * @example

package/esm/core/utils/hooks/useId.js

@@ -3,8 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var _a;
-import React from 'react';
-import { getRandomValue } from '../functions/numbers';
+import * as React from 'react';
+import { getRandomValue } from '../functions/numbers.js';
 /**
  * Wrapper around React's `useId` hook, which prefixes the id with `iui-` and uses
  * a random value as fallback for older React versions which don't include `useId`.

package/esm/core/utils/hooks/useIntersection.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 { getWindow } from '../functions/dom';
+import * as React from 'react';
+import { getWindow } from '../functions/dom.js';
 /**
  * Hook that uses `IntersectionObserver` to trigger `onIntersect` callback when element is in viewport.
  * Callback is called only once by default (can be changed using the `once` parameter).

package/esm/core/utils/hooks/useIsClient.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 useIsClient = () => {
     const [isClient, setIsClient] = React.useState(false);
     React.useEffect(() => {

package/esm/core/utils/hooks/useIsThemeAlreadySet.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 /**
  * Hook that returns a boolean ref which is true if either:
  * - There is a parent `ThemeProvider` in the tree, or

package/esm/core/utils/hooks/useIsThemeAlreadySet.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 { ThemeContext } from '../../ThemeProvider/ThemeProvider';
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
-import { getDocument } from '../functions';
+import * as React from 'react';
+import { ThemeContext } from '../../ThemeProvider/ThemeProvider.js';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+import { getDocument } from '../functions/index.js';
 /**
  * Hook that returns a boolean ref which is true if either:
  * - There is a parent `ThemeProvider` in the tree, or

package/esm/core/utils/hooks/useIsomorphicLayoutEffect.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 /**
  * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
  *

package/esm/core/utils/hooks/useIsomorphicLayoutEffect.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';
 /**
  * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
  *

package/esm/core/utils/hooks/useLatestRef.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 /**
  * Hook that keeps track of the latest value in a ref.
  * @private

package/esm/core/utils/hooks/useLatestRef.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';
 /**
  * Hook that keeps track of the latest value in a ref.
  * @private

package/esm/core/utils/hooks/useMediaQuery.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 { getWindow } from '../functions';
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+import * as React from 'react';
+import { getWindow } from '../functions/index.js';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
 export const useMediaQuery = (queryString) => {
     const [matches, setMatches] = React.useState();
     useIsomorphicLayoutEffect(() => {

package/esm/core/utils/hooks/useMergedRefs.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 /**
  * Function that merges the provided refs into one.
  */

package/esm/core/utils/hooks/useMergedRefs.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';
 /**
  * Function that merges the provided refs into one.
  */

package/esm/core/utils/hooks/useOverflow.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 /**
  * Hook that observes the size of an element and returns the number of items
  * that should be visible based on the size of the container element.

package/esm/core/utils/hooks/useOverflow.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 { useMergedRefs } from './useMergedRefs';
-import { useResizeObserver } from './useResizeObserver';
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+import * as React from 'react';
+import { useMergedRefs } from './useMergedRefs.js';
+import { useResizeObserver } from './useResizeObserver.js';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
 const STARTING_MAX_ITEMS_COUNT = 20;
 /**
  * Hook that observes the size of an element and returns the number of items

package/esm/core/utils/hooks/useResizeObserver.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 { getWindow } from '../functions/dom';
+import * as React from 'react';
+import { getWindow } from '../functions/dom.js';
 /**
  * Hook that uses `ResizeObserver` to access an element's size every time it updates.
  * @private

package/esm/core/utils/hooks/useSafeContext.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 /**
  * Wrapper hook around `useContext` that throws an error if the context is not provided.
  * @param context Context to use. Must have a `displayName` for useful errors.

package/esm/core/utils/hooks/useSafeContext.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';
 /**
  * Wrapper hook around `useContext` that throws an error if the context is not provided.
  * @param context Context to use. Must have a `displayName` for useful errors.

package/esm/core/utils/hooks/useTheme.js

@@ -3,9 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { getDocument, getWindow } from '../functions';
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
-import { useIsThemeAlreadySet } from './useIsThemeAlreadySet';
+import { getDocument, getWindow } from '../functions/index.js';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+import { useIsThemeAlreadySet } from './useIsThemeAlreadySet.js';
 import '@itwin/itwinui-css/css/global.css';
 import '@itwin/itwinui-variables/index.css';
 /**

package/esm/core/utils/icons/StatusIconMap.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { CommonProps } from '../props';
+import type { CommonProps } from '../props.js';
 export declare const StatusIconMap: {
     negative: (args?: CommonProps) => JSX.Element;
     positive: (args?: CommonProps) => JSX.Element;