@itwin/itwinui-react 3.0.0-dev.8 → 3.0.0

package/cjs/core/ComboBox/ComboBox.js

@@ -7,14 +7,12 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Menu/index.js');
-const SelectTag_js_1 = tslib_1.__importDefault(
-  require('../Select/SelectTag.js'),
-);
-const index_js_2 = require('../Typography/index.js');
-const index_js_3 = require('../utils/index.js');
+const MenuExtraContent_js_1 = require('../Menu/MenuExtraContent.js');
+const SelectTag_js_1 = require('../Select/SelectTag.js');
+const Text_js_1 = require('../Typography/Text.js');
+const index_js_1 = require('../utils/index.js');
+const Popover_js_1 = require('../Popover/Popover.js');
 const helpers_js_1 = require('./helpers.js');
-const ComboBoxDropdown_js_1 = require('./ComboBoxDropdown.js');
 const ComboBoxEndIcon_js_1 = require('./ComboBoxEndIcon.js');
 const ComboBoxInput_js_1 = require('./ComboBoxInput.js');
 const ComboBoxInputContainer_js_1 = require('./ComboBoxInputContainer.js');
@@ -52,13 +50,14 @@ const ComboBox = (props) => {
     onChange,
     filterFunction,
     inputProps,
+    endIconProps,
     dropdownMenuProps,
     emptyStateMessage = 'No options found',
     itemRenderer,
     enableVirtualization = false,
     multiple = false,
-    onShow,
-    onHide,
+    onShow: onShowProp,
+    onHide: onHideProp,
     ...rest
   } = props;
   // Generate a stateful random id if not specified
@@ -66,13 +65,13 @@ const ComboBox = (props) => {
     () =>
       props.id ??
       (inputProps?.id && `${inputProps.id}-cb`) ??
-      `iui-cb-${(0, index_js_3.getRandomValue)(10)}`,
+      `iui-cb-${(0, index_js_1.getRandomValue)(10)}`,
   );
   // Refs get set in subcomponents
   const inputRef = React.useRef(null);
   const menuRef = React.useRef(null);
-  const onChangeProp = (0, index_js_3.useLatestRef)(onChange);
-  const optionsRef = (0, index_js_3.useLatestRef)(options);
+  const onChangeProp = (0, index_js_1.useLatestRef)(onChange);
+  const optionsRef = (0, index_js_1.useLatestRef)(options);
   // Record to store all extra information (e.g. original indexes), where the key is the id of the option
   const optionsExtraInfoRef = React.useRef({});
   // Clear the extra info when the options change so that it can be reinitialized below
@@ -116,7 +115,17 @@ const ComboBox = (props) => {
       focusedIndex: -1,
     },
   );
