@itwin/itwinui-react 3.12.2 → 3.13.0

package/DEV-esm/core/LabeledSelect/LabeledSelect.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Select } from '../Select/Select.js';
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
+import { InputGrid } from '../InputGrid/InputGrid.js';
+import { Label } from '../Label/Label.js';
+export const LabeledSelect = React.forwardRef((props, forwardedRef)=>{
+    let { className, disabled = false, label, message, status, svgIcon, displayStyle = 'default', style, required = false, wrapperProps, labelProps, messageContentProps, messageIconProps, ...rest } = props;
+    return React.createElement(InputGrid, {
+        labelPlacement: displayStyle,
+        "data-iui-status": status,
+        ...wrapperProps
+    }, label && React.createElement(Label, {
+        as: "div",
+        required: required,
+        disabled: disabled,
+        ...labelProps
+    }, label), React.createElement(Select, {
+        disabled: disabled,
+        className: className,
+        style: style,
+        required: props.native ? required : void 0,
+        ...rest,
+        ref: forwardedRef,
+        styleType: 'default'
+    }), 'string' == typeof message ? React.createElement(StatusMessage, {
+        status: status,
+        startIcon: svgIcon,
+        iconProps: messageIconProps,
+        contentProps: messageContentProps
+    }, message) : message);
+});
+LabeledSelect.displayName = 'LabeledSelect';

package/DEV-esm/core/LabeledSelect/LabeledSelect.types-test.js

@@ -0,0 +1,80 @@
+import { useRef } from 'react';
+import { LabeledSelect } from './LabeledSelect.js';
+()=>{
+    let ref = useRef(null);
+    return React.createElement(React.Fragment, null, React.createElement(LabeledSelect, {
+        options: [
+            {
+                value: 1,
+                label: 'Option 1'
+            },
+            {
+                value: 2,
+                label: 'Option 2'
+            },
+            {
+                value: 3,
+                label: 'Option 3'
+            }
+        ],
+        onChange: (value)=>{
+            let returnValue = value;
+            return returnValue;
+        },
+        ref: ref
+    }));
+};
+()=>React.createElement(React.Fragment, null, React.createElement(LabeledSelect, {
+        options: [
+            {
+                value: 1,
+                label: 'Option 1'
+            },
+            {
+                value: 2,
+                label: 'Option 2'
+            },
+            {
+                value: 3,
+                label: 'Option 3'
+            }
+        ],
+        onChange: (value)=>{
+            let returnValue = value;
+            return returnValue;
+        }
+    }));
+()=>React.createElement(React.Fragment, null, React.createElement(LabeledSelect, {
+        label: "Select Label",
+        options: [
+            {
+                value: '1',
+                label: 'Item #1'
+            },
+            {
+                value: '2',
+                label: 'Item #2'
+            },
+            {
+                value: '3',
+                label: 'Item #3'
+            }
+        ],
+        onChange: (value)=>{
+            let returnValue = value;
+            return returnValue;
+        }
+    }));
+()=>React.createElement(React.Fragment, null, React.createElement(LabeledSelect, {
+        label: "Select Label",
+        options: [
+            {
+                value: 1,
+                label: 'Item #1'
+            }
+        ],
+        onChange: (value)=>{
+            let returnValue = value;
+            return returnValue;
+        }
+    }));

package/DEV-esm/core/LabeledTextarea/LabeledTextarea.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { LabeledInput } from '../LabeledInput/LabeledInput.js';
+export const LabeledTextarea = React.forwardRef((props, forwardedRef)=>React.createElement(LabeledInput, {
+        as: "textarea",
+        rows: 3,
+        ref: forwardedRef,
+        ...props
+    }));
+LabeledTextarea.displayName = 'LabeledTextarea';

package/DEV-esm/core/LinkAction/LinkAction.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { polymorphic } from '../../utils/functions/polymorphic.js';
+import { Box } from '../../utils/components/index.js';
+export const LinkAction = React.forwardRef((props, forwardedRef)=>{
+    let { as: asProp = props.href ? 'a' : 'button' } = props;
+    return React.createElement(Box, {
+        ...props,
+        as: asProp,
+        className: cx('iui-link-action', props.className),
+        ref: forwardedRef
+    });
+});
+LinkAction.displayName = 'LinkAction';
+export const LinkBox = polymorphic.div('iui-link-box');
+LinkBox.displayName = 'LinkBox';

package/DEV-esm/core/List/List.js

