@epam/ai-dial-navigation-panel 1.2.0-dev.148 → 1.2.0-dev.152

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.
Files changed (4) hide show
  1. package/components/NavigationSheet/SheetRow.d.ts.map +1 -1
  2. package/index.css +2 -2
  3. package/index.js +130 -133
  4. package/package.json +4 -4
package/components/NavigationSheet/SheetRow.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SheetRow.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationSheet/SheetRow.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,4BAA4B;AAC5B,MAAM,WAAW,aAAa;IAC5B,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qFAAqF;IACrF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,iFAAiF;AACjF,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA2BtC,CAAC"}
1
+ {"version":3,"file":"SheetRow.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationSheet/SheetRow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,4BAA4B;AAC5B,MAAM,WAAW,aAAa;IAC5B,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qFAAqF;IACrF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,iFAAiF;AACjF,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA+BtC,CAAC"}
package/index.css CHANGED
@@ -1,2 +1,2 @@
1
- ._rail_h528m_1{background:var(--np-bg,var(--bg-layer-raised,#fcfcfc));font-family:var(--np-font-family,inherit)}._item_h528m_6{color:var(--np-item-text,var(--text-secondary,#57647a))}._item_h528m_6:hover{background:var(--np-item-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}._item_h528m_6:active{background:var(--np-item-active-bg,var(--bg-control-accent-alpha-active,#2764d933))}a:focus-visible>._item_h528m_6{background:var(--np-item-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}._itemActive_h528m_19{background:var(--np-item-selected-bg,var(--bg-control-accent-alpha,#2764d90f));color:var(--np-item-active-text,var(--text-accent,#1d4ed8))}._avatar_htyg8_1{background:var(--np-avatar-bg,var(--bg-control-accent,#1d4ed8));color:var(--np-avatar-text,var(--text-control-permanent,#fcfcfc))}._wrapper_1coa8_1{font-family:var(--np-font-family,inherit)}._trigger_1coa8_5:hover{background:var(--np-trigger-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}._trigger_1coa8_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_1coa8_14,._menuLabel_1coa8_18{color:var(--np-menu-text,var(--text-primary,#161b2d))}._sheet_1oucc_1{font-family:var(--np-font-family,inherit)}._row_1oucc_5{color:var(--np-sheet-text,var(--text-primary,#161b2d))}._row_1oucc_5:hover,._row_1oucc_5:focus-visible{background:var(--np-sheet-item-hover,var(--bg-control-accent-alpha-hover,#2764d924))}._row_1oucc_5:active{background:var(--np-sheet-item-active,var(--bg-control-neutral-active,#d1dbea))}._rowActive_1oucc_17{color:var(--np-sheet-row-active-text,var(--text-accent,#1d4ed8));background:var(--np-sheet-row-active-bg,var(--bg-control-accent-alpha,#2764d90f))}._rowActive_1oucc_17:hover,._rowActive_1oucc_17:focus-visible{background:var(--np-sheet-row-active-bg-hover,var(--bg-control-accent-alpha-hover,#2764d924))}._rowActive_1oucc_17 ._rowIcon_1oucc_24{color:inherit}._rowIcon_1oucc_24{color:var(--np-sheet-icon,var(--text-secondary,#57647a))}._divider_1oucc_32{border-color:var(--np-sheet-divider,var(--stroke-secondary,#d1dbea))}._mutedText_1oucc_36{color:var(--np-sheet-muted-text,var(--text-secondary,#57647a))}._activeIcon_1oucc_40{color:var(--np-menu-active-icon,var(--text-accent,#1d4ed8))}
2
- /*$vite$:1*/.relative{position:relative}.z-10{z-index:10}.flex{display:flex}.contents{display:contents}.size-\[28px\]{height:28px;width:28px}.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-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%}.flex-shrink-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-2{gap:.5rem}.gap-3{gap:.75rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-transparent{border-color:transparent}.bg-contain{background-size:contain}.bg-center{background-position:50%}.bg-no-repeat{background-repeat:no-repeat}.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}.text-start{text-align:start}.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)}.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))}
1
+ ._rail_h528m_1{background:var(--np-bg,var(--bg-layer-raised,#fcfcfc));font-family:var(--np-font-family,inherit)}._item_h528m_6{color:var(--np-item-text,var(--text-secondary,#57647a))}._item_h528m_6:hover{background:var(--np-item-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}._item_h528m_6:active{background:var(--np-item-active-bg,var(--bg-control-accent-alpha-active,#2764d933))}a:focus-visible>._item_h528m_6{background:var(--np-item-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}._itemActive_h528m_19{background:var(--np-item-selected-bg,var(--bg-control-accent-alpha,#2764d90f));color:var(--np-item-active-text,var(--text-accent,#1d4ed8))}._avatar_htyg8_1{background:var(--np-avatar-bg,var(--bg-control-accent,#1d4ed8));color:var(--np-avatar-text,var(--text-control-permanent,#fcfcfc))}._wrapper_1coa8_1{font-family:var(--np-font-family,inherit)}._trigger_1coa8_5:hover{background:var(--np-trigger-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}._trigger_1coa8_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_1coa8_14,._menuLabel_1coa8_18{color:var(--np-menu-text,var(--text-primary,#161b2d))}._sheet_wbw5h_1{font-family:var(--np-font-family,inherit)}li>._row_wbw5h_12{color:var(--np-sheet-text,var(--text-primary,#161b2d))}li>._row_wbw5h_12:hover,li>._row_wbw5h_12:focus-visible{background:var(--np-sheet-item-hover,var(--bg-control-accent-alpha-hover,#2764d924))}li>._row_wbw5h_12:active{background:var(--np-sheet-item-active,var(--bg-control-neutral-active,#d1dbea))}li>._rowActive_wbw5h_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_wbw5h_24:hover,li>._rowActive_wbw5h_24:focus-visible{background:var(--np-sheet-row-active-bg-hover,var(--bg-control-accent-alpha-hover,#2764d924))}li>._rowActive_wbw5h_24 ._rowIcon_wbw5h_31{color:inherit}._rowIcon_wbw5h_31{color:var(--np-sheet-icon,var(--text-secondary,#57647a))}._divider_wbw5h_39{border-color:var(--np-sheet-divider,var(--stroke-secondary,#d1dbea))}._mutedText_wbw5h_43{color:var(--np-sheet-muted-text,var(--text-secondary,#57647a))}._activeIcon_wbw5h_47{color:var(--np-menu-active-icon,var(--text-accent,#1d4ed8))}
2
+ /*$vite$:1*/.relative{position:relative}.z-10{z-index:10}.flex{display:flex}.contents{display:contents}.size-\[28px\]{height:28px;width:28px}.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%}.flex-shrink-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-2{gap:.5rem}.gap-3{gap:.75rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-none{border-radius:0}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-transparent{border-color:transparent}.bg-contain{background-size:contain}.bg-center{background-position:50%}.bg-no-repeat{background-repeat:no-repeat}.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)}.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,52 +1,52 @@
1
1
  import { buildCssVars as e, mergeClasses as t } from "@epam/ai-dial-chat-shared";
2
- import { BASE_ICON_SIZE as n, DIAL_ICON_SIZE as r, DIAL_KIT_ICON_STROKE as i, Dropdown as a, DropdownItemType as o, EllipsisTooltip as s, IconButton as c, MenuItemMark as l, Tooltip as u } from "@epam/ai-dial-ui-kit";
3
- import { Fragment as d, createContext as f, memo as p, useCallback as m, useContext as h, useEffect as g, useMemo as _, useState as v } from "react";
4
- import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
5
- import { IconCheck as S, IconChevronRight as C, IconLogout as w, IconSettings as T, IconUser as E } from "@tabler/icons-react";
6
- import { BottomSheetShell as D } from "@epam/ai-dial-conversation-input";
2
+ import { BASE_ICON_SIZE as n, DIAL_ICON_SIZE as r, DIAL_KIT_ICON_STROKE as i, Dropdown as a, DropdownItemType as o, EllipsisTooltip as s, IconButton as c, MenuItem as l, MenuItemMark as u, Tooltip as d } from "@epam/ai-dial-ui-kit";
3
+ import { Fragment as f, createContext as p, memo as m, useCallback as h, useContext as g, useEffect as _, useMemo as v, useState as y } from "react";
4
+ import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
5
+ import { IconCheck as C, IconChevronRight as w, IconLogout as T, IconSettings as E, IconUser as D } from "@tabler/icons-react";
6
+ import { BottomSheetShell as O } from "@epam/ai-dial-conversation-input";
7
7
  //#region src/constants/public-class-names.ts
8
- var O = {
8
+ var k = {
9
9
  rail: "dial-navigation-panel-rail",
10
10
  item: "dial-navigation-panel-item"
11
- }, k = {
11
+ }, A = {
12
12
  rail: "_rail_h528m_1",
13
13
  item: "_item_h528m_6",
14
14
  itemActive: "_itemActive_h528m_19"
15
- }, A = (e, t) => /* @__PURE__ */ b("a", {
15
+ }, j = (e, t) => /* @__PURE__ */ x("a", {
16
16
  href: e.href,
17
17
  className: "contents",
18
18
  children: t
19
- }), j = p(({ items: n, labels: a, logo: o, footer: s, renderLink: l = A, styles: u }) => {
20
- let { colors: f, typography: p, className: m, cssVars: h } = u ?? {}, g = _(() => e({
21
- "--np-bg": f?.background,
22
- "--np-item-text": f?.itemText,
23
- "--np-item-active-text": f?.itemActiveText,
24
- "--np-item-selected-bg": f?.itemSelectedBackground,
25
- "--np-item-hover-bg": f?.itemHoverBackground,
26
- "--np-item-active-bg": f?.itemActiveBackground,
19
+ }), M = m(({ items: n, labels: a, logo: o, footer: s, renderLink: l = j, styles: u }) => {
20
+ let { colors: d, typography: p, className: m, cssVars: h } = u ?? {}, g = v(() => e({
21
+ "--np-bg": d?.background,
22
+ "--np-item-text": d?.itemText,
23
+ "--np-item-active-text": d?.itemActiveText,
24
+ "--np-item-selected-bg": d?.itemSelectedBackground,
25
+ "--np-item-hover-bg": d?.itemHoverBackground,
26
+ "--np-item-active-bg": d?.itemActiveBackground,
27
27
  "--np-font-family": p?.fontFamily
28
- }), [f, p?.fontFamily]);
29
- return /* @__PURE__ */ x("nav", {
28
+ }), [d, p?.fontFamily]);
29
+ return /* @__PURE__ */ S("nav", {
30
30
  "aria-label": a.ariaLabel,
31
31
  style: {
32
32
  ...h,
33
33
  ...g
34
34
  },
35
- className: t(k.rail, "relative z-10 flex h-full w-[60px] flex-col justify-between shadow-sm", p?.fontClassName, m, O.rail),
36
- children: [/* @__PURE__ */ x("div", {
35
+ className: t(A.rail, "relative z-10 flex h-full w-[60px] flex-col justify-between shadow-sm", p?.fontClassName, m, k.rail),
36
+ children: [/* @__PURE__ */ S("div", {
37
37
  className: "flex flex-col items-center",
38
- children: [o && /* @__PURE__ */ b("a", {
38
+ children: [o && /* @__PURE__ */ x("a", {
39
39
  href: o.href ?? "/",
40
40
  "aria-label": o.ariaLabel,
41
41
  className: "flex h-16 w-full shrink-0 items-center justify-center",
42
- children: /* @__PURE__ */ b("span", {
42
+ children: /* @__PURE__ */ x("span", {
43
43
  style: { backgroundImage: `url(${o.iconUrl})` },
44
44
  className: "h-6 w-6 bg-contain bg-center bg-no-repeat"
45
45
  })
46
- }), /* @__PURE__ */ b("div", {
46
+ }), /* @__PURE__ */ x("div", {
47
47
  className: "flex flex-col items-center gap-2 p-2",
48
- children: n.map((e) => /* @__PURE__ */ b(d, { children: l(e, /* @__PURE__ */ b(c, {
49
- icon: /* @__PURE__ */ b(e.icon, {
48
+ children: n.map((e) => /* @__PURE__ */ x(f, { children: l(e, /* @__PURE__ */ x(c, {
49
+ icon: /* @__PURE__ */ x(e.icon, {
50
50
  size: r.LG,
51
51
  stroke: i
52
52
  }),
@@ -54,49 +54,49 @@ var O = {
54
54
  "aria-current": e.isActive ? "page" : void 0,
55
55
  tooltipProps: { tooltip: e.label },
56
56
  tabIndex: -1,
57
- className: t(k.item, "rounded-xl", e.isActive && k.itemActive, O.item)
57
+ className: t(A.item, "rounded-xl", e.isActive && A.itemActive, k.item)
58
58
  })) }, e.id))
59
59
  })]
60
60
  }), s]
61
61
  });
62
- }), M = { avatar: "_avatar_htyg8_1" }, N = p(({ shortName: e, className: n, textClassName: r = "dial-tiny-text" }) => /* @__PURE__ */ b("div", {
63
- className: t(M.avatar, "flex size-[28px] flex-shrink-0 items-center justify-center rounded-full", r, n),
62
+ }), N = { avatar: "_avatar_htyg8_1" }, P = m(({ shortName: e, className: n, textClassName: r = "dial-tiny-text" }) => /* @__PURE__ */ x("div", {
63
+ className: t(N.avatar, "flex size-[28px] flex-shrink-0 items-center justify-center rounded-full", r, n),
64
64
  children: e
65
- })), P = p(({ profile: e, alt: t }) => e.isFallbackShown || !e.imageUrl ? /* @__PURE__ */ b(N, { shortName: e.shortName }) : /* @__PURE__ */ b("img", {
65
+ })), F = m(({ profile: e, alt: t }) => e.isFallbackShown || !e.imageUrl ? /* @__PURE__ */ x(P, { shortName: e.shortName }) : /* @__PURE__ */ x("img", {
66
66
  className: "rounded-full",
67
67
  src: e.imageUrl,
68
68
  width: 28,
69
69
  height: 28,
70
70
  alt: t,
71
71
  onError: e.onImageError
72
- })), F = {
72
+ })), I = {
73
73
  wrapper: "_wrapper_1coa8_1",
74
74
  trigger: "_trigger_1coa8_5",
75
75
  identityText: "_identityText_1coa8_14",
76
76
  menuLabel: "_menuLabel_1coa8_18"
77
- }, I = p(({ profile: n, labels: c, groups: d, onLogout: f, onSettings: p, isTooltipHidden: m, styles: h }) => {
78
- let { colors: g, typography: v, className: y, cssVars: S } = h ?? {}, C = v?.fontClassName ?? "dial-small-text", E = _(() => e({
77
+ }, L = m(({ profile: n, labels: c, groups: l, onLogout: f, onSettings: p, isTooltipHidden: m, styles: h }) => {
78
+ let { colors: g, typography: _, className: y, cssVars: b } = h ?? {}, C = _?.fontClassName ?? "dial-small-text", w = v(() => e({
79
79
  "--np-avatar-bg": g?.avatarBackground,
80
80
  "--np-avatar-text": g?.avatarText,
81
81
  "--np-menu-text": g?.text,
82
82
  "--np-trigger-hover-bg": g?.triggerHoverBackground,
83
- "--np-font-family": v?.fontFamily
84
- }), [g, v?.fontFamily]), D = _(() => t(F.menuLabel, C), [C]), O = _(() => {
85
- let e = (d ?? []).filter(({ options: e }) => e.length > 0).map(({ id: e, label: t, icon: n, options: r }) => ({
83
+ "--np-font-family": _?.fontFamily
84
+ }), [g, _?.fontFamily]), D = v(() => t(I.menuLabel, C), [C]), O = v(() => {
85
+ let e = (l ?? []).filter(({ options: e }) => e.length > 0).map(({ id: e, label: t, icon: n, options: r }) => ({
86
86
  key: e,
87
- label: /* @__PURE__ */ b("span", {
87
+ label: /* @__PURE__ */ x("span", {
88
88
  className: D,
89
89
  children: t
90
90
  }),
91
91
  icon: n,
92
92
  children: r.map((e) => ({
93
93
  key: e.id,
94
- label: /* @__PURE__ */ b("span", {
94
+ label: /* @__PURE__ */ x("span", {
95
95
  className: D,
96
96
  children: e.label
97
97
  }),
98
98
  icon: e.icon,
99
- mark: l.Check,
99
+ mark: u.Check,
100
100
  checked: e.isActive,
101
101
  onClick: e.onSelect
102
102
  }))
@@ -105,11 +105,11 @@ var O = {
105
105
  {
106
106
  key: "identity",
107
107
  type: o.PlainText,
108
- label: /* @__PURE__ */ x("div", {
108
+ label: /* @__PURE__ */ S("div", {
109
109
  className: "flex h-[40px] min-w-0 items-center gap-3",
110
- children: [/* @__PURE__ */ b(N, { shortName: n.shortName }), /* @__PURE__ */ b(s, {
110
+ children: [/* @__PURE__ */ x(P, { shortName: n.shortName }), /* @__PURE__ */ x(s, {
111
111
  text: n.displayName,
112
- className: t(F.identityText, C, "min-w-0 flex-1 truncate")
112
+ className: t(I.identityText, C, "min-w-0 flex-1 truncate")
113
113
  })]
114
114
  })
115
115
  },
@@ -120,11 +120,11 @@ var O = {
120
120
  },
121
121
  ...p ? [{
122
122
  key: "settings",
123
- label: /* @__PURE__ */ b("span", {
123
+ label: /* @__PURE__ */ x("span", {
124
124
  className: D,
125
125
  children: c.settings
126
126
  }),
127
- icon: /* @__PURE__ */ b(T, {
127
+ icon: /* @__PURE__ */ x(E, {
128
128
  size: r.SM,
129
129
  "aria-hidden": !0,
130
130
  stroke: i
@@ -133,11 +133,11 @@ var O = {
133
133
  }] : [],
134
134
  {
135
135
  key: "logout",
136
- label: /* @__PURE__ */ b("span", {
136
+ label: /* @__PURE__ */ x("span", {
137
137
  className: D,
138
138
  children: c.logOut
139
139
  }),
140
- icon: /* @__PURE__ */ b(w, {
140
+ icon: /* @__PURE__ */ x(T, {
141
141
  size: r.SM,
142
142
  "aria-hidden": !0,
143
143
  stroke: i
@@ -146,7 +146,7 @@ var O = {
146
146
  }
147
147
  ];
148
148
  }, [
149
- d,
149
+ l,
150
150
  C,
151
151
  D,
152
152
  c.logOut,
@@ -156,24 +156,24 @@ var O = {
156
156
  n.displayName,
157
157
  n.shortName
158
158
  ]);
159
- return /* @__PURE__ */ b("div", {
159
+ return /* @__PURE__ */ x("div", {
160
160
  style: {
161
- ...S,
162
- ...E
161
+ ...b,
162
+ ...w
163
163
  },
164
- className: t(F.wrapper, "flex size-[60px] items-center justify-center", y),
165
- children: /* @__PURE__ */ b(a, {
164
+ className: t(I.wrapper, "flex size-[60px] items-center justify-center", y),
165
+ children: /* @__PURE__ */ x(a, {
166
166
  placement: "top-end",
167
167
  matchReferenceWidth: !1,
168
168
  items: O,
169
- children: /* @__PURE__ */ b("button", {
169
+ children: /* @__PURE__ */ x("button", {
170
170
  type: "button",
171
- className: t(F.trigger, "flex size-[44px] items-center justify-center rounded-full border border-transparent"),
171
+ className: t(I.trigger, "flex size-[44px] items-center justify-center rounded-full border border-transparent"),
172
172
  "aria-label": c.trigger,
173
- children: /* @__PURE__ */ b(u, {
173
+ children: /* @__PURE__ */ x(d, {
174
174
  tooltip: n.email,
175
175
  hideTooltip: m,
176
- children: /* @__PURE__ */ b(P, {
176
+ children: /* @__PURE__ */ x(F, {
177
177
  profile: n,
178
178
  alt: c.avatarAlt
179
179
  })
@@ -181,18 +181,18 @@ var O = {
181
181
  })
182
182
  })
183
183
  });
184
- }), L = f(void 0), R = p(({ isOpen: e, onClose: t, children: n, title: r, closeLabel: i, backLabel: a, className: o, style: s }) => {
185
- let [c, l] = v([]);
186
- g(() => {
184
+ }), R = p(void 0), z = m(({ isOpen: e, onClose: t, children: n, title: r, closeLabel: i, backLabel: a, className: o, style: s }) => {
185
+ let [c, l] = y([]);
186
+ _(() => {
187
187
  e || l([]);
188
188
  }, [e]);
189
- let u = m((e) => {
189
+ let u = h((e) => {
190
190
  l((t) => [...t, e]);
191
- }, []), d = m(() => {
191
+ }, []), d = h(() => {
192
192
  l((e) => e.slice(0, -1));
193
- }, []), f = m(() => {
193
+ }, []), f = h(() => {
194
194
  l([]), t();
195
- }, [t]), p = _(() => ({
195
+ }, [t]), p = v(() => ({
196
196
  push: u,
197
197
  pop: d,
198
198
  close: f
@@ -200,109 +200,106 @@ var O = {
200
200
  u,
201
201
  d,
202
202
  f
203
- ]), h = c[c.length - 1];
204
- return /* @__PURE__ */ b(L.Provider, {
203
+ ]), m = c[c.length - 1];
204
+ return /* @__PURE__ */ x(R.Provider, {
205
205
  value: p,
206
- children: /* @__PURE__ */ b(D, {
206
+ children: /* @__PURE__ */ x(O, {
207
207
  isOpen: e,
208
208
  onClose: f,
209
- title: h?.title ?? r,
209
+ title: m?.title ?? r,
210
210
  closeLabel: i,
211
- onBack: h ? d : void 0,
212
- backLabel: h ? a : void 0,
211
+ onBack: m ? d : void 0,
212
+ backLabel: m ? a : void 0,
213
213
  className: o,
214
214
  style: s,
215
- children: h ? h.content : n
215
+ children: m ? m.content : n
216
216
  })
217
217
  });
218
- }), z = () => {
219
- let e = h(L);
218
+ }), B = () => {
219
+ let e = g(R);
220
220
  if (!e) throw Error("useSheetNavigation must be used within a NavigableBottomSheet");
221
221
  return e;
222
- }, B = {
223
- sheet: "_sheet_1oucc_1",
224
- row: "_row_1oucc_5",
225
- rowActive: "_rowActive_1oucc_17",
226
- rowIcon: "_rowIcon_1oucc_24",
227
- divider: "_divider_1oucc_32",
228
- mutedText: "_mutedText_1oucc_36",
229
- activeIcon: "_activeIcon_1oucc_40"
230
- }, V = p(({ label: e, onClick: n, icon: r, trailing: i, isCurrent: a = !1, isHighlighted: o = !1, textClassName: s = "dial-small-text" }) => /* @__PURE__ */ b("li", { children: /* @__PURE__ */ x("button", {
231
- type: "button",
222
+ }, V = {
223
+ sheet: "_sheet_wbw5h_1",
224
+ row: "_row_wbw5h_12",
225
+ rowActive: "_rowActive_wbw5h_24",
226
+ rowIcon: "_rowIcon_wbw5h_31",
227
+ divider: "_divider_wbw5h_39",
228
+ mutedText: "_mutedText_wbw5h_43",
229
+ activeIcon: "_activeIcon_wbw5h_47"
230
+ }, H = m(({ label: e, onClick: n, icon: r, trailing: i, isCurrent: a = !1, isHighlighted: o = !1, textClassName: s = "dial-small-text" }) => /* @__PURE__ */ x("li", { children: /* @__PURE__ */ x(l, {
231
+ label: e,
232
+ labelClassName: s,
233
+ icon: r && /* @__PURE__ */ x("span", {
234
+ className: V.rowIcon,
235
+ children: r
236
+ }),
237
+ trailing: i,
238
+ mark: u.Highlight,
239
+ selected: o,
232
240
  "aria-current": a ? "true" : void 0,
233
- className: t(B.row, o && B.rowActive, "flex w-full items-center gap-3 px-4 py-[10px] text-start"),
234
- onClick: n,
235
- children: [
236
- r && /* @__PURE__ */ b("span", {
237
- className: B.rowIcon,
238
- children: r
239
- }),
240
- /* @__PURE__ */ b("span", {
241
- className: t(s, "flex-1"),
242
- children: e
243
- }),
244
- i
245
- ]
246
- }) })), H = p(({ options: e, textClassName: t }) => {
247
- let { pop: n } = z();
248
- return /* @__PURE__ */ b("ul", {
241
+ className: t("h-auto gap-3 rounded-none px-4 py-[10px]", V.row, o && V.rowActive),
242
+ onClick: n
243
+ }) })), U = m(({ options: e, textClassName: t }) => {
244
+ let { pop: n } = B();
245
+ return /* @__PURE__ */ x("ul", {
249
246
  className: "flex flex-col pb-4",
250
- children: e.map((e) => /* @__PURE__ */ b(V, {
247
+ children: e.map((e) => /* @__PURE__ */ x(H, {
251
248
  label: e.label,
252
249
  icon: e.icon,
253
250
  textClassName: t,
254
251
  isCurrent: e.isActive,
255
- trailing: e.isActive ? /* @__PURE__ */ b(S, {
252
+ trailing: e.isActive ? /* @__PURE__ */ x(C, {
256
253
  size: r.SM,
257
254
  stroke: i,
258
255
  "aria-hidden": !0,
259
- className: B.activeIcon
256
+ className: V.activeIcon
260
257
  }) : void 0,
261
258
  onClick: () => {
262
259
  e.onSelect(), n();
263
260
  }
264
261
  }, e.id))
265
262
  });
266
- }), U = p(({ profile: e, logOutLabel: r, onLogout: a, settingsLabel: o, onSettings: c, groups: l, textClassName: u = "dial-small-text" }) => {
267
- let { push: d, close: f } = z(), p = (l ?? []).filter(({ options: e }) => e.length > 0);
268
- return /* @__PURE__ */ x(y, { children: [
269
- /* @__PURE__ */ x("div", {
263
+ }), W = m(({ profile: e, logOutLabel: r, onLogout: a, settingsLabel: o, onSettings: c, groups: l, textClassName: u = "dial-small-text" }) => {
264
+ let { push: d, close: f } = B(), p = (l ?? []).filter(({ options: e }) => e.length > 0);
265
+ return /* @__PURE__ */ S(b, { children: [
266
+ /* @__PURE__ */ S("div", {
270
267
  className: "flex h-[56px] items-center gap-3 px-4 py-2",
271
- children: [/* @__PURE__ */ b(P, {
268
+ children: [/* @__PURE__ */ x(F, {
272
269
  profile: e,
273
270
  alt: ""
274
- }), /* @__PURE__ */ b(s, {
271
+ }), /* @__PURE__ */ x(s, {
275
272
  text: e.displayName,
276
- className: t(B.mutedText, u, "min-w-0 flex-1 truncate")
273
+ className: t(V.mutedText, u, "min-w-0 flex-1 truncate")
277
274
  })]
278
275
  }),
279
- p.length > 0 && /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("ul", {
276
+ p.length > 0 && /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x("ul", {
280
277
  className: "flex flex-col",
281
- children: p.map((e) => /* @__PURE__ */ b(V, {
278
+ children: p.map((e) => /* @__PURE__ */ x(H, {
282
279
  label: e.label,
283
280
  icon: e.icon,
284
281
  textClassName: u,
285
- trailing: /* @__PURE__ */ b(C, {
282
+ trailing: /* @__PURE__ */ x(w, {
286
283
  size: n,
287
284
  stroke: i,
288
285
  "aria-hidden": !0,
289
- className: t(B.rowIcon, "rtl:scale-x-[-1]")
286
+ className: t(V.rowIcon, "rtl:scale-x-[-1]")
290
287
  }),
291
288
  onClick: () => d({
292
289
  title: e.label,
293
- content: /* @__PURE__ */ b(H, {
290
+ content: /* @__PURE__ */ x(U, {
294
291
  options: e.options,
295
292
  textClassName: u
296
293
  })
297
294
  })
298
295
  }, e.id))
299
- }), /* @__PURE__ */ b("hr", { className: B.divider })] }),
300
- /* @__PURE__ */ x("ul", {
296
+ }), /* @__PURE__ */ x("hr", { className: V.divider })] }),
297
+ /* @__PURE__ */ S("ul", {
301
298
  className: "flex flex-col pb-4",
302
- children: [c && o && /* @__PURE__ */ b(V, {
299
+ children: [c && o && /* @__PURE__ */ x(H, {
303
300
  label: o,
304
301
  textClassName: u,
305
- icon: /* @__PURE__ */ b(T, {
302
+ icon: /* @__PURE__ */ x(E, {
306
303
  size: n,
307
304
  stroke: i,
308
305
  "aria-hidden": !0
@@ -310,10 +307,10 @@ var O = {
310
307
  onClick: () => {
311
308
  f(), c?.();
312
309
  }
313
- }), /* @__PURE__ */ b(V, {
310
+ }), /* @__PURE__ */ x(H, {
314
311
  label: r,
315
312
  textClassName: u,
316
- icon: /* @__PURE__ */ b(w, {
313
+ icon: /* @__PURE__ */ x(T, {
317
314
  size: n,
318
315
  stroke: i,
319
316
  "aria-hidden": !0
@@ -324,26 +321,26 @@ var O = {
324
321
  })]
325
322
  })
326
323
  ] });
327
- }), W = p(({ items: e, onSelectItem: t, profileLabel: r, logOutLabel: a, onLogout: o, settingsLabel: s, onSettings: c, profile: l, groups: u, footer: d, textClassName: f }) => {
328
- let { push: p, close: m } = z(), h = (e) => {
324
+ }), G = m(({ items: e, onSelectItem: t, profileLabel: r, logOutLabel: a, onLogout: o, settingsLabel: s, onSettings: c, profile: l, groups: u, footer: d, textClassName: f }) => {
325
+ let { push: p, close: m } = B(), h = (e) => {
329
326
  m(), t(e);
330
327
  };
331
- return /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ x("ul", {
328
+ return /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ S("ul", {
332
329
  className: "flex flex-col pb-4",
333
- children: [e.map((e) => /* @__PURE__ */ b(V, {
330
+ children: [e.map((e) => /* @__PURE__ */ x(H, {
334
331
  label: e.label,
335
332
  textClassName: f,
336
333
  isCurrent: e.isActive,
337
334
  isHighlighted: e.isActive,
338
- icon: /* @__PURE__ */ b(e.icon, {
335
+ icon: /* @__PURE__ */ x(e.icon, {
339
336
  size: n,
340
337
  stroke: i
341
338
  }),
342
339
  onClick: () => h(e)
343
- }, e.id)), l && /* @__PURE__ */ b(V, {
340
+ }, e.id)), l && /* @__PURE__ */ x(H, {
344
341
  label: r,
345
342
  textClassName: f,
346
- icon: /* @__PURE__ */ b(E, {
343
+ icon: /* @__PURE__ */ x(D, {
347
344
  size: n,
348
345
  stroke: i,
349
346
  "aria-hidden": !0
@@ -351,7 +348,7 @@ var O = {
351
348
  onClick: () => {
352
349
  l && p({
353
350
  title: r,
354
- content: /* @__PURE__ */ b(U, {
351
+ content: /* @__PURE__ */ x(W, {
355
352
  profile: l,
356
353
  groups: u,
357
354
  logOutLabel: a,
@@ -364,8 +361,8 @@ var O = {
364
361
  }
365
362
  })]
366
363
  }), d] });
367
- }), G = p(({ isOpen: n, onClose: r, items: i, onSelectItem: a, labels: o, profile: s, groups: c, onLogout: l, onSettings: u, footer: d, styles: f }) => {
368
- let { colors: p, typography: m, className: h, cssVars: g } = f ?? {}, v = _(() => e({
364
+ }), K = m(({ isOpen: n, onClose: r, items: i, onSelectItem: a, labels: o, profile: s, groups: c, onLogout: l, onSettings: u, footer: d, styles: f }) => {
365
+ let { colors: p, typography: m, className: h, cssVars: g } = f ?? {}, _ = v(() => e({
369
366
  "--np-sheet-text": p?.text,
370
367
  "--np-sheet-item-hover": p?.itemHoverBackground,
371
368
  "--np-sheet-item-active": p?.itemActiveBackground,
@@ -379,18 +376,18 @@ var O = {
379
376
  "--np-menu-active-icon": p?.activeIcon,
380
377
  "--np-font-family": m?.fontFamily
381
378
  }), [p, m?.fontFamily]);
382
- return /* @__PURE__ */ b(R, {
379
+ return /* @__PURE__ */ x(z, {
383
380
  isOpen: n,
384
381
  onClose: r,
385
382
  title: o.title,
386
383
  closeLabel: o.close,
387
384
  backLabel: o.back,
388
- className: t(B.sheet, h),
385
+ className: t(V.sheet, h),
389
386
  style: {
390
387
  ...g,
391
- ...v
388
+ ..._
392
389
  },
393
- children: /* @__PURE__ */ b(W, {
390
+ children: /* @__PURE__ */ x(G, {
394
391
  items: i,
395
392
  onSelectItem: a,
396
393
  profileLabel: o.profile,
@@ -406,4 +403,4 @@ var O = {
406
403
  });
407
404
  });
408
405
  //#endregion
409
- export { N as AvatarInitials, O as NAVIGATION_PANEL_CLASS, R as NavigableBottomSheet, W as NavigationMenuPage, j as NavigationPanel, G as NavigationSheet, H as OptionListPage, U as ProfilePage, V as SheetRow, P as UserAvatar, I as UserMenu, z as useSheetNavigation };
406
+ export { P as AvatarInitials, k as NAVIGATION_PANEL_CLASS, z as NavigableBottomSheet, G as NavigationMenuPage, M as NavigationPanel, K as NavigationSheet, U as OptionListPage, W as ProfilePage, H as SheetRow, F as UserAvatar, L as UserMenu, B 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.148",
4
+ "version": "1.2.0-dev.152",
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.148"
21
+ "@epam/ai-dial-conversation-input": "1.2.0-dev.152"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "react": "^19.2.8",
25
- "@epam/ai-dial-chat-shared": "1.2.0-dev.148",
26
- "@epam/ai-dial-ui-kit": "^0.15.0-dev.18"
25
+ "@epam/ai-dial-chat-shared": "1.2.0-dev.152",
26
+ "@epam/ai-dial-ui-kit": "^0.15.0-dev.19"
27
27
  },
28
28
  "repository": {
29
29
  "type": "git",