@lumx/core 4.17.0 → 4.17.1-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5004,7 +5004,6 @@ table {
5004
5004
  }
5005
5005
 
5006
5006
  .lumx-combobox-popover {
5007
- max-height: 50vh;
5008
5007
  color: var(--lumx-color-dark-N);
5009
5008
  }
5010
5009
  .lumx-combobox-popover__scroll {
@@ -1,5 +1,6 @@
1
- import type { CommonRef, HasClassName, JSXElement, LumxClassName } from '../../types';
2
- import type { FitAnchorWidth, Placement } from '../Popover/constants';
1
+ import type { HasClassName, JSXElement, LumxClassName } from '../../types';
2
+ import type { PopoverProps } from '../Popover';
3
+ import type { PopoverSizes } from '../Popover/types';
3
4
  /**
4
5
  * Component display name.
5
6
  */
@@ -8,26 +9,13 @@ export declare const COMPONENT_NAME = "ComboboxPopover";
8
9
  * Component default class name.
9
10
  */
10
11
  export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
12
+ type InheritedPopoverProps = Pick<PopoverProps, 'closeOnClickAway' | 'closeOnEscape' | 'fitToAnchorWidth' | 'isOpen' | 'anchorRef' | 'placement' | 'handleClose'> & PopoverSizes;
11
13
  /**
12
14
  * Defines the props for the core ComboboxPopover template.
13
15
  */
14
- export interface ComboboxPopoverProps extends HasClassName {
16
+ export interface ComboboxPopoverProps extends HasClassName, InheritedPopoverProps {
15
17
  /** Content (should contain a ComboboxList). */
16
18
  children?: JSXElement;
17
- /** Whether a click anywhere out of the popover would close it. */
18
- closeOnClickAway?: boolean;
19
- /** Whether an escape key press would close the popover. */
20
- closeOnEscape?: boolean;
21
- /** Manage popover width relative to anchor. Defaults to `true` (minWidth). */
22
- fitToAnchorWidth?: FitAnchorWidth | boolean;
23
- /** Whether the combobox is open. */
24
- isOpen?: boolean;
25
- /** Placement relative to anchor. Defaults to `'bottom-start'`. */
26
- placement?: Placement;
27
- /** Reference to the anchor element for popover positioning. */
28
- anchorRef?: CommonRef;
29
- /** Callback invoked when the popover requests to close (click away, escape). */
30
- handleClose?(): void;
31
19
  }
32
20
  /**
33
21
  * Injected framework-specific components for ComboboxPopover rendering.
@@ -50,3 +38,4 @@ export interface ComboboxPopoverComponents {
50
38
  * @return JSX element.
51
39
  */
52
40
  export declare const ComboboxPopover: (props: ComboboxPopoverProps, { Popover, FlexBox }: ComboboxPopoverComponents) => import("react").JSX.Element;
41
+ export {};
@@ -28,7 +28,7 @@ export declare function setup({ components: { Combobox, IconButton, Button }, de
28
28
  onChange: (v: string) => void;
29
29
  onSelect?: (option: {
30
30
  value: string;
31
- }) => void;
31
+ }) => boolean | void;
32
32
  }) => import("react").JSX.Element;
33
33
  };
34
34
  ClickAwayClosesPopup: {
@@ -50,7 +50,7 @@ export declare function setup({ components: { Combobox, IconButton, Button }, de
50
50
  onChange: (v: string) => void;
51
51
  onSelect?: (option: {
52
52
  value: string;
53
- }) => void;
53
+ }) => boolean | void;
54
54
  }) => import("react").JSX.Element;
55
55
  };
56
56
  OptionMoreInfoKeyboardHighlight: {
@@ -114,7 +114,7 @@ export declare function setup({ components: { Combobox, IconButton, Button }, de
114
114
  value: string;
115
115
  onSelect: (option: {
116
116
  value: string;
117
- }) => void;
117
+ }) => boolean | void;
118
118
  }) => import("react").JSX.Element;
119
119
  };
120
120
  ButtonTypeaheadWhileOpen: {
@@ -127,7 +127,7 @@ export declare function setup({ components: { Combobox, IconButton, Button }, de
127
127
  value: string;
128
128
  onSelect: (option: {
129
129
  value: string;
130
- }) => void;
130
+ }) => boolean | void;
131
131
  }) => import("react").JSX.Element;
