@epam/ai-dial-sidebar 1.1.0-dev.475 → 1.1.0-dev.481

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.
@@ -1,13 +1,8 @@
1
- import { IconMessageCircle } from '@tabler/icons-react';
2
1
  import { FC } from 'react';
3
2
  /** Props for `PanelEmpty`. */
4
3
  export interface PanelEmptyProps {
5
- /** Primary message shown beneath the icon. */
4
+ /** Primary message of the empty state. */
6
5
  label: string;
7
- /** Icon component rendered above the label. Defaults to `IconMessageCircle`. */
8
- icon?: typeof IconMessageCircle;
9
- /** Icon size in px. Defaults to `48`. */
10
- iconSize?: number;
11
6
  }
12
7
  /** Empty-state block rendered when a panel has no items at all. */
13
8
  export declare const PanelEmpty: FC<PanelEmptyProps>;
@@ -1 +1 @@
1
- {"version":3,"file":"PanelEmpty.d.ts","sourceRoot":"","sources":["../../../src/components/PanelEmptyState/PanelEmpty.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAQ,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEtC,8BAA8B;AAC9B,MAAM,WAAW,eAAe;IAC9B,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,IAAI,CAAC,EAAE,OAAO,iBAAiB,CAAC;IAChC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,mEAAmE;AACnE,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAO1C,CAAC"}
1
+ {"version":3,"file":"PanelEmpty.d.ts","sourceRoot":"","sources":["../../../src/components/PanelEmptyState/PanelEmpty.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEtC,8BAA8B;AAC9B,MAAM,WAAW,eAAe;IAC9B,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;CACf;AAED,mEAAmE;AACnE,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAEzC,CAAC"}
@@ -1,13 +1,8 @@
1
- import { IconFileSad } from '@tabler/icons-react';
2
1
  import { FC } from 'react';
3
2
  /** Props for `PanelNoResults`. */
4
3
  export interface PanelNoResultsProps {
5
- /** Primary message shown beneath the icon. */
4
+ /** Primary message of the empty state. */
6
5
  label: string;
7
- /** Icon component rendered above the label. Defaults to `IconFileSad`. */
8
- icon?: typeof IconFileSad;
9
- /** Icon size in px. Defaults to `32`. */
10
- iconSize?: number;
11
6
  }
12
7
  /** Empty-state block rendered when a search or filter produces no matches. */
13
8
  export declare const PanelNoResults: FC<PanelNoResultsProps>;
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"PanelNoResults.d.ts","sourceRoot":"","sources":["../../../src/components/PanelEmptyState/PanelNoResults.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEtC,kCAAkC;AAClC,MAAM,WAAW,mBAAmB;IAClC,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;CACf;AAED,8EAA8E;AAC9E,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAEjD,CAAC"}
package/index.js CHANGED
@@ -1,57 +1,57 @@
1
1
  import { PanelEmptyState as e, buildCssVars as t, mergeClasses as n } from "@epam/ai-dial-chat-shared";
2
2
  import { ConditionalResizableContainer as r, DIAL_ICON_SIZE as i, DIAL_KIT_ICON_STROKE 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";
3
+ import { IconX as l } from "@tabler/icons-react";
4
+ import { memo as u, useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
5
+ import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
6
6
  //#region src/types/orientation.ts
7
- var x = /* @__PURE__ */ function(e) {
7
+ var y = /* @__PURE__ */ function(e) {
8
8
  return e.Left = "left", e.Right = "right", e;
9
- }({}), S = {
9
+ }({}), b = {
10
10
  wrapper: "_wrapper_1fadt_1",
11
11
  header: "_header_1fadt_6",
12
12
  resizeHandler: "_resizeHandler_1fadt_10"
13
- }, C = f(({ title: e, titleClassName: t = "dial-h1-text", leftActions: r, className: i, rightActions: a }) => /* @__PURE__ */ b("div", {
14
- className: n("flex h-12 items-center px-4", i, S.header),
13
+ }, x = u(({ title: e, titleClassName: t = "dial-h1-text", leftActions: r, className: i, rightActions: a }) => /* @__PURE__ */ v("div", {
14
+ className: n("flex h-12 items-center px-4", i, b.header),
15
15
  children: [
16
- r && /* @__PURE__ */ y("div", {
16
+ r && /* @__PURE__ */ _("div", {
17
17
  className: "flex items-center gap-1",
18
18
  children: r
19
19
  }),
20
- /* @__PURE__ */ y(o, {
20
+ /* @__PURE__ */ _(o, {
21
21
  text: e,
22
22
  className: n("min-w-0 flex-1 truncate", t)
23
23
  }),
24
- a && /* @__PURE__ */ y("div", {
24
+ a && /* @__PURE__ */ _("div", {
25
25
  className: "flex items-center gap-1",
26
26
  children: a
27
27
  })
28
28
  ]
29
- })), w = ({ isOpen: e, orientation: o, title: l, leftActions: u, rightActions: f, onClose: w, labels: T, children: E, styles: D, resizable: O, isOverlay: k = !1, defaultWidth: A = 360, minWidth: j = 280, maxWidth: M = 600, onResizeStop: N }) => {
30
- let { colors: P, typography: F, bodyClassName: I, cssVars: L, titleClassName: R, className: z, headerClassName: B } = D ?? {}, V = h(() => t({
29
+ })), S = ({ isOpen: e, orientation: o, title: u, leftActions: S, rightActions: C, onClose: w, labels: T, children: E, styles: D, resizable: O, isOverlay: k = !1, defaultWidth: A = 360, minWidth: j = 280, maxWidth: M = 600, onResizeStop: N }) => {
30
+ let { colors: P, typography: F, bodyClassName: I, cssVars: L, titleClassName: R, className: z, headerClassName: B } = D ?? {}, V = p(() => t({
31
31
  "--sb-bg": P?.background,
32
32
  "--sb-border": P?.border,
33
33
  "--sb-text": P?.text,
34
34
  "--sb-resize-handler": P?.resizeHandler
35
- }), [P]), H = g(A), [U, W] = _(e ? A : 0), [G, K] = _(!1), q = g(null);
36
- m(() => {
35
+ }), [P]), H = m(A), [U, W] = h(e ? A : 0), [G, K] = h(!1), q = m(null);
36
+ f(() => {
37
37
  if (!e) W(A), H.current = A, K(!1), q.current = null;
38
38
  else {
39
39
  let e = q.current, t = e?.forDefault === A ? e.width : A;
40
40
  W(t), H.current = t;
41
41
  }
42
42
  }, [e, A]);
43
- let J = p((e) => {
43
+ let J = d((e) => {
44
44
  K(!0), W(e);
45
- }, []), Y = p((e) => {
45
+ }, []), Y = d((e) => {
46
46
  q.current = {
47
47
  forDefault: A,
48
48
  width: e
49
49
  }, H.current = e, W(e), K(!1), N?.(e);
50
- }, [A, N]), X = e ? U || H.current : 0, Z = z?.includes("w-full"), Q = !k && !Z, $ = () => e ? "translate-x-0" : o === x.Left ? "ltr:-translate-x-full rtl:translate-x-full" : "ltr:translate-x-full rtl:-translate-x-full", ee = () => {
50
+ }, [A, N]), X = e ? U || H.current : 0, Z = z?.includes("w-full"), Q = !k && !Z, $ = () => e ? "translate-x-0" : o === y.Left ? "ltr:-translate-x-full rtl:translate-x-full" : "ltr:translate-x-full rtl:-translate-x-full", ee = () => {
51
51
  if (k) return "transition-transform duration-200 ease-in-out motion-reduce:transition-none";
52
52
  if (!G) return "transition-[width] duration-200 ease-in-out motion-reduce:transition-none";
53
- }, te = o === x.Left && e ? "border-s" : void 0, ne = o === x.Right ? c.Left : c.Right, re = w ? /* @__PURE__ */ y(s, {
54
- icon: /* @__PURE__ */ y(d, {
53
+ }, te = o === y.Left && e ? "border-s" : void 0, ne = o === y.Right ? c.Left : c.Right, re = w ? /* @__PURE__ */ _(s, {
54
+ icon: /* @__PURE__ */ _(l, {
55
55
  size: i.LG,
56
56
  stroke: a,
57
57
  "aria-hidden": !0
@@ -60,10 +60,10 @@ var x = /* @__PURE__ */ function(e) {
60
60
  tooltipProps: { tooltip: T.closeLabel },
61
61
  onClick: w
62
62
  }) : null;
63
- return /* @__PURE__ */ y("div", {
63
+ return /* @__PURE__ */ _("div", {
64
64
  style: Q ? { width: X } : void 0,
65
- 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)]", ee(), "relative z-50", z, k && n("w-full", $()), S.panel),
66
- children: /* @__PURE__ */ y(r, {
65
+ className: n("h-full flex-shrink-0 gap-3 overflow-hidden shadow-sm", o === y.Left && "[clip-path:inset(-24px_-24px_-24px_0)] rtl:[clip-path:inset(-24px_0_-24px_-24px)]", ee(), "relative z-50", z, k && n("w-full", $()), b.panel),
66
+ children: /* @__PURE__ */ _(r, {
67
67
  enabled: (O ?? !1) && e,
68
68
  side: ne,
69
69
  ariaLabel: T.resizeLabel ?? "Resize panel",
@@ -71,10 +71,10 @@ var x = /* @__PURE__ */ function(e) {
71
71
  defaultWidth: A,
72
72
  minWidth: j,
73
73
  maxWidth: M,
74
- resizeHandlerClassName: S.resizeHandler,
74
+ resizeHandlerClassName: b.resizeHandler,
75
75
  onResizeStop: Y,
76
76
  onResize: J,
77
- children: /* @__PURE__ */ b("aside", {
77
+ children: /* @__PURE__ */ v("aside", {
78
78
  role: "complementary",
79
79
  "aria-label": T.ariaLabel,
80
80
  inert: !e,
@@ -82,35 +82,23 @@ var x = /* @__PURE__ */ function(e) {
82
82
  ...L,
83
83
  ...V
84
84
  },
85
- className: n(S.wrapper, "flex h-full w-full flex-col gap-3", te, F?.fontClassName),
86
- children: [/* @__PURE__ */ y(C, {
87
- title: l,
85
+ className: n(b.wrapper, "flex h-full w-full flex-col gap-3", te, F?.fontClassName),
86
+ children: [/* @__PURE__ */ _(x, {
87
+ title: u,
88
88
  className: B,
89
89
  titleClassName: R,
90
- leftActions: u,
91
- rightActions: /* @__PURE__ */ b(v, { children: [f, re] })
92
- }), /* @__PURE__ */ y("div", {
90
+ leftActions: S,
91
+ rightActions: /* @__PURE__ */ v(g, { children: [C, re] })
92
+ }), /* @__PURE__ */ _("div", {
93
93
  className: n("flex-1 overflow-y-auto p-4 pt-0", I),
94
94
  children: E
95
95
  })]
96
96
  })
97
97
  })
98
98
  });
99
- }, T = f(({ label: t, icon: n = u, iconSize: r = 48 }) => /* @__PURE__ */ y(e, {
100
- icon: /* @__PURE__ */ y(n, {
101
- "aria-hidden": !0,
102
- size: r,
103
- stroke: 1
104
- }),
105
- label: t
106
- })), E = f(({ label: t, icon: n = l, iconSize: r = 32 }) => /* @__PURE__ */ y(e, {
107
- icon: /* @__PURE__ */ y(n, {
108
- "aria-hidden": !0,
109
- size: r,
110
- stroke: 1
111
- }),
99
+ }, C = u(({ label: t }) => /* @__PURE__ */ _(e, { label: t })), w = u(({ label: t }) => /* @__PURE__ */ _(e, {
112
100
  label: t,
113
101
  containerClassName: "pt-6"
114
102
  }));
115
103
  //#endregion
116
- export { T as PanelEmpty, E as PanelNoResults, x as SidebarOrientation, w as SidebarPanel };
104
+ export { C as PanelEmpty, w as PanelNoResults, y as SidebarOrientation, S 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.475",
4
+ "version": "1.1.0-dev.481",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "./index.js",
@@ -20,9 +20,9 @@
20
20
  "@tabler/icons-react": "^3.44.0"
21
21
  },
22
22
  "peerDependencies": {
23
- "@epam/ai-dial-chat-shared": "1.1.0-dev.475",
24
- "react": "^19.0.0",
25
- "@epam/ai-dial-ui-kit": "^0.14.0-dev.15"
23
+ "@epam/ai-dial-chat-shared": "1.1.0-dev.481",
24
+ "react": "^19.2.8",
25
+ "@epam/ai-dial-ui-kit": "^0.14.2"
26
26
  },
27
27
  "repository": {
28
28
  "type": "git",