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

package/esm/core/Table/cells/EditableCell.js

@@ -27,40 +27,34 @@ export const EditableCell = (props) => {
     const [key, setKey] = React.useState(getRandomValue(10));
     const [isDirty, setIsDirty] = React.useState(false);
     return (React.createElement(Box, { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, onInput: (e) => {
-            var _a;
             setValue(sanitizeString(e.target.innerText));
             setIsDirty(true);
-            (_a = props.onInput) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props.onInput?.(e);
         }, onBlur: (e) => {
-            var _a;
             if (isDirty) {
                 onCellEdit(cellProps.column.id, value, cellProps.row.original);
             }
-            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props.onBlur?.(e);
             // Prevents error when text is cleared.
             // New key makes React to reattach with the DOM so it won't complain about deleted text node.
             setKey(getRandomValue(10));
         }, onKeyDown: (e) => {
-            var _a;
             // Prevents from adding HTML elements (div, br) inside a cell on Enter press
             if (e.key === 'Enter') {
                 e.preventDefault();
             }
-            (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props.onKeyDown?.(e);
         }, onPaste: (e) => {
-            var _a;
             e.preventDefault();
             document.execCommand('inserttext', false, sanitizeString(e.clipboardData.getData('text/plain')));
-            (_a = props.onPaste) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props.onPaste?.(e);
         }, onDrop: (e) => {
-            var _a;
             // Prevents from drag'n'dropping into a cell because it will add unwanted HTML elements
             e.preventDefault();
-            (_a = props.onDrop) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props.onDrop?.(e);
         }, onClick: (e) => {
-            var _a;
             e.stopPropagation();
-            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props.onClick?.(e);
         } }, children));
 };
 export default EditableCell;

package/esm/core/Table/columns/actionColumn.js

@@ -71,8 +71,7 @@ export const ActionColumn = ({ columnManager = false, } = {}) => {
                     // and table is scrolled to the very left which means our visibility dropdown menu is not visible.
                     // So for better UX we need to scroll to that dropdown menu.
                     queueMicrotask(() => {
-                        var _a;
-                        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+                        buttonRef.current?.scrollIntoView();
                     });
                 };
                 return (React.createElement(MenuItem, { key: column.id, startIcon: React.createElement(Checkbox, { checked: checked, disabled: column.disableToggleVisibility, onClick: (e) => e.stopPropagation(), onChange: onClick, "aria-labelledby": `iui-column-${column.id}` }), onClick: onClick, disabled: column.disableToggleVisibility },
@@ -82,13 +81,11 @@ export const ActionColumn = ({ columnManager = false, } = {}) => {
                 ? columnManager.dropdownMenuProps
                 : {};
             return (React.createElement(DropdownMenu, { ...dropdownMenuProps, menuItems: headerCheckBoxes, onHide: (i) => {
-                    var _a;
                     setIsOpen(false);
-                    (_a = dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+                    dropdownMenuProps.onHide?.(i);
                 }, onShow: (i) => {
-                    var _a;
                     setIsOpen(true);
-                    (_a = dropdownMenuProps.onShow) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+                    dropdownMenuProps.onShow?.(i);
                 }, className: cx('iui-scroll', dropdownMenuProps.className) },
                 React.createElement(IconButton, { styleType: 'borderless', isActive: isOpen, ref: buttonRef },
                     React.createElement(SvgColumnManager, null))));

package/esm/core/Table/columns/expanderColumn.js

@@ -44,16 +44,16 @@ export const ExpanderColumn = (props = {}) => {
         cellClassName: 'iui-slot',
         Cell: (props) => {
             const { row } = props;
-            if (!(subComponent === null || subComponent === void 0 ? void 0 : subComponent(row))) {
+            if (!subComponent?.(row)) {
                 return null;
             }
             else {
                 return (React.createElement(IconButton, { className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: (e) => {
                         e.stopPropagation();
                         row.toggleRowExpanded();
-                    }, disabled: isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(props.row.original) }, React.createElement(SvgChevronRight, null)));
+                    }, disabled: isDisabled?.(props.row.original) }, React.createElement(SvgChevronRight, null)));
             }
         },
-        cellRenderer: (props) => (React.createElement(DefaultCell, { ...props, isDisabled: (rowData) => !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)) })),
+        cellRenderer: (props) => (React.createElement(DefaultCell, { ...props, isDisabled: (rowData) => !!isDisabled?.(rowData) })),
     };
 };

package/esm/core/Table/columns/selectionColumn.js

@@ -32,14 +32,14 @@ export const SelectionColumn = (props = {}) => {
         columnClassName: 'iui-slot',
         cellClassName: 'iui-slot',
         Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }) => {
-            const disabled = rows.every((row) => isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original));
-            const checked = initialRows.every((row) => state.selectedRowIds[row.id] || (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original)));
+            const disabled = rows.every((row) => isDisabled?.(row.original));
+            const checked = initialRows.every((row) => state.selectedRowIds[row.id] || isDisabled?.(row.original));
             const indeterminate = !checked && Object.keys(state.selectedRowIds).length > 0;
             return (React.createElement(Checkbox, { ...getToggleAllRowsSelectedProps(), style: {}, title: '' // Removes default title that comes from react-table
                 , checked: checked && !disabled, indeterminate: indeterminate, disabled: disabled, onChange: () => toggleAllRowsSelected(!rows.some((row) => row.isSelected)) }));
         },
         Cell: ({ row }) => (React.createElement(Checkbox, { ...row.getToggleRowSelectedProps(), style: {}, title: '' // Removes default title that comes from react-table
-            , disabled: isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original), onClick: (e) => e.stopPropagation() })),
-        cellRenderer: (props) => (React.createElement(DefaultCell, { ...props, isDisabled: (rowData) => !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)) })),
+            , disabled: isDisabled?.(row.original), onClick: (e) => e.stopPropagation() })),
+        cellRenderer: (props) => (React.createElement(DefaultCell, { ...props, isDisabled: (rowData) => !!isDisabled?.(rowData) })),
     };
 };