132
132
  };
133
133
  ButtonEndFromClosed: {
@@ -140,7 +140,7 @@ export declare function setup({ components: { Combobox, IconButton, Button }, de
140
140
  value: string;
141
141
  onSelect: (option: {
142
142
  value: string;
143
- }) => void;
143
+ }) => boolean | void;
144
144
  }) => import("react").JSX.Element;
145
145
  };
146
146
  ButtonHomeFromClosed: {
@@ -153,7 +153,7 @@ export declare function setup({ components: { Combobox, IconButton, Button }, de
153
153
  value: string;
154
154
  onSelect: (option: {
155
155
  value: string;
156
- }) => void;
156
+ }) => boolean | void;
157
157
  }) => import("react").JSX.Element;
158
158
  };
159
159
  ButtonArrowDownFromClosed: {
@@ -166,7 +166,7 @@ export declare function setup({ components: { Combobox, IconButton, Button }, de
166
166
  value: string;
167
167
  onSelect: (option: {
168
168
  value: string;
169
- }) => void;
169
+ }) => boolean | void;
170
170
  }) => import("react").JSX.Element;
171
171
  };
172
172
  ClearAfterSelect: {
@@ -180,7 +180,7 @@ export declare function setup({ components: { Combobox, IconButton, Button }, de
180
180
  onChange: (v: string) => void;
181
181
  onSelect?: (option: {
182
182
  value: string;
183
- }) => void;
183
+ }) => boolean | void;
184
184
  }) => import("react").JSX.Element;
185
185
  };
186
186
  };
@@ -50,65 +50,65 @@ export declare function createTemplates(Combobox: ComboboxNamespace, IconButton:
50
50
  onChange: (v: string) => void;
51
51
  onSelect?: (option: {
52
52
  value: string;
53
- }) => void;
53
+ }) => boolean | void;
54
54
  }) => import("react").JSX.Element;
55
55
  manualFilterTemplate: ({ value, onChange, onSelect, }: {
56
56
  value: string;
57
57
  onChange: (v: string) => void;
58
58
  onSelect?: (option: {
59
59
  value: string;
60
- }) => void;
60
+ }) => boolean | void;
61
61
  }) => import("react").JSX.Element;
62
62
  filterOffTemplate: ({ value, onChange, onSelect, }: {
63
63
  value: string;
64
64
  onChange: (v: string) => void;
65
65
  onSelect?: (option: {
66
66
  value: string;
67
- }) => void;
67
+ }) => boolean | void;
68
68
  }) => import("react").JSX.Element;
69
69
  openOnFocusTemplate: ({ value, onChange, onSelect, }: {
70
70
  value: string;
71
71
  onChange: (v: string) => void;
72
72
  onSelect?: (option: {
73
73
  value: string;
74
- }) => void;
74
+ }) => boolean | void;
75
75
  }) => import("react").JSX.Element;
76
76
  noOpenOnFocusTemplate: ({ value, onChange, onSelect, }: {
77
77
  value: string;
78
78
  onChange: (v: string) => void;
79
79
  onSelect?: (option: {
80
80
  value: string;
81
- }) => void;
81
+ }) => boolean | void;
82
82
  }) => import("react").JSX.Element;
83
83
  buttonTemplate: ({ value, onSelect }: {
84
84
  value: string;
85
85
  onSelect: (option: {
86
86
  value: string;
87
- }) => void;
87
+ }) => boolean | void;
88
88
  }) => import("react").JSX.Element;
89
89
  showLabelButtonTemplate: ({ value, onSelect, }: {
90
90
  value: string;
91
91
  onSelect: (option: {
92
92
  value: string;
93
- }) => void;
93
+ }) => boolean | void;
94
94
  }) => import("react").JSX.Element;
95
95
  showTooltipButtonTemplate: ({ value, onSelect, }: {
96
96
  value: string;
97
97
  onSelect: (option: {
98
98
  value: string;
99
- }) => void;
99
+ }) => boolean | void;
100
100
  }) => import("react").JSX.Element;
101
101
  noValueButtonTemplate: ({ value, onSelect, }: {
102
102
  value: string;
103
103
  onSelect: (option: {
104
104
  value: string;
105
- }) => void;
105
+ }) => boolean | void;
106
106
  }) => import("react").JSX.Element;
