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

package/components-and-utils.css

@@ -5004,7 +5004,6 @@ table {
 }
 
 .lumx-combobox-popover {
-  max-height: 50vh;
   color: var(--lumx-color-dark-N);
 }
 .lumx-combobox-popover__scroll {

package/js/components/Combobox/ComboboxPopover.d.ts

@@ -1,5 +1,6 @@
-import type { CommonRef, HasClassName, JSXElement, LumxClassName } from '../../types';
-import type { FitAnchorWidth, Placement } from '../Popover/constants';
+import type { HasClassName, JSXElement, LumxClassName } from '../../types';
+import type { PopoverProps } from '../Popover';
+import type { PopoverSizes } from '../Popover/types';
 /**
  * Component display name.
  */
@@ -8,26 +9,13 @@ export declare const COMPONENT_NAME = "ComboboxPopover";
  * Component default class name.
  */
 export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+type InheritedPopoverProps = Pick<PopoverProps, 'closeOnClickAway' | 'closeOnEscape' | 'fitToAnchorWidth' | 'isOpen' | 'anchorRef' | 'placement' | 'handleClose'> & PopoverSizes;
 /**
  * Defines the props for the core ComboboxPopover template.
  */
-export interface ComboboxPopoverProps extends HasClassName {
+export interface ComboboxPopoverProps extends HasClassName, InheritedPopoverProps {
     /** Content (should contain a ComboboxList). */
     children?: JSXElement;
-    /** Whether a click anywhere out of the popover would close it. */
-    closeOnClickAway?: boolean;
-    /** Whether an escape key press would close the popover. */
-    closeOnEscape?: boolean;
-    /** Manage popover width relative to anchor. Defaults to `true` (minWidth). */
-    fitToAnchorWidth?: FitAnchorWidth | boolean;
-    /** Whether the combobox is open. */
-    isOpen?: boolean;
-    /** Placement relative to anchor. Defaults to `'bottom-start'`. */
-    placement?: Placement;
-    /** Reference to the anchor element for popover positioning. */
-    anchorRef?: CommonRef;
-    /** Callback invoked when the popover requests to close (click away, escape). */
-    handleClose?(): void;
 }
 /**
  * Injected framework-specific components for ComboboxPopover rendering.
@@ -50,3 +38,4 @@ export interface ComboboxPopoverComponents {
  * @return JSX element.
  */
 export declare const ComboboxPopover: (props: ComboboxPopoverProps, { Popover, FlexBox }: ComboboxPopoverComponents) => import("react").JSX.Element;
+export {};

package/js/components/Combobox/constants.d.ts

@@ -0,0 +1,2 @@
+import { VHSize } from '../../utils/browser/css/types';
+export declare const DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT: VHSize;

package/js/components/Popover/Stories.d.ts

@@ -1,5 +1,6 @@
 import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-import { Placement, type Elevation, FitAnchorWidth } from './constants';
+import { Placement, FitAnchorWidth } from './constants';
+import { type Elevation } from './types';
 /**
  * Core stories for the Popover component.
  *
@@ -34,7 +35,7 @@ export declare function setup({ component: Popover, render, decorators: { withCo
             focusElement?: import("../../types").CommonRef;
             focusAnchorOnClose?: boolean | undefined;
             hasArrow?: boolean | undefined;
-            offset?: import("./constants").Offset | undefined;
+            offset?: import("./types").Offset | undefined;
             parentElement?: import("../../types").CommonRef;
             placement?: Placement | undefined;
             usePortal?: boolean | undefined;
@@ -136,4 +137,20 @@ export declare function setup({ component: Popover, render, decorators: { withCo
         };
         decorators: ((story: any, context: any) => any)[];
     };
+    Width: {
+        args: {
+            anchorClassName: string;
+            popoverClassName: string;
+            placement: "bottom";
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    Height: {
+        args: {
+            anchorClassName: string;
+            popoverClassName: string;
+            placement: "bottom";
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
 };

package/js/components/Popover/constants.d.ts

@@ -20,19 +20,6 @@ export declare const Placement: {
     readonly LEFT_START: "left-start";
 };
 export type Placement = ValueOf<typeof Placement>;
-/**
- * Offset of the popover.
- */
-export interface Offset {
-    /** Offset size along the reference. */
-    along?: number;
-    /** Offset size away from the reference. */
-    away?: number;
-}
-/**
- * Popover elevation index.
- */
-export type Elevation = 1 | 2 | 3 | 4 | 5;
 /**
  * Popover fit anchor width options.
  */
@@ -50,3 +37,7 @@ export declare const ARROW_SIZE = 14;
  * Popover default z-index
  */
 export declare const POPOVER_ZINDEX = 9999;
+/**
+ * Popover height/width sizes
+ */
+export declare const POPOVER_SIZES: readonly ["m", "l", "xl", "xxl"];

package/js/components/Popover/index.d.ts

@@ -1,5 +1,6 @@
 import type { JSXElement, HasTheme, HasClassName, HasCloseMode, CommonRef, LumxClassName } from '../../types';
-import { Elevation, FitAnchorWidth, Offset, Placement } from './constants';
+import { Placement, FitAnchorWidth } from './constants';
+import type { PopoverSizes, Elevation, Offset } from './types';
 /**
  * Shared popover props used by both React and Vue wrappers.
  *
@@ -28,7 +29,7 @@ export interface PopoverProps 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;
@@ -59,7 +60,7 @@ export interface PopoverProps extends HasClassName, HasTheme, HasCloseMode {
  * Internal UI rendering props for the core Popover component.
  * These are passed by the framework wrappers after processing the behavioral PopoverProps.
  */
-export interface PopoverUIProps extends HasClassName, HasTheme, HasCloseMode {
+export interface PopoverUIProps extends HasClassName, HasTheme, HasCloseMode, PopoverSizes {
     /** Customize the root element tag. */
     as?: string;
     /** Content. */

package/js/components/Popover/types.d.ts

@@ -0,0 +1,35 @@
+import type { VHSize, PXSize } from '../../utils/browser/css/types';
+import type { POPOVER_SIZES } from './constants';
+/**
+ * Offset of the popover.
+ */
+export interface Offset {
+    /** Offset size along the reference. */
+    along?: number;
+    /** Offset size away from the reference. */
+    away?: number;
+}
+/**
+ * Popover elevation index.
+ */
+export type Elevation = 1 | 2 | 3 | 4 | 5;
+/** Popover size value — pixel value, or "t-shirt" size token. */
+export type PopoverSize = PXSize | (typeof POPOVER_SIZES)[number];
+/** Popover height value — extends PopoverSize with viewport-relative unit. */
+export type PopoverHeight = PopoverSize | VHSize;
+/** Popover width value — same as PopoverSize (pixels or t-shirt only). */
+export type PopoverWidth = PopoverSize;
+export 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;
+}

package/js/components/Popover/utils/buildPopoverMiddleware.d.ts

@@ -0,0 +1,25 @@
+import { type Middleware } from '@floating-ui/dom';
+import type { Offset, PopoverSizes } from '../types';
+import { type parseAutoPlacement } from './parseAutoPlacement';
+export interface BuildPopoverMiddlewareOptions extends PopoverSizes {
+    /** Offset from the anchor element. */
+    offset?: Offset;
+    /** Whether the popover has an arrow. */
+    hasArrow?: boolean;
+    /** CSS property to fit to anchor width ('minWidth', 'maxWidth', 'width'). Already parsed via `parseFitWidth`. */
+    fitWidth?: string;
+    /** Constrain popover height to avoid overflowing the viewport. */
+    fitWithinViewportHeight?: boolean;
+    /** Boundary element for overflow detection. */
+    boundary?: HTMLElement;
+    /** Parsed placement result from `parseAutoPlacement`. */
+    parsedPlacement: ReturnType<typeof parseAutoPlacement>;
+    /** Arrow element (required when hasArrow is true). */
+    arrowElement?: HTMLElement | null;
+}
+/**
+ * Build the floating-ui middleware array for popover positioning.
+ *
+ * Middleware order: offset → flip/autoPlacement → shift → size → arrow
+ */
+export declare function buildPopoverMiddleware(options: BuildPopoverMiddlewareOptions): Middleware[];

package/js/components/Popover/utils/computeArrowStyles.d.ts

@@ -0,0 +1,5 @@
+import { type MiddlewareData } from '@floating-ui/dom';
+/**
+ * Compute arrow CSS styles from floating-ui middleware data.
+ */
+export declare function computeArrowStyles(arrowData?: MiddlewareData['arrow']): Record<string, string> | undefined;

package/js/components/Popover/utils/getFloatingPlacement.d.ts

@@ -0,0 +1,7 @@
+import { type Placement as FloatingPlacement } from '@floating-ui/dom';
+import { type parseAutoPlacement } from './parseAutoPlacement';
+/**
+ * Get the floating-ui placement from the parsed placement config.
+ * Returns undefined for auto-placement (floating-ui handles it via autoPlacement middleware).
+ */
+export declare function getFloatingPlacement(parsedPlacement: ReturnType<typeof parseAutoPlacement>): FloatingPlacement | undefined;

package/js/components/Popover/utils/index.d.ts

@@ -0,0 +1,5 @@
+export { parseAutoPlacement } from './parseAutoPlacement';
+export { parseFitWidth } from './parseFitWidth';
+export { buildPopoverMiddleware, type BuildPopoverMiddlewareOptions } from './buildPopoverMiddleware';
+export { computeArrowStyles } from './computeArrowStyles';
+export { getFloatingPlacement } from './getFloatingPlacement';

package/js/components/Popover/utils/parseAutoPlacement.d.ts

@@ -0,0 +1,22 @@
+import { type Placement as FloatingPlacement } from '@floating-ui/dom';
+import { type Placement } from '../constants';
+/**
+ * Parse a Popover placement into floating-ui placement or auto-placement config.
+ */
+export declare function parseAutoPlacement(placement?: Placement): {
+    isAuto: true;
+    autoAlignment?: undefined;
+    floatingPlacement?: undefined;
+} | {
+    isAuto: true;
+    autoAlignment: "start";
+    floatingPlacement?: undefined;
+} | {
+    isAuto: true;
+    autoAlignment: "end";
+    floatingPlacement?: undefined;
+} | {
+    floatingPlacement: FloatingPlacement;
+    isAuto: false;
+    autoAlignment?: undefined;
+};

package/js/components/Popover/utils/parseFitWidth.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Parse the fitToAnchorWidth option into the CSS property name to apply.
+ */
+export declare function parseFitWidth(fitToAnchorWidth?: string | boolean): string | undefined;

package/js/utils/browser/css/combineSize.d.ts

@@ -0,0 +1,4 @@
+/** Combine two CSS values with `min()`. */
+export declare const cssMin: (size1?: string, size2?: string) => string;
+/** Combine two CSS values with `max()`. */
+export declare const cssMax: (size1?: string, size2?: string) => string;

package/js/utils/browser/css/resolveCssSize.d.ts

@@ -0,0 +1,4 @@
+import { GlobalSize } from '../../../constants/enums';
+import type { VarSize } from './types';
+/** Resolve a t-shirt size token to its CSS custom property, or pass through as-is. */
+export declare function resolveCssSize<V extends string | undefined>(value: V): V extends GlobalSize ? VarSize<V> : V;

package/js/utils/browser/css/types.d.ts

@@ -0,0 +1,7 @@
+import type { GlobalSize } from '../../../constants/enums';
+/** Viewport-relative height value, e.g. `50vh`. */
+export type VHSize = `${number}vh`;
+/** Pixel value, e.g. `12px`. */
+export type PXSize = `${number}px`;
+/** CSS custom property referencing a LumX t-shirt size token, e.g. `var(--lumx-size-m)`. */
+export type VarSize<S extends GlobalSize = GlobalSize> = `var(--lumx-size-${S})`;

package/lumx.css

@@ -5685,7 +5685,6 @@ table {
 }
 
 .lumx-combobox-popover {
-  max-height: 50vh;
   color: var(--lumx-color-dark-N);
 }
 .lumx-combobox-popover__scroll {

package/package.json

@@ -7,7 +7,7 @@
     },
     "dependencies": {
         "@floating-ui/dom": "^1.7.5",
-        "@lumx/icons": "^4.18.0-next.0",
+        "@lumx/icons": "^4.18.0-next.2",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.18.1",
@@ -66,7 +66,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.18.0-next.0",
+    "version": "4.18.0-next.2",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",

package/scss/components/combobox/_index.scss

@@ -13,7 +13,6 @@
 // ---- Popover -----------------------
 
 .#{$lumx-base-prefix}-combobox-popover {
-    max-height: 50vh;
     color: var(--lumx-color-dark-N);
 
     &__scroll {

package/js/components/Popover/popoverStyle.d.ts

@@ -1,57 +0,0 @@
-import { type Middleware, type Placement as FloatingPlacement, type MiddlewareData } from '@floating-ui/dom';
-import { type Offset, type Placement } from './constants';
-/**
- * Parse a Popover placement into floating-ui placement or auto-placement config.
- */
-export declare function parseAutoPlacement(placement?: Placement): {
-    isAuto: true;
-    autoAlignment?: undefined;
-    floatingPlacement?: undefined;
-} | {
-    isAuto: true;
-    autoAlignment: "start";
-    floatingPlacement?: undefined;
-} | {
-    isAuto: true;
-    autoAlignment: "end";
-    floatingPlacement?: undefined;
-} | {
-    floatingPlacement: FloatingPlacement;
-    isAuto: false;
-    autoAlignment?: undefined;
-};
-/**
- * Parse the fitToAnchorWidth option into the CSS property name to apply.
- */
-export declare function parseFitWidth(fitToAnchorWidth?: string | boolean): string | undefined;
-export interface BuildPopoverMiddlewareOptions {
-    /** Offset from the anchor element. */
-    offset?: Offset;
-    /** Whether the popover has an arrow. */
-    hasArrow?: boolean;
-    /** CSS property to fit to anchor width ('minWidth', 'maxWidth', 'width'). Already parsed via `parseFitWidth`. */
-    fitWidth?: string;
-    /** Whether to constrain height to viewport. */
-    fitWithinViewportHeight?: boolean;
-    /** Boundary element for overflow detection. */
-    boundary?: HTMLElement;
-    /** Parsed placement result from `parseAutoPlacement`. */
-    parsedPlacement: ReturnType<typeof parseAutoPlacement>;
-    /** Arrow element (required when hasArrow is true). */
-    arrowElement?: HTMLElement | null;
-}
-/**
- * Build the floating-ui middleware array for popover positioning.
- *
- * Middleware order: offset → flip/autoPlacement → shift → size → arrow
- */
-export declare function buildPopoverMiddleware(options: BuildPopoverMiddlewareOptions): Middleware[];
-/**
- * Compute arrow CSS styles from floating-ui middleware data.
- */
-export declare function computeArrowStyles(arrowData?: MiddlewareData['arrow']): Record<string, string> | undefined;
-/**
- * Get the floating-ui placement from the parsed placement config.
- * Returns undefined for auto-placement (floating-ui handles it via autoPlacement middleware).
- */
-export declare function getFloatingPlacement(parsedPlacement: ReturnType<typeof parseAutoPlacement>): FloatingPlacement | undefined;