@pie-lib/charting 8.0.1-next.20261005003301 → 8.0.1-next.20261005075357

package/dist/__tests__/actions-button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/actions-button.d.ts

@@ -9,6 +9,7 @@ export declare class ActionsButton extends React.Component {
         language: PropTypes.Requireable<string>;
         categories: PropTypes.Requireable<any[]>;
     };
+    triggerId: string;
     handleActionsClick: any;
     handleActionsClose: any;
     handleAddCategory: any;

package/dist/actions-button.js

@@ -1,19 +1,28 @@
 import e from "react";
 import t from "prop-types";
 import { styled as n } from "@mui/material/styles";
-import { color as r } from "@pie-lib/render-ui";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import o from "@pie-lib/translator";
-import s from "@mui/material/Button";
-import c from "@mui/material/Popover";
-import l from "@mui/material/Paper";
+import { color as r, createUniqueId as i } from "@pie-lib/render-ui";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "@pie-lib/translator";
+import c from "@mui/material/Button";
+import l from "@mui/material/Popover";
+import u from "@mui/material/Paper";
 //#region src/actions-button.tsx
-var { translator: u } = o, d = n("div")(() => ({ alignSelf: "flex-end" })), f = n("div")(({ theme: e }) => ({
+var { translator: d } = s, f = n("div")(() => ({ alignSelf: "flex-end" })), p = n("button")(({ theme: e }) => ({
+	display: "block",
+	margin: 0,
+	border: 0,
+	background: "none",
+	font: "inherit",
 	cursor: "pointer",
 	fontSize: e.typography.fontSize,
 	color: r.tertiary(),
-	padding: e.spacing(1)
-})), p = n(l)(({ theme: e }) => ({
+	padding: e.spacing(1),
+	"&:focus-visible": {
+		outline: `2px solid ${r.focusOutline()}`,
+		outlineOffset: "-2px"
+	}
+})), m = n(u)(({ theme: e }) => ({
 	padding: e.spacing(1),
 	display: "flex",
 	flexDirection: "column",
@@ -24,7 +33,7 @@ var { translator: u } = o, d = n("div")(() => ({ alignSelf: "flex-end" })), f =
 		color: r.text(),
 		justifyContent: "flex-start"
 	}
-})), m = class extends e.Component {
+})), h = class extends e.Component {
 	constructor(e) {
 		super(e), this.state = { actionsAnchorEl: null };
 	}
@@ -37,6 +46,7 @@ var { translator: u } = o, d = n("div")(() => ({ alignSelf: "flex-end" })), f =
 		language: t.string,
 		categories: t.array
 	};
+	triggerId = i("chart-actions");
 	handleActionsClick = (e) => {
 		this.setState({ actionsAnchorEl: e.currentTarget });
 	};
@@ -52,14 +62,16 @@ var { translator: u } = o, d = n("div")(() => ({ alignSelf: "flex-end" })), f =
 		t(e), this.handleActionsClose();
 	};
 	render() {
-		let { categories: e, language: t } = this.props, { actionsAnchorEl: n } = this.state;
-		return /* @__PURE__ */ a(d, { children: [/* @__PURE__ */ i(f, {
-			role: "button",
-			tabIndex: 0,
+		let { categories: e, language: t } = this.props, { actionsAnchorEl: n } = this.state, r = !!n;
+		return /* @__PURE__ */ o(f, { children: [/* @__PURE__ */ a(p, {
+			type: "button",
+			id: this.triggerId,
+			"aria-haspopup": "dialog",
+			"aria-expanded": r,
 			onClick: this.handleActionsClick,
-			children: "Actions"
-		}), /* @__PURE__ */ i(c, {
-			open: !!n,
+			children: d.t("charting.actions", { lng: t })
+		}), /* @__PURE__ */ a(l, {
+			open: r,
 			anchorEl: n,
 			onClose: this.handleActionsClose,
 			anchorOrigin: {
@@ -70,15 +82,19 @@ var { translator: u } = o, d = n("div")(() => ({ alignSelf: "flex-end" })), f =
 				vertical: "top",
 				horizontal: "left"
 			},
-			children: /* @__PURE__ */ a(p, { children: [/* @__PURE__ */ a(s, {
+			slotProps: { paper: {
+				role: "dialog",
+				"aria-labelledby": this.triggerId
+			} },
+			children: /* @__PURE__ */ o(m, { children: [/* @__PURE__ */ o(c, {
 				onClick: () => this.handleAddCategory(),
-				children: ["+ ", u.t("charting.add", { lng: t })]
-			}), e.length > 0 && e.map((e, n) => e.deletable && !e.correctness && /* @__PURE__ */ i(s, {
+				children: ["+ ", d.t("charting.add", { lng: t })]
+			}), e.length > 0 && e.map((e, n) => e.deletable && !e.correctness && /* @__PURE__ */ a(c, {
 				onClick: () => this.handleDeleteCategory(n),
-				children: `${u.t("charting.delete", { lng: t })} <${e.label || u.t("charting.newLabel", { lng: t })}>`
+				children: `${d.t("charting.delete", { lng: t })} <${e.label || d.t("charting.newLabel", { lng: t })}>`
 			}, n))] })
 		}, `actions-popover-${Math.random()}`)] });
 	}
 };
 //#endregion
-export { m as ActionsButton, m as default };
+export { h as ActionsButton, h as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/charting",
-  "version": "8.0.1-next.20261005003301",
+  "version": "8.0.1-next.20261005075357",
   "description": "charting",
   "repository": {
     "type": "git",
@@ -13,9 +13,9 @@
     "@mapbox/point-geometry": "^1.1.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/plot": "5.0.1-next.20261005003301",
-    "@pie-lib/render-ui": "8.0.1-next.20261005003301",
-    "@pie-lib/translator": "5.0.1-next.20261005003301",
+    "@pie-lib/plot": "5.0.1-next.20261005075357",
+    "@pie-lib/render-ui": "8.0.1-next.20261005075357",
+    "@pie-lib/translator": "5.0.1-next.20261005075357",
     "@visx/axis": "^4.0.0",
     "@visx/event": "^4.0.0",
     "@visx/grid": "^4.0.0",
@@ -29,7 +29,7 @@
     "invariant": "^2.2.4",
     "react-draggable": "^4.7.1",
     "prop-types": "^15.8.1",
-    "@pie-lib/config-ui": "14.0.1-next.20261005003301",
+    "@pie-lib/config-ui": "14.0.1-next.20261005075357",
     "@pie-element/shared-math-rendering-mathjax": "0.1.2-next.20261003161149",
     "@pie-element/shared-lodash": "0.1.2-next.20261002215153",
     "clsx": "^2.1.1",