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

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

@@ -9068,15 +9068,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 +9083,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 +9271,6 @@ function useRestoreFocusOnClose({
   });
 }
 
-/* eslint-disable no-param-reassign */
-
 /**
  * Parse a Popover placement into floating-ui placement or auto-placement config.
  */
@@ -9306,6 +9300,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 +9334,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 +9379,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 +9391,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 +9444,12 @@ function usePopoverStyle({
   hasArrow,
   fitToAnchorWidth,
   fitWithinViewportHeight,
+  width,
+  minWidth,
+  maxWidth,
+  height,
+  minHeight,
+  maxHeight,
   boundaryRef,
   anchorRef,
   placement,
@@ -9421,10 +9466,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 +9550,12 @@ const _InnerPopover = forwardRef((props, ref) => {
     fitToAnchorWidth,
     fitWithinViewportHeight,
     focusTrapZoneElement,
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
     offset,
     placement = DEFAULT_PROPS$Y.placement,
     style,
@@ -9519,6 +9576,12 @@ const _InnerPopover = forwardRef((props, ref) => {
     hasArrow,
     fitToAnchorWidth,
     fitWithinViewportHeight,
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
     boundaryRef,
     anchorRef,
     placement,
@@ -9781,6 +9844,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 +9887,7 @@ const ComboboxPopover$1 = (props, {
     closeOnEscape = false,
     fitToAnchorWidth = true,
     isOpen,
+    maxHeight = DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT,
     placement = 'bottom-start',
     anchorRef,
     handleClose,
@@ -9831,6 +9897,7 @@ const ComboboxPopover$1 = (props, {
     ...forwardedProps,
     placement: placement,
     fitToAnchorWidth: fitToAnchorWidth,
+    maxHeight: maxHeight,
     className: block$S([className]),
     anchorRef: anchorRef,
     isOpen: isOpen,