@itwin/itwinui-react 3.0.3 → 3.0.5

package/cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -1,36 +1,20 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComboBoxEndIcon = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
-const Icon_js_1 = require('../Icon/Icon.js');
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const Icon_js_1 = require("../Icon/Icon.js");
 exports.ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
-  const { className, children, disabled, isOpen, ...rest } = props;
-  return React.createElement(
-    Icon_js_1.Icon,
-    {
-      as: 'span',
-      ref: forwardedRef,
-      className: (0, classnames_1.default)(
-        'iui-end-icon',
-        {
-          'iui-disabled': disabled,
-          'iui-open': isOpen,
-        },
-        className,
-      ),
-      ...rest,
-    },
-    children ??
-      React.createElement(index_js_1.SvgCaretDownSmall, {
-        'aria-hidden': true,
-      }),
-  );
+    const { className, children, disabled, isOpen, ...rest } = props;
+    return (React.createElement(Icon_js_1.Icon, { as: 'span', ref: forwardedRef, className: (0, classnames_1.default)('iui-end-icon', {
+            'iui-disabled': disabled,
+            'iui-open': isOpen,
+        }, className), ...rest }, children ?? React.createElement(index_js_1.SvgCaretDownSmall, { "aria-hidden": true })));
 });
 exports.ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -1,222 +1,146 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComboBoxInput = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const Input_js_1 = require('../Input/Input.js');
-const index_js_1 = require('../utils/index.js');
-const ComboBoxMultipleContainer_js_1 = require('./ComboBoxMultipleContainer.js');
-const helpers_js_1 = require('./helpers.js');
+const React = tslib_1.__importStar(require("react"));
+const Input_js_1 = require("../Input/Input.js");
+const index_js_1 = require("../utils/index.js");
+const ComboBoxMultipleContainer_js_1 = require("./ComboBoxMultipleContainer.js");
+const helpers_js_1 = require("./helpers.js");
 exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
-  const {
-    onKeyDown: onKeyDownProp,
-    onClick: onClickProp,
-    selectTags,
-    size,
-    ...rest
-  } = props;
-  const {
-    isOpen,
-    id,
-    focusedIndex,
-    enableVirtualization,
-    multiple,
-    onClickHandler,
-    popover,
-    show,
-    hide,
-  } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);
-  const dispatch = (0, index_js_1.useSafeContext)(
-    helpers_js_1.ComboBoxActionContext,
-  );
-  const { inputRef, menuRef, optionsExtraInfoRef } = (0,
-  index_js_1.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
-  const refs = (0, index_js_1.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, } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);
+    const dispatch = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxActionContext);
+    const { inputRef, menuRef, optionsExtraInfoRef } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
+    const refs = (0, index_js_1.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] = (0,
-  index_js_1.useContainerWidth)();
-  return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(Input_js_1.Input, {
-      ref: refs,
-      onClick: (0, index_js_1.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: (0, index_js_1.mergeEventHandlers)(
-          onKeyDownProp,
-          handleKeyDown,
-        ),
-        ...rest,
-      }),
-    }),
-    multiple && selectTags
-      ? React.createElement(
-          ComboBoxMultipleContainer_js_1.ComboBoxMultipleContainer,
-          {
-            ref: tagContainerWidthRef,
-            selectedItems: selectTags,
-            id: `${id}-selected-live`,
-          },
-        )
-      : null,
-  );
+    }, [hide, isOpen, show]);
+    const [tagContainerWidthRef, tagContainerWidth] = (0, index_js_1.useContainerWidth)();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Input_js_1.Input, { ref: refs, onClick: (0, index_js_1.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: (0, index_js_1.mergeEventHandlers)(onKeyDownProp, handleKeyDown),
+                ...rest,
+            }) }),
+        multiple && selectTags ? (React.createElement(ComboBoxMultipleContainer_js_1.ComboBoxMultipleContainer, { ref: tagContainerWidthRef, selectedItems: selectTags, id: `${id}-selected-live` })) : null));
 });
 exports.ComboBoxInput.displayName = 'ComboBoxInput';

package/cjs/core/ComboBox/ComboBoxInputContainer.js

