@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
|
|
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,
|
|
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
|
|
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,
|
|
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 {
|
|
4
|
-
import { memo as
|
|
5
|
-
import { Fragment as
|
|
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
|
|
7
|
+
var y = /* @__PURE__ */ function(e) {
|
|
8
8
|
return e.Left = "left", e.Right = "right", e;
|
|
9
|
-
}({}),
|
|
9
|
+
}({}), b = {
|
|
10
10
|
wrapper: "_wrapper_1fadt_1",
|
|
11
11
|
header: "_header_1fadt_6",
|
|
12
12
|
resizeHandler: "_resizeHandler_1fadt_10"
|
|
13
|
-
},
|
|
14
|
-
className: n("flex h-12 items-center px-4", i,
|
|
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__ */
|
|
16
|
+
r && /* @__PURE__ */ _("div", {
|
|
17
17
|
className: "flex items-center gap-1",
|
|
18
18
|
children: r
|
|
19
19
|
}),
|
|
20
|
-
/* @__PURE__ */
|
|
20
|
+
/* @__PURE__ */ _(o, {
|
|
21
21
|
text: e,
|
|
22
22
|
className: n("min-w-0 flex-1 truncate", t)
|
|
23
23
|
}),
|
|
24
|
-
a && /* @__PURE__ */
|
|
24
|
+
a && /* @__PURE__ */ _("div", {
|
|
25
25
|
className: "flex items-center gap-1",
|
|
26
26
|
children: a
|
|
27
27
|
})
|
|
28
28
|
]
|
|
29
|
-
})),
|
|
30
|
-
let { colors: P, typography: F, bodyClassName: I, cssVars: L, titleClassName: R, className: z, headerClassName: B } = D ?? {}, V =
|
|
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 =
|
|
36
|
-
|
|
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 =
|
|
43
|
+
let J = d((e) => {
|
|
44
44
|
K(!0), W(e);
|
|
45
|
-
}, []), Y =
|
|
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 ===
|
|
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 ===
|
|
54
|
-
icon: /* @__PURE__ */
|
|
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__ */
|
|
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 ===
|
|
66
|
-
children: /* @__PURE__ */
|
|
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:
|
|
74
|
+
resizeHandlerClassName: b.resizeHandler,
|
|
75
75
|
onResizeStop: Y,
|
|
76
76
|
onResize: J,
|
|
77
|
-
children: /* @__PURE__ */
|
|
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(
|
|
86
|
-
children: [/* @__PURE__ */
|
|
87
|
-
title:
|
|
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:
|
|
91
|
-
rightActions: /* @__PURE__ */
|
|
92
|
-
}), /* @__PURE__ */
|
|
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
|
-
},
|
|
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 {
|
|
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.
|
|
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.
|
|
24
|
-
"react": "^19.
|
|
25
|
-
"@epam/ai-dial-ui-kit": "^0.14.
|
|
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",
|