@epam/ai-dial-navigation-panel 1.2.0-dev.245 → 1.2.0-dev.250
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/common/AvatarInitials.d.ts.map +1 -1
- package/components/common/UserAvatar.d.ts.map +1 -1
- package/index.css +2 -2
- package/index.js +163 -155
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarInitials.d.ts","sourceRoot":"","sources":["../../../src/components/common/AvatarInitials.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarInitials.d.ts","sourceRoot":"","sources":["../../../src/components/common/AvatarInitials.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAGtC,kCAAkC;AAClC,MAAM,WAAW,mBAAmB;IAClC,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,gEAAgE;AAChE,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAUlD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/common/UserAvatar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"UserAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/common/UserAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAGvE,8BAA8B;AAC9B,MAAM,WAAW,eAAe;IAC9B,mEAAmE;IACnE,OAAO,EAAE,qBAAqB,CAAC;IAC/B,sFAAsF;IACtF,GAAG,EAAE,MAAM,CAAC;CACb;AAED,kFAAkF;AAClF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAgBzC,CAAC"}
|
package/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
._rail_y8fr0_1{background:var(--np-bg,var(--bg-layer-raised,#fcfcfc));font-family:var(--np-font-family,inherit)}._item_y8fr0_6{color:var(--np-item-text,var(--text-secondary,#57647a))}._item_y8fr0_6 svg{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}._item_y8fr0_6:hover svg,a:focus-visible>._item_y8fr0_6 svg{transform:translateY(-2px)}._item_y8fr0_6:active svg{transition-duration:.1s;transform:translateY(0)}@media (prefers-reduced-motion:reduce){._item_y8fr0_6 svg{transition:none}._item_y8fr0_6:hover svg,a:focus-visible>._item_y8fr0_6 svg{transform:none}}._item_y8fr0_6:not(._itemActive_y8fr0_33):hover{background:var(--np-item-hover-bg,transparent)}._item_y8fr0_6:not(._itemActive_y8fr0_33):hover svg,a:focus-visible>._item_y8fr0_6:not(._itemActive_y8fr0_33) svg{stroke:var(--np-item-hover-icon,currentColor)}._item_y8fr0_6:active{background:var(--np-item-active-bg,var(--bg-control-accent-alpha-active,#2764d933))}a:focus-visible>._item_y8fr0_6:not(._itemActive_y8fr0_33){background:var(--np-item-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}a:focus-visible>._item_y8fr0_6._itemActive_y8fr0_33{outline:2px solid var(--np-item-active-text,var(--text-accent,#1d4ed8));outline-offset:-2px}._item_y8fr0_6._itemActive_y8fr0_33{background:var(--np-item-selected-bg,var(--bg-control-accent-alpha-active,#2764d933));color:var(--np-item-active-text,var(--text-accent,#1d4ed8))}._item_y8fr0_6._itemActive_y8fr0_33 svg{stroke:var(--np-item-active-icon,currentColor)}._item_y8fr0_6._itemFilled_y8fr0_38 svg{fill:var(--np-item-active-icon,currentColor);stroke:none}._item_y8fr0_6._itemFilledOutline_y8fr0_79 svg{fill:var(--np-item-active-icon,currentColor)}.
|
|
2
|
-
/*$vite$:1*/.absolute{position:absolute}.relative{position:relative}.z-10{z-index:10}.flex{display:flex}.contents{display:contents}.size-0{height:0;width:0}.size-\[
|
|
1
|
+
._rail_y8fr0_1{background:var(--np-bg,var(--bg-layer-raised,#fcfcfc));font-family:var(--np-font-family,inherit)}._item_y8fr0_6{color:var(--np-item-text,var(--text-secondary,#57647a))}._item_y8fr0_6 svg{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}._item_y8fr0_6:hover svg,a:focus-visible>._item_y8fr0_6 svg{transform:translateY(-2px)}._item_y8fr0_6:active svg{transition-duration:.1s;transform:translateY(0)}@media (prefers-reduced-motion:reduce){._item_y8fr0_6 svg{transition:none}._item_y8fr0_6:hover svg,a:focus-visible>._item_y8fr0_6 svg{transform:none}}._item_y8fr0_6:not(._itemActive_y8fr0_33):hover{background:var(--np-item-hover-bg,transparent)}._item_y8fr0_6:not(._itemActive_y8fr0_33):hover svg,a:focus-visible>._item_y8fr0_6:not(._itemActive_y8fr0_33) svg{stroke:var(--np-item-hover-icon,currentColor)}._item_y8fr0_6:active{background:var(--np-item-active-bg,var(--bg-control-accent-alpha-active,#2764d933))}a:focus-visible>._item_y8fr0_6:not(._itemActive_y8fr0_33){background:var(--np-item-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}a:focus-visible>._item_y8fr0_6._itemActive_y8fr0_33{outline:2px solid var(--np-item-active-text,var(--text-accent,#1d4ed8));outline-offset:-2px}._item_y8fr0_6._itemActive_y8fr0_33{background:var(--np-item-selected-bg,var(--bg-control-accent-alpha-active,#2764d933));color:var(--np-item-active-text,var(--text-accent,#1d4ed8))}._item_y8fr0_6._itemActive_y8fr0_33 svg{stroke:var(--np-item-active-icon,currentColor)}._item_y8fr0_6._itemFilled_y8fr0_38 svg{fill:var(--np-item-active-icon,currentColor);stroke:none}._item_y8fr0_6._itemFilledOutline_y8fr0_79 svg{fill:var(--np-item-active-icon,currentColor)}._avatar_4hc9t_4._avatar_4hc9t_4{background:var(--np-avatar-bg,var(--bg-control-accent,#1d4ed8));color:var(--np-avatar-text,var(--text-control-permanent,#fcfcfc))}._wrapper_1uzro_1{font-family:var(--np-font-family,inherit)}._trigger_1uzro_5:hover{background:var(--np-trigger-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}._trigger_1uzro_5._trigger_1uzro_5:focus-visible{background:var(--np-trigger-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924));outline:1px solid var(--np-focus-outline,var(--stroke-focus-black,#161b2d));outline-offset:-1px}._identityText_1uzro_18,._menuLabel_1uzro_22{color:var(--np-menu-text,var(--text-primary,#161b2d))}._sheet_1k0ml_1{font-family:var(--np-font-family,inherit)}li>._row_1k0ml_12{color:var(--np-sheet-text,var(--text-primary,#161b2d))}li>._row_1k0ml_12:hover,li>._row_1k0ml_12:focus-visible{background:var(--np-sheet-item-hover,var(--bg-control-accent-alpha-hover,#2764d924))}li>._row_1k0ml_12:active{background:var(--np-sheet-item-active,var(--bg-control-neutral-active,#d1dbea))}li>._rowActive_1k0ml_24{color:var(--np-sheet-row-active-text,var(--text-accent,#1d4ed8));background:var(--np-sheet-row-active-bg,var(--bg-control-accent-alpha,#2764d90f))}li>._rowActive_1k0ml_24:hover,li>._rowActive_1k0ml_24:focus-visible{background:var(--np-sheet-row-active-bg-hover,var(--bg-control-accent-alpha-hover,#2764d924))}li>._rowActive_1k0ml_24 ._rowIcon_1k0ml_31{color:inherit}li>._rowActive_1k0ml_24 ._rowIcon_1k0ml_31 svg[fill=none]{fill:currentColor}._rowIcon_1k0ml_31{color:var(--np-sheet-icon,var(--text-secondary,#57647a))}._divider_1k0ml_46{border-color:var(--np-sheet-divider,var(--stroke-secondary,#d1dbea))}._mutedText_1k0ml_50{color:var(--np-sheet-muted-text,var(--text-secondary,#57647a))}._activeIcon_1k0ml_54{color:var(--np-menu-active-icon,var(--text-accent,#1d4ed8))}
|
|
2
|
+
/*$vite$:1*/.absolute{position:absolute}.relative{position:relative}.z-10{z-index:10}.flex{display:flex}.contents{display:contents}.size-0{height:0;width:0}.size-\[44px\]{height:44px;width:44px}.size-\[60px\]{height:60px;width:60px}.h-16{height:4rem}.h-6{height:1.5rem}.h-\[40px\]{height:40px}.h-\[56px\]{height:56px}.h-auto{height:auto}.h-full{height:100%}.w-6{width:1.5rem}.w-\[60px\]{width:60px}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.\!rounded-full{border-radius:9999px!important}.rounded-none{border-radius:0}.rounded-xl{border-radius:.75rem}.bg-contain{background-size:contain}.bg-center{background-position:50%}.bg-no-repeat{background-repeat:no-repeat}.p-0{padding:0}.p-2{padding:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-\[10px\]{padding-bottom:10px;padding-top:10px}.pb-4{padding-bottom:1rem}.shadow-sm{--tw-shadow:0 8px 10px 0 var(--shadow-sm,#2764d914);--tw-shadow-colored:0 8px 10px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid;outline-width:1px}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.rtl\:scale-x-\[-1\]:where([dir=rtl],[dir=rtl] *){--tw-scale-x:-1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
|
package/index.js
CHANGED
|
@@ -1,106 +1,106 @@
|
|
|
1
1
|
import { buildCssVars as e, mergeClasses as t } from "@epam/ai-dial-chat-shared";
|
|
2
|
-
import {
|
|
3
|
-
import { Fragment as
|
|
4
|
-
import { Fragment as
|
|
5
|
-
import { IconCheck as
|
|
6
|
-
import { BottomSheetShell as
|
|
2
|
+
import { Avatar as n, BASE_ICON_SIZE as r, Button as i, DIAL_ICON_SIZE as a, DIAL_KIT_ICON_STROKE as o, Dropdown as s, DropdownItemType as c, EllipsisTooltip as l, IconButton as u, MenuItem as d, MenuItemMark as f } from "@epam/ai-dial-ui-kit";
|
|
3
|
+
import { Fragment as p, createContext as m, memo as h, useCallback as g, useContext as _, useEffect as v, useId as y, useMemo as b, useState as x } from "react";
|
|
4
|
+
import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
|
|
5
|
+
import { IconCheck as T, IconChevronRight as E, IconLogout as D, IconSettings as O, IconUser as k } from "@tabler/icons-react";
|
|
6
|
+
import { BottomSheetShell as A } from "@epam/ai-dial-conversation-input";
|
|
7
7
|
//#region src/constants/public-class-names.ts
|
|
8
|
-
var
|
|
8
|
+
var j = {
|
|
9
9
|
rail: "dial-navigation-panel-rail",
|
|
10
10
|
item: "dial-navigation-panel-item"
|
|
11
|
-
},
|
|
11
|
+
}, M = {
|
|
12
12
|
rail: "_rail_y8fr0_1",
|
|
13
13
|
item: "_item_y8fr0_6",
|
|
14
14
|
itemActive: "_itemActive_y8fr0_33",
|
|
15
15
|
itemFilled: "_itemFilled_y8fr0_38",
|
|
16
16
|
itemFilledOutline: "_itemFilledOutline_y8fr0_79"
|
|
17
|
-
},
|
|
17
|
+
}, N = (e, t) => /* @__PURE__ */ C("a", {
|
|
18
18
|
href: e.href,
|
|
19
19
|
className: "contents",
|
|
20
20
|
children: t
|
|
21
|
-
}),
|
|
22
|
-
let { colors: d, typography:
|
|
21
|
+
}), P = h(({ items: n, labels: r, logo: i, footer: s, renderLink: c = N, styles: l }) => {
|
|
22
|
+
let { colors: d, typography: f, className: m, cssVars: h } = l ?? {}, g = y().replace(/[^\w-]/g, ""), _ = `np-hover-gradient-${g}`, v = `np-active-gradient-${g}`, x = b(() => e({
|
|
23
23
|
"--np-bg": d?.background,
|
|
24
24
|
"--np-item-text": d?.itemText,
|
|
25
25
|
"--np-item-active-text": d?.itemActiveText,
|
|
26
26
|
"--np-item-selected-bg": d?.itemSelectedBackground,
|
|
27
27
|
"--np-item-hover-bg": d?.itemHoverBackground,
|
|
28
28
|
"--np-item-hover-icon": d?.itemHoverIcon ?? `url(#${_})`,
|
|
29
|
-
"--np-item-active-icon": d?.itemActiveIcon ?? `url(#${
|
|
29
|
+
"--np-item-active-icon": d?.itemActiveIcon ?? `url(#${v})`,
|
|
30
30
|
"--np-item-active-bg": d?.itemActiveBackground,
|
|
31
|
-
"--np-font-family":
|
|
31
|
+
"--np-font-family": f?.fontFamily
|
|
32
32
|
}), [
|
|
33
33
|
d,
|
|
34
|
-
|
|
34
|
+
f?.fontFamily,
|
|
35
35
|
_,
|
|
36
|
-
|
|
36
|
+
v
|
|
37
37
|
]);
|
|
38
|
-
return /* @__PURE__ */
|
|
38
|
+
return /* @__PURE__ */ w("nav", {
|
|
39
39
|
"aria-label": r.ariaLabel,
|
|
40
40
|
style: {
|
|
41
41
|
...h,
|
|
42
42
|
...x
|
|
43
43
|
},
|
|
44
|
-
className: t(
|
|
44
|
+
className: t(M.rail, "relative z-10 flex h-full w-[60px] flex-col justify-between shadow-sm", f?.fontClassName, m, j.rail),
|
|
45
45
|
children: [
|
|
46
|
-
/* @__PURE__ */
|
|
46
|
+
/* @__PURE__ */ C("svg", {
|
|
47
47
|
"aria-hidden": !0,
|
|
48
48
|
className: "absolute size-0",
|
|
49
49
|
focusable: "false",
|
|
50
|
-
children: /* @__PURE__ */
|
|
50
|
+
children: /* @__PURE__ */ w("defs", { children: [/* @__PURE__ */ w("linearGradient", {
|
|
51
51
|
id: _,
|
|
52
52
|
gradientUnits: "userSpaceOnUse",
|
|
53
53
|
x1: "30.2",
|
|
54
54
|
y1: "-2.5",
|
|
55
55
|
x2: "-4.6",
|
|
56
56
|
y2: "25.2",
|
|
57
|
-
children: [/* @__PURE__ */
|
|
57
|
+
children: [/* @__PURE__ */ C("stop", {
|
|
58
58
|
offset: "0",
|
|
59
59
|
stopColor: "#1d4ed8"
|
|
60
|
-
}), /* @__PURE__ */
|
|
60
|
+
}), /* @__PURE__ */ C("stop", {
|
|
61
61
|
offset: "1",
|
|
62
62
|
stopColor: "#885df2"
|
|
63
63
|
})]
|
|
64
|
-
}), /* @__PURE__ */
|
|
65
|
-
id:
|
|
64
|
+
}), /* @__PURE__ */ w("linearGradient", {
|
|
65
|
+
id: v,
|
|
66
66
|
gradientUnits: "userSpaceOnUse",
|
|
67
67
|
x1: "31.3",
|
|
68
68
|
y1: "-1.7",
|
|
69
69
|
x2: "0.2",
|
|
70
70
|
y2: "20.4",
|
|
71
|
-
children: [/* @__PURE__ */
|
|
71
|
+
children: [/* @__PURE__ */ C("stop", {
|
|
72
72
|
offset: "0",
|
|
73
73
|
stopColor: "#1d4ed8"
|
|
74
|
-
}), /* @__PURE__ */
|
|
74
|
+
}), /* @__PURE__ */ C("stop", {
|
|
75
75
|
offset: "1",
|
|
76
76
|
stopColor: "#885df2"
|
|
77
77
|
})]
|
|
78
78
|
})] })
|
|
79
79
|
}),
|
|
80
|
-
/* @__PURE__ */
|
|
80
|
+
/* @__PURE__ */ w("div", {
|
|
81
81
|
className: "flex flex-col items-center",
|
|
82
|
-
children: [
|
|
83
|
-
href:
|
|
84
|
-
"aria-label":
|
|
82
|
+
children: [i && /* @__PURE__ */ C("a", {
|
|
83
|
+
href: i.href ?? "/",
|
|
84
|
+
"aria-label": i.ariaLabel,
|
|
85
85
|
className: "flex h-16 w-full shrink-0 items-center justify-center",
|
|
86
|
-
children: /* @__PURE__ */
|
|
87
|
-
style: { backgroundImage: `url("${
|
|
86
|
+
children: /* @__PURE__ */ C("span", {
|
|
87
|
+
style: { backgroundImage: `url("${i.iconUrl}")` },
|
|
88
88
|
className: "h-6 w-6 bg-contain bg-center bg-no-repeat"
|
|
89
89
|
})
|
|
90
|
-
}), /* @__PURE__ */
|
|
90
|
+
}), /* @__PURE__ */ C("div", {
|
|
91
91
|
className: "flex flex-col items-center gap-2 p-2",
|
|
92
92
|
children: n.map((e) => {
|
|
93
93
|
let n = !!e.isActive && !!e.activeIcon;
|
|
94
|
-
return /* @__PURE__ */
|
|
95
|
-
icon: /* @__PURE__ */
|
|
96
|
-
size:
|
|
97
|
-
stroke:
|
|
94
|
+
return /* @__PURE__ */ C(p, { children: c(e, /* @__PURE__ */ C(u, {
|
|
95
|
+
icon: /* @__PURE__ */ C(n && e.activeIcon || e.icon, {
|
|
96
|
+
size: a.LG,
|
|
97
|
+
stroke: o
|
|
98
98
|
}),
|
|
99
99
|
"aria-label": e.label,
|
|
100
100
|
"aria-current": e.isActive ? "page" : void 0,
|
|
101
101
|
tooltipProps: { tooltip: e.label },
|
|
102
102
|
tabIndex: -1,
|
|
103
|
-
className: t(
|
|
103
|
+
className: t(M.item, "rounded-xl", e.isActive && M.itemActive, n && M.itemFilled, e.isActive && !n && M.itemFilledOutline, j.item)
|
|
104
104
|
})) }, e.id);
|
|
105
105
|
})
|
|
106
106
|
})]
|
|
@@ -108,44 +108,52 @@ var A = {
|
|
|
108
108
|
s
|
|
109
109
|
]
|
|
110
110
|
});
|
|
111
|
-
}),
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
111
|
+
}), F = { avatar: "_avatar_4hc9t_4" }, I = h(({ shortName: e, className: r, textClassName: i = "dial-tiny-text" }) => /* @__PURE__ */ C(n, {
|
|
112
|
+
name: e ?? "",
|
|
113
|
+
initials: e ?? "",
|
|
114
|
+
size: 28,
|
|
115
|
+
textClassName: i,
|
|
116
|
+
className: t(F.avatar, r)
|
|
117
|
+
})), L = h(({ profile: e, alt: t }) => {
|
|
118
|
+
let r = e.isFallbackShown || !e.imageUrl;
|
|
119
|
+
return /* @__PURE__ */ C(n, {
|
|
120
|
+
name: e.displayName,
|
|
121
|
+
initials: e.shortName ?? "",
|
|
122
|
+
src: r ? void 0 : e.imageUrl,
|
|
123
|
+
alt: r ? "" : t,
|
|
124
|
+
size: 28,
|
|
125
|
+
textClassName: "dial-tiny-text",
|
|
126
|
+
className: F.avatar,
|
|
127
|
+
onImageError: e.onImageError
|
|
128
|
+
});
|
|
129
|
+
}), R = {
|
|
122
130
|
wrapper: "_wrapper_1uzro_1",
|
|
123
131
|
trigger: "_trigger_1uzro_5",
|
|
124
132
|
identityText: "_identityText_1uzro_18",
|
|
125
133
|
menuLabel: "_menuLabel_1uzro_22"
|
|
126
|
-
},
|
|
127
|
-
let { colors: g, typography: _, className: v, cssVars:
|
|
134
|
+
}, z = h(({ profile: n, labels: r, groups: u, onLogout: d, onSettings: p, isTooltipHidden: m, styles: h }) => {
|
|
135
|
+
let { colors: g, typography: _, className: v, cssVars: y } = h ?? {}, x = _?.fontClassName ?? "dial-small-text", S = b(() => e({
|
|
128
136
|
"--np-avatar-bg": g?.avatarBackground,
|
|
129
137
|
"--np-avatar-text": g?.avatarText,
|
|
130
138
|
"--np-menu-text": g?.text,
|
|
131
139
|
"--np-trigger-hover-bg": g?.triggerHoverBackground,
|
|
132
140
|
"--np-font-family": _?.fontFamily
|
|
133
|
-
}), [g, _?.fontFamily]), T =
|
|
141
|
+
}), [g, _?.fontFamily]), T = b(() => t(R.menuLabel, x), [x]), E = b(() => {
|
|
134
142
|
let e = (u ?? []).filter(({ options: e }) => e.length > 0).map(({ id: e, label: t, icon: n, options: r }) => ({
|
|
135
143
|
key: e,
|
|
136
|
-
label: /* @__PURE__ */
|
|
144
|
+
label: /* @__PURE__ */ C("span", {
|
|
137
145
|
className: T,
|
|
138
146
|
children: t
|
|
139
147
|
}),
|
|
140
148
|
icon: n,
|
|
141
149
|
children: r.map((e) => ({
|
|
142
150
|
key: e.id,
|
|
143
|
-
label: /* @__PURE__ */
|
|
151
|
+
label: /* @__PURE__ */ C("span", {
|
|
144
152
|
className: T,
|
|
145
153
|
children: e.label
|
|
146
154
|
}),
|
|
147
155
|
icon: e.icon,
|
|
148
|
-
mark:
|
|
156
|
+
mark: f.Check,
|
|
149
157
|
checked: e.isActive,
|
|
150
158
|
onClick: e.onSelect
|
|
151
159
|
}))
|
|
@@ -153,94 +161,94 @@ var A = {
|
|
|
153
161
|
return [
|
|
154
162
|
{
|
|
155
163
|
key: "identity",
|
|
156
|
-
type:
|
|
157
|
-
label: /* @__PURE__ */
|
|
164
|
+
type: c.PlainText,
|
|
165
|
+
label: /* @__PURE__ */ w("div", {
|
|
158
166
|
className: "flex h-[40px] min-w-0 items-center gap-3",
|
|
159
|
-
children: [/* @__PURE__ */
|
|
167
|
+
children: [/* @__PURE__ */ C(I, { shortName: n.shortName }), /* @__PURE__ */ C(l, {
|
|
160
168
|
text: n.displayName,
|
|
161
|
-
className: t(
|
|
169
|
+
className: t(R.identityText, x, "min-w-0 flex-1 truncate")
|
|
162
170
|
})]
|
|
163
171
|
})
|
|
164
172
|
},
|
|
165
173
|
...e,
|
|
166
174
|
{
|
|
167
175
|
key: "divider-1",
|
|
168
|
-
type:
|
|
176
|
+
type: c.Divider
|
|
169
177
|
},
|
|
170
178
|
...p ? [{
|
|
171
179
|
key: "settings",
|
|
172
|
-
label: /* @__PURE__ */
|
|
180
|
+
label: /* @__PURE__ */ C("span", {
|
|
173
181
|
className: T,
|
|
174
|
-
children:
|
|
182
|
+
children: r.settings
|
|
175
183
|
}),
|
|
176
|
-
icon: /* @__PURE__ */
|
|
177
|
-
size:
|
|
184
|
+
icon: /* @__PURE__ */ C(O, {
|
|
185
|
+
size: a.SM,
|
|
178
186
|
"aria-hidden": !0,
|
|
179
|
-
stroke:
|
|
187
|
+
stroke: o
|
|
180
188
|
}),
|
|
181
189
|
onClick: p
|
|
182
190
|
}] : [],
|
|
183
191
|
{
|
|
184
192
|
key: "logout",
|
|
185
|
-
label: /* @__PURE__ */
|
|
193
|
+
label: /* @__PURE__ */ C("span", {
|
|
186
194
|
className: T,
|
|
187
|
-
children:
|
|
195
|
+
children: r.logOut
|
|
188
196
|
}),
|
|
189
|
-
icon: /* @__PURE__ */
|
|
190
|
-
size:
|
|
197
|
+
icon: /* @__PURE__ */ C(D, {
|
|
198
|
+
size: a.SM,
|
|
191
199
|
"aria-hidden": !0,
|
|
192
|
-
stroke:
|
|
200
|
+
stroke: o
|
|
193
201
|
}),
|
|
194
|
-
onClick:
|
|
202
|
+
onClick: d
|
|
195
203
|
}
|
|
196
204
|
];
|
|
197
205
|
}, [
|
|
198
206
|
u,
|
|
199
207
|
x,
|
|
200
208
|
T,
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
209
|
+
r.logOut,
|
|
210
|
+
r.settings,
|
|
211
|
+
d,
|
|
204
212
|
p,
|
|
205
213
|
n.displayName,
|
|
206
214
|
n.shortName
|
|
207
215
|
]);
|
|
208
|
-
return /* @__PURE__ */
|
|
216
|
+
return /* @__PURE__ */ C("div", {
|
|
209
217
|
style: {
|
|
210
|
-
...
|
|
211
|
-
...
|
|
218
|
+
...y,
|
|
219
|
+
...S
|
|
212
220
|
},
|
|
213
|
-
className: t(
|
|
214
|
-
children: /* @__PURE__ */
|
|
221
|
+
className: t(R.wrapper, "flex size-[60px] items-center justify-center", v),
|
|
222
|
+
children: /* @__PURE__ */ C(s, {
|
|
215
223
|
placement: "top-end",
|
|
216
224
|
matchReferenceWidth: !1,
|
|
217
|
-
items:
|
|
218
|
-
children: /* @__PURE__ */
|
|
219
|
-
"aria-label":
|
|
225
|
+
items: E,
|
|
226
|
+
children: /* @__PURE__ */ C(i, {
|
|
227
|
+
"aria-label": r.trigger,
|
|
220
228
|
tooltipProps: {
|
|
221
229
|
tooltip: n.email,
|
|
222
230
|
hideTooltip: m
|
|
223
231
|
},
|
|
224
|
-
iconBefore: /* @__PURE__ */
|
|
232
|
+
iconBefore: /* @__PURE__ */ C(L, {
|
|
225
233
|
profile: n,
|
|
226
|
-
alt:
|
|
234
|
+
alt: r.avatarAlt
|
|
227
235
|
}),
|
|
228
|
-
className: t("size-[44px] gap-0 !rounded-full p-0",
|
|
236
|
+
className: t("size-[44px] gap-0 !rounded-full p-0", R.trigger)
|
|
229
237
|
})
|
|
230
238
|
})
|
|
231
239
|
});
|
|
232
|
-
}),
|
|
233
|
-
let [c, l] =
|
|
234
|
-
|
|
240
|
+
}), B = m(void 0), V = h(({ isOpen: e, onClose: t, children: n, title: r, closeLabel: i, backLabel: a, className: o, style: s }) => {
|
|
241
|
+
let [c, l] = x([]);
|
|
242
|
+
v(() => {
|
|
235
243
|
e || l([]);
|
|
236
244
|
}, [e]);
|
|
237
|
-
let u =
|
|
245
|
+
let u = g((e) => {
|
|
238
246
|
l((t) => [...t, e]);
|
|
239
|
-
}, []), d =
|
|
247
|
+
}, []), d = g(() => {
|
|
240
248
|
l((e) => e.slice(0, -1));
|
|
241
|
-
}, []), f =
|
|
249
|
+
}, []), f = g(() => {
|
|
242
250
|
l([]), t();
|
|
243
|
-
}, [t]), p =
|
|
251
|
+
}, [t]), p = b(() => ({
|
|
244
252
|
push: u,
|
|
245
253
|
pop: d,
|
|
246
254
|
close: f
|
|
@@ -249,9 +257,9 @@ var A = {
|
|
|
249
257
|
d,
|
|
250
258
|
f
|
|
251
259
|
]), m = c[c.length - 1];
|
|
252
|
-
return /* @__PURE__ */
|
|
260
|
+
return /* @__PURE__ */ C(B.Provider, {
|
|
253
261
|
value: p,
|
|
254
|
-
children: /* @__PURE__ */
|
|
262
|
+
children: /* @__PURE__ */ C(A, {
|
|
255
263
|
isOpen: e,
|
|
256
264
|
onClose: f,
|
|
257
265
|
title: m?.title ?? r,
|
|
@@ -263,11 +271,11 @@ var A = {
|
|
|
263
271
|
children: m ? m.content : n
|
|
264
272
|
})
|
|
265
273
|
});
|
|
266
|
-
}),
|
|
267
|
-
let e =
|
|
274
|
+
}), H = () => {
|
|
275
|
+
let e = _(B);
|
|
268
276
|
if (!e) throw Error("useSheetNavigation must be used within a NavigableBottomSheet");
|
|
269
277
|
return e;
|
|
270
|
-
},
|
|
278
|
+
}, U = {
|
|
271
279
|
sheet: "_sheet_1k0ml_1",
|
|
272
280
|
row: "_row_1k0ml_12",
|
|
273
281
|
rowActive: "_rowActive_1k0ml_24",
|
|
@@ -275,92 +283,92 @@ var A = {
|
|
|
275
283
|
divider: "_divider_1k0ml_46",
|
|
276
284
|
mutedText: "_mutedText_1k0ml_50",
|
|
277
285
|
activeIcon: "_activeIcon_1k0ml_54"
|
|
278
|
-
},
|
|
286
|
+
}, W = h(({ label: e, onClick: n, icon: r, trailing: i, isCurrent: a = !1, isHighlighted: o = !1, textClassName: s = "dial-small-text" }) => /* @__PURE__ */ C("li", { children: /* @__PURE__ */ C(d, {
|
|
279
287
|
label: e,
|
|
280
288
|
labelClassName: s,
|
|
281
|
-
icon: r && /* @__PURE__ */
|
|
282
|
-
className:
|
|
289
|
+
icon: r && /* @__PURE__ */ C("span", {
|
|
290
|
+
className: U.rowIcon,
|
|
283
291
|
children: r
|
|
284
292
|
}),
|
|
285
293
|
trailing: i,
|
|
286
|
-
mark:
|
|
294
|
+
mark: f.Highlight,
|
|
287
295
|
selected: o,
|
|
288
296
|
"aria-current": a ? "true" : void 0,
|
|
289
|
-
className: t("h-auto gap-3 rounded-none px-4 py-[10px]",
|
|
297
|
+
className: t("h-auto gap-3 rounded-none px-4 py-[10px]", U.row, o && U.rowActive),
|
|
290
298
|
onClick: n
|
|
291
|
-
}) })),
|
|
292
|
-
let { pop: n } =
|
|
293
|
-
return /* @__PURE__ */
|
|
299
|
+
}) })), G = h(({ options: e, textClassName: t }) => {
|
|
300
|
+
let { pop: n } = H();
|
|
301
|
+
return /* @__PURE__ */ C("ul", {
|
|
294
302
|
className: "flex flex-col pb-4",
|
|
295
|
-
children: e.map((e) => /* @__PURE__ */
|
|
303
|
+
children: e.map((e) => /* @__PURE__ */ C(W, {
|
|
296
304
|
label: e.label,
|
|
297
305
|
icon: e.icon,
|
|
298
306
|
textClassName: t,
|
|
299
307
|
isCurrent: e.isActive,
|
|
300
|
-
trailing: e.isActive ? /* @__PURE__ */
|
|
301
|
-
size:
|
|
302
|
-
stroke:
|
|
308
|
+
trailing: e.isActive ? /* @__PURE__ */ C(T, {
|
|
309
|
+
size: a.SM,
|
|
310
|
+
stroke: o,
|
|
303
311
|
"aria-hidden": !0,
|
|
304
|
-
className:
|
|
312
|
+
className: U.activeIcon
|
|
305
313
|
}) : void 0,
|
|
306
314
|
onClick: () => {
|
|
307
315
|
e.onSelect(), n();
|
|
308
316
|
}
|
|
309
317
|
}, e.id))
|
|
310
318
|
});
|
|
311
|
-
}),
|
|
312
|
-
let { push: d, close: f } =
|
|
313
|
-
return /* @__PURE__ */
|
|
314
|
-
/* @__PURE__ */
|
|
319
|
+
}), K = h(({ profile: e, logOutLabel: n, onLogout: i, settingsLabel: a, onSettings: s, groups: c, textClassName: u = "dial-small-text" }) => {
|
|
320
|
+
let { push: d, close: f } = H(), p = (c ?? []).filter(({ options: e }) => e.length > 0);
|
|
321
|
+
return /* @__PURE__ */ w(S, { children: [
|
|
322
|
+
/* @__PURE__ */ w("div", {
|
|
315
323
|
className: "flex h-[56px] items-center gap-3 px-4 py-2",
|
|
316
|
-
children: [/* @__PURE__ */
|
|
324
|
+
children: [/* @__PURE__ */ C(L, {
|
|
317
325
|
profile: e,
|
|
318
326
|
alt: ""
|
|
319
|
-
}), /* @__PURE__ */
|
|
327
|
+
}), /* @__PURE__ */ C(l, {
|
|
320
328
|
text: e.displayName,
|
|
321
|
-
className: t(
|
|
329
|
+
className: t(U.mutedText, u, "min-w-0 flex-1 truncate")
|
|
322
330
|
})]
|
|
323
331
|
}),
|
|
324
|
-
p.length > 0 && /* @__PURE__ */
|
|
332
|
+
p.length > 0 && /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C("ul", {
|
|
325
333
|
className: "flex flex-col",
|
|
326
|
-
children: p.map((e) => /* @__PURE__ */
|
|
334
|
+
children: p.map((e) => /* @__PURE__ */ C(W, {
|
|
327
335
|
label: e.label,
|
|
328
336
|
icon: e.icon,
|
|
329
337
|
textClassName: u,
|
|
330
|
-
trailing: /* @__PURE__ */
|
|
331
|
-
size:
|
|
332
|
-
stroke:
|
|
338
|
+
trailing: /* @__PURE__ */ C(E, {
|
|
339
|
+
size: r,
|
|
340
|
+
stroke: o,
|
|
333
341
|
"aria-hidden": !0,
|
|
334
|
-
className: t(
|
|
342
|
+
className: t(U.rowIcon, "rtl:scale-x-[-1]")
|
|
335
343
|
}),
|
|
336
344
|
onClick: () => d({
|
|
337
345
|
title: e.label,
|
|
338
|
-
content: /* @__PURE__ */
|
|
346
|
+
content: /* @__PURE__ */ C(G, {
|
|
339
347
|
options: e.options,
|
|
340
348
|
textClassName: u
|
|
341
349
|
})
|
|
342
350
|
})
|
|
343
351
|
}, e.id))
|
|
344
|
-
}), /* @__PURE__ */
|
|
345
|
-
/* @__PURE__ */
|
|
352
|
+
}), /* @__PURE__ */ C("hr", { className: U.divider })] }),
|
|
353
|
+
/* @__PURE__ */ w("ul", {
|
|
346
354
|
className: "flex flex-col pb-4",
|
|
347
|
-
children: [s &&
|
|
348
|
-
label:
|
|
355
|
+
children: [s && a && /* @__PURE__ */ C(W, {
|
|
356
|
+
label: a,
|
|
349
357
|
textClassName: u,
|
|
350
|
-
icon: /* @__PURE__ */
|
|
351
|
-
size:
|
|
352
|
-
stroke:
|
|
358
|
+
icon: /* @__PURE__ */ C(O, {
|
|
359
|
+
size: r,
|
|
360
|
+
stroke: o,
|
|
353
361
|
"aria-hidden": !0
|
|
354
362
|
}),
|
|
355
363
|
onClick: () => {
|
|
356
364
|
f(), s?.();
|
|
357
365
|
}
|
|
358
|
-
}), /* @__PURE__ */
|
|
359
|
-
label:
|
|
366
|
+
}), /* @__PURE__ */ C(W, {
|
|
367
|
+
label: n,
|
|
360
368
|
textClassName: u,
|
|
361
|
-
icon: /* @__PURE__ */
|
|
362
|
-
size:
|
|
363
|
-
stroke:
|
|
369
|
+
icon: /* @__PURE__ */ C(D, {
|
|
370
|
+
size: r,
|
|
371
|
+
stroke: o,
|
|
364
372
|
"aria-hidden": !0
|
|
365
373
|
}),
|
|
366
374
|
onClick: () => {
|
|
@@ -369,41 +377,41 @@ var A = {
|
|
|
369
377
|
})]
|
|
370
378
|
})
|
|
371
379
|
] });
|
|
372
|
-
}),
|
|
373
|
-
let { push: p, close: m } =
|
|
380
|
+
}), q = h(({ items: e, onSelectItem: t, profileLabel: n, logOutLabel: i, onLogout: a, settingsLabel: s, onSettings: c, profile: l, groups: u, footer: d, textClassName: f }) => {
|
|
381
|
+
let { push: p, close: m } = H(), h = (e) => {
|
|
374
382
|
m(), t(e);
|
|
375
383
|
};
|
|
376
|
-
return /* @__PURE__ */
|
|
384
|
+
return /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ w("ul", {
|
|
377
385
|
className: "flex flex-col pb-4",
|
|
378
386
|
children: [e.map((e) => {
|
|
379
387
|
let t = e.isActive && e.activeIcon || e.icon;
|
|
380
|
-
return /* @__PURE__ */
|
|
388
|
+
return /* @__PURE__ */ C(W, {
|
|
381
389
|
label: e.label,
|
|
382
390
|
textClassName: f,
|
|
383
391
|
isCurrent: e.isActive,
|
|
384
392
|
isHighlighted: e.isActive,
|
|
385
|
-
icon: /* @__PURE__ */
|
|
386
|
-
size:
|
|
387
|
-
stroke:
|
|
393
|
+
icon: /* @__PURE__ */ C(t, {
|
|
394
|
+
size: r,
|
|
395
|
+
stroke: o
|
|
388
396
|
}),
|
|
389
397
|
onClick: () => h(e)
|
|
390
398
|
}, e.id);
|
|
391
|
-
}), l && /* @__PURE__ */
|
|
392
|
-
label:
|
|
399
|
+
}), l && /* @__PURE__ */ C(W, {
|
|
400
|
+
label: n,
|
|
393
401
|
textClassName: f,
|
|
394
|
-
icon: /* @__PURE__ */
|
|
395
|
-
size:
|
|
396
|
-
stroke:
|
|
402
|
+
icon: /* @__PURE__ */ C(k, {
|
|
403
|
+
size: r,
|
|
404
|
+
stroke: o,
|
|
397
405
|
"aria-hidden": !0
|
|
398
406
|
}),
|
|
399
407
|
onClick: () => {
|
|
400
408
|
l && p({
|
|
401
|
-
title:
|
|
402
|
-
content: /* @__PURE__ */
|
|
409
|
+
title: n,
|
|
410
|
+
content: /* @__PURE__ */ C(K, {
|
|
403
411
|
profile: l,
|
|
404
412
|
groups: u,
|
|
405
413
|
logOutLabel: i,
|
|
406
|
-
onLogout:
|
|
414
|
+
onLogout: a,
|
|
407
415
|
settingsLabel: s,
|
|
408
416
|
onSettings: c,
|
|
409
417
|
textClassName: f
|
|
@@ -412,8 +420,8 @@ var A = {
|
|
|
412
420
|
}
|
|
413
421
|
})]
|
|
414
422
|
}), d] });
|
|
415
|
-
}),
|
|
416
|
-
let { colors: p, typography: m, className: h, cssVars: g } = f ?? {}, _ =
|
|
423
|
+
}), J = h(({ isOpen: n, onClose: r, items: i, onSelectItem: a, labels: o, profile: s, groups: c, onLogout: l, onSettings: u, footer: d, styles: f }) => {
|
|
424
|
+
let { colors: p, typography: m, className: h, cssVars: g } = f ?? {}, _ = b(() => e({
|
|
417
425
|
"--np-sheet-text": p?.text,
|
|
418
426
|
"--np-sheet-item-hover": p?.itemHoverBackground,
|
|
419
427
|
"--np-sheet-item-active": p?.itemActiveBackground,
|
|
@@ -427,18 +435,18 @@ var A = {
|
|
|
427
435
|
"--np-menu-active-icon": p?.activeIcon,
|
|
428
436
|
"--np-font-family": m?.fontFamily
|
|
429
437
|
}), [p, m?.fontFamily]);
|
|
430
|
-
return /* @__PURE__ */
|
|
438
|
+
return /* @__PURE__ */ C(V, {
|
|
431
439
|
isOpen: n,
|
|
432
440
|
onClose: r,
|
|
433
441
|
title: o.title,
|
|
434
442
|
closeLabel: o.close,
|
|
435
443
|
backLabel: o.back,
|
|
436
|
-
className: t(
|
|
444
|
+
className: t(U.sheet, h),
|
|
437
445
|
style: {
|
|
438
446
|
...g,
|
|
439
447
|
..._
|
|
440
448
|
},
|
|
441
|
-
children: /* @__PURE__ */
|
|
449
|
+
children: /* @__PURE__ */ C(q, {
|
|
442
450
|
items: i,
|
|
443
451
|
onSelectItem: a,
|
|
444
452
|
profileLabel: o.profile,
|
|
@@ -454,4 +462,4 @@ var A = {
|
|
|
454
462
|
});
|
|
455
463
|
});
|
|
456
464
|
//#endregion
|
|
457
|
-
export {
|
|
465
|
+
export { I as AvatarInitials, j as NAVIGATION_PANEL_CLASS, V as NavigableBottomSheet, q as NavigationMenuPage, P as NavigationPanel, J as NavigationSheet, G as OptionListPage, K as ProfilePage, W as SheetRow, L as UserAvatar, z as UserMenu, H as useSheetNavigation };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@epam/ai-dial-navigation-panel",
|
|
3
3
|
"description": "Primary application navigation — desktop nav rail, user menu, and mobile navigation bottom sheet",
|
|
4
|
-
"version": "1.2.0-dev.
|
|
4
|
+
"version": "1.2.0-dev.250",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./index.js",
|
|
@@ -18,12 +18,12 @@
|
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@tabler/icons-react": "^3.44.0",
|
|
21
|
-
"@epam/ai-dial-conversation-input": "1.2.0-dev.
|
|
21
|
+
"@epam/ai-dial-conversation-input": "1.2.0-dev.250"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"react": "^19.2.8",
|
|
25
|
-
"@epam/ai-dial-chat-shared": "1.2.0-dev.
|
|
26
|
-
"@epam/ai-dial-ui-kit": "^0.15.0-dev.
|
|
25
|
+
"@epam/ai-dial-chat-shared": "1.2.0-dev.250",
|
|
26
|
+
"@epam/ai-dial-ui-kit": "^0.15.0-dev.35"
|
|
27
27
|
},
|
|
28
28
|
"repository": {
|
|
29
29
|
"type": "git",
|