@tedi-design-system/react 19.0.0-rc.10 → 19.0.0-rc.12
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/bundle-stats.html +1 -1
- package/index.css +1 -1
- package/package.json +1 -1
- package/src/community/components/card/card.cjs.js +1 -1
- package/src/community/components/card/card.es.js +20 -19
- package/src/community/components/color-tokens.cjs.js +1 -0
- package/src/community/components/color-tokens.d.ts +14 -0
- package/src/community/components/color-tokens.es.js +35 -0
- package/src/community/components/layout/header/components/header-role/header-role.cjs.js +1 -1
- package/src/community/components/layout/header/components/header-role/header-role.es.js +19 -19
- package/src/community/components/layout/header/components/header-role/header-role.module.scss.cjs.js +1 -1
- package/src/community/components/layout/header/components/header-role/header-role.module.scss.es.js +2 -1
- package/src/community/components/tooltip/tooltip.cjs.js +1 -1
- package/src/community/components/tooltip/tooltip.es.js +31 -30
- package/src/tedi/helpers/index.d.ts +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tedi-design-system/react",
|
|
3
|
-
"version": "19.0.0-rc.
|
|
3
|
+
"version": "19.0.0-rc.12",
|
|
4
4
|
"description": "TEDI Design System React component library — accessible, reusable UI components. Docs & live examples: https://storybook.tedi.ee/react/rc/",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),p=require("../../../../external/classnames/index.cjs.js"),q=require("react"),v=require("../color-tokens.cjs.js"),r=require("./card.module.scss.cjs.js"),P=require("./card-context.cjs.js"),k=require("./utility.cjs.js"),x=require("../../helpers/hooks/use-breakpoint-props.cjs.js"),t=q.forwardRef((o,s)=>{const{getCurrentBreakpointProps:n}=x.useBreakpointProps(o.defaultServerBreakpoint),{children:c,className:u,padding:i,background:f="bg-default",borderRadius:e,borderless:C,border:b="border-default",...g}=n(o,{padding:1}),[a,d]=k.getCardBorderPlacementColor(b),m=p.default(r.default.card,u,{[r.default[`card--border-${a}`]]:a,[r.default["card--borderless"]]:C,[r.default["card--no-border-radius-top"]]:e===!1||(e==null?void 0:e.top)===!1,[r.default["card--no-border-radius-right"]]:e===!1||(e==null?void 0:e.right)===!1,[r.default["card--no-border-radius-bottom"]]:e===!1||(e==null?void 0:e.bottom)===!1,[r.default["card--no-border-radius-left"]]:e===!1||(e==null?void 0:e.left)===!1});return l.jsx(P.CardContext.Provider,{value:{padding:i,background:f},children:l.jsx("div",{"data-name":"card",...g,className:m,ref:s,style:d?{"--card-border-color":v.legacyColorToCore(d)}:void 0,children:c})})});t.displayName="Card";exports.Card=t;exports.default=t;
|
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
import { jsx as d } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import g from "../../../../external/classnames/index.es.js";
|
|
3
3
|
import { forwardRef as u } from "react";
|
|
4
|
+
import { legacyColorToCore as v } from "../color-tokens.es.js";
|
|
4
5
|
import o from "./card.module.scss.es.js";
|
|
5
|
-
import { CardContext as
|
|
6
|
-
import { getCardBorderPlacementColor as
|
|
7
|
-
import { useBreakpointProps as
|
|
8
|
-
const
|
|
9
|
-
const { getCurrentBreakpointProps: s } =
|
|
10
|
-
children:
|
|
11
|
-
className:
|
|
12
|
-
padding:
|
|
6
|
+
import { CardContext as B } from "./card-context.es.js";
|
|
7
|
+
import { getCardBorderPlacementColor as P } from "./utility.es.js";
|
|
8
|
+
import { useBreakpointProps as h } from "../../helpers/hooks/use-breakpoint-props.es.js";
|
|
9
|
+
const k = u((e, l) => {
|
|
10
|
+
const { getCurrentBreakpointProps: s } = h(e.defaultServerBreakpoint), {
|
|
11
|
+
children: m,
|
|
12
|
+
className: c,
|
|
13
|
+
padding: f,
|
|
13
14
|
background: n = "bg-default",
|
|
14
15
|
borderRadius: r,
|
|
15
16
|
borderless: i,
|
|
16
17
|
border: p = "border-default",
|
|
17
|
-
...
|
|
18
|
+
...C
|
|
18
19
|
} = s(e, {
|
|
19
20
|
padding: 1
|
|
20
|
-
}), [a, t] =
|
|
21
|
+
}), [a, t] = P(p), b = g(o.card, c, {
|
|
21
22
|
[o[`card--border-${a}`]]: a,
|
|
22
23
|
[o["card--borderless"]]: i,
|
|
23
24
|
[o["card--no-border-radius-top"]]: r === !1 || (r == null ? void 0 : r.top) === !1,
|
|
@@ -25,20 +26,20 @@ const h = u((e, l) => {
|
|
|
25
26
|
[o["card--no-border-radius-bottom"]]: r === !1 || (r == null ? void 0 : r.bottom) === !1,
|
|
26
27
|
[o["card--no-border-radius-left"]]: r === !1 || (r == null ? void 0 : r.left) === !1
|
|
27
28
|
});
|
|
28
|
-
return /* @__PURE__ */ d(
|
|
29
|
+
return /* @__PURE__ */ d(B.Provider, { value: { padding: f, background: n }, children: /* @__PURE__ */ d(
|
|
29
30
|
"div",
|
|
30
31
|
{
|
|
31
32
|
"data-name": "card",
|
|
32
|
-
...
|
|
33
|
-
className:
|
|
33
|
+
...C,
|
|
34
|
+
className: b,
|
|
34
35
|
ref: l,
|
|
35
|
-
style: t ? { "--card-border-color":
|
|
36
|
-
children:
|
|
36
|
+
style: t ? { "--card-border-color": v(t) } : void 0,
|
|
37
|
+
children: m
|
|
37
38
|
}
|
|
38
39
|
) });
|
|
39
40
|
});
|
|
40
|
-
|
|
41
|
+
k.displayName = "Card";
|
|
41
42
|
export {
|
|
42
|
-
|
|
43
|
-
|
|
43
|
+
k as Card,
|
|
44
|
+
k as default
|
|
44
45
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r={"primary-main":"var(--general-surface-brand-primary)","primary-active":"var(--general-surface-brand-secondary)","primary-active-subtle":"var(--tedi-primary-400)","primary-highlight":"var(--general-surface-brand-tertiary)","primary-highlight-subtle":"var(--general-surface-brand-quaternary)","accent-main":"var(--tedi-accent-600)","accent-highlight":"var(--tedi-accent-200)","bg-default":"var(--general-surface-primary)","bg-muted":"var(--general-surface-secondary)","bg-subtle":"var(--general-surface-tertiary)","bg-disabled":"var(--general-surface-disabled)","bg-inverted":"var(--general-surface-inverted-primary)","bg-inverted-contrast":"var(--general-surface-inverted-secondary)",black:"var(--tedi-neutral-900)",white:"var(--general-surface-primary)","positive-main":"var(--tedi-green-600)","positive-active":"var(--tedi-green-700)","positive-highlight":"var(--tedi-green-100)","important-main":"var(--tedi-red-600)","important-active":"var(--tedi-red-700)","important-highlight":"var(--tedi-red-100)","info-main":"var(--tedi-primary-600)","info-active":"var(--tedi-primary-700)","info-highlight":"var(--tedi-primary-100)","warning-main":"var(--tedi-yellow-700)","warning-highlight":"var(--tedi-yellow-200)",transparent:"transparent","border-default":"var(--general-border-primary)","border-contrast":"var(--general-border-secondary)"},a=e=>r[e];exports.LEGACY_COLOR_TO_CORE=r;exports.legacyColorToCore=a;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { TColorsBackground, TColorsBorder } from './commonTypes';
|
|
2
|
+
/**
|
|
3
|
+
* Maps a legacy community colour name to its TEDI-Ready (core) CSS value.
|
|
4
|
+
*
|
|
5
|
+
* Used where a colour is chosen dynamically from a prop (e.g. `Card`'s
|
|
6
|
+
* `border` / `background`, and `Tooltip`'s arrow) instead of a static class.
|
|
7
|
+
* Strong fills use the core primitive scale (there is no semantic "strong
|
|
8
|
+
* status fill" token — the `--general-status-*-background-*` tokens are pale
|
|
9
|
+
* surfaces), matching the legacy appearance. Community is deprecated; do not
|
|
10
|
+
* use this in new code.
|
|
11
|
+
*/
|
|
12
|
+
export declare const LEGACY_COLOR_TO_CORE: Record<TColorsBackground | TColorsBorder, string>;
|
|
13
|
+
/** Returns the core CSS value for a legacy colour name. */
|
|
14
|
+
export declare const legacyColorToCore: (name: TColorsBackground | TColorsBorder) => string;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
const a = {
|
|
2
|
+
"primary-main": "var(--general-surface-brand-primary)",
|
|
3
|
+
"primary-active": "var(--general-surface-brand-secondary)",
|
|
4
|
+
"primary-active-subtle": "var(--tedi-primary-400)",
|
|
5
|
+
"primary-highlight": "var(--general-surface-brand-tertiary)",
|
|
6
|
+
"primary-highlight-subtle": "var(--general-surface-brand-quaternary)",
|
|
7
|
+
"accent-main": "var(--tedi-accent-600)",
|
|
8
|
+
"accent-highlight": "var(--tedi-accent-200)",
|
|
9
|
+
"bg-default": "var(--general-surface-primary)",
|
|
10
|
+
"bg-muted": "var(--general-surface-secondary)",
|
|
11
|
+
"bg-subtle": "var(--general-surface-tertiary)",
|
|
12
|
+
"bg-disabled": "var(--general-surface-disabled)",
|
|
13
|
+
"bg-inverted": "var(--general-surface-inverted-primary)",
|
|
14
|
+
"bg-inverted-contrast": "var(--general-surface-inverted-secondary)",
|
|
15
|
+
black: "var(--tedi-neutral-900)",
|
|
16
|
+
white: "var(--general-surface-primary)",
|
|
17
|
+
"positive-main": "var(--tedi-green-600)",
|
|
18
|
+
"positive-active": "var(--tedi-green-700)",
|
|
19
|
+
"positive-highlight": "var(--tedi-green-100)",
|
|
20
|
+
"important-main": "var(--tedi-red-600)",
|
|
21
|
+
"important-active": "var(--tedi-red-700)",
|
|
22
|
+
"important-highlight": "var(--tedi-red-100)",
|
|
23
|
+
"info-main": "var(--tedi-primary-600)",
|
|
24
|
+
"info-active": "var(--tedi-primary-700)",
|
|
25
|
+
"info-highlight": "var(--tedi-primary-100)",
|
|
26
|
+
"warning-main": "var(--tedi-yellow-700)",
|
|
27
|
+
"warning-highlight": "var(--tedi-yellow-200)",
|
|
28
|
+
transparent: "transparent",
|
|
29
|
+
"border-default": "var(--general-border-primary)",
|
|
30
|
+
"border-contrast": "var(--general-border-secondary)"
|
|
31
|
+
}, e = (r) => a[r];
|
|
32
|
+
export {
|
|
33
|
+
a as LEGACY_COLOR_TO_CORE,
|
|
34
|
+
e as legacyColorToCore
|
|
35
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),g=require("react"),h=require("../../../../../../tedi/components/base/typography/text/text.cjs.js"),j=require("../../../../../../tedi/components/content/collapse/collapse.cjs.js"),m=require("../../../../../../tedi/components/misc/scroll-fade/scroll-fade.cjs.js"),b=require("../../../../tag/tag.cjs.js"),y=require("../header-dropdown/header-dropdown.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),g=require("react"),h=require("../../../../../../tedi/components/base/typography/text/text.cjs.js"),j=require("../../../../../../tedi/components/content/collapse/collapse.cjs.js"),m=require("../../../../../../tedi/components/misc/scroll-fade/scroll-fade.cjs.js"),b=require("../../../../tag/tag.cjs.js"),y=require("../header-dropdown/header-dropdown.cjs.js"),o=require("./header-role.module.scss.cjs.js"),x=require("../../../../../../tedi/providers/label-provider/use-labels.cjs.js"),T=require("../../../../card/card.cjs.js"),q=require("../../../../card/card-content/card-content.cjs.js"),p=t=>{const{renderModal:s=!1,...r}=t,[a,l]=g.useState(!1);return s?e.jsx(R,{...r,open:a,onToggle:l}):e.jsx(v,{...r,open:a,onToggle:l})};p.displayName="HeaderRole";const v=t=>{const{getLabel:s}=x.useLabels(),{children:r,open:a,onToggle:l,primaryInfo:i,secondaryInfo:n,label:d=s("header.role-label")}=t,u=()=>d===s("header.role-label")?e.jsx("div",{children:e.jsx(b.Tag,{color:"primary",type:"secondary",children:d})}):e.jsxs(h.Text,{color:"secondary",modifiers:["bold","small"],children:[d,!!n&&e.jsxs(e.Fragment,{children:[" ",e.jsxs(h.Text,{element:"span",modifiers:["small","normal"],children:[e.jsx("span",{className:o.default["header-role-separator"],children:"|"})," ",n]})]})]}),c=typeof r=="function"?r({onToggle:l}):r,f=e.jsx(y.HeaderDropdown,{shouldAnimate:!0,open:a,onToggle:l,tooltipProps:{cardProps:{padding:0},maxWidth:"medium"},triggerProps:{children:i,"aria-label":`${d??""} ${n??""} ${i??""}`,visualType:"link",iconRight:{name:"expand_more",color:"primary",size:24}},children:e.jsx("div",{className:o.default["header-role-wrapper"],children:e.jsx(m.ScrollFade,{fadeSize:0,children:e.jsx("div",{className:o.default["header-role-children"],children:c})})})});return e.jsxs("div",{children:[u(),c?f:i]})},R=t=>{const{getLabel:s}=x.useLabels(),{children:r,open:a,onToggle:l,primaryInfo:i,secondaryInfo:n,label:d=s("header.role-label")}=t,u=e.jsxs(h.Text,{element:"span",color:"secondary",modifiers:"bold",children:[d," ",i,n&&e.jsx(h.Text,{element:"span",modifiers:"normal",children:` | ${n}`})]}),c=typeof r=="function"?r({onToggle:l}):r;return e.jsx(T.Card,{background:"bg-muted",borderRadius:!1,borderless:!0,children:e.jsx(q.CardContent,{padding:0,children:c?e.jsx(j.Collapse,{id:"role-collapse",open:a,onToggle:l,className:o.default["header-role-collapse"],hideCollapseText:!0,title:u,children:e.jsx("div",{className:o.default["header-role-wrapper"],children:e.jsx(m.ScrollFade,{fadeSize:0,children:e.jsx("div",{className:o.default["header-role-children"],children:c})})})}):e.jsx("div",{className:o.default["header-role-children"],children:u})})})};exports.HeaderRole=p;exports.default=p;
|
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
import { jsx as e, jsxs as m, Fragment as b } from "react/jsx-runtime";
|
|
2
2
|
import y from "react";
|
|
3
3
|
import { Text as h } from "../../../../../../tedi/components/base/typography/text/text.es.js";
|
|
4
|
-
import { Collapse as
|
|
4
|
+
import { Collapse as T } from "../../../../../../tedi/components/content/collapse/collapse.es.js";
|
|
5
5
|
import { ScrollFade as f } from "../../../../../../tedi/components/misc/scroll-fade/scroll-fade.es.js";
|
|
6
|
-
import { Tag as
|
|
6
|
+
import { Tag as v } from "../../../../tag/tag.es.js";
|
|
7
7
|
import { HeaderDropdown as x } from "../header-dropdown/header-dropdown.es.js";
|
|
8
|
-
import
|
|
8
|
+
import l from "./header-role.module.scss.es.js";
|
|
9
9
|
import { useLabels as g } from "../../../../../../tedi/providers/label-provider/use-labels.es.js";
|
|
10
|
-
import { Card as
|
|
11
|
-
import { CardContent as
|
|
10
|
+
import { Card as N } from "../../../../card/card.es.js";
|
|
11
|
+
import { CardContent as C } from "../../../../card/card-content/card-content.es.js";
|
|
12
12
|
const R = (s) => {
|
|
13
|
-
const { renderModal:
|
|
14
|
-
return
|
|
13
|
+
const { renderModal: a = !1, ...r } = s, [n, o] = y.useState(!1);
|
|
14
|
+
return a ? /* @__PURE__ */ e(H, { ...r, open: n, onToggle: o }) : /* @__PURE__ */ e(w, { ...r, open: n, onToggle: o });
|
|
15
15
|
};
|
|
16
16
|
R.displayName = "HeaderRole";
|
|
17
17
|
const w = (s) => {
|
|
18
|
-
const { getLabel:
|
|
19
|
-
|
|
18
|
+
const { getLabel: a } = g(), { children: r, open: n, onToggle: o, primaryInfo: t, secondaryInfo: d, label: i = a("header.role-label") } = s, p = () => i === a("header.role-label") ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(v, { color: "primary", type: "secondary", children: i }) }) : /* @__PURE__ */ m(h, { color: "secondary", modifiers: ["bold", "small"], children: [
|
|
19
|
+
i,
|
|
20
20
|
!!d && /* @__PURE__ */ m(b, { children: [
|
|
21
21
|
" ",
|
|
22
22
|
/* @__PURE__ */ m(h, { element: "span", modifiers: ["small", "normal"], children: [
|
|
23
|
-
/* @__PURE__ */ e("span", {
|
|
23
|
+
/* @__PURE__ */ e("span", { className: l["header-role-separator"], children: "|" }),
|
|
24
24
|
" ",
|
|
25
25
|
d
|
|
26
26
|
] })
|
|
@@ -34,11 +34,11 @@ const w = (s) => {
|
|
|
34
34
|
tooltipProps: { cardProps: { padding: 0 }, maxWidth: "medium" },
|
|
35
35
|
triggerProps: {
|
|
36
36
|
children: t,
|
|
37
|
-
"aria-label": `${
|
|
37
|
+
"aria-label": `${i ?? ""} ${d ?? ""} ${t ?? ""}`,
|
|
38
38
|
visualType: "link",
|
|
39
39
|
iconRight: { name: "expand_more", color: "primary", size: 24 }
|
|
40
40
|
},
|
|
41
|
-
children: /* @__PURE__ */ e("div", { className:
|
|
41
|
+
children: /* @__PURE__ */ e("div", { className: l["header-role-wrapper"], children: /* @__PURE__ */ e(f, { fadeSize: 0, children: /* @__PURE__ */ e("div", { className: l["header-role-children"], children: c }) }) })
|
|
42
42
|
}
|
|
43
43
|
);
|
|
44
44
|
return /* @__PURE__ */ m("div", { children: [
|
|
@@ -46,24 +46,24 @@ const w = (s) => {
|
|
|
46
46
|
c ? u : t
|
|
47
47
|
] });
|
|
48
48
|
}, H = (s) => {
|
|
49
|
-
const { getLabel:
|
|
50
|
-
|
|
49
|
+
const { getLabel: a } = g(), { children: r, open: n, onToggle: o, primaryInfo: t, secondaryInfo: d, label: i = a("header.role-label") } = s, p = /* @__PURE__ */ m(h, { element: "span", color: "secondary", modifiers: "bold", children: [
|
|
50
|
+
i,
|
|
51
51
|
" ",
|
|
52
52
|
t,
|
|
53
53
|
d && /* @__PURE__ */ e(h, { element: "span", modifiers: "normal", children: ` | ${d}` })
|
|
54
54
|
] }), c = typeof r == "function" ? r({ onToggle: o }) : r;
|
|
55
|
-
return /* @__PURE__ */ e(
|
|
56
|
-
|
|
55
|
+
return /* @__PURE__ */ e(N, { background: "bg-muted", borderRadius: !1, borderless: !0, children: /* @__PURE__ */ e(C, { padding: 0, children: c ? /* @__PURE__ */ e(
|
|
56
|
+
T,
|
|
57
57
|
{
|
|
58
58
|
id: "role-collapse",
|
|
59
59
|
open: n,
|
|
60
60
|
onToggle: o,
|
|
61
|
-
className:
|
|
61
|
+
className: l["header-role-collapse"],
|
|
62
62
|
hideCollapseText: !0,
|
|
63
63
|
title: p,
|
|
64
|
-
children: /* @__PURE__ */ e("div", { className:
|
|
64
|
+
children: /* @__PURE__ */ e("div", { className: l["header-role-wrapper"], children: /* @__PURE__ */ e(f, { fadeSize: 0, children: /* @__PURE__ */ e("div", { className: l["header-role-children"], children: c }) }) })
|
|
65
65
|
}
|
|
66
|
-
) : /* @__PURE__ */ e("div", { className:
|
|
66
|
+
) : /* @__PURE__ */ e("div", { className: l["header-role-children"], children: p }) }) });
|
|
67
67
|
};
|
|
68
68
|
export {
|
|
69
69
|
R as HeaderRole,
|
package/src/community/components/layout/header/components/header-role/header-role.module.scss.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"header-role-collapse":"header-role-collapse-7664165f","header-role-wrapper":"header-role-wrapper-c65bcd63","header-role-children":"header-role-children-3fdd2c2c"};exports.default=e;
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"header-role-collapse":"header-role-collapse-7664165f","header-role-wrapper":"header-role-wrapper-c65bcd63","header-role-children":"header-role-children-3fdd2c2c","header-role-separator":"header-role-separator-14bcefed"};exports.default=e;
|
package/src/community/components/layout/header/components/header-role/header-role.module.scss.es.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
const e = {
|
|
2
2
|
"header-role-collapse": "header-role-collapse-7664165f",
|
|
3
3
|
"header-role-wrapper": "header-role-wrapper-c65bcd63",
|
|
4
|
-
"header-role-children": "header-role-children-3fdd2c2c"
|
|
4
|
+
"header-role-children": "header-role-children-3fdd2c2c",
|
|
5
|
+
"header-role-separator": "header-role-separator-14bcefed"
|
|
5
6
|
};
|
|
6
7
|
export {
|
|
7
8
|
e as default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),u=require("../../../../external/classnames/index.cjs.js"),F=require("react"),W=require("../card/utility.cjs.js"),d=require("../color-tokens.cjs.js"),o=require("./tooltip.module.scss.cjs.js"),n=require("./tooltip-provider.cjs.js"),v=require("../card/card.cjs.js"),S=require("../card/card-content/card-content.cjs.js"),B=g=>{const{children:f,maxWidth:l="medium",cardProps:e,className:p}=g,{open:m,x:C,y:x,strategy:h,focusManager:q,floating:T,arrowRef:y,getFloatingProps:j,placement:k,context:a}=F.useContext(n.TooltipContext),[w,i]=W.getCardBorderPlacementColor(e==null?void 0:e.border),c=()=>w&&i?d.legacyColorToCore(i):"none",s=c()!=="none",_=()=>e!=null&&e.background?d.legacyColorToCore(e.background):"var(--general-surface-primary)",R=()=>{const b=t.jsx(r.FloatingFocusManager,{...q,context:a,children:t.jsxs("div",{...j({ref:T,style:{position:h,left:C??0,top:x??0},className:u.default(o.default.tooltip,p,{[o.default[`tooltip--${l}`]]:l})}),"data-placement":k,children:[t.jsx(r.FloatingArrow,{ref:A=>y.current=A,context:a,fill:_(),stroke:c(),strokeWidth:s?4:0,className:u.default(o.default.tooltip__arrow,{[o.default["tooltip__arrow--stroke"]]:s}),height:n.ARROW_HEIGHT,width:n.ARROW_WIDTH}),t.jsx(v.Card,{padding:.5,borderless:!0,...e,children:t.jsx(S.CardContent,{children:f})})]})});return m?b:null};return t.jsx(r.FloatingPortal,{"data-name":"tooltip",children:R()})};exports.Tooltip=B;
|
|
@@ -1,49 +1,50 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { FloatingPortal as
|
|
1
|
+
import { jsx as r, jsxs as R } from "react/jsx-runtime";
|
|
2
|
+
import { FloatingPortal as W, FloatingFocusManager as b, FloatingArrow as N } from "../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
|
|
3
3
|
import s from "../../../../external/classnames/index.es.js";
|
|
4
|
-
import
|
|
5
|
-
import { getCardBorderPlacementColor as
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
4
|
+
import B from "react";
|
|
5
|
+
import { getCardBorderPlacementColor as H } from "../card/utility.es.js";
|
|
6
|
+
import { legacyColorToCore as m } from "../color-tokens.es.js";
|
|
7
|
+
import t from "./tooltip.module.scss.es.js";
|
|
8
|
+
import { TooltipContext as j, ARROW_WIDTH as v, ARROW_HEIGHT as I } from "./tooltip-provider.es.js";
|
|
9
|
+
import { Card as M } from "../card/card.es.js";
|
|
10
|
+
import { CardContent as O } from "../card/card-content/card-content.es.js";
|
|
11
|
+
const Q = (c) => {
|
|
12
|
+
const { children: d, maxWidth: e = "medium", cardProps: o, className: p } = c, { open: f, x: g, y: u, strategy: h, focusManager: C, floating: w, arrowRef: x, getFloatingProps: _, placement: k, context: n } = B.useContext(j), [T, a] = H(o == null ? void 0 : o.border), l = () => T && a ? m(a) : "none", i = l() !== "none", y = () => o != null && o.background ? m(o.background) : "var(--general-surface-primary)";
|
|
13
|
+
return /* @__PURE__ */ r(W, { "data-name": "tooltip", children: (() => {
|
|
14
|
+
const A = /* @__PURE__ */ r(b, { ...C, context: n, children: /* @__PURE__ */ R(
|
|
14
15
|
"div",
|
|
15
16
|
{
|
|
16
|
-
...
|
|
17
|
-
ref:
|
|
17
|
+
..._({
|
|
18
|
+
ref: w,
|
|
18
19
|
style: {
|
|
19
|
-
position:
|
|
20
|
-
left:
|
|
21
|
-
top:
|
|
20
|
+
position: h,
|
|
21
|
+
left: g ?? 0,
|
|
22
|
+
top: u ?? 0
|
|
22
23
|
},
|
|
23
|
-
className: s(
|
|
24
|
+
className: s(t.tooltip, p, { [t[`tooltip--${e}`]]: e })
|
|
24
25
|
}),
|
|
25
|
-
"data-placement":
|
|
26
|
+
"data-placement": k,
|
|
26
27
|
children: [
|
|
27
|
-
/* @__PURE__ */
|
|
28
|
-
|
|
28
|
+
/* @__PURE__ */ r(
|
|
29
|
+
N,
|
|
29
30
|
{
|
|
30
|
-
ref: (
|
|
31
|
+
ref: (F) => x.current = F,
|
|
31
32
|
context: n,
|
|
32
|
-
fill:
|
|
33
|
-
stroke:
|
|
33
|
+
fill: y(),
|
|
34
|
+
stroke: l(),
|
|
34
35
|
strokeWidth: i ? 4 : 0,
|
|
35
|
-
className: s(
|
|
36
|
-
height:
|
|
37
|
-
width:
|
|
36
|
+
className: s(t.tooltip__arrow, { [t["tooltip__arrow--stroke"]]: i }),
|
|
37
|
+
height: I,
|
|
38
|
+
width: v
|
|
38
39
|
}
|
|
39
40
|
),
|
|
40
|
-
/* @__PURE__ */
|
|
41
|
+
/* @__PURE__ */ r(M, { padding: 0.5, borderless: !0, ...o, children: /* @__PURE__ */ r(O, { children: d }) })
|
|
41
42
|
]
|
|
42
43
|
}
|
|
43
44
|
) });
|
|
44
|
-
return
|
|
45
|
+
return f ? A : null;
|
|
45
46
|
})() });
|
|
46
47
|
};
|
|
47
48
|
export {
|
|
48
|
-
|
|
49
|
+
Q as Tooltip
|
|
49
50
|
};
|