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

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -9,113 +9,93 @@ const tslib_1 = require('tslib');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../Menu/index.js');
-const index_js_2 = require('../Surface/index.js');
-const index_js_3 = require('../utils/index.js');
+const index_js_2 = require('../utils/index.js');
 const helpers_js_1 = require('./helpers.js');
-const isOverflowOverlaySupported = () =>
-  (0, index_js_3.getWindow)()?.CSS?.supports?.('overflow: overlay');
-const VirtualizedComboBoxMenu = React.forwardRef(
-  ({ children, className, style, ...rest }, forwardedRef) => {
-    const { minWidth, id, filteredOptions, getMenuItem, focusedIndex } = (0,
-    index_js_3.useSafeContext)(helpers_js_1.ComboBoxStateContext);
-    const { menuRef } = (0, index_js_3.useSafeContext)(
-      helpers_js_1.ComboBoxRefsContext,
-    );
-    const virtualItemRenderer = React.useCallback(
-      (index) =>
-        filteredOptions.length > 0
-          ? getMenuItem(filteredOptions[index], index)
-          : children, // Here is expected empty state content
-      [filteredOptions, getMenuItem, children],
+const VirtualizedComboBoxMenu = (props) => {
+  const { children, ...rest } = props;
+  const { filteredOptions, getMenuItem, focusedIndex } = (0,
+  index_js_2.useSafeContext)(helpers_js_1.ComboBoxStateContext);
+  const { menuRef } = (0, index_js_2.useSafeContext)(
+    helpers_js_1.ComboBoxRefsContext,
+  );
+  const virtualItemRenderer = React.useCallback(
+    (index) =>
+      filteredOptions.length > 0
+        ? getMenuItem(filteredOptions[index], index)
+        : children, // Here is expected empty state content
+    [filteredOptions, getMenuItem, children],
+  );
+  const focusedVisibleIndex = React.useMemo(() => {
+    const currentElement = menuRef.current?.querySelector(
+      `[data-iui-index="${focusedIndex}"]`,
     );
-    const focusedVisibleIndex = React.useMemo(() => {
-      const currentElement = menuRef.current?.querySelector(
-        `[data-iui-index="${focusedIndex}"]`,
-      );
-      if (!currentElement) {
-        return focusedIndex;
-      }
-      return Number(
-        currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex,
-      );
-    }, [focusedIndex, menuRef]);
-    const { outerProps, innerProps, visibleChildren } = (0,
-    index_js_3.useVirtualization)({
-      // 'Fool' VirtualScroll by passing length 1
-      // whenever there is no elements, to show empty state message
-      itemsLength: filteredOptions.length || 1,
-      itemRenderer: virtualItemRenderer,
-      scrollToIndex: focusedVisibleIndex,
-    });
-    const surfaceStyles = {
-      minInlineSize: minWidth,
-      // set as constant because we don't want it shifting when items are unmounted
-      maxInlineSize: minWidth,
-      // max-height must be on the outermost element for virtual scroll
-      maxBlockSize: 'calc((var(--iui-component-height) - 1px) * 8.5)',
-      overflowY: isOverflowOverlaySupported() ? 'overlay' : 'auto',
-      ...style,
-    };
-    return React.createElement(
-      index_js_2.Surface,
-      { style: surfaceStyles },
-      React.createElement(
-        'div',
-        { ...outerProps },
-        React.createElement(
-          index_js_1.Menu,
-          {
-            id: `${id}-list`,
-            setFocus: false,
-            role: 'listbox',
-            ref: (0, index_js_3.mergeRefs)(
-              menuRef,
-              innerProps.ref,
-              forwardedRef,
-            ),
-            className: className,
-            style: innerProps.style,
-            ...rest,
-          },
-          visibleChildren,
-        ),
-      ),
+    if (!currentElement) {
+      return focusedIndex;
+    }
+    return Number(
+      currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex,
     );
-  },
-);
+  }, [focusedIndex, menuRef]);
+  const { outerProps, innerProps, visibleChildren } = (0,
+  index_js_2.useVirtualization)({
+    // 'Fool' VirtualScroll by passing length 1
+    // whenever there is no elements, to show empty state message
+    itemsLength: filteredOptions.length || 1,
+    itemRenderer: virtualItemRenderer,
+    scrollToIndex: focusedVisibleIndex,
+  });
+  return React.createElement(
+    index_js_2.Box,
+    { as: 'div', ...outerProps, ...rest },
+    React.createElement(
+      'div',
+      { ...innerProps, ref: innerProps.ref },
+      visibleChildren,
+    ),
+  );
+};
 exports.ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
-  const { className, style, ...rest } = props;
-  const { minWidth, id, enableVirtualization } = (0, index_js_3.useSafeContext)(
+  const { className, children, style, ...rest } = props;
+  const { id, enableVirtualization, popover } = (0, index_js_2.useSafeContext)(
     helpers_js_1.ComboBoxStateContext,
   );
-  const { menuRef } = (0, index_js_3.useSafeContext)(
+  const { menuRef } = (0, index_js_2.useSafeContext)(
     helpers_js_1.ComboBoxRefsContext,
   );
-  const refs = (0, index_js_3.useMergedRefs)(menuRef, forwardedRef);
-  const styles = React.useMemo(
-    () => ({
-      minInlineSize: minWidth,
-      maxInlineSize: `min(${minWidth * 2}px, 90vw)`,
-    }),
-    [minWidth],
+  const refs = (0, index_js_2.useMergedRefs)(
+    popover.refs.setFloating,
+    forwardedRef,
+    menuRef,
   );
-  return React.createElement(
-    React.Fragment,
-    null,
-    !enableVirtualization
-      ? React.createElement(index_js_1.Menu, {
+  return (
+    popover.open &&
+    React.createElement(
+      index_js_2.Portal,
+      { portal: true },
+      React.createElement(
+        index_js_1.Menu,
+        {
           id: `${id}-list`,
-          style: { ...styles, ...style },
           setFocus: false,
           role: 'listbox',
           ref: refs,
           className: (0, classnames_1.default)('iui-scroll', className),
-          ...rest,
-        })
-      : React.createElement(VirtualizedComboBoxMenu, {
-          ref: forwardedRef,
-          ...props,
-        }),
+          ...popover.getFloatingProps({
+            style: !enableVirtualization
+              ? style
+              : {
+                  // set as constant because we don't want it shifting when items are unmounted
+                  maxInlineSize: 0,
+                  ...style,
+                },
+            ...rest,
+          }),
+        },
+        !enableVirtualization
+          ? children
+          : React.createElement(VirtualizedComboBoxMenu, null, children),
+      ),
+    )
   );
 });
 exports.ComboBoxMenu.displayName = 'ComboBoxMenu';

package/cjs/core/ComboBox/helpers.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { SelectOption } from '../Select/Select.js';
+import type { usePopover } from '../utils/index.js';
 type ComboBoxAction = {
     type: 'multiselect';
     value: number[];
@@ -33,13 +34,15 @@ export declare const ComboBoxRefsContext: React.Context<{
 type ComboBoxStateContextProps<T = unknown> = {
     isOpen: boolean;
     id: string;
-    minWidth: number;
     enableVirtualization: boolean;
     filteredOptions: SelectOption<T>[];
     onClickHandler?: (prop: number) => void;
     getMenuItem: (option: SelectOption<T>, filteredIndex?: number) => JSX.Element;
     focusedIndex?: number;
     multiple?: boolean;
+    popover: ReturnType<typeof usePopover>;
+    show: () => void;
+    hide: () => void;
 };
 export declare const ComboBoxStateContext: React.Context<ComboBoxStateContextProps<unknown> | undefined>;
 export declare const ComboBoxActionContext: React.Context<((x: ComboBoxAction) => void) | undefined>;

package/cjs/core/DropdownMenu/DropdownMenu.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import type { CommonProps, PopoverProps } from '../utils/index.js';
+import { Popover } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent, PortalProps } from '../utils/index.js';
 export type DropdownMenuProps = {
     /**
      * List of menu items. Recommended to use MenuItem component.
      * You can pass function that takes argument `close` that closes the dropdown menu, or a list of MenuItems.
      */
-    menuItems: (close: () => void) => JSX.Element[] | JSX.Element[] | JSX.Element;
+    menuItems: ((close: () => void) => JSX.Element[]) | JSX.Element[] | JSX.Element;
     /**
      * ARIA role. Role of menu. For menu use 'menu', for select use 'listbox'.
      * @default 'menu'
@@ -15,10 +16,10 @@ export type DropdownMenuProps = {
      * Child element to wrap dropdown with.
      */
     children: React.ReactNode;
-} & Omit<PopoverProps, 'content'> & Omit<CommonProps, 'title'>;
+} & Pick<React.ComponentProps<typeof Popover>, 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth'> & React.ComponentPropsWithoutRef<'ul'> & Pick<PortalProps, 'portal'>;
 /**
  * Dropdown menu component.
- * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
+ * Built on top of the {@link Popover} component.
  * @example
  * const menuItems = (close: () => void) => [
  *   <MenuItem key={1} onClick={onClick(1, close)}>
@@ -35,5 +36,5 @@ export type DropdownMenuProps = {
  *   <Button>Menu</Button>
  * </DropdownMenu>
  */
-export declare const DropdownMenu: (props: DropdownMenuProps) => React.JSX.Element;
+export declare const DropdownMenu: PolymorphicForwardRefComponent<"div", DropdownMenuProps>;
 export default DropdownMenu;

package/cjs/core/DropdownMenu/DropdownMenu.js

@@ -11,7 +11,7 @@ const index_js_1 = require('../utils/index.js');
 const index_js_2 = require('../Menu/index.js');
 /**
  * Dropdown menu component.
- * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
+ * Built on top of the {@link Popover} component.
  * @example
  * const menuItems = (close: () => void) => [
  *   <MenuItem key={1} onClick={onClick(1, close)}>
@@ -28,75 +28,79 @@ const index_js_2 = require('../Menu/index.js');
  *   <Button>Menu</Button>
  * </DropdownMenu>
  */
-const DropdownMenu = (props) => {
+exports.DropdownMenu = React.forwardRef((props, forwardedRef) => {
   const {
     menuItems,
     children,
-    className,
-    style,
     role = 'menu',
-    visible,
+    visible: visibleProp,
     placement = 'bottom-start',
-    onShow,
-    onHide,
-    trigger,
-    id,
+    matchWidth = false,
+    onVisibleChange,
+    portal = true,
     ...rest
   } = props;
-  const [isVisible, setIsVisible] = React.useState(visible ?? false);
-  React.useEffect(() => {
-    setIsVisible(visible ?? false);
-  }, [visible]);
-  const open = React.useCallback(() => setIsVisible(true), []);
-  const close = React.useCallback(() => setIsVisible(false), []);
+  const [visible, setVisible] = (0, index_js_1.useControlledState)(
+    false,
+    visibleProp,
+    onVisibleChange,
+  );
+  const triggerRef = React.useRef(null);
+  const close = React.useCallback(() => {
+    setVisible(false);
+    triggerRef.current?.focus({ preventScroll: true });
+  }, [setVisible]);
   const menuContent = React.useMemo(() => {
     if (typeof menuItems === 'function') {
       return menuItems(close);
     }
     return menuItems;
   }, [menuItems, close]);
-  const targetRef = React.useRef(null);
-  const onShowHandler = React.useCallback(
-    (instance) => {
-      setIsVisible(true);
-      onShow?.(instance);
-    },
-    [onShow],
-  );
-  const onHideHandler = React.useCallback(
-    (instance) => {
-      setIsVisible(false);
-      targetRef.current?.focus();
-      onHide?.(instance);
-    },
-    [onHide],
+  const popover = (0, index_js_1.usePopover)({
+    visible,
+    onVisibleChange: (open) => (open ? setVisible(true) : close()),
+    placement,
+    matchWidth,
+  });
+  const popoverRef = (0, index_js_1.useMergedRefs)(
+    forwardedRef,
+    popover.refs.setFloating,
   );
   return React.createElement(
-    index_js_1.Popover,
-    {
-      content: React.createElement(
-        index_js_2.Menu,
-        { className: className, style: style, role: role, id: id },
-        menuContent,
-      ),
-      visible: trigger === undefined ? isVisible : undefined,
-      onClickOutside: close,
-      placement: placement,
-      onShow: onShowHandler,
-      onHide: onHideHandler,
-      trigger: visible === undefined ? trigger : undefined,
-      ...rest,
-    },
-    React.isValidElement(children)
-      ? React.cloneElement(children, {
-          ref: (0, index_js_1.mergeRefs)(targetRef, props.children.ref),
-          onClick: (args) => {
-            trigger === undefined && (isVisible ? close() : open());
-            children.props.onClick?.(args);
+    React.Fragment,
+    null,
+    (0, index_js_1.cloneElementWithRef)(children, (children) => ({
+      ...popover.getReferenceProps(children.props),
+      'aria-expanded': popover.open,
+      ref: (0, index_js_1.mergeRefs)(triggerRef, popover.refs.setReference),
+    })),
+    popover.open &&
+      React.createElement(
+        index_js_1.Portal,
+        { portal: portal },
+        React.createElement(
+          index_js_2.Menu,
+          {
+            ...popover.getFloatingProps({
+              role,
+              ...rest,
+              onKeyDown: (0, index_js_1.mergeEventHandlers)(
+                props.onKeyDown,
+                (e) => {
+                  if (e.defaultPrevented) {
+                    return;
+                  }
+                  if (e.key === 'Tab') {
+                    close();
+                  }
+                },
+              ),
+            }),
+            ref: popoverRef,
           },
-        })
-      : React.createElement(React.Fragment, null),
+          menuContent,
+        ),
+      ),
   );
-};
-exports.DropdownMenu = DropdownMenu;
+});
 exports.default = exports.DropdownMenu;

package/cjs/core/Header/HeaderDropdownButton.js

@@ -27,8 +27,7 @@ exports.HeaderDropdownButton = React.forwardRef((props, ref) => {
     {
       menuItems: menuItems,
       style: { minInlineSize: menuWidth },
-      onShow: () => setIsMenuOpen(true),
-      onHide: () => setIsMenuOpen(false),
+      onVisibleChange: (open) => setIsMenuOpen(open),
     },
     React.createElement(
       HeaderBasicButton_js_1.HeaderBasicButton,

package/cjs/core/Header/HeaderSplitButton.js

@@ -48,8 +48,7 @@ exports.HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
         placement: menuPlacement,
         menuItems: menuItems,
         style: { minInlineSize: menuWidth },
-        onShow: React.useCallback(() => setIsMenuOpen(true), []),
-        onHide: React.useCallback(() => setIsMenuOpen(false), []),
+        onVisibleChange: (open) => setIsMenuOpen(open),
       },
       React.createElement(
         index_js_2.ButtonBase,

package/cjs/core/Menu/Menu.js

@@ -69,9 +69,9 @@ exports.Menu = React.forwardRef((props, ref) => {
     as: 'div',
     className: (0, classnames_1.default)('iui-menu', className),
     role: 'menu',
-    onKeyDown: onKeyDown,
     ref: refs,
     ...rest,
+    onKeyDown: (0, index_js_1.mergeEventHandlers)(props.onKeyDown, onKeyDown),
   });
 });
 exports.default = exports.Menu;

package/cjs/core/Menu/MenuItem.js

@@ -10,14 +10,18 @@ const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
 const Menu_js_1 = require('./Menu.js');
 const ListItem_js_1 = require('../List/ListItem.js');
+const react_dom_1 = require('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.
  */
-exports.MenuItem = React.forwardRef((props, ref) => {
+exports.MenuItem = React.forwardRef((props, forwardedRef) => {
   const {
     children,
     isSelected,
@@ -26,21 +30,33 @@ exports.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 = (0, index_js_1.useMergedRefs)(menuItemRef, ref);
-  const { ref: parentMenuItemRef } = React.useContext(MenuItemContext);
-  const subMenuRef = React.useRef(null);
+  const [focusOnSubmenu, setFocusOnSubmenu] = React.useState(false);
+  const submenuId = (0, index_js_1.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 = (0, index_js_1.usePopover)({
+    visible: isSubmenuVisible || isNestedSubmenuVisible,
+    onVisibleChange,
+    placement: 'right-start',
+    trigger: { hover: true, focus: true },
+  });
   const onKeyDown = (event) => {
     if (event.altKey) {
       return;
@@ -56,22 +72,37 @@ exports.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
+          (0, react_dom_1.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_js_1.ListItem,
     {
       as: 'div',
@@ -79,24 +110,21 @@ exports.MenuItem = React.forwardRef((props, ref) => {
       size: size,
       active: isSelected,
       disabled: disabled,
-      onClick: () => !disabled && onClick?.(value),
-      ref: refs,
+      ref: (0, index_js_1.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(
@@ -124,38 +152,32 @@ exports.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(
+        index_js_1.Portal,
+        null,
         React.createElement(
-          index_js_1.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_js_1.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_js_1.Menu,
-                { ref: subMenuRef },
-                subMenuItems,
-              ),
-            ),
-          },
-          listItem,
+              }),
+            },
+            subMenuItems,
+          ),
         ),
-      );
+      ),
+  );
 });
 exports.default = exports.MenuItem;

package/cjs/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.
@@ -110,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`.