@itwin/itwinui-react 3.12.2 → 3.13.0

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -15,8 +15,8 @@ const _index = require('../../utils/index.js');
 const _ComboBoxMultipleContainer = require('./ComboBoxMultipleContainer.js');
 const _helpers = require('./helpers.js');
 const ComboBoxInput = _react.forwardRef((props, forwardedRef) => {
-  const { selectTags, size, style, ...rest } = props;
-  const {
+  let { selectTags, size, style, ...rest } = props;
+  let {
     isOpen,
     id,
     focusedIndex,
@@ -28,37 +28,28 @@ const ComboBoxInput = _react.forwardRef((props, forwardedRef) => {
     show,
     hide,
   } = (0, _index.useSafeContext)(_helpers.ComboBoxStateContext);
-  const { inputRef, menuRef, optionsExtraInfo } = (0, _index.useSafeContext)(
+  let { inputRef, menuRef, optionsExtraInfo } = (0, _index.useSafeContext)(
     _helpers.ComboBoxRefsContext,
   );
-  const refs = (0, _index.useMergedRefs)(
+  let refs = (0, _index.useMergedRefs)(
     inputRef,
     popover.refs.setReference,
     forwardedRef,
   );
-  const focusedIndexRef = (0, _index.useLatestRef)(focusedIndex ?? -1);
-  const getIdFromIndex = (index) => {
-    return (
-      menuRef.current?.querySelector(`[data-iui-index="${index}"]`)?.id ?? ''
-    );
-  };
-  const handleKeyDown = _react.useCallback(
+  let focusedIndexRef = (0, _index.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),
@@ -69,77 +60,61 @@ 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;
@@ -157,19 +132,16 @@ 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] = (0,
+  let [tagContainerWidthRef, tagContainerWidth] = (0,
   _index.useContainerWidth)();
   return _react.createElement(
     _react.Fragment,
@@ -178,11 +150,11 @@ 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',
@@ -193,7 +165,7 @@ 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,
@@ -220,4 +192,3 @@ const ComboBoxInput = _react.forwardRef((props, forwardedRef) => {
       : null,
   );
 });
-ComboBoxInput.displayName = 'ComboBoxInput';

package/cjs/core/ComboBox/ComboBoxInputContainer.js

@@ -14,15 +14,15 @@ const _StatusMessage = require('../StatusMessage/StatusMessage.js');
 const _index = require('../../utils/index.js');
 const _helpers = require('./helpers.js');
 const ComboBoxInputContainer = _react.forwardRef((props, forwardedRef) => {
-  const { className, status, message, children, ...rest } = props;
-  const { id } = (0, _index.useSafeContext)(_helpers.ComboBoxStateContext);
+  let { className, status, message, children, ...rest } = props;
+  let { id } = (0, _index.useSafeContext)(_helpers.ComboBoxStateContext);
   return _react.createElement(
     _index.InputContainer,
     {
       className: className,
       status: status,
       statusMessage:
-        typeof message === 'string'
+        'string' == typeof message
           ? _react.createElement(
               _StatusMessage.StatusMessage,
               {
@@ -41,4 +41,3 @@ const ComboBoxInputContainer = _react.forwardRef((props, forwardedRef) => {
     _react.createElement(_index.InputWithIcon, null, children),
   );
 });
-ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -16,58 +16,91 @@ const _index = require('../../utils/index.js');
 const _helpers = require('./helpers.js');
 const _List = require('../List/List.js');
 const VirtualizedComboBoxMenu = (props) => {
-  const { children, ...rest } = props;
-  const { filteredOptions, getMenuItem, focusedIndex } = (0,
+  let { children, ...rest } = props;
+  let { filteredOptions, getMenuItem, focusedIndex } = (0,
   _index.useSafeContext)(_helpers.ComboBoxStateContext);
-  const { menuRef } = (0, _index.useSafeContext)(_helpers.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 } = (0, _index.useSafeContext)(_helpers.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 } = (0,
-  _index.useVirtualization)({
-    itemsLength: filteredOptions.length || 1,
-    itemRenderer: virtualItemRenderer,
-    scrollToIndex: focusedVisibleIndex,
+  let virtualizer = (0, _index.useVirtualScroll)({
+    count: filteredOptions.length || 1,
+    getScrollElement: () => menuRef.current,
+    estimateSize: () => (mostlySubLabeled ? 48 : 36),
+    gap: -1,
   });
-  return _react.createElement(
-    _index.Box,
-    {
-      as: 'div',
-      ...outerProps,
-      ...rest,
+  (0, _index.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,
+      _index.ShadowRoot,
+      null,
+      _react.createElement(
+        _index.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)),
     ),
   );
 };
 const ComboBoxMenu = _react.forwardRef((props, forwardedRef) => {
-  const { className, children, style, ...rest } = props;
-  const { id, enableVirtualization, popover } = (0, _index.useSafeContext)(
+  let { className, children, style, ...rest } = props;
+  let { id, enableVirtualization, popover } = (0, _index.useSafeContext)(
     _helpers.ComboBoxStateContext,
   );
-  const { menuRef } = (0, _index.useSafeContext)(_helpers.ComboBoxRefsContext);
-  const refs = (0, _index.useMergedRefs)(
+  let { menuRef } = (0, _index.useSafeContext)(_helpers.ComboBoxRefsContext);
+  let refs = (0, _index.useMergedRefs)(
     popover.refs.setFloating,
     forwardedRef,
     menuRef,
@@ -88,20 +121,19 @@ 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/cjs/core/ComboBox/ComboBoxMenuItem.js

@@ -15,31 +15,30 @@ const _helpers = require('./helpers.js');
 const _ListItem = require('../List/ListItem.js');
 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 } = (0, _index.useSafeContext)(
+    let { focusedIndex, enableVirtualization } = (0, _index.useSafeContext)(
       _helpers.ComboBoxStateContext,
     );
-    const focusRef = (el) => {
-      if (!enableVirtualization && focusedIndex === index) {
+    let focusRef = (el) => {
+      if (!enableVirtualization && focusedIndex === index)
         el?.scrollIntoView({
           block: 'nearest',
         });
-      }
     };
-    const refs = (0, _index.useMergedRefs)(forwardedRef, focusRef);
+    let refs = (0, _index.useMergedRefs)(forwardedRef, focusRef);
     return _react.createElement(
       _ListItem.ListItem,
       {
@@ -52,7 +51,7 @@ 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,
@@ -87,4 +86,3 @@ const ComboBoxMenuItem = _react.memo(
     );
   }),
 );
-ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

package/cjs/core/ComboBox/ComboBoxMultipleContainer.js

@@ -12,11 +12,10 @@ const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildc
 const _react = _interop_require_wildcard._(require('react'));
 const _SelectTagContainer = require('../Select/SelectTagContainer.js');
 const ComboBoxMultipleContainer = _react.forwardRef((props, ref) => {
-  const { selectedItems = [], ...rest } = props;
+  let { selectedItems = [], ...rest } = props;
   return _react.createElement(_SelectTagContainer.SelectTagContainer, {
     ref: ref,
     tags: selectedItems,
     ...rest,
   });
 });
-ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer';

package/cjs/core/ComboBox/helpers.js

@@ -19,7 +19,5 @@ _export(exports, {
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
-const ComboBoxRefsContext = _react.createContext(undefined);
-ComboBoxRefsContext.displayName = 'ComboBoxRefsContext';
-const ComboBoxStateContext = _react.createContext(undefined);
-ComboBoxStateContext.displayName = 'ComboBoxStateContext';
+const ComboBoxRefsContext = _react.createContext(void 0);
+const ComboBoxStateContext = _react.createContext(void 0);