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

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

@@ -10,7 +10,6 @@ const isTouchEvent = (event) => {
 const defaultGetResizerProps = (ownerDocument) => (props, { instance, header, nextHeader, }) => {
     const { dispatch } = instance;
     const onResizeStart = (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;
@@ -35,10 +34,9 @@ const defaultGetResizerProps = (ownerDocument) => (props, { instance, header, ne
                 moveHandler: (e) => dispatchMove(e.clientX),
                 upEvent: 'mouseup',
                 upHandler: () => {
-                    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);
+                    ownerDocument.current?.removeEventListener('mousemove', handlersAndEvents.mouse.moveHandler);
+                    ownerDocument.current?.removeEventListener('mouseup', handlersAndEvents.mouse.upHandler);
+                    ownerDocument.current?.removeEventListener('mouseleave', handlersAndEvents.mouse.upHandler);
                     dispatchEnd();
                 },
             },
@@ -53,9 +51,8 @@ const defaultGetResizerProps = (ownerDocument) => (props, { instance, header, ne
                 },
                 upEvent: 'touchend',
                 upHandler: () => {
-                    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);
+                    ownerDocument.current?.removeEventListener(handlersAndEvents.touch.moveEvent, handlersAndEvents.touch.moveHandler);
+                    ownerDocument.current?.removeEventListener(handlersAndEvents.touch.upEvent, handlersAndEvents.touch.moveHandler);
                     dispatchEnd();
                 },
             },
@@ -66,10 +63,10 @@ const defaultGetResizerProps = (ownerDocument) => (props, { instance, header, ne
         const 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);
+        ownerDocument.current?.addEventListener(events.moveEvent, events.moveHandler, passiveIfSupported);
+        ownerDocument.current?.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);
+            ownerDocument.current?.addEventListener('mouseleave', handlersAndEvents.mouse.upHandler, passiveIfSupported);
         }
         dispatch({
             type: actions.columnStartResizing,
@@ -153,8 +150,8 @@ const reducer = (newState, action, previousState, instance) => {
         const newColumnWidths = getColumnWidths(headerIdWidths, deltaX / columnWidth);
         const isTableWidthDecreasing = calculateTableWidth(newColumnWidths, instance.flatHeaders) <
             instance.tableWidth;
-        const newNextColumnWidths = (instance === null || instance === void 0 ? void 0 : instance.columnResizeMode) === 'fit' ||
-            ((instance === null || instance === void 0 ? void 0 : instance.columnResizeMode) === 'expand' && isTableWidthDecreasing)
+        const newNextColumnWidths = instance?.columnResizeMode === 'fit' ||
+            (instance?.columnResizeMode === 'expand' && isTableWidthDecreasing)
             ? getColumnWidths(nextHeaderIdWidths, -deltaX / nextColumnWidth)
             : {};
         if (!isNewColumnWidthsValid(newColumnWidths, instance.flatHeaders) ||
@@ -164,7 +161,7 @@ const reducer = (newState, action, previousState, instance) => {
         }
         // Setting `width` here because it might take several rerenders until actual column width is set.
         // Also setting after the actual resize happened.
-        instance === null || instance === void 0 ? void 0 : instance.flatHeaders.forEach((h) => {
+        instance?.flatHeaders.forEach((h) => {
             if (!h.width) {
                 h.width = h.resizeWidth;
             }
@@ -206,7 +203,7 @@ const isNewColumnWidthsValid = (columnWidths, headers) => {
         return false;
     }
     for (const [headerId, width] of Object.entries(columnWidths)) {
-        const header = headers === null || headers === void 0 ? void 0 : headers.find((h) => h.id === headerId);
+        const header = headers?.find((h) => h.id === headerId);
         if (!header) {
             continue;
         }
@@ -238,7 +235,6 @@ const useInstanceBeforeDimensions = (instance) => {
     const { flatHeaders, getHooks, state: { columnResizing }, columnResizeMode, } = instance;
     const getInstance = useGetLatest(instance);
     flatHeaders.forEach((header, index) => {
-        var _a;
         const resizeWidth = columnResizing.columnWidths[header.id];
         header.width = resizeWidth || header.width || header.originalWidth;
         header.isResizing = columnResizing.isResizingColumn === header.id;
@@ -258,7 +254,7 @@ const useInstanceBeforeDimensions = (instance) => {
         if (columnResizeMode === 'fit') {
             header.isResizerVisible =
                 (header.canResize && !!nextResizableHeader) ||
-                    (headerToResize && !!((_a = instance.flatHeaders[index + 1]) === null || _a === void 0 ? void 0 : _a.canResize));
+                    (headerToResize && !!instance.flatHeaders[index + 1]?.canResize);
             // When resize mode is `expand` show resizer on the current resizable column.
         }
         else {
@@ -272,8 +268,7 @@ const useInstanceBeforeDimensions = (instance) => {
     });
 };
 const getPreviousResizableHeader = (headerColumn, instance) => {
-    var _a;
-    const headersList = (((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders).filter(({ isVisible }) => isVisible);
+    const headersList = (headerColumn.parent?.columns || instance.flatHeaders).filter(({ isVisible }) => isVisible);
     const headerIndex = headersList.findIndex((h) => h.id === headerColumn.id);
     return [...headersList]
         .slice(0, headerIndex)
@@ -281,8 +276,7 @@ const getPreviousResizableHeader = (headerColumn, instance) => {
         .find((h) => !h.disableResizing);
 };
 const getNextResizableHeader = (headerColumn, instance) => {
-    var _a;
-    const headersList = (((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders).filter(({ isVisible }) => isVisible);
+    const headersList = (headerColumn.parent?.columns || instance.flatHeaders).filter(({ isVisible }) => isVisible);
     const headerIndex = headersList.findIndex((h) => h.id === headerColumn.id);
     return [...headersList]
         .slice(headerIndex + 1)
@@ -331,7 +325,7 @@ const passiveEventSupported = () => {
         };
         window.addEventListener('test', () => { }, options);
     }
-    catch (_a) {
+    catch {
         passiveSupported = false;
     }
     return passiveSupported;

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

@@ -23,14 +23,13 @@ export function useScrollToRow({ data, enableVirtualization, page, paginatorRend
     // For non-virtualized tables, we need to add a ref to each row
     // and scroll to the element
     React.useEffect(() => {
-        var _a;
         if (enableVirtualization ||
             scrollToIndex === undefined ||
             scrollToIndex === null ||
             scrollToIndex < 0) {
             return;
         }
-        (_a = rowRefs.current[pageRef.current[scrollToIndex].id]) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+        rowRefs.current[pageRef.current[scrollToIndex].id]?.scrollIntoView();
     }, [enableVirtualization, scrollToIndex]);
     const tableRowRef = React.useCallback((row) => {
         return (element) => {

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

@@ -10,7 +10,6 @@ export const useStickyColumns = (hooks) => {
     hooks.useInstance.push(useInstance);
 };
 const reducer = (newState, action) => {
-    var _a, _b;
     if (action.type === actions.init) {
         return {
             ...newState,
@@ -18,7 +17,7 @@ const reducer = (newState, action) => {
         };
     }
     if (action.type === actions.setScrolledLeft &&
-        ((_a = newState.sticky) === null || _a === void 0 ? void 0 : _a.isScrolledToLeft) !== action.value // Prevents unnecessary re-render
+        newState.sticky?.isScrolledToLeft !== action.value // Prevents unnecessary re-render
     ) {
         return {
             ...newState,
@@ -29,7 +28,7 @@ const reducer = (newState, action) => {
         };
     }
     if (action.type === actions.setScrolledRight &&
-        ((_b = newState.sticky) === null || _b === void 0 ? void 0 : _b.isScrolledToRight) !== action.value // Prevents unnecessary re-render
+        newState.sticky?.isScrolledToRight !== action.value // Prevents unnecessary re-render
     ) {
         return {
             ...newState,
@@ -45,9 +44,8 @@ const useInstance = (instance) => {
     const { flatHeaders } = instance;
     // Edge case. Saving original sticky state in case sticky columns are reordered.
     flatHeaders.forEach((header) => {
-        var _a;
         if (!header.originalSticky) {
-            header.originalSticky = (_a = header.sticky) !== null && _a !== void 0 ? _a : 'none';
+            header.originalSticky = header.sticky ?? 'none';
         }
         header.sticky =
             header.originalSticky === 'none' ? undefined : header.originalSticky;

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

@@ -27,15 +27,13 @@ const useInstance = (hasAnySubRows, instance) => {
         // Restore original sub-rows
         const setSubRows = (rows) => {
             rows.forEach((row) => {
-                var _a;
-                row.subRows = (_a = row.initialSubRows) !== null && _a !== void 0 ? _a : [];
+                row.subRows = row.initialSubRows ?? [];
                 setSubRows(row.subRows);
             });
         };
         setSubRows(instance.initialRows);
         let currentlyFilteredRows = [...instance.initialRows];
         instance.state.filters.forEach(({ id: columnId, value: filterValue }) => {
-            var _a;
             const column = instance.allColumns.find((c) => c.id === columnId);
             if (!column) {
                 return;
@@ -46,7 +44,7 @@ const useInstance = (hasAnySubRows, instance) => {
             };
             const filterFn = typeof column.filter === 'function'
                 ? column.filter
-                : filterTypes[(_a = column.filter) !== null && _a !== void 0 ? _a : 'text'];
+                : filterTypes[column.filter ?? 'text'];
             currentlyFilteredRows = currentlyFilteredRows.filter((row) => handleRowFiltering(row, filterFn, columnId, filterValue));
         });
         const filteredRows = [];

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tabs.css';
 declare type TabProps = {
     /**
      * The main label shown in the tab.

package/esm/core/Tabs/Tab.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tabs.css';
 /**
  * Individual tab component to be used in the `labels` prop of `Tabs`.
  * @example

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/tabs.css';
 export declare type OverflowOptions = {
     /**
      * Whether to allow tabs list to scroll when there is overflow,

package/esm/core/Tabs/Tabs.js

@@ -5,8 +5,8 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useMergedRefs, getBoundedValue, useContainerWidth, useIsomorphicLayoutEffect, useIsClient, useResizeObserver, Box, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tabs.css';
 import { Tab } from './Tab.js';
+import styles from '../../styles.js';
 /**
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
@@ -85,23 +85,21 @@ export const Tabs = (props) => {
     const [focusedIndex, setFocusedIndex] = React.useState();
     React.useEffect(() => {
         if (tablistRef.current && focusedIndex !== undefined) {
-            const tab = tablistRef.current.querySelectorAll('.iui-tab')[focusedIndex];
-            tab === null || tab === void 0 ? void 0 : tab.focus();
+            const tab = tablistRef.current.querySelectorAll(`.${styles['iui-tab']}`)[focusedIndex];
+            tab?.focus();
         }
     }, [focusedIndex]);
     const [hasSublabel, setHasSublabel] = React.useState(false); // used for setting size
     useIsomorphicLayoutEffect(() => {
-        var _a;
         setHasSublabel(type !== 'pill' && // pill tabs should never have sublabels
-            !!((_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.iui-tab-description')));
+            !!tablistRef.current?.querySelector(`.${styles['iui-tab-description']}`));
     }, [type]);
     const enableHorizontalScroll = React.useCallback((e) => {
-        var _a;
         const ownerDoc = tablistRef.current;
         if (ownerDoc === null) {
             return;
         }
-        let scrollLeft = (_a = ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.scrollLeft) !== null && _a !== void 0 ? _a : 0;
+        let scrollLeft = ownerDoc?.scrollLeft ?? 0;
         if (e.deltaY > 0 || e.deltaX > 0) {
             scrollLeft += 25;
         }
@@ -116,12 +114,12 @@ export const Tabs = (props) => {
         if (ownerDoc === null) {
             return;
         }
-        if (!(overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow) || orientation === 'vertical') {
+        if (!overflowOptions?.useOverflow || orientation === 'vertical') {
             ownerDoc.removeEventListener('wheel', enableHorizontalScroll);
             return;
         }
         ownerDoc.addEventListener('wheel', enableHorizontalScroll);
-    }, [overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow, orientation, enableHorizontalScroll]);
+    }, [overflowOptions?.useOverflow, orientation, enableHorizontalScroll]);
     const isTabHidden = (activeTab, isVertical) => {
         const ownerDoc = tablistRef.current;
         if (ownerDoc === null) {
@@ -201,9 +199,9 @@ export const Tabs = (props) => {
         setTimeout(() => {
             const ownerDoc = tablistRef.current;
             if (ownerDoc !== null &&
-                (overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow) &&
+                overflowOptions?.useOverflow &&
                 currentActiveIndex !== undefined) {
-                const activeTab = ownerDoc.querySelectorAll('.iui-tab')[currentActiveIndex];
+                const activeTab = ownerDoc.querySelectorAll(`.${styles['iui-tab']}`)[currentActiveIndex];
                 const isVertical = orientation === 'vertical';
                 const tabPlacement = isTabHidden(activeTab, isVertical);
                 if (tabPlacement) {
@@ -212,7 +210,7 @@ export const Tabs = (props) => {
             }
         }, 50);
     }, [
-        overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow,
+        overflowOptions?.useOverflow,
         currentActiveIndex,
         focusedIndex,
         orientation,
@@ -248,19 +246,19 @@ export const Tabs = (props) => {
     }, [orientation, setScrollingPlacement]);
     // apply correct mask when tabs list is resized
     const [resizeRef] = useResizeObserver(determineScrollingPlacement);
-    resizeRef(tablistRef === null || tablistRef === void 0 ? void 0 : tablistRef.current);
+    resizeRef(tablistRef?.current);
     // check if overflow tabs are scrolled to far edges
     React.useEffect(() => {
         const ownerDoc = tablistRef.current;
         if (ownerDoc === null) {
             return;
         }
-        if (!(overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow)) {
+        if (!overflowOptions?.useOverflow) {
             ownerDoc.removeEventListener('scroll', determineScrollingPlacement);
             return;
         }
         ownerDoc.addEventListener('scroll', determineScrollingPlacement);
-    }, [overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow, determineScrollingPlacement]);
+    }, [overflowOptions?.useOverflow, determineScrollingPlacement]);
     const onTabClick = React.useCallback((index) => {
         if (onTabSelected) {
             onTabSelected(index);
@@ -276,7 +274,7 @@ export const Tabs = (props) => {
             const tab = labels[index];
             return React.isValidElement(tab) && tab.props.disabled;
         };
-        let newIndex = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : currentActiveIndex;
+        let newIndex = focusedIndex ?? currentActiveIndex;
         /** focus next tab if delta is +1, previous tab if -1 */
         const focusTab = (delta = +1) => {
             do {
@@ -339,9 +337,8 @@ export const Tabs = (props) => {
             'aria-selected': index === currentActiveIndex,
             tabIndex: index === currentActiveIndex ? 0 : -1,
             onClick: (args) => {
-                var _a, _b;
                 onClick();
-                (_b = (_a = label.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, args);
+                label.props.onClick?.(args);
             },
         }))));
     }, [currentActiveIndex, onTabClick]);
@@ -351,7 +348,7 @@ export const Tabs = (props) => {
                 'iui-animated': type !== 'default' && isClient,
                 'iui-not-animated': type !== 'default' && !isClient,
                 'iui-large': hasSublabel,
-            }, tabsClassName), "data-iui-overflow": overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow, "data-iui-scroll-placement": scrollingPlacement, role: 'tablist', ref: refs, onKeyDown: onKeyDown, ...rest }, labels.map((label, index) => createTab(label, index))),
+            }, tabsClassName), "data-iui-overflow": overflowOptions?.useOverflow, "data-iui-scroll-placement": scrollingPlacement, role: 'tablist', ref: refs, onKeyDown: onKeyDown, ...rest }, labels.map((label, index) => createTab(label, index))),
         actions && (React.createElement(Box, { className: 'iui-tabs-actions-wrapper' },
             React.createElement(Box, { className: 'iui-tabs-actions' }, actions))),
         children && (React.createElement(Box, { className: cx('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
 declare type TagProps = {
     /**
      * Callback function that handles click on close icon.

package/esm/core/Tag/Tag.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { SvgCloseSmall, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
 import { IconButton } from '../Buttons/index.js';
 /**
  * Tag for showing categories, filters etc.

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
 declare type TagContainerProps = {
     /**
      * Tags inside the container.

package/esm/core/Tag/TagContainer.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
 /**
  * TagContainer for grouping tags.
  * @example

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

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
 export declare type TextareaProps = {
     /**
      * Set focus on textarea element.

package/esm/core/Textarea/Textarea.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useMergedRefs, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
 /**
  * Basic textarea component
  * @example

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

@@ -3,5 +3,5 @@ import type { ThemeOptions, ThemeType } from './ThemeProvider.js';
 export declare const ThemeContext: React.Context<{
     theme?: ThemeType | undefined;
     themeOptions?: ThemeOptions | undefined;
-    rootRef: React.RefObject<HTMLElement>;
+    portalContainerRef?: React.RefObject<HTMLElement> | undefined;
 } | undefined>;

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

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/global.css';
-import '@itwin/itwinui-variables/index.css';
 export declare type ThemeOptions = {
     /**
      * Whether to apply high-contrast versions of light and dark themes.
@@ -39,10 +37,9 @@ declare type RootProps = {
         applyBackground?: boolean;
     };
     /**
-     * Whether theme was set to `'inherit'`.
-     * This will be used to determine if applyBackground will default to false.
+     * This will be used to determine if background will be applied.
      */
-    isInheritingTheme?: boolean;
+    shouldApplyBackground?: boolean;
 };
 declare type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
     themeOptions?: RootProps['themeOptions'];

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -4,10 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useMediaQuery, useMergedRefs, useIsThemeAlreadySet, Box, } from '../utils/index.js';
+import { useMediaQuery, useMergedRefs, Box } from '../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
-import '@itwin/itwinui-css/css/global.css';
-import '@itwin/itwinui-variables/index.css';
 /**
  * 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
@@ -35,28 +33,26 @@ import '@itwin/itwinui-variables/index.css';
  * </ThemeProvider>
  */
 export const ThemeProvider = React.forwardRef((props, ref) => {
-    var _a;
     const { theme: themeProp, children, themeOptions, ...rest } = props;
-    const rootRef = React.useRef(null);
-    const mergedRefs = useMergedRefs(rootRef, ref);
+    const portalContainerRef = React.useRef(null);
     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]);
-    // 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)));
+    const theme = themeProp === 'inherit' ? parentContext?.theme ?? 'light' : themeProp;
+    const shouldApplyBackground = themeOptions?.applyBackground ??
+        (themeProp === 'inherit' ? false : !parentContext);
+    const contextValue = React.useMemo(() => ({ theme, themeOptions, portalContainerRef }), [theme, themeOptions]);
+    return (React.createElement(ThemeContext.Provider, { value: contextValue },
+        React.createElement(Root, { theme: theme, shouldApplyBackground: shouldApplyBackground, themeOptions: themeOptions, ref: ref, ...rest },
+            children,
+            React.createElement("div", { ref: portalContainerRef }))));
 });
 export default ThemeProvider;
 const Root = React.forwardRef((props, forwardedRef) => {
-    var _a, _b, _c;
-    const { theme, children, themeOptions, className, isInheritingTheme, ...rest } = props;
+    const { theme, children, themeOptions, shouldApplyBackground, className, ...rest } = props;
     const ref = React.useRef(null);
     const mergedRefs = useMergedRefs(ref, forwardedRef);
     const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
     const prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
     const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
-    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);
+    const shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
     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));
 });

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tile.css';
 /**
  * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
  * Renders `a` element by default.

package/esm/core/Tile/Tile.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 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';
 import { ProgressRadial } from '../ProgressIndicators/index.js';
@@ -50,7 +49,7 @@ export const Tile = Object.assign(React.forwardRef((props, forwardedRef) => {
     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 isActionable = isActionableProp ?? localActionable;
     const tileName = (React.createElement(Box, { className: 'iui-tile-name' },
         React.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
         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))));
@@ -67,9 +66,7 @@ export const Tile = Object.assign(React.forwardRef((props, forwardedRef) => {
             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),
-                })) : (thumbnail),
+                })) : (React.createElement(Box, { as: 'span', className: 'iui-thumbnail-icon' }, thumbnail)),
                 leftIcon &&
                     React.cloneElement(leftIcon, {
                         className: 'iui-tile-thumbnail-type-indicator',
@@ -87,9 +84,8 @@ export const Tile = Object.assign(React.forwardRef((props, forwardedRef) => {
                 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;
                             close();
-                            (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+                            option.props.onClick?.(value);
                         },
                     })) },
                     React.createElement(Box, { className: cx('iui-tile-more-options', {

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 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';
 export declare type TimePickerProps = {