@@ -0,0 +1,5 @@
+import { polymorphic } from '../../utils/index.js';
+export const List = polymorphic.ul('iui-list', {
+    role: 'list'
+});
+List.displayName = 'List';

package/DEV-esm/core/List/ListItem.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { polymorphic, Box } from '../../utils/index.js';
+import { LinkAction } from '../LinkAction/LinkAction.js';
+let ListItemComponent = React.forwardRef((props, ref)=>{
+    let { size = 'default', disabled = false, active = false, actionable = false, focused = false, className, ...rest } = props;
+    return React.createElement(Box, {
+        as: "li",
+        className: cx('iui-list-item', className),
+        "data-iui-active": active ? 'true' : void 0,
+        "data-iui-disabled": disabled ? 'true' : void 0,
+        "data-iui-size": 'large' === size ? 'large' : void 0,
+        "data-iui-actionable": actionable ? 'true' : void 0,
+        "data-iui-focused": focused ? 'true' : void 0,
+        ref: ref,
+        ...rest
+    });
+});
+ListItemComponent.displayName = 'ListItem';
+let ListItemIcon = polymorphic('iui-list-item-icon');
+ListItemIcon.displayName = 'ListItem.Icon';
+let ListItemContent = polymorphic('iui-list-item-content');
+ListItemContent.displayName = 'ListItem.Content';
+let ListItemDescription = polymorphic('iui-list-item-description');
+ListItemDescription.displayName = 'ListItem.Description';
+let ListItemAction = LinkAction;
+ListItemAction.displayName = 'ListItem.Action';
+export const ListItem = Object.assign(ListItemComponent, {
+    Icon: ListItemIcon,
+    Content: ListItemContent,
+    Description: ListItemDescription,
+    Action: ListItemAction
+});

package/DEV-esm/core/Menu/Menu.js

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { useMergedRefs, Box, Portal, useControlledState, cloneElementWithRef, mergeRefs, useSyncExternalStore, mergeEventHandlers, useFocusableElements } from '../../utils/index.js';
+import { PopoverOpenContext, usePopover } from '../Popover/Popover.js';
+import { FloatingNode, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useListNavigation, useInteractions } from '@floating-ui/react';
+export const Menu = React.forwardRef((props, ref)=>{
+    let { className, trigger, positionReference, portal = true, popoverProps: popoverPropsProp, children, ...rest } = props;
+    let tree = useFloatingTree();
+    let nodeId = useFloatingNodeId();
+    let parentId = useFloatingParentNodeId();
+    let { interactions: interactionsProp, visible: visibleProp, onVisibleChange: onVisibleChangeProp, ...restPopoverProps } = popoverPropsProp ?? {};
+    let { listNavigation: listNavigationPropsProp, hover: hoverProp, ...restInteractionsProps } = interactionsProp ?? {};
+    let [visible, setVisible] = useControlledState(false, visibleProp, onVisibleChangeProp);
+    let [hasFocusedNodeInSubmenu, setHasFocusedNodeInSubmenu] = React.useState(false);
+    let [menuElement, setMenuElement] = React.useState(null);
+    let { focusableElementsRef, focusableElements } = useFocusableElements(menuElement, {
+        filter: (allElements)=>allElements.filter((i)=>!allElements?.some((p)=>p.contains(i.parentElement)))
+    });
+    let [activeIndex, setActiveIndex] = React.useState(null);
+    let popover = usePopover({
+        nodeId,
+        visible,
+        onVisibleChange: (open)=>open ? setVisible(true) : close(),
+        interactions: {
+            hover: null == tree ? hoverProp : {
+                enabled: !!hoverProp && !hasFocusedNodeInSubmenu,
+                ...hoverProp
+            },
+            ...restInteractionsProps
+        },
+        ...restPopoverProps
+    });
+    let { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+        useListNavigation(popover.context, {
+            activeIndex,
+            focusItemOnHover: false,
+            listRef: focusableElementsRef,
+            onNavigate: setActiveIndex,
+            ...listNavigationPropsProp
+        })
+    ]);
+    React.useEffect(()=>{
+        if (void 0 !== positionReference) popover.refs.setPositionReference(positionReference);
+    }, [
+        popover.refs,
+        positionReference
+    ]);
+    let refs = useMergedRefs(setMenuElement, ref, popover.refs.setFloating);
+    let triggerRef = React.useRef(null);
+    let close = React.useCallback(()=>{
+        setVisible(false);
+        if (null == parentId) triggerRef.current?.focus({
+            preventScroll: true
+        });
+    }, [
+        parentId,
+        setVisible
+    ]);
+    useSyncExternalStore(React.useCallback(()=>{
+        let closeUnrelatedMenus = (event)=>{
+            if (parentId === event.parentId && nodeId !== event.nodeId || parentId === event.nodeId) {
+                setVisible(false);
+                setHasFocusedNodeInSubmenu(false);
+            }
+        };
+        tree?.events.on('onNodeFocused', closeUnrelatedMenus);
+        return ()=>{
+            tree?.events.off('onNodeFocused', closeUnrelatedMenus);
+        };
+    }, [
+        nodeId,
+        parentId,
+        tree?.events,
+        setVisible
+    ]), ()=>void 0, ()=>void 0);
+    let popoverGetItemProps = ({ focusableItemIndex, userProps })=>getItemProps({
+            ...userProps,
+            tabIndex: null != activeIndex && activeIndex >= 0 && null != focusableItemIndex && focusableItemIndex >= 0 && activeIndex === focusableItemIndex ? 0 : -1,
+            onFocus: mergeEventHandlers(userProps?.onFocus, ()=>{
+                queueMicrotask(()=>{
+                    setHasFocusedNodeInSubmenu(true);
+                });
+                tree?.events.emit('onNodeFocused', {
+                    nodeId: nodeId,
+                    parentId: parentId
+                });
+            }),
+            onMouseEnter: mergeEventHandlers(userProps?.onMouseEnter, (event)=>{
+                if (null != focusableItemIndex && focusableItemIndex >= 0) setActiveIndex(focusableItemIndex);
+                if (event.target === event.currentTarget) event.currentTarget.focus();
+            })
+        });
+    let reference = cloneElementWithRef(trigger, (triggerChild)=>getReferenceProps(popover.getReferenceProps({
+            ...triggerChild.props,
+            'aria-expanded': popover.open,
+            ref: mergeRefs(triggerRef, popover.refs.setReference)
+        })));
+    let floating = popover.open && React.createElement(Portal, {
+        portal: portal
+    }, React.createElement(Box, {
+        as: "div",
+        className: cx('iui-menu', className),
+        ref: refs,
+        ...getFloatingProps(popover.getFloatingProps({
+            role: 'menu',
+            ...rest
+        }))
+    }, children));
+    return React.createElement(React.Fragment, null, React.createElement(MenuContext.Provider, {
+        value: {
+            popoverGetItemProps,
+            focusableElements
+        }
+    }, React.createElement(PopoverOpenContext.Provider, {
+        value: popover.open
+    }, reference), null != tree ? React.createElement(FloatingNode, {
+        id: nodeId
+    }, floating) : floating));
+});
+export const MenuContext = React.createContext(void 0);

