@itwin/itwinui-react 3.0.4 → 3.0.5

package/esm/core/ComboBox/ComboBoxEndIcon.js

@@ -7,23 +7,10 @@ import * as React from 'react';
 import { SvgCaretDownSmall } from '../utils/index.js';
 import { Icon } from '../Icon/Icon.js';
 export const ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
-  const { className, children, disabled, isOpen, ...rest } = props;
-  return React.createElement(
-    Icon,
-    {
-      as: 'span',
-      ref: forwardedRef,
-      className: cx(
-        'iui-end-icon',
-        {
-          'iui-disabled': disabled,
-          'iui-open': isOpen,
-        },
-        className,
-      ),
-      ...rest,
-    },
-    children ?? React.createElement(SvgCaretDownSmall, { 'aria-hidden': true }),
-  );
+    const { className, children, disabled, isOpen, ...rest } = props;
+    return (React.createElement(Icon, { as: 'span', ref: forwardedRef, className: cx('iui-end-icon', {
+            'iui-disabled': disabled,
+            'iui-open': isOpen,
+        }, className), ...rest }, children ?? React.createElement(SvgCaretDownSmall, { "aria-hidden": true })));
 });
 ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';

package/esm/core/ComboBox/ComboBoxInput.js

@@ -4,211 +4,139 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
-import {
-  useSafeContext,
-  useMergedRefs,
-  useContainerWidth,
-  mergeEventHandlers,
-} from '../utils/index.js';
+import { useSafeContext, useMergedRefs, useContainerWidth, mergeEventHandlers, } from '../utils/index.js';
 import { ComboBoxMultipleContainer } from './ComboBoxMultipleContainer.js';
-import {
-  ComboBoxStateContext,
-  ComboBoxActionContext,
-  ComboBoxRefsContext,
-} from './helpers.js';
+import { ComboBoxStateContext, ComboBoxActionContext, ComboBoxRefsContext, } from './helpers.js';
 export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
