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

package/cjs/core/Tabs/Tabs.js

@@ -115,22 +115,20 @@ const Tabs = (props) => {
     React.useEffect(() => {
         if (tablistRef.current && focusedIndex !== undefined) {
             const tab = tablistRef.current.querySelectorAll(`.${styles_js_1.default['iui-tab']}`)[focusedIndex];
-            tab === null || tab === void 0 ? void 0 : tab.focus();
+            tab?.focus();
         }
     }, [focusedIndex]);
     const [hasSublabel, setHasSublabel] = React.useState(false); // used for setting size
     (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-        var _a;
         setHasSublabel(type !== 'pill' && // pill tabs should never have sublabels
-            !!((_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${styles_js_1.default['iui-tab-description']}`)));
+            !!tablistRef.current?.querySelector(`.${styles_js_1.default['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;
         }
@@ -145,12 +143,12 @@ 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) {
@@ -230,7 +228,7 @@ 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(`.${styles_js_1.default['iui-tab']}`)[currentActiveIndex];
                 const isVertical = orientation === 'vertical';
@@ -241,7 +239,7 @@ const Tabs = (props) => {
             }
         }, 50);
     }, [
-        overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow,
+        overflowOptions?.useOverflow,
         currentActiveIndex,
         focusedIndex,
         orientation,
@@ -277,19 +275,19 @@ const Tabs = (props) => {
     }, [orientation, setScrollingPlacement]);
     // apply correct mask when tabs list is resized
     const [resizeRef] = (0, index_js_1.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);
@@ -305,7 +303,7 @@ 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 {
@@ -368,9 +366,8 @@ 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]);
@@ -380,7 +377,7 @@ 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(index_js_1.Box, { className: 'iui-tabs-actions-wrapper' },
             React.createElement(index_js_1.Box, { className: 'iui-tabs-actions' }, actions))),
         children && (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));

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

@@ -37,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

@@ -62,28 +62,26 @@ const ThemeContext_js_1 = require("./ThemeContext.js");
  * </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.js

@@ -78,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))));
@@ -113,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.js

