@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.
- package/components-and-utils.css +0 -1
- package/js/components/Combobox/ComboboxPopover.d.ts +6 -17
- package/js/components/Combobox/TestStories.d.ts +8 -8
- package/js/components/Combobox/Tests.d.ts +13 -13
- package/js/components/Combobox/constants.d.ts +2 -0
- package/js/components/Combobox/types.d.ts +6 -2
- package/js/components/Popover/Stories.d.ts +19 -2
- package/js/components/Popover/constants.d.ts +4 -13
- package/js/components/Popover/index.d.ts +4 -3
- package/js/components/Popover/types.d.ts +35 -0
- package/js/components/Popover/utils/buildPopoverMiddleware.d.ts +25 -0
- package/js/components/Popover/utils/computeArrowStyles.d.ts +5 -0
- package/js/components/Popover/utils/getFloatingPlacement.d.ts +7 -0
- package/js/components/Popover/utils/index.d.ts +5 -0
- package/js/components/Popover/utils/parseAutoPlacement.d.ts +22 -0
- package/js/components/Popover/utils/parseFitWidth.d.ts +4 -0
- package/js/components/SelectButton/index.d.ts +8 -5
- package/js/components/TimePickerField/Stories.d.ts +7 -0
- package/js/components/TimePickerField/index.d.ts +10 -1
- package/js/utils/browser/css/combineSize.d.ts +4 -0
- package/js/utils/browser/css/resolveCssSize.d.ts +4 -0
- package/js/utils/browser/css/types.d.ts +7 -0
- package/lumx.css +0 -1
- package/package.json +5 -4
- package/scss/components/combobox/_index.scss +0 -1
- package/js/components/Popover/popoverStyle.d.ts +0 -57
package/components-and-utils.css
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
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 }: {
|
|
@@ -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
|
-
/**
|
|
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,
|
|
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("./
|
|
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 {
|
|
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
|
-
/**
|
|
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,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
|
+
};
|
|
@@ -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
|
-
|
|
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
|
-
*
|
|
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
|
+
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
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.
|
|
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.
|
|
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.
|
|
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
|
}
|
|
@@ -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;
|