@itwin/itwinui-react 2.10.0 → 2.11.0

package/esm/core/RadioTiles/RadioTile.d.ts

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

package/esm/core/RadioTiles/RadioTile.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/radio-tile.css';
 /**
  * RadioTile component to be used in RadioTileGroup component

package/esm/core/RadioTiles/RadioTileGroup.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { InputGroupProps } from '../InputGroup';
+import type { InputGroupProps } from '../InputGroup/index.js';
 import '@itwin/itwinui-css/css/radio-tile.css';
 export declare type RadioTileGroupProps = Omit<InputGroupProps, 'displayStyle' | 'disabled'>;
 /**

package/esm/core/RadioTiles/RadioTileGroup.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 { InputGroup } from '../InputGroup';
+import * as React from 'react';
+import { InputGroup } from '../InputGroup/index.js';
 import '@itwin/itwinui-css/css/radio-tile.css';
-import { useTheme } from '../utils';
+import { useTheme } from '../utils/index.js';
 /**
  * RadioTileGroup component to group RadioTile components together
  * @example

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

@@ -1,6 +1,6 @@
-export { RadioTileGroup } from './RadioTileGroup';
-export type { RadioTileGroupProps } from './RadioTileGroup';
-export { RadioTile } from './RadioTile';
-export type { RadioTileProps } from './RadioTile';
+export { RadioTileGroup } from './RadioTileGroup.js';
+export type { RadioTileGroupProps } from './RadioTileGroup.js';
+export { RadioTile } from './RadioTile.js';
+export type { RadioTileProps } from './RadioTile.js';
 declare const _default: "./RadioTileGroup";
 export default _default;

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

package/esm/core/SearchBox/SearchBox.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import type { IconProps, PolymorphicForwardRefComponent, PolymorphicComponentProps, InputFlexContainerProps } from '../utils/index.js';
+import type { IconButtonProps } from '../Buttons/IconButton/index.js';
+import '@itwin/itwinui-css/css/searchbox.css';
+declare type SearchBoxOwnProps = {
+    /**
+     * Whether the searchbox is expandable.
+     * @default false
+     */
+    expandable?: boolean;
+    /**
+     * SearchBox state toggle.
+     */
+    isExpanded?: boolean;
+    /**
+     * Function that is called on expanding searchbox.
+     */
+    onExpand?: () => void;
+    /**
+     * Function that is called on collapsing searchbox.
+     */
+    onCollapse?: () => void;
+    /**
+     * Input props when using default searchbox.
+     */
+    inputProps?: React.ComponentPropsWithoutRef<'input'>;
+    /**
+     * Modify size of the searchbox and it's subcomponents.
+     */
+    size?: 'small' | 'large';
+};
+/**
+ * SearchBox component.
+ * Can be used to implement search functionality for pages, tables and more.
+ * @example
+ *  <SearchBox inputProps={{ placeholder: 'Basic search' }}/>
+ *
+ * @example
+ * <SearchBox expandable inputProps={{ placeholder: 'Expandable search' }}/>
+ *
+ * @example
+ * <SearchBox>
+ *   <SearchBox.CollapsedState />
+ *   <SearchBox.ExpandedState>
+ *     <SearchBox.Icon />
+ *     <SearchBox.Input />
+ *     <SearchBox.CollapseButton />
+ *   </SearchBox.ExpandedState>
+ * </SearchBox>
+ */
+export declare const SearchBox: PolymorphicForwardRefComponent<"div", SearchBoxOwnProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, keyof {
+    isDisabled?: boolean | undefined;
+    status?: "positive" | "warning" | "negative" | undefined;
+}> & {
+    isDisabled?: boolean | undefined;
+    status?: "positive" | "warning" | "negative" | undefined;
+}> & {
+    /**
+     * Icon to be placed within SearchBox.
+     * @default Looking glass icon
+     */
+    Icon: PolymorphicForwardRefComponent<"span", IconProps>;
+    /**
+     * Input to be placed within SearchBox
+     */
+    Input: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+    /**
+     * Button to be placed within SearchBox. Default has looking glass icon.
+     */
+    Button: PolymorphicForwardRefComponent<"button", IconButtonProps>;
+    /**
+     * Collapse button for expandable SearchBox. Clicking on this button will collapse SearchBox.
+     */
+    CollapseButton: PolymorphicForwardRefComponent<"button", IconButtonProps>;
+    /**
+     * Expand button for expandable SearchBox. Clicking on this will expand SearchBox.
+     */
+    ExpandButton: PolymorphicForwardRefComponent<"button", IconButtonProps>;
+    /**
+     * Subcomponent to customise expanded state of the SearchBox
+     */
+    ExpandedState: {
+        ({ children, }: {
+            children: React.ReactNode;
+        }): JSX.Element | null;
+        displayName: string;
+    };
+    /**
+     * Subcomponent to customise collapsed state.
+     */
+    CollapsedState: {
+        ({ children, }: {
+            children?: React.ReactNode;
+        }): JSX.Element | null;
+        displayName: string;
+    };
+};
+export declare type SearchBoxProps = PolymorphicComponentProps<'div', SearchBoxOwnProps & InputFlexContainerProps>;
+export declare type SearchBoxInputProps = React.ComponentProps<'input'>;
+export declare type SearchBoxButtonProps = PolymorphicComponentProps<'button', IconButtonProps>;
+export declare type SearchBoxExpandButtonProps = PolymorphicComponentProps<'button', IconButtonProps>;
+export declare type SearchBoxCollapseButtonProps = PolymorphicComponentProps<'button', IconButtonProps>;
+export declare type SearchBoxIconProps = PolymorphicComponentProps<'span', IconProps>;
+export default SearchBox;