-  const {
-    onKeyDown: onKeyDownProp,
-    onClick: onClickProp,
-    selectTags,
-    size,
-    ...rest
-  } = props;
-  const {
-    isOpen,
-    id,
-    focusedIndex,
-    enableVirtualization,
-    multiple,
-    onClickHandler,
-    popover,
-    show,
-    hide,
-  } = useSafeContext(ComboBoxStateContext);
-  const dispatch = useSafeContext(ComboBoxActionContext);
-  const { inputRef, menuRef, optionsExtraInfoRef } =
-    useSafeContext(ComboBoxRefsContext);
-  const refs = useMergedRefs(inputRef, popover.refs.setReference, forwardedRef);
-  const focusedIndexRef = React.useRef(focusedIndex ?? -1);
-  React.useEffect(() => {
-    focusedIndexRef.current = focusedIndex ?? -1;
-  }, [focusedIndex]);
-  const getIdFromIndex = (index) => {
-    return (
-      menuRef.current?.querySelector(`[data-iui-index="${index}"]`)?.id ?? ''
-    );
-  };
-  const handleKeyDown = React.useCallback(
-    (event) => {
-      const length = Object.keys(optionsExtraInfoRef.current).length ?? 0;
-      if (event.altKey) {
-        return;
-      }
-      switch (event.key) {
-        case 'ArrowDown': {
-          event.preventDefault();
-          if (!isOpen) {
-            return show();
-          }
-          if (length === 0) {
+    const { onKeyDown: onKeyDownProp, onClick: onClickProp, selectTags, size, ...rest } = props;
+    const { isOpen, id, focusedIndex, enableVirtualization, multiple, onClickHandler, popover, show, hide, } = useSafeContext(ComboBoxStateContext);
+    const dispatch = useSafeContext(ComboBoxActionContext);
+    const { inputRef, menuRef, optionsExtraInfoRef } = useSafeContext(ComboBoxRefsContext);
+    const refs = useMergedRefs(inputRef, popover.refs.setReference, forwardedRef);
+    const focusedIndexRef = React.useRef(focusedIndex ?? -1);
+    React.useEffect(() => {
+        focusedIndexRef.current = focusedIndex ?? -1;
+    }, [focusedIndex]);
+    const getIdFromIndex = (index) => {
+        return (menuRef.current?.querySelector(`[data-iui-index="${index}"]`)?.id ?? '');
+    };
+    const handleKeyDown = React.useCallback((event) => {
+        const length = Object.keys(optionsExtraInfoRef.current).length ?? 0;
+        if (event.altKey) {
             return;
-          }
-          if (focusedIndexRef.current === -1) {
-            const currentElement =
-              menuRef.current?.querySelector('[data-iui-index]');
-            return dispatch({
-              type: 'focus',
-              value: Number(
-                currentElement?.getAttribute('data-iui-index') ?? 0,
-              ),
-            });
-          }
-          // If virtualization is enabled, dont let round scrolling
-          if (
-            enableVirtualization &&
-            !menuRef.current?.querySelector(
-              `[data-iui-index="${focusedIndexRef.current}"]`,
-            )?.nextElementSibling
-          ) {
-            return;
-          }
-          let nextIndex = focusedIndexRef.current;
-          do {
-            const currentElement = menuRef.current?.querySelector(
-              `[data-iui-index="${nextIndex}"]`,
-            );
-            const nextElement =
-              currentElement?.nextElementSibling ??
-              menuRef.current?.querySelector('[data-iui-index]');
-            nextIndex = Number(nextElement?.getAttribute('data-iui-index'));
-            if (nextElement) {
-              return dispatch({ type: 'focus', value: nextIndex });
-            }
-          } while (nextIndex !== focusedIndexRef.current);
-          break;
         }
-        case 'ArrowUp': {
-          event.preventDefault();
-          if (!isOpen) {
-            return show();
-          }
-          if (length === 0) {
-            return;
-          }
-          // If virtualization is enabled, dont let round scrolling
-          if (
-            enableVirtualization &&
-            !menuRef.current?.querySelector(
-              `[data-iui-index="${focusedIndexRef.current}"]`,
-            )?.previousElementSibling
-          ) {
-            return;
-          }
-          if (focusedIndexRef.current === -1) {
-            return dispatch({
-              type: 'focus',
-              value:
-                Object.values(optionsExtraInfoRef.current)?.[length - 1]
-                  .__originalIndex ?? -1,
-            });
-          }
-          let prevIndex = focusedIndexRef.current;
-          do {
-            const currentElement = menuRef.current?.querySelector(
-              `[data-iui-index="${prevIndex}"]`,
-            );
-            const prevElement =
-              currentElement?.previousElementSibling ??
-              menuRef.current?.querySelector('[data-iui-index]:last-of-type');
-            prevIndex = Number(prevElement?.getAttribute('data-iui-index'));
-            if (prevElement) {
-              return dispatch({ type: 'focus', value: prevIndex });
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                if (!isOpen) {
+                    return show();
+                }
+                if (length === 0) {
+                    return;
+                }
+                if (focusedIndexRef.current === -1) {
+                    const currentElement = menuRef.current?.querySelector('[data-iui-index]');
+                    return dispatch({
+                        type: 'focus',
+                        value: Number(currentElement?.getAttribute('data-iui-index') ?? 0),
+                    });
+                }
+                // If virtualization is enabled, dont let round scrolling
+                if (enableVirtualization &&
+                    !menuRef.current?.querySelector(`[data-iui-index="${focusedIndexRef.current}"]`)?.nextElementSibling) {
+                    return;
+                }
+                let nextIndex = focusedIndexRef.current;
+                do {
+                    const currentElement = menuRef.current?.querySelector(`[data-iui-index="${nextIndex}"]`);
+                    const nextElement = currentElement?.nextElementSibling ??
+                        menuRef.current?.querySelector('[data-iui-index]');
+                    nextIndex = Number(nextElement?.getAttribute('data-iui-index'));
+                    if (nextElement) {
+                        return dispatch({ type: 'focus', value: nextIndex });
+                    }
+                } while (nextIndex !== focusedIndexRef.current);
+                break;
             }
-          } while (prevIndex !== focusedIndexRef.current);
-          break;
-        }
-        case 'Enter': {
-          event.preventDefault();
-          if (isOpen) {
-            if (focusedIndexRef.current > -1) {
-              onClickHandler?.(focusedIndexRef.current);
+            case 'ArrowUp': {
+                event.preventDefault();
+                if (!isOpen) {
+                    return show();
+                }
+                if (length === 0) {
+                    return;
+                }
+                // If virtualization is enabled, dont let round scrolling
+                if (enableVirtualization &&
+                    !menuRef.current?.querySelector(`[data-iui-index="${focusedIndexRef.current}"]`)?.previousElementSibling) {
+                    return;
+                }
+                if (focusedIndexRef.current === -1) {
+                    return dispatch({
+                        type: 'focus',
+                        value: Object.values(optionsExtraInfoRef.current)?.[length - 1]
+                            .__originalIndex ?? -1,
+                    });
+                }
+                let prevIndex = focusedIndexRef.current;
+                do {
+                    const currentElement = menuRef.current?.querySelector(`[data-iui-index="${prevIndex}"]`);
+                    const prevElement = currentElement?.previousElementSibling ??
+                        menuRef.current?.querySelector('[data-iui-index]:last-of-type');
+                    prevIndex = Number(prevElement?.getAttribute('data-iui-index'));
+                    if (prevElement) {
+                        return dispatch({ type: 'focus', value: prevIndex });
+                    }
+                } while (prevIndex !== focusedIndexRef.current);
+                break;
+            }
+            case 'Enter': {
+                event.preventDefault();
+                if (isOpen) {
+                    if (focusedIndexRef.current > -1) {
+                        onClickHandler?.(focusedIndexRef.current);
+                    }
+                }
+                else {
+                    show();
+                }
+                break;
             }
-          } else {
+            case 'Escape': {
+                event.preventDefault();
+                hide();
+                break;
+            }
+            case 'Tab':
+                hide();
+                break;
+        }
+    }, [
+        dispatch,
+        enableVirtualization,
+        isOpen,
+        menuRef,
+        onClickHandler,
+        optionsExtraInfoRef,
+        show,
+        hide,
+    ]);
+    const handleClick = React.useCallback(() => {
+        if (!isOpen) {
             show();
-          }
-          break;
         }
-        case 'Escape': {
-          event.preventDefault();
-          hide();
-          break;
+        else {
+            hide();
         }
-        case 'Tab':
-          hide();
-          break;
-      }
-    },
-    [
-      dispatch,
-      enableVirtualization,
-      isOpen,
-      menuRef,
-      onClickHandler,
-      optionsExtraInfoRef,
-      show,
-      hide,
-    ],
-  );
-  const handleClick = React.useCallback(() => {
-    if (!isOpen) {
-      show();
-    } else {
-      hide();
-    }
-  }, [hide, isOpen, show]);
-  const [tagContainerWidthRef, tagContainerWidth] = useContainerWidth();
-  return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(Input, {
-      ref: refs,
-      onClick: mergeEventHandlers(onClickProp, handleClick),
-      'aria-expanded': isOpen,
-      'aria-activedescendant':
-        isOpen && focusedIndex != undefined && focusedIndex > -1
-          ? getIdFromIndex(focusedIndex)
-          : undefined,
-      role: 'combobox',
-      'aria-controls': isOpen ? `${id}-list` : undefined,
-      'aria-autocomplete': 'list',
-      spellCheck: false,
-      autoCapitalize: 'none',
-      autoCorrect: 'off',
-      style: multiple ? { paddingInlineStart: tagContainerWidth + 18 } : {},
-      'aria-describedby': multiple ? `${id}-selected-live` : undefined,
-      size: size,
-      ...popover.getReferenceProps({
-        onKeyDown: mergeEventHandlers(onKeyDownProp, handleKeyDown),
-        ...rest,
-      }),
-    }),
-    multiple && selectTags
-      ? React.createElement(ComboBoxMultipleContainer, {
-          ref: tagContainerWidthRef,
-          selectedItems: selectTags,
-          id: `${id}-selected-live`,
-        })
-      : null,
-  );
+    }, [hide, isOpen, show]);
+    const [tagContainerWidthRef, tagContainerWidth] = useContainerWidth();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Input, { ref: refs, onClick: mergeEventHandlers(onClickProp, handleClick), "aria-expanded": isOpen, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
+                ? getIdFromIndex(focusedIndex)
+                : undefined, role: 'combobox', "aria-controls": isOpen ? `${id}-list` : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off', style: multiple ? { paddingInlineStart: tagContainerWidth + 18 } : {}, "aria-describedby": multiple ? `${id}-selected-live` : undefined, size: size, ...popover.getReferenceProps({
+                onKeyDown: mergeEventHandlers(onKeyDownProp, handleKeyDown),
+                ...rest,
+            }) }),
+        multiple && selectTags ? (React.createElement(ComboBoxMultipleContainer, { ref: tagContainerWidthRef, selectedItems: selectTags, id: `${id}-selected-live` })) : null));
 });
 ComboBoxInput.displayName = 'ComboBoxInput';