-  (0, index_js_3.useIsomorphicLayoutEffect)(() => {
+  const onShowRef = (0, index_js_1.useLatestRef)(onShowProp);
+  const onHideRef = (0, index_js_1.useLatestRef)(onHideProp);
+  const show = React.useCallback(() => {
+    dispatch({ type: 'open' });
+    onShowRef.current?.();
+  }, [onShowRef]);
+  const hide = React.useCallback(() => {
+    dispatch({ type: 'close' });
+    onHideRef.current?.();
+  }, [onHideRef]);
+  (0, index_js_1.useIsomorphicLayoutEffect)(() => {
     // When the dropdown opens
     if (isOpen) {
       inputRef.current?.focus(); // Focus the input
@@ -140,13 +149,6 @@ const ComboBox = (props) => {
       }
     }
   }, [isOpen, multiple, optionsRef, selected]);
-  // Set min-width of menu to be same as input
-  const [minWidth, setMinWidth] = React.useState(0);
-  React.useEffect(() => {
-    if (inputRef.current) {
-      setMinWidth(inputRef.current.offsetWidth);
-    }
-  }, [isOpen]);
   // Update filtered options to the latest value options according to input value
   const [filteredOptions, setFilteredOptions] = React.useState(options);
   React.useEffect(() => {
@@ -173,7 +175,7 @@ const ComboBox = (props) => {
     (event) => {
       const { value } = event.currentTarget;
       setInputValue(value);
-      dispatch({ type: 'open' }); // reopen when typing
+      show(); // reopen when typing
       setFilteredOptions(
         filterFunction?.(optionsRef.current, value) ??
           optionsRef.current.filter((option) =>
@@ -185,7 +187,7 @@ const ComboBox = (props) => {
       }
       inputProps?.onChange?.(event);
     },
-    [filterFunction, focusedIndex, inputProps, optionsRef],
+    [filterFunction, focusedIndex, inputProps, optionsRef, show],
   );
   // When the value prop changes, update the selected index/indices
   React.useEffect(() => {
@@ -275,7 +277,7 @@ const ComboBox = (props) => {
         );
       } else {
         dispatch({ type: 'select', value: __originalIndex });
-        dispatch({ type: 'close' });
+        hide();
         onChangeHandler(__originalIndex);
       }
     },
@@ -286,6 +288,7 @@ const ComboBox = (props) => {
       onChangeHandler,
       selected,
       optionsRef,
+      hide,
     ],
   );
   const getMenuItem = React.useCallback(
@@ -313,7 +316,7 @@ const ComboBox = (props) => {
             focused: focusedIndex === __originalIndex,
             'data-iui-index': __originalIndex,
             'data-iui-filtered-index': filteredIndex,
-            ref: (0, index_js_3.mergeRefs)(customItem.props.ref, (el) => {
+            ref: (0, index_js_1.mergeRefs)(customItem.props.ref, (el) => {
               if (!enableVirtualization && focusedIndex === __originalIndex) {
                 el?.scrollIntoView({ block: 'nearest' });
               }
@@ -354,10 +357,10 @@ const ComboBox = (props) => {
         React.isValidElement(emptyStateMessage)
           ? emptyStateMessage
           : React.createElement(
-              index_js_1.MenuExtraContent,
+              MenuExtraContent_js_1.MenuExtraContent,
               null,
               React.createElement(
-                index_js_2.Text,
+                Text_js_1.Text,
                 { isMuted: true },
                 emptyStateMessage,
               ),
@@ -365,6 +368,13 @@ const ComboBox = (props) => {
       ),
     [emptyStateMessage],
   );
+  const popover = (0, Popover_js_1.usePopover)({
+    visible: isOpen,
+    onVisibleChange: (open) => (open ? show() : hide()),
+    matchWidth: true,
+    closeOnOutsideClick: true,
+    trigger: { focus: true },
+  });
   return React.createElement(
     helpers_js_1.ComboBoxRefsContext.Provider,
     { value: { inputRef, menuRef, optionsExtraInfoRef } },
@@ -376,7 +386,6 @@ const ComboBox = (props) => {
         {
           value: {
             id,
-            minWidth,
             isOpen,
             focusedIndex,
             onClickHandler,
@@ -384,11 +393,14 @@ const ComboBox = (props) => {
             filteredOptions,
             getMenuItem,
             multiple,
+            popover,
+            show,
+            hide,
           },
         },
         React.createElement(
           ComboBoxInputContainer_js_1.ComboBoxInputContainer,
-          { ...rest },
+          { disabled: inputProps?.disabled, ...rest },
           React.createElement(
             React.Fragment,
             null,
@@ -400,7 +412,7 @@ const ComboBox = (props) => {
               selectTags: isMultipleEnabled(selected, multiple)
                 ? selected.map((index) => {
                     const item = optionsRef.current[index];
-                    return React.createElement(SelectTag_js_1.default, {
+                    return React.createElement(SelectTag_js_1.SelectTag, {
                       key: item.label,
                       label: item.label,
                     });
@@ -409,25 +421,22 @@ const ComboBox = (props) => {
             }),
           ),
           React.createElement(ComboBoxEndIcon_js_1.ComboBoxEndIcon, {
+            ...endIconProps,
             disabled: inputProps?.disabled,
             isOpen: isOpen,
           }),
           multiple
-            ? React.createElement(index_js_3.AutoclearingHiddenLiveRegion, {
+            ? React.createElement(index_js_1.AutoclearingHiddenLiveRegion, {
                 text: liveRegionSelection,
               })
             : null,
         ),
         React.createElement(
-          ComboBoxDropdown_js_1.ComboBoxDropdown,
-          { ...dropdownMenuProps, onShow: onShow, onHide: onHide },
-          React.createElement(
-            ComboBoxMenu_js_1.ComboBoxMenu,
-            null,
-            filteredOptions.length > 0 && !enableVirtualization
-              ? filteredOptions.map(getMenuItem)
-              : emptyContent,
-          ),
+          ComboBoxMenu_js_1.ComboBoxMenu,
+          { as: 'div', ...dropdownMenuProps },
+          filteredOptions.length > 0 && !enableVirtualization
+            ? filteredOptions.map(getMenuItem)
+            : emptyContent,
         ),
       ),
     ),

package/cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -9,10 +9,11 @@ const tslib_1 = require('tslib');
 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(
-    index_js_1.Icon,
+    Icon_js_1.Icon,
     {
       as: 'span',
       ref: forwardedRef,

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Input } from '../Input/index.js';
+import { Input } from '../Input/Input.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type ComboBoxInputProps = {
     selectTags?: JSX.Element[];

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -7,16 +7,16 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Input/index.js');
-const index_js_2 = require('../utils/index.js');
+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,
-    onFocus: onFocusProp,
     onClick: onClickProp,
     selectTags,
+    size,
     ...rest
   } = props;
   const {
@@ -26,13 +26,20 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     enableVirtualization,
     multiple,
     onClickHandler,
-  } = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxStateContext);
-  const dispatch = (0, index_js_2.useSafeContext)(
+    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_2.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
-  const refs = (0, index_js_2.useMergedRefs)(inputRef, forwardedRef);
+  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;
@@ -44,7 +51,6 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
   };
   const handleKeyDown = React.useCallback(
     (event) => {
-      onKeyDownProp?.(event);
       const length = Object.keys(optionsExtraInfoRef.current).length ?? 0;
       if (event.altKey) {
         return;
@@ -53,7 +59,7 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         case 'ArrowDown': {
           event.preventDefault();
           if (!isOpen) {
-            return dispatch({ type: 'open' });
+            return show();
           }
           if (length === 0) {
             return;
@@ -95,7 +101,7 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         case 'ArrowUp': {
           event.preventDefault();
           if (!isOpen) {
-            return dispatch({ type: 'open' });
+            return show();
           }
           if (length === 0) {
             return;
@@ -139,17 +145,17 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
               onClickHandler?.(focusedIndexRef.current);
             }
           } else {
-            dispatch({ type: 'open' });
+            show();
           }
           break;
         }
         case 'Escape': {
           event.preventDefault();
-          dispatch({ type: 'close' });
+          hide();
           break;
         }
         case 'Tab':
-          dispatch({ type: 'close' });
+          hide();
           break;
       }
     },
@@ -159,32 +165,27 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
       isOpen,
       menuRef,
       onClickHandler,
-      onKeyDownProp,
       optionsExtraInfoRef,
+      show,
+      hide,
     ],
   );
-  const handleFocus = React.useCallback(
-    (event) => {
-      dispatch({ type: 'open' });
-      onFocusProp?.(event);
-    },
-    [dispatch, onFocusProp],
-  );
   const handleClick = React.useCallback(() => {
     if (!isOpen) {
-      dispatch({ type: 'open' });
+      show();
+    } else {
+      hide();
     }
-  }, [dispatch, isOpen]);
+  }, [hide, isOpen, show]);
   const [tagContainerWidthRef, tagContainerWidth] = (0,
-  index_js_2.useContainerWidth)();
+  index_js_1.useContainerWidth)();
   return React.createElement(
     React.Fragment,
     null,
-    React.createElement(index_js_1.Input, {
+    React.createElement(Input_js_1.Input, {
       ref: refs,
-      onKeyDown: handleKeyDown,
-      onClick: (0, index_js_2.mergeEventHandlers)(onClickProp, handleClick),
-      onFocus: handleFocus,
+      onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, handleClick),
+      'aria-expanded': isOpen,
       'aria-activedescendant':
         isOpen && focusedIndex != undefined && focusedIndex > -1
           ? getIdFromIndex(focusedIndex)
@@ -197,7 +198,14 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
       autoCorrect: 'off',
       style: multiple ? { paddingInlineStart: tagContainerWidth + 18 } : {},
       'aria-describedby': multiple ? `${id}-selected-live` : undefined,
-      ...rest,
+      size: size,
+      ...popover.getReferenceProps({
+        onKeyDown: (0, index_js_1.mergeEventHandlers)(
+          onKeyDownProp,
+          handleKeyDown,
+        ),
+        ...rest,
+      }),
     }),
     multiple && selectTags
       ? React.createElement(

package/cjs/core/ComboBox/ComboBoxInputContainer.js

@@ -7,23 +7,23 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../StatusMessage/index.js');
-const index_js_2 = require('../utils/index.js');
+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_2.useSafeContext)(
+  const { id } = (0, index_js_1.useSafeContext)(
     helpers_js_1.ComboBoxStateContext,
   );
   return React.createElement(
-    index_js_2.InputContainer,
+    index_js_1.InputContainer,
     {
       className: className,
       status: status,
       statusMessage:
         typeof message === 'string'
           ? React.createElement(
-              index_js_1.StatusMessage,
+              StatusMessage_js_1.StatusMessage,
               { status: status },
               message,
             )
@@ -34,7 +34,7 @@ exports.ComboBoxInputContainer = React.forwardRef((props, forwardedRef) => {
       id: id,
     },
     React.createElement(
-      index_js_2.Box,
+      index_js_1.Box,
       { className: 'iui-input-with-icon' },
       children,
     ),

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

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

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -6,116 +6,94 @@ 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('../Menu/index.js');
-const index_js_2 = require('../Surface/index.js');
-const index_js_3 = require('../utils/index.js');
+const Menu_js_1 = require('../Menu/Menu.js');
+const index_js_1 = require('../utils/index.js');
 const helpers_js_1 = require('./helpers.js');
-const isOverflowOverlaySupported = () =>
-  (0, index_js_3.getWindow)()?.CSS?.supports?.('overflow: overlay');
-const VirtualizedComboBoxMenu = React.forwardRef(
-  ({ children, className, style, ...rest }, forwardedRef) => {
-    const { minWidth, id, filteredOptions, getMenuItem, focusedIndex } = (0,
-    index_js_3.useSafeContext)(helpers_js_1.ComboBoxStateContext);
-    const { menuRef } = (0, index_js_3.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 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
+        ? 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}"]`,
     );
-    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_3.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,
-    });
-    const surfaceStyles = {
-      minInlineSize: minWidth,
-      // set as constant because we don't want it shifting when items are unmounted
-      maxInlineSize: minWidth,
-      // max-height must be on the outermost element for virtual scroll
-      maxBlockSize: 'calc((var(--iui-component-height) - 1px) * 8.5)',
-      overflowY: isOverflowOverlaySupported() ? 'overlay' : 'auto',
-      ...style,
-    };
-    return React.createElement(
-      index_js_2.Surface,
-      { style: surfaceStyles },
-      React.createElement(
-        'div',
-        { ...outerProps },
-        React.createElement(
-          index_js_1.Menu,
-          {
-            id: `${id}-list`,
-            setFocus: false,
-            role: 'listbox',
-            ref: (0, index_js_3.mergeRefs)(
-              menuRef,
-              innerProps.ref,
-              forwardedRef,
-            ),
-            className: className,
-            style: innerProps.style,
-            ...rest,
-          },
-          visibleChildren,
-        ),
-      ),
+    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 { className, style, ...rest } = props;
-  const { minWidth, id, enableVirtualization } = (0, index_js_3.useSafeContext)(
+  const { children, style, ...rest } = props;
+  const { id, enableVirtualization, popover } = (0, index_js_1.useSafeContext)(
     helpers_js_1.ComboBoxStateContext,
   );
-  const { menuRef } = (0, index_js_3.useSafeContext)(
+  const { menuRef } = (0, index_js_1.useSafeContext)(
     helpers_js_1.ComboBoxRefsContext,
   );
-  const refs = (0, index_js_3.useMergedRefs)(menuRef, forwardedRef);
-  const styles = React.useMemo(
-    () => ({
-      minInlineSize: minWidth,
-      maxInlineSize: `min(${minWidth * 2}px, 90vw)`,
-    }),
-    [minWidth],
+  const refs = (0, index_js_1.useMergedRefs)(
+    popover.refs.setFloating,
+    forwardedRef,
+    menuRef,
   );
-  return React.createElement(
-    React.Fragment,
-    null,
-    !enableVirtualization
-      ? React.createElement(index_js_1.Menu, {
+  return (
+    popover.open &&
+    React.createElement(
+      index_js_1.Portal,
+      { portal: true },
+      React.createElement(
+        Menu_js_1.Menu,
+        {
           id: `${id}-list`,
-          style: { ...styles, ...style },
           setFocus: false,
           role: 'listbox',
           ref: refs,
-          className: (0, classnames_1.default)('iui-scroll', className),
-          ...rest,
-        })
-      : React.createElement(VirtualizedComboBoxMenu, {
-          ref: forwardedRef,
-          ...props,
-        }),
+          ...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';

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

@@ -1,5 +1,6 @@
 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[];
@@ -33,13 +34,15 @@ export declare const ComboBoxRefsContext: React.Context<{
 type ComboBoxStateContextProps<T = unknown> = {
     isOpen: boolean;
     id: string;
-    minWidth: number;
     enableVirtualization: boolean;
     filteredOptions: SelectOption<T>[];
     onClickHandler?: (prop: number) => void;
     getMenuItem: (option: SelectOption<T>, filteredIndex?: number) => JSX.Element;
     focusedIndex?: 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>;

package/cjs/core/DatePicker/DatePicker.d.ts

@@ -87,6 +87,15 @@ type DatePickerProps = {
      * Disabled dates cannot be selected.
      */
     isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Whether there is a background, border, shadow, etc.
+     *
+     * Should be set to true if used in a popover that doesn't have its own background,
+     * or set to false if the popover has its own background or embedding within a page.
+     *
+     * @default true
+     */
+    applyBackground?: boolean;
 } & DateRangePickerProps & Omit<TimePickerProps, 'date' | 'onChange' | 'setFocusHour'>;
 /**
  * Date picker component