package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.js

@@ -27,10 +27,9 @@ const DatePickerInput = (props) => {
     const [isVisible, setIsVisible] = React.useState(false);
     const close = React.useCallback(() => setIsVisible(false), []);
     const onDateSelected = React.useCallback((date) => {
-        var _a;
         onChange(date);
         close();
-        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        buttonRef.current?.focus();
     }, [close, onChange]);
     const onInputChange = React.useCallback((event) => {
         const value = event.target.value;
@@ -44,8 +43,7 @@ const DatePickerInput = (props) => {
         }
     }, [onChange, parseInput]);
     return (React.createElement(Popover, { content: React.createElement(DatePicker, { date: date, onChange: onDateSelected, setFocus: true, isDateDisabled: isDateDisabled }), placement: 'bottom', visible: isVisible, onClickOutside: (_, e) => {
-            var _a;
-            if (!((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            if (!buttonRef.current?.contains(e.target)) {
                 close();
             }
         }, appendTo: 'parent' },

package/esm/core/Table/filters/DateRangeFilter/DateRangeFilter.js

@@ -27,11 +27,10 @@ const defaultParseInput = (text) => {
     return new Date('');
 };
 export const DateRangeFilter = (props) => {
-    var _a, _b, _c, _d;
     const { column, translatedLabels, setFilter, clearFilter, formatDate = defaultFormatDate, parseInput = defaultParseInput, placeholder = 'MMM dd, yyyy', } = props;
     useGlobals();
     const translatedStrings = { ...defaultStrings, ...translatedLabels };
-    const [from, setFrom] = React.useState(((_a = column.filterValue) === null || _a === void 0 ? void 0 : _a[0]) ? new Date((_b = column.filterValue) === null || _b === void 0 ? void 0 : _b[0]) : undefined);
+    const [from, setFrom] = React.useState(column.filterValue?.[0] ? new Date(column.filterValue?.[0]) : undefined);
     const onFromChange = React.useCallback((date) => {
         setFrom((prevDate) => {
             if (prevDate || !date) {
@@ -40,7 +39,7 @@ export const DateRangeFilter = (props) => {
             return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
         });
     }, []);
-    const [to, setTo] = React.useState(((_c = column.filterValue) === null || _c === void 0 ? void 0 : _c[1]) ? new Date((_d = column.filterValue) === null || _d === void 0 ? void 0 : _d[1]) : undefined);
+    const [to, setTo] = React.useState(column.filterValue?.[1] ? new Date(column.filterValue?.[1]) : undefined);
     const onToChange = React.useCallback((date) => {
         setTo((prevDate) => {
             if (prevDate || !date) {

package/esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js

@@ -12,12 +12,11 @@ const defaultStrings = {
     to: 'To',
 };
 export const NumberRangeFilter = (props) => {
-    var _a, _b, _c, _d;
     const { column, translatedLabels, setFilter, clearFilter } = props;
     useGlobals();
     const translatedStrings = { ...defaultStrings, ...translatedLabels };
-    const [from, setFrom] = React.useState((_b = (_a = column.filterValue) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '');
-    const [to, setTo] = React.useState((_d = (_c = column.filterValue) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : '');
+    const [from, setFrom] = React.useState(column.filterValue?.[0] ?? '');
+    const [to, setTo] = React.useState(column.filterValue?.[1] ?? '');
     const parseInputValue = (value) => {
         return !value || isNaN(Number(value)) ? undefined : Number(value);
     };

package/esm/core/Table/filters/TextFilter/TextFilter.js

@@ -8,10 +8,9 @@ import { Input } from '../../../Input/index.js';
 import { FilterButtonBar } from '../FilterButtonBar.js';
 import { BaseFilter } from '../BaseFilter.js';
 export const TextFilter = (props) => {
-    var _a;
     const { column, translatedLabels, setFilter, clearFilter } = props;
     useGlobals();
-    const [text, setText] = React.useState((_a = column.filterValue) !== null && _a !== void 0 ? _a : '');
+    const [text, setText] = React.useState(column.filterValue ?? '');
     const onKeyDown = (event) => {
         if (event.altKey) {
             return;

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/Tabs.js

@@ -86,22 +86,20 @@ export const Tabs = (props) => {
     React.useEffect(() => {
         if (tablistRef.current && focusedIndex !== undefined) {
             const tab = tablistRef.current.querySelectorAll(`.${styles['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
     useIsomorphicLayoutEffect(() => {
-        var _a;
         setHasSublabel(type !== 'pill' && // pill tabs should never have sublabels
-            !!((_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${styles['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,7 +199,7 @@ 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(`.${styles['iui-tab']}`)[currentActiveIndex];
                 const isVertical = orientation === 'vertical';
@@ -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/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

@@ -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/esm/core/ThemeProvider/ThemeProvider.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 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';
 /**
  * This component provides global styles and applies theme to the entire tree
@@ -33,28 +33,26 @@ import { ThemeContext } from './ThemeContext.js';
  * </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.js

@@ -49,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))));
@@ -84,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', {