@epam/ai-dial-sidebar 1.2.0-dev.48 → 1.2.0-dev.58

package/components/Header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,wCAAwC;AACxC,MAAM,WAAW,WAAW;IAC1B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mEAAmE;IACnE,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,yEAAyE;AACzE,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA6BlC,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD,wCAAwC;AACxC,MAAM,WAAW,WAAW;IAC1B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mEAAmE;IACnE,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,yEAAyE;AACzE,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA8BlC,CAAC"}

package/components/SidebarPanel/SidebarPanel.d.ts.map

@@ -1 +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,CAgP9C,CAAC"}
+{"version":3,"file":"SidebarPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarPanel/SidebarPanel.tsx"],"names":[],"mappings":"AASA,OAAO,EAML,KAAK,EAAE,EACR,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAKlE,6GAA6G;AAC7G,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAiP9C,CAAC"}

package/constants/public-class-names.d.ts

@@ -0,0 +1,16 @@
+export declare const SIDEBAR_CLASS: {
+    /**
+     * The panel's `<aside role="complementary">` element — the region itself,
+     * not the wrapper around it. The wrapper is where `styles.className` lands,
+     * which is how the libs built on this panel mark themselves:
+     * `@epam/ai-dial-attachment-canvas` puts `dial-attachment-canvas-panel`
+     * there and `@epam/ai-dial-source-panel` puts `dial-source-panel-panel`. A
+     * host targeting one of those panels therefore descends from its class to
+     * this one (`.dial-attachment-canvas-panel .dial-sb-aside`), and sizes or
+     * positions the wrapper rather than the region.
+     */
+    readonly aside: "dial-sb-aside";
+    /** The 48 px header bar rendered by `Header`. */
+    readonly header: "dial-sb-header";
+};
+//# sourceMappingURL=public-class-names.d.ts.map

package/constants/public-class-names.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-class-names.d.ts","sourceRoot":"","sources":["../../src/constants/public-class-names.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,aAAa;IACxB;;;;;;;;;OASG;;IAEH,iDAAiD;;CAEzC,CAAC"}

package/index.d.ts

@@ -1,3 +1,4 @@
+export { SIDEBAR_CLASS } from './constants/public-class-names';
 export { SidebarPanel } from './components/SidebarPanel/SidebarPanel';
 export { PanelEmpty } from './components/PanelEmptyState/PanelEmpty';
 export { PanelNoResults } from './components/PanelEmptyState/PanelNoResults';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC/E,YAAY,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AACvF,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC/E,YAAY,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AACvF,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC"}

package/index.js

