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

package/cjs/core/Tag/Tag.js

@@ -42,16 +42,14 @@ const index_js_2 = require("../Buttons/index.js");
  * <Tag onRemove={() => alert('Closed a tag!')}>I'm a tag</Tag>
  * <Tag variant='basic'>Basic tag</Tag>
  */
-const Tag = (props) => {
+exports.Tag = React.forwardRef((props, forwardedRef) => {
     const { className, variant = 'default', children, onRemove, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("span", { className: (0, classnames_1.default)({
+    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)({
             '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(index_js_1.Box, { as: 'span', className: 'iui-tag-label' }, children)) : (children),
         onRemove && (React.createElement(index_js_2.IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', className: 'iui-tag-button' },
             React.createElement(index_js_1.SvgCloseSmall, { "aria-hidden": true })))));
-};
-exports.Tag = Tag;
+});
 exports.default = exports.Tag;

package/cjs/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/cjs/core/Tag/TagContainer.js

@@ -41,13 +41,11 @@ require("@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>
  */
-const TagContainer = (props) => {
+exports.TagContainer = React.forwardRef((props, forwardedRef) => {
     const { className, children, overflow, background = 'none', ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-tag-container', {
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tag-container', {
             [`iui-${overflow}`]: !!overflow,
             'iui-visible': background !== 'none',
-        }, className), ...rest }, children));
-};
-exports.TagContainer = TagContainer;
+        }, className), ref: forwardedRef, ...rest }, children));
+});
 exports.default = exports.TagContainer;

package/cjs/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/cjs/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/cjs/core/Textarea/Textarea.js

