@itwin/itwinui-react 3.13.3 → 3.14.0

package/DEV-esm/core/ComboBox/ComboBoxMenu.js

@@ -1,88 +1,130 @@
 import * as React from 'react';
 import cx from 'classnames';
-import { useSafeContext, useMergedRefs, Portal, Box, useVirtualScroll, ShadowRoot, useLayoutEffect } from '../../utils/index.js';
+import {
+  useSafeContext,
+  useMergedRefs,
+  Portal,
+  Box,
+  useVirtualScroll,
+  ShadowRoot,
+  useLayoutEffect,
+} from '../../utils/index.js';
 import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers.js';
 import { List } from '../List/List.js';
-let VirtualizedComboBoxMenu = (props)=>{
-    let { children, ...rest } = props;
-    let { filteredOptions, getMenuItem, focusedIndex } = useSafeContext(ComboBoxStateContext);
-    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;
-        return Number(currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex);
-    }, [
-        focusedIndex,
-        menuRef
-    ]);
-    let { virtualizer, css: virtualizerCss } = useVirtualScroll({
-        count: filteredOptions.length || 1,
-        getScrollElement: ()=>menuRef.current,
-        estimateSize: ()=>mostlySubLabeled ? 48 : 36,
-        gap: -1
-    });
-    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,
-            'data-iui-virtualizer': 'item',
-            style: {
-                width: '100%',
-                transform: `translateY(${virtualItem.start}px)`
-            }
-        });
-    }, [
-        filteredOptions,
-        getMenuItem,
-        children,
-        virtualizer.measureElement
-    ]);
-    return React.createElement(React.Fragment, null, React.createElement(ShadowRoot, {
-        css: virtualizerCss
-    }, React.createElement(Box, {
-        as: "div",
-        "data-iui-virtualizer": "root",
-        ...rest,
+let VirtualizedComboBoxMenu = (props) => {
+  let { children, ...rest } = props;
+  let { filteredOptions, getMenuItem, focusedIndex } =
+    useSafeContext(ComboBoxStateContext);
+  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;
+    return Number(
+      currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex,
+    );
+  }, [focusedIndex, menuRef]);
+  let { virtualizer, css: virtualizerCss } = useVirtualScroll({
+    count: filteredOptions.length || 1,
+    getScrollElement: () => menuRef.current,
+    estimateSize: () => (mostlySubLabeled ? 48 : 36),
+    gap: -1,
+  });
+  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,
+        'data-iui-virtualizer': 'item',
         style: {
+          width: '100%',
+          transform: `translateY(${virtualItem.start}px)`,
+        },
+      });
+    },
+    [filteredOptions, getMenuItem, children, virtualizer.measureElement],
+  );
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      ShadowRoot,
+      {
+        css: virtualizerCss,
+      },
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          'data-iui-virtualizer': 'root',
+          ...rest,
+          style: {
             minBlockSize: virtualizer.getTotalSize(),
-            ...props.style
-        }
-    }, React.createElement("slot", null))), React.createElement(React.Fragment, null, virtualizer.getVirtualItems().map((virtualItem)=>virtualItemRenderer(virtualItem))));
+            ...props.style,
+          },
+        },
+        React.createElement('slot', null),
+      ),
+    ),
+    React.createElement(
+      React.Fragment,
+      null,
+      virtualizer
+        .getVirtualItems()
+        .map((virtualItem) => virtualItemRenderer(virtualItem)),
+    ),
+  );
 };
-export const ComboBoxMenu = React.forwardRef((props, forwardedRef)=>{
-    let { className, children, style, ...rest } = props;
-    let { id, enableVirtualization, popover } = useSafeContext(ComboBoxStateContext);
-    let { menuRef } = useSafeContext(ComboBoxRefsContext);
-    let refs = useMergedRefs(popover.refs.setFloating, forwardedRef, menuRef);
-    return popover.open && React.createElement(Portal, {
-        portal: true
-    }, React.createElement(List, {
-        as: "div",
-        className: cx('iui-menu', className),
-        id: `${id}-list`,
-        role: "listbox",
-        ref: refs,
-        ...popover.getFloatingProps({
-            style: enableVirtualization ? {
-                maxInlineSize: 0,
-                ...style
-            } : style,
-            ...rest
-        })
-    }, enableVirtualization ? React.createElement(VirtualizedComboBoxMenu, null, children) : children));
+export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
+  let { className, children, style, ...rest } = props;
+  let { id, enableVirtualization, popover } =
+    useSafeContext(ComboBoxStateContext);
+  let { menuRef } = useSafeContext(ComboBoxRefsContext);
+  let refs = useMergedRefs(popover.refs.setFloating, forwardedRef, menuRef);
+  return (
+    popover.open &&
+    React.createElement(
+      Portal,
+      {
+        portal: true,
+      },
+      React.createElement(
+        List,
+        {
+          as: 'div',
+          className: cx('iui-menu', className),
+          id: `${id}-list`,
+          role: 'listbox',
+          ref: refs,
+          ...popover.getFloatingProps({
+            style: enableVirtualization
+              ? {
+                  maxInlineSize: 0,
+                  ...style,
+                }
+              : style,
+            ...rest,
+          }),
+        },
+        enableVirtualization
+          ? React.createElement(VirtualizedComboBoxMenu, null, children)
+          : children,
+      ),
+    )
+  );
 });
 ComboBoxMenu.displayName = 'ComboBoxMenu';

