@itwin/itwinui-react 1.48.1 → 2.0.0-dev.1

package/esm/core/Table/hooks/useResizeColumns.js

@@ -19,122 +19,126 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { actions, makePropGetter, useGetLatest, } from 'react-table';
-export var useResizeColumns = function (ownerDocument) { return function (hooks) {
-    hooks.getResizerProps = [defaultGetResizerProps(ownerDocument)];
-    hooks.stateReducers.push(reducer);
-    hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
-}; };
+export var useResizeColumns = function (ownerDocument) {
+    return function (hooks) {
+        hooks.getResizerProps = [defaultGetResizerProps(ownerDocument)];
+        hooks.stateReducers.push(reducer);
+        hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
+    };
+};
 var isTouchEvent = function (event) {
     return event.type === 'touchstart';
 };
-var defaultGetResizerProps = function (ownerDocument) { return function (props, _a) {
-    var instance = _a.instance, header = _a.header, nextHeader = _a.nextHeader;
-    var dispatch = instance.dispatch;
-    var onResizeStart = function (e, header) {
-        var _a, _b, _c;
-        // lets not respond to multiple touches (e.g. 2 or 3 fingers)
-        if (isTouchEvent(e) && e.touches && e.touches.length > 1) {
-            return;
-        }
-        var headerIdWidths = getLeafHeaders(header).map(function (d) { return [
-            d.id,
-            getHeaderWidth(d),
-        ]; });
-        var nextHeaderIdWidths = nextHeader
-            ? getLeafHeaders(nextHeader).map(function (d) { return [d.id, getHeaderWidth(d)]; })
-            : [];
-        var clientX = isTouchEvent(e)
-            ? Math.round(e.touches[0].clientX)
-            : e.clientX;
-        var dispatchMove = function (clientXPos) {
-            return dispatch({ type: actions.columnResizing, clientX: clientXPos });
-        };
-        var dispatchEnd = function () {
-            return dispatch({
-                type: actions.columnDoneResizing,
+var defaultGetResizerProps = function (ownerDocument) {
+    return function (props, _a) {
+        var instance = _a.instance, header = _a.header, nextHeader = _a.nextHeader;
+        var dispatch = instance.dispatch;
+        var onResizeStart = function (e, header) {
+            var _a, _b, _c;
+            // lets not respond to multiple touches (e.g. 2 or 3 fingers)
+            if (isTouchEvent(e) && e.touches && e.touches.length > 1) {
+                return;
+            }
+            var headerIdWidths = getLeafHeaders(header).map(function (d) { return [
+                d.id,
+                getHeaderWidth(d),
+            ]; });
+            var nextHeaderIdWidths = nextHeader
+                ? getLeafHeaders(nextHeader).map(function (d) { return [d.id, getHeaderWidth(d)]; })
+                : [];
+            var clientX = isTouchEvent(e)
+                ? Math.round(e.touches[0].clientX)
+                : e.clientX;
+            var dispatchMove = function (clientXPos) {
+                return dispatch({ type: actions.columnResizing, clientX: clientXPos });
+            };
+            var dispatchEnd = function () {
+                return dispatch({
+                    type: actions.columnDoneResizing,
+                });
+            };
+            var handlersAndEvents = {
+                mouse: {
+                    moveEvent: 'mousemove',
+                    moveHandler: function (e) { return dispatchMove(e.clientX); },
+                    upEvent: 'mouseup',
+                    upHandler: function () {
+                        var _a, _b, _c;
+                        (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousemove', handlersAndEvents.mouse.moveHandler);
+                        (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseup', handlersAndEvents.mouse.upHandler);
+                        (_c = ownerDocument.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', handlersAndEvents.mouse.upHandler);
+                        dispatchEnd();
+                    },
+                },
+                touch: {
+                    moveEvent: 'touchmove',
+                    moveHandler: function (e) {
+                        if (e.cancelable) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }
+                        dispatchMove(e.touches[0].clientX);
+                    },
+                    upEvent: 'touchend',
+                    upHandler: function () {
+                        var _a, _b;
+                        (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(handlersAndEvents.touch.moveEvent, handlersAndEvents.touch.moveHandler);
+                        (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.removeEventListener(handlersAndEvents.touch.upEvent, handlersAndEvents.touch.moveHandler);
+                        dispatchEnd();
+                    },
+                },
+            };
+            var events = isTouchEvent(e)
+                ? handlersAndEvents.touch
+                : handlersAndEvents.mouse;
+            var passiveIfSupported = passiveEventSupported()
+                ? { passive: false }
+                : false;
+            (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.addEventListener(events.moveEvent, events.moveHandler, passiveIfSupported);
+            (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.addEventListener(events.upEvent, events.upHandler, passiveIfSupported);
+            if (!isTouchEvent(e)) {
+                (_c = ownerDocument.current) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', handlersAndEvents.mouse.upHandler, passiveIfSupported);
+            }
+            dispatch({
+                type: actions.columnStartResizing,
+                columnId: header.id,
+                columnWidth: getHeaderWidth(header),
+                nextColumnWidth: getHeaderWidth(nextHeader),
+                headerIdWidths: headerIdWidths,
+                nextHeaderIdWidths: nextHeaderIdWidths,
+                clientX: clientX,
             });
         };
-        var handlersAndEvents = {
-            mouse: {
-                moveEvent: 'mousemove',
-                moveHandler: function (e) { return dispatchMove(e.clientX); },
-                upEvent: 'mouseup',
-                upHandler: function () {
-                    var _a, _b, _c;
-                    (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousemove', handlersAndEvents.mouse.moveHandler);
-                    (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseup', handlersAndEvents.mouse.upHandler);
-                    (_c = ownerDocument.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', handlersAndEvents.mouse.upHandler);
-                    dispatchEnd();
+        return [
+            props,
+            {
+                onClick: function (e) {
+                    // Prevents from triggering sort
+                    e.stopPropagation();
                 },
-            },
-            touch: {
-                moveEvent: 'touchmove',
-                moveHandler: function (e) {
-                    if (e.cancelable) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                    }
-                    dispatchMove(e.touches[0].clientX);
+                onMouseDown: function (e) {
+                    e.persist();
+                    // Prevents from triggering drag'n'drop
+                    e.preventDefault();
+                    // Prevents from triggering sort
+                    e.stopPropagation();
+                    onResizeStart(e, header);
                 },
-                upEvent: 'touchend',
-                upHandler: function () {
-                    var _a, _b;
-                    (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(handlersAndEvents.touch.moveEvent, handlersAndEvents.touch.moveHandler);
-                    (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.removeEventListener(handlersAndEvents.touch.upEvent, handlersAndEvents.touch.moveHandler);
-                    dispatchEnd();
+                onTouchStart: function (e) {
+                    e.persist();
+                    // Prevents from triggering drag'n'drop
+                    e.preventDefault();
+                    onResizeStart(e, header);
                 },
+                style: {
+                    cursor: 'col-resize',
+                },
+                draggable: false,
+                role: 'separator',
             },
-        };
-        var events = isTouchEvent(e)
-            ? handlersAndEvents.touch
-            : handlersAndEvents.mouse;
-        var passiveIfSupported = passiveEventSupported()
-            ? { passive: false }
-            : false;
-        (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.addEventListener(events.moveEvent, events.moveHandler, passiveIfSupported);
-        (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.addEventListener(events.upEvent, events.upHandler, passiveIfSupported);
-        if (!isTouchEvent(e)) {
-            (_c = ownerDocument.current) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', handlersAndEvents.mouse.upHandler, passiveIfSupported);
-        }
-        dispatch({
-            type: actions.columnStartResizing,
-            columnId: header.id,
-            columnWidth: getHeaderWidth(header),
-            nextColumnWidth: getHeaderWidth(nextHeader),
-            headerIdWidths: headerIdWidths,
-            nextHeaderIdWidths: nextHeaderIdWidths,
-            clientX: clientX,
-        });
+        ];
     };
-    return [
-        props,
-        {
-            onClick: function (e) {
-                // Prevents from triggering sort
-                e.stopPropagation();
-            },
-            onMouseDown: function (e) {
-                e.persist();
-                // Prevents from triggering drag'n'drop
-                e.preventDefault();
-                // Prevents from triggering sort
-                e.stopPropagation();
-                onResizeStart(e, header);
-            },
-            onTouchStart: function (e) {
-                e.persist();
-                // Prevents from triggering drag'n'drop
-                e.preventDefault();
-                onResizeStart(e, header);
-            },
-            style: {
-                cursor: 'col-resize',
-            },
-            draggable: false,
-            role: 'separator',
-        },
-    ];
-}; };
+};
 useResizeColumns.pluginName = 'useResizeColumns';
 var reducer = function (newState, action, previousState, instance) {
     if (action.type === actions.init) {

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

@@ -22,10 +22,6 @@ export declare type TabProps = {
      */
     children?: React.ReactNode;
 } & React.HTMLAttributes<HTMLButtonElement>;
-/**
- * @deprecated Use `TabProps` instead.
- */
-export declare type HorizontalTabProps = TabProps;
 /**
  * Individual tab component to be used in the `labels` prop of `Tabs`.
  * @example
@@ -35,8 +31,4 @@ export declare type HorizontalTabProps = TabProps;
  * ];
  */
 export declare const Tab: (props: TabProps) => JSX.Element;
-/**
- * @deprecated Use `Tab` instead.
- */
-export declare const HorizontalTab: (props: TabProps) => JSX.Element;
 export default TabProps;

package/esm/core/Tabs/Tab.js

@@ -50,7 +50,3 @@ export var Tab = function (props) {
             sublabel && React.createElement("div", { className: 'iui-tab-description' }, sublabel))),
         children));
 };
-/**
- * @deprecated Use `Tab` instead.
- */
-export var HorizontalTab = Tab;

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

@@ -1,5 +1,22 @@
 import React from 'react';
 import '@itwin/itwinui-css/css/tabs.css';
+declare type TabsOrientationProps = {
+    /**
+     * Orientation of the tabs.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal';
+    /**
+     * Type of the tabs.
+     *
+     * If `orientation = 'vertical'`, `pill` is not applicable.
+     * @default 'default'
+     */
+    type?: 'default' | 'borderless' | 'pill';
+} | {
+    orientation: 'vertical';
+    type?: 'default' | 'borderless';
+};
 export declare type TabsProps = {
     /**
      * Elements shown for each tab.
@@ -25,16 +42,6 @@ export declare type TabsProps = {
      * @default 'blue'
      */
     color?: 'blue' | 'green';
-    /**
-     * Type of the tabs.
-     * @default 'default'
-     */
-    type?: 'default' | 'borderless' | 'pill';
-    /**
-     * Orientation of the tabs.
-     * @default 'horizontal'
-     */
-    orientation?: 'horizontal' | 'vertical';
     /**
      * Custom CSS class name for tabs.
      */
@@ -51,8 +58,14 @@ export declare type TabsProps = {
      * Content inside the tab panel.
      */
     children?: React.ReactNode;
-};
+} & TabsOrientationProps;
+/**
+ * @deprecated Since v2, use `TabProps` with `Tabs`
+ */
 export declare type HorizontalTabsProps = Omit<TabsProps, 'orientation'>;
+/**
+ * @deprecated Since v2, use `TabProps` with `Tabs`
+ */
 export declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'> & {
     type?: 'default' | 'borderless';
 };
@@ -67,6 +80,9 @@ export declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'>
  * <Tabs labels={tabs} />
  *
  * @example
+ * <Tabs orientation='vertical' labels={tabs} />
+ *
+ * @example
  * const tabsWithSublabels = [
  *   <Tab label='Label 1' sublabel='First tab' />,
  *   <Tab label='Label 2' sublabel='Active tab' />,
@@ -82,6 +98,8 @@ export declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'>
  */
 export declare const Tabs: (props: TabsProps) => JSX.Element;
 /**
+ * @deprecated Since v2, directly use `Tabs` with `orientation: 'horizontal'`
+ *
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
  * const tabs = [
@@ -93,12 +111,14 @@ export declare const Tabs: (props: TabsProps) => JSX.Element;
  */
 export declare const HorizontalTabs: (props: HorizontalTabsProps) => JSX.Element;
 /**
+ * @deprecated Since v2, directly use `Tabs` with `orientation: 'vertical'`
+ *
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
  * const tabs = [
  *   <Tab label='Label 1' sublabel='First tab' />,
  *   <Tab label='Label 2' sublabel='Active tab' />,
- *   <Tab label='Label 3'  sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
+ *   <Tab label='Label 3' sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
  * ];
  * <VerticalTabs labels={tabs} activeIndex={1}>Tabpanel content</VerticalTabs>
  */

package/esm/core/Tabs/Tabs.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme, useMergedRefs, getBoundedValue, getWindow, useContainerWidth, } from '../utils';
+import { useTheme, useMergedRefs, getBoundedValue, useContainerWidth, } from '../utils';
 import '@itwin/itwinui-css/css/tabs.css';
 import { Tab } from './Tab';
 /**
@@ -40,6 +40,9 @@ import { Tab } from './Tab';
  * <Tabs labels={tabs} />
  *
  * @example
+ * <Tabs orientation='vertical' labels={tabs} />
+ *
+ * @example
  * const tabsWithSublabels = [
  *   <Tab label='Label 1' sublabel='First tab' />,
  *   <Tab label='Label 2' sublabel='Active tab' />,
@@ -54,24 +57,23 @@ import { Tab } from './Tab';
  * <Tabs labels={tabsWithIcons} type='pill' />
  */
 export var Tabs = function (props) {
-    var _a, _b, _c;
-    var labels = props.labels, activeIndex = props.activeIndex, onTabSelected = props.onTabSelected, _d = props.focusActivationMode, focusActivationMode = _d === void 0 ? 'auto' : _d, _e = props.type, type = _e === void 0 ? 'default' : _e, _f = props.color, color = _f === void 0 ? 'blue' : _f, _g = props.orientation, orientation = _g === void 0 ? 'horizontal' : _g, tabsClassName = props.tabsClassName, contentClassName = props.contentClassName, wrapperClassName = props.wrapperClassName, children = props.children, rest = __rest(props, ["labels", "activeIndex", "onTabSelected", "focusActivationMode", "type", "color", "orientation", "tabsClassName", "contentClassName", "wrapperClassName", "children"]);
+    var labels = props.labels, activeIndex = props.activeIndex, onTabSelected = props.onTabSelected, _a = props.focusActivationMode, focusActivationMode = _a === void 0 ? 'auto' : _a, _b = props.type, type = _b === void 0 ? 'default' : _b, _c = props.color, color = _c === void 0 ? 'blue' : _c, _d = props.orientation, orientation = _d === void 0 ? 'horizontal' : _d, tabsClassName = props.tabsClassName, contentClassName = props.contentClassName, wrapperClassName = props.wrapperClassName, children = props.children, rest = __rest(props, ["labels", "activeIndex", "onTabSelected", "focusActivationMode", "type", "color", "orientation", "tabsClassName", "contentClassName", "wrapperClassName", "children"]);
     useTheme();
     var tablistRef = React.useRef(null);
-    var _h = useContainerWidth(type !== 'default'), tablistSizeRef = _h[0], tabsWidth = _h[1];
+    var _e = useContainerWidth(type !== 'default'), tablistSizeRef = _e[0], tabsWidth = _e[1];
     var refs = useMergedRefs(tablistRef, tablistSizeRef);
-    var _j = React.useState(function () {
+    var _f = React.useState(function () {
         return activeIndex != null
             ? getBoundedValue(activeIndex, 0, labels.length - 1)
             : 0;
-    }), currentActiveIndex = _j[0], setCurrentActiveIndex = _j[1];
+    }), currentActiveIndex = _f[0], setCurrentActiveIndex = _f[1];
     React.useLayoutEffect(function () {
         if (activeIndex != null && currentActiveIndex !== activeIndex) {
             setCurrentActiveIndex(getBoundedValue(activeIndex, 0, labels.length - 1));
         }
     }, [activeIndex, currentActiveIndex, labels.length]);
     // CSS custom properties to place the active stripe
-    var _k = React.useState({}), stripeProperties = _k[0], setStripeProperties = _k[1];
+    var _g = React.useState({}), stripeProperties = _g[0], setStripeProperties = _g[1];
     React.useLayoutEffect(function () {
         if (type !== 'default' && tablistRef.current != undefined) {
             var activeTab = tablistRef.current.children[currentActiveIndex];
@@ -85,14 +87,14 @@ export var Tabs = function (props) {
             })));
         }
     }, [currentActiveIndex, type, orientation, tabsWidth]);
-    var _l = React.useState(), focusedIndex = _l[0], setFocusedIndex = _l[1];
+    var _h = React.useState(), focusedIndex = _h[0], setFocusedIndex = _h[1];
     React.useEffect(function () {
         if (tablistRef.current && focusedIndex !== undefined) {
             var tab = tablistRef.current.querySelectorAll('.iui-tab')[focusedIndex];
             tab === null || tab === void 0 ? void 0 : tab.focus();
         }
     }, [focusedIndex]);
-    var _m = React.useState(false), hasSublabel = _m[0], setHasSublabel = _m[1]; // used for setting size
+    var _j = React.useState(false), hasSublabel = _j[0], setHasSublabel = _j[1]; // used for setting size
     React.useLayoutEffect(function () {
         var _a;
         setHasSublabel(type !== 'pill' && // pill tabs should never have sublabels
@@ -165,12 +167,10 @@ export var Tabs = function (props) {
                 break;
         }
     };
-    var isIE = !((_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, '--stripe-width', '100px'));
     return (React.createElement("div", { className: cx('iui-tabs-wrapper', "iui-".concat(orientation), wrapperClassName), style: stripeProperties },
         React.createElement("ul", __assign({ className: cx('iui-tabs', "iui-".concat(type), {
                 'iui-green': color === 'green',
-                'iui-animated': type !== 'default' && !isIE,
-                'iui-not-animated': isIE,
+                'iui-animated': type !== 'default',
                 'iui-large': hasSublabel,
             }, tabsClassName), role: 'tablist', ref: refs, onKeyDown: onKeyDown }, rest), labels.map(function (label, index) {
             var onClick = function () {
@@ -195,6 +195,8 @@ export var Tabs = function (props) {
         children && (React.createElement("div", { className: cx('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));
 };
 /**
+ * @deprecated Since v2, directly use `Tabs` with `orientation: 'horizontal'`
+ *
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
  * const tabs = [
@@ -206,12 +208,14 @@ export var Tabs = function (props) {
  */
 export var HorizontalTabs = function (props) { return (React.createElement(Tabs, __assign({ orientation: 'horizontal' }, props))); };
 /**
+ * @deprecated Since v2, directly use `Tabs` with `orientation: 'vertical'`
+ *
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
  * const tabs = [
  *   <Tab label='Label 1' sublabel='First tab' />,
  *   <Tab label='Label 2' sublabel='Active tab' />,
- *   <Tab label='Label 3'  sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
+ *   <Tab label='Label 3' sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
  * ];
  * <VerticalTabs labels={tabs} activeIndex={1}>Tabpanel content</VerticalTabs>
  */

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

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

package/esm/core/Tabs/index.js

@@ -2,5 +2,5 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { VerticalTabs, HorizontalTabs } from './Tabs';
-export { Tab, HorizontalTab } from './Tab';
+export { Tabs, VerticalTabs, HorizontalTabs } from './Tabs';
+export { Tab } from './Tab';

package/esm/core/Tag/Tag.js

@@ -26,8 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import SvgCloseSmall from '@itwin/itwinui-icons-react/cjs/icons/CloseSmall';
-import { useTheme } from '../utils';
+import { useTheme, SvgCloseSmall } from '../utils';
 import '@itwin/itwinui-css/css/tag.css';
 import { IconButton } from '../Buttons';
 /**

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/input.css';
 export declare type TextareaProps = {
     /**
      * Set focus on textarea element.

package/esm/core/Textarea/Textarea.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useMergedRefs, useTheme } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/input.css';
 /**
  * Basic textarea component
  * @example
@@ -44,6 +44,6 @@ export var Textarea = React.forwardRef(function (props, ref) {
             textAreaRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement("textarea", __assign({ className: cx('iui-textarea', className), rows: rows, ref: refs }, rest)));
+    return (React.createElement("textarea", __assign({ className: cx('iui-input', className), rows: rows, ref: refs }, rest)));
 });
 export default Textarea;

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

@@ -1,21 +1,31 @@
 import React from 'react';
-import { ThemeOptions, ThemeType } from '../utils';
-export declare type ThemeProviderProps = {
-    /**
-     * Theme to be applied. If not set, light theme will be used.
-     */
-    theme?: ThemeType;
-    /**
-     * Optional children.
-     */
-    children?: React.ReactNode;
-    /**
-     * Options that can be specified to override default theming behavior.
-     */
-    themeOptions?: ThemeOptions;
-};
+import type { PolymorphicComponentProps, PolymorphicForwardRefComponent, ThemeOptions, ThemeType, UseThemeProps } from '../utils';
+import '@itwin/itwinui-css/css/global.css';
+import '@itwin/itwinui-variables/index.css';
+export declare type ThemeProviderProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, UseThemeProps>;
 /**
- * Component providing global styles that are required for all components and allows changing theme.
+ * 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
+ * light theme.
+ *
+ * If you want to theme the entire app, you should use this component at the root.
+ * The `as` prop can be used to render a `<body>` element instead of a `<div>`.
+ *
+ * You can also use this component to apply a different theme to only a part of the tree.
+ *
+ * @example
+ * <ThemeProvider theme='os'>
+ *  <App />
+ * </ThemeProvider>
+ *
+ * @example
+ * <ThemeProvider as='body'>
+ *   <App />
+ * </ThemeProvider>
  */
-export declare const ThemeProvider: (props: ThemeProviderProps) => JSX.Element;
+export declare const ThemeProvider: PolymorphicForwardRefComponent<"div", UseThemeProps>;
 export default ThemeProvider;
+export declare const ThemeContext: React.Context<{
+    theme?: ThemeType | undefined;
+    themeOptions?: ThemeOptions | undefined;
+} | undefined>;

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -1,15 +1,73 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 /*---------------------------------------------------------------------------------------------
  * 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 { useTheme } from '../utils';
+import cx from 'classnames';
+import { useTheme, useMediaQuery } from '../utils';
+import '@itwin/itwinui-css/css/global.css';
+import '@itwin/itwinui-variables/index.css';
 /**
- * Component providing global styles that are required for all components and allows changing theme.
+ * 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
+ * light theme.
+ *
+ * If you want to theme the entire app, you should use this component at the root.
+ * The `as` prop can be used to render a `<body>` element instead of a `<div>`.
+ *
+ * You can also use this component to apply a different theme to only a part of the tree.
+ *
+ * @example
+ * <ThemeProvider theme='os'>
+ *  <App />
+ * </ThemeProvider>
+ *
+ * @example
+ * <ThemeProvider as='body'>
+ *   <App />
+ * </ThemeProvider>
  */
-export var ThemeProvider = function (props) {
-    var theme = props.theme, children = props.children, themeOptions = props.themeOptions;
+export var ThemeProvider = React.forwardRef(function (props, ref) {
+    var _a;
+    var theme = props.theme, children = props.children, themeOptions = props.themeOptions, _b = props.as, Element = _b === void 0 ? 'div' : _b, className = props.className, rest = __rest(props, ["theme", "children", "themeOptions", "as", "className"]);
+    var hasChildren = React.Children.count(children) > 0;
+    var parentContext = React.useContext(ThemeContext);
+    var prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
+    var prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
+    var shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
+    var shouldApplyHC = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast;
+    // only provide context if wrapped around children
+    return hasChildren ? (React.createElement(ThemeContext.Provider, { value: { theme: theme, themeOptions: themeOptions } },
+        React.createElement(Element, __assign({ className: cx('iui-root', className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: ref }, rest), children))) : (
+    // otherwise just apply theme on the root using this wrapper component
+    React.createElement(ThemeLogicWrapper, { theme: theme !== null && theme !== void 0 ? theme : parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
+});
+export default ThemeProvider;
+export var ThemeContext = React.createContext(undefined);
+var ThemeLogicWrapper = function (_a) {
+    var theme = _a.theme, themeOptions = _a.themeOptions;
     useTheme(theme, themeOptions);
-    return React.createElement(React.Fragment, null, children);
+    return React.createElement(React.Fragment, null);
 };
-export default ThemeProvider;