@@ -43,7 +43,6 @@ require("@itwin/itwinui-css/css/input.css");
  */
 exports.Textarea = React.forwardRef((props, ref) => {
     const { className, rows = 3, setFocus = false, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const textAreaRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(ref, textAreaRef);
     React.useEffect(() => {
@@ -51,6 +50,6 @@ exports.Textarea = React.forwardRef((props, ref) => {
             textAreaRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement("textarea", { className: (0, classnames_1.default)('iui-input', className), rows: rows, ref: refs, ...rest }));
+    return (React.createElement(index_js_1.Box, { as: 'textarea', className: (0, classnames_1.default)('iui-input', className), rows: rows, ref: refs, ...rest }));
 });
 exports.default = exports.Textarea;

package/cjs/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/cjs/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/cjs/core/{Typography/Small/Small.js → ThemeProvider/ThemeContext.js}

@@ -22,27 +22,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Small = void 0;
+exports.ThemeContext = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
-const index_js_1 = require("../../utils/index.js");
-require("@itwin/itwinui-css/css/text.css");
-/**
- * @deprecated Since v2, use `Text` with variant 'small'.
- * @example
- * <Text variant='small' as='small'>I'm some small text!</Text>
- */
-exports.Small = React.forwardRef((props, ref) => {
-    const { className, isMuted = false, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("small", { ref: ref, className: (0, classnames_1.default)('iui-text-small', { 'iui-text-muted': isMuted }, className), ...rest }));
-});
-exports.default = exports.Small;
+exports.ThemeContext = React.createContext(undefined);

package/cjs/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/cjs/core/ThemeProvider/ThemeProvider.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeContext = exports.ThemeProvider = void 0;
+exports.ThemeProvider = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -34,6 +34,7 @@ exports.ThemeContext = exports.ThemeProvider = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
+const ThemeContext_js_1 = require("./ThemeContext.js");
 require("@itwin/itwinui-css/css/global.css");
 require("@itwin/itwinui-variables/index.css");
 /**
@@ -67,23 +68,17 @@ exports.ThemeProvider = React.forwardRef((props, ref) => {
     const { theme: themeProp, children, themeOptions, ...rest } = props;
     const rootRef = React.useRef(null);
     const mergedRefs = (0, index_js_1.useMergedRefs)(rootRef, ref);
-    const hasChildren = React.Children.count(children) > 0;
-    const parentContext = React.useContext(exports.ThemeContext);
+    const parentContext = React.useContext(ThemeContext_js_1.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(exports.ThemeContext.Provider, { value: contextValue }, children)));
+        React.createElement(ThemeContext_js_1.ThemeContext.Provider, { value: contextValue }, children)));
 });
 exports.default = exports.ThemeProvider;
-exports.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 = (0, index_js_1.useMergedRefs)(ref, forwardedRef);
     const prefersDark = (0, index_js_1.useMediaQuery)('(prefers-color-scheme: dark)');
@@ -92,10 +87,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 = (0, index_js_1.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: (0, classnames_1.default)('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(index_js_1.Box, { className: (0, classnames_1.default)('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;
-    (0, index_js_1.useTheme)(theme, themeOptions);
-    return React.createElement(React.Fragment, null);
-};

package/cjs/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/cjs/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/cjs/core/Tile/Tile.js

@@ -47,16 +47,15 @@ const TileContext = React.createContext(undefined);
  *   name={<Tile.Action href='/new-page'>Tile name<Tile.Action/>}
  * />
  */
-const TileAction = (props) => {
+exports.TileAction = React.forwardRef((props, forwardedRef) => {
     const tileContext = (0, index_js_1.useSafeContext)(TileContext);
     React.useEffect(() => {
         if (!(0, index_js_1.supportsHas)()) {
             tileContext.setActionable(true);
         }
     }, [tileContext]);
-    return React.createElement(index_js_1.LinkAction, { ...props });
-};
-exports.TileAction = TileAction;
+    return React.createElement(index_js_1.LinkAction, { ref: forwardedRef, ...props });
+});
 /**
  * Tile component that displays content and actions in a card-like format.
  * @example
@@ -74,29 +73,28 @@ exports.TileAction = TileAction;
  *  isNew={false}
  * />
  */
-exports.Tile = Object.assign((props) => {
+exports.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;
-    (0, index_js_1.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(index_js_1.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(index_js_1.LinkAction, { as: 'button', onClick: !isDisabled ? onClick : undefined, "aria-disabled": isDisabled }, name)) : (name))));
+        React.createElement(index_js_1.Box, { as: 'span', className: 'iui-tile-name-label' }, isActionable && onClick ? (React.createElement(index_js_1.LinkAction, { as: 'button', onClick: !isDisabled ? onClick : undefined, "aria-disabled": isDisabled }, name)) : (name))));
     return (React.createElement(TileContext.Provider, { value: { setActionable: setLocalActionable } },
-        React.createElement("div", { className: (0, classnames_1.default)('iui-tile', {
+        React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('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(index_js_1.Box, { className: 'iui-tile-thumbnail' },
+                typeof thumbnail === 'string' ? (React.createElement(index_js_1.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: (0, classnames_1.default)('iui-thumbnail-icon', thumbnail.props.className),
@@ -111,11 +109,11 @@ exports.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(index_js_1.Box, { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
+            React.createElement(index_js_1.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(index_js_1.Box, { className: 'iui-tile-description' }, description)),
+                metadata != undefined && (React.createElement(index_js_1.Box, { className: 'iui-tile-metadata' }, metadata)),
                 moreOptions && (React.createElement(index_js_2.DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: (close) => moreOptions.map((option) => React.cloneElement(option, {
                         onClick: (value) => {
                             var _a, _b;
@@ -123,14 +121,14 @@ exports.Tile = Object.assign((props) => {
                             (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
                         },
                     })) },
-                    React.createElement("div", { className: (0, classnames_1.default)('iui-tile-more-options', {
+                    React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile-more-options', {
                             'iui-visible': isMenuVisible,
                         }) },
                         React.createElement(index_js_3.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
                             React.createElement(index_js_1.SvgMore, null))))),
                 children),
-            buttons && React.createElement("div", { className: 'iui-tile-buttons' }, buttons))));
-}, {
+            buttons && React.createElement(index_js_1.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/cjs/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/cjs/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/cjs/core/TimePicker/TimePicker.js

@@ -106,9 +106,8 @@ const defaultCombinedRenderer = (date, precision) => {
  * @example
  * <TimePicker date={new Date()} onChange={(e) => console.log('New time value: ' + e)} />
  */
-const TimePicker = (props) => {
+exports.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;
-    (0, index_js_1.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);
@@ -228,14 +227,13 @@ 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: (0, classnames_1.default)('iui-time-picker', className), ...rest },
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('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' }))));
-};
-exports.TimePicker = TimePicker;
+});
 const TimePickerColumn = (props) => {
     const { data, onFocusChange, onSelectChange, isSameFocused, isSameSelected, setFocus = false, valueRenderer, precision = 'minutes', className = 'iui-time', } = props;
     const needFocus = React.useRef(setFocus);
@@ -278,10 +276,10 @@ const TimePickerColumn = (props) => {
                 break;
         }
     };
-    return (React.createElement("div", { className: className },
+    return (React.createElement(index_js_1.Box, { className: `${className}` },
         React.createElement("ol", null, data.map((value, index) => {
             const isSameFocus = isSameFocused(value);
-            return (React.createElement("li", { onKeyDown: (event) => {
+            return (React.createElement(index_js_1.Box, { as: 'li', onKeyDown: (event) => {
                     handleTimeKeyDown(event, data.length - 1, (index) => onFocusChange(data[index]), (index) => onSelectChange(data[index]), index);
                 }, className: (0, classnames_1.default)({
                     'iui-selected': isSameSelected(value),

package/cjs/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/cjs/core/Toast/Toast.js

@@ -134,7 +134,7 @@ 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(index_js_1.Box, { ref: thisElement, className: 'iui-toast-all', style: {
             height,
             ...marginStyle(),
         } },
@@ -149,10 +149,10 @@ exports.Toast = Toast;
 const ToastPresentation = (props) => {
     const { content, category, type = 'temporary', link, hasCloseButton, onClose, className, ...rest } = props;
     const StatusIcon = index_js_1.StatusIconMap[category];
-    return (React.createElement("div", { className: (0, classnames_1.default)(`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(index_js_1.Box, { className: (0, classnames_1.default)(`iui-toast iui-${category}`, className), ...rest },
+        React.createElement(index_js_1.Box, { className: 'iui-status-area' }, React.createElement(StatusIcon, { className: 'iui-icon' })),
+        React.createElement(index_js_1.Box, { className: 'iui-message' }, content),
+        link && (React.createElement(index_js_1.Box, { as: 'a', className: 'iui-toast-anchor', onClick: link.onClick }, link.title)),
         (type === 'persisting' || hasCloseButton) && (React.createElement(index_js_2.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
             React.createElement(index_js_1.SvgCloseSmall, null)))));
 };

package/cjs/core/Toast/ToastWrapper.js

@@ -35,6 +35,7 @@ require("@itwin/itwinui-css/css/toast.css");
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Toast_js_1 = __importDefault(require("./Toast.js"));
+const index_js_1 = require("../utils/index.js");
 exports.ToastWrapper = React.forwardRef((_, ref) => {
     const [toasts, setToasts] = React.useState([]);
     const [placement, setPlacement] = React.useState('top');
@@ -43,7 +44,7 @@ exports.ToastWrapper = React.forwardRef((_, ref) => {
         setToasts,
         setPlacement,
     }), []);
-    return (React.createElement("span", { className: (0, classnames_1.default)(`iui-toast-wrapper`, `iui-placement-${placement}`) }, toasts.map((toastProps) => {
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)(`iui-toast-wrapper`, `iui-placement-${placement}`) }, toasts.map((toastProps) => {
         return (React.createElement(Toast_js_1.default, { key: toastProps.id, placementPosition: placementPosition, ...toastProps }));
     })));
 });

package/cjs/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;

package/cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -61,7 +61,6 @@ exports.ToggleSwitch = React.forwardRef((props, ref) => {
         delete props.icon;
     }
     const { disabled = false, labelPosition = 'right', label, setFocus = false, className, style, size = 'default', ...rest } = props;
-    (0, index_js_1.useTheme)();
     const inputElementRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
     const WrapperComponent = label ? 'label' : 'div';
@@ -75,13 +74,8 @@ exports.ToggleSwitch = React.forwardRef((props, ref) => {
             'iui-label-on-right': label && labelPosition === 'right',
             'iui-label-on-left': label && labelPosition === 'left',
         }, className), "data-iui-size": size, style: style },
-        React.createElement("input", { className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: refs, ...rest }),
-        icon &&
-            size !== 'small' &&
-            React.cloneElement(icon, {
-                className: (0, classnames_1.default)('iui-toggle-switch-icon', icon.props.className),
-                'aria-hidden': true,
-            }),
-        label && React.createElement("span", { className: 'iui-toggle-switch-label' }, label)));
+        React.createElement(index_js_1.Box, { as: 'input', className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: refs, ...rest }),
+        icon && size !== 'small' && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-toggle-switch-icon', "aria-hidden": true }, icon)),
+        label && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-toggle-switch-label' }, label))));
 });
 exports.default = exports.ToggleSwitch;

package/cjs/core/ToggleSwitch/index.d.ts

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

package/cjs/core/Tooltip/Tooltip.js

@@ -48,8 +48,7 @@ require("@itwin/itwinui-css/css/tooltip.css");
  */
 const Tooltip = (props) => {
     const { content, children, className, style, visible, ref, id, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement(index_js_1.Popover, { visible: visible, interactive: false, content: React.createElement("div", { className: (0, classnames_1.default)('iui-tooltip', className), style: style, role: 'tooltip', id: id }, content), offset: [0, 4], ref: ref, ...rest }, children && React.cloneElement(children, { title: undefined })));
+    return (React.createElement(index_js_1.Popover, { visible: visible, interactive: false, content: React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tooltip', className), style: style, role: 'tooltip', id: id }, content), offset: [0, 4], ref: ref, ...rest }, children && React.cloneElement(children, { title: undefined })));
 };
 exports.Tooltip = Tooltip;
 exports.default = exports.Tooltip;

package/cjs/core/Tooltip/index.d.ts

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

package/cjs/core/Tree/Tree.d.ts

@@ -77,7 +77,7 @@ export declare type TreeProps<T> = {
      * @beta
      */
     enableVirtualization?: boolean;
-} & Omit<CommonProps, 'title'>;
+} & CommonProps;
 /**
  * Tree component used to display a hierarchical structure of `TreeNodes`.
  * User should control state of expanded, selected and disabled nodes using `getNode` prop.