@x-plat/design-system 0.14.1 → 0.14.3
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/dist/components/AutoResizeTextArea/index.d.cts +1 -1
- package/dist/components/AutoResizeTextArea/index.d.ts +1 -1
- package/dist/components/Badge/index.d.cts +1 -1
- package/dist/components/Badge/index.d.ts +1 -1
- package/dist/components/ChatInput/index.d.cts +1 -1
- package/dist/components/ChatInput/index.d.ts +1 -1
- package/dist/components/CheckBox/index.cjs +3 -3
- package/dist/components/CheckBox/index.d.cts +2 -2
- package/dist/components/CheckBox/index.d.ts +2 -2
- package/dist/components/CheckBox/index.js +3 -3
- package/dist/components/DatePicker/index.d.cts +1 -1
- package/dist/components/DatePicker/index.d.ts +1 -1
- package/dist/components/Dropdown/index.cjs +16 -13
- package/dist/components/Dropdown/index.js +16 -13
- package/dist/components/FieldMessage/index.d.cts +1 -1
- package/dist/components/FieldMessage/index.d.ts +1 -1
- package/dist/components/FileUpload/index.d.cts +1 -1
- package/dist/components/FileUpload/index.d.ts +1 -1
- package/dist/components/ImageSelector/index.d.cts +1 -1
- package/dist/components/ImageSelector/index.d.ts +1 -1
- package/dist/components/Input/index.d.cts +1 -1
- package/dist/components/Input/index.d.ts +1 -1
- package/dist/components/NotificationBadge/index.d.cts +1 -1
- package/dist/components/NotificationBadge/index.d.ts +1 -1
- package/dist/components/Pagination/index.d.cts +1 -1
- package/dist/components/Pagination/index.d.ts +1 -1
- package/dist/components/PopOver/index.cjs +15 -14
- package/dist/components/PopOver/index.js +15 -14
- package/dist/components/Progress/index.d.cts +1 -1
- package/dist/components/Progress/index.d.ts +1 -1
- package/dist/components/Radio/index.d.cts +2 -2
- package/dist/components/Radio/index.d.ts +2 -2
- package/dist/components/Select/index.cjs +16 -12
- package/dist/components/Select/index.d.cts +1 -1
- package/dist/components/Select/index.d.ts +1 -1
- package/dist/components/Select/index.js +16 -12
- package/dist/components/Spinner/index.d.cts +1 -1
- package/dist/components/Spinner/index.d.ts +1 -1
- package/dist/components/Stat/index.d.cts +1 -1
- package/dist/components/Stat/index.d.ts +1 -1
- package/dist/components/Steps/index.d.cts +1 -1
- package/dist/components/Steps/index.d.ts +1 -1
- package/dist/components/Switch/index.d.cts +2 -2
- package/dist/components/Switch/index.d.ts +2 -2
- package/dist/components/TextArea/index.d.cts +1 -1
- package/dist/components/TextArea/index.d.ts +1 -1
- package/dist/components/TimePicker/index.cjs +17 -13
- package/dist/components/TimePicker/index.d.cts +1 -1
- package/dist/components/TimePicker/index.d.ts +1 -1
- package/dist/components/TimePicker/index.js +17 -13
- package/dist/components/index.cjs +22 -22
- package/dist/components/index.d.cts +2 -2
- package/dist/components/index.d.ts +2 -2
- package/dist/components/index.js +22 -22
- package/dist/index.cjs +24 -22
- package/dist/index.d.cts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +23 -22
- package/dist/layout/Layout/index.d.cts +15 -7
- package/dist/layout/Layout/index.d.ts +15 -7
- package/dist/{status-njWqQWFV.d.cts → status-C70BBv2S.d.cts} +3 -1
- package/dist/{status-njWqQWFV.d.ts → status-C70BBv2S.d.ts} +3 -1
- package/dist/tokens/index.cjs +5 -0
- package/dist/tokens/index.d.cts +3 -0
- package/dist/tokens/index.d.ts +3 -0
- package/dist/tokens/index.js +4 -0
- package/dist/{validation-Dqo1zqhT.d.cts → validation-BYpAI6Ct.d.cts} +1 -1
- package/dist/{validation-Dqo1zqhT.d.ts → validation-BYpAI6Ct.d.ts} +1 -1
- package/guidelines/MIGRATION.md +50 -1
- package/package.json +1 -1
|
@@ -13,23 +13,22 @@ var Portal_default = Portal;
|
|
|
13
13
|
// src/tokens/hooks/useAutoPosition.ts
|
|
14
14
|
import React from "react";
|
|
15
15
|
var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
16
|
-
const [
|
|
17
|
-
|
|
18
|
-
direction: "bottom"
|
|
19
|
-
});
|
|
16
|
+
const [direction, setDirection] = React.useState("bottom");
|
|
17
|
+
const directionRef = React.useRef("bottom");
|
|
20
18
|
const calculatePosition = React.useCallback(() => {
|
|
21
|
-
|
|
19
|
+
const pop = popRef.current;
|
|
20
|
+
if (!triggerRef.current || !pop) return;
|
|
22
21
|
const triggerRect = triggerRef.current.getBoundingClientRect();
|
|
23
|
-
const popW =
|
|
24
|
-
const popH =
|
|
22
|
+
const popW = pop.offsetWidth;
|
|
23
|
+
const popH = pop.offsetHeight;
|
|
25
24
|
const viewportHeight = window.innerHeight;
|
|
26
25
|
const viewportWidth = window.innerWidth;
|
|
27
26
|
if (popH === 0 || popW === 0) return;
|
|
28
|
-
let
|
|
27
|
+
let next = "bottom";
|
|
29
28
|
let top;
|
|
30
29
|
let left;
|
|
31
30
|
if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
|
|
32
|
-
|
|
31
|
+
next = "top";
|
|
33
32
|
top = triggerRect.top - popH;
|
|
34
33
|
} else {
|
|
35
34
|
top = triggerRect.bottom;
|
|
@@ -39,7 +38,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
39
38
|
left = triggerRect.right - popW;
|
|
40
39
|
}
|
|
41
40
|
if (left < 8) left = 8;
|
|
42
|
-
|
|
41
|
+
pop.style.top = `${top}px`;
|
|
42
|
+
pop.style.left = `${left}px`;
|
|
43
|
+
if (next !== directionRef.current) {
|
|
44
|
+
directionRef.current = next;
|
|
45
|
+
setDirection(next);
|
|
46
|
+
}
|
|
43
47
|
}, [triggerRef, popRef]);
|
|
44
48
|
React.useLayoutEffect(() => {
|
|
45
49
|
if (!enabled) return;
|
|
@@ -70,7 +74,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
70
74
|
window.removeEventListener("scroll", onScrollOrResize, true);
|
|
71
75
|
};
|
|
72
76
|
}, [calculatePosition, enabled]);
|
|
73
|
-
return
|
|
77
|
+
return { direction };
|
|
74
78
|
};
|
|
75
79
|
var useAutoPosition_default = useAutoPosition;
|
|
76
80
|
|
|
@@ -1377,7 +1381,7 @@ var SelectRoot = (props) => {
|
|
|
1377
1381
|
{
|
|
1378
1382
|
className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
|
|
1379
1383
|
ref: contentRef,
|
|
1380
|
-
style: {
|
|
1384
|
+
style: { width: triggerRef.current?.offsetWidth },
|
|
1381
1385
|
role: "listbox",
|
|
1382
1386
|
children: [
|
|
1383
1387
|
searchable && /* @__PURE__ */ jsx297("div", { className: "select-search", children: /* @__PURE__ */ jsx297(
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { a as StatusTypeInput } from '../../status-C70BBv2S.cjs';
|
|
4
4
|
|
|
5
5
|
type StatSize = "sm" | "md" | "lg";
|
|
6
6
|
type TrendDirection = "up" | "down" | "flat";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { a as StatusTypeInput } from '../../status-C70BBv2S.js';
|
|
4
4
|
|
|
5
5
|
type StatSize = "sm" | "md" | "lg";
|
|
6
6
|
type TrendDirection = "up" | "down" | "flat";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { L as LegacyStatusType } from '../../status-
|
|
4
|
-
import { V as Validation } from '../../validation-
|
|
3
|
+
import { L as LegacyStatusType } from '../../status-C70BBv2S.cjs';
|
|
4
|
+
import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
|
|
5
5
|
|
|
6
6
|
type SwitchSize = "sm" | "md" | "lg";
|
|
7
7
|
/** Switch 의 상태 색 */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { L as LegacyStatusType } from '../../status-
|
|
4
|
-
import { V as Validation } from '../../validation-
|
|
3
|
+
import { L as LegacyStatusType } from '../../status-C70BBv2S.js';
|
|
4
|
+
import { V as Validation } from '../../validation-BYpAI6Ct.js';
|
|
5
5
|
|
|
6
6
|
type SwitchSize = "sm" | "md" | "lg";
|
|
7
7
|
/** Switch 의 상태 색 */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { T as TextareaAttributes } from '../../attributes-DJIWir_0.cjs';
|
|
3
|
-
import { V as Validation } from '../../validation-
|
|
3
|
+
import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
|
|
4
4
|
|
|
5
5
|
type TextAreaSize = "sm" | "md" | "lg";
|
|
6
6
|
type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { T as TextareaAttributes } from '../../attributes-DJIWir_0.js';
|
|
3
|
-
import { V as Validation } from '../../validation-
|
|
3
|
+
import { V as Validation } from '../../validation-BYpAI6Ct.js';
|
|
4
4
|
|
|
5
5
|
type TextAreaSize = "sm" | "md" | "lg";
|
|
6
6
|
type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
|
|
@@ -49,23 +49,22 @@ var Portal_default = Portal;
|
|
|
49
49
|
// src/tokens/hooks/useAutoPosition.ts
|
|
50
50
|
var import_react = __toESM(require("react"), 1);
|
|
51
51
|
var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
52
|
-
const [
|
|
53
|
-
|
|
54
|
-
direction: "bottom"
|
|
55
|
-
});
|
|
52
|
+
const [direction, setDirection] = import_react.default.useState("bottom");
|
|
53
|
+
const directionRef = import_react.default.useRef("bottom");
|
|
56
54
|
const calculatePosition = import_react.default.useCallback(() => {
|
|
57
|
-
|
|
55
|
+
const pop = popRef.current;
|
|
56
|
+
if (!triggerRef.current || !pop) return;
|
|
58
57
|
const triggerRect = triggerRef.current.getBoundingClientRect();
|
|
59
|
-
const popW =
|
|
60
|
-
const popH =
|
|
58
|
+
const popW = pop.offsetWidth;
|
|
59
|
+
const popH = pop.offsetHeight;
|
|
61
60
|
const viewportHeight = window.innerHeight;
|
|
62
61
|
const viewportWidth = window.innerWidth;
|
|
63
62
|
if (popH === 0 || popW === 0) return;
|
|
64
|
-
let
|
|
63
|
+
let next = "bottom";
|
|
65
64
|
let top;
|
|
66
65
|
let left;
|
|
67
66
|
if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
|
|
68
|
-
|
|
67
|
+
next = "top";
|
|
69
68
|
top = triggerRect.top - popH;
|
|
70
69
|
} else {
|
|
71
70
|
top = triggerRect.bottom;
|
|
@@ -75,7 +74,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
75
74
|
left = triggerRect.right - popW;
|
|
76
75
|
}
|
|
77
76
|
if (left < 8) left = 8;
|
|
78
|
-
|
|
77
|
+
pop.style.top = `${top}px`;
|
|
78
|
+
pop.style.left = `${left}px`;
|
|
79
|
+
if (next !== directionRef.current) {
|
|
80
|
+
directionRef.current = next;
|
|
81
|
+
setDirection(next);
|
|
82
|
+
}
|
|
79
83
|
}, [triggerRef, popRef]);
|
|
80
84
|
import_react.default.useLayoutEffect(() => {
|
|
81
85
|
if (!enabled) return;
|
|
@@ -106,7 +110,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
106
110
|
window.removeEventListener("scroll", onScrollOrResize, true);
|
|
107
111
|
};
|
|
108
112
|
}, [calculatePosition, enabled]);
|
|
109
|
-
return
|
|
113
|
+
return { direction };
|
|
110
114
|
};
|
|
111
115
|
var useAutoPosition_default = useAutoPosition;
|
|
112
116
|
|
|
@@ -371,7 +375,7 @@ var TimePicker = (props) => {
|
|
|
371
375
|
close();
|
|
372
376
|
triggerRef.current?.focus({ preventScroll: true });
|
|
373
377
|
});
|
|
374
|
-
|
|
378
|
+
useAutoPosition_default(triggerRef, contentRef, mounted);
|
|
375
379
|
import_react4.default.useEffect(() => {
|
|
376
380
|
if (disabled && isOpen) setOpen(false);
|
|
377
381
|
}, [disabled, isOpen]);
|
|
@@ -418,7 +422,7 @@ var TimePicker = (props) => {
|
|
|
418
422
|
{
|
|
419
423
|
ref: contentRef,
|
|
420
424
|
className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
|
|
421
|
-
style: {
|
|
425
|
+
style: { width: triggerRef.current?.offsetWidth },
|
|
422
426
|
role: "listbox",
|
|
423
427
|
children: options.map((t) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
424
428
|
"div",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { V as Validation } from '../../validation-
|
|
3
|
+
import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
|
|
4
4
|
|
|
5
5
|
type TimePickerSize = "sm" | "md" | "lg";
|
|
6
6
|
interface TimePickerProps {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { V as Validation } from '../../validation-
|
|
3
|
+
import { V as Validation } from '../../validation-BYpAI6Ct.js';
|
|
4
4
|
|
|
5
5
|
type TimePickerSize = "sm" | "md" | "lg";
|
|
6
6
|
interface TimePickerProps {
|
|
@@ -13,23 +13,22 @@ var Portal_default = Portal;
|
|
|
13
13
|
// src/tokens/hooks/useAutoPosition.ts
|
|
14
14
|
import React from "react";
|
|
15
15
|
var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
16
|
-
const [
|
|
17
|
-
|
|
18
|
-
direction: "bottom"
|
|
19
|
-
});
|
|
16
|
+
const [direction, setDirection] = React.useState("bottom");
|
|
17
|
+
const directionRef = React.useRef("bottom");
|
|
20
18
|
const calculatePosition = React.useCallback(() => {
|
|
21
|
-
|
|
19
|
+
const pop = popRef.current;
|
|
20
|
+
if (!triggerRef.current || !pop) return;
|
|
22
21
|
const triggerRect = triggerRef.current.getBoundingClientRect();
|
|
23
|
-
const popW =
|
|
24
|
-
const popH =
|
|
22
|
+
const popW = pop.offsetWidth;
|
|
23
|
+
const popH = pop.offsetHeight;
|
|
25
24
|
const viewportHeight = window.innerHeight;
|
|
26
25
|
const viewportWidth = window.innerWidth;
|
|
27
26
|
if (popH === 0 || popW === 0) return;
|
|
28
|
-
let
|
|
27
|
+
let next = "bottom";
|
|
29
28
|
let top;
|
|
30
29
|
let left;
|
|
31
30
|
if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
|
|
32
|
-
|
|
31
|
+
next = "top";
|
|
33
32
|
top = triggerRect.top - popH;
|
|
34
33
|
} else {
|
|
35
34
|
top = triggerRect.bottom;
|
|
@@ -39,7 +38,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
39
38
|
left = triggerRect.right - popW;
|
|
40
39
|
}
|
|
41
40
|
if (left < 8) left = 8;
|
|
42
|
-
|
|
41
|
+
pop.style.top = `${top}px`;
|
|
42
|
+
pop.style.left = `${left}px`;
|
|
43
|
+
if (next !== directionRef.current) {
|
|
44
|
+
directionRef.current = next;
|
|
45
|
+
setDirection(next);
|
|
46
|
+
}
|
|
43
47
|
}, [triggerRef, popRef]);
|
|
44
48
|
React.useLayoutEffect(() => {
|
|
45
49
|
if (!enabled) return;
|
|
@@ -70,7 +74,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
70
74
|
window.removeEventListener("scroll", onScrollOrResize, true);
|
|
71
75
|
};
|
|
72
76
|
}, [calculatePosition, enabled]);
|
|
73
|
-
return
|
|
77
|
+
return { direction };
|
|
74
78
|
};
|
|
75
79
|
var useAutoPosition_default = useAutoPosition;
|
|
76
80
|
|
|
@@ -335,7 +339,7 @@ var TimePicker = (props) => {
|
|
|
335
339
|
close();
|
|
336
340
|
triggerRef.current?.focus({ preventScroll: true });
|
|
337
341
|
});
|
|
338
|
-
|
|
342
|
+
useAutoPosition_default(triggerRef, contentRef, mounted);
|
|
339
343
|
React4.useEffect(() => {
|
|
340
344
|
if (disabled && isOpen) setOpen(false);
|
|
341
345
|
}, [disabled, isOpen]);
|
|
@@ -382,7 +386,7 @@ var TimePicker = (props) => {
|
|
|
382
386
|
{
|
|
383
387
|
ref: contentRef,
|
|
384
388
|
className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
|
|
385
|
-
style: {
|
|
389
|
+
style: { width: triggerRef.current?.offsetWidth },
|
|
386
390
|
role: "listbox",
|
|
387
391
|
children: options.map((t) => /* @__PURE__ */ jsx5(
|
|
388
392
|
"div",
|
|
@@ -2991,12 +2991,12 @@ var ChatInput_default = ChatInput;
|
|
|
2991
2991
|
// src/tokens/colors.ts
|
|
2992
2992
|
var import_tokens_core = require("@x-plat/tokens-core");
|
|
2993
2993
|
|
|
2994
|
-
// src/tokens/index.ts
|
|
2995
|
-
var import_tokens_core2 = require("@x-plat/tokens-core");
|
|
2996
|
-
|
|
2997
2994
|
// src/tokens/interface/status.ts
|
|
2998
2995
|
var normalizeStatus = (value) => value === "brand" ? "primary" : value;
|
|
2999
2996
|
|
|
2997
|
+
// src/tokens/index.ts
|
|
2998
|
+
var import_tokens_core2 = require("@x-plat/tokens-core");
|
|
2999
|
+
|
|
3000
3000
|
// src/components/CheckBox/CheckBox.tsx
|
|
3001
3001
|
var import_jsx_runtime309 = require("react/jsx-runtime");
|
|
3002
3002
|
var CheckBox = (props) => {
|
|
@@ -3976,23 +3976,22 @@ var Portal_default = Portal;
|
|
|
3976
3976
|
// src/tokens/hooks/useAutoPosition.ts
|
|
3977
3977
|
var import_react19 = __toESM(require("react"), 1);
|
|
3978
3978
|
var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
3979
|
-
const [
|
|
3980
|
-
|
|
3981
|
-
direction: "bottom"
|
|
3982
|
-
});
|
|
3979
|
+
const [direction, setDirection] = import_react19.default.useState("bottom");
|
|
3980
|
+
const directionRef = import_react19.default.useRef("bottom");
|
|
3983
3981
|
const calculatePosition = import_react19.default.useCallback(() => {
|
|
3984
|
-
|
|
3982
|
+
const pop = popRef.current;
|
|
3983
|
+
if (!triggerRef.current || !pop) return;
|
|
3985
3984
|
const triggerRect = triggerRef.current.getBoundingClientRect();
|
|
3986
|
-
const popW =
|
|
3987
|
-
const popH =
|
|
3985
|
+
const popW = pop.offsetWidth;
|
|
3986
|
+
const popH = pop.offsetHeight;
|
|
3988
3987
|
const viewportHeight = window.innerHeight;
|
|
3989
3988
|
const viewportWidth = window.innerWidth;
|
|
3990
3989
|
if (popH === 0 || popW === 0) return;
|
|
3991
|
-
let
|
|
3990
|
+
let next = "bottom";
|
|
3992
3991
|
let top;
|
|
3993
3992
|
let left;
|
|
3994
3993
|
if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
|
|
3995
|
-
|
|
3994
|
+
next = "top";
|
|
3996
3995
|
top = triggerRect.top - popH;
|
|
3997
3996
|
} else {
|
|
3998
3997
|
top = triggerRect.bottom;
|
|
@@ -4002,7 +4001,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
4002
4001
|
left = triggerRect.right - popW;
|
|
4003
4002
|
}
|
|
4004
4003
|
if (left < 8) left = 8;
|
|
4005
|
-
|
|
4004
|
+
pop.style.top = `${top}px`;
|
|
4005
|
+
pop.style.left = `${left}px`;
|
|
4006
|
+
if (next !== directionRef.current) {
|
|
4007
|
+
directionRef.current = next;
|
|
4008
|
+
setDirection(next);
|
|
4009
|
+
}
|
|
4006
4010
|
}, [triggerRef, popRef]);
|
|
4007
4011
|
import_react19.default.useLayoutEffect(() => {
|
|
4008
4012
|
if (!enabled) return;
|
|
@@ -4033,7 +4037,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
4033
4037
|
window.removeEventListener("scroll", onScrollOrResize, true);
|
|
4034
4038
|
};
|
|
4035
4039
|
}, [calculatePosition, enabled]);
|
|
4036
|
-
return
|
|
4040
|
+
return { direction };
|
|
4037
4041
|
};
|
|
4038
4042
|
var useAutoPosition_default = useAutoPosition;
|
|
4039
4043
|
|
|
@@ -4071,7 +4075,7 @@ var Dropdown = (props) => {
|
|
|
4071
4075
|
const [visible, setVisible] = import_react21.default.useState(false);
|
|
4072
4076
|
const triggerRef = import_react21.default.useRef(null);
|
|
4073
4077
|
const menuRef = import_react21.default.useRef(null);
|
|
4074
|
-
const {
|
|
4078
|
+
const { direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
|
|
4075
4079
|
useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
|
|
4076
4080
|
useEscapeKey(isOpen, () => {
|
|
4077
4081
|
setIsOpen(false);
|
|
@@ -4107,7 +4111,6 @@ var Dropdown = (props) => {
|
|
|
4107
4111
|
{
|
|
4108
4112
|
ref: menuRef,
|
|
4109
4113
|
className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
|
|
4110
|
-
style: { top: position.top, left: position.left },
|
|
4111
4114
|
role: "menu",
|
|
4112
4115
|
children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
|
|
4113
4116
|
"button",
|
|
@@ -6041,9 +6044,6 @@ var PopOver = (props) => {
|
|
|
6041
6044
|
eventTrigger && "visible"
|
|
6042
6045
|
),
|
|
6043
6046
|
ref: popRef,
|
|
6044
|
-
style: {
|
|
6045
|
-
...position.position
|
|
6046
|
-
},
|
|
6047
6047
|
children: PopOverEl
|
|
6048
6048
|
}
|
|
6049
6049
|
) })
|
|
@@ -6386,7 +6386,7 @@ var SelectRoot = (props) => {
|
|
|
6386
6386
|
{
|
|
6387
6387
|
className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
|
|
6388
6388
|
ref: contentRef,
|
|
6389
|
-
style: {
|
|
6389
|
+
style: { width: triggerRef.current?.offsetWidth },
|
|
6390
6390
|
role: "listbox",
|
|
6391
6391
|
children: [
|
|
6392
6392
|
searchable && /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("div", { className: "select-search", children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
|
|
@@ -7231,7 +7231,7 @@ var TimePicker = (props) => {
|
|
|
7231
7231
|
close();
|
|
7232
7232
|
triggerRef.current?.focus({ preventScroll: true });
|
|
7233
7233
|
});
|
|
7234
|
-
|
|
7234
|
+
useAutoPosition_default(triggerRef, contentRef, mounted);
|
|
7235
7235
|
import_react40.default.useEffect(() => {
|
|
7236
7236
|
if (disabled && isOpen) setOpen(false);
|
|
7237
7237
|
}, [disabled, isOpen]);
|
|
@@ -7278,7 +7278,7 @@ var TimePicker = (props) => {
|
|
|
7278
7278
|
{
|
|
7279
7279
|
ref: contentRef,
|
|
7280
7280
|
className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
|
|
7281
|
-
style: {
|
|
7281
|
+
style: { width: triggerRef.current?.offsetWidth },
|
|
7282
7282
|
role: "listbox",
|
|
7283
7283
|
children: options.map((t) => /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(
|
|
7284
7284
|
"div",
|
|
@@ -49,6 +49,6 @@ export { Tooltip } from './Tooltip/index.cjs';
|
|
|
49
49
|
export { Video, VideoProps } from './Video/index.cjs';
|
|
50
50
|
import 'react';
|
|
51
51
|
import '../attributes-DJIWir_0.cjs';
|
|
52
|
-
import '../validation-
|
|
52
|
+
import '../validation-BYpAI6Ct.cjs';
|
|
53
53
|
import 'react/jsx-runtime';
|
|
54
|
-
import '../status-
|
|
54
|
+
import '../status-C70BBv2S.cjs';
|
|
@@ -49,6 +49,6 @@ export { Tooltip } from './Tooltip/index.js';
|
|
|
49
49
|
export { Video, VideoProps } from './Video/index.js';
|
|
50
50
|
import 'react';
|
|
51
51
|
import '../attributes-DJIWir_0.js';
|
|
52
|
-
import '../validation-
|
|
52
|
+
import '../validation-BYpAI6Ct.js';
|
|
53
53
|
import 'react/jsx-runtime';
|
|
54
|
-
import '../status-
|
|
54
|
+
import '../status-C70BBv2S.js';
|
package/dist/components/index.js
CHANGED
|
@@ -2889,12 +2889,12 @@ var ChatInput_default = ChatInput;
|
|
|
2889
2889
|
// src/tokens/colors.ts
|
|
2890
2890
|
import { semantic } from "@x-plat/tokens-core";
|
|
2891
2891
|
|
|
2892
|
-
// src/tokens/index.ts
|
|
2893
|
-
import { cssVar } from "@x-plat/tokens-core";
|
|
2894
|
-
|
|
2895
2892
|
// src/tokens/interface/status.ts
|
|
2896
2893
|
var normalizeStatus = (value) => value === "brand" ? "primary" : value;
|
|
2897
2894
|
|
|
2895
|
+
// src/tokens/index.ts
|
|
2896
|
+
import { cssVar } from "@x-plat/tokens-core";
|
|
2897
|
+
|
|
2898
2898
|
// src/components/CheckBox/CheckBox.tsx
|
|
2899
2899
|
import { jsx as jsx309, jsxs as jsxs198 } from "react/jsx-runtime";
|
|
2900
2900
|
var CheckBox = (props) => {
|
|
@@ -3874,23 +3874,22 @@ var Portal_default = Portal;
|
|
|
3874
3874
|
// src/tokens/hooks/useAutoPosition.ts
|
|
3875
3875
|
import React19 from "react";
|
|
3876
3876
|
var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
3877
|
-
const [
|
|
3878
|
-
|
|
3879
|
-
direction: "bottom"
|
|
3880
|
-
});
|
|
3877
|
+
const [direction, setDirection] = React19.useState("bottom");
|
|
3878
|
+
const directionRef = React19.useRef("bottom");
|
|
3881
3879
|
const calculatePosition = React19.useCallback(() => {
|
|
3882
|
-
|
|
3880
|
+
const pop = popRef.current;
|
|
3881
|
+
if (!triggerRef.current || !pop) return;
|
|
3883
3882
|
const triggerRect = triggerRef.current.getBoundingClientRect();
|
|
3884
|
-
const popW =
|
|
3885
|
-
const popH =
|
|
3883
|
+
const popW = pop.offsetWidth;
|
|
3884
|
+
const popH = pop.offsetHeight;
|
|
3886
3885
|
const viewportHeight = window.innerHeight;
|
|
3887
3886
|
const viewportWidth = window.innerWidth;
|
|
3888
3887
|
if (popH === 0 || popW === 0) return;
|
|
3889
|
-
let
|
|
3888
|
+
let next = "bottom";
|
|
3890
3889
|
let top;
|
|
3891
3890
|
let left;
|
|
3892
3891
|
if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
|
|
3893
|
-
|
|
3892
|
+
next = "top";
|
|
3894
3893
|
top = triggerRect.top - popH;
|
|
3895
3894
|
} else {
|
|
3896
3895
|
top = triggerRect.bottom;
|
|
@@ -3900,7 +3899,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
3900
3899
|
left = triggerRect.right - popW;
|
|
3901
3900
|
}
|
|
3902
3901
|
if (left < 8) left = 8;
|
|
3903
|
-
|
|
3902
|
+
pop.style.top = `${top}px`;
|
|
3903
|
+
pop.style.left = `${left}px`;
|
|
3904
|
+
if (next !== directionRef.current) {
|
|
3905
|
+
directionRef.current = next;
|
|
3906
|
+
setDirection(next);
|
|
3907
|
+
}
|
|
3904
3908
|
}, [triggerRef, popRef]);
|
|
3905
3909
|
React19.useLayoutEffect(() => {
|
|
3906
3910
|
if (!enabled) return;
|
|
@@ -3931,7 +3935,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
3931
3935
|
window.removeEventListener("scroll", onScrollOrResize, true);
|
|
3932
3936
|
};
|
|
3933
3937
|
}, [calculatePosition, enabled]);
|
|
3934
|
-
return
|
|
3938
|
+
return { direction };
|
|
3935
3939
|
};
|
|
3936
3940
|
var useAutoPosition_default = useAutoPosition;
|
|
3937
3941
|
|
|
@@ -3969,7 +3973,7 @@ var Dropdown = (props) => {
|
|
|
3969
3973
|
const [visible, setVisible] = React21.useState(false);
|
|
3970
3974
|
const triggerRef = React21.useRef(null);
|
|
3971
3975
|
const menuRef = React21.useRef(null);
|
|
3972
|
-
const {
|
|
3976
|
+
const { direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
|
|
3973
3977
|
useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
|
|
3974
3978
|
useEscapeKey(isOpen, () => {
|
|
3975
3979
|
setIsOpen(false);
|
|
@@ -4005,7 +4009,6 @@ var Dropdown = (props) => {
|
|
|
4005
4009
|
{
|
|
4006
4010
|
ref: menuRef,
|
|
4007
4011
|
className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
|
|
4008
|
-
style: { top: position.top, left: position.left },
|
|
4009
4012
|
role: "menu",
|
|
4010
4013
|
children: items.map((item) => /* @__PURE__ */ jsx322(
|
|
4011
4014
|
"button",
|
|
@@ -5939,9 +5942,6 @@ var PopOver = (props) => {
|
|
|
5939
5942
|
eventTrigger && "visible"
|
|
5940
5943
|
),
|
|
5941
5944
|
ref: popRef,
|
|
5942
|
-
style: {
|
|
5943
|
-
...position.position
|
|
5944
|
-
},
|
|
5945
5945
|
children: PopOverEl
|
|
5946
5946
|
}
|
|
5947
5947
|
) })
|
|
@@ -6284,7 +6284,7 @@ var SelectRoot = (props) => {
|
|
|
6284
6284
|
{
|
|
6285
6285
|
className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
|
|
6286
6286
|
ref: contentRef,
|
|
6287
|
-
style: {
|
|
6287
|
+
style: { width: triggerRef.current?.offsetWidth },
|
|
6288
6288
|
role: "listbox",
|
|
6289
6289
|
children: [
|
|
6290
6290
|
searchable && /* @__PURE__ */ jsx337("div", { className: "select-search", children: /* @__PURE__ */ jsx337(
|
|
@@ -7129,7 +7129,7 @@ var TimePicker = (props) => {
|
|
|
7129
7129
|
close();
|
|
7130
7130
|
triggerRef.current?.focus({ preventScroll: true });
|
|
7131
7131
|
});
|
|
7132
|
-
|
|
7132
|
+
useAutoPosition_default(triggerRef, contentRef, mounted);
|
|
7133
7133
|
React40.useEffect(() => {
|
|
7134
7134
|
if (disabled && isOpen) setOpen(false);
|
|
7135
7135
|
}, [disabled, isOpen]);
|
|
@@ -7176,7 +7176,7 @@ var TimePicker = (props) => {
|
|
|
7176
7176
|
{
|
|
7177
7177
|
ref: contentRef,
|
|
7178
7178
|
className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
|
|
7179
|
-
style: {
|
|
7179
|
+
style: { width: triggerRef.current?.offsetWidth },
|
|
7180
7180
|
role: "listbox",
|
|
7181
7181
|
children: options.map((t) => /* @__PURE__ */ jsx351(
|
|
7182
7182
|
"div",
|