package/DEV-esm/core/Menu/MenuDivider.js

@@ -0,0 +1,5 @@
+import { polymorphic } from '../../utils/index.js';
+export const MenuDivider = polymorphic('iui-menu-divider', {
+    role: 'separator'
+});
+MenuDivider.displayName = 'MenuDivider';

package/DEV-esm/core/Menu/MenuExtraContent.js

@@ -0,0 +1,5 @@
+import { polymorphic } from '../../utils/index.js';
+export const MenuExtraContent = polymorphic.li('iui-menu-content', {
+    role: 'presentation'
+});
+MenuExtraContent.displayName = 'MenuExtraContent';

package/DEV-esm/core/Menu/MenuItem.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { SvgCaretRightSmall, useMergedRefs, useId, createWarningLogger } from '../../utils/index.js';
+import { Menu, MenuContext } from './Menu.js';
+import { ListItem } from '../List/ListItem.js';
+import cx from 'classnames';
+let logWarning = createWarningLogger();
+export const MenuItem = React.forwardRef((props, forwardedRef)=>{
+    let { className, children, isSelected, disabled, value, onClick: onClickProp, sublabel, size = sublabel ? 'large' : 'default', icon, startIcon = icon, badge, endIcon = badge, role = 'menuitem', subMenuItems = [], ...rest } = props;
+    if (null != onClickProp && subMenuItems.length > 0) logWarning('Passing a non-empty submenuItems array and onClick to MenuItem at the same time is not supported. This is because when a non empty submenuItems array is passed, clicking the MenuItem toggles the submenu visibility.');
+    let parentMenu = React.useContext(MenuContext);
+    let menuItemRef = React.useRef(null);
+    let submenuId = useId();
+    let popoverProps = React.useMemo(()=>({
+            placement: 'right-start',
+            interactions: {
+                click: true,
+                hover: true,
+                listNavigation: {
+                    nested: subMenuItems.length > 0,
+                    openOnArrowKeyDown: true
+                }
+            }
+        }), [
+        subMenuItems.length
+    ]);
+    let onClick = ()=>{
+        if (disabled) return;
+        onClickProp?.(value);
+    };
+    let handlers = {
+        onClick
+    };
+    let focusableItemIndex = parentMenu?.focusableElements.findIndex((el)=>el === menuItemRef.current);
+    let trigger = React.createElement(ListItem, {
+        as: "button",
+        type: "button",
+        className: cx('iui-button-base', className),
+        actionable: true,
+        size: size,
+        active: isSelected,
+        disabled: disabled,
+        ref: useMergedRefs(menuItemRef, forwardedRef),
+        role: role,
+        tabIndex: isSelected ? 0 : -1,
+        "aria-selected": isSelected,
+        "aria-haspopup": subMenuItems.length > 0 ? 'true' : void 0,
+        "aria-controls": subMenuItems.length > 0 ? submenuId : void 0,
+        "aria-disabled": disabled,
+        ...parentMenu?.popoverGetItemProps != null ? parentMenu.popoverGetItemProps({
+            focusableItemIndex,
+            userProps: handlers
+        }) : handlers,
+        ...rest
+    }, startIcon && React.createElement(ListItem.Icon, {
+        as: "span",
+        "aria-hidden": true
+    }, startIcon), React.createElement(ListItem.Content, null, React.createElement("div", null, children), sublabel && React.createElement(ListItem.Description, null, sublabel)), !endIcon && subMenuItems.length > 0 && React.createElement(ListItem.Icon, {
+        as: "span",
+        "aria-hidden": true
+    }, React.createElement(SvgCaretRightSmall, null)), endIcon && React.createElement(ListItem.Icon, {
+        as: "span",
+        "aria-hidden": true
+    }, endIcon));
+    return React.createElement(React.Fragment, null, subMenuItems.length > 0 && !disabled ? React.createElement(Menu, {
+        id: submenuId,
+        trigger: trigger,
+        popoverProps: popoverProps
+    }, subMenuItems) : trigger);
+});
+MenuItem.displayName = 'MenuItem';