package/DEV-esm/core/ComboBox/ComboBoxMenuItem.js

@@ -1,37 +1,80 @@
 import * as React from 'react';
-import { useSafeContext, useMergedRefs, SvgCheckmark } from '../../utils/index.js';
+import {
+  useSafeContext,
+  useMergedRefs,
+  SvgCheckmark,
+} from '../../utils/index.js';
 import { ComboBoxStateContext } from './helpers.js';
 import { ListItem } from '../List/ListItem.js';
-export const ComboBoxMenuItem = React.memo(React.forwardRef((props, forwardedRef)=>{
-    let { children, isSelected, disabled, value, onClick, sublabel, size = sublabel ? 'large' : 'default', startIcon, endIcon, role = 'option', index, ...rest } = props;
-    let { focusedIndex, enableVirtualization } = useSafeContext(ComboBoxStateContext);
-    let focusRef = (el)=>{
-        if (!enableVirtualization && focusedIndex === index) el?.scrollIntoView({
-            block: 'nearest'
+export const ComboBoxMenuItem = React.memo(
+  React.forwardRef((props, forwardedRef) => {
+    let {
+      children,
+      isSelected,
+      disabled,
+      value,
+      onClick,
+      sublabel,
+      size = sublabel ? 'large' : 'default',
+      startIcon,
+      endIcon,
+      role = 'option',
+      index,
+      ...rest
+    } = props;
+    let { focusedIndex, enableVirtualization } =
+      useSafeContext(ComboBoxStateContext);
+    let focusRef = (el) => {
+      if (!enableVirtualization && focusedIndex === index)
+        el?.scrollIntoView({
+          block: 'nearest',
         });
     };
     let refs = useMergedRefs(forwardedRef, focusRef);
-    return React.createElement(ListItem, {
-        as: "div",
+    return React.createElement(
+      ListItem,
+      {
+        as: 'div',
         actionable: true,
         size: size,
         active: isSelected,
         disabled: disabled,
         focused: focusedIndex === index,
         ref: refs,
-        onClick: ()=>onClick?.(value),
+        onClick: () => onClick?.(value),
         role: role,
         tabIndex: 'presentation' === role ? void 0 : -1,
-        "aria-selected": isSelected,
-        "aria-disabled": disabled,
-        "data-iui-index": index,
-        ...rest
-    }, startIcon && React.createElement(ListItem.Icon, {
-        as: "span",
-        "aria-hidden": true
-    }, startIcon), React.createElement(ListItem.Content, null, children, sublabel && React.createElement(ListItem.Description, null, sublabel)), endIcon || isSelected && React.createElement(ListItem.Icon, {
-        as: "span",
-        "aria-hidden": true
-    }, endIcon ?? React.createElement(SvgCheckmark, null)));
-}));
+        'aria-selected': isSelected,
+        'aria-disabled': disabled,
+        'data-iui-index': index,
+        ...rest,
+      },
+      startIcon &&
+        React.createElement(
+          ListItem.Icon,
+          {
+            as: 'span',
+            'aria-hidden': true,
+          },
+          startIcon,
+        ),
+      React.createElement(
+        ListItem.Content,
+        null,
+        children,
+        sublabel && React.createElement(ListItem.Description, null, sublabel),
+      ),
+      endIcon ||
+        (isSelected &&
+          React.createElement(
+            ListItem.Icon,
+            {
+              as: 'span',
+              'aria-hidden': true,
+            },
+            endIcon ?? React.createElement(SvgCheckmark, null),
+          )),
+    );
+  }),
+);
 ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

package/DEV-esm/core/ComboBox/ComboBoxMultipleContainer.js

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