package/esm/core/SearchBox/SearchBox.js

@@ -0,0 +1,171 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import cx from 'classnames';
+import { InputFlexContainer, useTheme, SvgSearch, SvgCloseSmall, useSafeContext, useId, Icon, useMergedRefs, } from '../utils/index.js';
+import { IconButton } from '../Buttons/IconButton/index.js';
+import '@itwin/itwinui-css/css/searchbox.css';
+const SearchBoxContext = React.createContext(undefined);
+const SearchBoxComponent = React.forwardRef((props, ref) => {
+    useTheme();
+    const { size, expandable = false, isDisabled = false, onCollapse: onCollapseProp, onExpand: onExpandProp, isExpanded: isExpandedProp, children, inputProps, className, ...rest } = props;
+    const uid = useId();
+    const [inputId, setInputId] = React.useState(uid);
+    const inputRef = React.useRef(null);
+    const openButtonRef = React.useRef(null);
+    const [localExpanded, setLocalExpanded] = React.useState(isExpandedProp);
+    const isExpanded = isExpandedProp !== null && isExpandedProp !== void 0 ? isExpandedProp : localExpanded;
+    const onCollapse = () => {
+        setLocalExpanded(false);
+        onCollapseProp === null || onCollapseProp === void 0 ? void 0 : onCollapseProp();
+        queueMicrotask(() => { var _a; return (_a = openButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); });
+    };
+    const onExpand = () => {
+        setLocalExpanded(true);
+        onExpandProp === null || onExpandProp === void 0 ? void 0 : onExpandProp();
+        queueMicrotask(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); });
+    };
+    return (React.createElement(SearchBoxContext.Provider, { value: {
+            size,
+            isDisabled,
+            onCollapse,
+            onExpand,
+            inputRef,
+            inputId,
+            setInputId,
+            openButtonRef,
+            isExpanded,
+            expandable,
+        } },
+        React.createElement(InputFlexContainer, { ref: ref, className: cx('iui-searchbox', { 'iui-expandable-searchbox': expandable }, className), "data-iui-size": size, isDisabled: isDisabled, "data-iui-expanded": isExpanded, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+            React.createElement(SearchBoxCollapsedState, null,
+                React.createElement(SearchBoxExpandButton, null)),
+            React.createElement(SearchBoxExpandedState, null,
+                React.createElement(SearchBoxIcon, null),
+                React.createElement(SearchBoxInput, { ...inputProps }),
+                expandable ? React.createElement(SearchBoxCollapseButton, null) : null))))));
+});
+// ----------------------------------------------------------------------------
+const SearchBoxCollapsedState = ({ children, }) => {
+    const { isExpanded, expandable } = useSafeContext(SearchBoxContext);
+    if (!expandable || isExpanded) {
+        return null;
+    }
+    return React.createElement(React.Fragment, null, children !== null && children !== void 0 ? children : React.createElement(SearchBoxExpandButton, null));
+};
+SearchBoxCollapsedState.displayName = 'SearchBox.CollapsedState';
+// ----------------------------------------------------------------------------
+const SearchBoxExpandedState = ({ children, }) => {
+    const { isExpanded, expandable } = useSafeContext(SearchBoxContext);
+    if (expandable && !isExpanded) {
+        return null;
+    }
+    return React.createElement(React.Fragment, null, children);
+};
+SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
+// ----------------------------------------------------------------------------
+const SearchBoxIcon = React.forwardRef((props, ref) => {
+    const { className, children, ...rest } = props;
+    return (React.createElement(Icon, { "aria-hidden": true, className: cx('iui-search-icon', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgSearch, null)));
+});
+SearchBoxIcon.displayName = 'SearchBox.Icon';
+// ----------------------------------------------------------------------------
+const SearchBoxInput = React.forwardRef((props, ref) => {
+    const { className, id: idProp, ...rest } = props;
+    const { inputId, setInputId, isDisabled, inputRef } = useSafeContext(SearchBoxContext);
+    React.useEffect(() => {
+        if (idProp && idProp !== inputId) {
+            setInputId(idProp);
+        }
+    }, [idProp, inputId, setInputId]);
+    return (React.createElement("input", { id: idProp !== null && idProp !== void 0 ? idProp : inputId, ref: useMergedRefs(ref, inputRef), role: 'searchbox', type: 'text', className: cx('iui-search-input', className), disabled: isDisabled, ...rest }));
+});
+SearchBoxInput.displayName = 'SearchBox.Input';
+// ----------------------------------------------------------------------------
+const SearchBoxButton = React.forwardRef((props, ref) => {
+    const { children, ...rest } = props;
+    const { size: sizeContext, isDisabled } = useSafeContext(SearchBoxContext);
+    return (React.createElement(IconButton, { styleType: 'borderless', size: sizeContext, ref: ref, disabled: isDisabled, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgSearch, null)));
+});
+SearchBoxButton.displayName = 'SearchBox.Button';
+// ----------------------------------------------------------------------------
+const SearchBoxCollapseButton = React.forwardRef((props, ref) => {
+    const { children, onClick: onClickProp, ...rest } = props;
+    const { onCollapse, size: sizeContext, isDisabled, } = useSafeContext(SearchBoxContext);
+    return (React.createElement(SearchBoxButton, { ref: ref, "aria-label": 'Close searchbox', size: sizeContext, disabled: isDisabled, onClick: (e) => {
+            onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
+            if (e.isDefaultPrevented()) {
+                return;
+            }
+            onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse();
+        }, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgCloseSmall, null)));
+});
+SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton';
+// ----------------------------------------------------------------------------
+const SearchBoxExpandButton = React.forwardRef((props, ref) => {
+    const { children, className, onClick: onClickProp, ...rest } = props;
+    const { onExpand, size: sizeContext, isDisabled, openButtonRef, } = useSafeContext(SearchBoxContext);
+    return (React.createElement(SearchBoxButton, { ref: useMergedRefs(ref, openButtonRef), className: cx('iui-searchbox-open-button', className), "aria-label": 'Expand searchbox', size: sizeContext, disabled: isDisabled, onClick: (e) => {
+            onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
+            if (e.isDefaultPrevented()) {
+                return;
+            }
+            onExpand === null || onExpand === void 0 ? void 0 : onExpand();
+        }, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgSearch, null)));
+});
+SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
+// ----------------------------------------------------------------------------
+/**
+ * SearchBox component.
+ * Can be used to implement search functionality for pages, tables and more.
+ * @example
+ *  <SearchBox inputProps={{ placeholder: 'Basic search' }}/>
+ *
+ * @example
+ * <SearchBox expandable inputProps={{ placeholder: 'Expandable search' }}/>
+ *
+ * @example
+ * <SearchBox>
+ *   <SearchBox.CollapsedState />
+ *   <SearchBox.ExpandedState>
+ *     <SearchBox.Icon />
+ *     <SearchBox.Input />
+ *     <SearchBox.CollapseButton />
+ *   </SearchBox.ExpandedState>
+ * </SearchBox>
+ */
+export const SearchBox = Object.assign(SearchBoxComponent, {
+    /**
+     * Icon to be placed within SearchBox.
+     * @default Looking glass icon
+     */
+    Icon: SearchBoxIcon,
+    /**
+     * Input to be placed within SearchBox
+     */
+    Input: SearchBoxInput,
+    /**
+     * Button to be placed within SearchBox. Default has looking glass icon.
+     */
+    Button: SearchBoxButton,
+    /**
+     * Collapse button for expandable SearchBox. Clicking on this button will collapse SearchBox.
+     */
+    CollapseButton: SearchBoxCollapseButton,
+    /**
+     * Expand button for expandable SearchBox. Clicking on this will expand SearchBox.
+     */
+    ExpandButton: SearchBoxExpandButton,
+    /**
+     * Subcomponent to customise expanded state of the SearchBox
+     */
+    ExpandedState: SearchBoxExpandedState,
+    /**
+     * Subcomponent to customise collapsed state.
+     */
+    CollapsedState: SearchBoxCollapsedState,
+});
+SearchBox.displayName = 'SearchBox';
+export default SearchBox;

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

@@ -0,0 +1,4 @@
+export { SearchBox } from './SearchBox.js';
+export type { SearchBoxProps, SearchBoxButtonProps, SearchBoxCollapseButtonProps, SearchBoxExpandButtonProps, SearchBoxIconProps, SearchBoxInputProps, } from './SearchBox.js';
+declare const _default: "./SearchBox";
+export default _default;

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

package/esm/core/Select/Select.d.ts

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

package/esm/core/Select/Select.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 { Menu, MenuItem } from '../Menu';
-import { useTheme, SvgCaretDownSmall, Popover, useId, } from '../utils';
+import { Menu, MenuItem } from '../Menu/index.js';
+import { useTheme, SvgCaretDownSmall, Popover, useId, AutoclearingHiddenLiveRegion, } from '../utils/index.js';
 import '@itwin/itwinui-css/css/select.css';
-import SelectTag from './SelectTag';
-import SelectTagContainer from './SelectTagContainer';
+import SelectTag from './SelectTag.js';
+import SelectTagContainer from './SelectTagContainer.js';
 const isMultipleEnabled = (variable, multiple) => {
     return multiple;
 };
@@ -73,6 +73,7 @@ export const Select = (props) => {
     const [isOpenState, setIsOpen] = React.useState(false);
     const isOpen = (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : isOpenState;
     const [minWidth, setMinWidth] = React.useState(0);
+    const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
     const selectRef = React.useRef(null);
     const toggleButtonRef = React.useRef(null);
     const onShowHandler = React.useCallback((instance) => {
@@ -133,6 +134,18 @@ export const Select = (props) => {
                     else {
                         onChange === null || onChange === void 0 ? void 0 : onChange(option.value, isSelected ? 'removed' : 'added');
                     }
+                    // update live region
+                    if (isMultipleEnabled(value, multiple)) {
+                        const prevSelectedValue = value || [];
+                        const newSelectedValue = isSelected
+                            ? prevSelectedValue.filter((i) => option.value !== i)
+                            : [...prevSelectedValue, option.value];
+                        setLiveRegionSelection(options
+                            .filter((i) => newSelectedValue.includes(i.value))
+                            .map((item) => item.label)
+                            .filter(Boolean)
+                            .join(', '));
+                    }
                 },
                 ref: (el) => {
                     if (isSelected && !multiple) {
@@ -178,7 +191,8 @@ export const Select = (props) => {
                 'iui-disabled': disabled,
                 'iui-open': isOpen,
             }), onClick: () => !disabled && setIsOpen((o) => !o) },
-            React.createElement(SvgCaretDownSmall, null))));
+            React.createElement(SvgCaretDownSmall, null)),
+        multiple ? (React.createElement(AutoclearingHiddenLiveRegion, { text: liveRegionSelection })) : null));
 };
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer, }) => {
     return (React.createElement(React.Fragment, null,

package/esm/core/Select/SelectTag.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CommonProps } from '../utils';
+import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/select.css';
 export declare type SelectTagProps = {
     /**

package/esm/core/Select/SelectTag.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/select.css';
 /**
  * Tag for showing selected value in `Select`.

package/esm/core/Select/SelectTagContainer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare type SelectTagContainerProps = {
     /**
      * Select tags.

package/esm/core/Select/SelectTagContainer.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 { useTheme, useOverflow, useMergedRefs } from '../utils';
-import SelectTag from './SelectTag';
+import { useTheme, useOverflow, useMergedRefs } from '../utils/index.js';
+import SelectTag from './SelectTag.js';
 /**
  */
 export const SelectTagContainer = React.forwardRef((props, ref) => {

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

@@ -1,4 +1,4 @@
-export { Select } from './Select';
-export type { SelectProps, SelectOption, ItemRendererProps, SelectValueChangeEvent, } from './Select';
+export { Select } from './Select.js';
+export type { SelectProps, SelectOption, ItemRendererProps, SelectValueChangeEvent, } from './Select.js';
 declare const _default: "./Select";
 export default _default;

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

package/esm/core/SideNavigation/SideNavigation.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/side-navigation.css';
 export declare type SideNavigationProps = {
     /**

package/esm/core/SideNavigation/SideNavigation.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 { useTheme, WithCSSTransition, SvgChevronRight, } from '../utils';
-import { IconButton } from '../Buttons';
-import { Tooltip } from '../Tooltip';
+import { useTheme, WithCSSTransition, SvgChevronRight, } from '../utils/index.js';
+import { IconButton } from '../Buttons/index.js';
+import { Tooltip } from '../Tooltip/index.js';
 import '@itwin/itwinui-css/css/side-navigation.css';
 /**
  * Left side navigation menu component.

package/esm/core/SideNavigation/SidenavButton.d.ts

@@ -1,5 +1,5 @@
-import { PolymorphicForwardRefComponent } from '../utils';
-import { ButtonProps } from '../Buttons';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { ButtonProps } from '../Buttons/index.js';
 import '@itwin/itwinui-css/css/side-navigation.css';
 export declare type SidenavButtonProps = {
     /**

package/esm/core/SideNavigation/SidenavButton.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 { useTheme } from '../utils';
-import { Button } from '../Buttons';
+import * as React from 'react';
+import { useTheme } from '../utils/index.js';
+import { Button } from '../Buttons/index.js';
 import '@itwin/itwinui-css/css/side-navigation.css';
 /**
  * Wrapper around Button to be used as SideNavigation items.

package/esm/core/SideNavigation/SidenavSubmenu.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/side-navigation.css';
 export declare type SidenavSubmenuProps = {
     /**

package/esm/core/SideNavigation/SidenavSubmenu.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/side-navigation.css';
 /**
  * Subcomponent to be used in the `submenu` prop of `SideNavigation`.

package/esm/core/SideNavigation/SidenavSubmenuHeader.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/side-navigation.css';
 export declare type SidenavSubmenuHeaderProps = {
     /**

package/esm/core/SideNavigation/SidenavSubmenuHeader.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/side-navigation.css';
 /**
  * Header content for `SidenavSubmenu`. Supports truncated label and actions buttons.

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

@@ -1,10 +1,10 @@
-export { SideNavigation } from './SideNavigation';
-export type { SideNavigationProps } from './SideNavigation';
+export { SideNavigation } from './SideNavigation.js';
+export type { SideNavigationProps } from './SideNavigation.js';
 declare const _default: "./SideNavigation";
 export default _default;
-export { SidenavButton } from './SidenavButton';
-export type { SidenavButtonProps } from './SidenavButton';
-export { SidenavSubmenu } from './SidenavSubmenu';
-export type { SidenavSubmenuProps } from './SidenavSubmenu';
-export { SidenavSubmenuHeader } from './SidenavSubmenuHeader';
-export type { SidenavSubmenuHeaderProps } from './SidenavSubmenuHeader';
+export { SidenavButton } from './SidenavButton.js';
+export type { SidenavButtonProps } from './SidenavButton.js';
+export { SidenavSubmenu } from './SidenavSubmenu.js';
+export type { SidenavSubmenuProps } from './SidenavSubmenu.js';
+export { SidenavSubmenuHeader } from './SidenavSubmenuHeader.js';
+export type { SidenavSubmenuHeaderProps } from './SidenavSubmenuHeader.js';

package/esm/core/SideNavigation/index.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.
  *--------------------------------------------------------------------------------------------*/
-export { SideNavigation } from './SideNavigation';
+export { SideNavigation } from './SideNavigation.js';
 export default './SideNavigation';
-export { SidenavButton } from './SidenavButton';
-export { SidenavSubmenu } from './SidenavSubmenu';
-export { SidenavSubmenuHeader } from './SidenavSubmenuHeader';
+export { SidenavButton } from './SidenavButton.js';
+export { SidenavSubmenu } from './SidenavSubmenu.js';
+export { SidenavSubmenuHeader } from './SidenavSubmenuHeader.js';

package/esm/core/SkipToContentLink/SkipToContentLink.d.ts

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

package/esm/core/SkipToContentLink/SkipToContentLink.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/skip-to-content.css';
 /**
  * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.

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

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