package/DEV-esm/core/Menu/MenuItemSkeleton.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box } from '../../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+export const MenuItemSkeleton = React.forwardRef((props, forwardedRef)=>{
+    let { hasSublabel, hasIcon, contentWidth, translatedStrings = {
+        loading: 'Loading…'
+    }, className, style, ...rest } = props;
+    return React.createElement(Box, {
+        className: cx('iui-menu-item-skeleton', className),
+        "data-iui-size": hasSublabel && 'large',
+        style: {
+            '--iui-menu-item-content-skeleton-max-width': contentWidth,
+            ...style
+        },
+        ref: forwardedRef,
+        ...rest
+    }, hasIcon && React.createElement(Box, {
+        className: "iui-icon iui-skeleton",
+        "aria-hidden": true
+    }), React.createElement(Box, {
+        as: "span",
+        className: "iui-content"
+    }, React.createElement(Box, {
+        className: "iui-menu-label iui-skeleton",
+        "aria-hidden": true
+    }), hasSublabel && React.createElement(Box, {
+        className: "iui-menu-description iui-skeleton",
+        "aria-hidden": true
+    }), React.createElement(VisuallyHidden, null, translatedStrings.loading)));
+});
+MenuItemSkeleton.displayName = 'MenuItemSkeleton';

package/DEV-esm/core/Modal/Modal.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Dialog } from '../Dialog/Dialog.js';
+export const Modal = React.forwardRef((props, forwardedRef)=>{
+    let { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, portal = true, wrapperProps, backdropProps, titleBarProps, ...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,
+        ...wrapperProps
+    }, React.createElement(Dialog.Backdrop, backdropProps), React.createElement(Dialog.Main, {
+        "aria-modal": true,
+        ...rest
+    }, React.createElement(Dialog.TitleBar, {
+        titleText: title,
+        ...titleBarProps
+    }), children));
+});
+Modal.displayName = 'Modal';

package/DEV-esm/core/Modal/ModalButtonBar.js

@@ -0,0 +1,3 @@
+import { DialogButtonBar } from '../Dialog/DialogButtonBar.js';
+export const ModalButtonBar = Object.assign({}, DialogButtonBar);
+ModalButtonBar.displayName = 'ModalButtonBar';

