@itwin/itwinui-react 3.11.3 → 3.12.1

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -1,81 +1,107 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComboBoxMenu = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../../utils/index.js");
-const helpers_js_1 = require("./helpers.js");
-const List_js_1 = require("../List/List.js");
+Object.defineProperty(exports, 'ComboBoxMenu', {
+  enumerable: true,
+  get: function () {
+    return ComboBoxMenu;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+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, 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.useSafeContext)(_helpers.ComboBoxStateContext);
+  const { menuRef } = (0, _index.useSafeContext)(_helpers.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)));
+        : children,
+    [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.useVirtualization)({
+    itemsLength: filteredOptions.length || 1,
+    itemRenderer: virtualItemRenderer,
+    scrollToIndex: focusedVisibleIndex,
+  });
+  return _react.createElement(
+    _index.Box,
+    {
+      as: 'div',
+      ...outerProps,
+      ...rest,
+    },
+    _react.createElement(
+      'div',
+      {
+        ...innerProps,
+        ref: innerProps.ref,
+      },
+      visibleChildren,
+    ),
+  );
 };
-exports.ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
-    const { className, 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(List_js_1.List, { as: 'div', className: (0, classnames_1.default)('iui-menu', className), id: `${id}-list`, 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 ComboBoxMenu = _react.forwardRef((props, forwardedRef) => {
+  const { className, children, style, ...rest } = props;
+  const { id, enableVirtualization, popover } = (0, _index.useSafeContext)(
+    _helpers.ComboBoxStateContext,
+  );
+  const { menuRef } = (0, _index.useSafeContext)(_helpers.ComboBoxRefsContext);
+  const refs = (0, _index.useMergedRefs)(
+    popover.refs.setFloating,
+    forwardedRef,
+    menuRef,
+  );
+  return (
+    popover.open &&
+    _react.createElement(
+      _index.Portal,
+      {
+        portal: true,
+      },
+      _react.createElement(
+        _List.List,
+        {
+          as: 'div',
+          className: (0, _classnames.default)('iui-menu', className),
+          id: `${id}-list`,
+          role: 'listbox',
+          ref: refs,
+          ...popover.getFloatingProps({
+            style: !enableVirtualization
+              ? style
+              : {
+                  maxInlineSize: 0,
+                  ...style,
+                },
+            ...rest,
+          }),
+        },
+        !enableVirtualization
+          ? children
+          : _react.createElement(VirtualizedComboBoxMenu, null, children),
+      ),
+    )
+  );
 });
-exports.ComboBoxMenu.displayName = 'ComboBoxMenu';
+ComboBoxMenu.displayName = 'ComboBoxMenu';

package/cjs/core/ComboBox/ComboBoxMenuItem.js

@@ -1,52 +1,90 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComboBoxMenuItem = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const index_js_1 = require("../../utils/index.js");
-const helpers_js_1 = require("./helpers.js");
-const ListItem_js_1 = require("../List/ListItem.js");
-exports.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 } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);
+Object.defineProperty(exports, 'ComboBoxMenuItem', {
+  enumerable: true,
+  get: function () {
+    return ComboBoxMenuItem;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../utils/index.js');
+const _helpers = require('./helpers.js');
+const _ListItem = require('../List/ListItem.js');
+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 } = (0, _index.useSafeContext)(
+      _helpers.ComboBoxStateContext,
+    );
     const focusRef = (el) => {
-        if (!enableVirtualization && focusedIndex === index) {
-            el?.scrollIntoView({ block: 'nearest' });
-        }
+      if (!enableVirtualization && focusedIndex === index) {
+        el?.scrollIntoView({
+          block: 'nearest',
+        });
+      }
     };
-    const refs = (0, index_js_1.useMergedRefs)(forwardedRef, focusRef);
-    return (React.createElement(ListItem_js_1.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_js_1.ListItem.Icon, { as: 'span', "aria-hidden": true }, startIcon)),
-        React.createElement(ListItem_js_1.ListItem.Content, null,
-            children,
-            sublabel && React.createElement(ListItem_js_1.ListItem.Description, null, sublabel)),
-        endIcon ||
-            (isSelected && (React.createElement(ListItem_js_1.ListItem.Icon, { as: 'span', "aria-hidden": true }, endIcon ?? React.createElement(index_js_1.SvgCheckmark, null))))));
-}));
-exports.ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';
+    const refs = (0, _index.useMergedRefs)(forwardedRef, focusRef);
+    return _react.createElement(
+      _ListItem.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.ListItem.Icon,
+          {
+            as: 'span',
+            'aria-hidden': true,
+          },
+          startIcon,
+        ),
+      _react.createElement(
+        _ListItem.ListItem.Content,
+        null,
+        children,
+        sublabel &&
+          _react.createElement(_ListItem.ListItem.Description, null, sublabel),
+      ),
+      endIcon ||
+        (isSelected &&
+          _react.createElement(
+            _ListItem.ListItem.Icon,
+            {
+              as: 'span',
+              'aria-hidden': true,
+            },
+            endIcon ?? _react.createElement(_index.SvgCheckmark, null),
+          )),
+    );
+  }),
+);
+ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

