@itwin/itwinui-react 3.0.3 → 3.0.5

package/esm/core/List/ListItem.js

@@ -6,26 +6,8 @@ import * as React from 'react';
 import cx from 'classnames';
 import { polymorphic, Box } from '../utils/index.js';
 const ListItemComponent = React.forwardRef((props, ref) => {
-  const {
-    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' : undefined,
-    'data-iui-disabled': disabled ? 'true' : undefined,
-    'data-iui-size': size === 'large' ? 'large' : undefined,
-    'data-iui-actionable': actionable ? 'true' : undefined,
-    'data-iui-focused': focused ? 'true' : undefined,
-    ref: ref,
-    ...rest,
-  });
+    const { 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' : undefined, "data-iui-disabled": disabled ? 'true' : undefined, "data-iui-size": size === 'large' ? 'large' : undefined, "data-iui-actionable": actionable ? 'true' : undefined, "data-iui-focused": focused ? 'true' : undefined, ref: ref, ...rest }));
 });
 ListItemComponent.displayName = 'ListItem';
 // ----------------------------------------------------------------------------
@@ -53,30 +35,30 @@ ListItemDescription.displayName = 'ListItem.Description';
  * </List>
  */
 export const ListItem = Object.assign(ListItemComponent, {
-  /**
-   * Icon to be placed at the beginning or end of the ListItem.
-   */
-  Icon: ListItemIcon,
-  /**
-   * Wrapper for the main content of the ListItem.
-   *
-   * For basic list items, this wrapper is not needed, but it can be useful for two cases:
-   * - When using an end icon. The `ListItem.Content` will fill the available space
-   *   and push the icon to the end
-   * - When using `ListItem.Description`.
-   */
-  Content: ListItemContent,
-  /**
-   * Description to be used in addition to the main label of the ListItem.
-   * Should be used as a child of `ListItem.Content`.
-   *
-   * @example
-   * <ListItem>
-   *  <ListItem.Content>
-   *   <div>some list item</div>
-   *   <ListItem.Description>description for this item</ListItem.Description>
-   *  </ListItem.Content>
-   * </ListItem>
-   */
-  Description: ListItemDescription,
+    /**
+     * Icon to be placed at the beginning or end of the ListItem.
+     */
+    Icon: ListItemIcon,
+    /**
+     * Wrapper for the main content of the ListItem.
+     *
+     * For basic list items, this wrapper is not needed, but it can be useful for two cases:
+     * - When using an end icon. The `ListItem.Content` will fill the available space
+     *   and push the icon to the end
+     * - When using `ListItem.Description`.
+     */
+    Content: ListItemContent,
+    /**
+     * Description to be used in addition to the main label of the ListItem.
+     * Should be used as a child of `ListItem.Content`.
+     *
+     * @example
+     * <ListItem>
+     *  <ListItem.Content>
+     *   <div>some list item</div>
+     *   <ListItem.Description>description for this item</ListItem.Description>
+     *  </ListItem.Content>
+     * </ListItem>
+     */
+    Description: ListItemDescription,
 });

package/esm/core/Menu/Menu.js

