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

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

@@ -34,7 +34,6 @@ exports.TagContainer = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/tag.css");
 /**
  * TagContainer for grouping tags.
  * @example

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

@@ -34,7 +34,6 @@ exports.Textarea = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/input.css");
 /**
  * Basic textarea component
  * @example

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

@@ -35,8 +35,6 @@ 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");
 /**
  * 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
@@ -64,28 +62,26 @@ require("@itwin/itwinui-variables/index.css");
  * </ThemeProvider>
  */
 exports.ThemeProvider = React.forwardRef((props, ref) => {
-    var _a;
     const { theme: themeProp, children, themeOptions, ...rest } = props;
-    const rootRef = React.useRef(null);
-    const mergedRefs = (0, index_js_1.useMergedRefs)(rootRef, ref);
+    const portalContainerRef = React.useRef(null);
     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]);
-    // 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_js_1.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_js_1.ThemeContext.Provider, { value: contextValue },
+        React.createElement(Root, { theme: theme, shouldApplyBackground: shouldApplyBackground, themeOptions: themeOptions, ref: ref, ...rest },
+            children,
+            React.createElement("div", { ref: portalContainerRef }))));
 });
 exports.default = exports.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 = (0, index_js_1.useMergedRefs)(ref, forwardedRef);
     const prefersDark = (0, index_js_1.useMediaQuery)('(prefers-color-scheme: dark)');
     const prefersHighContrast = (0, index_js_1.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 = (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);
+    const shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
     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));
 });

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

@@ -34,7 +34,6 @@ exports.Tile = exports.TileAction = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/tile.css");
 const index_js_2 = require("../DropdownMenu/index.js");
 const index_js_3 = require("../Buttons/index.js");
 const index_js_4 = require("../ProgressIndicators/index.js");
@@ -79,7 +78,7 @@ exports.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(index_js_1.Box, { className: 'iui-tile-name' },
         React.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
         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))));