package/cjs/core/ComboBox/ComboBoxMultipleContainer.js

@@ -1,37 +1,22 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComboBoxMultipleContainer = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const SelectTagContainer_js_1 = require("../Select/SelectTagContainer.js");
-exports.ComboBoxMultipleContainer = React.forwardRef((props, ref) => {
-    const { selectedItems = [], ...rest } = props;
-    return React.createElement(SelectTagContainer_js_1.SelectTagContainer, { ref: ref, tags: selectedItems, ...rest });
+Object.defineProperty(exports, 'ComboBoxMultipleContainer', {
+  enumerable: true,
+  get: function () {
+    return ComboBoxMultipleContainer;
+  },
 });
-exports.ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer';
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _SelectTagContainer = require('../Select/SelectTagContainer.js');
+const ComboBoxMultipleContainer = _react.forwardRef((props, ref) => {
+  const { selectedItems = [], ...rest } = props;
+  return _react.createElement(_SelectTagContainer.SelectTagContainer, {
+    ref: ref,
+    tags: selectedItems,
+    ...rest,
+  });
+});
+ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer';

package/cjs/core/ComboBox/helpers.d.ts

@@ -1,35 +1,12 @@
 import * as React from 'react';
 import type { SelectOption } from '../Select/Select.js';
 import type { usePopover } from '../Popover/Popover.js';
-type ComboBoxAction = {
-    type: 'multiselect';
-    value: number[];
-} | {
-    type: 'open';
-} | {
-    type: 'close';
-} | {
-    type: 'select';
-    value: number;
-} | {
-    type: 'focus';
-    value: number | undefined;
-};
-export declare const comboBoxReducer: (state: {
-    isOpen: boolean;
-    selected: number | number[];
-    focusedIndex: number;
-}, action: ComboBoxAction) => {
-    isOpen: boolean;
-    selected: number | number[];
-    focusedIndex: number;
-};
 export declare const ComboBoxRefsContext: React.Context<{
     inputRef: React.RefObject<HTMLInputElement>;
     menuRef: React.RefObject<HTMLElement>;
-    optionsExtraInfoRef: React.MutableRefObject<Record<string, {
+    optionsExtraInfo: Record<string, {
         __originalIndex: number;
-    }>>;
+    }>;
 } | undefined>;
 type ComboBoxStateContextProps<T = unknown> = {
     isOpen: boolean;
@@ -38,12 +15,12 @@ type ComboBoxStateContextProps<T = unknown> = {
     filteredOptions: SelectOption<T>[];
     onClickHandler?: (prop: number) => void;
     getMenuItem: (option: SelectOption<T>, filteredIndex?: number) => JSX.Element;
-    focusedIndex?: number;
+    focusedIndex: number;
+    setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;
     multiple?: boolean;
     popover: ReturnType<typeof usePopover>;
     show: () => void;
     hide: () => void;
 };
 export declare const ComboBoxStateContext: React.Context<ComboBoxStateContextProps<unknown> | undefined>;
-export declare const ComboBoxActionContext: React.Context<((x: ComboBoxAction) => void) | undefined>;
 export {};

package/cjs/core/ComboBox/helpers.js

@@ -1,79 +1,25 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComboBoxActionContext = exports.ComboBoxStateContext = exports.ComboBoxRefsContext = exports.comboBoxReducer = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const comboBoxReducer = (state, action) => {
-    switch (action.type) {
-        case 'open': {
-            return { ...state, isOpen: true };
-        }
-        case 'close': {
-            return { ...state, isOpen: false };
-        }
-        case 'select': {
-            if (Array.isArray(state.selected)) {
-                return { ...state };
-            }
-            return {
-                ...state,
-                selected: action.value ?? state.selected,
-                focusedIndex: action.value ?? state.focusedIndex,
-            };
-        }
-        case 'multiselect': {
-            if (!Array.isArray(state.selected)) {
-                return { ...state };
-            }
-            return { ...state, selected: action.value };
-        }
-        case 'focus': {
-            if (Array.isArray(state.selected)) {
-                return {
-                    ...state,
-                    focusedIndex: action.value ?? -1,
-                };
-            }
-            return {
-                ...state,
-                focusedIndex: action.value ?? state.selected ?? -1,
-            };
-        }
-        default: {
-            return state;
-        }
-    }
-};
-exports.comboBoxReducer = comboBoxReducer;
-exports.ComboBoxRefsContext = React.createContext(undefined);
-exports.ComboBoxRefsContext.displayName = 'ComboBoxRefsContext';
-exports.ComboBoxStateContext = React.createContext(undefined);
-exports.ComboBoxStateContext.displayName = 'ComboBoxStateContext';
-exports.ComboBoxActionContext = React.createContext(undefined);
-exports.ComboBoxActionContext.displayName = 'ComboBoxActionContext';
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  ComboBoxRefsContext: function () {
+    return ComboBoxRefsContext;
+  },
+  ComboBoxStateContext: function () {
+    return ComboBoxStateContext;
+  },
+});
+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';