@ultraviolet/ui 3.0.0-beta.28 → 3.0.0-beta.29
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/README.md +47 -18
- package/dist/components/Avatar/styles.css.js +0 -1
- package/dist/components/Avatar/variables.css.js +1 -0
- package/dist/components/DateInput/components/Popup.js +2 -2
- package/dist/components/Popup/index.d.ts +2 -1
- package/dist/components/Popup/index.js +52 -24
- package/dist/components/ProgressBar/styles.css.js +0 -1
- package/dist/components/ProgressBar/variables.css.js +1 -0
- package/dist/components/Row/styles.css.d.ts +11 -0
- package/dist/components/Row/styles.css.js +2 -2
- package/dist/components/SelectInput/components/Dropdown.js +69 -41
- package/dist/components/Stack/styles.css.js +2 -2
- package/dist/components/Text/style.css.js +1 -0
- package/dist/components/Text/variables.css.js +0 -1
- package/dist/components/Tooltip/index.d.ts +1 -1
- package/dist/ui.css +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -59,32 +59,61 @@ const App = () => (
|
|
|
59
59
|
> **Note**:
|
|
60
60
|
> To generate your own theme easily you can check the [theme generator](https://storybook.ultraviolet.scaleway.com/?path=/docs/tools-theme-generator--docs).
|
|
61
61
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
you'll have to define the `@emotion/react` module `Theme` interface in your project.
|
|
62
|
+
## Migration from V2 to V3
|
|
63
|
+
With the migration from `@ultraviolet/ui 2.0.0` to `@ultraviolet/ui 3.0.0`, several core changes have been introduced. These changes are due to the shift in styling from `Emotion` to `vanilla-extract`.
|
|
65
64
|
|
|
66
|
-
|
|
65
|
+
### Theme provider
|
|
66
|
+
To ensure the library works correctly, you must wrap your application with the `ThemeProvider` component. Import it from `@ultraviolet/themes` or `@ultraviolet/ui` (replacing the previous `Emotion`-based provider).
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
If your app still uses `Emotion`, you can combine both theme providers:
|
|
69
69
|
|
|
70
|
-
```
|
|
71
|
-
import '@emotion/react'
|
|
72
|
-
import
|
|
70
|
+
```js
|
|
71
|
+
import { ThemeProvider as EmotionThemeProvider } from '@emotion/react'
|
|
72
|
+
import {
|
|
73
|
+
consoleLightTheme,
|
|
74
|
+
ThemeProvider as UVThemeProvider,
|
|
75
|
+
} from '@ultraviolet/ui'
|
|
73
76
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
}
|
|
77
|
+
const App = () => (
|
|
78
|
+
<UVThemeProvider theme={consoleLightTheme}>
|
|
79
|
+
<EmotionThemeProvider theme={consoleLightTheme}>
|
|
80
|
+
{children}
|
|
81
|
+
</EmotionThemeProvider>
|
|
82
|
+
</UVThemeProvider>
|
|
83
|
+
)
|
|
77
84
|
```
|
|
78
85
|
|
|
79
|
-
|
|
86
|
+
### Style
|
|
87
|
+
To ensure styles are applied, import the component styles at the root of your application:
|
|
80
88
|
|
|
81
|
-
```
|
|
82
|
-
import '@
|
|
83
|
-
|
|
89
|
+
```js
|
|
90
|
+
import '@ultraviolet/ui/styles'
|
|
91
|
+
```
|
|
92
|
+
To replace `normalize()` (which was used with Emotion), you can now import a global style with the same effect:
|
|
93
|
+
|
|
94
|
+
Before:
|
|
95
|
+
```js
|
|
96
|
+
import { Global } from '@emotion/react'
|
|
97
|
+
import { normalize } from '@ultraviolet/ui'
|
|
98
|
+
import { ThemeProvider } from '@emotion/react'
|
|
84
99
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
}
|
|
100
|
+
const App = () => (
|
|
101
|
+
<ThemeProvider theme={theme}>
|
|
102
|
+
<Global styles={css`${normalize()}`}>
|
|
103
|
+
<MyApp />
|
|
104
|
+
</ThemeProvider>
|
|
105
|
+
)
|
|
106
|
+
```
|
|
107
|
+
After:
|
|
108
|
+
```js
|
|
109
|
+
import { ThemeProvider } from "@ultraviolet/themes"
|
|
110
|
+
import "@ultraviolet/themes/global"
|
|
111
|
+
|
|
112
|
+
const App = () => (
|
|
113
|
+
<ThemeProvider theme={theme}>
|
|
114
|
+
<MyApp />
|
|
115
|
+
</ThemeProvider>
|
|
116
|
+
)
|
|
88
117
|
```
|
|
89
118
|
|
|
90
119
|
## Documentation
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/* empty css */
|
|
2
1
|
/* empty css */
|
|
3
2
|
import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
4
3
|
var containerAvatar = createRuntimeFn({ defaultClassName: "uv_19x8y1k0", variantClassNames: { shape: { circle: "uv_19x8y1k1", square: "uv_19x8y1k2" }, size: { large: "uv_19x8y1k3", medium: "uv_19x8y1k4", small: "uv_19x8y1k5", xsmall: "uv_19x8y1k6" }, sentiment: { primary: "uv_19x8y1k7", neutral: "uv_19x8y1k8" } }, defaultVariants: {}, compoundVariants: [[{ size: "large", shape: "square" }, "uv_19x8y1k9"], [{ size: "medium", shape: "square" }, "uv_19x8y1ka"], [{ size: "small", shape: "square" }, "uv_19x8y1kb"], [{ size: "xsmall", shape: "square" }, "uv_19x8y1kc"]] });
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useRef,
|
|
3
|
+
import { useRef, useLayoutEffect } from "react";
|
|
4
4
|
import { Popup } from "../../Popup/index.js";
|
|
5
5
|
import { POPUP_WIDTH } from "../constants.js";
|
|
6
6
|
import { dateinputPopup } from "./styles.css.js";
|
|
@@ -17,7 +17,7 @@ const CalendarPopup = ({
|
|
|
17
17
|
content
|
|
18
18
|
}) => {
|
|
19
19
|
const ref = useRef(null);
|
|
20
|
-
|
|
20
|
+
useLayoutEffect(() => {
|
|
21
21
|
document.addEventListener(
|
|
22
22
|
"mousedown",
|
|
23
23
|
(event) => handleClickOutside(event, ref, setVisible, refInput)
|
|
@@ -9,6 +9,7 @@ export type PositionsType = {
|
|
|
9
9
|
popupInitialPosition: string;
|
|
10
10
|
popupPosition: string;
|
|
11
11
|
};
|
|
12
|
+
type PopupRole = 'dialog' | 'tooltip' | 'popup' | string;
|
|
12
13
|
type PopupProps = {
|
|
13
14
|
/**
|
|
14
15
|
* Id is automatically generated if not set. It is used for associating popup wrapper with popup portal.
|
|
@@ -49,7 +50,7 @@ type PopupProps = {
|
|
|
49
50
|
*/
|
|
50
51
|
visible?: boolean;
|
|
51
52
|
innerRef?: Ref<HTMLDivElement | null>;
|
|
52
|
-
role?:
|
|
53
|
+
role?: PopupRole;
|
|
53
54
|
'data-testid'?: string;
|
|
54
55
|
hasArrow?: boolean;
|
|
55
56
|
onClose?: () => void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { assignInlineVars } from "@vanilla-extract/dynamic";
|
|
4
|
-
import { forwardRef, useRef, useImperativeHandle,
|
|
4
|
+
import { forwardRef, useRef, useImperativeHandle, useState, useId, useMemo, useCallback, startTransition, useLayoutEffect, useEffect } from "react";
|
|
5
5
|
import { createPortal } from "react-dom";
|
|
6
6
|
import { isClientSide } from "../../helpers/isClientSide.js";
|
|
7
7
|
import { DEFAULT_POSITIONS, computePositions } from "./helpers.js";
|
|
@@ -14,6 +14,28 @@ const noop = () => {
|
|
|
14
14
|
const stopClickPropagation = (event) => {
|
|
15
15
|
event.nativeEvent.stopImmediatePropagation();
|
|
16
16
|
};
|
|
17
|
+
const getPopupPortalTarget = ({
|
|
18
|
+
node,
|
|
19
|
+
role,
|
|
20
|
+
portalTarget
|
|
21
|
+
}) => {
|
|
22
|
+
if (portalTarget) {
|
|
23
|
+
return portalTarget;
|
|
24
|
+
}
|
|
25
|
+
if (role === "dialog") {
|
|
26
|
+
if (node) {
|
|
27
|
+
return node;
|
|
28
|
+
}
|
|
29
|
+
if (isClientSide) {
|
|
30
|
+
return document.body;
|
|
31
|
+
}
|
|
32
|
+
return null;
|
|
33
|
+
}
|
|
34
|
+
if (typeof window !== "undefined") {
|
|
35
|
+
return document.body;
|
|
36
|
+
}
|
|
37
|
+
return null;
|
|
38
|
+
};
|
|
17
39
|
const Popup = forwardRef(
|
|
18
40
|
({
|
|
19
41
|
children,
|
|
@@ -47,24 +69,11 @@ const Popup = forwardRef(
|
|
|
47
69
|
const innerPopupRef = useRef(null);
|
|
48
70
|
useImperativeHandle(ref, () => innerPopupRef.current);
|
|
49
71
|
const timer = useRef(void 0);
|
|
50
|
-
const popupPortalTarget =
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
if (childrenRef.current) {
|
|
56
|
-
return childrenRef.current;
|
|
57
|
-
}
|
|
58
|
-
if (isClientSide) {
|
|
59
|
-
return document.body;
|
|
60
|
-
}
|
|
61
|
-
return null;
|
|
62
|
-
}
|
|
63
|
-
if (typeof window !== "undefined") {
|
|
64
|
-
return document.body;
|
|
65
|
-
}
|
|
66
|
-
return null;
|
|
67
|
-
}, [portalTarget, role, childrenRef.current]);
|
|
72
|
+
const popupPortalTarget = getPopupPortalTarget({
|
|
73
|
+
node: childrenRef.current,
|
|
74
|
+
portalTarget,
|
|
75
|
+
role
|
|
76
|
+
});
|
|
68
77
|
const animationDuration = disableAnimation || maxHeight ? 0 : DEFAULT_ANIMATION_DURATION;
|
|
69
78
|
const debounceTimer = useRef(void 0);
|
|
70
79
|
const [visibleInDom, setVisibleInDom] = useState(false);
|
|
@@ -80,7 +89,7 @@ const Popup = forwardRef(
|
|
|
80
89
|
[animationDuration, maxHeight]
|
|
81
90
|
);
|
|
82
91
|
const generatePopupPositions = useCallback(() => {
|
|
83
|
-
if (childrenRef.current && innerPopupRef.current) {
|
|
92
|
+
if (childrenRef.current && innerPopupRef.current && popupPortalTarget) {
|
|
84
93
|
setPositions(
|
|
85
94
|
computePositions({
|
|
86
95
|
align,
|
|
@@ -92,7 +101,7 @@ const Popup = forwardRef(
|
|
|
92
101
|
})
|
|
93
102
|
);
|
|
94
103
|
}
|
|
95
|
-
}, [hasArrow, placement,
|
|
104
|
+
}, [hasArrow, placement, align, popupPortalTarget]);
|
|
96
105
|
const onWindowChangeDetected = useCallback(() => {
|
|
97
106
|
if (innerPopupRef.current) {
|
|
98
107
|
innerPopupRef.current.style.animation = "none";
|
|
@@ -165,7 +174,26 @@ const Popup = forwardRef(
|
|
|
165
174
|
},
|
|
166
175
|
[closePopup, debounceDelay, visible]
|
|
167
176
|
);
|
|
168
|
-
|
|
177
|
+
useLayoutEffect(() => {
|
|
178
|
+
const currentRef = childrenRef.current;
|
|
179
|
+
const mutationObserver = new MutationObserver(() => {
|
|
180
|
+
generatePopupPositions();
|
|
181
|
+
});
|
|
182
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
183
|
+
generatePopupPositions();
|
|
184
|
+
});
|
|
185
|
+
if (currentRef) {
|
|
186
|
+
resizeObserver.observe(currentRef);
|
|
187
|
+
mutationObserver.observe(currentRef, { characterData: true });
|
|
188
|
+
}
|
|
189
|
+
return () => {
|
|
190
|
+
if (currentRef) {
|
|
191
|
+
resizeObserver.unobserve(currentRef);
|
|
192
|
+
mutationObserver.disconnect();
|
|
193
|
+
}
|
|
194
|
+
};
|
|
195
|
+
}, [visibleInDom, generatePopupPositions]);
|
|
196
|
+
useLayoutEffect(() => {
|
|
169
197
|
if (visibleInDom) {
|
|
170
198
|
generatePopupPositions();
|
|
171
199
|
if (popupPortalTarget === document.body) {
|
|
@@ -188,11 +216,11 @@ const Popup = forwardRef(
|
|
|
188
216
|
maxWidth,
|
|
189
217
|
popupPortalTarget
|
|
190
218
|
]);
|
|
191
|
-
|
|
219
|
+
useLayoutEffect(() => {
|
|
192
220
|
if (visibleInDom && innerPopupRef.current) {
|
|
193
221
|
innerPopupRef.current.style.opacity = "1";
|
|
194
222
|
}
|
|
195
|
-
}, [positions]);
|
|
223
|
+
}, [visibleInDom, positions]);
|
|
196
224
|
useEffect(() => {
|
|
197
225
|
if (isControlled) {
|
|
198
226
|
onPointerEvent(visible)();
|
|
@@ -223,6 +223,17 @@ export declare const responsiveProperties: {
|
|
|
223
223
|
xxsmall: string;
|
|
224
224
|
};
|
|
225
225
|
};
|
|
226
|
+
"anchor-center": {
|
|
227
|
+
defaultClass: string;
|
|
228
|
+
conditions: {
|
|
229
|
+
large: string;
|
|
230
|
+
medium: string;
|
|
231
|
+
small: string;
|
|
232
|
+
xlarge: string;
|
|
233
|
+
xsmall: string;
|
|
234
|
+
xxsmall: string;
|
|
235
|
+
};
|
|
236
|
+
};
|
|
226
237
|
};
|
|
227
238
|
};
|
|
228
239
|
justifyContent: {
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
/* empty css */
|
|
3
3
|
import { createSprinkles } from "@vanilla-extract/sprinkles/createRuntimeSprinkles";
|
|
4
4
|
var row = "uv_x6hyh50";
|
|
5
|
-
var responsiveProperties = function() {
|
|
5
|
+
var responsiveProperties = (function() {
|
|
6
6
|
var x = { conditions: { defaultCondition: "xxsmall", conditionNames: ["xxsmall", "xsmall", "small", "medium", "large", "xlarge"], responsiveArray: ["xxsmall", "xsmall", "small", "medium", "large"] }, styles: { gap: { values: { "0rem": { conditions: { xxsmall: "uv_x6hyh51", xsmall: "uv_x6hyh52", small: "uv_x6hyh53", medium: "uv_x6hyh54", large: "uv_x6hyh55", xlarge: "uv_x6hyh56" }, defaultClass: "uv_x6hyh51" }, "0.5rem": { conditions: { xxsmall: "uv_x6hyh57", xsmall: "uv_x6hyh58", small: "uv_x6hyh59", medium: "uv_x6hyh5a", large: "uv_x6hyh5b", xlarge: "uv_x6hyh5c" }, defaultClass: "uv_x6hyh57" }, "1rem": { conditions: { xxsmall: "uv_x6hyh5d", xsmall: "uv_x6hyh5e", small: "uv_x6hyh5f", medium: "uv_x6hyh5g", large: "uv_x6hyh5h", xlarge: "uv_x6hyh5i" }, defaultClass: "uv_x6hyh5d" }, "1.5rem": { conditions: { xxsmall: "uv_x6hyh5j", xsmall: "uv_x6hyh5k", small: "uv_x6hyh5l", medium: "uv_x6hyh5m", large: "uv_x6hyh5n", xlarge: "uv_x6hyh5o" }, defaultClass: "uv_x6hyh5j" }, "2rem": { conditions: { xxsmall: "uv_x6hyh5p", xsmall: "uv_x6hyh5q", small: "uv_x6hyh5r", medium: "uv_x6hyh5s", large: "uv_x6hyh5t", xlarge: "uv_x6hyh5u" }, defaultClass: "uv_x6hyh5p" }, "2.5rem": { conditions: { xxsmall: "uv_x6hyh5v", xsmall: "uv_x6hyh5w", small: "uv_x6hyh5x", medium: "uv_x6hyh5y", large: "uv_x6hyh5z", xlarge: "uv_x6hyh510" }, defaultClass: "uv_x6hyh5v" }, "3rem": { conditions: { xxsmall: "uv_x6hyh511", xsmall: "uv_x6hyh512", small: "uv_x6hyh513", medium: "uv_x6hyh514", large: "uv_x6hyh515", xlarge: "uv_x6hyh516" }, defaultClass: "uv_x6hyh511" }, "3.5rem": { conditions: { xxsmall: "uv_x6hyh517", xsmall: "uv_x6hyh518", small: "uv_x6hyh519", medium: "uv_x6hyh51a", large: "uv_x6hyh51b", xlarge: "uv_x6hyh51c" }, defaultClass: "uv_x6hyh517" }, "4rem": { conditions: { xxsmall: "uv_x6hyh51d", xsmall: "uv_x6hyh51e", small: "uv_x6hyh51f", medium: "uv_x6hyh51g", large: "uv_x6hyh51h", xlarge: "uv_x6hyh51i" }, defaultClass: "uv_x6hyh51d" }, "4.5rem": { conditions: { xxsmall: "uv_x6hyh51j", xsmall: "uv_x6hyh51k", small: "uv_x6hyh51l", medium: "uv_x6hyh51m", large: "uv_x6hyh51n", xlarge: "uv_x6hyh51o" }, defaultClass: "uv_x6hyh51j" }, "5rem": { conditions: { xxsmall: "uv_x6hyh51p", xsmall: "uv_x6hyh51q", small: "uv_x6hyh51r", medium: "uv_x6hyh51s", large: "uv_x6hyh51t", xlarge: "uv_x6hyh51u" }, defaultClass: "uv_x6hyh51p" }, "0.25rem": { conditions: { xxsmall: "uv_x6hyh51v", xsmall: "uv_x6hyh51w", small: "uv_x6hyh51x", medium: "uv_x6hyh51y", large: "uv_x6hyh51z", xlarge: "uv_x6hyh520" }, defaultClass: "uv_x6hyh51v" }, "0.125rem": { conditions: { xxsmall: "uv_x6hyh521", xsmall: "uv_x6hyh522", small: "uv_x6hyh523", medium: "uv_x6hyh524", large: "uv_x6hyh525", xlarge: "uv_x6hyh526" }, defaultClass: "uv_x6hyh521" }, "0.75rem": { conditions: { xxsmall: "uv_x6hyh527", xsmall: "uv_x6hyh528", small: "uv_x6hyh529", medium: "uv_x6hyh52a", large: "uv_x6hyh52b", xlarge: "uv_x6hyh52c" }, defaultClass: "uv_x6hyh527" } }, responsiveArray: void 0 }, alignItems: { values: { normal: { conditions: { xxsmall: "uv_x6hyh52d", xsmall: "uv_x6hyh52e", small: "uv_x6hyh52f", medium: "uv_x6hyh52g", large: "uv_x6hyh52h", xlarge: "uv_x6hyh52i" }, defaultClass: "uv_x6hyh52d" }, stretch: { conditions: { xxsmall: "uv_x6hyh52j", xsmall: "uv_x6hyh52k", small: "uv_x6hyh52l", medium: "uv_x6hyh52m", large: "uv_x6hyh52n", xlarge: "uv_x6hyh52o" }, defaultClass: "uv_x6hyh52j" }, center: { conditions: { xxsmall: "uv_x6hyh52p", xsmall: "uv_x6hyh52q", small: "uv_x6hyh52r", medium: "uv_x6hyh52s", large: "uv_x6hyh52t", xlarge: "uv_x6hyh52u" }, defaultClass: "uv_x6hyh52p" }, start: { conditions: { xxsmall: "uv_x6hyh52v", xsmall: "uv_x6hyh52w", small: "uv_x6hyh52x", medium: "uv_x6hyh52y", large: "uv_x6hyh52z", xlarge: "uv_x6hyh530" }, defaultClass: "uv_x6hyh52v" }, end: { conditions: { xxsmall: "uv_x6hyh531", xsmall: "uv_x6hyh532", small: "uv_x6hyh533", medium: "uv_x6hyh534", large: "uv_x6hyh535", xlarge: "uv_x6hyh536" }, defaultClass: "uv_x6hyh531" }, "flex-start": { conditions: { xxsmall: "uv_x6hyh537", xsmall: "uv_x6hyh538", small: "uv_x6hyh539", medium: "uv_x6hyh53a", large: "uv_x6hyh53b", xlarge: "uv_x6hyh53c" }, defaultClass: "uv_x6hyh537" }, "flex-end": { conditions: { xxsmall: "uv_x6hyh53d", xsmall: "uv_x6hyh53e", small: "uv_x6hyh53f", medium: "uv_x6hyh53g", large: "uv_x6hyh53h", xlarge: "uv_x6hyh53i" }, defaultClass: "uv_x6hyh53d" }, "self-start": { conditions: { xxsmall: "uv_x6hyh53j", xsmall: "uv_x6hyh53k", small: "uv_x6hyh53l", medium: "uv_x6hyh53m", large: "uv_x6hyh53n", xlarge: "uv_x6hyh53o" }, defaultClass: "uv_x6hyh53j" }, "self-end": { conditions: { xxsmall: "uv_x6hyh53p", xsmall: "uv_x6hyh53q", small: "uv_x6hyh53r", medium: "uv_x6hyh53s", large: "uv_x6hyh53t", xlarge: "uv_x6hyh53u" }, defaultClass: "uv_x6hyh53p" }, baseline: { conditions: { xxsmall: "uv_x6hyh53v", xsmall: "uv_x6hyh53w", small: "uv_x6hyh53x", medium: "uv_x6hyh53y", large: "uv_x6hyh53z", xlarge: "uv_x6hyh540" }, defaultClass: "uv_x6hyh53v" }, "first baseline": { conditions: { xxsmall: "uv_x6hyh541", xsmall: "uv_x6hyh542", small: "uv_x6hyh543", medium: "uv_x6hyh544", large: "uv_x6hyh545", xlarge: "uv_x6hyh546" }, defaultClass: "uv_x6hyh541" }, "last baseline": { conditions: { xxsmall: "uv_x6hyh547", xsmall: "uv_x6hyh548", small: "uv_x6hyh549", medium: "uv_x6hyh54a", large: "uv_x6hyh54b", xlarge: "uv_x6hyh54c" }, defaultClass: "uv_x6hyh547" }, "safe center": { conditions: { xxsmall: "uv_x6hyh54d", xsmall: "uv_x6hyh54e", small: "uv_x6hyh54f", medium: "uv_x6hyh54g", large: "uv_x6hyh54h", xlarge: "uv_x6hyh54i" }, defaultClass: "uv_x6hyh54d" }, "unsafe center": { conditions: { xxsmall: "uv_x6hyh54j", xsmall: "uv_x6hyh54k", small: "uv_x6hyh54l", medium: "uv_x6hyh54m", large: "uv_x6hyh54n", xlarge: "uv_x6hyh54o" }, defaultClass: "uv_x6hyh54j" } }, responsiveArray: void 0 }, justifyContent: { values: { normal: { conditions: { xxsmall: "uv_x6hyh54p", xsmall: "uv_x6hyh54q", small: "uv_x6hyh54r", medium: "uv_x6hyh54s", large: "uv_x6hyh54t", xlarge: "uv_x6hyh54u" }, defaultClass: "uv_x6hyh54p" }, center: { conditions: { xxsmall: "uv_x6hyh54v", xsmall: "uv_x6hyh54w", small: "uv_x6hyh54x", medium: "uv_x6hyh54y", large: "uv_x6hyh54z", xlarge: "uv_x6hyh550" }, defaultClass: "uv_x6hyh54v" }, start: { conditions: { xxsmall: "uv_x6hyh551", xsmall: "uv_x6hyh552", small: "uv_x6hyh553", medium: "uv_x6hyh554", large: "uv_x6hyh555", xlarge: "uv_x6hyh556" }, defaultClass: "uv_x6hyh551" }, end: { conditions: { xxsmall: "uv_x6hyh557", xsmall: "uv_x6hyh558", small: "uv_x6hyh559", medium: "uv_x6hyh55a", large: "uv_x6hyh55b", xlarge: "uv_x6hyh55c" }, defaultClass: "uv_x6hyh557" }, "flex-start": { conditions: { xxsmall: "uv_x6hyh55d", xsmall: "uv_x6hyh55e", small: "uv_x6hyh55f", medium: "uv_x6hyh55g", large: "uv_x6hyh55h", xlarge: "uv_x6hyh55i" }, defaultClass: "uv_x6hyh55d" }, "flex-end": { conditions: { xxsmall: "uv_x6hyh55j", xsmall: "uv_x6hyh55k", small: "uv_x6hyh55l", medium: "uv_x6hyh55m", large: "uv_x6hyh55n", xlarge: "uv_x6hyh55o" }, defaultClass: "uv_x6hyh55j" }, left: { conditions: { xxsmall: "uv_x6hyh55p", xsmall: "uv_x6hyh55q", small: "uv_x6hyh55r", medium: "uv_x6hyh55s", large: "uv_x6hyh55t", xlarge: "uv_x6hyh55u" }, defaultClass: "uv_x6hyh55p" }, right: { conditions: { xxsmall: "uv_x6hyh55v", xsmall: "uv_x6hyh55w", small: "uv_x6hyh55x", medium: "uv_x6hyh55y", large: "uv_x6hyh55z", xlarge: "uv_x6hyh560" }, defaultClass: "uv_x6hyh55v" }, "space-between": { conditions: { xxsmall: "uv_x6hyh561", xsmall: "uv_x6hyh562", small: "uv_x6hyh563", medium: "uv_x6hyh564", large: "uv_x6hyh565", xlarge: "uv_x6hyh566" }, defaultClass: "uv_x6hyh561" }, "space-around": { conditions: { xxsmall: "uv_x6hyh567", xsmall: "uv_x6hyh568", small: "uv_x6hyh569", medium: "uv_x6hyh56a", large: "uv_x6hyh56b", xlarge: "uv_x6hyh56c" }, defaultClass: "uv_x6hyh567" }, "space-evenly": { conditions: { xxsmall: "uv_x6hyh56d", xsmall: "uv_x6hyh56e", small: "uv_x6hyh56f", medium: "uv_x6hyh56g", large: "uv_x6hyh56h", xlarge: "uv_x6hyh56i" }, defaultClass: "uv_x6hyh56d" }, stretch: { conditions: { xxsmall: "uv_x6hyh56j", xsmall: "uv_x6hyh56k", small: "uv_x6hyh56l", medium: "uv_x6hyh56m", large: "uv_x6hyh56n", xlarge: "uv_x6hyh56o" }, defaultClass: "uv_x6hyh56j" } }, responsiveArray: void 0 } } };
|
|
7
7
|
x.styles.gap.responsiveArray = x.conditions.responsiveArray;
|
|
8
8
|
x.styles.alignItems.responsiveArray = x.conditions.responsiveArray;
|
|
9
9
|
x.styles.justifyContent.responsiveArray = x.conditions.responsiveArray;
|
|
10
10
|
return x;
|
|
11
|
-
}();
|
|
11
|
+
})();
|
|
12
12
|
var sprinkles = createSprinkles(responsiveProperties);
|
|
13
13
|
export {
|
|
14
14
|
responsiveProperties,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { useTheme } from "@ultraviolet/themes";
|
|
4
|
-
import { useState, useRef,
|
|
4
|
+
import { useState, useRef, use, useLayoutEffect, useCallback, useEffect, useMemo } from "react";
|
|
5
5
|
import { Checkbox } from "../../Checkbox/index.js";
|
|
6
6
|
import { ModalContext } from "../../Modal/ModalProvider.js";
|
|
7
7
|
import { Popup } from "../../Popup/index.js";
|
|
@@ -126,13 +126,18 @@ const CreateDropdown = ({
|
|
|
126
126
|
if (isEmpty) {
|
|
127
127
|
return /* @__PURE__ */ jsx(Stack, { alignItems: "center", className: dropdownEmptyState, gap: 2, children: emptyState ?? /* @__PURE__ */ jsx(Text, { as: "p", variant: "bodyStrong", children: "No options" }) });
|
|
128
128
|
}
|
|
129
|
-
const handleClick = (
|
|
129
|
+
const handleClick = ({
|
|
130
|
+
clickedOption,
|
|
131
|
+
group,
|
|
132
|
+
event
|
|
133
|
+
}) => {
|
|
134
|
+
event.stopPropagation();
|
|
130
135
|
setSelectedData({ clickedOption, group, type: "selectOption" });
|
|
131
136
|
if (multiselect) {
|
|
132
137
|
if (selectedData.selectedValues.includes(clickedOption.value)) {
|
|
133
138
|
onChange?.(
|
|
134
139
|
selectedData.selectedValues.filter(
|
|
135
|
-
(
|
|
140
|
+
(value) => value !== clickedOption.value
|
|
136
141
|
)
|
|
137
142
|
);
|
|
138
143
|
} else {
|
|
@@ -306,12 +311,25 @@ const CreateDropdown = ({
|
|
|
306
311
|
}),
|
|
307
312
|
"data-testid": `option-${option.value}`,
|
|
308
313
|
id: `option-${indexOption}`,
|
|
309
|
-
onClick: () => {
|
|
314
|
+
onClick: (event) => {
|
|
310
315
|
if (!option.disabled) {
|
|
311
|
-
handleClick(
|
|
316
|
+
handleClick({
|
|
317
|
+
clickedOption: option,
|
|
318
|
+
event,
|
|
319
|
+
group
|
|
320
|
+
});
|
|
321
|
+
}
|
|
322
|
+
},
|
|
323
|
+
onKeyDown: (event) => {
|
|
324
|
+
const shouldClick = [" ", "Enter"].includes(event.key);
|
|
325
|
+
if (shouldClick) {
|
|
326
|
+
handleClick({
|
|
327
|
+
clickedOption: option,
|
|
328
|
+
event,
|
|
329
|
+
group
|
|
330
|
+
});
|
|
312
331
|
}
|
|
313
332
|
},
|
|
314
|
-
onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? handleClick(option, group) : null,
|
|
315
333
|
ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
|
|
316
334
|
role: "option",
|
|
317
335
|
tabIndex: !option.disabled ? 0 : -1,
|
|
@@ -321,9 +339,13 @@ const CreateDropdown = ({
|
|
|
321
339
|
checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
|
|
322
340
|
className: dropdownCheckbox,
|
|
323
341
|
disabled: option.disabled,
|
|
324
|
-
onChange: () => {
|
|
342
|
+
onChange: (event) => {
|
|
325
343
|
if (!option.disabled) {
|
|
326
|
-
handleClick(
|
|
344
|
+
handleClick({
|
|
345
|
+
clickedOption: option,
|
|
346
|
+
event,
|
|
347
|
+
group
|
|
348
|
+
});
|
|
327
349
|
}
|
|
328
350
|
},
|
|
329
351
|
tabIndex: -1,
|
|
@@ -415,12 +437,23 @@ const CreateDropdown = ({
|
|
|
415
437
|
}),
|
|
416
438
|
"data-testid": `option-${option.value}`,
|
|
417
439
|
id: `option-${index}`,
|
|
418
|
-
onClick: () => {
|
|
440
|
+
onClick: (event) => {
|
|
419
441
|
if (!option.disabled) {
|
|
420
|
-
handleClick(
|
|
442
|
+
handleClick({
|
|
443
|
+
clickedOption: option,
|
|
444
|
+
event
|
|
445
|
+
});
|
|
446
|
+
}
|
|
447
|
+
},
|
|
448
|
+
onKeyDown: (event) => {
|
|
449
|
+
const shouldClick = [" ", "Enter"].includes(event.key);
|
|
450
|
+
if (shouldClick) {
|
|
451
|
+
handleClick({
|
|
452
|
+
clickedOption: option,
|
|
453
|
+
event
|
|
454
|
+
});
|
|
421
455
|
}
|
|
422
456
|
},
|
|
423
|
-
onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? handleClick(option) : null,
|
|
424
457
|
ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
|
|
425
458
|
role: "option",
|
|
426
459
|
tabIndex: !option.disabled ? 0 : -1,
|
|
@@ -430,9 +463,12 @@ const CreateDropdown = ({
|
|
|
430
463
|
checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
|
|
431
464
|
className: dropdownCheckbox,
|
|
432
465
|
disabled: option.disabled,
|
|
433
|
-
onChange: () => {
|
|
466
|
+
onChange: (event) => {
|
|
434
467
|
if (!option.disabled) {
|
|
435
|
-
handleClick(
|
|
468
|
+
handleClick({
|
|
469
|
+
clickedOption: option,
|
|
470
|
+
event
|
|
471
|
+
});
|
|
436
472
|
}
|
|
437
473
|
},
|
|
438
474
|
tabIndex: -1,
|
|
@@ -496,8 +532,8 @@ const Dropdown = ({
|
|
|
496
532
|
const [maxWidth, setWidth] = useState(
|
|
497
533
|
refSelect.current?.offsetWidth ?? "100%"
|
|
498
534
|
);
|
|
499
|
-
const modalContext =
|
|
500
|
-
|
|
535
|
+
const modalContext = use(ModalContext);
|
|
536
|
+
useLayoutEffect(() => {
|
|
501
537
|
if (refSelect.current && isDropdownVisible) {
|
|
502
538
|
const position = refSelect.current.getBoundingClientRect().bottom + DROPDOWN_MAX_HEIGHT + Number(theme.sizing[INPUT_SIZE_HEIGHT[size]].replace("rem", "")) * 16 + Number.parseInt(theme.space["5"], 10);
|
|
503
539
|
const overflow = position - window.innerHeight + 32;
|
|
@@ -506,18 +542,23 @@ const Dropdown = ({
|
|
|
506
542
|
const modalElement = currentModal?.ref.current;
|
|
507
543
|
if (modalElement) {
|
|
508
544
|
const parentElement = modalElement.parentNode;
|
|
509
|
-
if (parentElement) {
|
|
545
|
+
if (parentElement instanceof HTMLElement) {
|
|
510
546
|
parentElement.scrollBy({
|
|
511
547
|
behavior: "smooth",
|
|
512
548
|
top: overflow
|
|
513
549
|
});
|
|
550
|
+
} else {
|
|
551
|
+
modalElement.scrollBy({
|
|
552
|
+
behavior: "smooth",
|
|
553
|
+
top: overflow
|
|
554
|
+
});
|
|
514
555
|
}
|
|
515
556
|
} else {
|
|
516
557
|
window.scrollBy({ behavior: "smooth", top: overflow });
|
|
517
558
|
}
|
|
518
559
|
}
|
|
519
560
|
}
|
|
520
|
-
}, [isDropdownVisible, refSelect, size,
|
|
561
|
+
}, [isDropdownVisible, refSelect, size, modalContext, theme]);
|
|
521
562
|
const resizeDropdown = useCallback(() => {
|
|
522
563
|
if (refSelect.current && refSelect.current.getBoundingClientRect().width > 0) {
|
|
523
564
|
setWidth(refSelect.current.getBoundingClientRect().width);
|
|
@@ -538,34 +579,21 @@ const Dropdown = ({
|
|
|
538
579
|
setDefaultSearch(null);
|
|
539
580
|
setSearch("");
|
|
540
581
|
}
|
|
582
|
+
const eventKeydown = (event) => handleKeyDown(
|
|
583
|
+
event,
|
|
584
|
+
ref,
|
|
585
|
+
options,
|
|
586
|
+
searchBarActive,
|
|
587
|
+
setSearch,
|
|
588
|
+
setDefaultSearch,
|
|
589
|
+
search
|
|
590
|
+
);
|
|
541
591
|
if (!searchable) {
|
|
542
|
-
document.addEventListener(
|
|
543
|
-
"keydown",
|
|
544
|
-
(event) => handleKeyDown(
|
|
545
|
-
event,
|
|
546
|
-
ref,
|
|
547
|
-
options,
|
|
548
|
-
searchBarActive,
|
|
549
|
-
setSearch,
|
|
550
|
-
setDefaultSearch,
|
|
551
|
-
search
|
|
552
|
-
)
|
|
553
|
-
);
|
|
592
|
+
document.addEventListener("keydown", eventKeydown);
|
|
554
593
|
}
|
|
555
594
|
return () => {
|
|
556
595
|
if (!searchable) {
|
|
557
|
-
document.removeEventListener(
|
|
558
|
-
"keydown",
|
|
559
|
-
(event) => handleKeyDown(
|
|
560
|
-
event,
|
|
561
|
-
ref,
|
|
562
|
-
options,
|
|
563
|
-
searchBarActive,
|
|
564
|
-
setSearch,
|
|
565
|
-
setDefaultSearch,
|
|
566
|
-
search
|
|
567
|
-
)
|
|
568
|
-
);
|
|
596
|
+
document.removeEventListener("keydown", eventKeydown);
|
|
569
597
|
}
|
|
570
598
|
};
|
|
571
599
|
}, [
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/* empty css */
|
|
3
3
|
import { createSprinkles } from "@vanilla-extract/sprinkles/createRuntimeSprinkles";
|
|
4
4
|
var stack = "uv_toi52u0";
|
|
5
|
-
var responsiveProperties = function() {
|
|
5
|
+
var responsiveProperties = (function() {
|
|
6
6
|
var x = { conditions: { defaultCondition: "xxsmall", conditionNames: ["xxsmall", "xsmall", "small", "medium", "large", "xlarge"], responsiveArray: ["xxsmall", "xsmall", "small", "medium", "large"] }, styles: { gap: { values: { "0rem": { conditions: { xxsmall: "uv_toi52u1", xsmall: "uv_toi52u2", small: "uv_toi52u3", medium: "uv_toi52u4", large: "uv_toi52u5", xlarge: "uv_toi52u6" }, defaultClass: "uv_toi52u1" }, "0.5rem": { conditions: { xxsmall: "uv_toi52u7", xsmall: "uv_toi52u8", small: "uv_toi52u9", medium: "uv_toi52ua", large: "uv_toi52ub", xlarge: "uv_toi52uc" }, defaultClass: "uv_toi52u7" }, "1rem": { conditions: { xxsmall: "uv_toi52ud", xsmall: "uv_toi52ue", small: "uv_toi52uf", medium: "uv_toi52ug", large: "uv_toi52uh", xlarge: "uv_toi52ui" }, defaultClass: "uv_toi52ud" }, "1.5rem": { conditions: { xxsmall: "uv_toi52uj", xsmall: "uv_toi52uk", small: "uv_toi52ul", medium: "uv_toi52um", large: "uv_toi52un", xlarge: "uv_toi52uo" }, defaultClass: "uv_toi52uj" }, "2rem": { conditions: { xxsmall: "uv_toi52up", xsmall: "uv_toi52uq", small: "uv_toi52ur", medium: "uv_toi52us", large: "uv_toi52ut", xlarge: "uv_toi52uu" }, defaultClass: "uv_toi52up" }, "2.5rem": { conditions: { xxsmall: "uv_toi52uv", xsmall: "uv_toi52uw", small: "uv_toi52ux", medium: "uv_toi52uy", large: "uv_toi52uz", xlarge: "uv_toi52u10" }, defaultClass: "uv_toi52uv" }, "3rem": { conditions: { xxsmall: "uv_toi52u11", xsmall: "uv_toi52u12", small: "uv_toi52u13", medium: "uv_toi52u14", large: "uv_toi52u15", xlarge: "uv_toi52u16" }, defaultClass: "uv_toi52u11" }, "3.5rem": { conditions: { xxsmall: "uv_toi52u17", xsmall: "uv_toi52u18", small: "uv_toi52u19", medium: "uv_toi52u1a", large: "uv_toi52u1b", xlarge: "uv_toi52u1c" }, defaultClass: "uv_toi52u17" }, "4rem": { conditions: { xxsmall: "uv_toi52u1d", xsmall: "uv_toi52u1e", small: "uv_toi52u1f", medium: "uv_toi52u1g", large: "uv_toi52u1h", xlarge: "uv_toi52u1i" }, defaultClass: "uv_toi52u1d" }, "4.5rem": { conditions: { xxsmall: "uv_toi52u1j", xsmall: "uv_toi52u1k", small: "uv_toi52u1l", medium: "uv_toi52u1m", large: "uv_toi52u1n", xlarge: "uv_toi52u1o" }, defaultClass: "uv_toi52u1j" }, "5rem": { conditions: { xxsmall: "uv_toi52u1p", xsmall: "uv_toi52u1q", small: "uv_toi52u1r", medium: "uv_toi52u1s", large: "uv_toi52u1t", xlarge: "uv_toi52u1u" }, defaultClass: "uv_toi52u1p" }, "0.25rem": { conditions: { xxsmall: "uv_toi52u1v", xsmall: "uv_toi52u1w", small: "uv_toi52u1x", medium: "uv_toi52u1y", large: "uv_toi52u1z", xlarge: "uv_toi52u20" }, defaultClass: "uv_toi52u1v" }, "0.125rem": { conditions: { xxsmall: "uv_toi52u21", xsmall: "uv_toi52u22", small: "uv_toi52u23", medium: "uv_toi52u24", large: "uv_toi52u25", xlarge: "uv_toi52u26" }, defaultClass: "uv_toi52u21" }, "0.75rem": { conditions: { xxsmall: "uv_toi52u27", xsmall: "uv_toi52u28", small: "uv_toi52u29", medium: "uv_toi52u2a", large: "uv_toi52u2b", xlarge: "uv_toi52u2c" }, defaultClass: "uv_toi52u27" } }, responsiveArray: void 0 }, flexDirection: { values: { column: { conditions: { xxsmall: "uv_toi52u2d", xsmall: "uv_toi52u2e", small: "uv_toi52u2f", medium: "uv_toi52u2g", large: "uv_toi52u2h", xlarge: "uv_toi52u2i" }, defaultClass: "uv_toi52u2d" }, row: { conditions: { xxsmall: "uv_toi52u2j", xsmall: "uv_toi52u2k", small: "uv_toi52u2l", medium: "uv_toi52u2m", large: "uv_toi52u2n", xlarge: "uv_toi52u2o" }, defaultClass: "uv_toi52u2j" }, "row-reverse": { conditions: { xxsmall: "uv_toi52u2p", xsmall: "uv_toi52u2q", small: "uv_toi52u2r", medium: "uv_toi52u2s", large: "uv_toi52u2t", xlarge: "uv_toi52u2u" }, defaultClass: "uv_toi52u2p" }, "column-reverse": { conditions: { xxsmall: "uv_toi52u2v", xsmall: "uv_toi52u2w", small: "uv_toi52u2x", medium: "uv_toi52u2y", large: "uv_toi52u2z", xlarge: "uv_toi52u30" }, defaultClass: "uv_toi52u2v" } }, responsiveArray: void 0 }, alignItems: { values: { normal: { conditions: { xxsmall: "uv_toi52u31", xsmall: "uv_toi52u32", small: "uv_toi52u33", medium: "uv_toi52u34", large: "uv_toi52u35", xlarge: "uv_toi52u36" }, defaultClass: "uv_toi52u31" }, stretch: { conditions: { xxsmall: "uv_toi52u37", xsmall: "uv_toi52u38", small: "uv_toi52u39", medium: "uv_toi52u3a", large: "uv_toi52u3b", xlarge: "uv_toi52u3c" }, defaultClass: "uv_toi52u37" }, center: { conditions: { xxsmall: "uv_toi52u3d", xsmall: "uv_toi52u3e", small: "uv_toi52u3f", medium: "uv_toi52u3g", large: "uv_toi52u3h", xlarge: "uv_toi52u3i" }, defaultClass: "uv_toi52u3d" }, start: { conditions: { xxsmall: "uv_toi52u3j", xsmall: "uv_toi52u3k", small: "uv_toi52u3l", medium: "uv_toi52u3m", large: "uv_toi52u3n", xlarge: "uv_toi52u3o" }, defaultClass: "uv_toi52u3j" }, end: { conditions: { xxsmall: "uv_toi52u3p", xsmall: "uv_toi52u3q", small: "uv_toi52u3r", medium: "uv_toi52u3s", large: "uv_toi52u3t", xlarge: "uv_toi52u3u" }, defaultClass: "uv_toi52u3p" }, "flex-start": { conditions: { xxsmall: "uv_toi52u3v", xsmall: "uv_toi52u3w", small: "uv_toi52u3x", medium: "uv_toi52u3y", large: "uv_toi52u3z", xlarge: "uv_toi52u40" }, defaultClass: "uv_toi52u3v" }, "flex-end": { conditions: { xxsmall: "uv_toi52u41", xsmall: "uv_toi52u42", small: "uv_toi52u43", medium: "uv_toi52u44", large: "uv_toi52u45", xlarge: "uv_toi52u46" }, defaultClass: "uv_toi52u41" }, "self-start": { conditions: { xxsmall: "uv_toi52u47", xsmall: "uv_toi52u48", small: "uv_toi52u49", medium: "uv_toi52u4a", large: "uv_toi52u4b", xlarge: "uv_toi52u4c" }, defaultClass: "uv_toi52u47" }, "self-end": { conditions: { xxsmall: "uv_toi52u4d", xsmall: "uv_toi52u4e", small: "uv_toi52u4f", medium: "uv_toi52u4g", large: "uv_toi52u4h", xlarge: "uv_toi52u4i" }, defaultClass: "uv_toi52u4d" }, baseline: { conditions: { xxsmall: "uv_toi52u4j", xsmall: "uv_toi52u4k", small: "uv_toi52u4l", medium: "uv_toi52u4m", large: "uv_toi52u4n", xlarge: "uv_toi52u4o" }, defaultClass: "uv_toi52u4j" }, "first baseline": { conditions: { xxsmall: "uv_toi52u4p", xsmall: "uv_toi52u4q", small: "uv_toi52u4r", medium: "uv_toi52u4s", large: "uv_toi52u4t", xlarge: "uv_toi52u4u" }, defaultClass: "uv_toi52u4p" }, "last baseline": { conditions: { xxsmall: "uv_toi52u4v", xsmall: "uv_toi52u4w", small: "uv_toi52u4x", medium: "uv_toi52u4y", large: "uv_toi52u4z", xlarge: "uv_toi52u50" }, defaultClass: "uv_toi52u4v" }, "safe center": { conditions: { xxsmall: "uv_toi52u51", xsmall: "uv_toi52u52", small: "uv_toi52u53", medium: "uv_toi52u54", large: "uv_toi52u55", xlarge: "uv_toi52u56" }, defaultClass: "uv_toi52u51" }, "unsafe center": { conditions: { xxsmall: "uv_toi52u57", xsmall: "uv_toi52u58", small: "uv_toi52u59", medium: "uv_toi52u5a", large: "uv_toi52u5b", xlarge: "uv_toi52u5c" }, defaultClass: "uv_toi52u57" } }, responsiveArray: void 0 }, justifyContent: { values: { normal: { conditions: { xxsmall: "uv_toi52u5d", xsmall: "uv_toi52u5e", small: "uv_toi52u5f", medium: "uv_toi52u5g", large: "uv_toi52u5h", xlarge: "uv_toi52u5i" }, defaultClass: "uv_toi52u5d" }, center: { conditions: { xxsmall: "uv_toi52u5j", xsmall: "uv_toi52u5k", small: "uv_toi52u5l", medium: "uv_toi52u5m", large: "uv_toi52u5n", xlarge: "uv_toi52u5o" }, defaultClass: "uv_toi52u5j" }, start: { conditions: { xxsmall: "uv_toi52u5p", xsmall: "uv_toi52u5q", small: "uv_toi52u5r", medium: "uv_toi52u5s", large: "uv_toi52u5t", xlarge: "uv_toi52u5u" }, defaultClass: "uv_toi52u5p" }, end: { conditions: { xxsmall: "uv_toi52u5v", xsmall: "uv_toi52u5w", small: "uv_toi52u5x", medium: "uv_toi52u5y", large: "uv_toi52u5z", xlarge: "uv_toi52u60" }, defaultClass: "uv_toi52u5v" }, "flex-start": { conditions: { xxsmall: "uv_toi52u61", xsmall: "uv_toi52u62", small: "uv_toi52u63", medium: "uv_toi52u64", large: "uv_toi52u65", xlarge: "uv_toi52u66" }, defaultClass: "uv_toi52u61" }, "flex-end": { conditions: { xxsmall: "uv_toi52u67", xsmall: "uv_toi52u68", small: "uv_toi52u69", medium: "uv_toi52u6a", large: "uv_toi52u6b", xlarge: "uv_toi52u6c" }, defaultClass: "uv_toi52u67" }, left: { conditions: { xxsmall: "uv_toi52u6d", xsmall: "uv_toi52u6e", small: "uv_toi52u6f", medium: "uv_toi52u6g", large: "uv_toi52u6h", xlarge: "uv_toi52u6i" }, defaultClass: "uv_toi52u6d" }, right: { conditions: { xxsmall: "uv_toi52u6j", xsmall: "uv_toi52u6k", small: "uv_toi52u6l", medium: "uv_toi52u6m", large: "uv_toi52u6n", xlarge: "uv_toi52u6o" }, defaultClass: "uv_toi52u6j" }, "space-between": { conditions: { xxsmall: "uv_toi52u6p", xsmall: "uv_toi52u6q", small: "uv_toi52u6r", medium: "uv_toi52u6s", large: "uv_toi52u6t", xlarge: "uv_toi52u6u" }, defaultClass: "uv_toi52u6p" }, "space-around": { conditions: { xxsmall: "uv_toi52u6v", xsmall: "uv_toi52u6w", small: "uv_toi52u6x", medium: "uv_toi52u6y", large: "uv_toi52u6z", xlarge: "uv_toi52u70" }, defaultClass: "uv_toi52u6v" }, "space-evenly": { conditions: { xxsmall: "uv_toi52u71", xsmall: "uv_toi52u72", small: "uv_toi52u73", medium: "uv_toi52u74", large: "uv_toi52u75", xlarge: "uv_toi52u76" }, defaultClass: "uv_toi52u71" }, stretch: { conditions: { xxsmall: "uv_toi52u77", xsmall: "uv_toi52u78", small: "uv_toi52u79", medium: "uv_toi52u7a", large: "uv_toi52u7b", xlarge: "uv_toi52u7c" }, defaultClass: "uv_toi52u77" } }, responsiveArray: void 0 }, flexWrap: { values: { nowrap: { conditions: { xxsmall: "uv_toi52u7d", xsmall: "uv_toi52u7e", small: "uv_toi52u7f", medium: "uv_toi52u7g", large: "uv_toi52u7h", xlarge: "uv_toi52u7i" }, defaultClass: "uv_toi52u7d" }, wrap: { conditions: { xxsmall: "uv_toi52u7j", xsmall: "uv_toi52u7k", small: "uv_toi52u7l", medium: "uv_toi52u7m", large: "uv_toi52u7n", xlarge: "uv_toi52u7o" }, defaultClass: "uv_toi52u7j" }, "wrap-reverse": { conditions: { xxsmall: "uv_toi52u7p", xsmall: "uv_toi52u7q", small: "uv_toi52u7r", medium: "uv_toi52u7s", large: "uv_toi52u7t", xlarge: "uv_toi52u7u" }, defaultClass: "uv_toi52u7p" } }, responsiveArray: void 0 } } };
|
|
7
7
|
x.styles.gap.responsiveArray = x.conditions.responsiveArray;
|
|
8
8
|
x.styles.flexDirection.responsiveArray = x.conditions.responsiveArray;
|
|
@@ -10,7 +10,7 @@ var responsiveProperties = function() {
|
|
|
10
10
|
x.styles.justifyContent.responsiveArray = x.conditions.responsiveArray;
|
|
11
11
|
x.styles.flexWrap.responsiveArray = x.conditions.responsiveArray;
|
|
12
12
|
return x;
|
|
13
|
-
}();
|
|
13
|
+
})();
|
|
14
14
|
var sprinkles = createSprinkles(responsiveProperties);
|
|
15
15
|
export {
|
|
16
16
|
responsiveProperties,
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* empty css */
|
|
1
2
|
/* empty css */
|
|
2
3
|
import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
3
4
|
var text = createRuntimeFn({ defaultClassName: "uv_m4c9ow0", variantClassNames: { strikeThrough: { true: "uv_m4c9ow1", false: "uv_m4c9ow2" }, italic: { true: "uv_m4c9ow3", false: "uv_m4c9ow4" }, underline: { true: "uv_m4c9ow5", false: "uv_m4c9ow6" }, oneLine: { true: "uv_m4c9ow7", false: "uv_m4c9ow8" }, sentiment: { primary: "uv_m4c9ow9", secondary: "uv_m4c9owa", neutral: "uv_m4c9owb", success: "uv_m4c9owc", danger: "uv_m4c9owd", warning: "uv_m4c9owe", info: "uv_m4c9owf", black: "uv_m4c9owg", white: "uv_m4c9owh" }, prominence: { "default": "uv_m4c9owi", strong: "uv_m4c9owj", stronger: "uv_m4c9owk", weak: "uv_m4c9owl" }, variant: { body: "uv_m4c9owm", bodySmall: "uv_m4c9own", bodySmallStrong: "uv_m4c9owo", bodySmallStronger: "uv_m4c9owp", bodyStrong: "uv_m4c9owq", bodyStronger: "uv_m4c9owr", caption: "uv_m4c9ows", captionSmall: "uv_m4c9owt", captionSmallStrong: "uv_m4c9owu", captionSmallStronger: "uv_m4c9owv", captionStrong: "uv_m4c9oww", captionStronger: "uv_m4c9owx", code: "uv_m4c9owy", codeStrong: "uv_m4c9owz", codeStronger: "uv_m4c9ow10", heading: "uv_m4c9ow11", headingLarge: "uv_m4c9ow12", headingLargeStrong: "uv_m4c9ow13", headingLargeStronger: "uv_m4c9ow14", headingSmall: "uv_m4c9ow15", headingSmallStrong: "uv_m4c9ow16", headingSmallStronger: "uv_m4c9ow17", headingStrong: "uv_m4c9ow18", headingStronger: "uv_m4c9ow19" }, disabled: { true: "uv_m4c9ow1a", false: "uv_m4c9ow1b" } }, defaultVariants: { strikeThrough: false, italic: false, underline: false, oneLine: false, sentiment: void 0, prominence: "default", variant: "body", disabled: false }, compoundVariants: [[{ sentiment: "primary", prominence: "default", disabled: false }, "uv_m4c9ow1c"], [{ sentiment: "primary", prominence: "strong", disabled: false }, "uv_m4c9ow1d"], [{ sentiment: "primary", prominence: "stronger", disabled: false }, "uv_m4c9ow1e"], [{ sentiment: "primary", prominence: "weak", disabled: false }, "uv_m4c9ow1f"], [{ sentiment: "secondary", prominence: "default", disabled: false }, "uv_m4c9ow1g"], [{ sentiment: "secondary", prominence: "strong", disabled: false }, "uv_m4c9ow1h"], [{ sentiment: "secondary", prominence: "stronger", disabled: false }, "uv_m4c9ow1i"], [{ sentiment: "secondary", prominence: "weak", disabled: false }, "uv_m4c9ow1j"], [{ sentiment: "danger", prominence: "default", disabled: false }, "uv_m4c9ow1k"], [{ sentiment: "danger", prominence: "strong", disabled: false }, "uv_m4c9ow1l"], [{ sentiment: "danger", prominence: "stronger", disabled: false }, "uv_m4c9ow1m"], [{ sentiment: "danger", prominence: "weak", disabled: false }, "uv_m4c9ow1n"], [{ sentiment: "info", prominence: "default", disabled: false }, "uv_m4c9ow1o"], [{ sentiment: "info", prominence: "strong", disabled: false }, "uv_m4c9ow1p"], [{ sentiment: "info", prominence: "stronger", disabled: false }, "uv_m4c9ow1q"], [{ sentiment: "info", prominence: "weak", disabled: false }, "uv_m4c9ow1r"], [{ sentiment: "success", prominence: "default", disabled: false }, "uv_m4c9ow1s"], [{ sentiment: "success", prominence: "strong", disabled: false }, "uv_m4c9ow1t"], [{ sentiment: "success", prominence: "stronger", disabled: false }, "uv_m4c9ow1u"], [{ sentiment: "success", prominence: "weak", disabled: false }, "uv_m4c9ow1v"], [{ sentiment: "warning", prominence: "default", disabled: false }, "uv_m4c9ow1w"], [{ sentiment: "warning", prominence: "strong", disabled: false }, "uv_m4c9ow1x"], [{ sentiment: "warning", prominence: "stronger", disabled: false }, "uv_m4c9ow1y"], [{ sentiment: "warning", prominence: "weak", disabled: false }, "uv_m4c9ow1z"], [{ sentiment: "neutral", prominence: "default", disabled: false }, "uv_m4c9ow20"], [{ sentiment: "neutral", prominence: "strong", disabled: false }, "uv_m4c9ow21"], [{ sentiment: "neutral", prominence: "stronger", disabled: false }, "uv_m4c9ow22"], [{ sentiment: "neutral", prominence: "weak", disabled: false }, "uv_m4c9ow23"], [{ sentiment: "black", prominence: "default", disabled: false }, "uv_m4c9ow24"], [{ sentiment: "black", prominence: "strong", disabled: false }, "uv_m4c9ow25"], [{ sentiment: "black", prominence: "stronger", disabled: false }, "uv_m4c9ow26"], [{ sentiment: "black", prominence: "weak", disabled: false }, "uv_m4c9ow27"], [{ sentiment: "white", prominence: "default", disabled: false }, "uv_m4c9ow28"], [{ sentiment: "white", prominence: "strong", disabled: false }, "uv_m4c9ow29"], [{ sentiment: "white", prominence: "stronger", disabled: false }, "uv_m4c9ow2a"], [{ sentiment: "white", prominence: "weak", disabled: false }, "uv_m4c9ow2b"], [{ sentiment: "primary", prominence: "default", disabled: true }, "uv_m4c9ow2c"], [{ sentiment: "primary", prominence: "strong", disabled: true }, "uv_m4c9ow2d"], [{ sentiment: "primary", prominence: "stronger", disabled: true }, "uv_m4c9ow2e"], [{ sentiment: "primary", prominence: "weak", disabled: true }, "uv_m4c9ow2f"], [{ sentiment: "secondary", prominence: "default", disabled: true }, "uv_m4c9ow2g"], [{ sentiment: "secondary", prominence: "strong", disabled: true }, "uv_m4c9ow2h"], [{ sentiment: "secondary", prominence: "stronger", disabled: true }, "uv_m4c9ow2i"], [{ sentiment: "secondary", prominence: "weak", disabled: true }, "uv_m4c9ow2j"], [{ sentiment: "danger", prominence: "default", disabled: true }, "uv_m4c9ow2k"], [{ sentiment: "danger", prominence: "strong", disabled: true }, "uv_m4c9ow2l"], [{ sentiment: "danger", prominence: "stronger", disabled: true }, "uv_m4c9ow2m"], [{ sentiment: "danger", prominence: "weak", disabled: true }, "uv_m4c9ow2n"], [{ sentiment: "info", prominence: "default", disabled: true }, "uv_m4c9ow2o"], [{ sentiment: "info", prominence: "strong", disabled: true }, "uv_m4c9ow2p"], [{ sentiment: "info", prominence: "stronger", disabled: true }, "uv_m4c9ow2q"], [{ sentiment: "info", prominence: "weak", disabled: true }, "uv_m4c9ow2r"], [{ sentiment: "success", prominence: "default", disabled: true }, "uv_m4c9ow2s"], [{ sentiment: "success", prominence: "strong", disabled: true }, "uv_m4c9ow2t"], [{ sentiment: "success", prominence: "stronger", disabled: true }, "uv_m4c9ow2u"], [{ sentiment: "success", prominence: "weak", disabled: true }, "uv_m4c9ow2v"], [{ sentiment: "warning", prominence: "default", disabled: true }, "uv_m4c9ow2w"], [{ sentiment: "warning", prominence: "strong", disabled: true }, "uv_m4c9ow2x"], [{ sentiment: "warning", prominence: "stronger", disabled: true }, "uv_m4c9ow2y"], [{ sentiment: "warning", prominence: "weak", disabled: true }, "uv_m4c9ow2z"], [{ sentiment: "neutral", prominence: "default", disabled: true }, "uv_m4c9ow30"], [{ sentiment: "neutral", prominence: "strong", disabled: true }, "uv_m4c9ow31"], [{ sentiment: "neutral", prominence: "stronger", disabled: true }, "uv_m4c9ow32"], [{ sentiment: "neutral", prominence: "weak", disabled: true }, "uv_m4c9ow33"], [{ sentiment: "black", prominence: "default", disabled: true }, "uv_m4c9ow34"], [{ sentiment: "black", prominence: "strong", disabled: true }, "uv_m4c9ow35"], [{ sentiment: "black", prominence: "stronger", disabled: true }, "uv_m4c9ow36"], [{ sentiment: "black", prominence: "weak", disabled: true }, "uv_m4c9ow37"], [{ sentiment: "white", prominence: "default", disabled: true }, "uv_m4c9ow38"], [{ sentiment: "white", prominence: "strong", disabled: true }, "uv_m4c9ow39"], [{ sentiment: "white", prominence: "stronger", disabled: true }, "uv_m4c9ow3a"], [{ sentiment: "white", prominence: "weak", disabled: true }, "uv_m4c9ow3b"], [{ prominence: "default", disabled: false }, "uv_m4c9ow3c"], [{ prominence: "strong", disabled: false }, "uv_m4c9ow3d"], [{ prominence: "stronger", disabled: false }, "uv_m4c9ow3e"], [{ prominence: "weak", disabled: false }, "uv_m4c9ow3f"]] });
|
|
@@ -37,6 +37,6 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<Pick<{
|
|
|
37
37
|
portalTarget?: HTMLElement;
|
|
38
38
|
dynamicDomRendering?: boolean;
|
|
39
39
|
style?: import("react").CSSProperties;
|
|
40
|
-
} & import("react").RefAttributes<HTMLDivElement>, "text" | "maxWidth" | "visible" | "style" | "className" | "children" | "data-testid" | "id" | "role" | "tabIndex" | "
|
|
40
|
+
} & import("react").RefAttributes<HTMLDivElement>, "text" | "maxWidth" | "visible" | "style" | "className" | "children" | "data-testid" | "id" | "role" | "tabIndex" | "portalTarget" | "containerFullHeight" | "containerFullWidth" | "debounceDelay" | "innerRef"> & {
|
|
41
41
|
placement?: Exclude<ComponentProps<typeof Popup>["placement"], "nested-menu">;
|
|
42
42
|
} & import("react").RefAttributes<HTMLDivElement>>;
|