@@ -96,9 +95,7 @@ exports.Tile = Object.assign(React.forwardRef((props, forwardedRef) => {
             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),
-                })) : (thumbnail),
+                })) : (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-thumbnail-icon' }, thumbnail)),
                 leftIcon &&
                     React.cloneElement(leftIcon, {
                         className: 'iui-tile-thumbnail-type-indicator',
@@ -116,9 +113,8 @@ exports.Tile = Object.assign(React.forwardRef((props, forwardedRef) => {
                 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;
                             close();
-                            (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+                            option.props.onClick?.(value);
                         },
                     })) },
                     React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile-more-options', {

package/cjs/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 = {

package/cjs/core/TimePicker/TimePicker.js

@@ -34,7 +34,6 @@ exports.TimePicker = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/time-picker.css");
 const isSameHour = (date1, date2, meridiem) => {
     const adjustedHours = meridiem
         ? formatHourFrom12(date1.getHours(), meridiem)
@@ -109,17 +108,17 @@ const defaultCombinedRenderer = (date, precision) => {
 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;
     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);
+    const [focusedTime, setFocusedTime] = React.useState(selectedTime ?? new Date());
+    const [meridiem, setMeridiem] = React.useState(use12Hours ? (focusedTime?.getHours() > 11 ? 'PM' : 'AM') : undefined);
     React.useEffect(() => {
-        setFocusedTime(date !== null && date !== void 0 ? date : new Date());
+        setFocusedTime(date ?? new Date());
         setSelectedTime(date);
     }, [date]);
     const onHourClick = (date) => {
         const adjustedHour = use12Hours
             ? formatHourFrom12(date.getHours(), meridiem)
             : date.getHours();
-        const adjustedSelectedTime = setHours(adjustedHour, selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date());
+        const adjustedSelectedTime = setHours(adjustedHour, selectedTime ?? new Date());
         updateCurrentTime(adjustedSelectedTime);
     };
     const onTimeClick = (date) => {
@@ -130,7 +129,7 @@ exports.TimePicker = React.forwardRef((props, forwardedRef) => {
         updateCurrentTime(adjustedSelectedTime);
     };
     const onMeridiemClick = (value) => {
-        let adjustedSelectedTime = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        let adjustedSelectedTime = selectedTime ?? new Date();
         const currentHours = adjustedSelectedTime.getHours();
         setMeridiem(value);
         if (value === 'AM' && currentHours > 11) {
@@ -152,7 +151,7 @@ exports.TimePicker = React.forwardRef((props, forwardedRef) => {
         }
         setFocusedTime(adjustedTime);
         setSelectedTime(adjustedTime);
-        onChange === null || onChange === void 0 ? void 0 : onChange(adjustedTime);
+        onChange?.(adjustedTime);
     };
     const onHourFocus = (date) => {
         const adjustedHour = use12Hours
@@ -167,7 +166,7 @@ exports.TimePicker = React.forwardRef((props, forwardedRef) => {
         setFocusedTime(setHours(adjustedHour, date));
     };
     const onMeridiemFocus = (value) => {
-        let adjustedSelectedTime = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        let adjustedSelectedTime = selectedTime ?? new Date();
         const currentHours = adjustedSelectedTime.getHours();
         if (value === 'AM' && currentHours > 11) {
             setMeridiem(value);
@@ -189,7 +188,7 @@ exports.TimePicker = React.forwardRef((props, forwardedRef) => {
         return data;
     };
     const time = React.useMemo(() => {
-        const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        const time = selectedTime ?? new Date();
         const data = [];
         const hoursArray = Array.from(Array(use12Hours ? 12 : 24).keys())
             .filter((i) => i % hourStep === 0)
@@ -216,15 +215,15 @@ exports.TimePicker = React.forwardRef((props, forwardedRef) => {
         return data;
     }, [hourStep, minuteStep, secondStep, selectedTime, use12Hours, precision]);
     const hours = React.useMemo(() => {
-        const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        const time = selectedTime ?? new Date();
         return generateDataList(use12Hours ? 12 : 24, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), use12Hours && i === 0 ? 12 : i, time.getMinutes(), time.getSeconds()), hourStep);
     }, [hourStep, selectedTime, use12Hours]);
     const minutes = React.useMemo(() => {
-        const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        const time = selectedTime ?? new Date();
         return generateDataList(60, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), i, time.getSeconds()), minuteStep);
     }, [minuteStep, selectedTime]);
     const seconds = React.useMemo(() => {
-        const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        const time = 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(index_js_1.Box, { className: (0, classnames_1.default)('iui-time-picker', className), ref: forwardedRef, ...rest },
@@ -245,7 +244,7 @@ const TimePickerColumn = (props) => {
         }
     });
     const scrollIntoView = (ref, isSame) => {
-        isSame && (ref === null || ref === void 0 ? void 0 : ref.scrollIntoView({ block: 'nearest', inline: 'nearest' }));
+        isSame && ref?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
     };
     const handleTimeKeyDown = (event, maxValue, onFocus, onSelect, currentValue) => {
         if (event.altKey) {
@@ -285,7 +284,7 @@ const TimePickerColumn = (props) => {
                     'iui-selected': isSameSelected(value),
                 }), key: index, tabIndex: isSameFocus ? 0 : undefined, ref: (ref) => {
                     scrollIntoView(ref, isSameFocus);
-                    needFocus.current && isSameFocus && (ref === null || ref === void 0 ? void 0 : ref.focus());
+                    needFocus.current && isSameFocus && ref?.focus();
                 }, onClick: () => {
                     onSelectChange(value);
                 } }, valueRenderer(value, precision)));

package/cjs/core/Toast/Toast.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/toast.css';
 export declare type ToastCategory = 'informational' | 'negative' | 'positive' | 'warning';
 export declare type ToastProps = {
     /**

package/cjs/core/Toast/Toast.js

@@ -35,9 +35,8 @@ const React = __importStar(require("react"));
 const react_transition_group_1 = require("react-transition-group");
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/toast.css");
 const index_js_2 = require("../Buttons/index.js");
-const isMotionOk = () => { var _a, _b, _c; return (_c = (_b = (_a = (0, index_js_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, '(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches; };
+const isMotionOk = () => (0, index_js_1.getWindow)()?.matchMedia?.('(prefers-reduced-motion: no-preference)')?.matches;
 /**
  * Generic Toast Component
  * @example
@@ -94,8 +93,7 @@ const Toast = (props) => {
         }, timeout);
     };
     const clearCloseTimeout = () => {
-        var _a;
-        (_a = (0, index_js_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.clearTimeout(closeTimeout.current);
+        (0, index_js_1.getWindow)()?.clearTimeout(closeTimeout.current);
     };
     const onRef = (ref) => {
         if (ref) {

package/cjs/core/Toast/ToastWrapper.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/toast.css';
 import * as React from 'react';
 import type { ToastProps } from './Toast.js';
 import type { ToasterSettings } from './Toaster.js';

package/cjs/core/Toast/ToastWrapper.js

@@ -31,7 +31,6 @@ exports.ToastWrapper = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-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"));

package/cjs/core/Toast/Toaster.js

@@ -45,11 +45,10 @@ class Toaster {
         // Create container on demand.
         // Cannot do it in constructor, because SSG/SSR apps would fail.
         this.asyncInit = async () => {
-            var _a, _b;
             if (this.isInitialized) {
                 return;
             }
-            const container = (_a = (0, index_js_1.getContainer)(TOASTS_CONTAINER_ID)) !== null && _a !== void 0 ? _a : (_b = (0, index_js_1.getDocument)()) === null || _b === void 0 ? void 0 : _b.body;
+            const container = (0, index_js_1.getContainer)(TOASTS_CONTAINER_ID) ?? (0, index_js_1.getDocument)()?.body;
             if (!container) {
                 return;
             }
@@ -81,15 +80,13 @@ class Toaster {
      * Settings will be applied to new toasts on the page.
      */
     setSettings(newSettings) {
-        var _a, _b, _c;
-        (_a = newSettings.placement) !== null && _a !== void 0 ? _a : (newSettings.placement = this.settings.placement);
-        (_b = newSettings.order) !== null && _b !== void 0 ? _b : (newSettings.order = ((_c = newSettings.placement) === null || _c === void 0 ? void 0 : _c.startsWith('bottom'))
+        newSettings.placement ?? (newSettings.placement = this.settings.placement);
+        newSettings.order ?? (newSettings.order = newSettings.placement?.startsWith('bottom')
             ? 'ascending'
             : 'descending');
         this.settings = newSettings;
         this.asyncInit().then(() => {
-            var _a, _b;
-            (_a = this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setPlacement((_b = this.settings.placement) !== null && _b !== void 0 ? _b : 'top');
+            this.toastsRef.current?.setPlacement(this.settings.placement ?? 'top');
         });
     }
     positive(content, options) {
@@ -114,9 +111,8 @@ class Toaster {
                 content,
                 category,
                 onRemove: () => {
-                    var _a;
                     this.removeToast(currentId);
-                    (_a = options === null || options === void 0 ? void 0 : options.onRemove) === null || _a === void 0 ? void 0 : _a.call(options);
+                    options?.onRemove?.();
                 },
                 id: currentId,
                 isVisible: true,
@@ -132,8 +128,7 @@ class Toaster {
     }
     updateView() {
         this.asyncInit().then(() => {
-            var _a;
-            (_a = this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setToasts(this.toasts);
+            this.toastsRef.current?.setToasts(this.toasts);
         });
     }
     closeToast(toastId) {

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/toggle-switch.css';
 declare type ToggleSwitchProps = {
     /**
      * Label for the toggle switch.

package/cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -34,7 +34,6 @@ exports.ToggleSwitch = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/toggle-switch.css");
 /**
  * A switch for turning on and off.
  * @example
@@ -63,13 +62,12 @@ exports.ToggleSwitch = React.forwardRef((props, ref) => {
     const { disabled = false, labelPosition = 'right', label, setFocus = false, className, style, size = 'default', ...rest } = props;
     const inputElementRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
-    const WrapperComponent = label ? 'label' : 'div';
     React.useEffect(() => {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement(WrapperComponent, { className: (0, classnames_1.default)('iui-toggle-switch-wrapper', {
+    return (React.createElement(index_js_1.Box, { as: label ? 'label' : 'div', className: (0, classnames_1.default)('iui-toggle-switch-wrapper', {
             'iui-disabled': disabled,
             'iui-label-on-right': label && labelPosition === 'right',
             'iui-label-on-left': label && labelPosition === 'left',

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps, PopoverProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tooltip.css';
 export declare type TooltipProps = {
     /**
      * Content of the tooltip.

package/cjs/core/Tooltip/Tooltip.js

@@ -34,7 +34,6 @@ exports.Tooltip = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/tooltip.css");
 /**
  * Basic tooltip component to display informative content when an element is hovered or focused.
  * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).

package/cjs/core/TransferList/TransferList.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { ListItem } from '../List/index.js';
+declare type TransferListListboxWrapperOwnProps = {};
+declare type TransferListItemOwnProps = {
+    /**
+     * Callback fired when the the active state changes.
+     */
+    onActiveChange?: (value: boolean) => void;
+} & React.ComponentProps<typeof ListItem>;
+declare type TransferListListboxLabelOwnProps = {
+    /**
+     * Text label that is wrapped by `TransferList.ListboxLabel`
+     */
+    children?: string;
+};
+/**
+ * The TransferList component is used to display a list within a box
+ * @example
+ * <TransferList>
+ *   <TransferList.ListboxWrapper>
+ *     <TransferList.Listbox>
+ *       <TransferList.Item>Item 1</TransferList.Item>
+ *       <TransferList.Item>Item 2</TransferList.Item>
+ *       <TransferList.Item>Item 3</TransferList.Item>
+ *       <TransferList.Item>Item 4</TransferList.Item>
+ *       <TransferList.Item>Item 5</TransferList.Item>
+ *       <TransferList.Item>Item 6</TransferList.Item>
+ *     </TransferList.Listbox>
+ *   </TransferList.ListboxWrapper>
+ * </TransferList>
+ */
+export declare const TransferList: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}> & {
+    /**
+     * 	TransferList listbox wrapper subcomponent
+     */
+    ListboxWrapper: PolymorphicForwardRefComponent<"div", TransferListListboxWrapperOwnProps>;
+    /**
+     * 	TransferList listbox subcomponent
+     */
+    Listbox: PolymorphicForwardRefComponent<"ul", Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof React.HTMLAttributes<HTMLUListElement>> & {
+        ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
+    }, "as"> & {
+        as?: "ul" | undefined;
+    }>;
+    /**
+     * 	TransferList item subcomponent
+     */
+    Item: PolymorphicForwardRefComponent<"li", TransferListItemOwnProps>;
+    /**
+     * 	TransferList listbox label subcomponent
+     */
+    ListboxLabel: PolymorphicForwardRefComponent<"div", TransferListListboxLabelOwnProps>;
+    /**
+     * 	TransferList toolbar subcomponent
+     */
+    Toolbar: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+};
+export declare const TransferListContext: React.Context<{
+    /**
+     * Id to set to label and set 'aria-labelledby' prop of the listbox
+     */
+    labelId?: string | undefined;
+    /**
+     * Callback that's fired when labelId is changed
+     */
+    setLabelId: (labelId: string) => void;
+} | undefined>;
+export default TransferList;

package/cjs/core/TransferList/TransferList.js

@@ -0,0 +1,147 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransferListContext = exports.TransferList = 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 react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
+const index_js_2 = require("../List/index.js");
+// ----------------------------------------------------------------------------
+// TransferListComponent
+const TransferListComponent = (0, index_js_1.polymorphic)('iui-transfer-list-wrapper');
+TransferListComponent.displayName = 'TransferList';
+const TransferListListboxWrapper = react_1.default.forwardRef((props, ref) => {
+    const { className, children, ...rest } = props;
+    const uid = (0, index_js_1.useId)();
+    const [labelId, setLabelId] = react_1.default.useState(uid);
+    return (react_1.default.createElement(index_js_1.Box, { as: 'div', className: (0, classnames_1.default)('iui-transfer-list-listbox-wrapper', className), ref: ref, ...rest },
+        react_1.default.createElement(exports.TransferListContext.Provider, { value: { labelId, setLabelId } }, children)));
+});
+TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper';
+const TransferListListbox = react_1.default.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    const { labelId } = (0, index_js_1.useSafeContext)(exports.TransferListContext);
+    const [focusedIndex, setFocusedIndex] = react_1.default.useState();
+    const listRef = react_1.default.useRef(null);
+    const refs = (0, index_js_1.useMergedRefs)(listRef, ref);
+    const getFocusableNodes = react_1.default.useCallback(() => {
+        const focusableItems = (0, index_js_1.getFocusableElements)(listRef.current);
+        // Filter out focusable elements that are inside each list item, e.g. checkbox, anchor
+        return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
+    }, []);
+    react_1.default.useEffect(() => {
+        const items = getFocusableNodes();
+        if (focusedIndex != null) {
+            items?.[focusedIndex]?.focus();
+            return;
+        }
+    }, [focusedIndex, getFocusableNodes]);
+    const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
+        const items = getFocusableNodes();
+        if (!items?.length) {
+            return;
+        }
+        const currentIndex = focusedIndex ?? 0;
+        switch (event.key) {
+            case 'ArrowDown': {
+                setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            }
+            case 'ArrowUp': {
+                setFocusedIndex(Math.max(currentIndex - 1, 0));
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    return (react_1.default.createElement(index_js_2.List, { className: (0, classnames_1.default)('iui-transfer-list-listbox', className), onKeyDown: onKeyDown, role: 'listbox', "aria-multiselectable": true, "aria-labelledby": labelId, tabIndex: 0, ref: refs, ...rest }, children));
+});
+TransferListListbox.displayName = 'TransferList.Listbox';
+const TransferListItem = react_1.default.forwardRef((props, ref) => {
+    const { actionable = true, disabled, onActiveChange, children, active, ...rest } = props;
+    const onClickEvents = () => actionable && onActiveChange && onActiveChange(!active);
+    const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
+        if (event.key === 'Enter' ||
+            event.key === ' ' ||
+            event.key === 'Spacebar') {
+            !disabled && onClickEvents();
+            event.preventDefault();
+        }
+    };
+    return (react_1.default.createElement(index_js_2.ListItem, { ref: ref, onClick: onClickEvents, onKeyDown: onKeyDown, active: active, actionable: actionable, tabIndex: -1, role: 'option', "aria-disabled": disabled ? 'true' : undefined, "aria-selected": active ? 'true' : undefined, disabled: disabled, ...rest }, children));
+});
+TransferListItem.displayName = 'TransferList.Item';
+const TransferListListboxLabel = react_1.default.forwardRef((props, ref) => {
+    const { children, className, id, ...rest } = props;
+    const { labelId, setLabelId } = (0, index_js_1.useSafeContext)(exports.TransferListContext);
+    react_1.default.useEffect(() => {
+        if (id && id !== labelId) {
+            setLabelId(id);
+        }
+    }, [id, labelId, setLabelId]);
+    return (react_1.default.createElement(index_js_1.Box, { as: 'div', className: (0, classnames_1.default)('iui-transfer-list-listbox-label', className), id: labelId, ref: ref, ...rest }, children));
+});
+TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
+// ----------------------------------------------------------------------------
+// TransferList.Toolbar component
+const TransferListToolbar = (0, index_js_1.polymorphic)('iui-transfer-list-toolbar', {
+    role: 'toolbar',
+});
+TransferListToolbar.displayName = 'TransferList.Toolbar';
+/**
+ * The TransferList component is used to display a list within a box
+ * @example
+ * <TransferList>
+ *   <TransferList.ListboxWrapper>
+ *     <TransferList.Listbox>
+ *       <TransferList.Item>Item 1</TransferList.Item>
+ *       <TransferList.Item>Item 2</TransferList.Item>
+ *       <TransferList.Item>Item 3</TransferList.Item>
+ *       <TransferList.Item>Item 4</TransferList.Item>
+ *       <TransferList.Item>Item 5</TransferList.Item>
+ *       <TransferList.Item>Item 6</TransferList.Item>
+ *     </TransferList.Listbox>
+ *   </TransferList.ListboxWrapper>
+ * </TransferList>
+ */
+exports.TransferList = Object.assign(TransferListComponent, {
+    /**
+     * 	TransferList listbox wrapper subcomponent
+     */
+    ListboxWrapper: TransferListListboxWrapper,
+    /**
+     * 	TransferList listbox subcomponent
+     */
+    Listbox: TransferListListbox,
+    /**
+     * 	TransferList item subcomponent
+     */
+    Item: TransferListItem,
+    /**
+     * 	TransferList listbox label subcomponent
+     */
+    ListboxLabel: TransferListListboxLabel,
+    /**
+     * 	TransferList toolbar subcomponent
+     */
+    Toolbar: TransferListToolbar,
+});
+exports.TransferListContext = react_1.default.createContext(undefined);
+exports.default = exports.TransferList;