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

package/esm/core/Menu/MenuItem.js

@@ -20,10 +20,9 @@ export const MenuItem = React.forwardRef((props, ref) => {
     const { ref: parentMenuItemRef } = React.useContext(MenuItemContext);
     const subMenuRef = React.useRef(null);
     const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
-    const startIcon = startIconProp !== null && startIconProp !== void 0 ? startIconProp : icon;
-    const endIcon = endIconProp !== null && endIconProp !== void 0 ? endIconProp : badge;
+    const startIcon = startIconProp ?? icon;
+    const endIcon = endIconProp ?? badge;
     const onKeyDown = (event) => {
-        var _a;
         if (event.altKey) {
             return;
         }
@@ -31,7 +30,7 @@ export const MenuItem = React.forwardRef((props, ref) => {
             case 'Enter':
             case ' ':
             case 'Spacebar': {
-                !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value));
+                !disabled && onClick?.(value);
                 event.preventDefault();
                 break;
             }
@@ -44,7 +43,7 @@ export const MenuItem = React.forwardRef((props, ref) => {
                 break;
             }
             case 'ArrowLeft': {
-                (_a = parentMenuItemRef === null || parentMenuItemRef === void 0 ? void 0 : parentMenuItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                parentMenuItemRef?.current?.focus();
                 event.stopPropagation();
                 event.preventDefault();
                 break;
@@ -53,10 +52,9 @@ export const MenuItem = React.forwardRef((props, ref) => {
                 break;
         }
     };
-    const listItem = (React.createElement(ListItem, { actionable: true, size: size, active: isSelected, disabled: disabled, onClick: () => !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value)), ref: refs, role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-haspopup": subMenuItems.length > 0, "aria-disabled": disabled, onKeyDown: onKeyDown, onMouseEnter: () => setIsSubmenuVisible(true), onMouseLeave: (e) => {
-            var _a;
+    const listItem = (React.createElement(ListItem, { actionable: true, size: size, active: isSelected, disabled: disabled, onClick: () => !disabled && onClick?.(value), ref: refs, role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-haspopup": subMenuItems.length > 0, "aria-disabled": disabled, onKeyDown: onKeyDown, onMouseEnter: () => setIsSubmenuVisible(true), onMouseLeave: (e) => {
             if (!(e.relatedTarget instanceof Node) ||
-                !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
+                !subMenuRef.current?.contains(e.relatedTarget)) {
                 setIsSubmenuVisible(false);
             }
         }, ...rest },
@@ -69,10 +67,9 @@ export const MenuItem = React.forwardRef((props, ref) => {
         endIcon && (React.createElement(ListItem.Icon, { as: 'span', "aria-hidden": true }, endIcon))));
     return subMenuItems.length === 0 ? (listItem) : (React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
         React.createElement(Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onBlur: (e) => {
-                    var _a, _b;
                     !!(e.relatedTarget instanceof Node) &&
-                        !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
-                        !((_b = subMenuRef.current) === null || _b === void 0 ? void 0 : _b.isEqualNode(e.relatedTarget)) &&
+                        !subMenuRef.current?.contains(e.relatedTarget) &&
+                        !subMenuRef.current?.isEqualNode(e.relatedTarget) &&
                         setIsSubmenuVisible(false);
                 } },
                 React.createElement(Menu, { ref: subMenuRef }, subMenuItems)) }, listItem)));

package/esm/core/Modal/Modal.d.ts

@@ -30,16 +30,15 @@ declare type ModalProps = {
      */
     onKeyDown?: React.KeyboardEventHandler;
     /**
-     * Id of the root where the modal will be rendered in.
-     * @default 'iui-react-portal-container'
-     */
-    modalRootId?: string;
-    /**
-     * Document where the modal will be rendered.
-     * Can be specified to render in a different document (e.g. a popup window).
-     * @default document
+     * If true, the dialog will be portaled into a <div> inside the nearest `ThemeProvider`.
+     *
+     * Can be set to an object with a `to` property to portal into a specific element.
+     *
+     * @default true
      */
-    ownerDocument?: Document;
+    portal?: boolean | {
+        to: HTMLElement;
+    };
     /**
      * Content of the modal.
      */

package/esm/core/Modal/Modal.js

@@ -3,8 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import ReactDOM from 'react-dom';
-import { getContainer, getDocument } from '../utils/index.js';
 import { Dialog } from '../Dialog/index.js';
 /**
  * Modal component which can wrap any content.
@@ -28,16 +26,11 @@ import { Dialog } from '../Dialog/index.js';
  * </Modal>
  */
 export const Modal = React.forwardRef((props, forwardedRef) => {
-    const { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, modalRootId = 'iui-react-portal-container', ownerDocument = getDocument(), ...rest } = props;
-    const [container, setContainer] = React.useState();
-    React.useEffect(() => {
-        setContainer(getContainer(modalRootId, ownerDocument));
-        return () => setContainer(undefined);
-    }, [ownerDocument, modalRootId]);
-    return !!container ? (ReactDOM.createPortal(React.createElement(Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true, ref: forwardedRef },
+    const { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, portal = true, ...rest } = props;
+    return (React.createElement(Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true, ref: forwardedRef, portal: portal },
         React.createElement(Dialog.Backdrop, null),
         React.createElement(Dialog.Main, { "aria-modal": true, ...rest },
             React.createElement(Dialog.TitleBar, { titleText: title }),
-            children)), container)) : (React.createElement(React.Fragment, null));
+            children)));
 });
 export default Modal;

package/esm/core/SearchBox/SearchBox.js

@@ -14,16 +14,16 @@ const SearchBoxComponent = React.forwardRef((props, ref) => {
     const inputRef = React.useRef(null);
     const openButtonRef = React.useRef(null);
     const [localExpanded, setLocalExpanded] = React.useState(isExpandedProp);
-    const isExpanded = isExpandedProp !== null && isExpandedProp !== void 0 ? isExpandedProp : localExpanded;
+    const isExpanded = isExpandedProp ?? localExpanded;
     const onCollapse = () => {
         setLocalExpanded(false);
-        onCollapseProp === null || onCollapseProp === void 0 ? void 0 : onCollapseProp();
-        queueMicrotask(() => { var _a; return (_a = openButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); });
+        onCollapseProp?.();
+        queueMicrotask(() => openButtonRef.current?.focus({ preventScroll: true }));
     };
     const onExpand = () => {
         setLocalExpanded(true);
-        onExpandProp === null || onExpandProp === void 0 ? void 0 : onExpandProp();
-        queueMicrotask(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); });
+        onExpandProp?.();
+        queueMicrotask(() => inputRef.current?.focus({ preventScroll: true }));
     };
     return (React.createElement(SearchBoxContext.Provider, { value: {
             size,
@@ -37,7 +37,7 @@ const SearchBoxComponent = React.forwardRef((props, ref) => {
             isExpanded,
             expandable,
         } },
-        React.createElement(InputFlexContainer, { ref: ref, className: cx('iui-searchbox', { 'iui-expandable-searchbox': expandable }, className), "data-iui-size": size, isDisabled: isDisabled, "data-iui-expanded": isExpanded, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+        React.createElement(InputFlexContainer, { ref: ref, className: cx('iui-searchbox', { 'iui-expandable-searchbox': expandable }, className), "data-iui-size": size, isDisabled: isDisabled, "data-iui-expanded": isExpanded, ...rest }, children ?? (React.createElement(React.Fragment, null,
             React.createElement(SearchBoxCollapsedState, null,
                 React.createElement(SearchBoxExpandButton, null)),
             React.createElement(SearchBoxExpandedState, null,
@@ -51,7 +51,7 @@ const SearchBoxCollapsedState = ({ children, }) => {
     if (!expandable || isExpanded) {
         return null;
     }
-    return React.createElement(React.Fragment, null, children !== null && children !== void 0 ? children : React.createElement(SearchBoxExpandButton, null));
+    return React.createElement(React.Fragment, null, children ?? React.createElement(SearchBoxExpandButton, null));
 };
 SearchBoxCollapsedState.displayName = 'SearchBox.CollapsedState';
 // ----------------------------------------------------------------------------
@@ -66,7 +66,7 @@ SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
 // ----------------------------------------------------------------------------
 const SearchBoxIcon = React.forwardRef((props, ref) => {
     const { className, children, ...rest } = props;
-    return (React.createElement(Icon, { "aria-hidden": true, className: cx('iui-search-icon', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgSearch, null)));
+    return (React.createElement(Icon, { "aria-hidden": true, className: cx('iui-search-icon', className), ref: ref, ...rest }, children ?? React.createElement(SvgSearch, null)));
 });
 SearchBoxIcon.displayName = 'SearchBox.Icon';
 // ----------------------------------------------------------------------------
@@ -78,28 +78,28 @@ const SearchBoxInput = React.forwardRef((props, ref) => {
             setInputId(idProp);
         }
     }, [idProp, inputId, setInputId]);
-    return (React.createElement(Box, { as: 'input', id: idProp !== null && idProp !== void 0 ? idProp : inputId, ref: useMergedRefs(ref, inputRef), role: 'searchbox', type: 'text', className: cx('iui-search-input', className), disabled: isDisabled, ...rest }));
+    return (React.createElement(Box, { as: 'input', id: idProp ?? inputId, ref: useMergedRefs(ref, inputRef), role: 'searchbox', type: 'text', className: cx('iui-search-input', className), disabled: isDisabled, ...rest }));
 });
 SearchBoxInput.displayName = 'SearchBox.Input';
 // ----------------------------------------------------------------------------
 const SearchBoxButton = React.forwardRef((props, ref) => {
     const { children, ...rest } = props;
     const { size: sizeContext, isDisabled } = useSafeContext(SearchBoxContext);
-    return (React.createElement(IconButton, { styleType: 'borderless', size: sizeContext, ref: ref, disabled: isDisabled, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgSearch, null)));
+    return (React.createElement(IconButton, { styleType: 'borderless', size: sizeContext, ref: ref, disabled: isDisabled, ...rest }, children ?? React.createElement(SvgSearch, null)));
 });
 SearchBoxButton.displayName = 'SearchBox.Button';
 // ----------------------------------------------------------------------------
 const SearchBoxCollapseButton = React.forwardRef((props, ref) => {
     const { children, onClick: onClickProp, ...rest } = props;
     const { onCollapse, size: sizeContext, isDisabled, } = useSafeContext(SearchBoxContext);
-    return (React.createElement(SearchBoxButton, { ref: ref, "aria-label": 'Close searchbox', size: sizeContext, disabled: isDisabled, onClick: mergeEventHandlers(onClickProp, onCollapse), ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgCloseSmall, null)));
+    return (React.createElement(SearchBoxButton, { ref: ref, "aria-label": 'Close searchbox', size: sizeContext, disabled: isDisabled, onClick: mergeEventHandlers(onClickProp, onCollapse), ...rest }, children ?? React.createElement(SvgCloseSmall, null)));
 });
 SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton';
 // ----------------------------------------------------------------------------
 const SearchBoxExpandButton = React.forwardRef((props, ref) => {
     const { children, className, onClick: onClickProp, ...rest } = props;
     const { onExpand, size: sizeContext, isDisabled, openButtonRef, } = useSafeContext(SearchBoxContext);
-    return (React.createElement(SearchBoxButton, { ref: useMergedRefs(ref, openButtonRef), className: cx('iui-searchbox-open-button', className), "aria-label": 'Expand searchbox', size: sizeContext, disabled: isDisabled, onClick: mergeEventHandlers(onClickProp, onExpand), ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgSearch, null)));
+    return (React.createElement(SearchBoxButton, { ref: useMergedRefs(ref, openButtonRef), className: cx('iui-searchbox-open-button', className), "aria-label": 'Expand searchbox', size: sizeContext, disabled: isDisabled, onClick: mergeEventHandlers(onClickProp, onExpand), ...rest }, children ?? React.createElement(SvgSearch, null)));
 });
 SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
 // ----------------------------------------------------------------------------

package/esm/core/Select/Select.js

@@ -65,24 +65,22 @@ const isSingleOnChange = (onChange, multiple) => {
  * />
  */
 export const Select = (props) => {
-    var _a;
     const uid = useId();
     const { options, value, onChange, placeholder, disabled = false, size, setFocus = false, itemRenderer, selectedItemRenderer, className, style, menuClassName, menuStyle, onShow, onHide, popoverProps, multiple = false, triggerProps, ...rest } = props;
     const [isOpenState, setIsOpen] = React.useState(false);
-    const isOpen = (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : isOpenState;
+    const isOpen = popoverProps?.visible ?? isOpenState;
     const [minWidth, setMinWidth] = React.useState(0);
     const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
     const selectRef = React.useRef(null);
     const toggleButtonRef = React.useRef(null);
     const onShowHandler = React.useCallback((instance) => {
         setIsOpen(true);
-        onShow === null || onShow === void 0 ? void 0 : onShow(instance);
+        onShow?.(instance);
     }, [onShow]);
     const onHideHandler = React.useCallback((instance) => {
-        var _a;
         setIsOpen(false);
-        (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); // move focus back to select button
-        onHide === null || onHide === void 0 ? void 0 : onHide(instance);
+        selectRef.current?.focus({ preventScroll: true }); // move focus back to select button
+        onHide?.(instance);
     }, [onHide]);
     React.useEffect(() => {
         if (selectRef.current && !disabled && setFocus) {
@@ -112,13 +110,12 @@ export const Select = (props) => {
     };
     const menuItems = React.useMemo(() => {
         return options.map((option, index) => {
-            var _a;
             const isSelected = isMultipleEnabled(value, multiple)
-                ? (_a = value === null || value === void 0 ? void 0 : value.includes(option.value)) !== null && _a !== void 0 ? _a : false
+                ? value?.includes(option.value) ?? false
                 : value === option.value;
             const menuItem = itemRenderer ? (itemRenderer(option, { close: () => setIsOpen(false), isSelected })) : (React.createElement(MenuItem, null, option.label));
             const { label, icon, startIcon: startIconProp, ...restOption } = option;
-            const startIcon = startIconProp !== null && startIconProp !== void 0 ? startIconProp : icon;
+            const startIcon = startIconProp ?? icon;
             return React.cloneElement(menuItem, {
                 key: `${label}-${index}`,
                 isSelected,
@@ -128,11 +125,11 @@ export const Select = (props) => {
                         return;
                     }
                     if (isSingleOnChange(onChange, multiple)) {
-                        onChange === null || onChange === void 0 ? void 0 : onChange(option.value);
+                        onChange?.(option.value);
                         setIsOpen(false);
                     }
                     else {
-                        onChange === null || onChange === void 0 ? void 0 : onChange(option.value, isSelected ? 'removed' : 'added');
+                        onChange?.(option.value, isSelected ? 'removed' : 'added');
                     }
                     // update live region
                     if (isMultipleEnabled(value, multiple)) {
@@ -149,7 +146,7 @@ export const Select = (props) => {
                 },
                 ref: (el) => {
                     if (isSelected && !multiple) {
-                        el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
+                        el?.scrollIntoView({ block: 'nearest' });
                     }
                 },
                 role: 'option',
@@ -175,15 +172,14 @@ export const Select = (props) => {
                     maxWidth: `min(${minWidth * 2}px, 90vw)`,
                     ...menuStyle,
                 }, id: `${uid}-menu`, key: `${uid}-menu` }, menuItems), placement: 'bottom-start', aria: { content: null }, onShow: onShowHandler, onHide: onHideHandler, ...popoverProps, visible: isOpen, onClickOutside: (_, { target }) => {
-                var _a;
-                if (!((_a = toggleButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
+                if (!toggleButtonRef.current?.contains(target)) {
                     setIsOpen(false);
                 }
             } },
             React.createElement(Box, { tabIndex: 0, role: 'combobox', ref: selectRef, "data-iui-size": size, onClick: () => !disabled && setIsOpen((o) => !o), onKeyDown: (e) => !disabled && onKeyDown(e), "aria-disabled": disabled, "aria-autocomplete": 'none', "aria-expanded": isOpen, "aria-haspopup": 'listbox', "aria-controls": `${uid}-menu`, ...triggerProps, className: cx('iui-select-button', {
                     'iui-placeholder': (!selectedItems || selectedItems.length === 0) && !!placeholder,
                     'iui-disabled': disabled,
-                }, triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.className) },
+                }, triggerProps?.className) },
                 (!selectedItems || selectedItems.length === 0) && (React.createElement(Box, { as: 'span', className: 'iui-content' }, placeholder)),
                 isMultipleEnabled(selectedItems, multiple) ? (React.createElement(MultipleSelectButton, { selectedItems: selectedItems, selectedItemsRenderer: selectedItemRenderer, tagRenderer: tagRenderer })) : (React.createElement(SingleSelectButton, { selectedItem: selectedItems, selectedItemRenderer: selectedItemRenderer })))),
         React.createElement(Box, { as: 'span', "aria-hidden": true, ref: toggleButtonRef, className: cx('iui-end-icon', {
@@ -195,8 +191,7 @@ export const Select = (props) => {
         multiple ? (React.createElement(AutoclearingHiddenLiveRegion, { text: liveRegionSelection })) : null));
 };
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer, }) => {
-    var _a;
-    const startIcon = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.startIcon) !== null && _a !== void 0 ? _a : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon;
+    const startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
     return (React.createElement(React.Fragment, null,
         selectedItem &&
             selectedItemRenderer &&

package/esm/core/SideNavigation/SideNavigation.js

@@ -29,7 +29,7 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
     }, [isExpanded]);
     const ExpandButton = (React.createElement(IconButton, { className: 'iui-sidenav-button iui-expand', onClick: React.useCallback(() => {
             _setIsExpanded((expanded) => !expanded);
-            onExpanderClick === null || onExpanderClick === void 0 ? void 0 : onExpanderClick();
+            onExpanderClick?.();
         }, [onExpanderClick]) },
         React.createElement(SvgChevronRight, null)));
     return (React.createElement(Box, { className: cx('iui-side-navigation-wrapper', className), ref: forwardedRef, ...rest },
@@ -40,7 +40,7 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
             expanderPlacement === 'top' && ExpandButton,
             React.createElement(Box, { className: 'iui-sidenav-content' },
                 React.createElement(Box, { className: 'iui-top' }, items.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton))),
-                React.createElement(Box, { className: 'iui-bottom' }, secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
+                React.createElement(Box, { className: 'iui-bottom' }, secondaryItems?.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
             expanderPlacement === 'bottom' && ExpandButton),
         submenu && (React.createElement(WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu))));
 });

package/esm/core/Slider/Slider.js

@@ -42,10 +42,9 @@ const formatNumberValue = (value, step, numDecimals) => {
  * Focus specified thumb on Slider control
  */
 const focusThumb = (sliderContainer, activeIndex) => {
-    var _a;
     const doc = sliderContainer.ownerDocument;
     if (!sliderContainer.contains(doc.activeElement) ||
-        Number((_a = doc.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-index')) !== activeIndex) {
+        Number(doc.activeElement?.getAttribute('data-index')) !== activeIndex) {
         const thumbToFocus = sliderContainer.querySelector(`[data-index="${activeIndex}"]`);
         thumbToFocus && thumbToFocus.focus();
     }
@@ -59,19 +58,18 @@ const focusThumb = (sliderContainer, activeIndex) => {
  *   thumbMode='allow-crossing' />
  */
 export const Slider = React.forwardRef((props, ref) => {
-    var _a, _b;
     const { min = 0, max = 100, values, step = 1, setFocus = false, tooltipProps, disabled = false, tickLabels, minLabel, maxLabel, trackDisplayMode = 'auto', thumbMode = 'inhibit-crossing', onChange, onUpdate, thumbProps, className, railContainerProps, orientation = 'horizontal', ...rest } = props;
     const [currentValues, setCurrentValues] = React.useState(values);
     React.useEffect(() => {
         setCurrentValues(values);
     }, [values]);
-    const [minValueLabel, setMinValueLabel] = React.useState(() => minLabel !== null && minLabel !== void 0 ? minLabel : min.toString());
+    const [minValueLabel, setMinValueLabel] = React.useState(() => minLabel ?? min.toString());
     React.useEffect(() => {
-        setMinValueLabel(minLabel !== null && minLabel !== void 0 ? minLabel : min.toString());
+        setMinValueLabel(minLabel ?? min.toString());
     }, [minLabel, min]);
-    const [maxValueLabel, setMaxValueLabel] = React.useState(() => maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString());
+    const [maxValueLabel, setMaxValueLabel] = React.useState(() => maxLabel ?? max.toString());
     React.useEffect(() => {
-        setMaxValueLabel(maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString());
+        setMaxValueLabel(maxLabel ?? max.toString());
     }, [maxLabel, max]);
     const [trackDisplay, setTrackDisplay] = React.useState(() => getDefaultTrackDisplay(trackDisplayMode, currentValues));
     React.useEffect(() => {
@@ -111,11 +109,11 @@ export const Slider = React.forwardRef((props, ref) => {
                 newValues[activeThumbIndex] = pointerValue;
                 setCurrentValues(newValues);
                 'onChange' === callbackType
-                    ? onChange === null || onChange === void 0 ? void 0 : onChange(newValues)
-                    : onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(newValues);
+                    ? onChange?.(newValues)
+                    : onUpdate?.(newValues);
             }
             else if ('onChange' === callbackType) {
-                onChange === null || onChange === void 0 ? void 0 : onChange(currentValues);
+                onChange?.(currentValues);
             }
         }
     }, [
@@ -143,12 +141,12 @@ export const Slider = React.forwardRef((props, ref) => {
             return;
         }
         if (keyboardReleased) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(currentValues); // currentValues since key up should not change value but only stop continuous value selection
+            onChange?.(currentValues); // currentValues since key up should not change value but only stop continuous value selection
         }
         else {
             const newValues = [...currentValues]; // newValues since key down should change value
             newValues[index] = value;
-            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(newValues);
+            onUpdate?.(newValues);
             setCurrentValues(newValues);
         }
     }, [currentValues, onUpdate, onChange]);
@@ -178,8 +176,8 @@ export const Slider = React.forwardRef((props, ref) => {
             const newValues = [...currentValues];
             newValues[closestValueIndex] = pointerValue;
             setCurrentValues(newValues);
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValues);
-            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(newValues);
+            onChange?.(newValues);
+            onUpdate?.(newValues);
             focusThumb(containerRef.current, closestValueIndex);
             event.preventDefault();
             event.stopPropagation();
@@ -194,8 +192,8 @@ export const Slider = React.forwardRef((props, ref) => {
         onUpdate,
         orientation,
     ]);
-    useEventListener('pointermove', handlePointerMove, (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
-    useEventListener('pointerup', handlePointerUp, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
+    useEventListener('pointermove', handlePointerMove, containerRef.current?.ownerDocument);
+    useEventListener('pointerup', handlePointerUp, containerRef.current?.ownerDocument);
     const tickMarkArea = React.useMemo(() => {
         if (!tickLabels) {
             return null;
@@ -223,10 +221,9 @@ export const Slider = React.forwardRef((props, ref) => {
             }), onPointerDown: handlePointerDownOnSlider, ...railContainerProps },
             React.createElement(Box, { className: 'iui-slider-rail' }),
             currentValues.map((thumbValue, index) => {
-                var _a;
                 const [minVal, maxVal] = getAllowableThumbRange(index);
-                const thisThumbProps = thumbProps === null || thumbProps === void 0 ? void 0 : thumbProps(index);
-                return (React.createElement(Thumb, { key: (_a = thisThumbProps === null || thisThumbProps === void 0 ? void 0 : thisThumbProps.id) !== null && _a !== void 0 ? _a : index, index: index, disabled: disabled, isActive: activeThumbIndex === index, onThumbActivated: onThumbActivated, onThumbValueChanged: onThumbValueChanged, minVal: minVal, maxVal: maxVal, value: thumbValue, tooltipProps: generateTooltipProps(index, thumbValue), thumbProps: thisThumbProps, step: step, sliderMin: min, sliderMax: max, orientation: orientation }));
+                const thisThumbProps = thumbProps?.(index);
+                return (React.createElement(Thumb, { key: thisThumbProps?.id ?? index, index: index, disabled: disabled, isActive: activeThumbIndex === index, onThumbActivated: onThumbActivated, onThumbValueChanged: onThumbValueChanged, minVal: minVal, maxVal: maxVal, value: thumbValue, tooltipProps: generateTooltipProps(index, thumbValue), thumbProps: thisThumbProps, step: step, sliderMin: min, sliderMax: max, orientation: orientation }));
             }),
             React.createElement(Track, { trackDisplayMode: trackDisplay, sliderMin: min, sliderMax: max, values: currentValues, orientation: orientation }),
             tickMarkArea),

package/esm/core/Slider/Thumb.js

@@ -57,7 +57,7 @@ export const Thumb = (props) => {
         return (100.0 * (adjustedValue - sliderMin)) / (sliderMax - sliderMin);
     }, [adjustedValue, sliderMax, sliderMin]);
     const { style, className, ...rest } = thumbProps || {};
-    return (React.createElement(Tooltip, { placement: 'top', trigger: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.visible) == null ? 'mouseenter click focus' : undefined, ...tooltipProps },
+    return (React.createElement(Tooltip, { placement: 'top', trigger: tooltipProps?.visible == null ? 'mouseenter click focus' : undefined, ...tooltipProps },
         React.createElement(Box, { ...rest, "data-index": index, ref: thumbRef, style: {
                 ...style,
                 ...(orientation === 'horizontal'

package/esm/core/StatusMessage/StatusMessage.js

@@ -11,7 +11,7 @@ import { Box, StatusIconMap } from '../utils/index.js';
  * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
  */
 export const StatusMessage = ({ startIcon: userStartIcon, children, status, }) => {
-    const icon = userStartIcon !== null && userStartIcon !== void 0 ? userStartIcon : (status && StatusIconMap[status]());
+    const icon = userStartIcon ?? (status && StatusIconMap[status]());
     return (React.createElement(React.Fragment, null,
         !!icon ? (React.createElement(Box, { as: 'span', className: 'iui-input-icon', "aria-hidden": true }, icon)) : null,
         React.createElement(Box, { className: 'iui-message' }, children)));

package/esm/core/Stepper/Stepper.js

@@ -10,7 +10,7 @@ const defaultStepperLocalization = {
 };
 export const Stepper = React.forwardRef((props, ref) => {
     const { currentStep, steps, type = 'default', localization = defaultStepperLocalization, onStepClick, ...rest } = props;
-    const boundedCurrentStep = Math.min(Math.max(0, currentStep !== null && currentStep !== void 0 ? currentStep : 0), steps.length - 1);
+    const boundedCurrentStep = Math.min(Math.max(0, currentStep ?? 0), steps.length - 1);
     return (React.createElement(Box, { className: 'iui-stepper', ref: ref, ...rest },
         React.createElement("ol", null, steps.map((s, index) => (React.createElement(StepperStep, { key: index, index: index, title: type === 'long' ? '' : s.name, currentStepNumber: boundedCurrentStep, totalSteps: steps.length, type: type, onClick: onStepClick, description: s.description })))),
         type === 'long' && (React.createElement(Box, { className: 'iui-stepper-steps-label' },

package/esm/core/Stepper/StepperStep.js

@@ -13,7 +13,7 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => {
     const isClickable = isPast && !!onClick;
     const onCompletedClick = () => {
         if (isClickable) {
-            onClick === null || onClick === void 0 ? void 0 : onClick(index);
+            onClick?.(index);
         }
     };
     const onKeyDown = (e) => {

package/esm/core/Table/Table.js

@@ -25,7 +25,7 @@ let isDev = false;
 try {
     isDev = process.env.NODE_ENV !== 'production';
 }
-catch (_a) { }
+catch { }
 const flattenColumns = (columns) => {
     const flatColumns = [];
     columns.forEach((column) => {
@@ -110,11 +110,11 @@ export const Table = (props) => {
             return;
         }
         const ownerDoc = ownerDocument.current;
-        ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.addEventListener('keydown', disableUserSelect);
-        ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.addEventListener('keyup', enableUserSelect);
+        ownerDoc?.addEventListener('keydown', disableUserSelect);
+        ownerDoc?.addEventListener('keyup', enableUserSelect);
         return () => {
-            ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.removeEventListener('keydown', disableUserSelect);
-            ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.removeEventListener('keyup', enableUserSelect);
+            ownerDoc?.removeEventListener('keydown', disableUserSelect);
+            ownerDoc?.removeEventListener('keyup', enableUserSelect);
         };
     }, [
         isSelectable,
@@ -128,7 +128,7 @@ export const Table = (props) => {
     const tableStateReducer = React.useCallback((newState, action, previousState, instance) => {
         switch (action.type) {
             case TableActions.toggleSortBy:
-                onSort === null || onSort === void 0 ? void 0 : onSort(newState);
+                onSort?.(newState);
                 break;
             case TableActions.setFilter:
                 currentFilter.current = onFilterHandler(newState, action, previousState, currentFilter.current, instance);
@@ -214,13 +214,13 @@ export const Table = (props) => {
         return result;
     }, {});
     const areFiltersSet = allColumns.some((column) => column.filterValue != null && column.filterValue !== '') || !!globalFilterValue;
-    const showFilterButton = (column) => (data.length !== 0 || areFiltersSet) && column.canFilter;
+    const showFilterButton = (column) => (data.length !== 0 || areFiltersSet) && column.canFilter && !!column.Filter;
     const showSortButton = (column) => data.length !== 0 && column.canSort;
     const onRowClickHandler = React.useCallback((event, row) => {
-        const isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
+        const isDisabled = isRowDisabled?.(row.original);
         const ctrlPressed = event.ctrlKey || event.metaKey;
         if (!isDisabled) {
-            onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
+            onRowClick?.(event, row);
         }
         if (isSelectable &&
             !isDisabled &&
@@ -261,7 +261,7 @@ export const Table = (props) => {
     React.useEffect(() => {
         if (previousFilter.current !== currentFilter.current) {
             previousFilter.current = currentFilter.current;
-            onFilter === null || onFilter === void 0 ? void 0 : onFilter(currentFilter.current, state, instance.filteredRows);
+            onFilter?.(currentFilter.current, state, instance.filteredRows);
         }
     }, [state, instance.filteredRows, onFilter]);
     const lastPassedColumns = React.useRef([]);
@@ -335,7 +335,7 @@ export const Table = (props) => {
     const getPreparedRow = React.useCallback((index) => {
         const row = page[index];
         prepareRow(row);
-        return (React.createElement(TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, bodyRef: bodyRef.current, tableRowRef: enableVirtualization ? undefined : tableRowRef(row), density: density }));
+        return (React.createElement(TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!isRowDisabled?.(row.original), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, bodyRef: bodyRef.current, tableRowRef: enableVirtualization ? undefined : tableRowRef(row), density: density }));
     }, [
         page,
         prepareRow,
@@ -380,7 +380,7 @@ export const Table = (props) => {
     const isHeaderDirectClick = React.useRef(false);
     return (React.createElement(React.Fragment, null,
         React.createElement(Box, { ref: (element) => {
-                ownerDocument.current = element === null || element === void 0 ? void 0 : element.ownerDocument;
+                ownerDocument.current = element?.ownerDocument;
                 if (isResizable) {
                     resizeRef(element);
                 }
@@ -431,7 +431,7 @@ export const Table = (props) => {
                                 }, onClick: (e) => {
                                     // Prevents from triggering sort when resizing and mouse is released in the middle of header
                                     if (isHeaderDirectClick.current) {
-                                        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                                        onClick?.(e);
                                         isHeaderDirectClick.current = false;
                                     }
                                 }, tabIndex: showSortButton(column) ? 0 : undefined, onKeyDown: (e) => {
@@ -480,7 +480,7 @@ export const Table = (props) => {
                 !isLoading &&
                     (data.length === 0 || rows.length === 0) &&
                     areFiltersSet && (React.createElement(Box, { className: 'iui-table-empty' },
-                    React.createElement("div", null, emptyFilteredTableContent)))), paginatorRenderer === null || paginatorRenderer === void 0 ? void 0 :
-            paginatorRenderer(paginatorRendererProps))));
+                    React.createElement("div", null, emptyFilteredTableContent)))),
+            paginatorRenderer?.(paginatorRendererProps))));
 };
 export default Table;

package/esm/core/Table/TablePaginator.js

@@ -40,12 +40,11 @@ export const TablePaginator = (props) => {
     const needFocus = React.useRef(false);
     const isMounted = React.useRef(false);
     React.useEffect(() => {
-        var _a, _b;
         // Checking `isMounted.current` prevents from focusing on initial load.
         // Checking `needFocus.current` prevents from focusing page when clicked on previous/next page.
         if (isMounted.current && needFocus.current) {
-            const buttonToFocus = Array.from((_b = (_a = pageListRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.iui-table-paginator-page-button')) !== null && _b !== void 0 ? _b : []).find((el) => { var _a; return ((_a = el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === (focusedIndex + 1).toString(); });
-            buttonToFocus === null || buttonToFocus === void 0 ? void 0 : buttonToFocus.focus();
+            const buttonToFocus = Array.from(pageListRef.current?.querySelectorAll('.iui-table-paginator-page-button') ?? []).find((el) => el.textContent?.trim() === (focusedIndex + 1).toString());
+            buttonToFocus?.focus();
             needFocus.current = false;
         }
         isMounted.current = true;