@epam/ai-dial-sidebar 1.1.0-dev.297 → 1.1.0-dev.299

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 (3) hide show
  1. package/components/SidebarPanel/SidebarPanel.d.ts.map +1 -1
  2. package/index.js +68 -68
  3. package/package.json +2 -2
package/components/SidebarPanel/SidebarPanel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SidebarPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarPanel/SidebarPanel.tsx"],"names":[],"mappings":"AAQA,OAAO,EAML,KAAK,EAAE,EACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAKlE,6GAA6G;AAC7G,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAiM9C,CAAC"}
1
+ {"version":3,"file":"SidebarPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarPanel/SidebarPanel.tsx"],"names":[],"mappings":"AASA,OAAO,EAML,KAAK,EAAE,EACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAKlE,6GAA6G;AAC7G,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAuM9C,CAAC"}
package/index.js CHANGED
@@ -1,108 +1,108 @@
1
1
  import { PanelEmptyState as e, buildCssVars as t, mergeClasses as n } from "@epam/ai-dial-chat-shared";
2
- import { DIAL_ICON_SIZE as r, DialConditionalResizableContainer as i, EllipsisTooltip as a, GhostIconButton as o, ResizableContainerSide as s } from "@epam/ai-dial-ui-kit";
3
- import { IconFileSad as c, IconMessageCircle as l, IconX as u } from "@tabler/icons-react";
4
- import { memo as d, useCallback as f, useEffect as p, useMemo as m, useRef as h, useState as g } from "react";
5
- import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
2
+ import { DIAL_ICON_SIZE as r, DIAL_KIT_ICON_STROKE as i, DialConditionalResizableContainer as a, EllipsisTooltip as o, GhostIconButton as s, ResizableContainerSide as c } from "@epam/ai-dial-ui-kit";
3
+ import { IconFileSad as l, IconMessageCircle as u, IconX as d } from "@tabler/icons-react";
4
+ import { memo as f, useCallback as p, useEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
5
+ import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
6
6
  //#region src/types/orientation.ts
7
- var b = /* @__PURE__ */ function(e) {
7
+ var x = /* @__PURE__ */ function(e) {
8
8
  return e.Left = "left", e.Right = "right", e;
9
- }({}), x = {
9
+ }({}), S = {
10
10
  wrapper: "_wrapper_1civp_1",
11
11
  header: "_header_1civp_6",
12
12
  appear: "_appear_1civp_18",
13
13
  fadeIn: "_fadeIn_1civp_1",
14
14
  resizeHandler: "_resizeHandler_1civp_22"
15
- }, S = d(({ title: e, titleClassName: t = "dial-h1-text", leftActions: r, className: i, rightActions: o }) => /* @__PURE__ */ y("div", {
16
- className: n("flex h-12 items-center px-4", i, x.header),
15
+ }, C = f(({ title: e, titleClassName: t = "dial-h1-text", leftActions: r, className: i, rightActions: a }) => /* @__PURE__ */ b("div", {
16
+ className: n("flex h-12 items-center px-4", i, S.header),
17
17
  children: [
18
- r && /* @__PURE__ */ v("div", {
18
+ r && /* @__PURE__ */ y("div", {
19
19
  className: "flex items-center gap-1",
20
20
  children: r
21
21
  }),
22
- /* @__PURE__ */ v(a, {
22
+ /* @__PURE__ */ y(o, {
23
23
  text: e,
24
24
  className: n("min-w-0 flex-1 truncate", t)
25
25
  }),
26
- o && /* @__PURE__ */ v("div", {
26
+ a && /* @__PURE__ */ y("div", {
27
27
  className: "flex items-center gap-1",
28
- children: o
28
+ children: a
29
29
  })
30
30
  ]
31
- })), C = ({ isOpen: e, orientation: a, title: c, leftActions: l, rightActions: d, onClose: C, labels: w, children: T, styles: E, resizable: D, defaultWidth: O = 360, minWidth: k = 280, maxWidth: A = 600, onResizeStop: j }) => {
32
- let { colors: M, typography: N, bodyClassName: P, cssVars: F, titleClassName: I, className: L, headerClassName: R } = E ?? {}, z = m(() => t({
33
- "--sb-bg": M?.background,
34
- "--sb-border": M?.border,
35
- "--sb-text": M?.text,
36
- "--sb-resize-handler": M?.resizeHandler
37
- }), [M]), B = h(O), [V, H] = g(e ? O : 0), [U, W] = g(!1), G = h(null);
38
- p(() => {
39
- if (!e) H(O), B.current = O, W(!1), G.current = null;
31
+ })), w = ({ isOpen: e, orientation: o, title: l, leftActions: u, rightActions: f, onClose: w, labels: T, children: E, styles: D, resizable: O, defaultWidth: k = 360, minWidth: A = 280, maxWidth: j = 600, onResizeStop: M }) => {
32
+ let { colors: N, typography: P, bodyClassName: F, cssVars: I, titleClassName: L, className: R, headerClassName: z } = D ?? {}, B = h(() => t({
33
+ "--sb-bg": N?.background,
34
+ "--sb-border": N?.border,
35
+ "--sb-text": N?.text,
36
+ "--sb-resize-handler": N?.resizeHandler
37
+ }), [N]), V = g(k), [H, U] = _(e ? k : 0), [W, G] = _(!1), K = g(null);
38
+ m(() => {
39
+ if (!e) U(k), V.current = k, G(!1), K.current = null;
40
40
  else {
41
- let e = G.current, t = e?.forDefault === O ? e.width : O;
42
- H(t), B.current = t;
41
+ let e = K.current, t = e?.forDefault === k ? e.width : k;
42
+ U(t), V.current = t;
43
43
  }
44
- }, [e, O]);
45
- let K = f((e) => {
46
- W(!0), H(e);
47
- }, []), q = f((e) => {
48
- G.current = {
49
- forDefault: O,
44
+ }, [e, k]);
45
+ let q = p((e) => {
46
+ G(!0), U(e);
47
+ }, []), J = p((e) => {
48
+ K.current = {
49
+ forDefault: k,
50
50
  width: e
51
- }, B.current = e, H(e), W(!1), j?.(e);
52
- }, [O, j]), J = e ? V || B.current : 0, Y = L?.includes("w-full"), X = a === b.Left && e ? "border-s" : void 0, Z = a === b.Right ? s.Left : s.Right, Q = C ? /* @__PURE__ */ v(o, {
53
- icon: /* @__PURE__ */ v(u, {
51
+ }, V.current = e, U(e), G(!1), M?.(e);
52
+ }, [k, M]), Y = e ? H || V.current : 0, X = R?.includes("w-full"), Z = o === x.Left && e ? "border-s" : void 0, Q = o === x.Right ? c.Left : c.Right, $ = w ? /* @__PURE__ */ y(s, {
53
+ icon: /* @__PURE__ */ y(d, {
54
54
  size: r.LG,
55
- stroke: 1.5,
55
+ stroke: i,
56
56
  "aria-hidden": !0
57
57
  }),
58
- "aria-label": w.closeLabel,
59
- tooltipProps: { tooltip: w.closeLabel },
60
- onClick: C
58
+ "aria-label": T.closeLabel,
59
+ tooltipProps: { tooltip: T.closeLabel },
60
+ onClick: w
61
61
  }) : null;
62
- return /* @__PURE__ */ v("div", {
63
- style: Y ? void 0 : { width: J },
64
- className: n("h-full flex-shrink-0 gap-3 overflow-hidden shadow-md", a === b.Left && "[clip-path:inset(-24px_-24px_-24px_0)] rtl:[clip-path:inset(-24px_0_-24px_-24px)]", !U && "transition-[width] duration-200 ease-in-out", e && "relative z-50", L, x.panel),
65
- children: /* @__PURE__ */ v(i, {
66
- enabled: (D ?? !1) && e,
67
- side: Z,
68
- width: e ? V || B.current : void 0,
69
- defaultWidth: O,
70
- minWidth: k,
71
- maxWidth: A,
72
- resizeHandlerClassName: x.resizeHandler,
73
- onResizeStop: q,
74
- onResize: K,
75
- children: /* @__PURE__ */ y("aside", {
62
+ return /* @__PURE__ */ y("div", {
63
+ style: X ? void 0 : { width: Y },
64
+ className: n("h-full flex-shrink-0 gap-3 overflow-hidden shadow-sm", o === x.Left && "[clip-path:inset(-24px_-24px_-24px_0)] rtl:[clip-path:inset(-24px_0_-24px_-24px)]", !W && "transition-[width] duration-200 ease-in-out", e && "relative z-50", R, S.panel),
65
+ children: /* @__PURE__ */ y(a, {
66
+ enabled: (O ?? !1) && e,
67
+ side: Q,
68
+ width: e ? H || V.current : void 0,
69
+ defaultWidth: k,
70
+ minWidth: A,
71
+ maxWidth: j,
72
+ resizeHandlerClassName: S.resizeHandler,
73
+ onResizeStop: J,
74
+ onResize: q,
75
+ children: /* @__PURE__ */ b("aside", {
76
76
  role: "complementary",
77
- "aria-label": w.ariaLabel,
77
+ "aria-label": T.ariaLabel,
78
78
  inert: !e,
79
79
  style: {
80
- ...F,
81
- ...z
80
+ ...I,
81
+ ...B
82
82
  },
83
- className: n(x.wrapper, "flex h-full w-full flex-col gap-3", e && x.appear, X, N?.fontClassName),
84
- children: [/* @__PURE__ */ v(S, {
85
- title: c,
86
- className: R,
87
- titleClassName: I,
88
- leftActions: e && l,
89
- rightActions: e && /* @__PURE__ */ y(_, { children: [d, Q] })
90
- }), /* @__PURE__ */ v("div", {
91
- className: n("flex-1 overflow-y-auto p-4 pt-0", P),
92
- children: T
83
+ className: n(S.wrapper, "flex h-full w-full flex-col gap-3", e && S.appear, Z, P?.fontClassName),
84
+ children: [/* @__PURE__ */ y(C, {
85
+ title: l,
86
+ className: z,
87
+ titleClassName: L,
88
+ leftActions: e && u,
89
+ rightActions: e && /* @__PURE__ */ b(v, { children: [f, $] })
90
+ }), /* @__PURE__ */ y("div", {
91
+ className: n("flex-1 overflow-y-auto p-4 pt-0", F),
92
+ children: E
93
93
  })]
94
94
  })
95
95
  })
96
96
  });
97
- }, w = d(({ label: t, icon: n = l, iconSize: r = 48 }) => /* @__PURE__ */ v(e, {
98
- icon: /* @__PURE__ */ v(n, {
97
+ }, T = f(({ label: t, icon: n = u, iconSize: r = 48 }) => /* @__PURE__ */ y(e, {
98
+ icon: /* @__PURE__ */ y(n, {
99
99
  "aria-hidden": !0,
100
100
  size: r,
101
101
  stroke: 1
102
102
  }),
103
103
  label: t
104
- })), T = d(({ label: t, icon: n = c, iconSize: r = 32 }) => /* @__PURE__ */ v(e, {
105
- icon: /* @__PURE__ */ v(n, {
104
+ })), E = f(({ label: t, icon: n = l, iconSize: r = 32 }) => /* @__PURE__ */ y(e, {
105
+ icon: /* @__PURE__ */ y(n, {
106
106
  "aria-hidden": !0,
107
107
  size: r,
108
108
  stroke: 1
@@ -111,4 +111,4 @@ var b = /* @__PURE__ */ function(e) {
111
111
  containerClassName: "pt-6"
112
112
  }));
113
113
  //#endregion
114
- export { w as PanelEmpty, T as PanelNoResults, b as SidebarOrientation, C as SidebarPanel };
114
+ export { T as PanelEmpty, E as PanelNoResults, x as SidebarOrientation, w as SidebarPanel };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-sidebar",
3
3
  "description": "Resizable sidebar panel shell with header, search, and empty state components",
4
- "version": "1.1.0-dev.297",
4
+ "version": "1.1.0-dev.299",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "./index.js",
@@ -17,7 +17,7 @@
17
17
  }
18
18
  },
19
19
  "peerDependencies": {
20
- "@epam/ai-dial-chat-shared": "1.1.0-dev.297",
20
+ "@epam/ai-dial-chat-shared": "1.1.0-dev.299",
21
21
  "@tabler/icons-react": "^3.44.0",
22
22
  "react": "^19.0.0",
23
23
  "@epam/ai-dial-ui-kit": "*"