@epam/ai-dial-sidebar 1.0.0-dev.512 → 1.0.0-dev.514

package/index.js

@@ -52296,7 +52296,7 @@ b(({ icon: e, label: t, colors: n }) => /* @__PURE__ */ j("div", {
 	}),
 	children: /* @__PURE__ */ j(Uo, {
 		title: t,
-		icon: /* @__PURE__ */ j("span", {
+		icon: e && /* @__PURE__ */ j("span", {
 			className: FB.icon,
 			children: e
 		}),
@@ -76013,9 +76013,9 @@ var L4 = 2e3, R4 = (e, t = L4) => {
 		})]
 	});
 }), q4 = {
-	thinking: "_thinking_1mmkt_16",
-	"cm-shimmer": "_cm-shimmer_1mmkt_1",
-	secondaryBorder: "_secondaryBorder_1mmkt_25"
+	thinking: "_thinking_1b9r7_9",
+	"cm-shimmer": "_cm-shimmer_1b9r7_1",
+	secondaryBorder: "_secondaryBorder_1b9r7_18"
 }, J4 = 1, Y4 = () => {
 	let e = O(null), t = O(null), [n, r] = k(!1), [i, a] = k(!1), o = x(() => {
 		let n = e.current, i = t.current;
@@ -76037,29 +76037,38 @@ var L4 = 2e3, R4 = (e, t = L4) => {
 		handleScroll: o
 	};
 }, X4 = {
-	scrollContainer: "_scrollContainer_1bv91_1",
-	tableScrollFadeEnd: "_tableScrollFadeEnd_1bv91_17",
-	tableScrollFadeStart: "_tableScrollFadeStart_1bv91_25",
-	tableScrollFadeBoth: "_tableScrollFadeBoth_1bv91_33"
-}, Z4 = b(({ children: e, classNames: t, colors: n }) => {
-	let { scrollContainerRef: r, tableRef: i, hasContentBeyondStart: a, hasContentBeyondEnd: o, handleScroll: s } = Y4();
+	tableContainer: "_tableContainer_g3hpg_1",
+	tableContainerLight: "_tableContainerLight_g3hpg_6",
+	scrollContainer: "_scrollContainer_g3hpg_10",
+	tableHeaderCell: "_tableHeaderCell_g3hpg_25",
+	sectionRow: "_sectionRow_g3hpg_29",
+	row: "_row_g3hpg_33",
+	rowDivider: "_rowDivider_g3hpg_37",
+	tableScrollFadeEnd: "_tableScrollFadeEnd_g3hpg_45",
+	tableScrollFadeStart: "_tableScrollFadeStart_g3hpg_53",
+	tableScrollFadeBoth: "_tableScrollFadeBoth_g3hpg_61"
+}, Z4 = b(({ children: e, classNames: t, colors: n, scrollRegionAriaLabel: r = "Scrollable table" }) => {
+	let { scrollContainerRef: i, tableRef: a, hasContentBeyondStart: o, hasContentBeyondEnd: s, handleScroll: c } = Y4(), l = DB({
+		"--cm-markdown-border": n?.border,
+		"--cm-table-scrollbar": n?.scrollbar,
+		"--cm-table-fade": n?.fade
+	}), u = o || s;
 	return /* @__PURE__ */ j("div", {
-		style: DB({
-			"--cm-markdown-border": n?.border,
-			"--cm-table-scrollbar": n?.scrollbar,
-			"--cm-table-fade": n?.fade
-		}),
-		className: EB("relative w-full min-w-0 max-w-full overflow-hidden", t.tableWrapper),
+		style: l,
+		className: EB("relative w-full min-w-0 max-w-full overflow-hidden rounded-xl border", X4.tableContainer, X4.tableContainerLight, t.tableWrapper),
 		children: /* @__PURE__ */ j("div", {
-			ref: r,
-			className: EB("w-full min-w-0 max-w-full overflow-x-auto rounded border", X4.scrollContainer, {
-				[X4.tableScrollFadeBoth]: a && o,
-				[X4.tableScrollFadeStart]: a && !o,
-				[X4.tableScrollFadeEnd]: !a && o
+			ref: i,
+			className: EB("w-full min-w-0 max-w-full overflow-x-auto", X4.scrollContainer, {
+				[X4.tableScrollFadeBoth]: o && s,
+				[X4.tableScrollFadeStart]: o && !s,
+				[X4.tableScrollFadeEnd]: !o && s
 			}),
-			onScroll: s,
+			onScroll: c,
+			role: u ? "region" : void 0,
+			"aria-label": u ? r : void 0,
+			tabIndex: u ? 0 : void 0,
 			children: /* @__PURE__ */ j("table", {
-				ref: i,
+				ref: a,
 				className: EB("w-max min-w-full border-collapse", t.tableFont ?? "text-sm"),
 				children: e
 			})
@@ -76075,7 +76084,7 @@ var L4 = 2e3, R4 = (e, t = L4) => {
 }), $4 = [xX], e3 = {}, t3 = { li: ({ children: e }) => /* @__PURE__ */ j("li", {
 	className: "mb-1.5 last:mb-0",
 	children: e
-}) }, n3 = (e, t, n, r, i) => ({
+}) }, n3 = (e) => e ? e.type === "text" ? e.value ?? "" : (e.children ?? []).map(n3).join("") : "", r3 = (e, t, n, r, i, a) => ({
 	h1: ({ children: t }) => /* @__PURE__ */ j("h1", {
 		className: e.h1,
 		children: t
@@ -76157,23 +76166,32 @@ var L4 = 2e3, R4 = (e, t = L4) => {
 	input: ({ type: e, checked: t }) => e === "checkbox" ? /* @__PURE__ */ j(Q4, { checked: t ?? !1 }) : null,
 	table: ({ children: t }) => /* @__PURE__ */ j(Z4, {
 		classNames: e,
+		scrollRegionAriaLabel: a,
 		children: t
 	}),
+	tr: ({ children: e, node: t }) => {
+		let n = t?.children.filter((e) => e.type === "element") ?? [], r = n.some((e) => e.tagName === "th"), i = n.filter((e) => n3(e).trim().length > 0).length, a = !r && n.length > 1 && i === 1;
+		return /* @__PURE__ */ j("tr", {
+			className: EB(X4.row, a && X4.sectionRow),
+			children: e
+		});
+	},
 	th: ({ children: t }) => /* @__PURE__ */ j("th", {
-		className: EB("max-w-96 whitespace-normal break-words border-b px-3 py-2.5 text-start text-secondary", q4.secondaryBorder, e.tableHeaderFont ?? "font-semibold", e.tableCell, e.tableHeader),
+		scope: "col",
+		className: EB("sticky top-0 z-[2] max-w-96 whitespace-normal break-words border-b px-3 py-2.5 text-start [overflow-wrap:anywhere]", X4.rowDivider, X4.tableHeaderCell, e.tableHeaderFont ?? "dial-tiny-semi-text uppercase tracking-wider text-secondary", e.tableCell, e.tableHeader),
 		children: t
 	}),
 	td: ({ children: t }) => /* @__PURE__ */ j("td", {
-		className: EB("max-w-96 whitespace-normal break-words border-b px-3 py-2.5 align-top", q4.secondaryBorder, e.tableBodyCell, e.tableCell),
+		className: EB("max-w-96 whitespace-normal break-words border-b px-3 py-2.5 align-top [overflow-wrap:anywhere]", X4.rowDivider, e.tableBodyCell, e.tableCell),
 		children: t
 	})
-}), r3 = b(({ content: e, isStreaming: t, streamCharactersPerSecond: n, classNames: r = e3, components: i, thinkingLabel: a = "Thinking", codeBlockCopyLabel: o, codeBlockCopiedLabel: s, codeBlockTheme: c, colors: l }) => {
-	let u = OX(e, t, n), d = DB({
+}), i3 = b(({ content: e, isStreaming: t, streamCharactersPerSecond: n, classNames: r = e3, components: i, thinkingLabel: a = "Thinking", codeBlockCopyLabel: o, codeBlockCopiedLabel: s, codeBlockTheme: c, colors: l, tableScrollRegionAriaLabel: u }) => {
+	let d = OX(e, t, n), f = DB({
 		"--cm-thinking-inverted": l?.thinkingPrimary,
 		"--cm-thinking-secondary": l?.thinkingSecondary,
 		"--cm-markdown-border": l?.border
-	}), f = D(() => ({
-		...n3(r, t, o, s, c),
+	}), p = D(() => ({
+		...r3(r, t, o, s, c, u),
 		...t3,
 		...i
 	}), [
@@ -76182,21 +76200,22 @@ var L4 = 2e3, R4 = (e, t = L4) => {
 		o,
 		s,
 		c,
+		u,
 		i
 	]);
-	return t && !u ? /* @__PURE__ */ j("span", {
+	return t && !d ? /* @__PURE__ */ j("span", {
 		className: q4.thinking,
-		style: d,
+		style: f,
 		children: a
 	}) : /* @__PURE__ */ j("div", {
-		style: d,
+		style: f,
 		children: /* @__PURE__ */ j(_q, {
 			remarkPlugins: $4,
-			components: f,
-			children: u
+			components: p,
+			children: d
 		})
 	});
-}), i3 = {
+}), a3 = {
 	h1: "dial-h1-text mb-3 mt-6 first:mt-0 [text-wrap:balance]",
 	h2: "dial-h2-text mb-2 mt-5 first:mt-0 [text-wrap:balance]",
 	h3: "dial-h3-text mb-2 mt-4 first:mt-0 [text-wrap:balance]",
@@ -76209,11 +76228,9 @@ var L4 = 2e3, R4 = (e, t = L4) => {
 	codeInline: "mx-0.5 bg-layer-3 px-1.5 text-[0.875em] text-primary break-words [overflow-wrap:anywhere]",
 	blockquote: "my-4",
 	link: "break-words [overflow-wrap:anywhere]",
-	tableWrapper: "my-4",
-	tableHeader: "bg-layer-3",
-	tableBodyCell: "bg-layer-2"
+	tableWrapper: "my-4"
 };
-b(({ content: e, isStreaming: t, thinkingLabel: n, components: r, codeBlockCopyLabel: i, codeBlockCopiedLabel: a, codeBlockTheme: o }) => /* @__PURE__ */ j(r3, {
+b(({ content: e, isStreaming: t, thinkingLabel: n, components: r, codeBlockCopyLabel: i, codeBlockCopiedLabel: a, codeBlockTheme: o }) => /* @__PURE__ */ j(i3, {
 	content: e,
 	isStreaming: t,
 	thinkingLabel: n,
@@ -76221,28 +76238,28 @@ b(({ content: e, isStreaming: t, thinkingLabel: n, components: r, codeBlockCopyL
 	codeBlockCopyLabel: i,
 	codeBlockCopiedLabel: a,
 	codeBlockTheme: o,
-	classNames: i3
+	classNames: a3
 }));
-var a3 = {
+var o3 = {
 	container: "_container_bc4pw_1",
 	icon: "_icon_bc4pw_16",
 	input: "_input_bc4pw_20"
-}, o3 = ({ value: e, onChange: t, labels: n, iconSize: r = ko.MD, iconStrokeWidth: i, styles: a }) => {
+}, s3 = ({ value: e, onChange: t, labels: n, iconSize: r = ko.MD, iconStrokeWidth: i, styles: a }) => {
 	let { placeholder: o = "Search", ariaLabel: s, clearLabel: c = "Clear search" } = n ?? {}, { containerClassName: l, iconClassName: u, inputClassName: d, clearButtonClassName: f } = a ?? {}, p = s ?? o;
 	return /* @__PURE__ */ j("div", {
 		role: "search",
 		children: /* @__PURE__ */ M("div", {
-			className: EB(a3.container, "flex cursor-text items-center gap-3 rounded-xl border px-4 py-2 transition-[border-color,box-shadow] duration-150 ease-in-out", l),
+			className: EB(o3.container, "flex cursor-text items-center gap-3 rounded-xl border px-4 py-2 transition-[border-color,box-shadow] duration-150 ease-in-out", l),
 			children: [
 				/* @__PURE__ */ j(be, {
 					size: r,
 					stroke: i,
-					className: EB(a3.icon, "shrink-0 transition-colors duration-150 ease-in-out", u),
+					className: EB(o3.icon, "shrink-0 transition-colors duration-150 ease-in-out", u),
 					"aria-hidden": !0
 				}),
 				/* @__PURE__ */ j("input", {
 					type: "text",
-					className: EB(a3.input, "min-w-0 flex-1 border-0 p-0 text-sm font-normal leading-5 outline-none", d),
+					className: EB(o3.input, "min-w-0 flex-1 border-0 p-0 text-sm font-normal leading-5 outline-none", d),
 					value: e,
 					placeholder: o,
 					"aria-label": p,
@@ -76256,14 +76273,14 @@ var a3 = {
 					children: /* @__PURE__ */ j(xe, {
 						size: r,
 						stroke: i,
-						className: EB(a3.icon, u),
+						className: EB(o3.icon, u),
 						"aria-hidden": !0
 					})
 				})
 			]
 		})
 	});
-}, s3 = {
+}, c3 = {
 	tabContainer: "_tabContainer_rzv03_1",
 	tabActive: "_tabActive_rzv03_13"
 };
@@ -76277,17 +76294,17 @@ b(({ tabs: e, activeTabId: t, onTabChange: n, styles: r }) => {
 				label: e.label,
 				selected: r,
 				onClick: () => n(e.id),
-				className: EB("box-border h-auto shrink-0 justify-center rounded-full p-2 text-center", i, s3.tabContainer, r && s3.tabActive)
+				className: EB("box-border h-auto shrink-0 justify-center rounded-full p-2 text-center", i, c3.tabContainer, r && c3.tabActive)
 			}, e.id);
 		})
 	});
 });
-var c3 = { icon: "_icon_1b1ye_1" }, l3 = b(({ value: e, onChange: i, labels: a, styles: o }) => {
-	let { colors: s, iconClassName: c = c3.icon, wrapperClassName: l, rowClassName: u } = o ?? {}, d = D(() => t({ "--si-icon": s?.icon }), [s]);
+var l3 = { icon: "_icon_1b1ye_1" }, u3 = b(({ value: e, onChange: i, labels: a, styles: o }) => {
+	let { colors: s, iconClassName: c = l3.icon, wrapperClassName: l, rowClassName: u } = o ?? {}, d = D(() => t({ "--si-icon": s?.icon }), [s]);
 	return /* @__PURE__ */ j("div", {
 		className: n("px-3 py-2", l),
 		style: d,
-		children: /* @__PURE__ */ j(o3, {
+		children: /* @__PURE__ */ j(s3, {
 			value: e,
 			onChange: i,
 			labels: {
@@ -76304,14 +76321,14 @@ var c3 = { icon: "_icon_1b1ye_1" }, l3 = b(({ value: e, onChange: i, labels: a,
 			}
 		})
 	});
-}), u3 = b(({ label: t, icon: n = c, iconSize: r = 48 }) => /* @__PURE__ */ j(e, {
+}), d3 = b(({ label: t, icon: n = c, iconSize: r = 48 }) => /* @__PURE__ */ j(e, {
 	icon: /* @__PURE__ */ j(n, {
 		"aria-hidden": !0,
 		size: r,
 		stroke: 1
 	}),
 	label: t
-})), d3 = b(({ label: t, icon: n = u, iconSize: r = 45 }) => /* @__PURE__ */ j(e, {
+})), f3 = b(({ label: t, icon: n = u, iconSize: r = 45 }) => /* @__PURE__ */ j(e, {
 	icon: /* @__PURE__ */ j(n, {
 		"aria-hidden": !0,
 		size: r,
@@ -76320,4 +76337,4 @@ var c3 = { icon: "_icon_1b1ye_1" }, l3 = b(({ value: e, onChange: i, labels: a,
 	label: t
 }));
 //#endregion
-export { u3 as PanelEmpty, d3 as PanelNoResults, l3 as SearchInput, re as SidebarOrientation, oe as SidebarPanel };
+export { d3 as PanelEmpty, f3 as PanelNoResults, u3 as SearchInput, re as SidebarOrientation, oe 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.0.0-dev.512",
+  "version": "1.0.0-dev.514",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -17,8 +17,8 @@
     }
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.0.0-dev.512",
-    "@epam/ai-dial-kit": "1.0.0-dev.512",
+    "@epam/ai-dial-chat-shared": "1.0.0-dev.514",
+    "@epam/ai-dial-kit": "1.0.0-dev.514",
     "@epam/ai-dial-ui-kit": "0.12.0-dev.28",
     "@tabler/icons-react": "^3.44.0",
     "react": "^19.0.0"