107
107
  selectedButtonTemplate: ({ value, onSelect, }: {
108
108
  value: string;
109
109
  onSelect: (option: {
110
110
  value: string;
111
- }) => void;
111
+ }) => boolean | void;
112
112
  }) => import("react").JSX.Element;
113
113
  disabledInputTemplate: ({ value, onChange }: {
114
114
  value: string;
@@ -118,14 +118,14 @@ export declare function createTemplates(Combobox: ComboboxNamespace, IconButton:
118
118
  value: string;
119
119
  onSelect: (option: {
120
120
  value: string;
121
- }) => void;
121
+ }) => boolean | void;
122
122
  }) => import("react").JSX.Element;
123
123
  gridInputTemplate: ({ value, onChange, onSelect, onDelete, onEdit, }: {
124
124
  value: string;
125
125
  onChange: (v: string) => void;
126
126
  onSelect?: (option: {
127
127
  value: string;
128
- }) => void;
128
+ }) => boolean | void;
129
129
  onDelete?: (...args: unknown[]) => void;
130
130
  onEdit?: (...args: unknown[]) => void;
131
131
  }) => import("react").JSX.Element;
@@ -133,7 +133,7 @@ export declare function createTemplates(Combobox: ComboboxNamespace, IconButton:
133
133
  value: string;
134
134
  onSelect: (option: {
135
135
  value: string;
136
- }) => void;
136
+ }) => boolean | void;
137
137
  onDelete?: (...args: unknown[]) => void;
138
138
  }) => import("react").JSX.Element;
139
139
  emptyStateTemplate: ({ value, onChange }: {
@@ -0,0 +1,2 @@
1
+ import { VHSize } from '../../utils/browser/css/types';
2
+ export declare const DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT: VHSize;
@@ -41,10 +41,14 @@ export interface ComboboxEventMap {
41
41
  }
42
42
  /** Callbacks provided by the consumer (React/Vue) to react to combobox state changes. */
43
43
  export interface ComboboxCallbacks {
44
- /** Called when an option is selected (click or keyboard). */
44
+ /**
45
+ * Called when an option is selected (click or keyboard).
46
+ * Return `false` to skip the default behaviour of updating the input value via `onChange`.
47
+ * The combobox will still close normally.
48
+ */
45
49
  onSelect?(option: {
46
50
  value: string;
47
- }): void;
51
+ }): boolean | void;
48
52
  }
49
53
  /**
50
54
  * Behavioral options for input-mode combobox (autocomplete/filter pattern).
@@ -1,5 +1,6 @@
1
1
  import type { SetupStoriesOptions } from '@lumx/core/stories/types';
2
- import { Placement, type Elevation, FitAnchorWidth } from './constants';
2
+ import { Placement, FitAnchorWidth } from './constants';
3
+ import { type Elevation } from './types';
3
4
  /**
4
5
  * Core stories for the Popover component.
5
6
  *
@@ -34,7 +35,7 @@ export declare function setup({ component: Popover, render, decorators: { withCo
34
35
  focusElement?: import("../../types").CommonRef;
35
36
  focusAnchorOnClose?: boolean | undefined;
36
37
  hasArrow?: boolean | undefined;
37
- offset?: import("./constants").Offset | undefined;
38
+ offset?: import("./types").Offset | undefined;
38
39
  parentElement?: import("../../types").CommonRef;
39
40
  placement?: Placement | undefined;
40
41
  usePortal?: boolean | undefined;
@@ -136,4 +137,20 @@ export declare function setup({ component: Popover, render, decorators: { withCo
136
137
  };
137
138
  decorators: ((story: any, context: any) => any)[];
138
139
  };
140
+ Width: {
141
+ args: {
142
+ anchorClassName: string;
143
+ popoverClassName: string;
144
+ placement: "bottom";
145
+ };
146
+ decorators: ((story: any, context: any) => any)[];
147
+ };
148
+ Height: {
149
+ args: {
150
+ anchorClassName: string;
151
+ popoverClassName: string;
152
+ placement: "bottom";
153
+ };
154
+ decorators: ((story: any, context: any) => any)[];
155
+ };
139
156
  };
@@ -20,19 +20,6 @@ export declare const Placement: {
20
20
  readonly LEFT_START: "left-start";
21
21
  };
22
22
  export type Placement = ValueOf<typeof Placement>;
23
- /**
24
- * Offset of the popover.
25
- */
26
- export interface Offset {
27
- /** Offset size along the reference. */
28
- along?: number;
29
- /** Offset size away from the reference. */
30
- away?: number;
31
- }
32
- /**
33
- * Popover elevation index.
34
- */
35
- export type Elevation = 1 | 2 | 3 | 4 | 5;
36
23
  /**
37
24
  * Popover fit anchor width options.
38
25
  */
