@lumx/react 4.18.0-next.0 → 4.18.0-next.2

package/index.d.ts

@@ -1457,6 +1457,25 @@ declare const Placement: {
     readonly LEFT_START: "left-start";
 };
 type Placement = ValueOf<typeof Placement>;
+/**
+ * Popover fit anchor width options.
+ */
+declare const FitAnchorWidth: {
+    readonly MAX_WIDTH: "maxWidth";
+    readonly MIN_WIDTH: "minWidth";
+    readonly WIDTH: "width";
+};
+type FitAnchorWidth = ValueOf<typeof FitAnchorWidth>;
+/**
+ * Popover height/width sizes
+ */
+declare const POPOVER_SIZES: readonly ["m", "l", "xl", "xxl"];
+
+/** Viewport-relative height value, e.g. `50vh`. */
+type VHSize = `${number}vh`;
+/** Pixel value, e.g. `12px`. */
+type PXSize = `${number}px`;
+
 /**
  * Offset of the popover.
  */
@@ -1470,15 +1489,26 @@ interface Offset {
  * Popover elevation index.
  */
 type Elevation = 1 | 2 | 3 | 4 | 5;
-/**
- * Popover fit anchor width options.
- */
-declare const FitAnchorWidth: {
-    readonly MAX_WIDTH: "maxWidth";
-    readonly MIN_WIDTH: "minWidth";
-    readonly WIDTH: "width";
-};
-type FitAnchorWidth = ValueOf<typeof FitAnchorWidth>;
+/** Popover size value — pixel value, or "t-shirt" size token. */
+type PopoverSize = PXSize | (typeof POPOVER_SIZES)[number];
+/** Popover height value — extends PopoverSize with viewport-relative unit. */
+type PopoverHeight = PopoverSize | VHSize;
+/** Popover width value — same as PopoverSize (pixels or t-shirt only). */
+type PopoverWidth = PopoverSize;
+interface PopoverSizes {
+    /** Exact width (pixels or t-shirt size). Combines with `fitToAnchorWidth`: if both target the same CSS property, the explicit prop wins for `width`. */
+    width?: PopoverWidth;
+    /** Minimum width (pixels or t-shirt size). Combines with `fitToAnchorWidth='minWidth'` as `max(anchor, value)`. */
+    minWidth?: PopoverWidth;
+    /** Maximum width (pixels or t-shirt size). Combines with `fitToAnchorWidth='maxWidth'` as `min(anchor, value)`. */
+    maxWidth?: PopoverWidth;
+    /** Exact height (pixels, vh, or t-shirt size). */
+    height?: PopoverHeight;
+    /** Minimum height (pixels, vh, or t-shirt size). */
+    minHeight?: PopoverHeight;
+    /** Maximum height (pixels, vh, or t-shirt size). Combines with `fitWithinViewportHeight` as `min(maxHeight, available)`. */
+    maxHeight?: PopoverHeight;
+}
 
 /**
  * Shared popover props used by both React and Vue wrappers.
@@ -1508,7 +1538,7 @@ interface PopoverProps$1 extends HasClassName, HasTheme, HasCloseMode {
      *   - `width`: popover equal to the anchor.
      */
     fitToAnchorWidth?: FitAnchorWidth | boolean;
-    /** Shrink popover if even after flipping there is not enough space. */
+    /** Constrain popover height to avoid overflowing the viewport. */
     fitWithinViewportHeight?: boolean;
     /** Element to focus when opening the popover. */
     focusElement?: CommonRef;
@@ -1541,7 +1571,7 @@ interface PopoverProps$1 extends HasClassName, HasTheme, HasCloseMode {
  * Extends core PopoverProps, overriding ref-typed props with React-specific `RefObject` types
  * and replacing `handleClose` with the React-idiomatic `onClose` callback.
  */
-interface PopoverProps extends GenericProps$1, ReactToJSX<PopoverProps$1, 'anchorRef' | 'as' | 'boundaryRef' | 'focusElement' | 'parentElement' | 'focusTrapZoneElement' | 'className'> {
+interface PopoverProps extends GenericProps$1, ReactToJSX<PopoverProps$1, 'anchorRef' | 'as' | 'boundaryRef' | 'focusElement' | 'parentElement' | 'focusTrapZoneElement' | 'className'>, PopoverSizes {
     /** Reference to the DOM element used to set the position of the popover. */
     anchorRef: RefObject<HTMLElement>;
     /** Customize the root element. (Must accept ref forwarding and props forwarding!). */
@@ -5742,4 +5772,4 @@ declare const ThemeProvider: React__default.FC<{
 declare function useTheme(): ThemeContextValue;
 
 export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, CLASSNAME$2 as CLASSNAME, COMPONENT_NAME$2 as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, MenuButton, ListDivider as MenuDivider, MenuItem, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectButton, SelectMultiple, SelectMultipleField, SelectTextField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, CLASSNAME as TIME_PICKER_FIELD_CLASSNAME, COMPONENT_NAME as TIME_PICKER_FIELD_COMPONENT_NAME, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableCellVariant as TableCellVariantType, TableHeader, TableRow, Text, TextField, ThOrder, ThOrder as ThOrderType, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, TimePickerField, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, useFocusPointStyle, useHeadingLevel, useTheme };
-export type { AlertDialogProps, AutocompleteMultipleProps, AutocompleteProps, AvatarProps, AvatarSize, BadgeProps, BadgeWrapperProps, BaseButtonProps, ButtonGroupProps, ButtonProps, ButtonSize, CheckboxProps, ChipGroupProps, ChipProps, ComboboxButtonProps, ComboboxInputProps, ComboboxListProps, ComboboxOptionActionProps, ComboboxOptionMoreInfoProps, ComboboxOptionProps, ComboboxOptionSkeletonProps, ComboboxPopoverComponentProps, ComboboxPopoverProps, ComboboxProviderProps, ComboboxSectionProps, ComboboxStateProps, CommentBlockProps, DatePickerControlledProps, DatePickerFieldProps, DatePickerProps, DialogProps, DialogSizes, DividerProps, DragHandleProps, DropdownProps, Elevation, ExpansionPanelProps, FlagProps, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, FocusPoint, GapSize, GenericBlockProps, GenericBlockSectionProps, GridColumnGapSize, GridColumnProps, GridItemProps, GridProps, HeadingLevelProviderProps, HeadingProps, IconButtonProps, IconProps, IconSizes, ImageBlockProps, ImageBlockSize, ImageLightboxProps, InlineListProps, InputHelperProps, InputLabelProps, LightboxProps, LinkPreviewProps, LinkProps, ListDividerProps, ListItemProps, ListItemSize, ListProps, ListSectionProps, ListSubheaderProps, MarginAutoAlignment, MenuButtonProps, ListDividerProps as MenuDividerProps, MenuItemActionProps, MenuItemProps, MessageProps, MosaicProps, MultipleSelectButtonProps, MultipleSelectTextFieldProps, NavigationProps, NotificationProps, Offset, PopoverDialogProps, PopoverProps, PostBlockProps, ProgressCircularProps, ProgressCircularSize, ProgressLinearProps, ProgressProps, ProgressTrackerProps, ProgressTrackerProviderProps, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, RadioButtonProps, RadioGroupProps, RawInputTextProps, RawInputTextareaProps, SelectButtonProps, SelectListStatus as SelectButtonStatus, SelectButtonTranslations, SelectListStatus, SelectMultipleProps, SelectProps, SelectTextFieldProps, SelectListStatus as SelectTextFieldStatus, SelectTextFieldTranslations, SelectionChipGroupProps, SideNavigationItemProps, SideNavigationProps, SingleSelectButtonProps, SingleSelectTextFieldProps, SkeletonCircleProps, SkeletonRectangleProps, SkeletonTypographyProps, SliderProps, SlidesProps, SlideshowControlsProps, SlideshowItemProps, SlideshowProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabProviderProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TextFieldProps, TextProps, ThumbnailProps, ThumbnailSize, TimePickerFieldProps, ToolbarProps, TooltipPlacement, TooltipProps, UploaderProps, UploaderSize, UserBlockProps, UserBlockSize };
+export type { AlertDialogProps, AutocompleteMultipleProps, AutocompleteProps, AvatarProps, AvatarSize, BadgeProps, BadgeWrapperProps, BaseButtonProps, ButtonGroupProps, ButtonProps, ButtonSize, CheckboxProps, ChipGroupProps, ChipProps, ComboboxButtonProps, ComboboxInputProps, ComboboxListProps, ComboboxOptionActionProps, ComboboxOptionMoreInfoProps, ComboboxOptionProps, ComboboxOptionSkeletonProps, ComboboxPopoverComponentProps, ComboboxPopoverProps, ComboboxProviderProps, ComboboxSectionProps, ComboboxStateProps, CommentBlockProps, DatePickerControlledProps, DatePickerFieldProps, DatePickerProps, DialogProps, DialogSizes, DividerProps, DragHandleProps, DropdownProps, Elevation, ExpansionPanelProps, FlagProps, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, FocusPoint, GapSize, GenericBlockProps, GenericBlockSectionProps, GridColumnGapSize, GridColumnProps, GridItemProps, GridProps, HeadingLevelProviderProps, HeadingProps, IconButtonProps, IconProps, IconSizes, ImageBlockProps, ImageBlockSize, ImageLightboxProps, InlineListProps, InputHelperProps, InputLabelProps, LightboxProps, LinkPreviewProps, LinkProps, ListDividerProps, ListItemProps, ListItemSize, ListProps, ListSectionProps, ListSubheaderProps, MarginAutoAlignment, MenuButtonProps, ListDividerProps as MenuDividerProps, MenuItemActionProps, MenuItemProps, MessageProps, MosaicProps, MultipleSelectButtonProps, MultipleSelectTextFieldProps, NavigationProps, NotificationProps, Offset, PopoverDialogProps, PopoverHeight, PopoverProps, PopoverWidth, PostBlockProps, ProgressCircularProps, ProgressCircularSize, ProgressLinearProps, ProgressProps, ProgressTrackerProps, ProgressTrackerProviderProps, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, RadioButtonProps, RadioGroupProps, RawInputTextProps, RawInputTextareaProps, SelectButtonProps, SelectListStatus as SelectButtonStatus, SelectButtonTranslations, SelectListStatus, SelectMultipleProps, SelectProps, SelectTextFieldProps, SelectListStatus as SelectTextFieldStatus, SelectTextFieldTranslations, SelectionChipGroupProps, SideNavigationItemProps, SideNavigationProps, SingleSelectButtonProps, SingleSelectTextFieldProps, SkeletonCircleProps, SkeletonRectangleProps, SkeletonTypographyProps, SliderProps, SlidesProps, SlideshowControlsProps, SlideshowItemProps, SlideshowProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabProviderProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TextFieldProps, TextProps, ThumbnailProps, ThumbnailSize, TimePickerFieldProps, ToolbarProps, TooltipPlacement, TooltipProps, UploaderProps, UploaderSize, UserBlockProps, UserBlockSize };

package/index.js

@@ -6460,6 +6460,12 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
   /** Last notified input value, to re-fire `optionsChange` when the user keeps typing while empty. */
   let lastInputValue = '';
 
+  /** Last notified loading state, used to replay current state to late subscribers. */
+  let lastLoadingState = false;
+
+  /** Number of currently mounted skeleton placeholders. */
+  let skeletonCount = 0;
+
   /** Event subscribers managed by the handle. */
   const subscribers = {
     open: new Set(),
@@ -6474,6 +6480,20 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
     subscribers[event].forEach(cb => cb(value));
   }
 
+  /** Count visible (non-filtered) options. */
+  function getVisibleOptionCount() {
+    let count = 0;
+    for (const reg of optionRegistrations.values()) {
+      if (!reg.lastFiltered) count += 1;
+    }
+    return count;
+  }
+
+  /** True when the popup has visible content (options or skeletons). */
+  function hasVisibleContent() {
+    return getVisibleOptionCount() > 0 || skeletonCount > 0;
+  }
+
   /**
    * Notify all registered sections and fire `optionsChange` if the visible option count changed
    * or if the input value changed while the list is empty (so `emptyMessage` callbacks get
@@ -6484,10 +6504,7 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
     for (const [sectionElement] of sectionRegistrations) {
       notifySection(sectionElement, sectionRegistrations, optionRegistrations);
     }
-    let visibleCount = 0;
-    for (const reg of optionRegistrations.values()) {
-      if (!reg.lastFiltered) visibleCount += 1;
-    }
+    const visibleCount = getVisibleOptionCount();
     const inputValue = trigger?.value ?? '';
     const isEmpty = visibleCount === 0;
     if (visibleCount !== lastOptionsLength || isEmpty && inputValue !== lastInputValue) {
@@ -6498,6 +6515,12 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
         inputValue
       });
     }
+
+    // Re-evaluate aria-expanded when the combobox is open — visible content may have
+    // changed due to filtering, option register/unregister, or skeleton transitions.
+    if (isOpenState) {
+      trigger?.setAttribute('aria-expanded', String(hasVisibleContent()));
+    }
   }
 
   // ── Skeleton loading tracking ──────────────────────────────
@@ -6505,9 +6528,6 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
   /** Delay before announcing loading in the live region (ms). */
   const LOADING_ANNOUNCEMENT_DELAY = 500;
 
-  /** Number of currently mounted skeleton placeholders. */
-  let skeletonCount = 0;
-
   /** Timer for debounced loading announcement. */
   let loadingTimer;
 
@@ -6533,6 +6553,7 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
    */
   function onSkeletonCountChange() {
     const isLoading = skeletonCount > 0;
+    lastLoadingState = isLoading;
     notify('loadingChange', isLoading);
     if (isLoading) {
       startLoadingAnnouncementTimer();
@@ -6735,8 +6756,8 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
         startLoadingAnnouncementTimer();
       }
 
-      // Update aria-expanded on trigger
-      trigger?.setAttribute('aria-expanded', String(isOpen));
+      // Update aria-expanded on trigger (false when no visible options or skeletons)
+      trigger?.setAttribute('aria-expanded', String(isOpen && hasVisibleContent()));
       notify('open', isOpen);
     },
     select(option) {
@@ -6871,6 +6892,17 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
     },
     subscribe(event, callback) {
       subscribers[event].add(callback);
+      // Replay current loading state to late subscribers so that framework wrappers
+      // that subscribe after initial mount (e.g. async Vue watchers) don't miss the
+      // initial events fired during mount.
+      if (event === 'open' && isOpenState) {
+        callback(true);
+      }
+      if (event === 'loadingChange' && lastLoadingState) {
+        callback(true);
+      }
+
+      // Cleanup function
       return () => {
         subscribers[event].delete(callback);
       };
@@ -6882,6 +6914,7 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       filterValue = '';
       lastOptionsLength = 0;
       lastInputValue = '';
+      lastLoadingState = false;
       optionRegistrations.clear();
       sectionRegistrations.clear();
       skeletonCount = 0;
@@ -7278,6 +7311,10 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
     setHandle
   } = useComboboxContext();
   const [isOpen] = useComboboxOpen();
+  const state = useComboboxEvent('optionsChange', {
+    optionsLength: 0
+  });
+  const isLoading = useComboboxEvent('loadingChange', false);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const {
     as,
@@ -7319,7 +7356,7 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
     value,
     labelDisplayMode,
     listboxId,
-    isOpen,
+    isOpen: isOpen && (!!state?.optionsLength || isLoading),
     ref: mergedRef
   }, {
     Button: ButtonComp,
@@ -8112,6 +8149,10 @@ const ComboboxInput = forwardRef((props, ref) => {
     setHandle
   } = useComboboxContext();
   const [isOpen, setIsOpen] = useComboboxOpen();
+  const state = useComboboxEvent('optionsChange', {
+    optionsLength: 0
+  });
+  const isLoading = useComboboxEvent('loadingChange', false);
   const {
     inputRef: externalInputRef,
     toggleButtonProps,
@@ -8160,7 +8201,7 @@ const ComboboxInput = forwardRef((props, ref) => {
     ...otherProps,
     ref,
     listboxId,
-    isOpen,
+    isOpen: isOpen && (!!state?.optionsLength || isLoading),
     filter,
     inputRef: mergedInputRef,
     textFieldRef: anchorRef,
@@ -9068,15 +9109,6 @@ const Placement = {
   LEFT_END: 'left-end',
   LEFT_START: 'left-start'
 };
-
-/**
- * Offset of the popover.
- */
-
-/**
- * Popover elevation index.
- */
-
 /**
  * Popover fit anchor width options.
  */
@@ -9092,6 +9124,11 @@ const ARROW_SIZE = 14;
  */
 const POPOVER_ZINDEX = 9999;
 
+/**
+ * Popover height/width sizes
+ */
+[Size.m, Size.l, Size.xl, Size.xxl];
+
 /**
  * Component display name.
  */
@@ -9275,8 +9312,6 @@ function useRestoreFocusOnClose({
   });
 }
 
-/* eslint-disable no-param-reassign */
-
 /**
  * Parse a Popover placement into floating-ui placement or auto-placement config.
  */
@@ -9306,6 +9341,29 @@ function parseFitWidth(fitToAnchorWidth) {
   if (typeof fitToAnchorWidth === 'string') return fitToAnchorWidth;
   return FitAnchorWidth.MIN_WIDTH;
 }
+
+/** Resolve a t-shirt size token to its CSS custom property, or pass through as-is. */
+
+function resolveCssSize(value) {
+  if (value && value in Size) return `var(--lumx-size-${value})`;
+  return value;
+}
+
+/** Create a CSS min()/max() combiner function. */
+function combineSize(combinator) {
+  return (size1, size2) => {
+    if (size1 && size2) return `${combinator}(${size1}, ${size2})`;
+    return size1 || size2 || '';
+  };
+}
+
+/** Combine two CSS values with `min()`. */
+const cssMin = combineSize('min');
+
+/** Combine two CSS values with `max()`. */
+const cssMax = combineSize('max');
+
+/* eslint-disable no-param-reassign */
 /**
  * Build the floating-ui middleware array for popover positioning.
  *
@@ -9317,10 +9375,24 @@ function buildPopoverMiddleware(options) {
     hasArrow,
     fitWidth,
     fitWithinViewportHeight,
+    width: rawWidth,
+    minWidth: rawMinWidth,
+    maxWidth: rawMaxWidth,
+    height: rawHeight,
+    minHeight: rawMinHeight,
+    maxHeight: rawMaxHeight,
     boundary,
     parsedPlacement,
     arrowElement
   } = options;
+
+  // Resolve t-shirt sizes to CSS pixel strings for the apply callback.
+  const width = resolveCssSize(rawWidth);
+  const minWidth = resolveCssSize(rawMinWidth);
+  const maxWidth = resolveCssSize(rawMaxWidth);
+  const height = resolveCssSize(rawHeight);
+  const minHeight = resolveCssSize(rawMinHeight);
+  const maxHeight = resolveCssSize(rawMaxHeight);
   const middlewares = [];
 
   // Offset middleware
@@ -9348,8 +9420,9 @@ function buildPopoverMiddleware(options) {
     } : {}));
   }
 
-  // Size middleware
-  if (fitWidth || fitWithinViewportHeight) {
+  // Size middleware — always required when any sizing constraint is set
+  const anySizeConstraint = !!fitWidth || !!fitWithinViewportHeight || width || minWidth || maxWidth || height || minHeight || maxHeight;
+  if (anySizeConstraint) {
     middlewares.push(size({
       ...(boundary ? {
         boundary
@@ -9359,14 +9432,21 @@ function buildPopoverMiddleware(options) {
         rects,
         elements
       }) {
-        if (fitWidth) {
-          Object.assign(elements.floating.style, {
-            [fitWidth]: `${rects.reference.width}px`
-          });
-        }
-        if (fitWithinViewportHeight) {
-          elements.floating.style.maxHeight = `${Math.max(0, availableHeight - ARROW_SIZE)}px`;
-        }
+        const anchorWidth = `${rects.reference.width}px`;
+
+        // Width: explicit width wins, else fitToAnchorWidth.
+        elements.floating.style.width = width || (fitWidth === 'width' ? anchorWidth : '');
+        // Min-width: anchor constrained by explicit min-width.
+        elements.floating.style.minWidth = cssMax(minWidth, fitWidth === 'minWidth' ? anchorWidth : '');
+        // Max-width: anchor constrained by explicit max-width.
+        elements.floating.style.maxWidth = cssMin(maxWidth, fitWidth === 'maxWidth' ? anchorWidth : '');
+
+        // Height: explicit values only.
+        elements.floating.style.height = height || '';
+        elements.floating.style.minHeight = minHeight || '';
+        // Max-height: viewport combined with explicit max-height.
+        const adaptedAvailableHeight = `${Math.max(0, availableHeight - ARROW_SIZE)}px`;
+        elements.floating.style.maxHeight = cssMin(maxHeight, fitWithinViewportHeight ? adaptedAvailableHeight : '');
       }
     }));
   }
@@ -9405,6 +9485,12 @@ function usePopoverStyle({
   hasArrow,
   fitToAnchorWidth,
   fitWithinViewportHeight,
+  width,
+  minWidth,
+  maxWidth,
+  height,
+  minHeight,
+  maxHeight,
   boundaryRef,
   anchorRef,
   placement,
@@ -9421,10 +9507,16 @@ function usePopoverStyle({
     hasArrow,
     fitWidth,
     fitWithinViewportHeight,
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
     boundary,
     parsedPlacement,
     arrowElement
-  }), [offset, hasArrow, fitWidth, fitWithinViewportHeight, boundary, parsedPlacement, arrowElement]);
+  }), [offset, hasArrow, fitWidth, fitWithinViewportHeight, width, minWidth, maxWidth, height, minHeight, maxHeight, boundary, parsedPlacement, arrowElement]);
   const anchorElement = anchorRef.current;
   const {
     floatingStyles,
@@ -9499,6 +9591,12 @@ const _InnerPopover = forwardRef((props, ref) => {
     fitToAnchorWidth,
     fitWithinViewportHeight,
     focusTrapZoneElement,
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
     offset,
     placement = DEFAULT_PROPS$Y.placement,
     style,
@@ -9519,6 +9617,12 @@ const _InnerPopover = forwardRef((props, ref) => {
     hasArrow,
     fitToAnchorWidth,
     fitWithinViewportHeight,
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
     boundaryRef,
     anchorRef,
     placement,
@@ -9781,6 +9885,8 @@ const ComboboxOptionSkeleton = props => {
 ComboboxOptionSkeleton.displayName = COMPONENT_NAME$1a;
 ComboboxOptionSkeleton.className = CLASSNAME$18;
 
+const DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT = '80vh';
+
 const COMPONENT_NAME$19 = 'ComboboxPopover';
 
 /**
@@ -9822,6 +9928,7 @@ const ComboboxPopover$1 = (props, {
     closeOnEscape = false,
     fitToAnchorWidth = true,
     isOpen,
+    maxHeight = DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT,
     placement = 'bottom-start',
     anchorRef,
     handleClose,
@@ -9831,6 +9938,7 @@ const ComboboxPopover$1 = (props, {
     ...forwardedProps,
     placement: placement,
     fitToAnchorWidth: fitToAnchorWidth,
+    maxHeight: maxHeight,
     className: block$S([className]),
     anchorRef: anchorRef,
     isOpen: isOpen,