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

package/cjs/core/ComboBox/ComboBox.js

@@ -36,7 +36,6 @@ const index_js_1 = require("../Menu/index.js");
 const SelectTag_js_1 = __importDefault(require("../Select/SelectTag.js"));
 const index_js_2 = require("../Typography/index.js");
 const index_js_3 = require("../utils/index.js");
-require("tippy.js/animations/shift-away.css");
 const helpers_js_1 = require("./helpers.js");
 const ComboBoxDropdown_js_1 = require("./ComboBoxDropdown.js");
 const ComboBoxEndIcon_js_1 = require("./ComboBoxEndIcon.js");
@@ -54,8 +53,7 @@ const isSingleOnChange = (onChange, multiple) => {
 };
 /** Returns either `option.id` or derives a stable id using `idPrefix` and `option.label` (without whitespace) */
 const getOptionId = (option, idPrefix) => {
-    var _a;
-    return (_a = option.id) !== null && _a !== void 0 ? _a : `${idPrefix}-option-${option.label.replace(/\s/g, '-')}`;
+    return option.id ?? `${idPrefix}-option-${option.label.replace(/\s/g, '-')}`;
 };
 /**
  * ComboBox component that allows typing a value to filter the options in dropdown list.
@@ -71,13 +69,11 @@ const getOptionId = (option, idPrefix) => {
  * />
  */
 const ComboBox = (props) => {
-    var _a, _b;
     const { options, value: valueProp, onChange, filterFunction, inputProps, dropdownMenuProps, emptyStateMessage = 'No options found', itemRenderer, enableVirtualization = false, multiple = false, onShow, onHide, ...rest } = props;
     // Generate a stateful random id if not specified
-    const [id] = React.useState(() => {
-        var _a, _b;
-        return (_b = (_a = props.id) !== null && _a !== void 0 ? _a : ((inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) && `${inputProps.id}-cb`)) !== null && _b !== void 0 ? _b : `iui-cb-${(0, index_js_3.getRandomValue)(10)}`;
-    });
+    const [id] = React.useState(() => props.id ??
+        (inputProps?.id && `${inputProps.id}-cb`) ??
+        `iui-cb-${(0, index_js_3.getRandomValue)(10)}`);
     // Refs get set in subcomponents
     const inputRef = React.useRef(null);
     const menuRef = React.useRef(null);
@@ -103,7 +99,7 @@ const ComboBox = (props) => {
     const getSelectedIndexes = React.useCallback(() => {
         if (isMultipleEnabled(valueProp, multiple)) {
             const indexArray = [];
-            valueProp === null || valueProp === void 0 ? void 0 : valueProp.forEach((value) => {
+            valueProp?.forEach((value) => {
                 const indexToAdd = options.findIndex((option) => option.value === value);
                 if (indexToAdd > -1) {
                     indexArray.push(indexToAdd);
@@ -122,10 +118,9 @@ const ComboBox = (props) => {
         focusedIndex: -1,
     });
     (0, index_js_3.useIsomorphicLayoutEffect)(() => {
-        var _a, _b;
         // When the dropdown opens
         if (isOpen) {
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); // Focus the input
+            inputRef.current?.focus(); // Focus the input
             // Reset the filtered list (does not reset when multiple enabled)
             if (!multiple) {
                 setFilteredOptions(optionsRef.current);
@@ -139,7 +134,7 @@ const ComboBox = (props) => {
             // Reset the input value if not multiple
             if (!isMultipleEnabled(selected, multiple)) {
                 setInputValue(selected != undefined && selected >= 0
-                    ? (_b = optionsRef.current[selected]) === null || _b === void 0 ? void 0 : _b.label
+                    ? optionsRef.current[selected]?.label
                     : '');
             }
         }
@@ -154,9 +149,9 @@ const ComboBox = (props) => {
     // Update filtered options to the latest value options according to input value
     const [filteredOptions, setFilteredOptions] = React.useState(options);
     React.useEffect(() => {
-        var _a;
         if (inputValue) {
-            setFilteredOptions((_a = filterFunction === null || filterFunction === void 0 ? void 0 : filterFunction(options, inputValue)) !== null && _a !== void 0 ? _a : options.filter((option) => option.label.toLowerCase().includes(inputValue.toLowerCase())));
+            setFilteredOptions(filterFunction?.(options, inputValue) ??
+                options.filter((option) => option.label.toLowerCase().includes(inputValue.toLowerCase())));
         }
         else {
             setFilteredOptions(options);
@@ -166,18 +161,18 @@ const ComboBox = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [options]);
     // Filter options based on input value
-    const [inputValue, setInputValue] = React.useState((_b = (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.value) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '');
+    const [inputValue, setInputValue] = React.useState(inputProps?.value?.toString() ?? '');
     const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
     const handleOnInput = React.useCallback((event) => {
-        var _a, _b;
         const { value } = event.currentTarget;
         setInputValue(value);
         dispatch({ type: 'open' }); // reopen when typing
-        setFilteredOptions((_a = filterFunction === null || filterFunction === void 0 ? void 0 : filterFunction(optionsRef.current, value)) !== null && _a !== void 0 ? _a : optionsRef.current.filter((option) => option.label.toLowerCase().includes(value.toLowerCase())));
+        setFilteredOptions(filterFunction?.(optionsRef.current, value) ??
+            optionsRef.current.filter((option) => option.label.toLowerCase().includes(value.toLowerCase())));
         if (focusedIndex != -1) {
             dispatch({ type: 'focus', value: -1 });
         }
-        (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onChange) === null || _b === void 0 ? void 0 : _b.call(inputProps, event);
+        inputProps?.onChange?.(event);
     }, [filterFunction, focusedIndex, inputProps, optionsRef]);
     // When the value prop changes, update the selected index/indices
     React.useEffect(() => {
@@ -226,23 +221,21 @@ const ComboBox = (props) => {
     }, [selected]);
     // Calls user defined onChange
     const onChangeHandler = React.useCallback((__originalIndex, actionType, newArray) => {
-        var _a, _b, _c, _d;
         if (isSingleOnChange(onChangeProp.current, multiple)) {
-            (_a = onChangeProp.current) === null || _a === void 0 ? void 0 : _a.call(onChangeProp, (_b = optionsRef.current[__originalIndex]) === null || _b === void 0 ? void 0 : _b.value);
+            onChangeProp.current?.(optionsRef.current[__originalIndex]?.value);
         }
         else {
             actionType &&
                 newArray &&
-                ((_c = onChangeProp.current) === null || _c === void 0 ? void 0 : _c.call(onChangeProp, newArray === null || newArray === void 0 ? void 0 : newArray.map((item) => { var _a; return (_a = optionsRef.current[item]) === null || _a === void 0 ? void 0 : _a.value; }), {
-                    value: (_d = optionsRef.current[__originalIndex]) === null || _d === void 0 ? void 0 : _d.value,
+                onChangeProp.current?.(newArray?.map((item) => optionsRef.current[item]?.value), {
+                    value: optionsRef.current[__originalIndex]?.value,
                     type: actionType,
-                }));
+                });
         }
     }, [multiple, onChangeProp, optionsRef]);
     const onClickHandler = React.useCallback((__originalIndex) => {
-        var _a, _b;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); // return focus to input
-        if ((_b = optionsRef.current[__originalIndex]) === null || _b === void 0 ? void 0 : _b.disabled) {
+        inputRef.current?.focus({ preventScroll: true }); // return focus to input
+        if (optionsRef.current[__originalIndex]?.disabled) {
             return;
         }
         if (isMultipleEnabled(selected, multiple)) {
@@ -254,7 +247,7 @@ const ComboBox = (props) => {
             onChangeHandler(__originalIndex, actionType, newArray);
             // update live region
             setLiveRegionSelection(newArray
-                .map((item) => { var _a; return (_a = optionsRef.current[item]) === null || _a === void 0 ? void 0 : _a.label; })
+                .map((item) => optionsRef.current[item]?.label)
                 .filter(Boolean)
                 .join(', '));
         }
@@ -275,7 +268,7 @@ const ComboBox = (props) => {
         const optionId = getOptionId(option, id);
         const { __originalIndex } = optionsExtraInfoRef.current[optionId];
         const { icon, startIcon: startIconProp, ...restOptions } = option;
-        const startIcon = startIconProp !== null && startIconProp !== void 0 ? startIconProp : icon;
+        const startIcon = startIconProp ?? icon;
         const customItem = itemRenderer
             ? itemRenderer(option, {
                 isFocused: focusedIndex === __originalIndex,
@@ -286,9 +279,8 @@ const ComboBox = (props) => {
             : null;
         return customItem ? (React.cloneElement(customItem, {
             onClick: (e) => {
-                var _a, _b;
                 onClickHandler(__originalIndex);
-                (_b = (_a = customItem.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                customItem.props.onClick?.(e);
             },
             // ComboBox.MenuItem handles scrollIntoView, data-iui-index and focused through context
             // but we still need to pass them here for backwards compatibility with MenuItem
@@ -297,7 +289,7 @@ const ComboBox = (props) => {
             'data-iui-filtered-index': filteredIndex,
             ref: (0, index_js_3.mergeRefs)(customItem.props.ref, (el) => {
                 if (!enableVirtualization && focusedIndex === __originalIndex) {
-                    el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
+                    el?.scrollIntoView({ block: 'nearest' });
                 }
             }),
         })) : (React.createElement(ComboBoxMenuItem_js_1.ComboBoxMenuItem, { key: optionId, id: optionId, startIcon: startIcon, ...restOptions, isSelected: isMenuItemSelected(__originalIndex), onClick: () => {
@@ -327,7 +319,7 @@ const ComboBox = (props) => {
                     getMenuItem,
                     multiple,
                 } },
-                React.createElement(ComboBoxInputContainer_js_1.ComboBoxInputContainer, { disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, ...rest },
+                React.createElement(ComboBoxInputContainer_js_1.ComboBoxInputContainer, { disabled: inputProps?.disabled, ...rest },
                     React.createElement(React.Fragment, null,
                         React.createElement(ComboBoxInput_js_1.ComboBoxInput, { value: inputValue, ...inputProps, onChange: handleOnInput, selectTags: isMultipleEnabled(selected, multiple)
                                 ? selected.map((index) => {
@@ -335,7 +327,7 @@ const ComboBox = (props) => {
                                     return (React.createElement(SelectTag_js_1.default, { key: item.label, label: item.label }));
                                 })
                                 : undefined })),
-                    React.createElement(ComboBoxEndIcon_js_1.ComboBoxEndIcon, { disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, isOpen: isOpen }),
+                    React.createElement(ComboBoxEndIcon_js_1.ComboBoxEndIcon, { disabled: inputProps?.disabled, isOpen: isOpen }),
                     multiple ? (React.createElement(index_js_3.AutoclearingHiddenLiveRegion, { text: liveRegionSelection })) : null),
                 React.createElement(ComboBoxDropdown_js_1.ComboBoxDropdown, { ...dropdownMenuProps, onShow: onShow, onHide: onHide },
                     React.createElement(ComboBoxMenu_js_1.ComboBoxMenu, null, filteredOptions.length > 0 && !enableVirtualization

package/cjs/core/ComboBox/ComboBoxDropdown.js

@@ -43,8 +43,7 @@ exports.ComboBoxDropdown = React.forwardRef((props, forwardedRef) => {
         }
     }, [dispatch, props.visible]);
     return (React.createElement(index_js_1.Popover, { placement: 'bottom-start', visible: isOpen, onClickOutside: React.useCallback((_, { target }) => {
-            var _a;
-            if (!((_a = toggleButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
+            if (!toggleButtonRef.current?.contains(target)) {
                 dispatch({ type: 'close' });
             }
         }, [dispatch, toggleButtonRef]), animation: 'shift-away', duration: 200, reference: inputRef, ref: forwardedRef, content: children, ...rest }));

package/cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -46,6 +46,6 @@ exports.ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
             'iui-open': isOpen,
         }, className), onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, () => {
             dispatch({ type: isOpen ? 'close' : 'open' });
-        }), ...rest }, children !== null && children !== void 0 ? children : React.createElement(index_js_1.SvgCaretDownSmall, { "aria-hidden": true })));
+        }), ...rest }, children ?? React.createElement(index_js_1.SvgCaretDownSmall, { "aria-hidden": true })));
 });
 exports.ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -39,18 +39,16 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     const dispatch = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxActionContext);
     const { inputRef, menuRef, optionsExtraInfoRef } = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
     const refs = (0, index_js_2.useMergedRefs)(inputRef, forwardedRef);
-    const focusedIndexRef = React.useRef(focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : -1);
+    const focusedIndexRef = React.useRef(focusedIndex ?? -1);
     React.useEffect(() => {
-        focusedIndexRef.current = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : -1;
+        focusedIndexRef.current = focusedIndex ?? -1;
     }, [focusedIndex]);
     const getIdFromIndex = (index) => {
-        var _a, _b, _c;
-        return ((_c = (_b = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-iui-index="${index}"]`)) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : '');
+        return (menuRef.current?.querySelector(`[data-iui-index="${index}"]`)?.id ?? '');
     };
     const handleKeyDown = React.useCallback((event) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(event);
-        const length = (_a = Object.keys(optionsExtraInfoRef.current).length) !== null && _a !== void 0 ? _a : 0;
+        onKeyDownProp?.(event);
+        const length = Object.keys(optionsExtraInfoRef.current).length ?? 0;
         if (event.altKey) {
             return;
         }
@@ -64,22 +62,23 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
                     return;
                 }
                 if (focusedIndexRef.current === -1) {
-                    const currentElement = (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelector('[data-iui-index]');
+                    const currentElement = menuRef.current?.querySelector('[data-iui-index]');
                     return dispatch({
                         type: 'focus',
-                        value: Number((_c = currentElement === null || currentElement === void 0 ? void 0 : currentElement.getAttribute('data-iui-index')) !== null && _c !== void 0 ? _c : 0),
+                        value: Number(currentElement?.getAttribute('data-iui-index') ?? 0),
                     });
                 }
                 // If virtualization is enabled, dont let round scrolling
                 if (enableVirtualization &&
-                    !((_e = (_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.querySelector(`[data-iui-index="${focusedIndexRef.current}"]`)) === null || _e === void 0 ? void 0 : _e.nextElementSibling)) {
+                    !menuRef.current?.querySelector(`[data-iui-index="${focusedIndexRef.current}"]`)?.nextElementSibling) {
                     return;
                 }
                 let nextIndex = focusedIndexRef.current;
                 do {
-                    const currentElement = (_f = menuRef.current) === null || _f === void 0 ? void 0 : _f.querySelector(`[data-iui-index="${nextIndex}"]`);
-                    const nextElement = (_g = currentElement === null || currentElement === void 0 ? void 0 : currentElement.nextElementSibling) !== null && _g !== void 0 ? _g : (_h = menuRef.current) === null || _h === void 0 ? void 0 : _h.querySelector('[data-iui-index]');
-                    nextIndex = Number(nextElement === null || nextElement === void 0 ? void 0 : nextElement.getAttribute('data-iui-index'));
+                    const currentElement = menuRef.current?.querySelector(`[data-iui-index="${nextIndex}"]`);
+                    const nextElement = currentElement?.nextElementSibling ??
+                        menuRef.current?.querySelector('[data-iui-index]');
+                    nextIndex = Number(nextElement?.getAttribute('data-iui-index'));
                     if (nextElement) {
                         return dispatch({ type: 'focus', value: nextIndex });
                     }
@@ -96,20 +95,22 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
                 }
                 // If virtualization is enabled, dont let round scrolling
                 if (enableVirtualization &&
-                    !((_k = (_j = menuRef.current) === null || _j === void 0 ? void 0 : _j.querySelector(`[data-iui-index="${focusedIndexRef.current}"]`)) === null || _k === void 0 ? void 0 : _k.previousElementSibling)) {
+                    !menuRef.current?.querySelector(`[data-iui-index="${focusedIndexRef.current}"]`)?.previousElementSibling) {
                     return;
                 }
                 if (focusedIndexRef.current === -1) {
                     return dispatch({
                         type: 'focus',
-                        value: (_m = (_l = Object.values(optionsExtraInfoRef.current)) === null || _l === void 0 ? void 0 : _l[length - 1].__originalIndex) !== null && _m !== void 0 ? _m : -1,
+                        value: Object.values(optionsExtraInfoRef.current)?.[length - 1]
+                            .__originalIndex ?? -1,
                     });
                 }
                 let prevIndex = focusedIndexRef.current;
                 do {
-                    const currentElement = (_o = menuRef.current) === null || _o === void 0 ? void 0 : _o.querySelector(`[data-iui-index="${prevIndex}"]`);
-                    const prevElement = (_p = currentElement === null || currentElement === void 0 ? void 0 : currentElement.previousElementSibling) !== null && _p !== void 0 ? _p : (_q = menuRef.current) === null || _q === void 0 ? void 0 : _q.querySelector('[data-iui-index]:last-of-type');
-                    prevIndex = Number(prevElement === null || prevElement === void 0 ? void 0 : prevElement.getAttribute('data-iui-index'));
+                    const currentElement = menuRef.current?.querySelector(`[data-iui-index="${prevIndex}"]`);
+                    const prevElement = currentElement?.previousElementSibling ??
+                        menuRef.current?.querySelector('[data-iui-index]:last-of-type');
+                    prevIndex = Number(prevElement?.getAttribute('data-iui-index'));
                     if (prevElement) {
                         return dispatch({ type: 'focus', value: prevIndex });
                     }
@@ -120,7 +121,7 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
                 event.preventDefault();
                 if (isOpen) {
                     if (focusedIndexRef.current > -1) {
-                        onClickHandler === null || onClickHandler === void 0 ? void 0 : onClickHandler(focusedIndexRef.current);
+                        onClickHandler?.(focusedIndexRef.current);
                     }
                 }
                 else {
@@ -148,7 +149,7 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     ]);
     const handleFocus = React.useCallback((event) => {
         dispatch({ type: 'open' });
-        onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(event);
+        onFocusProp?.(event);
     }, [dispatch, onFocusProp]);
     const handleClick = React.useCallback(() => {
         if (!isOpen) {

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -37,7 +37,7 @@ const index_js_1 = require("../Menu/index.js");
 const index_js_2 = require("../Surface/index.js");
 const index_js_3 = require("../utils/index.js");
 const helpers_js_1 = require("./helpers.js");
-const isOverflowOverlaySupported = () => { var _a, _b, _c; return (_c = (_b = (_a = (0, index_js_3.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, 'overflow: overlay'); };
+const isOverflowOverlaySupported = () => (0, index_js_3.getWindow)()?.CSS?.supports?.('overflow: overlay');
 const VirtualizedComboBoxMenu = React.forwardRef(({ children, className, style, ...rest }, forwardedRef) => {
     const { minWidth, id, filteredOptions, getMenuItem, focusedIndex } = (0, index_js_3.useSafeContext)(helpers_js_1.ComboBoxStateContext);
     const { menuRef } = (0, index_js_3.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
@@ -46,12 +46,11 @@ const VirtualizedComboBoxMenu = React.forwardRef(({ children, className, style,
         : children, // Here is expected empty state content
     [filteredOptions, getMenuItem, children]);
     const focusedVisibleIndex = React.useMemo(() => {
-        var _a, _b;
-        const currentElement = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-iui-index="${focusedIndex}"]`);
+        const currentElement = menuRef.current?.querySelector(`[data-iui-index="${focusedIndex}"]`);
         if (!currentElement) {
             return focusedIndex;
         }
-        return Number((_b = currentElement.getAttribute('data-iui-filtered-index')) !== null && _b !== void 0 ? _b : focusedIndex);
+        return Number(currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex);
     }, [focusedIndex, menuRef]);
     const { outerProps, innerProps, visibleChildren } = (0, index_js_3.useVirtualization)({
         // 'Fool' VirtualScroll by passing length 1

package/cjs/core/ComboBox/ComboBoxMenuItem.js

@@ -37,11 +37,11 @@ exports.ComboBoxMenuItem = React.memo(React.forwardRef((props, forwardedRef) =>
     const { focusedIndex, enableVirtualization } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);
     const focusRef = (el) => {
         if (!enableVirtualization && focusedIndex === index) {
-            el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
+            el?.scrollIntoView({ block: 'nearest' });
         }
     };
     const refs = (0, index_js_1.useMergedRefs)(forwardedRef, focusRef);
-    return (React.createElement(ListItem_js_1.ListItem, { actionable: true, size: size, active: isSelected, disabled: disabled, focused: focusedIndex === index, ref: refs, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(value), role: role, tabIndex: role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-disabled": disabled, "data-iui-index": index, ...rest },
+    return (React.createElement(ListItem_js_1.ListItem, { actionable: true, size: size, active: isSelected, disabled: disabled, focused: focusedIndex === index, ref: refs, onClick: () => onClick?.(value), role: role, tabIndex: role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-disabled": disabled, "data-iui-index": index, ...rest },
         startIcon && (React.createElement(ListItem_js_1.ListItem.Icon, { as: 'span', "aria-hidden": true }, startIcon)),
         React.createElement(ListItem_js_1.ListItem.Content, null,
             children,

package/cjs/core/ComboBox/helpers.js

@@ -30,7 +30,6 @@ exports.ComboBoxActionContext = exports.ComboBoxStateContext = exports.ComboBoxR
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const comboBoxReducer = (state, action) => {
-    var _a, _b, _c, _d, _e;
     switch (action.type) {
         case 'open': {
             return { ...state, isOpen: true };
@@ -44,8 +43,8 @@ const comboBoxReducer = (state, action) => {
             }
             return {
                 ...state,
-                selected: (_a = action.value) !== null && _a !== void 0 ? _a : state.selected,
-                focusedIndex: (_b = action.value) !== null && _b !== void 0 ? _b : state.focusedIndex,
+                selected: action.value ?? state.selected,
+                focusedIndex: action.value ?? state.focusedIndex,
             };
         }
         case 'multiselect': {
@@ -58,12 +57,12 @@ const comboBoxReducer = (state, action) => {
             if (Array.isArray(state.selected)) {
                 return {
                     ...state,
-                    focusedIndex: (_c = action.value) !== null && _c !== void 0 ? _c : -1,
+                    focusedIndex: action.value ?? -1,
                 };
             }
             return {
                 ...state,
-                focusedIndex: (_e = (_d = action.value) !== null && _d !== void 0 ? _d : state.selected) !== null && _e !== void 0 ? _e : -1,
+                focusedIndex: action.value ?? state.selected ?? -1,
             };
         }
         default: {

package/cjs/core/DatePicker/DatePicker.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/date-picker.css';
 import type { TimePickerProps } from '../TimePicker/TimePicker.js';
 /**
  * Generate localized months and days strings using `Intl.DateTimeFormat` for passed locale to use in DatePicker component.

package/cjs/core/DatePicker/DatePicker.js

@@ -34,7 +34,6 @@ exports.DatePicker = exports.generateLocalizedStrings = 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/date-picker.css");
 const index_js_2 = require("../Buttons/IconButton/index.js");
 const index_js_3 = require("../TimePicker/index.js");
 const isSameDay = (a, b) => {
@@ -141,17 +140,20 @@ exports.generateLocalizedStrings = generateLocalizedStrings;
  * <DatePicker date={new Date()} onChange={(e) => console.log('New date value: ' + e)} />
  */
 exports.DatePicker = React.forwardRef((props, forwardedRef) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { date, onChange, localizedNames, className, setFocus = false, showTime = false, use12Hours = false, precision, hourStep, minuteStep, secondStep, useCombinedRenderer, combinedRenderer, hourRenderer, minuteRenderer, secondRenderer, meridiemRenderer, showYearSelection = false, enableRangeSelect = false, startDate, endDate, isDateDisabled, ...rest } = props;
-    const monthNames = (_a = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.months) !== null && _a !== void 0 ? _a : defaultMonths;
-    const shortDays = (_b = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.shortDays) !== null && _b !== void 0 ? _b : defaultShortDays;
-    const longDays = (_c = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.days) !== null && _c !== void 0 ? _c : defaultLongDays;
+    const monthNames = localizedNames?.months ?? defaultMonths;
+    const shortDays = localizedNames?.shortDays ?? defaultShortDays;
+    const longDays = localizedNames?.days ?? defaultLongDays;
     const [selectedDay, setSelectedDay] = React.useState(date);
     const [selectedStartDay, setSelectedStartDay] = React.useState(startDate);
     const [selectedEndDay, setSelectedEndDay] = React.useState(endDate);
-    const [focusedDay, setFocusedDay] = React.useState((_d = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay) !== null && _d !== void 0 ? _d : new Date());
-    const [displayedMonthIndex, setDisplayedMonthIndex] = React.useState((_f = (_e = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getMonth()) !== null && _e !== void 0 ? _e : selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.getMonth()) !== null && _f !== void 0 ? _f : new Date().getMonth());
-    const [displayedYear, setDisplayedYear] = React.useState((_h = (_g = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getFullYear()) !== null && _g !== void 0 ? _g : selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.getFullYear()) !== null && _h !== void 0 ? _h : new Date().getFullYear());
+    const [focusedDay, setFocusedDay] = React.useState(selectedStartDay ?? selectedDay ?? new Date());
+    const [displayedMonthIndex, setDisplayedMonthIndex] = React.useState(selectedStartDay?.getMonth() ??
+        selectedDay?.getMonth() ??
+        new Date().getMonth());
+    const [displayedYear, setDisplayedYear] = React.useState(selectedStartDay?.getFullYear() ??
+        selectedDay?.getFullYear() ??
+        new Date().getFullYear());
     // boolean that toggles between the user picking the start date and end date for date range
     const [isSelectingStartDate, setIsSelectingStartDate] = React.useState(true);
     // Used to focus days only when days are changed
@@ -167,15 +169,16 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
         setDisplayedYear(newYear);
     }, []);
     React.useEffect(() => {
-        var _a, _b, _c, _d;
         const currentDate = new Date();
         setSelectedDay(date);
         setSelectedStartDay(startDate);
         setSelectedEndDay(endDate);
         if (!enableRangeSelect) {
-            setFocusedDay(date !== null && date !== void 0 ? date : currentDate);
+            setFocusedDay(date ?? currentDate);
         }
-        setMonthAndYear((_b = (_a = startDate === null || startDate === void 0 ? void 0 : startDate.getMonth()) !== null && _a !== void 0 ? _a : date === null || date === void 0 ? void 0 : date.getMonth()) !== null && _b !== void 0 ? _b : currentDate.getMonth(), (_d = (_c = startDate === null || startDate === void 0 ? void 0 : startDate.getFullYear()) !== null && _c !== void 0 ? _c : date === null || date === void 0 ? void 0 : date.getFullYear()) !== null && _d !== void 0 ? _d : currentDate.getFullYear());
+        setMonthAndYear(startDate?.getMonth() ?? date?.getMonth() ?? currentDate.getMonth(), startDate?.getFullYear() ??
+            date?.getFullYear() ??
+            currentDate.getFullYear());
     }, [date, setMonthAndYear, startDate, endDate, enableRangeSelect]);
     const days = React.useMemo(() => {
         let offsetToFirst = new Date(displayedYear, displayedMonthIndex, 1).getDay();
@@ -200,8 +203,7 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
         return weeksInMonth;
     }, [days]);
     const getNewFocusedDate = (newYear, newMonth) => {
-        var _a;
-        const currentDate = (_a = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay) !== null && _a !== void 0 ? _a : new Date();
+        const currentDate = selectedStartDay ?? selectedDay ?? new Date();
         const newDate = new Date(newYear, newMonth, currentDate.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
         return newDate;
     };
@@ -230,51 +232,51 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
     const onDayClick = (day) => {
         // single date selection
         if (!enableRangeSelect) {
-            if (day.getMonth() !== (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.getMonth())) {
+            if (day.getMonth() !== selectedDay?.getMonth()) {
                 setMonthAndYear(day.getMonth(), day.getFullYear());
             }
-            const currentDate = selectedDay !== null && selectedDay !== void 0 ? selectedDay : new Date();
+            const currentDate = selectedDay ?? new Date();
             const newDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
             setSelectedDay(newDate);
             setFocusedDay(newDate);
-            isSingleOnChange(onChange, enableRangeSelect) && (onChange === null || onChange === void 0 ? void 0 : onChange(newDate));
+            isSingleOnChange(onChange, enableRangeSelect) && onChange?.(newDate);
         }
         // start date selection (date range only)
         else if (isSelectingStartDate) {
-            if (day.getMonth() !== (selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getMonth())) {
+            if (day.getMonth() !== selectedStartDay?.getMonth()) {
                 setMonthAndYear(day.getMonth(), day.getFullYear());
             }
-            const currentStartDate = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : new Date();
+            const currentStartDate = selectedStartDay ?? new Date();
             const newStartDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentStartDate.getHours(), currentStartDate.getMinutes(), currentStartDate.getSeconds());
             setSelectedStartDay(newStartDate);
             setFocusedDay(newStartDate);
             // if the start date is after the end date or the end date is undefined, reset the end date
             if (!(0, index_js_1.isBefore)(newStartDate, selectedEndDay)) {
                 setSelectedEndDay(newStartDate);
-                onChange === null || onChange === void 0 ? void 0 : onChange(newStartDate, newStartDate);
+                onChange?.(newStartDate, newStartDate);
             }
             else {
-                selectedEndDay && (onChange === null || onChange === void 0 ? void 0 : onChange(newStartDate, selectedEndDay));
+                selectedEndDay && onChange?.(newStartDate, selectedEndDay);
             }
             setIsSelectingStartDate(false);
         }
         // end date selection (date range only)
         else {
-            if (day.getMonth() !== (selectedEndDay === null || selectedEndDay === void 0 ? void 0 : selectedEndDay.getMonth())) {
+            if (day.getMonth() !== selectedEndDay?.getMonth()) {
                 setMonthAndYear(day.getMonth(), day.getFullYear());
             }
-            const currentEndDate = selectedEndDay !== null && selectedEndDay !== void 0 ? selectedEndDay : new Date();
+            const currentEndDate = selectedEndDay ?? new Date();
             const newEndDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentEndDate.getHours(), currentEndDate.getMinutes(), currentEndDate.getSeconds());
             setFocusedDay(newEndDate);
             // if the end date is before the start date, move back the start date and still have user select end date
             if (!(0, index_js_1.isBefore)(newEndDate, selectedStartDay)) {
                 setSelectedEndDay(newEndDate);
-                selectedStartDay && (onChange === null || onChange === void 0 ? void 0 : onChange(selectedStartDay, newEndDate));
+                selectedStartDay && onChange?.(selectedStartDay, newEndDate);
                 setIsSelectingStartDate(true);
             }
             else {
                 setSelectedStartDay(newEndDate);
-                selectedEndDay && (onChange === null || onChange === void 0 ? void 0 : onChange(newEndDate, selectedEndDay));
+                selectedEndDay && onChange?.(newEndDate, selectedEndDay);
             }
         }
     };
@@ -326,7 +328,7 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
             case 'Enter':
             case ' ':
             case 'Spacebar':
-                if (!(isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(focusedDay))) {
+                if (!isDateDisabled?.(focusedDay)) {
                     onDayClick(focusedDay);
                 }
                 event.preventDefault();
@@ -379,17 +381,14 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
             React.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map((weekDays, weekIndex) => {
                 return (React.createElement(index_js_1.Box, { key: `week-${displayedMonthIndex}-${weekIndex}`, className: 'iui-calendar-week' }, weekDays.map((weekDay, dayIndex) => {
                     const dateValue = weekDay.getDate();
-                    const isDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(weekDay);
+                    const isDisabled = isDateDisabled?.(weekDay);
                     return (React.createElement(index_js_1.Box, { key: `day-${displayedMonthIndex}-${dayIndex}`, className: getDayClass(weekDay), onClick: () => !isDisabled && onDayClick(weekDay), role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, "aria-disabled": isDisabled ? 'true' : undefined, ref: (element) => isSameDay(weekDay, focusedDay) &&
                             needFocus.current &&
-                            (element === null || element === void 0 ? void 0 : element.focus()) }, dateValue));
+                            element?.focus() }, dateValue));
                 })));
             }))),
-        showTime && (React.createElement(index_js_3.TimePicker, { date: selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay, use12Hours: use12Hours, precision: precision, hourStep: hourStep, minuteStep: minuteStep, secondStep: secondStep, useCombinedRenderer: useCombinedRenderer, combinedRenderer: combinedRenderer, hourRenderer: hourRenderer, minuteRenderer: minuteRenderer, secondRenderer: secondRenderer, meridiemRenderer: meridiemRenderer, onChange: (date) => {
-                var _a, _b, _c, _d, _e, _f;
-                return isSingleOnChange(onChange, enableRangeSelect)
-                    ? onChange === null || onChange === void 0 ? void 0 : onChange(date)
-                    : onChange === null || onChange === void 0 ? void 0 : onChange(new Date((_a = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getFullYear()) !== null && _a !== void 0 ? _a : date.getFullYear(), (_b = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getMonth()) !== null && _b !== void 0 ? _b : date.getMonth(), (_c = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getDate()) !== null && _c !== void 0 ? _c : date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()), new Date((_d = selectedEndDay === null || selectedEndDay === void 0 ? void 0 : selectedEndDay.getFullYear()) !== null && _d !== void 0 ? _d : date.getFullYear(), (_e = selectedEndDay === null || selectedEndDay === void 0 ? void 0 : selectedEndDay.getMonth()) !== null && _e !== void 0 ? _e : date.getMonth(), (_f = selectedEndDay === null || selectedEndDay === void 0 ? void 0 : selectedEndDay.getDate()) !== null && _f !== void 0 ? _f : date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()));
-            } }))));
+        showTime && (React.createElement(index_js_3.TimePicker, { date: selectedStartDay ?? selectedDay, use12Hours: use12Hours, precision: precision, hourStep: hourStep, minuteStep: minuteStep, secondStep: secondStep, useCombinedRenderer: useCombinedRenderer, combinedRenderer: combinedRenderer, hourRenderer: hourRenderer, minuteRenderer: minuteRenderer, secondRenderer: secondRenderer, meridiemRenderer: meridiemRenderer, onChange: (date) => isSingleOnChange(onChange, enableRangeSelect)
+                ? onChange?.(date)
+                : onChange?.(new Date(selectedStartDay?.getFullYear() ?? date.getFullYear(), selectedStartDay?.getMonth() ?? date.getMonth(), selectedStartDay?.getDate() ?? date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()), new Date(selectedEndDay?.getFullYear() ?? date.getFullYear(), selectedEndDay?.getMonth() ?? date.getMonth(), selectedEndDay?.getDate() ?? date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds())) }))));
 });
 exports.default = exports.DatePicker;

package/cjs/core/Dialog/Dialog.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
 import type { DialogContextProps } from './DialogContext.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 declare type DialogProps = {

package/cjs/core/Dialog/Dialog.js

@@ -32,8 +32,8 @@ exports.Dialog = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
+const ReactDOM = __importStar(require("react-dom"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/dialog.css");
 const DialogTitleBar_js_1 = require("./DialogTitleBar.js");
 const DialogContent_js_1 = require("./DialogContent.js");
 const DialogBackdrop_js_1 = require("./DialogBackdrop.js");
@@ -42,9 +42,16 @@ const DialogButtonBar_js_1 = require("./DialogButtonBar.js");
 const DialogMain_js_1 = require("./DialogMain.js");
 const index_js_1 = require("../utils/index.js");
 const DialogComponent = React.forwardRef((props, ref) => {
-    const { trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', className, ...rest } = props;
+    const { trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', placement, className, portal = false, ...rest } = props;
     const dialogRootRef = React.useRef(null);
-    const refs = (0, index_js_1.useMergedRefs)(ref, dialogRootRef);
+    const context = (0, index_js_1.useGlobals)();
+    const isClient = (0, index_js_1.useIsClient)();
+    const portalTo = typeof portal !== 'boolean'
+        ? portal.to
+        : portal
+            ? context?.portalContainerRef?.current ?? (0, index_js_1.getDocument)()?.body
+            : null;
+    const dialog = (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: (0, index_js_1.useMergedRefs)(ref, dialogRootRef), ...rest }));
     return (React.createElement(DialogContext_js_1.DialogContext.Provider, { value: {
             isOpen,
             onClose,
@@ -58,8 +65,8 @@ const DialogComponent = React.forwardRef((props, ref) => {
             isResizable,
             relativeTo,
             dialogRootRef,
-        } },
-        React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: refs, ...rest })));
+            placement,
+        } }, portalTo && isClient ? ReactDOM.createPortal(dialog, portalTo) : dialog));
 });
 /**
  * Dialog component.

package/cjs/core/Dialog/DialogBackdrop.js

@@ -56,7 +56,7 @@ exports.DialogBackdrop = React.forwardRef((props, ref) => {
         if (isDismissible && closeOnExternalClick && onClose) {
             onClose(event);
         }
-        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+        onMouseDown?.(event);
     };
     return (React.createElement(index_js_1.Backdrop, { isVisible: isVisible, className: (0, classnames_1.default)({ 'iui-backdrop-fixed': relativeTo === 'viewport' }, className), ref: refs, onMouseDown: handleMouseDown, style: {
             pointerEvents: 'auto',

package/cjs/core/Dialog/DialogButtonBar.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Container for Buttons in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example