@@ -1,43 +1,20 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComboBoxInputContainer = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const StatusMessage_js_1 = require('../StatusMessage/StatusMessage.js');
-const index_js_1 = require('../utils/index.js');
-const helpers_js_1 = require('./helpers.js');
+const React = tslib_1.__importStar(require("react"));
+const StatusMessage_js_1 = require("../StatusMessage/StatusMessage.js");
+const index_js_1 = require("../utils/index.js");
+const helpers_js_1 = require("./helpers.js");
 exports.ComboBoxInputContainer = React.forwardRef((props, forwardedRef) => {
-  const { className, status, message, children, ...rest } = props;
-  const { id } = (0, index_js_1.useSafeContext)(
-    helpers_js_1.ComboBoxStateContext,
-  );
-  return React.createElement(
-    index_js_1.InputContainer,
-    {
-      className: className,
-      status: status,
-      statusMessage:
-        typeof message === 'string'
-          ? React.createElement(
-              StatusMessage_js_1.StatusMessage,
-              { status: status },
-              message,
-            )
-          : React.isValidElement(message) &&
-            React.cloneElement(message, { status }),
-      ref: forwardedRef,
-      ...rest,
-      id: id,
-    },
-    React.createElement(
-      index_js_1.Box,
-      { className: 'iui-input-with-icon' },
-      children,
-    ),
-  );
+    const { className, status, message, children, ...rest } = props;
+    const { id } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);
+    return (React.createElement(index_js_1.InputContainer, { className: className, status: status, statusMessage: typeof message === 'string' ? (React.createElement(StatusMessage_js_1.StatusMessage, { status: status }, message)) : (React.isValidElement(message) &&
+            React.cloneElement(message, { status })), ref: forwardedRef, ...rest, id: id },
+        React.createElement(index_js_1.Box, { className: 'iui-input-with-icon' }, children)));
 });
 exports.ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -1,99 +1,55 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComboBoxMenu = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const Menu_js_1 = require('../Menu/Menu.js');
-const index_js_1 = require('../utils/index.js');
-const helpers_js_1 = require('./helpers.js');
+const React = tslib_1.__importStar(require("react"));
+const Menu_js_1 = require("../Menu/Menu.js");
+const index_js_1 = require("../utils/index.js");
+const helpers_js_1 = require("./helpers.js");
 const VirtualizedComboBoxMenu = (props) => {
-  const { children, ...rest } = props;
-  const { filteredOptions, getMenuItem, focusedIndex } = (0,
-  index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);
-  const { menuRef } = (0, index_js_1.useSafeContext)(
-    helpers_js_1.ComboBoxRefsContext,
-  );
-  const virtualItemRenderer = React.useCallback(
-    (index) =>
-      filteredOptions.length > 0
+    const { children, ...rest } = props;
+    const { filteredOptions, getMenuItem, focusedIndex } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);
+    const { menuRef } = (0, index_js_1.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}"]`,
-    );
-    if (!currentElement) {
-      return focusedIndex;
-    }
-    return Number(
-      currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex,
-    );
-  }, [focusedIndex, menuRef]);
-  const { outerProps, innerProps, visibleChildren } = (0,
-  index_js_1.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_1.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 } = (0, index_js_1.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_1.Box, { as: 'div', ...outerProps, ...rest },
+        React.createElement("div", { ...innerProps, ref: innerProps.ref }, visibleChildren)));
 };
 exports.ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
-  const { children, style, ...rest } = props;
-  const { id, enableVirtualization, popover } = (0, index_js_1.useSafeContext)(
-    helpers_js_1.ComboBoxStateContext,
-  );
-  const { menuRef } = (0, index_js_1.useSafeContext)(
-    helpers_js_1.ComboBoxRefsContext,
-  );
-  const refs = (0, index_js_1.useMergedRefs)(
-    popover.refs.setFloating,
-    forwardedRef,
-    menuRef,
-  );
-  return (
-    popover.open &&
-    React.createElement(
-      index_js_1.Portal,
-      { portal: true },
-      React.createElement(
-        Menu_js_1.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 } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);
+    const { menuRef } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
+    const refs = (0, index_js_1.useMergedRefs)(popover.refs.setFloating, forwardedRef, menuRef);
+    return (popover.open && (React.createElement(index_js_1.Portal, { portal: true },
+        React.createElement(Menu_js_1.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))))));
 });
 exports.ComboBoxMenu.displayName = 'ComboBoxMenu';