@itwin/itwinui-react 2.11.3 → 3.0.0-dev.0

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/tag.css';
-export declare type TagProps = {
+declare type TagProps = {
     /**
      * Callback function that handles click on close icon.
      * Close icon is shown only when this function is passed.
@@ -18,12 +18,12 @@ export declare type TagProps = {
      * @default 'default'
      */
     variant?: 'default' | 'basic';
-} & CommonProps;
+};
 /**
  * Tag for showing categories, filters etc.
  * @example
  * <Tag onRemove={() => alert('Closed a tag!')}>I'm a tag</Tag>
  * <Tag variant='basic'>Basic tag</Tag>
  */
-export declare const Tag: (props: TagProps) => JSX.Element;
+export declare const Tag: PolymorphicForwardRefComponent<"span", TagProps>;
 export default Tag;

package/esm/core/Tag/Tag.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useTheme, SvgCloseSmall } from '../utils/index.js';
+import { SvgCloseSmall, Box } from '../utils/index.js';
 import '@itwin/itwinui-css/css/tag.css';
 import { IconButton } from '../Buttons/index.js';
 /**
@@ -13,15 +13,14 @@ import { IconButton } from '../Buttons/index.js';
  * <Tag onRemove={() => alert('Closed a tag!')}>I'm a tag</Tag>
  * <Tag variant='basic'>Basic tag</Tag>
  */