package/esm/core/ComboBox/ComboBoxInputContainer.js

@@ -6,26 +6,11 @@ import * as React from 'react';
 import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import { InputContainer, useSafeContext, Box } from '../utils/index.js';
 import { ComboBoxStateContext } from './helpers.js';
-export const ComboBoxInputContainer = React.forwardRef(
-  (props, forwardedRef) => {
+export const ComboBoxInputContainer = React.forwardRef((props, forwardedRef) => {
     const { className, status, message, children, ...rest } = props;
     const { id } = useSafeContext(ComboBoxStateContext);
-    return React.createElement(
-      InputContainer,
-      {
-        className: className,
-        status: status,
-        statusMessage:
-          typeof message === 'string'
-            ? React.createElement(StatusMessage, { status: status }, message)
-            : React.isValidElement(message) &&
-              React.cloneElement(message, { status }),
-        ref: forwardedRef,
-        ...rest,
-        id: id,
-      },
-      React.createElement(Box, { className: 'iui-input-with-icon' }, children),
-    );
-  },
-);
+    return (React.createElement(InputContainer, { className: className, status: status, statusMessage: typeof message === 'string' ? (React.createElement(StatusMessage, { status: status }, message)) : (React.isValidElement(message) &&
+            React.cloneElement(message, { status })), ref: forwardedRef, ...rest, id: id },
+        React.createElement(Box, { className: 'iui-input-with-icon' }, children)));
+});
 ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';