@@ -50,3 +37,7 @@ export declare const ARROW_SIZE = 14;
50
37
  * Popover default z-index
51
38
  */
52
39
  export declare const POPOVER_ZINDEX = 9999;
40
+ /**
41
+ * Popover height/width sizes
42
+ */
43
+ export declare const POPOVER_SIZES: readonly ["m", "l", "xl", "xxl"];
@@ -1,5 +1,6 @@
1
1
  import type { JSXElement, HasTheme, HasClassName, HasCloseMode, CommonRef, LumxClassName } from '../../types';
2
- import { Elevation, FitAnchorWidth, Offset, Placement } from './constants';
2
+ import { Placement, FitAnchorWidth } from './constants';
3
+ import type { PopoverSizes, Elevation, Offset } from './types';
3
4
  /**
4
5
  * Shared popover props used by both React and Vue wrappers.
5
6
  *
@@ -28,7 +29,7 @@ export interface PopoverProps extends HasClassName, HasTheme, HasCloseMode {
28
29
  * - `width`: popover equal to the anchor.
29
30
  */
30
31
  fitToAnchorWidth?: FitAnchorWidth | boolean;
31
- /** Shrink popover if even after flipping there is not enough space. */
32
+ /** Constrain popover height to avoid overflowing the viewport. */
32
33
  fitWithinViewportHeight?: boolean;
33
34
  /** Element to focus when opening the popover. */
34
35
  focusElement?: CommonRef;
