@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

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

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type ComboBoxEndIconProps = {
+type ComboBoxEndIconProps = {
     disabled?: boolean;
     isOpen?: boolean;
 };

package/cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -1,51 +1,35 @@
-"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;
-});
-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 });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ComboBoxEndIcon = void 0;
+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 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
-const helpers_js_1 = require("./helpers.js");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
 exports.ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
-    const { className, children, onClick: onClickProp, disabled, isOpen, ...rest } = props;
-    const dispatch = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxActionContext);
-    const { toggleButtonRef } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
-    const refs = (0, index_js_1.useMergedRefs)(toggleButtonRef, forwardedRef);
-    return (React.createElement(index_js_1.Box, { as: 'span', ref: refs, className: (0, classnames_1.default)('iui-end-icon', {
-            'iui-actionable': !disabled,
-            'iui-disabled': disabled,
-            'iui-open': isOpen,
-        }, className), onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, () => {
-            dispatch({ type: isOpen ? 'close' : 'open' });
-        }), ...rest }, children !== null && children !== void 0 ? children : React.createElement(index_js_1.SvgCaretDownSmall, { "aria-hidden": true })));
+  const { className, children, disabled, isOpen, ...rest } = props;
+  return React.createElement(
+    index_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.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Input } from '../Input/index.js';
-import { type PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type ComboBoxInputProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type ComboBoxInputProps = {
     selectTags?: JSX.Element[];
 } & React.ComponentProps<typeof Input>;
 export declare const ComboBoxInput: PolymorphicForwardRefComponent<"input", ComboBoxInputProps>;

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -1,165 +1,222 @@
-"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;
-});
-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 });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ComboBoxInput = void 0;
+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 = __importStar(require("react"));
-const index_js_1 = require("../Input/index.js");
-const index_js_2 = 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 index_js_1 = require('../Input/index.js');
+const index_js_2 = 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, onFocus: onFocusProp, onClick: onClickProp, selectTags, ...rest } = props;
-    const { isOpen, id, focusedIndex, enableVirtualization, multiple, onClickHandler, } = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxStateContext);
-    const dispatch = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxActionContext);
-    const { inputRef, menuRef, optionsExtraInfoRef } = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
-    const refs = (0, index_js_2.useMergedRefs)(inputRef, forwardedRef);
-    const focusedIndexRef = React.useRef(focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : -1);
-    React.useEffect(() => {
-        focusedIndexRef.current = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : -1;
-    }, [focusedIndex]);
-    const getIdFromIndex = (index) => {
-        var _a, _b, _c;
-        return ((_c = (_b = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-iui-index="${index}"]`)) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : '');
-    };
-    const handleKeyDown = React.useCallback((event) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(event);
-        const length = (_a = Object.keys(optionsExtraInfoRef.current).length) !== null && _a !== void 0 ? _a : 0;
-        if (event.altKey) {
+  const {
+    onKeyDown: onKeyDownProp,
+    onClick: onClickProp,
+    selectTags,
+    size,
+    ...rest
+  } = props;
+  const {
+    isOpen,
+    id,
+    focusedIndex,
+    enableVirtualization,
+    multiple,
+    onClickHandler,
+    popover,
+    show,
+    hide,
+  } = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxStateContext);
+  const dispatch = (0, index_js_2.useSafeContext)(
+    helpers_js_1.ComboBoxActionContext,
+  );
+  const { inputRef, menuRef, optionsExtraInfoRef } = (0,
+  index_js_2.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
+  const refs = (0, index_js_2.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) {
             return;
-        }
-        switch (event.key) {
-            case 'ArrowDown': {
-                event.preventDefault();
-                if (!isOpen) {
-                    return dispatch({ type: 'open' });
-                }
-                if (length === 0) {
-                    return;
-                }
-                if (focusedIndexRef.current === -1) {
-                    const currentElement = (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelector('[data-iui-index]');
-                    return dispatch({
-                        type: 'focus',
-                        value: Number((_c = currentElement === null || currentElement === void 0 ? void 0 : currentElement.getAttribute('data-iui-index')) !== null && _c !== void 0 ? _c : 0),
-                    });
-                }
-                // If virtualization is enabled, dont let round scrolling
-                if (enableVirtualization &&
-                    !((_e = (_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.querySelector(`[data-iui-index="${focusedIndexRef.current}"]`)) === null || _e === void 0 ? void 0 : _e.nextElementSibling)) {
-                    return;
-                }
-                let nextIndex = focusedIndexRef.current;
-                do {
-                    const currentElement = (_f = menuRef.current) === null || _f === void 0 ? void 0 : _f.querySelector(`[data-iui-index="${nextIndex}"]`);
-                    const nextElement = (_g = currentElement === null || currentElement === void 0 ? void 0 : currentElement.nextElementSibling) !== null && _g !== void 0 ? _g : (_h = menuRef.current) === null || _h === void 0 ? void 0 : _h.querySelector('[data-iui-index]');
-                    nextIndex = Number(nextElement === null || nextElement === void 0 ? void 0 : 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 dispatch({ type: 'open' });
-                }
-                if (length === 0) {
-                    return;
-                }
-                // If virtualization is enabled, dont let round scrolling
-                if (enableVirtualization &&
-                    !((_k = (_j = menuRef.current) === null || _j === void 0 ? void 0 : _j.querySelector(`[data-iui-index="${focusedIndexRef.current}"]`)) === null || _k === void 0 ? void 0 : _k.previousElementSibling)) {
-                    return;
-                }
-                if (focusedIndexRef.current === -1) {
-                    return dispatch({
-                        type: 'focus',
-                        value: (_m = (_l = Object.values(optionsExtraInfoRef.current)) === null || _l === void 0 ? void 0 : _l[length - 1].__originalIndex) !== null && _m !== void 0 ? _m : -1,
-                    });
-                }
-                let prevIndex = focusedIndexRef.current;
-                do {
-                    const currentElement = (_o = menuRef.current) === null || _o === void 0 ? void 0 : _o.querySelector(`[data-iui-index="${prevIndex}"]`);
-                    const prevElement = (_p = currentElement === null || currentElement === void 0 ? void 0 : currentElement.previousElementSibling) !== null && _p !== void 0 ? _p : (_q = menuRef.current) === null || _q === void 0 ? void 0 : _q.querySelector('[data-iui-index]:last-of-type');
-                    prevIndex = Number(prevElement === null || prevElement === void 0 ? void 0 : prevElement.getAttribute('data-iui-index'));
-                    if (prevElement) {
-                        return dispatch({ type: 'focus', value: prevIndex });
-                    }
-                } while (prevIndex !== focusedIndexRef.current);
-                break;
+          }
+          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 });
             }
-            case 'Enter': {
-                event.preventDefault();
-                if (isOpen) {
-                    if (focusedIndexRef.current > -1) {
-                        onClickHandler === null || onClickHandler === void 0 ? void 0 : onClickHandler(focusedIndexRef.current);
-                    }
-                }
-                else {
-                    dispatch({ type: 'open' });
-                }
-                break;
+          } 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 });
             }
-            case 'Escape': {
-                event.preventDefault();
-                dispatch({ type: 'close' });
-                break;
+          } while (prevIndex !== focusedIndexRef.current);
+          break;
+        }
+        case 'Enter': {
+          event.preventDefault();
+          if (isOpen) {
+            if (focusedIndexRef.current > -1) {
+              onClickHandler?.(focusedIndexRef.current);
             }
-            case 'Tab':
-                dispatch({ type: 'close' });
-                break;
+          } else {
+            show();
+          }
+          break;
         }
-    }, [
-        dispatch,
-        enableVirtualization,
-        isOpen,
-        menuRef,
-        onClickHandler,
-        onKeyDownProp,
-        optionsExtraInfoRef,
-    ]);
-    const handleFocus = React.useCallback((event) => {
-        dispatch({ type: 'open' });
-        onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(event);
-    }, [dispatch, onFocusProp]);
-    const handleClick = React.useCallback(() => {
-        if (!isOpen) {
-            dispatch({ type: 'open' });
+        case 'Escape': {
+          event.preventDefault();
+          hide();
+          break;
         }
-    }, [dispatch, isOpen]);
-    const [tagContainerWidthRef, tagContainerWidth] = (0, index_js_2.useContainerWidth)();
-    return (React.createElement(React.Fragment, null,
-        React.createElement(index_js_1.Input, { ref: refs, onKeyDown: handleKeyDown, onClick: (0, index_js_2.mergeEventHandlers)(onClickProp, handleClick), onFocus: handleFocus, "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 ? { paddingLeft: tagContainerWidth + 18 } : {}, "aria-describedby": multiple ? `${id}-selected-live` : undefined, ...rest }),
-        multiple && selectTags ? (React.createElement(ComboBoxMultipleContainer_js_1.ComboBoxMultipleContainer, { ref: tagContainerWidthRef, selectedItems: selectTags, id: `${id}-selected-live` })) : null));
+        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_2.useContainerWidth)();
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(index_js_1.Input, {
+      ref: refs,
+      onClick: (0, index_js_2.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_2.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.d.ts

@@ -1,4 +1,4 @@
 import type { InputContainerProps, PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type ComboBoxInputContainerProps = Pick<InputContainerProps, 'status' | 'message' | 'disabled'>;
+type ComboBoxInputContainerProps = Pick<InputContainerProps, 'status' | 'message' | 'disabled'>;
 export declare const ComboBoxInputContainer: PolymorphicForwardRefComponent<"div", ComboBoxInputContainerProps>;
 export {};

package/cjs/core/ComboBox/ComboBoxInputContainer.js

@@ -1,42 +1,43 @@
-"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;
-});
-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 });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ComboBoxInputContainer = void 0;
+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 = __importStar(require("react"));
-const index_js_1 = require("../StatusMessage/index.js");
-const index_js_2 = require("../utils/index.js");
-const helpers_js_1 = require("./helpers.js");
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../StatusMessage/index.js');
+const index_js_2 = 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_2.useSafeContext)(helpers_js_1.ComboBoxStateContext);
-    return (React.createElement(index_js_2.InputContainer, { className: className, status: status, statusMessage: typeof message === 'string' ? (React.createElement(index_js_1.StatusMessage, { status: status }, message)) : (React.isValidElement(message) &&
-            React.cloneElement(message, { status })), ref: forwardedRef, ...rest, id: id },
-        React.createElement(index_js_2.Box, { className: 'iui-input-with-icon' }, children)));
+  const { className, status, message, children, ...rest } = props;
+  const { id } = (0, index_js_2.useSafeContext)(
+    helpers_js_1.ComboBoxStateContext,
+  );
+  return React.createElement(
+    index_js_2.InputContainer,
+    {
+      className: className,
+      status: status,
+      statusMessage:
+        typeof message === 'string'
+          ? React.createElement(
+              index_js_1.StatusMessage,
+              { status: status },
+              message,
+            )
+          : React.isValidElement(message) &&
+            React.cloneElement(message, { status }),
+      ref: forwardedRef,
+      ...rest,
+      id: id,
+    },
+    React.createElement(
+      index_js_2.Box,
+      { className: 'iui-input-with-icon' },
+      children,
+    ),
+  );
 });
 exports.ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Menu } from '../Menu/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type ComboBoxMenuProps = Omit<React.ComponentPropsWithoutRef<typeof Menu>, 'onClick'> & React.ComponentPropsWithoutRef<'ul'>;
-export declare const ComboBoxMenu: PolymorphicForwardRefComponent<"ul", ComboBoxMenuProps>;
+type ComboBoxMenuProps = Omit<React.ComponentPropsWithoutRef<typeof Menu>, 'onClick'> & React.ComponentPropsWithoutRef<'div'>;
+export declare const ComboBoxMenu: PolymorphicForwardRefComponent<"div", ComboBoxMenuProps>;
 export {};