@situaction/traq-ui-ste 1.2.28 → 1.2.30
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.
|
@@ -27,5 +27,7 @@ export interface ModalProps {
|
|
|
27
27
|
anchorRef?: RefObject<HTMLElement>;
|
|
28
28
|
/** If true, show a background overlay behind the panel */
|
|
29
29
|
overlayBackground?: boolean;
|
|
30
|
+
/** Base z-index for the modal stack */
|
|
31
|
+
zIndex?: number;
|
|
30
32
|
}
|
|
31
33
|
export declare const Modal: import('react').ForwardRefExoticComponent<ModalProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -1,65 +1,76 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as D, Fragment as P, jsx as v } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as h, useRef as j, useState as C, useEffect as E, useLayoutEffect as N } from "react";
|
|
3
|
-
import '../../styles/Modal.css';const
|
|
4
|
-
overlay:
|
|
5
|
-
overlayBackground:
|
|
6
|
-
modalContent:
|
|
7
|
-
centered:
|
|
8
|
-
},
|
|
3
|
+
import '../../styles/Modal.css';const Z = "_overlay_1hu8i_1", z = "_overlayBackground_1hu8i_11", F = "_modalContent_1hu8i_15", I = "_centered_1hu8i_22", f = {
|
|
4
|
+
overlay: Z,
|
|
5
|
+
overlayBackground: z,
|
|
6
|
+
modalContent: F,
|
|
7
|
+
centered: I
|
|
8
|
+
}, S = h(
|
|
9
9
|
({
|
|
10
10
|
open: t,
|
|
11
11
|
onClose: d,
|
|
12
|
-
children:
|
|
13
|
-
position:
|
|
14
|
-
centered:
|
|
12
|
+
children: y,
|
|
13
|
+
position: e,
|
|
14
|
+
centered: a = !1,
|
|
15
15
|
className: _,
|
|
16
|
-
disableOverlay:
|
|
16
|
+
disableOverlay: m = !1,
|
|
17
17
|
autoCloseCondition: u,
|
|
18
|
-
anchorRef:
|
|
19
|
-
overlayBackground:
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
anchorRef: c,
|
|
19
|
+
overlayBackground: w = !1,
|
|
20
|
+
zIndex: g = 11
|
|
21
|
+
}, $) => {
|
|
22
|
+
const k = j(null), x = $ || k, [r, B] = C();
|
|
23
|
+
if (E(() => {
|
|
23
24
|
!u && u !== void 0 && t && d();
|
|
24
25
|
}, [u, t, d]), N(() => {
|
|
25
|
-
if (
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
top: `${
|
|
29
|
-
left: `${
|
|
26
|
+
if (c != null && c.current && t && !e && !a) {
|
|
27
|
+
const l = c.current.getBoundingClientRect();
|
|
28
|
+
B({
|
|
29
|
+
top: `${l.bottom + window.scrollY}px`,
|
|
30
|
+
left: `${l.left + window.scrollX}px`
|
|
30
31
|
});
|
|
31
32
|
}
|
|
32
|
-
}, [
|
|
33
|
-
|
|
33
|
+
}, [c, t, e, a]), !t) return null;
|
|
34
|
+
const b = g, n = g + 1;
|
|
35
|
+
return /* @__PURE__ */ D(P, { children: [
|
|
36
|
+
!m && /* @__PURE__ */ v(
|
|
34
37
|
"div",
|
|
35
38
|
{
|
|
36
|
-
className: `${
|
|
37
|
-
|
|
38
|
-
|
|
39
|
+
className: `${f.overlay} ${w ? f.overlayBackground : ""}`,
|
|
40
|
+
style: { zIndex: b },
|
|
41
|
+
onPointerDown: (l) => {
|
|
42
|
+
l.preventDefault(), l.stopPropagation(), d();
|
|
43
|
+
},
|
|
44
|
+
onClick: (l) => {
|
|
45
|
+
l.preventDefault(), l.stopPropagation();
|
|
39
46
|
}
|
|
40
47
|
}
|
|
41
48
|
),
|
|
42
|
-
/* @__PURE__ */
|
|
49
|
+
/* @__PURE__ */ v(
|
|
43
50
|
"div",
|
|
44
51
|
{
|
|
45
|
-
ref:
|
|
46
|
-
className: `${
|
|
52
|
+
ref: x,
|
|
53
|
+
className: `${f.modalContent} ${_ || ""} ${a ? f.centered : ""}`,
|
|
47
54
|
style: {
|
|
55
|
+
zIndex: n,
|
|
48
56
|
position: "absolute",
|
|
49
|
-
top:
|
|
50
|
-
left:
|
|
51
|
-
right:
|
|
52
|
-
bottom:
|
|
53
|
-
width:
|
|
54
|
-
transform:
|
|
57
|
+
top: a ? "50%" : (e == null ? void 0 : e.top) ?? (r == null ? void 0 : r.top),
|
|
58
|
+
left: a ? "50%" : (e == null ? void 0 : e.left) ?? (r == null ? void 0 : r.left),
|
|
59
|
+
right: e == null ? void 0 : e.right,
|
|
60
|
+
bottom: e == null ? void 0 : e.bottom,
|
|
61
|
+
width: e == null ? void 0 : e.width,
|
|
62
|
+
transform: a || !(e != null && e.top) && !(e != null && e.left) && !r ? "translate(-50%, -50%)" : void 0
|
|
55
63
|
},
|
|
56
|
-
|
|
57
|
-
|
|
64
|
+
role: "dialog",
|
|
65
|
+
"aria-modal": !m,
|
|
66
|
+
onPointerDown: (l) => l.stopPropagation(),
|
|
67
|
+
onClick: (l) => l.stopPropagation(),
|
|
68
|
+
children: y
|
|
58
69
|
}
|
|
59
70
|
)
|
|
60
|
-
] })
|
|
71
|
+
] });
|
|
61
72
|
}
|
|
62
73
|
);
|
|
63
74
|
export {
|
|
64
|
-
|
|
75
|
+
S as Modal
|
|
65
76
|
};
|
|
@@ -4,8 +4,12 @@ import { Color, Size } from '../interface';
|
|
|
4
4
|
export interface TagProps {
|
|
5
5
|
/** The text label for the tag. This will be displayed if provided. */
|
|
6
6
|
label?: string;
|
|
7
|
-
/** The color
|
|
7
|
+
/** The design-system color name (uses --color-<name>-* tokens). */
|
|
8
8
|
color?: Color;
|
|
9
|
+
/** Custom background color (hex/rgb/hsl/var(...)). Overrides `color` if provided. */
|
|
10
|
+
backgroundColor?: string;
|
|
11
|
+
/** Custom text color (hex/rgb/hsl/var(...)). If omitted, a default is used. */
|
|
12
|
+
textColor?: string;
|
|
9
13
|
/** Indicates if the tag can be deleted; when true, a delete icon is shown. */
|
|
10
14
|
deletable?: boolean;
|
|
11
15
|
/** The size of the tag, which affects its styling. */
|
|
@@ -15,8 +19,4 @@ export interface TagProps {
|
|
|
15
19
|
/** A callback function to be called when the tag is clicked. */
|
|
16
20
|
onClick?: () => void;
|
|
17
21
|
}
|
|
18
|
-
/**
|
|
19
|
-
* Tag component to display a label with customizable color, size, and content.
|
|
20
|
-
* It can also display a delete icon if `deletable` is true.
|
|
21
|
-
*/
|
|
22
22
|
export declare const Tag: FC<TagProps>;
|
|
@@ -1,67 +1,76 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import {
|
|
3
|
-
import '../../styles/Tag.css';const
|
|
4
|
-
tag:
|
|
5
|
-
icon:
|
|
6
|
-
"tag-children": "_tag-
|
|
7
|
-
"tag-size-xl": "_tag-size-
|
|
8
|
-
"tag-size-xl-round": "_tag-size-xl-
|
|
9
|
-
"tag-size-l": "_tag-size-
|
|
10
|
-
"tag-size-l-round": "_tag-size-l-
|
|
11
|
-
"tag-size-m": "_tag-size-
|
|
12
|
-
"tag-size-m-round": "_tag-size-m-
|
|
13
|
-
"tag-size-s": "_tag-size-
|
|
14
|
-
"tag-size-s-round": "_tag-size-s-
|
|
15
|
-
label:
|
|
16
|
-
flexHorizontalCenter:
|
|
17
|
-
flexHorizontal:
|
|
18
|
-
},
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
1
|
+
import { jsxs as z, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo as b } from "react";
|
|
3
|
+
import '../../styles/Tag.css';const u = "_tag_1k5bo_6", m = "_icon_1k5bo_15", x = "_label_1k5bo_74", f = "_flexHorizontalCenter_1k5bo_78", k = "_flexHorizontal_1k5bo_78", t = {
|
|
4
|
+
tag: u,
|
|
5
|
+
icon: m,
|
|
6
|
+
"tag-children": "_tag-children_1k5bo_24",
|
|
7
|
+
"tag-size-xl": "_tag-size-xl_1k5bo_34",
|
|
8
|
+
"tag-size-xl-round": "_tag-size-xl-round_1k5bo_38",
|
|
9
|
+
"tag-size-l": "_tag-size-l_1k5bo_44",
|
|
10
|
+
"tag-size-l-round": "_tag-size-l-round_1k5bo_48",
|
|
11
|
+
"tag-size-m": "_tag-size-m_1k5bo_54",
|
|
12
|
+
"tag-size-m-round": "_tag-size-m-round_1k5bo_58",
|
|
13
|
+
"tag-size-s": "_tag-size-s_1k5bo_64",
|
|
14
|
+
"tag-size-s-round": "_tag-size-s-round_1k5bo_68",
|
|
15
|
+
label: x,
|
|
16
|
+
flexHorizontalCenter: f,
|
|
17
|
+
flexHorizontal: k
|
|
18
|
+
}, h = [
|
|
19
|
+
"light",
|
|
20
|
+
"dark",
|
|
21
|
+
"gray",
|
|
22
|
+
"blue-gray",
|
|
23
|
+
"blue",
|
|
24
|
+
"blue-situaction",
|
|
25
|
+
"purple",
|
|
26
|
+
"pink",
|
|
27
|
+
"gold",
|
|
28
|
+
"brown",
|
|
29
|
+
"emerald"
|
|
30
|
+
], p = "blue-situaction", H = ({
|
|
31
|
+
label: s,
|
|
32
|
+
color: o,
|
|
33
|
+
backgroundColor: l,
|
|
34
|
+
textColor: r,
|
|
35
|
+
deletable: g = !1,
|
|
36
|
+
size: _ = "m",
|
|
37
|
+
children: n,
|
|
38
|
+
onClick: i
|
|
25
39
|
}) => {
|
|
26
|
-
c
|
|
27
|
-
e && !s.includes(e) && console.warn(`Warning: The color "${e}" is not a valid option. Expected one of: ${s.join(", ")}.`);
|
|
28
|
-
}, [e]);
|
|
29
|
-
const _ = [
|
|
40
|
+
const c = [
|
|
30
41
|
t.tag,
|
|
31
|
-
|
|
32
|
-
t[`tag-size-${
|
|
42
|
+
n && !s ? t[`tag-size-${_}-round`] : "",
|
|
43
|
+
t[`tag-size-${_}`],
|
|
33
44
|
t.flexHorizontalCenter
|
|
34
|
-
].join(" "),
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}
|
|
63
|
-
);
|
|
45
|
+
].filter(Boolean).join(" "), d = b(() => {
|
|
46
|
+
if (l)
|
|
47
|
+
return {
|
|
48
|
+
"--dynamic-background": l,
|
|
49
|
+
"--dynamic-color-text": r ?? "var(--color-blue-situaction-950)"
|
|
50
|
+
};
|
|
51
|
+
const a = o && h.includes(o) ? o : p;
|
|
52
|
+
return {
|
|
53
|
+
"--dynamic-background": `var(--color-${a}-200)`,
|
|
54
|
+
"--dynamic-color-text": `var(--color-${a}-950)`
|
|
55
|
+
};
|
|
56
|
+
}, [l, r, o]);
|
|
57
|
+
return /* @__PURE__ */ z("div", { className: c, style: d, children: [
|
|
58
|
+
n && /* @__PURE__ */ e("div", { className: `${t.flexHorizontalCenter} ${t["tag-children"]}`, children: n }),
|
|
59
|
+
s && /* @__PURE__ */ e("label", { className: `${t.flexHorizontal} ${t.label}`, children: s }),
|
|
60
|
+
g && /* @__PURE__ */ e(
|
|
61
|
+
"div",
|
|
62
|
+
{
|
|
63
|
+
className: t.icon,
|
|
64
|
+
onClick: (a) => {
|
|
65
|
+
a.stopPropagation(), i == null || i();
|
|
66
|
+
},
|
|
67
|
+
role: "button",
|
|
68
|
+
"aria-label": "Delete tag",
|
|
69
|
+
children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 256 256", children: /* @__PURE__ */ e("path", { d: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z" }) })
|
|
70
|
+
}
|
|
71
|
+
)
|
|
72
|
+
] });
|
|
64
73
|
};
|
|
65
74
|
export {
|
|
66
|
-
|
|
75
|
+
H as Tag
|
|
67
76
|
};
|
package/dist/styles/Tag.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._tag_1k5bo_6{color:var(--dynamic-color-text);background-color:var(--dynamic-background);border-radius:50px;line-height:normal;gap:.25rem;font-weight:600;letter-spacing:.84px}._tag_1k5bo_6 ._icon_1k5bo_15{display:flex;cursor:pointer;fill:var(--dynamic-color-text)!important}._tag_1k5bo_6 ._icon_1k5bo_15 svg,._tag_1k5bo_6 ._icon_1k5bo_15 svg path{fill:var(--dynamic-color-text)!important}._tag-children_1k5bo_24{color:var(--dynamic-color-text);border-radius:50px;min-width:16px;min-height:16px;aspect-ratio:1/1}._tag-size-xl_1k5bo_34{padding:.5rem .75rem;font-size:1.125em}._tag-size-xl-round_1k5bo_38{padding:.5rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-l_1k5bo_44{padding:.375rem .625rem;font-size:1em}._tag-size-l-round_1k5bo_48{padding:.375rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-m_1k5bo_54{padding:.25rem .5rem;font-size:.875em}._tag-size-m-round_1k5bo_58{padding:.25rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-s_1k5bo_64{padding:.1875rem .5rem;font-size:.75em}._tag-size-s-round_1k5bo_68{padding:.125rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag_1k5bo_6 ._label_1k5bo_74{white-space:nowrap}._flexHorizontalCenter_1k5bo_78{display:flex;justify-content:center;align-items:center;flex-direction:row}._flexHorizontal_1k5bo_78{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}
|