@@ -59,7 +60,7 @@ export interface PopoverProps extends HasClassName, HasTheme, HasCloseMode {
59
60
  * Internal UI rendering props for the core Popover component.
60
61
  * These are passed by the framework wrappers after processing the behavioral PopoverProps.
61
62
  */
62
- export interface PopoverUIProps extends HasClassName, HasTheme, HasCloseMode {
63
+ export interface PopoverUIProps extends HasClassName, HasTheme, HasCloseMode, PopoverSizes {
63
64
  /** Customize the root element tag. */
64
65
  as?: string;
65
66
  /** Content. */
@@ -0,0 +1,35 @@
1
+ import type { VHSize, PXSize } from '../../utils/browser/css/types';
2
+ import type { POPOVER_SIZES } from './constants';
3
+ /**
4
+ * Offset of the popover.
5
+ */
6
+ export interface Offset {
7
+ /** Offset size along the reference. */
8
+ along?: number;
9
+ /** Offset size away from the reference. */
10
+ away?: number;
11
+ }
12
+ /**
13
+ * Popover elevation index.
14
+ */
15
+ export type Elevation = 1 | 2 | 3 | 4 | 5;
16
+ /** Popover size value — pixel value, or "t-shirt" size token. */
17
+ export type PopoverSize = PXSize | (typeof POPOVER_SIZES)[number];
18
+ /** Popover height value — extends PopoverSize with viewport-relative unit. */
19
+ export type PopoverHeight = PopoverSize | VHSize;
20
+ /** Popover width value — same as PopoverSize (pixels or t-shirt only). */
21
+ export type PopoverWidth = PopoverSize;
22
+ export interface PopoverSizes {
23
+ /** Exact width (pixels or t-shirt size). Combines with `fitToAnchorWidth`: if both target the same CSS property, the explicit prop wins for `width`. */
24
+ width?: PopoverWidth;
25
+ /** Minimum width (pixels or t-shirt size). Combines with `fitToAnchorWidth='minWidth'` as `max(anchor, value)`. */
26
+ minWidth?: PopoverWidth;
27
+ /** Maximum width (pixels or t-shirt size). Combines with `fitToAnchorWidth='maxWidth'` as `min(anchor, value)`. */
28
+ maxWidth?: PopoverWidth;
29
+ /** Exact height (pixels, vh, or t-shirt size). */
30
+ height?: PopoverHeight;
31
+ /** Minimum height (pixels, vh, or t-shirt size). */
32
+ minHeight?: PopoverHeight;
33
+ /** Maximum height (pixels, vh, or t-shirt size). Combines with `fitWithinViewportHeight` as `min(maxHeight, available)`. */
34
+ maxHeight?: PopoverHeight;
35
+ }
@@ -0,0 +1,25 @@
1
+ import { type Middleware } from '@floating-ui/dom';
2
+ import type { Offset, PopoverSizes } from '../types';
3
+ import { type parseAutoPlacement } from './parseAutoPlacement';
4
+ export interface BuildPopoverMiddlewareOptions extends PopoverSizes {
5
+ /** Offset from the anchor element. */
6
+ offset?: Offset;
7
+ /** Whether the popover has an arrow. */
8
+ hasArrow?: boolean;
9
+ /** CSS property to fit to anchor width ('minWidth', 'maxWidth', 'width'). Already parsed via `parseFitWidth`. */
10
+ fitWidth?: string;
11
+ /** Constrain popover height to avoid overflowing the viewport. */
12
+ fitWithinViewportHeight?: boolean;
13
+ /** Boundary element for overflow detection. */
14
+ boundary?: HTMLElement;
15
+ /** Parsed placement result from `parseAutoPlacement`. */
16
+ parsedPlacement: ReturnType<typeof parseAutoPlacement>;
17
+ /** Arrow element (required when hasArrow is true). */
18
+ arrowElement?: HTMLElement | null;
19
+ }
20
+ /**
21
+ * Build the floating-ui middleware array for popover positioning.
22
+ *
23
+ * Middleware order: offset → flip/autoPlacement → shift → size → arrow
24
+ */
25
+ export declare function buildPopoverMiddleware(options: BuildPopoverMiddlewareOptions): Middleware[];
@@ -0,0 +1,5 @@
1
+ import { type MiddlewareData } from '@floating-ui/dom';
2
+ /**
3
+ * Compute arrow CSS styles from floating-ui middleware data.
4
+ */
5
+ export declare function computeArrowStyles(arrowData?: MiddlewareData['arrow']): Record<string, string> | undefined;
@@ -0,0 +1,7 @@
1
+ import { type Placement as FloatingPlacement } from '@floating-ui/dom';
2
+ import { type parseAutoPlacement } from './parseAutoPlacement';
3
+ /**
4
+ * Get the floating-ui placement from the parsed placement config.
5
+ * Returns undefined for auto-placement (floating-ui handles it via autoPlacement middleware).
6
+ */
7
+ export declare function getFloatingPlacement(parsedPlacement: ReturnType<typeof parseAutoPlacement>): FloatingPlacement | undefined;
@@ -0,0 +1,5 @@
1
+ export { parseAutoPlacement } from './parseAutoPlacement';
2
+ export { parseFitWidth } from './parseFitWidth';
3
+ export { buildPopoverMiddleware, type BuildPopoverMiddlewareOptions } from './buildPopoverMiddleware';
4
+ export { computeArrowStyles } from './computeArrowStyles';
5
+ export { getFloatingPlacement } from './getFloatingPlacement';
@@ -0,0 +1,22 @@
1
+ import { type Placement as FloatingPlacement } from '@floating-ui/dom';
2
+ import { type Placement } from '../constants';
3
+ /**
4
+ * Parse a Popover placement into floating-ui placement or auto-placement config.
5
+ */
6
+ export declare function parseAutoPlacement(placement?: Placement): {
7
+ isAuto: true;
8
+ autoAlignment?: undefined;
9
+ floatingPlacement?: undefined;
10
+ } | {
11
+ isAuto: true;
12
+ autoAlignment: "start";
13
+ floatingPlacement?: undefined;
14
+ } | {
15
+ isAuto: true;
16
+ autoAlignment: "end";
17
+ floatingPlacement?: undefined;
18
+ } | {
19
+ floatingPlacement: FloatingPlacement;
20
+ isAuto: false;
21
+ autoAlignment?: undefined;
22
+ };
@@ -0,0 +1,4 @@
1
+ /**
2
+ * Parse the fitToAnchorWidth option into the CSS property name to apply.
3
+ */
4
+ export declare function parseFitWidth(fitToAnchorWidth?: string | boolean): string | undefined;
@@ -10,11 +10,8 @@ export interface SelectButtonProps<O> extends BaseSelectProps<O> {
10
10
  * The wrapper layer chooses the shape; the core just renders names.
11
11
  */
12
12
  value?: O | O[];
13
- /**
14
- * When `true`, sets `aria-multiselectable="true"` on the listbox so
15
- * the dropdown stays open after each selection (combobox setup detects this attribute).
16
- */
17
- isMultiselectable?: boolean;
13
+ /** Single or multiple selection */
14
+ selectionType?: 'single' | 'multiple';
18
15
  /** Button label (used for ARIA and when no selection). */
19
16
  label: string;
20
17
  /** Controls how the label/value is displayed in the button. */
@@ -68,6 +65,12 @@ export declare const COMPONENT_NAME = "SelectButton";
68
65
  * Component default class name.
69
66
  */
70
67
  export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
68
+ /**
69
+ * Component default props.
70
+ */
71
+ export declare const DEFAULT_PROPS: {
72
+ readonly selectionType: "single";
73
+ };
71
74
  /**
72
75
  * SelectButton core template.
73
76
  * Renders a Combobox with a button trigger and a dropdown list of options.
@@ -48,6 +48,13 @@ export declare function setup({ component: TimePickerField, decorators: { withVa
48
48
  value: Date;
49
49
  };
50
50
  };
51
+ WithBoundsMode: {
52
+ args: {
53
+ value: Date;
54
+ maxTime: Date;
55
+ boundsMode: string;
56
+ };
57
+ };
51
58
  Disabled: {
52
59
  args: {
53
60
  value: Date;
@@ -51,7 +51,16 @@ export interface TimePickerFieldWrapperProps {
51
51
  */
52
52
  maxTime?: Date;
53
53
  /**
54
- * Translations label for clear and show suggestions buttons.
54
+ * Controls how the time value interacts with `[minTime, maxTime]` bounds.
55
+ * Typed input is always snapped to bounds on blur.
56
+ * - `'enforce'`: additionally, the controlled `value` prop is proactively
57
+ * clamped to bounds on mount and whenever bounds change, calling
58
+ * `onChange` when adjusted.
59
+ * - `'on-blur'` (default): only blur snapping applies.
60
+ */
61
+ boundsMode?: 'on-blur' | 'enforce';
62
+ /**
63
+ * Translation labels for clear and show suggestions buttons.
55
64
  */
56
65
  translations: TimePickerFieldTranslations;
57
66
  }
@@ -0,0 +1,4 @@
1
+ /** Combine two CSS values with `min()`. */
2
+ export declare const cssMin: (size1?: string, size2?: string) => string;
3
+ /** Combine two CSS values with `max()`. */
4
+ export declare const cssMax: (size1?: string, size2?: string) => string;
@@ -0,0 +1,4 @@
1
+ import { GlobalSize } from '../../../constants/enums';
2
+ import type { VarSize } from './types';
3
+ /** Resolve a t-shirt size token to its CSS custom property, or pass through as-is. */
4
+ export declare function resolveCssSize<V extends string | undefined>(value: V): V extends GlobalSize ? VarSize<V> : V;
@@ -0,0 +1,7 @@
1
+ import type { GlobalSize } from '../../../constants/enums';
2
+ /** Viewport-relative height value, e.g. `50vh`. */
3
+ export type VHSize = `${number}vh`;
4
+ /** Pixel value, e.g. `12px`. */
5
+ export type PXSize = `${number}px`;
6
+ /** CSS custom property referencing a LumX t-shirt size token, e.g. `var(--lumx-size-m)`. */
7
+ export type VarSize<S extends GlobalSize = GlobalSize> = `var(--lumx-size-${S})`;
package/lumx.css CHANGED
@@ -5685,7 +5685,6 @@ table {
5685
5685
  }
5686
5686
 
5687
5687
  .lumx-combobox-popover {
5688
- max-height: 50vh;
5689
5688
  color: var(--lumx-color-dark-N);
5690
5689
  }
5691
5690
  .lumx-combobox-popover__scroll {
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  },
8
8
  "dependencies": {
9
9
  "@floating-ui/dom": "^1.7.5",
10
- "@lumx/icons": "^4.17.0",
10
+ "@lumx/icons": "^4.17.1-alpha.1",
11
11
  "classnames": "^2.3.2",
12
12
  "focus-visible": "^5.0.2",
13
13
  "lodash": "4.18.1",
@@ -66,7 +66,7 @@
66
66
  "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
67
67
  },
68
68
  "sideEffects": false,
69
- "version": "4.17.0",
69
+ "version": "4.17.1-alpha.1",
70
70
  "devDependencies": {
71
71
  "@rollup/plugin-typescript": "^12.3.0",
72
72
  "@testing-library/dom": "^10.4.1",
@@ -86,8 +86,9 @@
86
86
  "tinycolor2": "^1.4.1",
87
87
  "typescript": "^5.4.3",
88
88
  "version-changelog": "^3.1.1",
89
- "vite": "^7.3.2",
89
+ "vite": "^7.3.5",
90
90
  "vite-tsconfig-paths": "^5.1.4",
91
91
  "vitest": "^4.0.18"
92
- }
92
+ },
93
+ "stableVersion": "4.17.0"
93
94
  }
@@ -13,7 +13,6 @@
13
13
  // ---- Popover -----------------------
14
14
 
15
15
  .#{$lumx-base-prefix}-combobox-popover {
16
- max-height: 50vh;
17
16
  color: var(--lumx-color-dark-N);
18
17
 
19
18
  &__scroll {
@@ -1,57 +0,0 @@
1
- import { type Middleware, type Placement as FloatingPlacement, type MiddlewareData } from '@floating-ui/dom';
2
- import { type Offset, type Placement } from './constants';
3
- /**
4
- * Parse a Popover placement into floating-ui placement or auto-placement config.
5
- */
6
- export declare function parseAutoPlacement(placement?: Placement): {
7
- isAuto: true;
8
- autoAlignment?: undefined;
9
- floatingPlacement?: undefined;
10
- } | {
11
- isAuto: true;
12
- autoAlignment: "start";
13
- floatingPlacement?: undefined;
14
- } | {
15
- isAuto: true;
16
- autoAlignment: "end";
17
- floatingPlacement?: undefined;
18
- } | {
19
- floatingPlacement: FloatingPlacement;
20
- isAuto: false;
21
- autoAlignment?: undefined;
22
- };
23
- /**
24
- * Parse the fitToAnchorWidth option into the CSS property name to apply.
25
- */
26
- export declare function parseFitWidth(fitToAnchorWidth?: string | boolean): string | undefined;
27
- export interface BuildPopoverMiddlewareOptions {
28
- /** Offset from the anchor element. */
29
- offset?: Offset;
30
- /** Whether the popover has an arrow. */
31
- hasArrow?: boolean;
32
- /** CSS property to fit to anchor width ('minWidth', 'maxWidth', 'width'). Already parsed via `parseFitWidth`. */
33
- fitWidth?: string;
34
- /** Whether to constrain height to viewport. */
35
- fitWithinViewportHeight?: boolean;
36
- /** Boundary element for overflow detection. */
37
- boundary?: HTMLElement;
38
- /** Parsed placement result from `parseAutoPlacement`. */
39
- parsedPlacement: ReturnType<typeof parseAutoPlacement>;
40
- /** Arrow element (required when hasArrow is true). */
41
- arrowElement?: HTMLElement | null;
42
- }
43
- /**
44
- * Build the floating-ui middleware array for popover positioning.
45
- *
46
- * Middleware order: offset → flip/autoPlacement → shift → size → arrow
47
- */
48
- export declare function buildPopoverMiddleware(options: BuildPopoverMiddlewareOptions): Middleware[];
49
- /**
50
- * Compute arrow CSS styles from floating-ui middleware data.
51
- */
52
- export declare function computeArrowStyles(arrowData?: MiddlewareData['arrow']): Record<string, string> | undefined;
53
- /**
54
- * Get the floating-ui placement from the parsed placement config.
55
- * Returns undefined for auto-placement (floating-ui handles it via autoPlacement middleware).
56
- */
57
- export declare function getFloatingPlacement(parsedPlacement: ReturnType<typeof parseAutoPlacement>): FloatingPlacement | undefined;