@epam/ai-dial-usage-dashboard 1.3.0-dev.309 → 1.3.0-dev.311

package/index.js

@@ -41820,12 +41820,14 @@ var LR = ({ ariaLabel: e = "Close", className: t, size: n = pR.Small, onClose: r
 	let r = e === "ArrowDown" ? 1 : -1;
 	return t === -1 ? r === 1 ? 0 : n - 1 : (t + r + n) % n;
 };
-function Oz(e, t = "menu", n = !1, r) {
-	let [i, a] = M(!1), o = xI(), { refs: s, elements: c, floatingStyles: l, context: u } = vL({
-		nodeId: o,
-		placement: "right-start",
-		open: i,
-		onOpenChange: a,
+function Oz(e, t = "menu", n = !1, r, i) {
+	let [a, o] = M(!1), s = i?.open ?? a, c = i?.onOpenChange, l = i?.open, u = w((e) => {
+		l === void 0 && o(e), c?.(e);
+	}, [l, c]), [d, f] = M(!1), p = xI(), { refs: m, elements: h, floatingStyles: g, context: _ } = vL({
+		nodeId: p,
+		placement: d ? "left-start" : "right-start",
+		open: s,
+		onOpenChange: u,
 		whileElementsMounted: kF,
 		middleware: [
 			WF({
@@ -41835,39 +41837,43 @@ function Oz(e, t = "menu", n = !1, r) {
 			KF({ padding: e }),
 			GF({ padding: e })
 		]
-	}), { getReferenceProps: d, getFloatingProps: f } = SL([
-		kI(u, {
+	});
+	E(() => {
+		h.domReference && f(Cz(h.domReference));
+	}, [h.domReference, s]);
+	let { getReferenceProps: v, getFloatingProps: y } = SL([
+		kI(_, {
 			enabled: !n,
-			move: !1,
+			move: r?.move ?? !1,
 			handleClose: OL(),
-			delay: {
+			delay: r?.delay ?? {
 				open: 80,
 				close: 80
 			}
 		}),
-		fL(u, { enabled: !n }),
-		gL(u, {
+		fL(_, { enabled: !n }),
+		gL(_, {
 			ancestorScroll: !0,
 			bubbles: {
 				escapeKey: !1,
 				outsidePress: !0
 			}
 		}),
-		wL(u, { role: t })
-	]), [p, m] = M(!1), h = c.floating;
+		wL(_, { role: t })
+	]), [b, x] = M(!1), S = h.floating;
 	E(() => {
-		!i || !p || h == null || (Sz(h)[0]?.focus(), m(!1));
+		!s || !b || S == null || (Sz(S)[0]?.focus(), x(!1));
 	}, [
-		i,
-		p,
-		h
+		s,
+		b,
+		S
 	]);
-	let g = w((e) => {
-		n || e.key !== wz(e.currentTarget) && e.key !== "Enter" && e.key !== " " || (e.preventDefault(), e.stopPropagation(), a(!0), m(!0));
-	}, [n]), _ = w((e) => {
+	let C = w((e) => {
+		n || e.key !== wz(e.currentTarget) && e.key !== "Enter" && e.key !== " " || (e.preventDefault(), e.stopPropagation(), u(!0), x(!0));
+	}, [n, u]), T = w((e) => {
 		if (e.defaultPrevented || Ez(e.target)) return;
 		if (e.key === Tz(e.currentTarget)) {
-			e.preventDefault(), e.stopPropagation(), a(!1), s.domReference.current?.focus();
+			e.preventDefault(), e.stopPropagation(), u(!1), m.domReference.current?.focus();
 			return;
 		}
 		if (!xz.includes(e.key)) return;
@@ -41876,73 +41882,77 @@ function Oz(e, t = "menu", n = !1, r) {
 		if (t.length === 0) return;
 		let n = e.currentTarget.ownerDocument.activeElement, r = t.findIndex((e) => e === n);
 		t[Dz(e.key, r, t.length)]?.focus();
-	}, [s.domReference]);
+	}, [m.domReference, u]);
 	return {
-		isOpen: i,
-		nodeId: o,
-		refs: s,
-		floatingStyles: l,
-		context: u,
-		getReferenceProps: w((e) => d({
+		isOpen: s,
+		nodeId: p,
+		refs: m,
+		floatingStyles: g,
+		context: _,
+		getReferenceProps: w((e) => v({
 			...e,
-			onKeyDown: g
-		}), [d, g]),
-		getFloatingProps: w((e) => f({
+			onKeyDown: C
+		}), [v, C]),
+		getFloatingProps: w((e) => y({
 			...e,
-			onKeyDown: _
-		}), [f, _])
+			onKeyDown: T
+		}), [y, T])
 	};
 }
-var kz = "rounded bg-layer-0 shadow", Az = ({ refs: e, floatingStyles: t, context: n, getFloatingProps: r, role: i, surfaceClassName: a, className: o, children: s }) => {
-	let c = AL();
+var kz = "rounded bg-layer-0 shadow", Az = ({ refs: e, floatingStyles: t, context: n, getFloatingProps: r, role: i, surfaceClassName: a, className: o, initialFocus: s = -1, children: c }) => {
+	let l = AL();
 	return /* @__PURE__ */ d(ZI, { children: /* @__PURE__ */ d(cL, {
 		context: n,
 		modal: !1,
-		initialFocus: -1,
+		initialFocus: s,
 		returnFocus: !0,
 		children: /* @__PURE__ */ d("div", {
 			ref: e.setFloating,
 			style: t,
 			role: i,
-			className: (0, EM.default)("z-floating overflow-auto text-primary focus-visible:outline-hidden", a ?? kz, c, o),
+			className: (0, EM.default)("z-floating overflow-auto text-primary focus-visible:outline-hidden", a ?? kz, l, o),
 			...r(),
-			children: s
+			children: c
 		})
 	}) });
 }, jz = (e) => e.mark ?? (e.selectable ? FL.Checkbox : FL.None), Mz = (e) => e.selectable ? "menuitemcheckbox" : jz(e) === FL.Check ? "menuitemradio" : "menuitem", Nz = ({ item: e, onRootClose: t }) => {
-	let { isOpen: n, nodeId: r, refs: i, floatingStyles: a, context: o, getReferenceProps: s, getFloatingProps: c } = Oz(dR, "menu", !!e.disabled), l = w((e) => (n) => {
+	let n = j(e.subMenuOpen ? 0 : -1), { isOpen: r, nodeId: i, refs: a, floatingStyles: o, context: s, getReferenceProps: c, getFloatingProps: l } = Oz(dR, "menu", !!e.disabled, e.subMenuHoverOptions, {
+		open: e.subMenuOpen,
+		onOpenChange: e.onSubMenuOpenChange
+	}), p = w((e) => (n) => {
 		e.disabled || (e.onClick?.({
 			key: e.key,
 			domEvent: n
 		}), e.selectable || t());
-	}, [t]), p = /* @__PURE__ */ d(ez, {
-		ref: i.setReference,
+	}, [t]), m = /* @__PURE__ */ d(ez, {
+		ref: a.setReference,
 		role: "menuitem",
 		"aria-haspopup": "menu",
-		"aria-expanded": n,
+		"aria-expanded": r,
 		"aria-disabled": !!e.disabled,
 		disabled: e.disabled,
 		icon: e.icon,
 		label: e.label,
 		trailing: fR,
 		className: e.className,
-		...s(),
+		...c(),
 		children: e.renderItem?.(e)
 	});
 	return /* @__PURE__ */ f(SI, {
-		id: r,
+		id: i,
 		children: [e.interactiveTooltip ? /* @__PURE__ */ d(PL, {
 			asChild: !0,
 			placement: e.interactiveTooltip.placement,
 			content: e.interactiveTooltip.content,
 			contentClassName: e.interactiveTooltip.contentClassName,
-			children: p
-		}) : p, n && /* @__PURE__ */ d(Az, {
-			refs: i,
-			floatingStyles: a,
-			context: o,
-			getFloatingProps: c,
+			children: m
+		}) : m, r && /* @__PURE__ */ d(Az, {
+			refs: a,
+			floatingStyles: o,
+			context: s,
+			getFloatingProps: l,
 			role: "menu",
+			initialFocus: n.current,
 			surfaceClassName: e.renderSubMenu ? rR : iR,
 			children: e.renderSubMenu ? e.renderSubMenu() : /* @__PURE__ */ f(u, { children: [
 				e.menuHeader && (typeof e.menuHeader == "function" ? e.menuHeader() : e.menuHeader),
@@ -41957,10 +41967,11 @@ var kz = "rounded bg-layer-0 shadow", Az = ({ refs: e, floatingStyles: t, contex
 						selected: !!e.checked,
 						danger: e.danger,
 						icon: e.icon,
+						trailing: e.iconAfter,
 						label: e.label,
 						className: e.className,
 						rightControl: e.rightControl,
-						onClick: l(e),
+						onClick: p(e),
 						children: e.renderItem?.(e)
 					});
 					return /* @__PURE__ */ d(g, { children: e.interactiveTooltip ? /* @__PURE__ */ d(PL, {
@@ -42198,7 +42209,7 @@ var kz = "rounded bg-layer-0 shadow", Az = ({ refs: e, floatingStyles: t, contex
 						className: $("px-3 py-2 text-secondary dial-caption-text", e.className),
 						children: e.label
 					}, e.key);
-					if (e.children?.length) return /* @__PURE__ */ d(Nz, {
+					if (e.children?.length || e.renderSubMenu) return /* @__PURE__ */ d(Nz, {
 						item: e,
 						onRootClose: () => xe(!1)
 					}, e.key);
@@ -42212,6 +42223,7 @@ var kz = "rounded bg-layer-0 shadow", Az = ({ refs: e, floatingStyles: t, contex
 						selected: !!e.checked,
 						danger: e.danger,
 						icon: e.icon,
+						trailing: e.iconAfter,
 						label: e.label,
 						className: e.className,
 						rightControl: e.rightControl,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-usage-dashboard",
   "description": "Presentational aggregate cost-limit cards for the Usage settings dashboard",
-  "version": "1.3.0-dev.309",
+  "version": "1.3.0-dev.311",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -20,8 +20,8 @@
     "@tabler/icons-react": "^3.50.0"
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.3.0-dev.309",
-    "@epam/ai-dial-ui-kit": "^0.16.0-dev.69",
+    "@epam/ai-dial-chat-shared": "1.3.0-dev.311",
+    "@epam/ai-dial-ui-kit": "^0.16.0-dev.71",
     "react": "^19.2.8"
   },
   "repository": {