@@ -108,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) => {
@@ -129,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) {
@@ -151,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
@@ -166,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);
@@ -188,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)
@@ -215,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 },
@@ -244,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) {
@@ -284,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.js

@@ -36,7 +36,7 @@ const react_transition_group_1 = require("react-transition-group");
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 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
@@ -93,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/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/TransferList/TransferList.js

@@ -36,10 +36,9 @@ const TransferListListbox = react_1.default.forwardRef((props, ref) => {
         return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
     }, []);
     react_1.default.useEffect(() => {
-        var _a;
         const items = getFocusableNodes();
         if (focusedIndex != null) {
-            (_a = items === null || items === void 0 ? void 0 : items[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+            items?.[focusedIndex]?.focus();
             return;
         }
     }, [focusedIndex, getFocusableNodes]);
@@ -48,10 +47,10 @@ const TransferListListbox = react_1.default.forwardRef((props, ref) => {
             return;
         }
         const items = getFocusableNodes();
-        if (!(items === null || items === void 0 ? void 0 : items.length)) {
+        if (!items?.length) {
             return;
         }
-        const currentIndex = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : 0;
+        const currentIndex = focusedIndex ?? 0;
         switch (event.key) {
             case 'ArrowDown': {
                 setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));

package/cjs/core/Tree/Tree.js

@@ -102,10 +102,10 @@ const Tree = (props) => {
             return;
         }
         const items = getFocusableNodes();
-        if (!(items === null || items === void 0 ? void 0 : items.length)) {
+        if (!items?.length) {
             return;
         }
-        const activeIndex = items.findIndex((el) => { var _a; return el.contains((_a = treeRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement); });
+        const activeIndex = items.findIndex((el) => el.contains(treeRef.current?.ownerDocument.activeElement));
         const currentIndex = activeIndex > -1 ? activeIndex : 0;
         switch (event.key) {
             case 'ArrowUp': {
@@ -155,20 +155,18 @@ const Tree = (props) => {
         return [flatList, firstLevelNodes];
     }, [data, getNode]);
     const itemRenderer = React.useCallback((index) => {
-        var _a, _b, _c, _d;
         const node = flatNodesList[index];
         return (React.createElement(TreeContext_js_1.TreeContext.Provider, { key: node.nodeProps.nodeId, value: {
                 nodeDepth: node.depth,
                 subNodeIds: node.subNodeIds,
                 groupSize: node.depth === 0
                     ? firstLevelNodesList.length
-                    : (_c = (_b = (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.subNodeIds) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0,
+                    : node.parentNode?.subNodeIds?.length ?? 0,
                 indexInGroup: node.indexInGroup,
-                parentNodeId: (_d = node.parentNode) === null || _d === void 0 ? void 0 : _d.nodeProps.nodeId,
+                parentNodeId: node.parentNode?.nodeProps.nodeId,
                 scrollToParent: node.parentNode
                     ? () => {
-                        var _a;
-                        const parentNodeId = (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.nodeProps.nodeId;
+                        const parentNodeId = node.parentNode?.nodeProps.nodeId;
                         const parentNodeIndex = flatNodesList.findIndex((n) => n.nodeProps.nodeId === parentNodeId);
                         setScrollToIndex(parentNodeIndex);
                     }
@@ -182,11 +180,10 @@ const Tree = (props) => {
     }, [flatNodesList]);
     React.useEffect(() => {
         setTimeout(() => {
-            var _a;
             if (scrollToIndex !== undefined) {
                 const nodeId = flatNodesListRef.current[scrollToIndex].nodeProps.nodeId;
-                const nodeElement = (_a = treeRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.querySelector(`#${nodeId}`);
-                nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.focus();
+                const nodeElement = treeRef.current?.ownerDocument.querySelector(`#${nodeId}`);
+                nodeElement?.focus();
                 // Need to reset that if navigating with mouse and keyboard,
                 // e.g. pressing arrow left to go to parent node and then with mouse
                 // clicking some other child node and then pressing arrow left
@@ -195,13 +192,12 @@ const Tree = (props) => {
         });
     }, [scrollToIndex]);
     const handleFocus = (event) => {
-        var _a, _b;
-        if ((_a = treeRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) {
+        if (treeRef.current?.contains(event.relatedTarget)) {
             return;
         }
         const items = getFocusableNodes();
         if (items.length > 0) {
-            (_b = items[focusedIndex.current]) === null || _b === void 0 ? void 0 : _b.focus();
+            items[focusedIndex.current]?.focus();
         }
     };
     return (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualizedTree, { flatNodesList: flatNodesList, itemRenderer: itemRenderer, scrollToIndex: scrollToIndex, onFocus: handleFocus, onKeyDown: handleKeyDown, ref: treeRef, className: className, style: style, ...rest })) : (React.createElement(TreeElement, { onKeyDown: handleKeyDown, onFocus: handleFocus, className: className, style: style, ref: treeRef, ...rest }, flatNodesList.map((_, i) => itemRenderer(i))))));

package/cjs/core/Tree/TreeNode.js

@@ -61,11 +61,10 @@ const TreeNode = (props) => {
     const [isFocused, setIsFocused] = React.useState(false);
     const nodeRef = React.useRef(null);
     const onKeyDown = (event) => {
-        var _a, _b, _c, _d, _e, _f;
         if (event.altKey) {
             return;
         }
-        const isNodeFocused = nodeRef.current === ((_a = nodeRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement);
+        const isNodeFocused = nodeRef.current === nodeRef.current?.ownerDocument.activeElement;
         switch (event.key) {
             case 'ArrowLeft': {
                 event.preventDefault();
@@ -75,19 +74,19 @@ const TreeNode = (props) => {
                         break;
                     }
                     if (parentNodeId) {
-                        scrollToParent === null || scrollToParent === void 0 ? void 0 : scrollToParent();
+                        scrollToParent?.();
                         break;
                     }
                     // If it is top level node (doesn't have parent node), then do nothing.
                     break;
                 }
                 const focusableElements = (0, index_js_1.getFocusableElements)(nodeRef.current);
-                const currentIndex = focusableElements.indexOf((_b = nodeRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.activeElement);
+                const currentIndex = focusableElements.indexOf(nodeRef.current?.ownerDocument.activeElement);
                 if (currentIndex === 0) {
-                    (_c = nodeRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+                    nodeRef.current?.focus();
                 }
                 else {
-                    (_d = focusableElements[currentIndex - 1]) === null || _d === void 0 ? void 0 : _d.focus();
+                    focusableElements[currentIndex - 1]?.focus();
                 }
                 break;
             }
@@ -99,10 +98,10 @@ const TreeNode = (props) => {
                         onExpanded(nodeId, true);
                         break;
                     }
-                    (_e = focusableElements[0]) === null || _e === void 0 ? void 0 : _e.focus();
+                    focusableElements[0]?.focus();
                     break;
                 }
-                const currentIndex = focusableElements.indexOf((_f = nodeRef.current) === null || _f === void 0 ? void 0 : _f.ownerDocument.activeElement);
+                const currentIndex = focusableElements.indexOf(nodeRef.current?.ownerDocument.activeElement);
                 if (currentIndex < focusableElements.length - 1) {
                     focusableElements[currentIndex + 1].focus();
                     break;
@@ -118,7 +117,7 @@ const TreeNode = (props) => {
                 }
                 event.preventDefault();
                 if (!isDisabled) {
-                    onSelected === null || onSelected === void 0 ? void 0 : onSelected(nodeId, !isSelected);
+                    onSelected?.(nodeId, !isSelected);
                 }
                 break;
             }
@@ -140,7 +139,7 @@ const TreeNode = (props) => {
         React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tree-node', {
                 'iui-active': isSelected,
                 'iui-disabled': isDisabled,
-            }), style: { '--level': nodeDepth }, onClick: () => !isDisabled && (onSelected === null || onSelected === void 0 ? void 0 : onSelected(nodeId, !isSelected)) },
+            }), style: { '--level': nodeDepth }, onClick: () => !isDisabled && onSelected?.(nodeId, !isSelected) },
             checkbox && (React.createElement(index_js_1.Box, { className: 'iui-tree-node-checkbox' }, React.isValidElement(checkbox)
                 ? React.cloneElement(checkbox, {
                     tabIndex: isFocused ? 0 : -1,

package/cjs/core/utils/color/ColorValue.js

@@ -116,27 +116,24 @@ class ColorValue {
      * This allows component builders to know if they received bad input from user.
      */
     static fromString(val, defaultColorIfNotParsed) {
-        const [tbgr, hue] = this.computeTbgrFromString(val, defaultColorIfNotParsed === null || defaultColorIfNotParsed === void 0 ? void 0 : defaultColorIfNotParsed.toTbgr());
+        const [tbgr, hue] = this.computeTbgrFromString(val, defaultColorIfNotParsed?.toTbgr());
         return new ColorValue(tbgr, hue);
     }
     /** Create a ColorValue from hue, saturation, lightness values.  */
     static fromHSL(hsl) {
-        var _a;
-        const alpha = (_a = hsl.a) !== null && _a !== void 0 ? _a : 1;
+        const alpha = hsl.a ?? 1;
         return new ColorValue(this.computeTbgrFromHSL(hsl.h / 360, hsl.s / 100, hsl.l / 100, Math.round((1 - alpha) * 255)), hsl.h);
     }
     /** Create a ColorValue from an RgbColor */
     static fromRGB(rgb) {
-        var _a;
-        const alpha = (_a = rgb.a) !== null && _a !== void 0 ? _a : 1;
+        const alpha = rgb.a ?? 1;
         return ColorValue.fromRgbt(rgb.r, rgb.g, rgb.b, Math.round((1 - alpha) * 255));
     }
     /**
      * Create a ColorValue from an HsvColor
      */
     static fromHSV(hsv) {
-        var _a;
-        const alpha = (_a = hsv.a) !== null && _a !== void 0 ? _a : 1;
+        const alpha = hsv.a ?? 1;
         const transparency = Math.round((1 - alpha) * 255);
         // Check for simple case first.
         if (!hsv.s || hsv.h === -1) {
@@ -487,33 +484,30 @@ class ColorValue {
     }
     /** Convert the 0xTTBBGGRR color to a string of the form "rgba(r,g,b,a)" where the color components are specified in decimal and the alpha component is a fraction. */
     toRgbString(includeAlpha) {
-        var _a;
         const rgb = this.toRgbColor();
         const rgbString = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
         if (includeAlpha) {
-            const alpha = (_a = rgb.a) !== null && _a !== void 0 ? _a : 1;
+            const alpha = rgb.a ?? 1;
             return `rgba(${rgbString}, ${ColorValue.getFormattedColorNumber(alpha, 2)})`;
         }
         return `rgb(${rgbString})`;
     }
     /** Convert this ColorValue to a string in the form "hsl(h,s,l) or hsla(h,s,l,a)" - i.e hsl(120,50%,50%). */
     toHslString(includeAlpha) {
-        var _a, _b;
         const hsl = this.toHslColor();
-        const hslString = `${ColorValue.getFormattedColorNumber((_a = this._hue) !== null && _a !== void 0 ? _a : hsl.h)}, ${ColorValue.getFormattedColorNumber(hsl.s)}%, ${ColorValue.getFormattedColorNumber(hsl.l)}%`;
+        const hslString = `${ColorValue.getFormattedColorNumber(this._hue ?? hsl.h)}, ${ColorValue.getFormattedColorNumber(hsl.s)}%, ${ColorValue.getFormattedColorNumber(hsl.l)}%`;
         if (includeAlpha) {
-            const alpha = (_b = hsl.a) !== null && _b !== void 0 ? _b : 1;
+            const alpha = hsl.a ?? 1;
             return `hsla(${hslString}, ${ColorValue.getFormattedColorNumber(alpha, 2)})`;
         }
         return `hsl(${hslString})`;
     }
     /** Convert this ColorValue to a string in the form "hsv(h,s,v) or hsva(h,s,v,a)" - i.e hsv(120,50%,50%). */
     toHsvString(includeAlpha) {
-        var _a, _b;
         const hsv = this.toHsvColor();
-        const hsvString = `${(_a = this._hue) !== null && _a !== void 0 ? _a : hsv.h}, ${hsv.s}%, ${hsv.v}%`;
+        const hsvString = `${this._hue ?? hsv.h}, ${hsv.s}%, ${hsv.v}%`;
         if (includeAlpha) {
-            const alpha = (_b = hsv.a) !== null && _b !== void 0 ? _b : 1;
+            const alpha = hsv.a ?? 1;
             return `hsva(${hsvString}, ${ColorValue.getFormattedColorNumber(alpha, 2)})`;
         }
         return `hsv(${hsvString})`;

package/cjs/core/utils/components/AutoclearingHiddenLiveRegion.js

@@ -42,10 +42,9 @@ const index_js_1 = require("../functions/index.js");
 const AutoclearingHiddenLiveRegion = ({ text = '' }) => {
     const [maybeText, setMaybeText] = React.useState(text);
     React.useEffect(() => {
-        var _a;
         setMaybeText(text);
-        const timeout = (_a = (0, index_js_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.setTimeout(() => setMaybeText(''), 5000);
-        return () => { var _a; return void ((_a = (0, index_js_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.clearTimeout(timeout)); };
+        const timeout = (0, index_js_1.getWindow)()?.setTimeout(() => setMaybeText(''), 5000);
+        return () => void (0, index_js_1.getWindow)()?.clearTimeout(timeout);
     }, [text]);
     return (React.createElement(VisuallyHidden_js_1.VisuallyHidden, { as: 'div', "aria-live": 'polite', "aria-atomic": 'true' }, maybeText));
 };

package/cjs/core/utils/components/FocusTrap.js

@@ -47,19 +47,19 @@ const FocusTrap = (props) => {
     const onFirstFocus = (event) => {
         const [firstElement, lastElement] = getFirstLastFocusables();
         if (event.relatedTarget === firstElement) {
-            lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
+            lastElement?.focus();
         }
         else {
-            firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+            firstElement?.focus();
         }
     };
     const onLastFocus = (event) => {
         const [firstElement, lastElement] = getFirstLastFocusables();
         if (event.relatedTarget === lastElement) {
-            firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+            firstElement?.focus();
         }
         else {
-            lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
+            lastElement?.focus();
         }
     };
     return (React.createElement(React.Fragment, null,