-export const Tag = (props) => {
+export const Tag = React.forwardRef((props, forwardedRef) => {
     const { className, variant = 'default', children, onRemove, ...rest } = props;
-    useTheme();
-    return (React.createElement("span", { className: cx({
+    return (React.createElement(Box, { as: 'span', className: cx({
             'iui-tag-basic': variant === 'basic',
             'iui-tag': variant === 'default',
-        }, className), ...rest },
-        variant === 'default' ? (React.createElement("span", { className: 'iui-tag-label' }, children)) : (children),
+        }, className), ref: forwardedRef, ...rest },
+        variant === 'default' ? (React.createElement(Box, { as: 'span', className: 'iui-tag-label' }, children)) : (children),
         onRemove && (React.createElement(IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', className: 'iui-tag-button' },
             React.createElement(SvgCloseSmall, { "aria-hidden": true })))));
-};
+});
 export default Tag;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/tag.css';
-export declare type TagContainerProps = {
+declare type TagContainerProps = {
     /**
      * Tags inside the container.
      */
@@ -17,12 +17,12 @@ export declare type TagContainerProps = {
      * @default 'none'
      */
     background?: 'none' | 'filled';
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * TagContainer for grouping tags.
  * @example
  * <TagContainer><Tag>Tag 1</Tag><Tag>Tag 2</Tag></TagContainer>
  * <TagContainer><Tag variant='basic'>Basic tag</Tag><Tag variant='basic'>Basic tag 2</Tag></TagContainer>
  */
-export declare const TagContainer: (props: TagContainerProps) => JSX.Element;
+export declare const TagContainer: PolymorphicForwardRefComponent<"div", TagContainerProps>;
 export default TagContainer;

package/esm/core/Tag/TagContainer.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../utils/index.js';
+import { Box } from '../utils/index.js';
 import '@itwin/itwinui-css/css/tag.css';
 /**
  * TagContainer for grouping tags.
@@ -12,12 +12,11 @@ import '@itwin/itwinui-css/css/tag.css';
  * <TagContainer><Tag>Tag 1</Tag><Tag>Tag 2</Tag></TagContainer>
  * <TagContainer><Tag variant='basic'>Basic tag</Tag><Tag variant='basic'>Basic tag 2</Tag></TagContainer>
  */
-export const TagContainer = (props) => {
+export const TagContainer = React.forwardRef((props, forwardedRef) => {
     const { className, children, overflow, background = 'none', ...rest } = props;
-    useTheme();
-    return (React.createElement("div", { className: cx('iui-tag-container', {
+    return (React.createElement(Box, { className: cx('iui-tag-container', {
             [`iui-${overflow}`]: !!overflow,
             'iui-visible': background !== 'none',
-        }, className), ...rest }, children));
-};
+        }, className), ref: forwardedRef, ...rest }, children));
+});
 export default TagContainer;

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

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

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/input.css';
 export declare type TextareaProps = {
     /**
@@ -6,18 +6,12 @@ export declare type TextareaProps = {
      * @default false
      */
     setFocus?: boolean;
-} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+};
 /**
  * Basic textarea component
  * @example
  * <Textarea setFocus={true} placeholder='This is a textarea' />
  * <Textarea disabled={true} placeholder='This is a disabled textarea' />
  */
-export declare const Textarea: React.ForwardRefExoticComponent<{
-    /**
-     * Set focus on textarea element.
-     * @default false
-     */
-    setFocus?: boolean | undefined;
-} & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const Textarea: PolymorphicForwardRefComponent<"textarea", TextareaProps>;
 export default Textarea;

package/esm/core/Textarea/Textarea.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useMergedRefs, useTheme } from '../utils/index.js';
+import { useMergedRefs, Box } from '../utils/index.js';
 import '@itwin/itwinui-css/css/input.css';
 /**
  * Basic textarea component
@@ -14,7 +14,6 @@ import '@itwin/itwinui-css/css/input.css';
  */
 export const Textarea = React.forwardRef((props, ref) => {
     const { className, rows = 3, setFocus = false, ...rest } = props;
-    useTheme();
     const textAreaRef = React.useRef(null);
     const refs = useMergedRefs(ref, textAreaRef);
     React.useEffect(() => {
@@ -22,6 +21,6 @@ export const Textarea = React.forwardRef((props, ref) => {
             textAreaRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement("textarea", { className: cx('iui-input', className), rows: rows, ref: refs, ...rest }));
+    return (React.createElement(Box, { as: 'textarea', className: cx('iui-input', className), rows: rows, ref: refs, ...rest }));
 });
 export default Textarea;

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

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

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { ThemeOptions, ThemeType } from './ThemeProvider.js';
+export declare const ThemeContext: React.Context<{
+    theme?: ThemeType | undefined;
+    themeOptions?: ThemeOptions | undefined;
+    rootRef: React.RefObject<HTMLElement>;
+} | undefined>;

package/esm/core/{Typography/Body/index.js → ThemeProvider/ThemeContext.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 { Body } from './Body.js';
-export default './Body';
+import * as React from 'react';
+export const ThemeContext = React.createContext(undefined);

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

@@ -1,8 +1,15 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps, PolymorphicForwardRefComponent, ThemeOptions, ThemeType } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } 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>;
+export declare type ThemeOptions = {
+    /**
+     * Whether to apply high-contrast versions of light and dark themes.
+     * Will default to user preference if browser supports it.
+     */
+    highContrast?: boolean;
+};
+export declare type ThemeType = 'light' | 'dark' | 'os';
 declare type RootProps = {
     /**
      * Theme to be applied. Can be 'light' or 'dark' or 'os'.
@@ -37,13 +44,10 @@ declare type RootProps = {
      */
     isInheritingTheme?: boolean;
 };
-declare type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & ({
+declare type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
     themeOptions?: RootProps['themeOptions'];
     children: Required<React.ReactNode>;
-} | {
-    themeOptions?: ThemeOptions;
-    children?: undefined;
-});
+};
 /**
  * This component provides global styles and applies theme to the entire tree
  * that it is wrapping around. The `theme` prop is optional and defaults to the
@@ -72,8 +76,3 @@ declare type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & ({
  */
 export declare const ThemeProvider: PolymorphicForwardRefComponent<"div", ThemeProviderOwnProps>;
 export default ThemeProvider;
-export declare const ThemeContext: React.Context<{
-    theme?: ThemeType | undefined;
-    themeOptions?: ThemeOptions | undefined;
-    rootRef: React.RefObject<HTMLElement>;
-} | undefined>;

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -4,7 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme, useMediaQuery, useMergedRefs, useIsThemeAlreadySet, } from '../utils/index.js';
+import { useMediaQuery, useMergedRefs, useIsThemeAlreadySet, Box, } from '../utils/index.js';
+import { ThemeContext } from './ThemeContext.js';
 import '@itwin/itwinui-css/css/global.css';
 import '@itwin/itwinui-variables/index.css';
 /**
@@ -38,23 +39,17 @@ export const ThemeProvider = React.forwardRef((props, ref) => {
     const { theme: themeProp, children, themeOptions, ...rest } = props;
     const rootRef = React.useRef(null);
     const mergedRefs = useMergedRefs(rootRef, ref);
-    const hasChildren = React.Children.count(children) > 0;
     const parentContext = React.useContext(ThemeContext);
     const theme = themeProp === 'inherit' ? (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme) !== null && _a !== void 0 ? _a : 'light' : themeProp;
     const contextValue = React.useMemo(() => ({ theme, themeOptions, rootRef }), [theme, themeOptions]);
-    // if no children, then fallback to this wrapper component which calls useTheme
-    if (!hasChildren) {
-        return (React.createElement(ThemeLogicWrapper, { theme: theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
-    }
     // now that we know there are children, we can render the root and provide the context value
     return (React.createElement(Root, { theme: theme, isInheritingTheme: themeProp === 'inherit', themeOptions: themeOptions, ref: mergedRefs, ...rest },
         React.createElement(ThemeContext.Provider, { value: contextValue }, children)));
 });
 export default ThemeProvider;
-export const ThemeContext = React.createContext(undefined);
 const Root = React.forwardRef((props, forwardedRef) => {
     var _a, _b, _c;
-    const { theme, children, themeOptions, as: Element = 'div', className, isInheritingTheme, ...rest } = props;
+    const { theme, children, themeOptions, className, isInheritingTheme, ...rest } = props;
     const ref = React.useRef(null);
     const mergedRefs = useMergedRefs(ref, forwardedRef);
     const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
@@ -63,10 +58,5 @@ const Root = React.forwardRef((props, forwardedRef) => {
     const shouldApplyHC = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast;
     const isThemeAlreadySet = useIsThemeAlreadySet((_b = ref.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
     const shouldApplyBackground = (_c = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.applyBackground) !== null && _c !== void 0 ? _c : (isInheritingTheme ? false : !isThemeAlreadySet.current);
-    return (React.createElement(Element, { className: cx('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: mergedRefs, ...rest }, children));
+    return (React.createElement(Box, { className: cx('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: mergedRefs, ...rest }, children));
 });
-const ThemeLogicWrapper = (props) => {
-    const { theme, themeOptions } = props;
-    useTheme(theme, themeOptions);
-    return React.createElement(React.Fragment, null);
-};

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

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

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/tile.css';
-declare type TileActionOwnProps = {};
 /**
  * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
  * Renders `a` element by default.
@@ -10,8 +9,8 @@ declare type TileActionOwnProps = {};
  *   name={<Tile.Action href='/new-page'>Tile name<Tile.Action/>}
  * />
  */
-export declare const TileAction: (props: PolymorphicComponentProps<'a', TileActionOwnProps>) => JSX.Element;
-export declare type TileProps = {
+export declare const TileAction: PolymorphicForwardRefComponent<"a", {}>;
+declare type TileProps = {
     /**
      * Name or title of the tile.
      */
@@ -114,7 +113,7 @@ export declare type TileProps = {
      */
     isDisabled?: boolean;
     onClick?: React.MouseEventHandler<HTMLElement>;
-} & Omit<React.ComponentPropsWithoutRef<'div'>, 'onClick'>;
+};
 /**
  * Tile component that displays content and actions in a card-like format.
  * @example
@@ -132,7 +131,7 @@ export declare type TileProps = {
  *  isNew={false}
  * />
  */
-export declare const Tile: ((props: TileProps) => JSX.Element) & {
+export declare const Tile: PolymorphicForwardRefComponent<"div", TileProps> & {
     /**
      * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
      * Renders `a` element by default.
@@ -141,6 +140,6 @@ export declare const Tile: ((props: TileProps) => JSX.Element) & {
      *   name={<Tile.Action href='/new-page'>Tile name<Tile.Action/>}
      * />
      */
-    Action: (props: PolymorphicComponentProps<'a', TileActionOwnProps>) => JSX.Element;
+    Action: PolymorphicForwardRefComponent<"a", {}>;
 };
 export default Tile;

package/esm/core/Tile/Tile.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { StatusIconMap, useTheme, SvgMore, SvgNew, SvgCheckmark, LinkAction, useSafeContext, supportsHas, } from '../utils/index.js';
+import { StatusIconMap, SvgMore, SvgNew, SvgCheckmark, LinkAction, useSafeContext, supportsHas, Box, } from '../utils/index.js';
 import '@itwin/itwinui-css/css/tile.css';
 import { DropdownMenu } from '../DropdownMenu/index.js';
 import { IconButton } from '../Buttons/index.js';
@@ -18,15 +18,15 @@ const TileContext = React.createContext(undefined);
  *   name={<Tile.Action href='/new-page'>Tile name<Tile.Action/>}
  * />
  */
-export const TileAction = (props) => {
+export const TileAction = React.forwardRef((props, forwardedRef) => {
     const tileContext = useSafeContext(TileContext);
     React.useEffect(() => {
         if (!supportsHas()) {
             tileContext.setActionable(true);
         }
     }, [tileContext]);
-    return React.createElement(LinkAction, { ...props });
-};
+    return React.createElement(LinkAction, { ref: forwardedRef, ...props });
+});
 /**
  * Tile component that displays content and actions in a card-like format.
  * @example
@@ -44,29 +44,28 @@ export const TileAction = (props) => {
  *  isNew={false}
  * />
  */
-export const Tile = Object.assign((props) => {
+export const Tile = Object.assign(React.forwardRef((props, forwardedRef) => {
     const { className, name, description, metadata, thumbnail, buttons, leftIcon, rightIcon, badge, isNew, isSelected, moreOptions, variant = 'default', children, isActionable: isActionableProp, status, isLoading = false, isDisabled = false, onClick, ...rest } = props;
-    useTheme();
     const [isMenuVisible, setIsMenuVisible] = React.useState(false);
     const showMenu = React.useCallback(() => setIsMenuVisible(true), []);
     const hideMenu = React.useCallback(() => setIsMenuVisible(false), []);
     const [localActionable, setLocalActionable] = React.useState(isActionableProp);
     const isActionable = isActionableProp !== null && isActionableProp !== void 0 ? isActionableProp : localActionable;
-    const tileName = (React.createElement("div", { className: 'iui-tile-name' },
+    const tileName = (React.createElement(Box, { className: 'iui-tile-name' },
         React.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
-        React.createElement("span", { className: 'iui-tile-name-label' }, isActionable && onClick ? (React.createElement(LinkAction, { as: 'button', onClick: !isDisabled ? onClick : undefined, "aria-disabled": isDisabled }, name)) : (name))));
+        React.createElement(Box, { as: 'span', className: 'iui-tile-name-label' }, isActionable && onClick ? (React.createElement(LinkAction, { as: 'button', onClick: !isDisabled ? onClick : undefined, "aria-disabled": isDisabled }, name)) : (name))));
     return (React.createElement(TileContext.Provider, { value: { setActionable: setLocalActionable } },
-        React.createElement("div", { className: cx('iui-tile', {
+        React.createElement(Box, { className: cx('iui-tile', {
                 'iui-folder': variant === 'folder',
                 'iui-new': isNew,
                 'iui-selected': isSelected,
                 'iui-actionable': isActionable,
                 [`iui-${status}`]: !!status,
                 'iui-loading': isLoading,
-            }, className), "aria-disabled": isDisabled, ...rest },
+            }, className), "aria-disabled": isDisabled, ref: forwardedRef, ...rest },
             variant !== 'folder' ? tileName : null,
-            thumbnail && (React.createElement("div", { className: 'iui-tile-thumbnail' },
-                typeof thumbnail === 'string' ? (React.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
+            thumbnail && (React.createElement(Box, { className: 'iui-tile-thumbnail' },
+                typeof thumbnail === 'string' ? (React.createElement(Box, { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
                     className: 'iui-tile-thumbnail-picture',
                 })) : React.isValidElement(thumbnail) ? (React.cloneElement(thumbnail, {
                     className: cx('iui-thumbnail-icon', thumbnail.props.className),
@@ -81,11 +80,11 @@ export const Tile = Object.assign((props) => {
                         className: 'iui-tile-thumbnail-quick-action',
                         'data-iui-size': 'small',
                     }),
-                badge && (React.createElement("div", { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
-            React.createElement("div", { className: 'iui-tile-content' },
+                badge && (React.createElement(Box, { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
+            React.createElement(Box, { className: 'iui-tile-content' },
                 variant === 'folder' ? tileName : null,
-                description != undefined && (React.createElement("div", { className: 'iui-tile-description' }, description)),
-                metadata != undefined && (React.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
+                description != undefined && (React.createElement(Box, { className: 'iui-tile-description' }, description)),
+                metadata != undefined && (React.createElement(Box, { className: 'iui-tile-metadata' }, metadata)),
                 moreOptions && (React.createElement(DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: (close) => moreOptions.map((option) => React.cloneElement(option, {
                         onClick: (value) => {
                             var _a, _b;
@@ -93,14 +92,14 @@ export const Tile = Object.assign((props) => {
                             (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
                         },
                     })) },
-                    React.createElement("div", { className: cx('iui-tile-more-options', {
+                    React.createElement(Box, { className: cx('iui-tile-more-options', {
                             'iui-visible': isMenuVisible,
                         }) },
                         React.createElement(IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
                             React.createElement(SvgMore, null))))),
                 children),
-            buttons && React.createElement("div", { className: 'iui-tile-buttons' }, buttons))));
-}, {
+            buttons && React.createElement(Box, { className: 'iui-tile-buttons' }, buttons))));
+}), {
     /**
      * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
      * Renders `a` element by default.

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

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { StylingProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } 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';
@@ -86,11 +86,11 @@ export declare type TimePickerProps = {
      *   }
      */
     combinedRenderer?: (date: Date, precision: Precision) => React.ReactNode;
-} & StylingProps;
+};
 /**
  * Time picker component
  * @example
  * <TimePicker date={new Date()} onChange={(e) => console.log('New time value: ' + e)} />
  */
-export declare const TimePicker: (props: TimePickerProps) => JSX.Element;
+export declare const TimePicker: PolymorphicForwardRefComponent<"div", TimePickerProps>;
 export default TimePicker;

package/esm/core/TimePicker/TimePicker.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useTheme } from '../utils/index.js';
+import { Box } from '../utils/index.js';
 import '@itwin/itwinui-css/css/time-picker.css';
 const isSameHour = (date1, date2, meridiem) => {
     const adjustedHours = meridiem
@@ -77,9 +77,8 @@ const defaultCombinedRenderer = (date, precision) => {
  * @example
  * <TimePicker date={new Date()} onChange={(e) => console.log('New time value: ' + e)} />
  */
-export const TimePicker = (props) => {
+export const TimePicker = React.forwardRef((props, forwardedRef) => {
     const { date, onChange, use12Hours = false, precision = 'minutes', hourStep = 1, minuteStep = 1, secondStep = 1, setFocusHour = false, hourRenderer = (date) => date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 }), minuteRenderer = (date) => date.getMinutes().toLocaleString(undefined, { minimumIntegerDigits: 2 }), secondRenderer = (date) => date.getSeconds().toLocaleString(undefined, { minimumIntegerDigits: 2 }), meridiemRenderer = (meridiem) => meridiem, useCombinedRenderer = false, combinedRenderer = defaultCombinedRenderer, className, ...rest } = props;
-    useTheme();
     const [selectedTime, setSelectedTime] = React.useState(date);
     const [focusedTime, setFocusedTime] = React.useState(selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date());
     const [meridiem, setMeridiem] = React.useState(use12Hours ? ((focusedTime === null || focusedTime === void 0 ? void 0 : focusedTime.getHours()) > 11 ? 'PM' : 'AM') : undefined);
@@ -199,13 +198,13 @@ export const TimePicker = (props) => {
         const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
         return generateDataList(60, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), time.getMinutes(), i), secondStep);
     }, [secondStep, selectedTime]);
-    return (React.createElement("div", { className: cx('iui-time-picker', className), ...rest },
+    return (React.createElement(Box, { className: cx('iui-time-picker', className), ref: forwardedRef, ...rest },
         useCombinedRenderer ? (React.createElement(TimePickerColumn, { data: time, isSameFocused: (val) => isSameTime(val, focusedTime, precision, use12Hours ? meridiem : undefined), isSameSelected: (val) => isSameTime(val, selectedTime, precision, use12Hours ? meridiem : undefined), onFocusChange: onTimeFocus, onSelectChange: onTimeClick, setFocus: setFocusHour, precision: precision, valueRenderer: combinedRenderer })) : (React.createElement(React.Fragment, null,
             React.createElement(TimePickerColumn, { data: hours, isSameFocused: (val) => isSameHour(val, focusedTime, use12Hours ? meridiem : undefined), isSameSelected: (val) => isSameHour(val, selectedTime, use12Hours ? meridiem : undefined), onFocusChange: onHourFocus, onSelectChange: onHourClick, setFocus: setFocusHour, valueRenderer: hourRenderer }),
             precision !== 'hours' && (React.createElement(TimePickerColumn, { data: minutes, isSameFocused: (val) => isSameMinute(val, focusedTime), isSameSelected: (val) => isSameMinute(val, selectedTime), onFocusChange: (date) => setFocusedTime(date), onSelectChange: (date) => updateCurrentTime(date), valueRenderer: minuteRenderer })),
             precision === 'seconds' && (React.createElement(TimePickerColumn, { data: seconds, isSameFocused: (val) => isSameSecond(val, focusedTime), isSameSelected: (val) => isSameSecond(val, selectedTime), onFocusChange: (date) => setFocusedTime(date), onSelectChange: (date) => updateCurrentTime(date), valueRenderer: secondRenderer })))),
         use12Hours && (React.createElement(TimePickerColumn, { data: ['AM', 'PM'], isSameFocused: (val) => isSameMeridiem(val, focusedTime), isSameSelected: (val) => isSameMeridiem(val, selectedTime), onFocusChange: (date) => onMeridiemFocus(date), onSelectChange: (value) => onMeridiemClick(value), valueRenderer: meridiemRenderer, className: 'iui-period' }))));
-};
+});
 const TimePickerColumn = (props) => {
     const { data, onFocusChange, onSelectChange, isSameFocused, isSameSelected, setFocus = false, valueRenderer, precision = 'minutes', className = 'iui-time', } = props;
     const needFocus = React.useRef(setFocus);
@@ -248,10 +247,10 @@ const TimePickerColumn = (props) => {
                 break;
         }
     };
-    return (React.createElement("div", { className: className },
+    return (React.createElement(Box, { className: `${className}` },
         React.createElement("ol", null, data.map((value, index) => {
             const isSameFocus = isSameFocused(value);
-            return (React.createElement("li", { onKeyDown: (event) => {
+            return (React.createElement(Box, { as: 'li', onKeyDown: (event) => {
                     handleTimeKeyDown(event, data.length - 1, (index) => onFocusChange(data[index]), (index) => onSelectChange(data[index]), index);
                 }, className: cx({
                     'iui-selected': isSameSelected(value),

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

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

package/esm/core/Toast/Toast.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import { Transition } from 'react-transition-group';
 import cx from 'classnames';
-import { getWindow, StatusIconMap, SvgCloseSmall } from '../utils/index.js';
+import { getWindow, StatusIconMap, SvgCloseSmall, Box, } from '../utils/index.js';
 import '@itwin/itwinui-css/css/toast.css';
 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; };
@@ -105,7 +105,7 @@ export const Toast = (props) => {
                 node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
                 node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
             }
-        }, onExited: onRemove }, React.createElement("div", { ref: thisElement, className: 'iui-toast-all', style: {
+        }, onExited: onRemove }, React.createElement(Box, { ref: thisElement, className: 'iui-toast-all', style: {
             height,
             ...marginStyle(),
         } },
@@ -119,10 +119,10 @@ export const Toast = (props) => {
 export const ToastPresentation = (props) => {
     const { content, category, type = 'temporary', link, hasCloseButton, onClose, className, ...rest } = props;
     const StatusIcon = StatusIconMap[category];
-    return (React.createElement("div", { className: cx(`iui-toast iui-${category}`, className), ...rest },
-        React.createElement("div", { className: 'iui-status-area' }, React.createElement(StatusIcon, { className: 'iui-icon' })),
-        React.createElement("div", { className: 'iui-message' }, content),
-        link && (React.createElement("a", { className: 'iui-toast-anchor', onClick: link.onClick }, link.title)),
+    return (React.createElement(Box, { className: cx(`iui-toast iui-${category}`, className), ...rest },
+        React.createElement(Box, { className: 'iui-status-area' }, React.createElement(StatusIcon, { className: 'iui-icon' })),
+        React.createElement(Box, { className: 'iui-message' }, content),
+        link && (React.createElement(Box, { as: 'a', className: 'iui-toast-anchor', onClick: link.onClick }, link.title)),
         (type === 'persisting' || hasCloseButton) && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
             React.createElement(SvgCloseSmall, null)))));
 };

package/esm/core/Toast/ToastWrapper.js

@@ -6,6 +6,7 @@ import '@itwin/itwinui-css/css/toast.css';
 import * as React from 'react';
 import cx from 'classnames';
 import Toast from './Toast.js';
+import { Box } from '../utils/index.js';
 export const ToastWrapper = React.forwardRef((_, ref) => {
     const [toasts, setToasts] = React.useState([]);
     const [placement, setPlacement] = React.useState('top');
@@ -14,7 +15,7 @@ export const ToastWrapper = React.forwardRef((_, ref) => {
         setToasts,
         setPlacement,
     }), []);
-    return (React.createElement("span", { className: cx(`iui-toast-wrapper`, `iui-placement-${placement}`) }, toasts.map((toastProps) => {
+    return (React.createElement(Box, { className: cx(`iui-toast-wrapper`, `iui-placement-${placement}`) }, toasts.map((toastProps) => {
         return (React.createElement(Toast, { key: toastProps.id, placementPosition: placementPosition, ...toastProps }));
     })));
 });

package/esm/core/ToggleSwitch/ToggleSwitch.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/toggle-switch.css';
-export declare type ToggleSwitchProps = {
+declare type ToggleSwitchProps = {
     /**
      * Label for the toggle switch.
      */
@@ -28,7 +29,7 @@ export declare type ToggleSwitchProps = {
 } | {
     size: 'small';
     icon?: never;
-}) & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>;
+});
 /**
  * A switch for turning on and off.
  * @example
@@ -47,5 +48,5 @@ export declare type ToggleSwitchProps = {
  * <caption>Toggle with icon</caption>
  * <ToggleSwitch label='With icon toggle' icon={<svg viewBox='0 0 16 16'><path d='M1 1v14h14V1H1zm13 1.7v10.6L8.7 8 14 2.7zM8 7.3L2.7 2h10.6L8 7.3zm-.7.7L2 13.3V2.7L7.3 8zm.7.7l5.3 5.3H2.7L8 8.7z' /></svg>} />
  */
-export declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLInputElement>>;
+export declare const ToggleSwitch: PolymorphicForwardRefComponent<"input", ToggleSwitchProps>;
 export default ToggleSwitch;