@itwin/itwinui-react 3.0.0-dev.7 → 3.0.0-dev.9

package/esm/core/Menu/MenuItem.js

@@ -3,17 +3,27 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Popover, useMergedRefs, SvgCaretRightSmall } from '../utils/index.js';
+import {
+  SvgCaretRightSmall,
+  usePopover,
+  Portal,
+  useMergedRefs,
+  useId,
+} from '../utils/index.js';
 import { Menu } from './Menu.js';
 import { ListItem } from '../List/ListItem.js';
+import { flushSync } from 'react-dom';
 /**
  * Context used to provide menu item ref to sub-menu items.
  */
-const MenuItemContext = React.createContext({ ref: undefined });
+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, ref) => {
+export const MenuItem = React.forwardRef((props, forwardedRef) => {
   const {
     children,
     isSelected,
@@ -22,21 +32,33 @@ export const MenuItem = React.forwardRef((props, ref) => {
     onClick,
     sublabel,
     size = !!sublabel ? 'large' : 'default',
-    startIcon: startIconProp,
     icon,
-    endIcon: endIconProp,
+    startIcon = icon,
     badge,
+    endIcon = badge,
     role = 'menuitem',
     subMenuItems = [],
     ...rest
   } = props;
   const menuItemRef = React.useRef(null);
-  const refs = useMergedRefs(menuItemRef, ref);
-  const { ref: parentMenuItemRef } = React.useContext(MenuItemContext);
-  const subMenuRef = React.useRef(null);
+  const [focusOnSubmenu, setFocusOnSubmenu] = React.useState(false);
+  const submenuId = useId();
   const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
-  const startIcon = startIconProp ?? icon;
-  const endIcon = endIconProp ?? badge;
+  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;
@@ -52,46 +74,59 @@ export const MenuItem = React.forwardRef((props, ref) => {
       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': {
-        parentMenuItemRef?.current?.focus();
+        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;
     }
   };
-  const listItem = React.createElement(
+  const handlers = {
+    onClick: () => !disabled && onClick?.(value),
+    onKeyDown,
+  };
+  return React.createElement(
     ListItem,
     {
+      as: 'div',
       actionable: true,
       size: size,
       active: isSelected,
       disabled: disabled,
-      onClick: () => !disabled && onClick?.(value),
-      ref: refs,
+      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,
+      '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,
-      onKeyDown: onKeyDown,
-      onMouseEnter: () => setIsSubmenuVisible(true),
-      onMouseLeave: (e) => {
-        if (
-          !(e.relatedTarget instanceof Node) ||
-          !subMenuRef.current?.contains(e.relatedTarget)
-        ) {
-          setIsSubmenuVisible(false);
-        }
-      },
-      ...rest,
+      ...(subMenuItems.length === 0
+        ? { ...handlers, ...rest }
+        : popover.getReferenceProps({ ...handlers, ...rest })),
     },
     startIcon &&
       React.createElement(
@@ -118,34 +153,32 @@ export const MenuItem = React.forwardRef((props, ref) => {
         { as: 'span', 'aria-hidden': true },
         endIcon,
       ),
-  );
-  return subMenuItems.length === 0
-    ? listItem
-    : React.createElement(
-        MenuItemContext.Provider,
-        { value: { ref: menuItemRef } },
+    subMenuItems.length > 0 &&
+      popover.open &&
+      React.createElement(
+        Portal,
+        null,
         React.createElement(
-          Popover,
-          {
-            placement: 'right-start',
-            visible: isSubmenuVisible,
-            appendTo: 'parent',
-            content: React.createElement(
-              'div',
-              {
-                onMouseLeave: () => setIsSubmenuVisible(false),
-                onBlur: (e) => {
-                  !!(e.relatedTarget instanceof Node) &&
-                    !subMenuRef.current?.contains(e.relatedTarget) &&
-                    !subMenuRef.current?.isEqualNode(e.relatedTarget) &&
-                    setIsSubmenuVisible(false);
+          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);
                 },
-              },
-              React.createElement(Menu, { ref: subMenuRef }, subMenuItems),
-            ),
-          },
-          listItem,
+              }),
+            },
+            subMenuItems,
+          ),
         ),
-      );
+      ),
+  );
 });
 export default MenuItem;