@@ -3,15 +3,18 @@ import { ConditionalResizableContainer as r, DIAL_ICON_SIZE as i, DIAL_KIT_ICON_
 import { IconX as l } from "@tabler/icons-react";
 import { memo as u, useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
 import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
-//#region src/types/orientation.ts
-var y = /* @__PURE__ */ function(e) {
+//#region src/constants/public-class-names.ts
+var y = {
+	aside: "dial-sb-aside",
+	header: "dial-sb-header"
+}, b = /* @__PURE__ */ function(e) {
 	return e.Left = "left", e.Right = "right", e;
-}({}), b = {
+}({}), x = {
 	wrapper: "_wrapper_1fadt_1",
 	header: "_header_1fadt_6",
 	resizeHandler: "_resizeHandler_1fadt_10"
-}, x = u(({ title: e, titleClassName: t = "dial-h1-text", leftActions: r, className: i, rightActions: a }) => /* @__PURE__ */ v("div", {
-	className: n("flex h-12 items-center pe-3 ps-6", i, b.header),
+}, S = u(({ title: e, titleClassName: t = "dial-h1-text", leftActions: r, className: i, rightActions: a }) => /* @__PURE__ */ v("div", {
+	className: n("flex h-12 items-center pe-3 ps-6", i, x.header, y.header),
 	children: [
 		r && /* @__PURE__ */ _("div", {
 			className: "flex items-center gap-1",
@@ -26,79 +29,79 @@ var y = /* @__PURE__ */ function(e) {
 			children: a
 		})
 	]
-})), 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 }) => {
-	let { colors: P, typography: F, bodyClassName: I, cssVars: L, titleClassName: R, className: z, headerClassName: B } = D ?? {}, V = p(() => t({
-		"--sb-bg": P?.background,
-		"--sb-border": P?.border,
-		"--sb-text": P?.text,
-		"--sb-resize-handler": P?.resizeHandler
-	}), [P]), H = m(A), [U, W] = h(e ? A : 0), [G, K] = h(!1), q = m(null);
+})), C = ({ isOpen: e, orientation: o, title: u, leftActions: C, rightActions: w, onClose: T, labels: E, children: D, styles: O, resizable: k, isOverlay: A = !1, defaultWidth: j = 360, minWidth: M = 280, maxWidth: N = 600, onResizeStop: P }) => {
+	let { colors: F, typography: I, bodyClassName: L, cssVars: R, titleClassName: z, className: B, headerClassName: V } = O ?? {}, H = p(() => t({
+		"--sb-bg": F?.background,
+		"--sb-border": F?.border,
+		"--sb-text": F?.text,
+		"--sb-resize-handler": F?.resizeHandler
+	}), [F]), U = m(j), [W, G] = h(e ? j : 0), [K, q] = h(!1), J = m(null);
 	f(() => {
-		if (!e) W(A), H.current = A, K(!1), q.current = null;
+		if (!e) G(j), U.current = j, q(!1), J.current = null;
 		else {
-			let e = q.current, t = e?.forDefault === A ? e.width : A;
-			W(t), H.current = t;
+			let e = J.current, t = e?.forDefault === j ? e.width : j;
+			G(t), U.current = t;
 		}
-	}, [e, A]);
-	let J = d((e) => {
-		K(!0), W(e);
-	}, []), Y = d((e) => {
-		q.current = {
-			forDefault: A,
+	}, [e, j]);
+	let Y = d((e) => {
+		q(!0), G(e);
+	}, []), X = d((e) => {
+		J.current = {
+			forDefault: j,
 			width: e
-		}, H.current = e, W(e), K(!1), N?.(e);
-	}, [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 = () => {
-		if (k) return "transition-transform duration-200 ease-in-out motion-reduce:transition-none";
-		if (!G) return "transition-[width] duration-200 ease-in-out motion-reduce:transition-none";
-	}, te = o === y.Left && e ? "border-s" : void 0, ne = o === y.Right ? c.Left : c.Right, re = w ? /* @__PURE__ */ _(s, {
+		}, U.current = e, G(e), q(!1), P?.(e);
+	}, [j, P]), Z = e ? W || U.current : 0, Q = B?.includes("w-full"), $ = !A && !Q, ee = () => e ? "translate-x-0" : o === b.Left ? "ltr:-translate-x-full rtl:translate-x-full" : "ltr:translate-x-full rtl:-translate-x-full", te = () => {
+		if (A) return "transition-transform duration-200 ease-in-out motion-reduce:transition-none";
+		if (!K) return "transition-[width] duration-200 ease-in-out motion-reduce:transition-none";
+	}, ne = o === b.Left && e ? "border-s" : void 0, re = o === b.Right ? c.Left : c.Right, ie = T ? /* @__PURE__ */ _(s, {
 		icon: /* @__PURE__ */ _(l, {
 			size: i.LG,
 			stroke: a,
 			"aria-hidden": !0
 		}),
-		"aria-label": T.closeLabel,
-		tooltipProps: { tooltip: T.closeLabel },
-		onClick: w
+		"aria-label": E.closeLabel,
+		tooltipProps: { tooltip: E.closeLabel },
+		onClick: T
 	}) : null;
 	return /* @__PURE__ */ _("div", {
-		style: Q ? { width: X } : void 0,
-		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),
+		style: $ ? { width: Z } : void 0,
+		className: n("h-full flex-shrink-0 gap-3 overflow-hidden shadow-sm", o === b.Left && "[clip-path:inset(-24px_-24px_-24px_0)] rtl:[clip-path:inset(-24px_0_-24px_-24px)]", te(), "relative z-50", B, A && n("w-full", ee()), x.panel),
 		children: /* @__PURE__ */ _(r, {
-			enabled: (O ?? !1) && e,
-			side: ne,
-			ariaLabel: T.resizeLabel ?? "Resize panel",
-			width: e ? U || H.current : void 0,
-			defaultWidth: A,
-			minWidth: j,
-			maxWidth: M,
-			resizeHandlerClassName: b.resizeHandler,
-			onResizeStop: Y,
-			onResize: J,
+			enabled: (k ?? !1) && e,
+			side: re,
+			ariaLabel: E.resizeLabel ?? "Resize panel",
+			width: e ? W || U.current : void 0,
+			defaultWidth: j,
+			minWidth: M,
+			maxWidth: N,
+			resizeHandlerClassName: x.resizeHandler,
+			onResizeStop: X,
+			onResize: Y,
 			children: /* @__PURE__ */ v("aside", {
 				role: "complementary",
-				"aria-label": T.ariaLabel,
+				"aria-label": E.ariaLabel,
 				inert: !e,
 				style: {
-					...L,
-					...V
+					...R,
+					...H
 				},
-				className: n(b.wrapper, "flex h-full w-full flex-col gap-3", te, F?.fontClassName),
-				children: [/* @__PURE__ */ _(x, {
+				className: n(x.wrapper, "flex h-full w-full flex-col gap-3", ne, I?.fontClassName, y.aside),
+				children: [/* @__PURE__ */ _(S, {
 					title: u,
-					className: B,
-					titleClassName: R,
-					leftActions: S,
-					rightActions: /* @__PURE__ */ v(g, { children: [C, re] })
+					className: V,
+					titleClassName: z,
+					leftActions: C,
+					rightActions: /* @__PURE__ */ v(g, { children: [w, ie] })
 				}), /* @__PURE__ */ _("div", {
-					className: n("flex-1 overflow-y-auto p-4 pt-0", I),
-					children: E
+					className: n("flex-1 overflow-y-auto p-4 pt-0", L),
+					children: D
 				})]
 			})
 		})
 	});
-}, C = u(({ label: t }) => /* @__PURE__ */ _(e, { label: t })), w = u(({ label: t }) => /* @__PURE__ */ _(e, {
+}, w = u(({ label: t }) => /* @__PURE__ */ _(e, { label: t })), T = u(({ label: t }) => /* @__PURE__ */ _(e, {
 	label: t,
 	containerClassName: "pt-6"
 }));
 //#endregion
-export { C as PanelEmpty, w as PanelNoResults, y as SidebarOrientation, S as SidebarPanel };
+export { w as PanelEmpty, T as PanelNoResults, y as SIDEBAR_CLASS, b as SidebarOrientation, C as SidebarPanel };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-sidebar",
   "description": "Resizable sidebar panel shell with header, search, and empty state components",
-  "version": "1.2.0-dev.48",
+  "version": "1.2.0-dev.58",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -20,9 +20,9 @@
     "@tabler/icons-react": "^3.44.0"
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.2.0-dev.48",
+    "@epam/ai-dial-chat-shared": "1.2.0-dev.58",
     "react": "^19.2.8",
-    "@epam/ai-dial-ui-kit": "^0.15.0-dev.7"
+    "@epam/ai-dial-ui-kit": "^0.15.0-dev.9"
   },
   "repository": {
     "type": "git",