@itwin/itwinui-react 3.12.2 → 3.13.0

package/esm/core/ComboBox/ComboBoxInput.js

@@ -10,8 +10,8 @@ import {
 import { ComboBoxMultipleContainer } from './ComboBoxMultipleContainer.js';
 import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers.js';
 export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
-  const { selectTags, size, style, ...rest } = props;
-  const {
+  let { selectTags, size, style, ...rest } = props;
+  let {
     isOpen,
     id,
     focusedIndex,
@@ -23,32 +23,23 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     show,
     hide,
   } = useSafeContext(ComboBoxStateContext);
-  const { inputRef, menuRef, optionsExtraInfo } =
+  let { inputRef, menuRef, optionsExtraInfo } =
     useSafeContext(ComboBoxRefsContext);
-  const refs = useMergedRefs(inputRef, popover.refs.setReference, forwardedRef);
-  const focusedIndexRef = useLatestRef(focusedIndex ?? -1);
-  const getIdFromIndex = (index) => {
-    return (
-      menuRef.current?.querySelector(`[data-iui-index="${index}"]`)?.id ?? ''
-    );
-  };
-  const handleKeyDown = React.useCallback(
+  let refs = useMergedRefs(inputRef, popover.refs.setReference, forwardedRef);
+  let focusedIndexRef = useLatestRef(focusedIndex ?? -1);
+  let getIdFromIndex = (index) =>
+    menuRef.current?.querySelector(`[data-iui-index="${index}"]`)?.id ?? '';
+  let handleKeyDown = React.useCallback(
     (event) => {
-      const length = Object.keys(optionsExtraInfo).length ?? 0;
-      if (event.altKey) {
-        return;
-      }
+      let length = Object.keys(optionsExtraInfo).length ?? 0;
+      if (event.altKey) return;
       switch (event.key) {
         case 'ArrowDown': {
           event.preventDefault();
-          if (!isOpen) {
-            return show();
-          }
-          if (length === 0) {
-            return;
-          }
-          if (focusedIndexRef.current === -1) {
-            const currentElement =
+          if (!isOpen) return show();
+          if (0 === length) return;
+          if (-1 === focusedIndexRef.current) {
+            let currentElement =
               menuRef.current?.querySelector('[data-iui-index]');
             return setFocusedIndex(
               Number(currentElement?.getAttribute('data-iui-index') ?? 0),
@@ -59,77 +50,61 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
             !menuRef.current?.querySelector(
               `[data-iui-index="${focusedIndexRef.current}"]`,
             )?.nextElementSibling
-          ) {
+          )
             return;
-          }
           let nextIndex = focusedIndexRef.current;
           do {
-            const currentElement = menuRef.current?.querySelector(
+            let currentElement = menuRef.current?.querySelector(
               `[data-iui-index="${nextIndex}"]`,
             );
-            const nextElement =
+            let nextElement =
               currentElement?.nextElementSibling ??
               menuRef.current?.querySelector('[data-iui-index]');
             nextIndex = Number(nextElement?.getAttribute('data-iui-index'));
-            if (nextElement) {
-              return setFocusedIndex(nextIndex);
-            }
+            if (nextElement) return setFocusedIndex(nextIndex);
           } while (nextIndex !== focusedIndexRef.current);
           break;
         }
         case 'ArrowUp': {
           event.preventDefault();
-          if (!isOpen) {
-            return show();
-          }
-          if (length === 0) {
-            return;
-          }
+          if (!isOpen) return show();
+          if (0 === length) return;
           if (
             enableVirtualization &&
             !menuRef.current?.querySelector(
               `[data-iui-index="${focusedIndexRef.current}"]`,
             )?.previousElementSibling
-          ) {
+          )
             return;
-          }
-          if (focusedIndexRef.current === -1) {
+          if (-1 === focusedIndexRef.current)
             return setFocusedIndex(
               Object.values(optionsExtraInfo)?.[length - 1].__originalIndex ??
                 -1,
             );
-          }
           let prevIndex = focusedIndexRef.current;
           do {
-            const currentElement = menuRef.current?.querySelector(
+            let currentElement = menuRef.current?.querySelector(
               `[data-iui-index="${prevIndex}"]`,
             );
-            const prevElement =
+            let prevElement =
               currentElement?.previousElementSibling ??
               menuRef.current?.querySelector('[data-iui-index]:last-of-type');
             prevIndex = Number(prevElement?.getAttribute('data-iui-index'));
-            if (prevElement) {
-              return setFocusedIndex(prevIndex);
-            }
+            if (prevElement) return setFocusedIndex(prevIndex);
           } while (prevIndex !== focusedIndexRef.current);
           break;
         }
-        case 'Enter': {
+        case 'Enter':
           event.preventDefault();
           if (isOpen) {
-            if (focusedIndexRef.current > -1) {
+            if (focusedIndexRef.current > -1)
               onClickHandler?.(focusedIndexRef.current);
-            }
-          } else {
-            show();
-          }
+          } else show();
           break;
-        }
-        case 'Escape': {
+        case 'Escape':
           event.preventDefault();
           hide();
           break;
-        }
         case 'Tab':
           hide();
           break;
@@ -147,19 +122,16 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
       hide,
     ],
   );
-  const wasOpenBeforeClick = React.useRef(false);
-  const handlePointerDown = React.useCallback(() => {
+  let wasOpenBeforeClick = React.useRef(false);
+  let handlePointerDown = React.useCallback(() => {
     wasOpenBeforeClick.current = isOpen;
   }, [isOpen]);
-  const handleClick = React.useCallback(() => {
-    if (!wasOpenBeforeClick.current) {
-      show();
-    } else {
-      hide();
-    }
+  let handleClick = React.useCallback(() => {
+    if (wasOpenBeforeClick.current) hide();
+    else show();
     wasOpenBeforeClick.current = false;
   }, [hide, show]);
-  const [tagContainerWidthRef, tagContainerWidth] = useContainerWidth();
+  let [tagContainerWidthRef, tagContainerWidth] = useContainerWidth();
   return React.createElement(
     React.Fragment,
     null,
@@ -167,11 +139,11 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
       ref: refs,
       'aria-expanded': isOpen,
       'aria-activedescendant':
-        isOpen && focusedIndex != undefined && focusedIndex > -1
+        isOpen && void 0 != focusedIndex && focusedIndex > -1
           ? getIdFromIndex(focusedIndex)
-          : undefined,
+          : void 0,
       role: 'combobox',
-      'aria-controls': isOpen ? `${id}-list` : undefined,
+      'aria-controls': isOpen ? `${id}-list` : void 0,
       'aria-autocomplete': 'list',
       spellCheck: false,
       autoCapitalize: 'none',
@@ -182,7 +154,7 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         }),
         ...style,
       },
-      'aria-describedby': multiple ? `${id}-selected-live` : undefined,
+      'aria-describedby': multiple ? `${id}-selected-live` : void 0,
       size: size,
       ...popover.getReferenceProps({
         ...rest,
@@ -203,4 +175,3 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
       : null,
   );
 });
-ComboBoxInput.displayName = 'ComboBoxInput';

package/esm/core/ComboBox/ComboBoxInputContainer.js

@@ -8,15 +8,15 @@ import {
 import { ComboBoxStateContext } from './helpers.js';
 export const ComboBoxInputContainer = React.forwardRef(
   (props, forwardedRef) => {
-    const { className, status, message, children, ...rest } = props;
-    const { id } = useSafeContext(ComboBoxStateContext);
+    let { className, status, message, children, ...rest } = props;
+    let { id } = useSafeContext(ComboBoxStateContext);
     return React.createElement(
       InputContainer,
       {
         className: className,
         status: status,
         statusMessage:
-          typeof message === 'string'
+          'string' == typeof message
             ? React.createElement(
                 StatusMessage,
                 {
@@ -36,4 +36,3 @@ export const ComboBoxInputContainer = React.forwardRef(
     );
   },
 );
-ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';

package/esm/core/ComboBox/ComboBoxMenu.js

@@ -3,63 +3,99 @@ import cx from 'classnames';
 import {
   useSafeContext,
   useMergedRefs,
-  useVirtualization,
   Portal,
   Box,
+  useVirtualScroll,
+  ShadowRoot,
+  useLayoutEffect,
 } from '../../utils/index.js';
 import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers.js';
 import { List } from '../List/List.js';
-const VirtualizedComboBoxMenu = (props) => {
-  const { children, ...rest } = props;
-  const { filteredOptions, getMenuItem, focusedIndex } =
+let VirtualizedComboBoxMenu = (props) => {
+  let { children, ...rest } = props;
+  let { filteredOptions, getMenuItem, focusedIndex } =
     useSafeContext(ComboBoxStateContext);
-  const { menuRef } = useSafeContext(ComboBoxRefsContext);
-  const virtualItemRenderer = React.useCallback(
-    (index) =>
-      filteredOptions.length > 0
-        ? getMenuItem(filteredOptions[index], index)
-        : children,
-    [filteredOptions, getMenuItem, children],
-  );
-  const focusedVisibleIndex = React.useMemo(() => {
-    const currentElement = menuRef.current?.querySelector(
+  let { menuRef } = useSafeContext(ComboBoxRefsContext);
+  let mostlySubLabeled = React.useMemo(() => {
+    let numberOfSubLabels = 0;
+    for (let i = 0; i < Math.min(5, filteredOptions.length); i++)
+      if (filteredOptions[i].sublabel) numberOfSubLabels++;
+    return numberOfSubLabels >= Math.min(3, filteredOptions.length);
+  }, [filteredOptions]);
+  let focusedVisibleIndex = React.useMemo(() => {
+    let currentElement = menuRef.current?.querySelector(
       `[data-iui-index="${focusedIndex}"]`,
     );
-    if (!currentElement) {
-      return focusedIndex;
-    }
+    if (!currentElement) return focusedIndex;
     return Number(
       currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex,
     );
   }, [focusedIndex, menuRef]);
-  const { outerProps, innerProps, visibleChildren } = useVirtualization({
-    itemsLength: filteredOptions.length || 1,
-    itemRenderer: virtualItemRenderer,
-    scrollToIndex: focusedVisibleIndex,
+  let virtualizer = useVirtualScroll({
+    count: filteredOptions.length || 1,
+    getScrollElement: () => menuRef.current,
+    estimateSize: () => (mostlySubLabeled ? 48 : 36),
+    gap: -1,
   });
-  return React.createElement(
-    Box,
-    {
-      as: 'div',
-      ...outerProps,
-      ...rest,
+  useLayoutEffect(() => {
+    virtualizer.scrollToIndex(focusedVisibleIndex);
+  }, [virtualizer, focusedVisibleIndex]);
+  let virtualItemRenderer = React.useCallback(
+    (virtualItem) => {
+      let menuItem =
+        filteredOptions.length > 0
+          ? getMenuItem(filteredOptions[virtualItem.index], virtualItem.index)
+          : children;
+      return React.cloneElement(menuItem, {
+        key: virtualItem.key,
+        ref: virtualizer.measureElement,
+        style: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          transform: `translateY(${virtualItem.start}px)`,
+        },
+      });
     },
+    [filteredOptions, getMenuItem, children, virtualizer.measureElement],
+  );
+  return React.createElement(
+    React.Fragment,
+    null,
     React.createElement(
-      'div',
-      {
-        ...innerProps,
-        ref: innerProps.ref,
-      },
-      visibleChildren,
+      ShadowRoot,
+      null,
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...rest,
+          style: {
+            minBlockSize: virtualizer.getTotalSize(),
+            minInlineSize: '100%',
+            contain: 'strict',
+            ...props.style,
+          },
+        },
+        React.createElement('slot', null),
+      ),
+    ),
+    React.createElement(
+      React.Fragment,
+      null,
+      virtualizer
+        .getVirtualItems()
+        .map((virtualItem) => virtualItemRenderer(virtualItem)),
     ),
   );
 };
 export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
-  const { className, children, style, ...rest } = props;
-  const { id, enableVirtualization, popover } =
+  let { className, children, style, ...rest } = props;
+  let { id, enableVirtualization, popover } =
     useSafeContext(ComboBoxStateContext);
-  const { menuRef } = useSafeContext(ComboBoxRefsContext);
-  const refs = useMergedRefs(popover.refs.setFloating, forwardedRef, menuRef);
+  let { menuRef } = useSafeContext(ComboBoxRefsContext);
+  let refs = useMergedRefs(popover.refs.setFloating, forwardedRef, menuRef);
   return (
     popover.open &&
     React.createElement(
@@ -76,20 +112,19 @@ export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
           role: 'listbox',
           ref: refs,
           ...popover.getFloatingProps({
-            style: !enableVirtualization
-              ? style
-              : {
+            style: enableVirtualization
+              ? {
                   maxInlineSize: 0,
                   ...style,
-                },
+                }
+              : style,
             ...rest,
           }),
         },
-        !enableVirtualization
-          ? children
-          : React.createElement(VirtualizedComboBoxMenu, null, children),
+        enableVirtualization
+          ? React.createElement(VirtualizedComboBoxMenu, null, children)
+          : children,
       ),
     )
   );
 });
-ComboBoxMenu.displayName = 'ComboBoxMenu';

package/esm/core/ComboBox/ComboBoxMenuItem.js

@@ -8,30 +8,29 @@ import { ComboBoxStateContext } from './helpers.js';
 import { ListItem } from '../List/ListItem.js';
 export const ComboBoxMenuItem = React.memo(
   React.forwardRef((props, forwardedRef) => {
-    const {
+    let {
       children,
       isSelected,
       disabled,
       value,
       onClick,
       sublabel,
-      size = !!sublabel ? 'large' : 'default',
+      size = sublabel ? 'large' : 'default',
       startIcon,
       endIcon,
       role = 'option',
       index,
       ...rest
     } = props;
-    const { focusedIndex, enableVirtualization } =
+    let { focusedIndex, enableVirtualization } =
       useSafeContext(ComboBoxStateContext);
-    const focusRef = (el) => {
-      if (!enableVirtualization && focusedIndex === index) {
+    let focusRef = (el) => {
+      if (!enableVirtualization && focusedIndex === index)
         el?.scrollIntoView({
           block: 'nearest',
         });
-      }
     };
-    const refs = useMergedRefs(forwardedRef, focusRef);
+    let refs = useMergedRefs(forwardedRef, focusRef);
     return React.createElement(
       ListItem,
       {
@@ -44,7 +43,7 @@ export const ComboBoxMenuItem = React.memo(
         ref: refs,
         onClick: () => onClick?.(value),
         role: role,
-        tabIndex: role === 'presentation' ? undefined : -1,
+        tabIndex: 'presentation' === role ? void 0 : -1,
         'aria-selected': isSelected,
         'aria-disabled': disabled,
         'data-iui-index': index,
@@ -78,4 +77,3 @@ export const ComboBoxMenuItem = React.memo(
     );
   }),
 );
-ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

package/esm/core/ComboBox/ComboBoxMultipleContainer.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { SelectTagContainer } from '../Select/SelectTagContainer.js';
 export const ComboBoxMultipleContainer = React.forwardRef((props, ref) => {
-  const { selectedItems = [], ...rest } = props;
+  let { selectedItems = [], ...rest } = props;
   return React.createElement(SelectTagContainer, {
     ref: ref,
     tags: selectedItems,
     ...rest,
   });
 });
-ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer';

package/esm/core/ComboBox/helpers.js

@@ -1,5 +1,3 @@
 import * as React from 'react';
-export const ComboBoxRefsContext = React.createContext(undefined);
-ComboBoxRefsContext.displayName = 'ComboBoxRefsContext';
-export const ComboBoxStateContext = React.createContext(undefined);
-ComboBoxStateContext.displayName = 'ComboBoxStateContext';
+export const ComboBoxRefsContext = React.createContext(void 0);
+export const ComboBoxStateContext = React.createContext(void 0);