package/esm/core/ComboBox/ComboBoxMenu.js

@@ -4,88 +4,48 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Menu } from '../Menu/Menu.js';
-import {
-  useSafeContext,
-  useMergedRefs,
-  useVirtualization,
-  Portal,
-  Box,
-} from '../utils/index.js';
+import { useSafeContext, useMergedRefs, useVirtualization, Portal, Box, } from '../utils/index.js';
 import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers.js';
 const VirtualizedComboBoxMenu = (props) => {
-  const { children, ...rest } = props;
-  const { filteredOptions, getMenuItem, focusedIndex } =
-    useSafeContext(ComboBoxStateContext);
-  const { menuRef } = useSafeContext(ComboBoxRefsContext);
-  const virtualItemRenderer = React.useCallback(
-    (index) =>
-      filteredOptions.length > 0
+    const { children, ...rest } = props;
+    const { filteredOptions, getMenuItem, focusedIndex } = useSafeContext(ComboBoxStateContext);
+    const { menuRef } = useSafeContext(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}"]`,
-    );
-    if (!currentElement) {
-      return focusedIndex;
-    }
-    return Number(
-      currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex,
-    );
-  }, [focusedIndex, menuRef]);
-  const { outerProps, innerProps, visibleChildren } = 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(
-    Box,
-    { as: 'div', ...outerProps, ...rest },
-    React.createElement(
-      'div',
-      { ...innerProps, ref: innerProps.ref },
-      visibleChildren,
-    ),
-  );
+    [filteredOptions, getMenuItem, children]);
+    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 } = 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(Box, { as: 'div', ...outerProps, ...rest },
+        React.createElement("div", { ...innerProps, ref: innerProps.ref }, visibleChildren)));
 };
 export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
