@epam/ai-dial-sidebar 1.0.0 → 1.0.2

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 (5) hide show
  1. package/components/PanelEmptyState/PanelNoResults.d.ts +4 -4
  2. package/components/PanelEmptyState/PanelNoResults.d.ts.map +1 -1
  3. package/components/SidebarPanel/SidebarPanel.d.ts.map +1 -1
  4. package/index.js +69 -68
  5. package/package.json +2 -2
package/components/PanelEmptyState/PanelNoResults.d.ts CHANGED
@@ -1,12 +1,12 @@
1
- import { IconZoomCancel } from '@tabler/icons-react';
1
+ import { IconFileSad } from '@tabler/icons-react';
2
2
  import { FC } from 'react';
3
3
  /** Props for `PanelNoResults`. */
4
4
  export interface PanelNoResultsProps {
5
5
  /** Primary message shown beneath the icon. */
6
6
  label: string;
7
- /** Icon component rendered above the label. Defaults to `IconZoomCancel`. */
8
- icon?: typeof IconZoomCancel;
9
- /** Icon size in px. Defaults to `45`. */
7
+ /** Icon component rendered above the label. Defaults to `IconFileSad`. */
8
+ icon?: typeof IconFileSad;
9
+ /** Icon size in px. Defaults to `32`. */
10
10
  iconSize?: number;
11
11
  }
12
12
  /** Empty-state block rendered when a search or filter produces no matches. */
package/components/PanelEmptyState/PanelNoResults.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PanelNoResults.d.ts","sourceRoot":"","sources":["../../../src/components/PanelEmptyState/PanelNoResults.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAQ,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEtC,kCAAkC;AAClC,MAAM,WAAW,mBAAmB;IAClC,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,IAAI,CAAC,EAAE,OAAO,cAAc,CAAC;IAC7B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,8EAA8E;AAC9E,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAOlD,CAAC"}
1
+ {"version":3,"file":"PanelNoResults.d.ts","sourceRoot":"","sources":["../../../src/components/PanelEmptyState/PanelNoResults.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAQ,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEtC,kCAAkC;AAClC,MAAM,WAAW,mBAAmB;IAClC,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,WAAW,CAAC;IAC1B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,8EAA8E;AAC9E,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAQlD,CAAC"}
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,CAuL9C,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,113 +1,114 @@
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 { IconMessageCircle as c, IconX as l, IconZoomCancel 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_1t670_1",
11
11
  header: "_header_1t670_6",
12
12
  appear: "_appear_1t670_18",
13
13
  fadeIn: "_fadeIn_1t670_1",
14
14
  resizeHandler: "_resizeHandler_1t670_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: u, 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.Right ? "border-s" : "border-e", Z = a === b.Right ? s.Left : s.Right, Q = C ? /* @__PURE__ */ v(o, {
53
- icon: /* @__PURE__ */ v(l, {
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-sm", !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,
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
88
  leftActions: e && u,
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
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 = c, 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 = u, iconSize: r = 45 }) => /* @__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
109
109
  }),
110
- label: t
110
+ label: t,
111
+ containerClassName: "pt-6"
111
112
  }));
112
113
  //#endregion
113
- 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.0.0",
4
+ "version": "1.0.2",
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.0.0",
20
+ "@epam/ai-dial-chat-shared": "1.0.2",
21
21
  "@tabler/icons-react": "^3.44.0",
22
22
  "react": "^19.0.0",
23
23
  "@epam/ai-dial-ui-kit": "*"