package/esm/core/Menu/MenuItemSkeleton.d.ts

@@ -26,5 +26,5 @@ type MenuItemSkeletonProps = {
 /**
  * Menu item that uses skeletons to indicate loading state.
  */
-export declare const MenuItemSkeleton: PolymorphicForwardRefComponent<"li", MenuItemSkeletonProps>;
+export declare const MenuItemSkeleton: PolymorphicForwardRefComponent<"div", MenuItemSkeletonProps>;
 export default MenuItemSkeleton;

package/esm/core/Menu/MenuItemSkeleton.js

@@ -21,7 +21,6 @@ export const MenuItemSkeleton = React.forwardRef((props, forwardedRef) => {
   return React.createElement(
     Box,
     {
-      as: 'li',
       className: cx('iui-menu-item-skeleton', className),
       'data-iui-size': hasSublabel && 'large',
       style: {

package/esm/core/SearchBox/SearchBox.js

@@ -71,7 +71,7 @@ const SearchBoxComponent = React.forwardRef((props, ref) => {
           { 'iui-expandable-searchbox': expandable },
           className,
         ),
-        'data-iui-size': size,
+        size: size,
         isDisabled: isDisabled,
         'data-iui-expanded': isExpanded,
         ...rest,

package/esm/core/Select/Select.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import type { PopoverProps, CommonProps } from '../utils/index.js';
+import { usePopover } from '../utils/index.js';
+import type { CommonProps } from '../utils/index.js';
 export type ItemRendererProps = {
     /**
      * Close handler that closes the dropdown.
@@ -93,6 +94,10 @@ export type SelectProps<T> = {
      * Modify size of select.
      */
     size?: 'small' | 'large';
+    /**
+     * Status of select.
+     */
+    status?: 'positive' | 'warning' | 'negative';
     /**
      * Custom renderer for an item in the dropdown list. `MenuItem` item props are going to be populated if not provided.
      */
@@ -106,15 +111,14 @@ export type SelectProps<T> = {
      */
     menuStyle?: React.CSSProperties;
     /**
-     * Props to customize {@link Popover} behavior.
-     * @see [tippy.js props](https://atomiks.github.io/tippyjs/v6/all-props/)
+     * Props to customize Popover behavior.
      */
-    popoverProps?: Omit<PopoverProps, 'onShow' | 'onHide' | 'disabled'>;
+    popoverProps?: Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth' | 'closeOnOutsideClick'>;
     /**
      * Props to pass to the select button (trigger) element.
      */
     triggerProps?: React.ComponentPropsWithoutRef<'div'>;
-} & SelectMultipleTypeProps<T> & Pick<PopoverProps, 'onShow' | 'onHide'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'size' | 'disabled' | 'placeholder' | 'onChange'>;
+} & SelectMultipleTypeProps<T> & Omit<React.ComponentPropsWithoutRef<'div'>, 'size' | 'disabled' | 'placeholder' | 'onChange'>;
 /**
  * Select component to select value from options.
  * Generic type is used for value. It prevents you from mistakenly using other types in `options`, `value` and `onChange`.

package/esm/core/Select/Select.js

@@ -7,10 +7,14 @@ import cx from 'classnames';
 import { Menu, MenuItem } from '../Menu/index.js';
 import {
   SvgCaretDownSmall,
-  Popover,
   useId,
   AutoclearingHiddenLiveRegion,
   Box,
+  usePopover,
+  Portal,
+  useMergedRefs,
+  SvgCheckmark,
+  Icon,
 } from '../utils/index.js';
 import SelectTag from './SelectTag.js';
 import SelectTagContainer from './SelectTagContainer.js';
@@ -85,55 +89,27 @@ export const Select = (props) => {
     style,
     menuClassName,
     menuStyle,
-    onShow,
-    onHide,
-    popoverProps,
     multiple = false,
     triggerProps,
+    status,
+    popoverProps,
     ...rest
   } = props;
-  const [isOpenState, setIsOpen] = React.useState(false);
-  const isOpen = popoverProps?.visible ?? isOpenState;
-  const [minWidth, setMinWidth] = React.useState(0);
+  const [isOpen, setIsOpen] = React.useState(false);
   const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
   const selectRef = React.useRef(null);
-  const toggleButtonRef = React.useRef(null);
-  const onShowHandler = React.useCallback(
-    (instance) => {
-      setIsOpen(true);
-      onShow?.(instance);
-    },
-    [onShow],
-  );
-  const onHideHandler = React.useCallback(
-    (instance) => {
-      setIsOpen(false);
-      selectRef.current?.focus({ preventScroll: true }); // move focus back to select button
-      onHide?.(instance);
-    },
-    [onHide],
-  );
-  React.useEffect(() => {
-    if (selectRef.current) {
-      setMinWidth(selectRef.current.offsetWidth);
-    }
-  }, [isOpen]);
-  const onKeyDown = (event) => {
-    if (event.altKey) {
+  const show = React.useCallback(() => {
+    if (disabled) {
       return;
     }
-    switch (event.key) {
-      case 'Enter':
-      case ' ':
-      case 'Spacebar': {
-        setIsOpen((o) => !o);
-        event.preventDefault();
-        break;
-      }
-      default:
-        break;
-    }
-  };
+    setIsOpen(true);
+    popoverProps?.onVisibleChange?.(true);
+  }, [disabled, popoverProps]);
+  const hide = React.useCallback(() => {
+    setIsOpen(false);
+    selectRef.current?.focus({ preventScroll: true }); // move focus back to select button
+    popoverProps?.onVisibleChange?.(false);
+  }, [popoverProps]);
   const menuItems = React.useMemo(() => {
     return options.map((option, index) => {
       const isSelected = isMultipleEnabled(value, multiple)
@@ -148,13 +124,16 @@ export const Select = (props) => {
         key: `${label}-${index}`,
         isSelected,
         startIcon: startIcon,
+        endIcon: isSelected
+          ? React.createElement(SvgCheckmark, { 'aria-hidden': true })
+          : null,
         onClick: () => {
           if (option.disabled) {
             return;
           }
           if (isSingleOnChange(onChange, multiple)) {
             onChange?.(option.value);
-            setIsOpen(false);
+            hide();
           } else {
             onChange?.(option.value, isSelected ? 'removed' : 'added');
           }
@@ -183,7 +162,7 @@ export const Select = (props) => {
         ...menuItem.props,
       });
     });
-  }, [itemRenderer, multiple, onChange, options, value]);
+  }, [hide, itemRenderer, multiple, onChange, options, value]);
   const selectedItems = React.useMemo(() => {
     if (value == null) {
       return undefined;
@@ -198,54 +177,39 @@ export const Select = (props) => {
       label: item.label,
     });
   }, []);
+  const popover = usePopover({
+    visible: isOpen,
+    matchWidth: true,
+    closeOnOutsideClick: true,
+    ...popoverProps,
+    onVisibleChange: (open) => (open ? show() : hide()),
+  });
   return React.createElement(
-    Box,
-    { className: cx('iui-input-with-icon', className), style: style, ...rest },
+    React.Fragment,
+    null,
     React.createElement(
-      Popover,
+      Box,
       {
-        content: React.createElement(
-          Menu,
-          {
-            role: 'listbox',
-            className: cx('iui-scroll', menuClassName),
-            style: {
-              minInlineSize: minWidth,
-              maxInlineSize: `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 }) => {
-          if (!toggleButtonRef.current?.contains(target)) {
-            setIsOpen(false);
-          }
-        },
+        className: cx('iui-input-with-icon', className),
+        style: style,
+        ...rest,
+        ref: popover.refs.setPositionReference,
       },
       React.createElement(
         Box,
         {
+          ...popover.getReferenceProps(),
           tabIndex: 0,
           role: 'combobox',
-          ref: selectRef,
           'data-iui-size': size,
-          onClick: () => !disabled && setIsOpen((o) => !o),
-          onKeyDown: (e) => !disabled && onKeyDown(e),
+          'data-iui-status': status,
           'aria-disabled': disabled,
           'aria-autocomplete': 'none',
           'aria-expanded': isOpen,
           'aria-haspopup': 'listbox',
           'aria-controls': `${uid}-menu`,
           ...triggerProps,
+          ref: useMergedRefs(selectRef, popover.refs.setReference),
           className: cx(
             'iui-select-button',
             {
@@ -273,27 +237,48 @@ export const Select = (props) => {
               selectedItemRenderer: selectedItemRenderer,
             }),
       ),
+      React.createElement(
+        Icon,
+        {
+          as: 'span',
+          'aria-hidden': true,
+          className: cx('iui-end-icon', {
+            'iui-disabled': disabled,
+            'iui-open': isOpen,
+          }),
+        },
+        React.createElement(SvgCaretDownSmall, null),
+      ),
+      multiple
+        ? React.createElement(AutoclearingHiddenLiveRegion, {
+            text: liveRegionSelection,
+          })
+        : null,
     ),
-    React.createElement(
-      Box,
-      {
-        as: 'span',
-        'aria-hidden': true,
-        ref: toggleButtonRef,
-        className: cx('iui-end-icon', {
-          'iui-actionable': !disabled,
-          'iui-disabled': disabled,
-          'iui-open': isOpen,
-        }),
-        onClick: () => !disabled && setIsOpen((o) => !o),
-      },
-      React.createElement(SvgCaretDownSmall, null),
-    ),
-    multiple
-      ? React.createElement(AutoclearingHiddenLiveRegion, {
-          text: liveRegionSelection,
-        })
-      : null,
+    popover.open &&
+      React.createElement(
+        Portal,
+        null,
+        React.createElement(
+          Menu,
+          {
+            role: 'listbox',
+            className: cx('iui-scroll', menuClassName),
+            id: `${uid}-menu`,
+            key: `${uid}-menu`,
+            ...popover.getFloatingProps({
+              style: menuStyle,
+              onKeyDown: ({ key }) => {
+                if (key === 'Tab') {
+                  hide();
+                }
+              },
+            }),
+            ref: popover.refs.setFloating,
+          },
+          menuItems,
+        ),
+      ),
   );
 };
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer }) => {

package/esm/core/SideNavigation/SideNavigation.js

@@ -44,6 +44,8 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
   const ExpandButton = React.createElement(
     IconButton,
     {
+      label: 'Toggle icon labels',
+      'aria-expanded': _isExpanded,
       className: 'iui-sidenav-button iui-expand',
       onClick: React.useCallback(() => {
         _setIsExpanded((expanded) => !expanded);

package/esm/core/Slider/Thumb.js

@@ -88,6 +88,7 @@ export const Thumb = (props) => {
     {
       placement: 'top',
       autoUpdateOptions: { animationFrame: true },
+      ariaStrategy: 'none',
       ...tooltipProps,
     },
     React.createElement(Box, {

package/esm/core/StatusMessage/StatusMessage.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { Icon } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type StatusMessageProps = {
     /**
      * Custom icon to be displayed at the beginning.
@@ -13,12 +15,20 @@ type StatusMessageProps = {
      * Status of the message.
      */
     status?: 'positive' | 'warning' | 'negative';
+    /**
+     * Passes props to icon
+     */
+    iconProps?: React.ComponentProps<typeof Icon>;
+    /**
+     * Passes props to content
+     */
+    contentProps?: React.ComponentPropsWithRef<'div'>;
 };
 /**
- * Component to display icon and text below the `Combobox` component.
+ * Component to display icon and text below the form field.
  * @example
  * <StatusMessage>This is the text</StatusMessage>
  * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
  */
-export declare const StatusMessage: ({ startIcon: userStartIcon, children, status, }: StatusMessageProps) => React.JSX.Element;
+export declare const StatusMessage: PolymorphicForwardRefComponent<"div", StatusMessageProps>;
 export default StatusMessage;

package/esm/core/StatusMessage/StatusMessage.js

@@ -3,30 +3,37 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Box, StatusIconMap } from '../utils/index.js';
+import { Box, StatusIconMap, Icon } from '../utils/index.js';
+import cx from 'classnames';
 /**
- * Component to display icon and text below the `Combobox` component.
+ * Component to display icon and text below the form field.
  * @example
  * <StatusMessage>This is the text</StatusMessage>
  * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
  */
-export const StatusMessage = ({
-  startIcon: userStartIcon,
-  children,
-  status,
-}) => {
+export const StatusMessage = React.forwardRef((props, ref) => {
+  const {
+    children,
+    startIcon: userStartIcon,
+    status,
+    className,
+    iconProps,
+    contentProps,
+    ...rest
+  } = props;
   const icon = userStartIcon ?? (status && StatusIconMap[status]());
   return React.createElement(
-    React.Fragment,
-    null,
+    Box,
+    {
+      className: cx('iui-status-message', className),
+      'data-iui-status': status,
+      ref: ref,
+      ...rest,
+    },
     !!icon
-      ? React.createElement(
-          Box,
-          { as: 'span', className: 'iui-input-icon', 'aria-hidden': true },
-          icon,
-        )
+      ? React.createElement(Icon, { 'aria-hidden': true, ...iconProps }, icon)
       : null,
-    React.createElement(Box, { className: 'iui-message' }, children),
+    React.createElement(Box, { ...contentProps }, children),
   );
-};
+});
 export default StatusMessage;

package/esm/core/Table/SubRowExpander.js

@@ -15,6 +15,8 @@ export const SubRowExpander = (props) => {
       : React.createElement(
           IconButton,
           {
+            'aria-label': 'Toggle sub row',
+            'aria-expanded': cell.row.isExpanded ? 'true' : 'false',
             style: {
               marginInlineEnd:
                 density === 'default' || density === undefined ? 8 : 4,

package/esm/core/Table/columns/actionColumn.js

@@ -105,13 +105,9 @@ export const ActionColumn = ({ columnManager = false } = {}) => {
         {
           ...dropdownMenuProps,
           menuItems: headerCheckBoxes,
-          onHide: (i) => {
-            setIsOpen(false);
-            dropdownMenuProps.onHide?.(i);
-          },
-          onShow: (i) => {
-            setIsOpen(true);
-            dropdownMenuProps.onShow?.(i);
+          onVisibleChange: (open) => {
+            setIsOpen(open);
+            dropdownMenuProps?.onVisibleChange?.(open);
           },
           className: cx('iui-scroll', dropdownMenuProps.className),
         },

package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import type { LabeledInput } from '../../../LabeledInput/index.js';
 import type { PolymorphicForwardRefComponent } from '../../../utils/index.js';
-import { LabeledInput } from '../../../LabeledInput/index.js';
+import type { DatePickerLocalizedNames } from '../../../DatePicker/DatePicker.js';
 export type DatePickerInputProps = {
     date?: Date;
     onChange: (date?: Date) => void;
@@ -14,6 +15,10 @@ export type DatePickerInputProps = {
      * The 'to' date for the 'from' DatePickerInput or the 'from' date for the 'to' DatePickerInput
      */
     selectedDate?: Date;
+    /**
+     * Months, short days and days localized names for DatePicker
+     */
+    localizedNames?: DatePickerLocalizedNames;
 } & Omit<React.ComponentProps<typeof LabeledInput>, 'value' | 'onChange' | 'svgIcon' | 'displayStyle'>;
 declare const DatePickerInput: PolymorphicForwardRefComponent<"input", DatePickerInputProps>;
 export default DatePickerInput;