-  const { children, style, ...rest } = props;
-  const { id, enableVirtualization, popover } =
-    useSafeContext(ComboBoxStateContext);
-  const { menuRef } = useSafeContext(ComboBoxRefsContext);
-  const refs = useMergedRefs(popover.refs.setFloating, forwardedRef, menuRef);
-  return (
-    popover.open &&
-    React.createElement(
-      Portal,
-      { portal: true },
-      React.createElement(
-        Menu,
-        {
-          id: `${id}-list`,
-          setFocus: false,
-          role: 'listbox',
-          ref: refs,
-          ...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),
-      ),
-    )
-  );
+    const { children, style, ...rest } = props;
+    const { id, enableVirtualization, popover } = useSafeContext(ComboBoxStateContext);
+    const { menuRef } = useSafeContext(ComboBoxRefsContext);
+    const refs = useMergedRefs(popover.refs.setFloating, forwardedRef, menuRef);
+    return (popover.open && (React.createElement(Portal, { portal: true },
+        React.createElement(Menu, { id: `${id}-list`, setFocus: false, role: 'listbox', ref: refs, ...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))))));
 });
 ComboBoxMenu.displayName = 'ComboBoxMenu';

package/esm/core/ComboBox/ComboBoxMenuItem.js

@@ -6,68 +6,21 @@ import * as React from 'react';
 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) => {
-    const {
-      children,
-      isSelected,
-      disabled,
-      value,
-      onClick,
-      sublabel,
-      size = !!sublabel ? 'large' : 'default',
-      startIcon,
-      endIcon,
-      role = 'option',
-      index,
-      ...rest
-    } = props;
-    const { focusedIndex, enableVirtualization } =
-      useSafeContext(ComboBoxStateContext);
+export const ComboBoxMenuItem = React.memo(React.forwardRef((props, forwardedRef) => {
+    const { children, isSelected, disabled, value, onClick, sublabel, size = !!sublabel ? 'large' : 'default', startIcon, endIcon, role = 'option', index, ...rest } = props;
+    const { focusedIndex, enableVirtualization } = useSafeContext(ComboBoxStateContext);
     const focusRef = (el) => {
-      if (!enableVirtualization && focusedIndex === index) {
-        el?.scrollIntoView({ block: 'nearest' });
-      }
+        if (!enableVirtualization && focusedIndex === index) {
+            el?.scrollIntoView({ block: 'nearest' });
+        }
     };
     const refs = useMergedRefs(forwardedRef, focusRef);
-    return React.createElement(
-      ListItem,
-      {
-        as: 'div',
-        actionable: true,
-        size: size,
-        active: isSelected,
-        disabled: disabled,
-        focused: focusedIndex === index,
-        ref: refs,
-        onClick: () => onClick?.(value),
-        role: role,
-        tabIndex: role === 'presentation' ? undefined : -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),
-          )),
-    );
-  }),
-);
+    return (React.createElement(ListItem, { as: 'div', actionable: true, size: size, active: isSelected, disabled: disabled, focused: focusedIndex === index, ref: refs, onClick: () => onClick?.(value), role: role, tabIndex: role === 'presentation' ? undefined : -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))))));
+}));
 ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

package/esm/core/ComboBox/ComboBoxMultipleContainer.js

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