@@ -4,73 +4,57 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import {
-  useMergedRefs,
-  getFocusableElements,
-  Box,
-  mergeEventHandlers,
-} from '../utils/index.js';
+import { useMergedRefs, getFocusableElements, Box, mergeEventHandlers, } from '../utils/index.js';
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */
 export const Menu = React.forwardRef((props, ref) => {
-  const { setFocus = true, className, ...rest } = props;
-  const [focusedIndex, setFocusedIndex] = React.useState();
-  const menuRef = React.useRef(null);
-  const refs = useMergedRefs(menuRef, ref);
-  const getFocusableNodes = React.useCallback(() => {
-    const focusableItems = getFocusableElements(menuRef.current);
-    // Filter out focusable elements that are inside each menu item, e.g. checkbox, anchor
-    return focusableItems.filter(
-      (i) => !focusableItems.some((p) => p.contains(i.parentElement)),
-    );
-  }, []);
-  React.useEffect(() => {
-    const items = getFocusableNodes();
-    if (focusedIndex != null) {
-      items?.[focusedIndex]?.focus();
-      return;
-    }
-    const selectedIndex = items.findIndex(
-      (el) => el.getAttribute('aria-selected') === 'true',
-    );
-    if (setFocus) {
-      setFocusedIndex(selectedIndex > -1 ? selectedIndex : 0);
-    }
-  }, [setFocus, focusedIndex, getFocusableNodes]);
-  const onKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    const items = getFocusableNodes();
-    if (!items?.length) {
-      return;
-    }
-    const currentIndex = focusedIndex ?? 0;
-    switch (event.key) {
-      case 'ArrowDown': {
-        setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-      }
-      case 'ArrowUp': {
-        setFocusedIndex(Math.max(currentIndex - 1, 0));
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-      }
-      default:
-        break;
-    }
-  };
-  return React.createElement(Box, {
-    as: 'div',
-    className: cx('iui-menu', className),
-    role: 'menu',
-    ref: refs,
-    ...rest,
-    onKeyDown: mergeEventHandlers(props.onKeyDown, onKeyDown),
-  });
+    const { setFocus = true, className, ...rest } = props;
+    const [focusedIndex, setFocusedIndex] = React.useState();
+    const menuRef = React.useRef(null);
+    const refs = useMergedRefs(menuRef, ref);
+    const getFocusableNodes = React.useCallback(() => {
+        const focusableItems = getFocusableElements(menuRef.current);
+        // Filter out focusable elements that are inside each menu item, e.g. checkbox, anchor
+        return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
+    }, []);
+    React.useEffect(() => {
+        const items = getFocusableNodes();
+        if (focusedIndex != null) {
+            items?.[focusedIndex]?.focus();
+            return;
+        }
+        const selectedIndex = items.findIndex((el) => el.getAttribute('aria-selected') === 'true');
+        if (setFocus) {
+            setFocusedIndex(selectedIndex > -1 ? selectedIndex : 0);
+        }
+    }, [setFocus, focusedIndex, getFocusableNodes]);
+    const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
+        const items = getFocusableNodes();
+        if (!items?.length) {
+            return;
+        }
+        const currentIndex = focusedIndex ?? 0;
+        switch (event.key) {
+            case 'ArrowDown': {
+                setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            }
+            case 'ArrowUp': {
+                setFocusedIndex(Math.max(currentIndex - 1, 0));
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    return (React.createElement(Box, { as: 'div', className: cx('iui-menu', className), role: 'menu', ref: refs, ...rest, onKeyDown: mergeEventHandlers(props.onKeyDown, onKeyDown) }));
 });
 export default Menu;

package/esm/core/Menu/MenuDivider.js

@@ -19,6 +19,6 @@ import { polymorphic } from '../utils/index.js';
  * </Menu>
  */
 export const MenuDivider = polymorphic('iui-menu-divider', {
-  role: 'separator',
+    role: 'separator',
 });
 export default MenuDivider;

package/esm/core/Menu/MenuExtraContent.js

@@ -24,6 +24,6 @@ import { polymorphic } from '../utils/index.js';
  * </Menu>
  */
 export const MenuExtraContent = polymorphic.li('iui-menu-content', {
-  role: 'presentation',
+    role: 'presentation',
 });
 export default MenuExtraContent;

package/esm/core/Menu/MenuItem.js

@@ -3,12 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import {
-  SvgCaretRightSmall,
-  Portal,
-  useMergedRefs,
-  useId,
-} from '../utils/index.js';
+import { SvgCaretRightSmall, Portal, useMergedRefs, useId, } from '../utils/index.js';
 import { Menu } from './Menu.js';
 import { ListItem } from '../List/ListItem.js';
 import { flushSync } from 'react-dom';
@@ -16,169 +11,94 @@ import { usePopover } from '../Popover/Popover.js';
 /**
  * Context used to provide menu item ref to sub-menu items.
  */
-const MenuItemContext = React.createContext({
-  ref: undefined,
-  setIsNestedSubmenuVisible: () => {},
-});
+const MenuItemContext = React.createContext({ ref: undefined, setIsNestedSubmenuVisible: () => { } });
 /**
  * Basic menu item component. Should be used inside `Menu` component for each item.
  */
 export const MenuItem = React.forwardRef((props, forwardedRef) => {
-  const {
-    children,
-    isSelected,
-    disabled,
-    value,
-    onClick,
-    sublabel,
-    size = !!sublabel ? 'large' : 'default',
-    icon,
-    startIcon = icon,
-    badge,
-    endIcon = badge,
-    role = 'menuitem',
-    subMenuItems = [],
-    ...rest
-  } = props;
-  const menuItemRef = React.useRef(null);
-  const [focusOnSubmenu, setFocusOnSubmenu] = React.useState(false);
-  const submenuId = useId();
-  const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
-  const [isNestedSubmenuVisible, setIsNestedSubmenuVisible] =
-    React.useState(false);
-  const parent = React.useContext(MenuItemContext);
-  const onVisibleChange = (open) => {
-    setIsSubmenuVisible(open);
-    // we don't want parent to close when mouse goes into a nested submenu,
-    // so we need to let the parent know whether the submenu is still open.
-    parent.setIsNestedSubmenuVisible(open);
-  };
-  const popover = usePopover({
-    visible: isSubmenuVisible || isNestedSubmenuVisible,
-    onVisibleChange,
-    placement: 'right-start',
-    trigger: { hover: true, focus: true },
-  });
-  const onKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    switch (event.key) {
-      case 'Enter':
-      case ' ':
-      case 'Spacebar': {
-        !disabled && onClick?.(value);
-        event.preventDefault();
-        break;
-      }
-      case 'ArrowRight': {
-        if (subMenuItems.length > 0) {
-          setIsSubmenuVisible(true);
-          // flush and reset state so we are ready to focus again next time
-          flushSync(() => setFocusOnSubmenu(true));
-          setFocusOnSubmenu(false);
-          event.preventDefault();
-          event.stopPropagation();
+    const { children, isSelected, disabled, value, onClick, sublabel, size = !!sublabel ? 'large' : 'default', icon, startIcon = icon, badge, endIcon = badge, role = 'menuitem', subMenuItems = [], ...rest } = props;
+    const menuItemRef = React.useRef(null);
+    const [focusOnSubmenu, setFocusOnSubmenu] = React.useState(false);
+    const submenuId = useId();
+    const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
+    const [isNestedSubmenuVisible, setIsNestedSubmenuVisible] = React.useState(false);
+    const parent = React.useContext(MenuItemContext);
+    const onVisibleChange = (open) => {
+        setIsSubmenuVisible(open);
+        // we don't want parent to close when mouse goes into a nested submenu,
+        // so we need to let the parent know whether the submenu is still open.
+        parent.setIsNestedSubmenuVisible(open);
+    };
+    const popover = usePopover({
+        visible: isSubmenuVisible || isNestedSubmenuVisible,
+        onVisibleChange,
+        placement: 'right-start',
+        trigger: { hover: true, focus: true },
+    });
+    const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
         }
-        break;
-      }
-      case 'ArrowLeft': {
-        if (parent.ref) {
-          parent.ref.current?.focus();
-          parent.setIsNestedSubmenuVisible(false);
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'Spacebar': {
+                !disabled && onClick?.(value);
+                event.preventDefault();
+                break;
+            }
+            case 'ArrowRight': {
+                if (subMenuItems.length > 0) {
+                    setIsSubmenuVisible(true);
+                    // flush and reset state so we are ready to focus again next time
+                    flushSync(() => setFocusOnSubmenu(true));
+                    setFocusOnSubmenu(false);
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+                break;
+            }
+            case 'ArrowLeft': {
+                if (parent.ref) {
+                    parent.ref.current?.focus();
+                    parent.setIsNestedSubmenuVisible(false);
+                }
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            }
+            case 'Escape': {
+                // focus might get lost if submenu closes so move it back to parent
+                parent.ref?.current?.focus();
+                break;
+            }
+            default:
+                break;
         }
-        event.stopPropagation();
-        event.preventDefault();
-        break;
-      }
-      case 'Escape': {
-        // focus might get lost if submenu closes so move it back to parent
-        parent.ref?.current?.focus();
-        break;
-      }
-      default:
-        break;
-    }
-  };
-  const handlers = {
-    onClick: () => !disabled && onClick?.(value),
-    onKeyDown,
-  };
-  return React.createElement(
-    ListItem,
-    {
-      as: 'div',
-      actionable: true,
-      size: size,
-      active: isSelected,
-      disabled: disabled,
-      ref: useMergedRefs(
-        menuItemRef,
-        forwardedRef,
-        subMenuItems.length > 0 ? popover.refs.setReference : null,
-      ),
-      role: role,
-      tabIndex: disabled || role === 'presentation' ? undefined : -1,
-      'aria-selected': isSelected,
-      'aria-haspopup': subMenuItems.length > 0 ? 'true' : undefined,
-      'aria-controls': subMenuItems.length > 0 ? submenuId : undefined,
-      'aria-expanded': subMenuItems.length > 0 ? popover.open : undefined,
-      'aria-disabled': disabled,
-      ...(subMenuItems.length === 0
-        ? { ...handlers, ...rest }
-        : popover.getReferenceProps({ ...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,
-      ),
-    subMenuItems.length > 0 &&
-      popover.open &&
-      React.createElement(
-        Portal,
-        null,
-        React.createElement(
-          MenuItemContext.Provider,
-          { value: { ref: menuItemRef, setIsNestedSubmenuVisible } },
-          React.createElement(
-            Menu,
-            {
-              setFocus: focusOnSubmenu,
-              ref: popover.refs.setFloating,
-              ...popover.getFloatingProps({
-                id: submenuId,
-                onPointerMove: () => {
-                  // pointer might move into a nested submenu and set isSubmenuVisible to false,
-                  // so we need to flip it back to true when pointer re-enters this submenu.
-                  setIsSubmenuVisible(true);
-                },
-              }),
-            },
-            subMenuItems,
-          ),
-        ),
-      ),
-  );
+    };
+    const handlers = {
+        onClick: () => !disabled && onClick?.(value),
+        onKeyDown,
+    };
+    return (React.createElement(ListItem, { as: 'div', actionable: true, size: size, active: isSelected, disabled: disabled, ref: useMergedRefs(menuItemRef, forwardedRef, subMenuItems.length > 0 ? popover.refs.setReference : null), role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-haspopup": subMenuItems.length > 0 ? 'true' : undefined, "aria-controls": subMenuItems.length > 0 ? submenuId : undefined, "aria-expanded": subMenuItems.length > 0 ? popover.open : undefined, "aria-disabled": disabled, ...(subMenuItems.length === 0
+            ? { ...handlers, ...rest }
+            : popover.getReferenceProps({ ...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)),
+        subMenuItems.length > 0 && popover.open && (React.createElement(Portal, null,
+            React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef, setIsNestedSubmenuVisible } },
+                React.createElement(Menu, { setFocus: focusOnSubmenu, ref: popover.refs.setFloating, ...popover.getFloatingProps({
+                        id: submenuId,
+                        onPointerMove: () => {
+                            // pointer might move into a nested submenu and set isSubmenuVisible to false,
+                            // so we need to flip it back to true when pointer re-enters this submenu.
+                            setIsSubmenuVisible(true);
+                        },
+                    }) }, subMenuItems))))));
 });
 export default MenuItem;

package/esm/core/Menu/MenuItemSkeleton.js

@@ -10,48 +10,17 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
  * Menu item that uses skeletons to indicate loading state.
  */
 export const MenuItemSkeleton = React.forwardRef((props, forwardedRef) => {
-  const {
-    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),
-    ),
-  );
+    const { 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))));
 });
 export default MenuItemSkeleton;

package/esm/core/Modal/Modal.js

@@ -26,38 +26,11 @@ import { Dialog } from '../Dialog/Dialog.js';
  * </Modal>
  */
 export const Modal = React.forwardRef((props, 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,
-    ),
-  );
+    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)));
 });
 export default Modal;