package/DEV-esm/core/Modal/ModalContent.js

@@ -0,0 +1,3 @@
+import { DialogContent } from '../Dialog/DialogContent.js';
+export const ModalContent = Object.assign({}, DialogContent);
+ModalContent.displayName = 'ModalContent';

package/DEV-esm/core/NonIdealState/ErrorPage.js

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { Button } from '../Buttons/Button.js';
+import { NonIdealState } from './NonIdealState.js';
+import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
+let Svg401 = React.lazy(()=>import('@itwin/itwinui-illustrations-react/Svg401'));
+let Svg403 = React.lazy(()=>import('@itwin/itwinui-illustrations-react/Svg403'));
+let Svg404 = React.lazy(()=>import('@itwin/itwinui-illustrations-react/Svg404'));
+let Svg500 = React.lazy(()=>import('@itwin/itwinui-illustrations-react/Svg500'));
+let Svg502 = React.lazy(()=>import('@itwin/itwinui-illustrations-react/Svg502'));
+let Svg503 = React.lazy(()=>import('@itwin/itwinui-illustrations-react/Svg503'));
+let SvgError = React.lazy(()=>import('@itwin/itwinui-illustrations-react/SvgError'));
+let SvgRedirect = React.lazy(()=>import('@itwin/itwinui-illustrations-react/SvgRedirect'));
+let SvgTimedOut = React.lazy(()=>import('@itwin/itwinui-illustrations-react/SvgTimedOut'));
+export const ErrorPage = React.forwardRef((props, forwardedRef)=>{
+    let { errorType, errorName, errorMessage, primaryButtonHandle, primaryButtonLabel, secondaryButtonHandle, secondaryButtonLabel, translatedErrorMessages, ...rest } = props;
+    let defaultErrorMessages = {
+        badGateway: 'Bad gateway',
+        error: 'Error',
+        forbidden: 'Forbidden',
+        internalServerError: 'Internal server error',
+        redirect: 'Redirect',
+        pageNotFound: 'Page not found',
+        serviceUnavailable: 'Service unavailable',
+        timedOut: 'Timed out',
+        unauthorized: 'Unauthorized',
+        ...translatedErrorMessages
+    };
+    function getErrorIcon() {
+        switch(errorType){
+            case '300':
+            case '301':
+            case '302':
+            case '303':
+            case '304':
+            case '305':
+            case '307':
+            case '308':
+                return React.createElement(SvgRedirect, null);
+            case '401':
+                return React.createElement(Svg401, null);
+            case '403':
+                return React.createElement(Svg403, null);
+            case '404':
+                return React.createElement(Svg404, null);
+            case '408':
+            case '504':
+                return React.createElement(SvgTimedOut, null);
+            case '500':
+                return React.createElement(Svg500, null);
+            case '502':
+                return React.createElement(Svg502, null);
+            case '503':
+                return React.createElement(Svg503, null);
+            case 'generic':
+            default:
+                return React.createElement(SvgError, null);
+        }
+    }
+    function getHeadingMessage() {
+        if (errorName) return errorName;
+        switch(errorType){
+            case '300':
+            case '301':
+            case '302':
+            case '303':
+            case '304':
+            case '305':
+            case '307':
+            case '308':
+                return defaultErrorMessages.redirect || '';
+            case '401':
+                return defaultErrorMessages.unauthorized;
+            case '403':
+                return defaultErrorMessages.forbidden;
+            case '404':
+                return defaultErrorMessages.pageNotFound;
+            case '408':
+            case '504':
+                return defaultErrorMessages.timedOut || '';
+            case '500':
+                return defaultErrorMessages.internalServerError;
+            case '502':
+                return defaultErrorMessages.badGateway;
+            case '503':
+                return defaultErrorMessages.serviceUnavailable;
+            case 'generic':
+            default:
+                return defaultErrorMessages.error;
+        }
+    }
+    function getPrimaryButton() {
+        if (!primaryButtonHandle || !primaryButtonLabel) return null;
+        return React.createElement(Button, {
+            styleType: "high-visibility",
+            onClick: primaryButtonHandle
+        }, primaryButtonLabel);
+    }
+    function getSecondaryButton() {
+        if (!secondaryButtonHandle || !secondaryButtonLabel) return null;
+        return React.createElement(Button, {
+            styleType: "default",
+            onClick: secondaryButtonHandle
+        }, secondaryButtonLabel);
+    }
+    function getActions() {
+        let primaryButton = getPrimaryButton();
+        let secondaryButton = getSecondaryButton();
+        if (!primaryButton && !secondaryButton) return null;
+        return React.createElement(React.Fragment, null, primaryButton, secondaryButton);
+    }
+    return React.createElement(NonIdealState, {
+        svg: React.createElement(React.Suspense, {
+            fallback: React.createElement(ProgressRadial, null)
+        }, getErrorIcon()),
+        heading: getHeadingMessage(),
+        description: errorMessage,
+        actions: getActions(),
+        ref: forwardedRef,
+        ...rest
+    });
+});
+ErrorPage.displayName = 'ErrorPage';

