@itwin/itwinui-react 3.12.2 → 3.13.0

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LabeledSelect", {
+    enumerable: true,
+    get: function() {
+        return LabeledSelect;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _Select = require("../Select/Select.js");
+const _StatusMessage = require("../StatusMessage/StatusMessage.js");
+const _InputGrid = require("../InputGrid/InputGrid.js");
+const _Label = require("../Label/Label.js");
+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.InputGrid, {
+        labelPlacement: displayStyle,
+        "data-iui-status": status,
+        ...wrapperProps
+    }, label && _react.createElement(_Label.Label, {
+        as: "div",
+        required: required,
+        disabled: disabled,
+        ...labelProps
+    }, label), _react.createElement(_Select.Select, {
+        disabled: disabled,
+        className: className,
+        style: style,
+        required: props.native ? required : void 0,
+        ...rest,
+        ref: forwardedRef,
+        styleType: 'default'
+    }), 'string' == typeof message ? _react.createElement(_StatusMessage.StatusMessage, {
+        status: status,
+        startIcon: svgIcon,
+        iconProps: messageIconProps,
+        contentProps: messageContentProps
+    }, message) : message);
+});
+LabeledSelect.displayName = 'LabeledSelect';

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

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _react = require("react");
+const _LabeledSelect = require("./LabeledSelect.js");
+()=>{
+    let ref = (0, _react.useRef)(null);
+    return React.createElement(React.Fragment, null, React.createElement(_LabeledSelect.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.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.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.LabeledSelect, {
+        label: "Select Label",
+        options: [
+            {
+                value: 1,
+                label: 'Item #1'
+            }
+        ],
+        onChange: (value)=>{
+            let returnValue = value;
+            return returnValue;
+        }
+    }));

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LabeledTextarea", {
+    enumerable: true,
+    get: function() {
+        return LabeledTextarea;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _LabeledInput = require("../LabeledInput/LabeledInput.js");
+const LabeledTextarea = _react.forwardRef((props, forwardedRef)=>_react.createElement(_LabeledInput.LabeledInput, {
+        as: "textarea",
+        rows: 3,
+        ref: forwardedRef,
+        ...props
+    }));
+LabeledTextarea.displayName = 'LabeledTextarea';

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    LinkAction: function() {
+        return LinkAction;
+    },
+    LinkBox: function() {
+        return LinkBox;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _polymorphic = require("../../utils/functions/polymorphic.js");
+const _index = require("../../utils/components/index.js");
+const LinkAction = _react.forwardRef((props, forwardedRef)=>{
+    let { as: asProp = props.href ? 'a' : 'button' } = props;
+    return _react.createElement(_index.Box, {
+        ...props,
+        as: asProp,
+        className: (0, _classnames.default)('iui-link-action', props.className),
+        ref: forwardedRef
+    });
+});
+LinkAction.displayName = 'LinkAction';
+const LinkBox = _polymorphic.polymorphic.div('iui-link-box');
+LinkBox.displayName = 'LinkBox';

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "List", {
+    enumerable: true,
+    get: function() {
+        return List;
+    }
+});
+const _index = require("../../utils/index.js");
+const List = _index.polymorphic.ul('iui-list', {
+    role: 'list'
+});
+List.displayName = 'List';

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ListItem", {
+    enumerable: true,
+    get: function() {
+        return ListItem;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _index = require("../../utils/index.js");
+const _LinkAction = require("../LinkAction/LinkAction.js");
+const ListItemComponent = _react.forwardRef((props, ref)=>{
+    let { size = 'default', disabled = false, active = false, actionable = false, focused = false, className, ...rest } = props;
+    return _react.createElement(_index.Box, {
+        as: "li",
+        className: (0, _classnames.default)('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';
+const ListItemIcon = (0, _index.polymorphic)('iui-list-item-icon');
+ListItemIcon.displayName = 'ListItem.Icon';
+const ListItemContent = (0, _index.polymorphic)('iui-list-item-content');
+ListItemContent.displayName = 'ListItem.Content';
+const ListItemDescription = (0, _index.polymorphic)('iui-list-item-description');
+ListItemDescription.displayName = 'ListItem.Description';
+const ListItemAction = _LinkAction.LinkAction;
+ListItemAction.displayName = 'ListItem.Action';
+const ListItem = Object.assign(ListItemComponent, {
+    Icon: ListItemIcon,
+    Content: ListItemContent,
+    Description: ListItemDescription,
+    Action: ListItemAction
+});

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

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Menu: function() {
+        return Menu;
+    },
+    MenuContext: function() {
+        return MenuContext;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _index = require("../../utils/index.js");
+const _Popover = require("../Popover/Popover.js");
+const _react1 = require("@floating-ui/react");
+const Menu = _react.forwardRef((props, ref)=>{
+    let { className, trigger, positionReference, portal = true, popoverProps: popoverPropsProp, children, ...rest } = props;
+    let tree = (0, _react1.useFloatingTree)();
+    let nodeId = (0, _react1.useFloatingNodeId)();
+    let parentId = (0, _react1.useFloatingParentNodeId)();
+    let { interactions: interactionsProp, visible: visibleProp, onVisibleChange: onVisibleChangeProp, ...restPopoverProps } = popoverPropsProp ?? {};
+    let { listNavigation: listNavigationPropsProp, hover: hoverProp, ...restInteractionsProps } = interactionsProp ?? {};
+    let [visible, setVisible] = (0, _index.useControlledState)(false, visibleProp, onVisibleChangeProp);
+    let [hasFocusedNodeInSubmenu, setHasFocusedNodeInSubmenu] = _react.useState(false);
+    let [menuElement, setMenuElement] = _react.useState(null);
+    let { focusableElementsRef, focusableElements } = (0, _index.useFocusableElements)(menuElement, {
+        filter: (allElements)=>allElements.filter((i)=>!allElements?.some((p)=>p.contains(i.parentElement)))
+    });
+    let [activeIndex, setActiveIndex] = _react.useState(null);
+    let popover = (0, _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 } = (0, _react1.useInteractions)([
+        (0, _react1.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 = (0, _index.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
+    ]);
+    (0, _index.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: (0, _index.mergeEventHandlers)(userProps?.onFocus, ()=>{
+                queueMicrotask(()=>{
+                    setHasFocusedNodeInSubmenu(true);
+                });
+                tree?.events.emit('onNodeFocused', {
+                    nodeId: nodeId,
+                    parentId: parentId
+                });
+            }),
+            onMouseEnter: (0, _index.mergeEventHandlers)(userProps?.onMouseEnter, (event)=>{
+                if (null != focusableItemIndex && focusableItemIndex >= 0) setActiveIndex(focusableItemIndex);
+                if (event.target === event.currentTarget) event.currentTarget.focus();
+            })
+        });
+    let reference = (0, _index.cloneElementWithRef)(trigger, (triggerChild)=>getReferenceProps(popover.getReferenceProps({
+            ...triggerChild.props,
+            'aria-expanded': popover.open,
+            ref: (0, _index.mergeRefs)(triggerRef, popover.refs.setReference)
+        })));
+    let floating = popover.open && _react.createElement(_index.Portal, {
+        portal: portal
+    }, _react.createElement(_index.Box, {
+        as: "div",
+        className: (0, _classnames.default)('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(_Popover.PopoverOpenContext.Provider, {
+        value: popover.open
+    }, reference), null != tree ? _react.createElement(_react1.FloatingNode, {
+        id: nodeId
+    }, floating) : floating));
+});
+const MenuContext = _react.createContext(void 0);

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MenuDivider", {
+    enumerable: true,
+    get: function() {
+        return MenuDivider;
+    }
+});
+const _index = require("../../utils/index.js");
+const MenuDivider = (0, _index.polymorphic)('iui-menu-divider', {
+    role: 'separator'
+});
+MenuDivider.displayName = 'MenuDivider';

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MenuExtraContent", {
+    enumerable: true,
+    get: function() {
+        return MenuExtraContent;
+    }
+});
+const _index = require("../../utils/index.js");
+const MenuExtraContent = _index.polymorphic.li('iui-menu-content', {
+    role: 'presentation'
+});
+MenuExtraContent.displayName = 'MenuExtraContent';

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

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MenuItem", {
+    enumerable: true,
+    get: function() {
+        return MenuItem;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _index = require("../../utils/index.js");
+const _Menu = require("./Menu.js");
+const _ListItem = require("../List/ListItem.js");
+const _classnames = _interop_require_default._(require("classnames"));
+const logWarning = (0, _index.createWarningLogger)();
+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(_Menu.MenuContext);
+    let menuItemRef = _react.useRef(null);
+    let submenuId = (0, _index.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.ListItem, {
+        as: "button",
+        type: "button",
+        className: (0, _classnames.default)('iui-button-base', className),
+        actionable: true,
+        size: size,
+        active: isSelected,
+        disabled: disabled,
+        ref: (0, _index.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.ListItem.Icon, {
+        as: "span",
+        "aria-hidden": true
+    }, startIcon), _react.createElement(_ListItem.ListItem.Content, null, _react.createElement("div", null, children), sublabel && _react.createElement(_ListItem.ListItem.Description, null, sublabel)), !endIcon && subMenuItems.length > 0 && _react.createElement(_ListItem.ListItem.Icon, {
+        as: "span",
+        "aria-hidden": true
+    }, _react.createElement(_index.SvgCaretRightSmall, null)), endIcon && _react.createElement(_ListItem.ListItem.Icon, {
+        as: "span",
+        "aria-hidden": true
+    }, endIcon));
+    return _react.createElement(_react.Fragment, null, subMenuItems.length > 0 && !disabled ? _react.createElement(_Menu.Menu, {
+        id: submenuId,
+        trigger: trigger,
+        popoverProps: popoverProps
+    }, subMenuItems) : trigger);
+});
+MenuItem.displayName = 'MenuItem';

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MenuItemSkeleton", {
+    enumerable: true,
+    get: function() {
+        return MenuItemSkeleton;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _index = require("../../utils/index.js");
+const _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden.js");
+const MenuItemSkeleton = _react.forwardRef((props, forwardedRef)=>{
+    let { hasSublabel, hasIcon, contentWidth, translatedStrings = {
+        loading: 'Loading…'
+    }, className, style, ...rest } = props;
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('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(_index.Box, {
+        className: "iui-icon iui-skeleton",
+        "aria-hidden": true
+    }), _react.createElement(_index.Box, {
+        as: "span",
+        className: "iui-content"
+    }, _react.createElement(_index.Box, {
+        className: "iui-menu-label iui-skeleton",
+        "aria-hidden": true
+    }), hasSublabel && _react.createElement(_index.Box, {
+        className: "iui-menu-description iui-skeleton",
+        "aria-hidden": true
+    }), _react.createElement(_VisuallyHidden.VisuallyHidden, null, translatedStrings.loading)));
+});
+MenuItemSkeleton.displayName = 'MenuItemSkeleton';

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Modal", {
+    enumerable: true,
+    get: function() {
+        return Modal;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _Dialog = require("../Dialog/Dialog.js");
+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.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.Dialog.Backdrop, backdropProps), _react.createElement(_Dialog.Dialog.Main, {
+        "aria-modal": true,
+        ...rest
+    }, _react.createElement(_Dialog.Dialog.TitleBar, {
+        titleText: title,
+        ...titleBarProps
+    }), children));
+});
+Modal.displayName = 'Modal';

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ModalButtonBar", {
+    enumerable: true,
+    get: function() {
+        return ModalButtonBar;
+    }
+});
+const _DialogButtonBar = require("../Dialog/DialogButtonBar.js");
+const ModalButtonBar = Object.assign({}, _DialogButtonBar.DialogButtonBar);
+ModalButtonBar.displayName = 'ModalButtonBar';

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ModalContent", {
+    enumerable: true,
+    get: function() {
+        return ModalContent;
+    }
+});
+const _DialogContent = require("../Dialog/DialogContent.js");
+const ModalContent = Object.assign({}, _DialogContent.DialogContent);
+ModalContent.displayName = 'ModalContent';