package/DEV-esm/core/NonIdealState/NonIdealState.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Box } from '../../utils/index.js';
+import cx from 'classnames';
+export const NonIdealState = React.forwardRef((props, forwardedRef)=>{
+    let { className, svg, heading, description, actions, illustrationProps, titleProps, descriptionProps, actionsProps, ...rest } = props;
+    return React.createElement(Box, {
+        className: cx('iui-non-ideal-state', className),
+        ref: forwardedRef,
+        ...rest
+    }, React.createElement(Box, {
+        as: "div",
+        ...illustrationProps,
+        className: cx('iui-non-ideal-state-illustration', illustrationProps?.className)
+    }, svg), heading && React.createElement(Box, {
+        as: "div",
+        ...titleProps,
+        className: cx('iui-non-ideal-state-title', titleProps?.className)
+    }, heading), description && React.createElement(Box, {
+        as: "div",
+        ...descriptionProps,
+        className: cx('iui-non-ideal-state-description', descriptionProps?.className)
+    }, description), actions && React.createElement(Box, {
+        as: "div",
+        ...actionsProps,
+        className: cx('iui-non-ideal-state-actions', actionsProps?.className)
+    }, actions));
+});
+NonIdealState.displayName = 'NonIdealState';

package/DEV-esm/core/NotificationMarker/NotificationMarker.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Box } from '../../utils/index.js';
+import cx from 'classnames';
+export const NotificationMarker = React.forwardRef((props, ref)=>{
+    let { className, children, status = 'primary', pulsing = false, enabled = true, ...rest } = props;
+    return React.createElement(Box, {
+        as: "span",
+        ref: ref,
+        className: cx({
+            'iui-notification-marker': enabled
+        }, className),
+        "data-iui-variant": enabled ? status : null,
+        "data-iui-urgent": enabled ? pulsing : null,
+        ...rest
+    }, children);
+});
+NotificationMarker.displayName = 'NotificationMarker';

package/DEV-esm/core/Overlay/Overlay.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Box, isUnitTest, polymorphic } from '../../utils/index.js';
+let OverlayComponent = React.forwardRef((props, forwardedRef)=>{
+    let { content, children, ...rest } = props;
+    return React.createElement(OverlayWrapper, {
+        ref: forwardedRef,
+        ...rest
+    }, React.createElement(OverlayOverlay, null, content), React.createElement(OverlayHiddenContent, null, children));
+});
+OverlayComponent.displayName = 'Overlay';
+let OverlayHiddenContent = React.forwardRef((props, ref)=>{
+    let { children, ...rest } = props;
+    useInertPolyfill();
+    return React.createElement(Box, {
+        inert: '',
+        ref: ref,
+        ...rest
+    }, children);
+});
+OverlayHiddenContent.displayName = 'Overlay.HiddenContent';
+let OverlayOverlay = polymorphic('iui-overlay');
+OverlayOverlay.displayName = 'Overlay.Overlay';
+let OverlayWrapper = polymorphic('iui-overlay-wrapper');
+OverlayWrapper.displayName = 'Overlay.Wrapper';
+export const Overlay = Object.assign(OverlayComponent, {
+    Wrapper: OverlayWrapper,
+    HiddenContent: OverlayHiddenContent,
+    Overlay: OverlayOverlay
+});
+let useInertPolyfill = ()=>{
+    let loaded = React.useRef(false);
+    let modulePath = 'https://cdn.jsdelivr.net/npm/wicg-inert@3.1.2/dist/inert.min.js';
+    React.useEffect(()=>{
+        (async ()=>{
+            if (!HTMLElement.prototype.hasOwnProperty('inert') && !loaded.current && !isUnitTest) {
+                await new Function('url', 'return import(url)')(modulePath);
+                loaded.current = true;
+            }
+        })();
+    }, []);
+};