@ex-grid/chart-mui 0.0.0-stage → 0.2.0-beta.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 AkiraMisawa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,44 @@
-# Temporary Holding Version
+# @ex-grid/chart-mui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+ExChart for MUI: the design-system Wrapper that draws ExChart for React's toolbar and context menu with MUI's components, docks the charts made from a grid's selection beside it in MUI's tabs, and maps the chart's Visual Tokens onto a MUI theme made with CSS variables.
+
+It is one of the packages of the ExGrid family: Excel-like grids, sheets, pivot tables and charts for reading
+money and risk numbers, published to npm under `@ex-grid` and to NuGet for Blazor, at one shared version.
+
+## Install
+
+```sh
+npm install @ex-grid/chart-mui @emotion/react @emotion/styled @mui/material react react-dom
+```
+
+`@emotion/react`, `@emotion/styled`, `@mui/material`, `react` and `react-dom` are peer dependencies: your application provides them, at the versions `package.json` names.
+
+It depends on exactly the version of `@ex-grid/chart`, `@ex-grid/chart-react`, `@ex-grid/core` and `@ex-grid/mui` it was built with, so upgrade the family's packages together.
+
+What it draws reads these stylesheets. Import them once in your application, after the design system's own:
+
+```ts
+import '@ex-grid/core/styles.css';
+import '@ex-grid/chart/styles.css';
+import '@ex-grid/chart-mui/styles.css';
+```
+
+## Documentation
+
+[ExChart on the documentation site](https://akiramisawa.github.io/ex-grid/exchart), read for React with the switch at the top, and every
+version's [Release Notes](https://akiramisawa.github.io/ex-grid/release-notes).
+
+> **The API may still change.** While the version is `0.x`, it may change from one version to the next; each
+> version's Release Notes say what changed. A prerelease, a version with a suffix such as `-rc.1`, passed every
+> test layer in CI on the commit it was built from. A version without a suffix is published only once the
+> project's [Definition of Done](https://github.com/AkiraMisawa/ex-grid/blob/main/docs/definition-of-done.md) is
+> signed off on it.
+
+## Requirements
+
+- **Chrome or Edge.** They are the supported browsers; Safari and Firefox are out of scope.
+- **React 19.2.0 or a later 19.x.**
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,58 @@
+/**
+ * ExChart for MUI (ADR-0390): `muiChartChrome` draws ExChart for React's toolbar and context menu in MUI's
+ * components, and `MuiChartDock` docks the charts made from a grid's selection beside the grid or below it in MUI's
+ * tabs. Its stylesheet, `@ex-grid/chart-mui/styles.css`, maps the chart's Visual Tokens onto a MUI theme made with
+ * CSS variables, so a change of scheme recolours every chart with no render.
+ *
+ * @packageDocumentation
+ */
+
+import { ChartDockPlacement } from '@ex-grid/chart-react';
+import { ChartDockState } from '@ex-grid/chart-react';
+import { CSSProperties } from 'react';
+import { ExChartChrome } from '@ex-grid/chart-react';
+import type { GridChartBridge } from '@ex-grid/chart';
+import type { GridDensity } from '@ex-grid/core';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+
+/** ExChart's Chrome drawn in MUI's components: hand it as an ExChart's `chrome`, inside a ThemeProvider whose theme
+ * was made with `cssVariables: true` and with `@ex-grid/chart-mui/styles.css` loaded. {@link MuiChartDock} hands it
+ * to every chart it holds. */
+export declare const muiChartChrome: ExChartChrome;
+
+/**
+ * The Chart Dock (ADR-0258) drawn with MUI: the grid, and a panel of MUI's tabs beside it or below it holding the
+ * charts made from its selection. The context menu's "Chart selection" opens a tab directly, "Add to chart" offers
+ * every open tab, a refusal is said in an alert above the tabs, and a click on a point shows its cell. A tab not shown
+ * keeps its chart, with its range and its open Chart Filters. Needs a ThemeProvider whose theme was made with
+ * `cssVariables: true` above it, and `@ex-grid/chart-mui/styles.css` loaded.
+ */
+export declare function MuiChartDock<Row>(props: MuiChartDockProps<Row>): ReactElement;
+
+/** A MuiChartDock's props. */
+export declare interface MuiChartDockProps<Row> {
+    /** The dock's state, from `useChartDock`, whose `bridgeOptions` the bridge was made with. */
+    readonly dock: ChartDockState;
+    /** The bridge of the grid in `children`, which draws each chart from the grid's rows. */
+    readonly bridge: GridChartBridge<Row>;
+    /** The grid, and anything to stand beside the charts. */
+    readonly children?: ReactNode;
+    /** Where the charts go: beside the grid, the default, or below it. */
+    readonly placement?: ChartDockPlacement;
+    /** Each chart's width in CSS pixels; 640 unless given. */
+    readonly chartWidth?: number;
+    /** Each chart's height in CSS pixels; 320 unless given. */
+    readonly chartHeight?: number;
+    /** The grid's Density, which picks the size the charts' toolbar, Chart Filters and menu are drawn at, as it picks
+     * the grid's Chrome's (ADR-0390); compact, `small` and dense, unless given. */
+    readonly density?: GridDensity;
+    /** What draws each chart's toolbar and context menu; {@link muiChartChrome} unless given. */
+    readonly chrome?: ExChartChrome;
+    /** A class for the dock's own element. */
+    readonly className?: string;
+    /** A style for the dock's own element. */
+    readonly style?: CSSProperties;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,243 @@
+// src/chart-chrome.ts
+import { createElement, useContext } from "react";
+import { Alert, Button, ButtonGroup, ListItemButton, TextField } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import { chartWordIds } from "@ex-grid/chart";
+import { useChartFilterText } from "@ex-grid/chart-react";
+import { MuiSizeContext, refuseThemeWithoutVariables } from "@ex-grid/mui";
+var downloads = /* @__PURE__ */ new Set([chartWordIds.downloadCsv, chartWordIds.downloadSvg, chartWordIds.downloadPng]);
+function commandButton(command, size) {
+  return createElement(Button, {
+    key: command.id,
+    type: "button",
+    size,
+    variant: command.expanded === true ? "outlined" : "text",
+    disabled: !command.enabled,
+    onClick: command.invoke,
+    className: "mui-ex-chart-command",
+    ...command.expanded === void 0 ? {} : { "aria-expanded": command.expanded },
+    ...command.title === void 0 ? {} : { title: command.title }
+  }, command.label);
+}
+function MuiChartFilters({ context, filters }) {
+  const { size } = useContext(MuiSizeContext);
+  const typed = useChartFilterText(filters);
+  const end = (id, value, set) => filters.values === "labels" ? createElement(TextField, {
+    key: id,
+    size,
+    select: true,
+    label: context.label(id),
+    value,
+    className: "mui-ex-chart-end",
+    slotProps: { select: { native: true }, inputLabel: { shrink: true } },
+    onChange: (event) => {
+      set(event.target.value);
+    }
+  }, createElement("option", { key: "", value: "" }, ""), ...filters.labels.map((label) => createElement("option", { key: label, value: label }, label))) : createElement(TextField, {
+    key: id,
+    size,
+    label: context.label(id),
+    value,
+    placeholder: filters.hint,
+    className: "mui-ex-chart-end",
+    slotProps: { inputLabel: { shrink: true } },
+    onChange: (event) => {
+      set(event.target.value);
+    }
+  });
+  return createElement(
+    "div",
+    { className: "mui-ex-chart-filters", role: "group", "aria-label": context.label(chartWordIds.filters) },
+    end(chartWordIds.from, typed.from, typed.setFrom),
+    end(chartWordIds.to, typed.to, typed.setTo),
+    createElement(Button, {
+      type: "button",
+      size,
+      variant: "outlined",
+      className: "mui-ex-chart-apply",
+      onClick: typed.apply
+    }, context.label(chartWordIds.apply)),
+    filters.scale === void 0 ? null : createElement(
+      TextField,
+      {
+        size,
+        select: true,
+        label: context.label(chartWordIds.axis),
+        value: filters.scale,
+        className: "mui-ex-chart-scale",
+        slotProps: { select: { native: true } },
+        onChange: (event) => {
+          filters.setScale(scaleOf(event.target.value));
+        }
+      },
+      createElement("option", { value: "proportional" }, context.label(chartWordIds.proportional)),
+      createElement("option", { value: "categories" }, context.label(chartWordIds.categories))
+    ),
+    filters.error === null ? null : createElement(Alert, { severity: "error", className: "mui-ex-chart-filter-error" }, filters.error)
+  );
+}
+function scaleOf(value) {
+  if (value === "proportional" || value === "categories") return value;
+  throw new RangeError(`'${value}' is not a scale the axis switch offers (ADR-0251).`);
+}
+function MuiChartToolbar({ context }) {
+  refuseThemeWithoutVariables(useTheme(), "muiChartChrome");
+  const { size } = useContext(MuiSizeContext);
+  const { filters } = context;
+  return createElement(
+    "div",
+    { className: "mui-ex-chart-chrome" },
+    createElement(
+      "div",
+      { className: "mui-ex-chart-toolbar", role: "toolbar", "aria-label": context.name },
+      ...context.commands.filter((command) => !downloads.has(command.id)).map((command) => commandButton(command, size)),
+      // MUI's ButtonGroup is a group already, named here as the downloads.
+      createElement(
+        ButtonGroup,
+        { size, variant: "outlined", "aria-label": context.label(chartWordIds.downloads), className: "mui-ex-chart-downloads" },
+        ...context.commands.filter((command) => downloads.has(command.id)).map((command) => createElement(Button, {
+          key: command.id,
+          type: "button",
+          disabled: !command.enabled,
+          onClick: command.invoke,
+          ...command.title === void 0 ? {} : { title: command.title }
+        }, command.label))
+      )
+    ),
+    filters === void 0 ? null : createElement(MuiChartFilters, { context, filters })
+  );
+}
+function MuiChartMenu({ context }) {
+  const { dense } = useContext(MuiSizeContext);
+  return createElement(
+    "div",
+    { role: "none", className: "mui-ex-chart-menu" },
+    ...context.commands.map((command) => createElement(ListItemButton, {
+      key: command.id,
+      component: "button",
+      type: "button",
+      role: "menuitem",
+      dense,
+      disabled: !command.enabled,
+      onClick: command.invoke,
+      className: "mui-ex-chart-menu-item"
+    }, command.label))
+  );
+}
+var muiChartChrome = Object.freeze({
+  toolbar: (context) => createElement(MuiChartToolbar, { context }),
+  menu: (context) => createElement(MuiChartMenu, { context })
+});
+
+// src/mui-chart-dock.ts
+import { createElement as createElement2, useId } from "react";
+import { Alert as Alert2, IconButton, Paper, Tab, Tabs } from "@mui/material";
+import { useTheme as useTheme2 } from "@mui/material/styles";
+import { DockedChart, useChartDockKeyboard } from "@ex-grid/chart-react";
+import { MuiSizeContext as MuiSizeContext2, muiSizeOf, refuseThemeWithoutVariables as refuseThemeWithoutVariables2 } from "@ex-grid/mui";
+var refused = (why) => createElement2(Alert2, { severity: "warning", className: "mui-ex-chart-dock-refusal" }, why);
+var cross = createElement2(
+  "svg",
+  { viewBox: "0 0 16 16", width: 12, height: 12, "aria-hidden": true, focusable: false },
+  createElement2("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round" })
+);
+function MuiChartDock(props) {
+  const {
+    dock,
+    bridge,
+    children,
+    placement = "right",
+    chartWidth = 640,
+    chartHeight = 320,
+    density = "compact",
+    chrome = muiChartChrome,
+    className,
+    style
+  } = props;
+  const ids = useId();
+  refuseThemeWithoutVariables2(useTheme2(), "MuiChartDock");
+  const keyboard = useChartDockKeyboard(dock);
+  const { charts, active, refusal } = dock;
+  const classes = ["mui-ex-chart", "mui-ex-chart-dock", `mui-ex-chart-dock-${placement}`];
+  if (className !== void 0) classes.push(className);
+  const panelStyle = placement === "right" ? { flex: "0 0 auto", boxSizing: "content-box", width: chartWidth } : void 0;
+  const tabId = (index) => `${ids}-tab-${String(index)}`;
+  const panelId = (index) => `${ids}-panel-${String(index)}`;
+  const panel = charts.length === 0 && refusal === void 0 ? null : createElement2(
+    Paper,
+    {
+      ref: keyboard.panel,
+      variant: "outlined",
+      className: "mui-ex-chart-dock-panel",
+      role: "region",
+      "aria-label": "Charts",
+      ...panelStyle === void 0 ? {} : { style: panelStyle }
+    },
+    refusal === void 0 ? null : createElement2(Alert2, {
+      severity: "warning",
+      onClose: dock.dismiss,
+      closeText: "Dismiss",
+      className: "mui-ex-chart-dock-refusal"
+    }, refusal),
+    charts.length === 0 ? null : createElement2(Tabs, {
+      value: active ?? false,
+      variant: "scrollable",
+      scrollButtons: "auto",
+      className: "mui-ex-chart-dock-tabs",
+      // oxlint-disable-line ex-grid/no-stand-in-default -- MUI's Tabs say "no tab" as false
+      onChange: (_, value) => {
+        if (typeof value !== "string") throw new TypeError("A Chart Dock's tab is named by its chart.");
+        dock.select(value);
+      }
+    }, ...charts.map(({ name }, index) => createElement2(Tab, {
+      key: name,
+      value: name,
+      id: tabId(index),
+      "aria-controls": panelId(index),
+      className: "mui-ex-chart-dock-tab-button",
+      // Delete closes the tab the keyboard is on, as the close mark does under the pointer.
+      onKeyDown: (event) => {
+        if (event.key === "Delete") keyboard.closeByKey(name);
+      },
+      label: createElement2(
+        "span",
+        { className: "mui-ex-chart-dock-label" },
+        name,
+        // A span, not a button: a button inside the tab's button is not one the browser lets stand.
+        createElement2(IconButton, {
+          component: "span",
+          role: "button",
+          size: "small",
+          "aria-label": `Close ${name}`,
+          // Off the Tab order: Delete closes from the keyboard, and a stop inside each tab's button would be one
+          // the tabs' own roving order does not know.
+          tabIndex: -1,
+          className: "mui-ex-chart-dock-close",
+          onClick: (event) => {
+            event.stopPropagation();
+            dock.close(name);
+          }
+        }, cross)
+      )
+    }))),
+    ...charts.map((target, index) => createElement2("div", {
+      key: target.name,
+      role: "tabpanel",
+      id: panelId(index),
+      "aria-labelledby": tabId(index),
+      hidden: target.name !== active,
+      className: "mui-ex-chart-dock-tab"
+    }, createElement2(DockedChart, { bridge, target, width: chartWidth, height: chartHeight, chrome, refused })))
+  );
+  return createElement2(
+    "div",
+    { className: classes.join(" "), ...style === void 0 ? {} : { style } },
+    createElement2("div", { ref: keyboard.content, className: "mui-ex-chart-dock-content" }, children),
+    createElement2(MuiSizeContext2.Provider, { value: muiSizeOf(density) }, panel)
+  );
+}
+export {
+  MuiChartDock,
+  muiChartChrome
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/chart-chrome.ts", "../src/mui-chart-dock.ts"],
+  "sourcesContent": ["// ExChart's Chrome under MUI (ADR-0281, ADR-0390): the toolbar, with Chart Filters' range in MUI's fields and the\n// axis switch, and the context menu's items, in MUI's components at the size the dock or the grid's density maps\n// onto. Which commands there are, what a typed range means, what is refused and where the menu opens are the chart's;\n// these components draw what the chart hands them and call back. The legend, the tooltip and the plot stay the\n// chart's own (ADR-0255). MUI's Menu and MenuList are not used: the menu's frame is the chart's, which takes the keys.\n\nimport { createElement, useContext, type ReactElement } from 'react';\nimport { Alert, Button, ButtonGroup, ListItemButton, TextField } from '@mui/material';\nimport { useTheme } from '@mui/material/styles';\nimport { chartWordIds, type AxisScale, type ChartCommand, type ChartFiltersSlotContext, type ChartMenuSlotContext, type ChartToolbarSlotContext } from '@ex-grid/chart';\nimport { useChartFilterText, type ExChartChrome } from '@ex-grid/chart-react';\nimport { MuiSizeContext, refuseThemeWithoutVariables } from '@ex-grid/mui';\n\nconst downloads: ReadonlySet<string> = new Set([chartWordIds.downloadCsv, chartWordIds.downloadSvg, chartWordIds.downloadPng]);\n\n/** One of the toolbar's commands: MUI's text button, outlined while what it opens is open. */\nfunction commandButton(command: ChartCommand, size: 'small' | 'medium'): ReactElement {\n    return createElement(Button, {\n        key: command.id, type: 'button', size, variant: command.expanded === true ? 'outlined' : 'text',\n        disabled: !command.enabled, onClick: command.invoke, className: 'mui-ex-chart-command',\n        ...(command.expanded === undefined ? {} : { 'aria-expanded': command.expanded }),\n        ...(command.title === undefined ? {} : { title: command.title }),\n    }, command.label);\n}\n\n/** Chart Filters: the range's ends in MUI's fields, a native select of the categories on a category axis, Apply, and\n * the axis switch, which takes effect at once. MUI has no date picker of its own (ADR-0390 section 10), so a date is\n * typed as the chart's hint shows. */\nfunction MuiChartFilters({ context, filters }: { readonly context: ChartToolbarSlotContext; readonly filters: ChartFiltersSlotContext }): ReactElement {\n    const { size } = useContext(MuiSizeContext);\n    const typed = useChartFilterText(filters);\n    const end = (id: string, value: string, set: (text: string) => void): ReactElement => (filters.values === 'labels'\n        ? createElement(TextField, {\n            key: id, size, select: true, label: context.label(id), value, className: 'mui-ex-chart-end',\n            slotProps: { select: { native: true }, inputLabel: { shrink: true } },\n            onChange: event => { set(event.target.value); },\n        }, createElement('option', { key: '', value: '' }, ''), ...filters.labels.map(label => createElement('option', { key: label, value: label }, label)))\n        : createElement(TextField, {\n            key: id, size, label: context.label(id), value, placeholder: filters.hint, className: 'mui-ex-chart-end',\n            slotProps: { inputLabel: { shrink: true } },\n            onChange: event => { set(event.target.value); },\n        }));\n    return createElement('div', { className: 'mui-ex-chart-filters', role: 'group', 'aria-label': context.label(chartWordIds.filters) },\n        end(chartWordIds.from, typed.from, typed.setFrom),\n        end(chartWordIds.to, typed.to, typed.setTo),\n        createElement(Button, {\n            type: 'button', size, variant: 'outlined', className: 'mui-ex-chart-apply', onClick: typed.apply,\n        }, context.label(chartWordIds.apply)),\n        filters.scale === undefined ? null : createElement(TextField, {\n            size, select: true, label: context.label(chartWordIds.axis), value: filters.scale, className: 'mui-ex-chart-scale',\n            slotProps: { select: { native: true } },\n            onChange: event => { filters.setScale(scaleOf(event.target.value)); },\n        },\n        createElement('option', { value: 'proportional' }, context.label(chartWordIds.proportional)),\n        createElement('option', { value: 'categories' }, context.label(chartWordIds.categories))),\n        filters.error === null ? null : createElement(Alert, { severity: 'error', className: 'mui-ex-chart-filter-error' }, filters.error));\n}\n\n/** The scale an option names: one the chart offered, never one a changed option claims. */\nfunction scaleOf(value: string): AxisScale {\n    if (value === 'proportional' || value === 'categories') return value;\n    throw new RangeError(`'${value}' is not a scale the axis switch offers (ADR-0251).`);\n}\n\n/** The toolbar: the chart's commands in its order, the downloads as one button group, then Chart Filters while it is\n * open. */\nfunction MuiChartToolbar({ context }: { readonly context: ChartToolbarSlotContext }): ReactElement {\n    refuseThemeWithoutVariables(useTheme(), 'muiChartChrome');\n    const { size } = useContext(MuiSizeContext);\n    const { filters } = context;\n    return createElement('div', { className: 'mui-ex-chart-chrome' },\n        createElement('div', { className: 'mui-ex-chart-toolbar', role: 'toolbar', 'aria-label': context.name },\n            ...context.commands.filter(command => !downloads.has(command.id)).map(command => commandButton(command, size)),\n            // MUI's ButtonGroup is a group already, named here as the downloads.\n            createElement(ButtonGroup, { size, variant: 'outlined', 'aria-label': context.label(chartWordIds.downloads), className: 'mui-ex-chart-downloads' },\n                ...context.commands.filter(command => downloads.has(command.id)).map(command => createElement(Button, {\n                    key: command.id, type: 'button', disabled: !command.enabled, onClick: command.invoke,\n                    ...(command.title === undefined ? {} : { title: command.title }),\n                }, command.label)))),\n        filters === undefined ? null : createElement(MuiChartFilters, { context, filters }));\n}\n\n/** The context menu's items: MUI's list item buttons, as its Menu draws an item, inside the chart's frame. MUI's\n * MenuItem is not used: it stands only inside MUI's MenuList, which answers the arrows itself. */\nfunction MuiChartMenu({ context }: { readonly context: ChartMenuSlotContext }): ReactElement {\n    const { dense } = useContext(MuiSizeContext);\n    return createElement('div', { role: 'none', className: 'mui-ex-chart-menu' },\n        ...context.commands.map(command => createElement(ListItemButton<'button'>, {\n            key: command.id, component: 'button', type: 'button', role: 'menuitem', dense,\n            disabled: !command.enabled, onClick: command.invoke, className: 'mui-ex-chart-menu-item',\n        }, command.label)));\n}\n\n/** ExChart's Chrome drawn in MUI's components: hand it as an ExChart's `chrome`, inside a ThemeProvider whose theme\n * was made with `cssVariables: true` and with `@ex-grid/chart-mui/styles.css` loaded. {@link MuiChartDock} hands it\n * to every chart it holds. */\nexport const muiChartChrome: ExChartChrome = Object.freeze({\n    toolbar: (context: ChartToolbarSlotContext) => createElement(MuiChartToolbar, { context }),\n    menu: (context: ChartMenuSlotContext) => createElement(MuiChartMenu, { context }),\n});\n", "// The Chart Dock under MUI (ADR-0258, ADR-0281, ADR-0390): the grid it is given, and a panel beside it or below it,\n// never over it, holding the charts made from the grid's selection as MUI's tabs. What it shows is the dock's state,\n// `useChartDock`'s, which takes the bridge's events; this component draws that state and calls back.\n\nimport { createElement, useId, type CSSProperties, type KeyboardEvent, type ReactElement, type ReactNode } from 'react';\nimport { Alert, IconButton, Paper, Tab, Tabs } from '@mui/material';\nimport { useTheme } from '@mui/material/styles';\nimport type { GridDensity } from '@ex-grid/core';\nimport type { GridChartBridge } from '@ex-grid/chart';\nimport { DockedChart, useChartDockKeyboard, type ChartDockPlacement, type ChartDockState, type ExChartChrome } from '@ex-grid/chart-react';\nimport { MuiSizeContext, muiSizeOf, refuseThemeWithoutVariables } from '@ex-grid/mui';\nimport { muiChartChrome } from './chart-chrome';\n\n// Why a tab's chart can no longer be drawn, in MUI's alert.\nconst refused = (why: string): ReactElement => createElement(Alert, { severity: 'warning', className: 'mui-ex-chart-dock-refusal' }, why);\n\n// The close mark's cross, drawn rather than written, so a tab's text is its name alone.\nconst cross = createElement('svg', { viewBox: '0 0 16 16', width: 12, height: 12, 'aria-hidden': true, focusable: false },\n    createElement('path', { d: 'M4 4l8 8M12 4l-8 8', stroke: 'currentColor', strokeWidth: 1.75, strokeLinecap: 'round' }));\n\n/** A MuiChartDock's props. */\nexport interface MuiChartDockProps<Row> {\n    /** The dock's state, from `useChartDock`, whose `bridgeOptions` the bridge was made with. */\n    readonly dock: ChartDockState;\n    /** The bridge of the grid in `children`, which draws each chart from the grid's rows. */\n    readonly bridge: GridChartBridge<Row>;\n    /** The grid, and anything to stand beside the charts. */\n    readonly children?: ReactNode;\n    /** Where the charts go: beside the grid, the default, or below it. */\n    readonly placement?: ChartDockPlacement;\n    /** Each chart's width in CSS pixels; 640 unless given. */\n    readonly chartWidth?: number;\n    /** Each chart's height in CSS pixels; 320 unless given. */\n    readonly chartHeight?: number;\n    /** The grid's Density, which picks the size the charts' toolbar, Chart Filters and menu are drawn at, as it picks\n     * the grid's Chrome's (ADR-0390); compact, `small` and dense, unless given. */\n    readonly density?: GridDensity;\n    /** What draws each chart's toolbar and context menu; {@link muiChartChrome} unless given. */\n    readonly chrome?: ExChartChrome;\n    /** A class for the dock's own element. */\n    readonly className?: string;\n    /** A style for the dock's own element. */\n    readonly style?: CSSProperties;\n}\n\n/**\n * The Chart Dock (ADR-0258) drawn with MUI: the grid, and a panel of MUI's tabs beside it or below it holding the\n * charts made from its selection. The context menu's \"Chart selection\" opens a tab directly, \"Add to chart\" offers\n * every open tab, a refusal is said in an alert above the tabs, and a click on a point shows its cell. A tab not shown\n * keeps its chart, with its range and its open Chart Filters. Needs a ThemeProvider whose theme was made with\n * `cssVariables: true` above it, and `@ex-grid/chart-mui/styles.css` loaded.\n */\nexport function MuiChartDock<Row>(props: MuiChartDockProps<Row>): ReactElement {\n    const {\n        dock, bridge, children, placement = 'right', chartWidth = 640, chartHeight = 320, density = 'compact', chrome = muiChartChrome, className, style,\n    } = props;\n    const ids = useId();\n    refuseThemeWithoutVariables(useTheme(), 'MuiChartDock');\n    const keyboard = useChartDockKeyboard(dock);\n    const { charts, active, refusal } = dock;\n    const classes = ['mui-ex-chart', 'mui-ex-chart-dock', `mui-ex-chart-dock-${placement}`];\n    if (className !== undefined) classes.push(className);\n    // Beside the grid, the panel's content is as wide as its charts and the grid takes what is left, so a chart is\n    // never clipped by a narrow page. Content-box, so the stylesheet's padding is not paired here.\n    const panelStyle: CSSProperties | undefined = placement === 'right' ? { flex: '0 0 auto', boxSizing: 'content-box', width: chartWidth } : undefined;\n    const tabId = (index: number): string => `${ids}-tab-${String(index)}`;\n    const panelId = (index: number): string => `${ids}-panel-${String(index)}`;\n    const panel = charts.length === 0 && refusal === undefined ? null : createElement(Paper, {\n        ref: keyboard.panel, variant: 'outlined', className: 'mui-ex-chart-dock-panel', role: 'region', 'aria-label': 'Charts',\n        ...(panelStyle === undefined ? {} : { style: panelStyle }),\n    },\n    refusal === undefined ? null : createElement(Alert, {\n        severity: 'warning', onClose: dock.dismiss, closeText: 'Dismiss', className: 'mui-ex-chart-dock-refusal',\n    }, refusal),\n    charts.length === 0 ? null : createElement(Tabs, {\n        value: active ?? false, variant: 'scrollable', scrollButtons: 'auto', className: 'mui-ex-chart-dock-tabs', // oxlint-disable-line ex-grid/no-stand-in-default -- MUI's Tabs say \"no tab\" as false\n        onChange: (_: unknown, value: unknown) => {\n            if (typeof value !== 'string') throw new TypeError('A Chart Dock\\'s tab is named by its chart.');\n            dock.select(value);\n        },\n    }, ...charts.map(({ name }, index) => createElement(Tab, {\n        key: name, value: name, id: tabId(index), 'aria-controls': panelId(index), className: 'mui-ex-chart-dock-tab-button',\n        // Delete closes the tab the keyboard is on, as the close mark does under the pointer.\n        onKeyDown: (event: KeyboardEvent) => { if (event.key === 'Delete') keyboard.closeByKey(name); },\n        label: createElement('span', { className: 'mui-ex-chart-dock-label' }, name,\n            // A span, not a button: a button inside the tab's button is not one the browser lets stand.\n            createElement(IconButton<'span'>, {\n                component: 'span', role: 'button', size: 'small', 'aria-label': `Close ${name}`,\n                // Off the Tab order: Delete closes from the keyboard, and a stop inside each tab's button would be one\n                // the tabs' own roving order does not know.\n                tabIndex: -1, className: 'mui-ex-chart-dock-close',\n                onClick: event => { event.stopPropagation(); dock.close(name); },\n            }, cross)),\n    }))),\n    ...charts.map((target, index) => createElement('div', {\n        key: target.name, role: 'tabpanel', id: panelId(index), 'aria-labelledby': tabId(index), hidden: target.name !== active,\n        className: 'mui-ex-chart-dock-tab',\n    }, createElement(DockedChart<Row>, { bridge, target, width: chartWidth, height: chartHeight, chrome, refused }))));\n    return createElement('div', { className: classes.join(' '), ...(style === undefined ? {} : { style }) },\n        createElement('div', { ref: keyboard.content, className: 'mui-ex-chart-dock-content' }, children),\n        createElement(MuiSizeContext.Provider, { value: muiSizeOf(density) }, panel));\n}\n"],
+  "mappings": "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",
+  "names": ["createElement", "Alert", "useTheme", "MuiSizeContext", "refuseThemeWithoutVariables", "createElement", "Alert", "refuseThemeWithoutVariables", "useTheme", "MuiSizeContext"]
+}

package/package.json

@@ -1,6 +1,42 @@
 {
   "name": "@ex-grid/chart-mui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0-beta.3",
+  "description": "ExChart for MUI: the design-system Wrapper that draws ExChart for React's toolbar and context menu with MUI's components, docks the charts made from a grid's selection beside it in MUI's tabs, and maps the chart's Visual Tokens onto a MUI theme made with CSS variables.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AkiraMisawa/ex-grid.git",
+    "directory": "packages/chart-mui"
+  },
+  "homepage": "https://akiramisawa.github.io/ex-grid/",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "dist/index.js",
+    "dist/index.js.map",
+    "dist/index.d.ts",
+    "styles.css"
+  ],
+  "dependencies": {
+    "@ex-grid/chart": "0.2.0-beta.3",
+    "@ex-grid/chart-react": "0.2.0-beta.3",
+    "@ex-grid/core": "0.2.0-beta.3",
+    "@ex-grid/mui": "0.2.0-beta.3"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^9.5.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  }
+}

package/styles.css

@@ -0,0 +1,47 @@
+/* @ex-grid/chart-mui — the Wrapper's stylesheet (ADR-0390 section 5, ADR-0281). It does two things and nothing else.
+   It maps ExChart's Visual Tokens onto the variables a MUI theme made with cssVariables writes on the page, under the
+   grid Wrapper's paper, .mui-ex-grid, and under the Chart Dock, .mui-ex-chart, so a chart in either follows the theme
+   and a change of scheme recolours it with no render anywhere (ADR-0027). And it lays out this package's own
+   elements, each rule scoped to its own mui-ex-chart- class. It writes no geometry ExChart computes, no rule against a
+   class of ExChart's own, and no font: the chart lays its labels out by the widths of its own (ADR-0027).
+
+   The colour slots: the theme's primary and secondary lead (slots 1 and 2, as MudBlazor's primary and secondary do
+   under ExChart.MudBlazor; MUI has no tertiary), and slots 3 to 10 keep ExChart's own palette. MUI's error, warning,
+   success and info are never a series' colour: on a screen of profit and risk a red series reads as an error or a
+   loss and a green one as good news, and info would read as a notice (ADR-0281). They stay for what they mean. */
+.mui-ex-grid,
+.mui-ex-chart {
+    --ex-chart-colour-0: var(--mui-palette-primary-main);
+    --ex-chart-colour-1: var(--mui-palette-secondary-main);
+    --ex-chart-text: var(--mui-palette-text-primary);
+    --ex-chart-background: var(--mui-palette-background-paper);
+    --ex-chart-error: var(--mui-palette-error-main);
+}
+
+/* The toolbar and Chart Filters, above the plot. */
+.mui-ex-chart-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-bottom: 4px; }
+.mui-ex-chart-toolbar .mui-ex-chart-command { text-transform: none; }
+.mui-ex-chart-downloads .MuiButton-root { text-transform: none; }
+.mui-ex-chart-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; }
+.mui-ex-chart-filters > .mui-ex-chart-end { flex: 0 1 12em; min-width: 9em; }
+.mui-ex-chart-filters > .mui-ex-chart-apply { text-transform: none; }
+/* The axis switch takes effect at once, so it stands apart from the range Apply commits. */
+.mui-ex-chart-filters > .mui-ex-chart-scale { margin-left: 16px; min-width: 10em; }
+.mui-ex-chart-filters > .mui-ex-chart-filter-error { flex-basis: 100%; }
+
+/* The context menu's items, inside the chart's frame (.ex-chart-menu), which stays the chart's. */
+.mui-ex-chart-menu { display: flex; flex-direction: column; padding: 4px 0; }
+/* Only the width and the text, as the grid's menu: ButtonBase already takes the button's own border and ground away,
+   and a background set here would tie with MUI's hover and keyboard-focus shades and hide which item Enter runs. */
+.mui-ex-chart-menu .mui-ex-chart-menu-item { width: 100%; font: var(--mui-font-body1); }
+.mui-ex-chart-menu .mui-ex-chart-menu-item.MuiListItemButton-dense { font: var(--mui-font-body2); }
+
+/* The Chart Dock (ADR-0258): the grid and a panel of charts beside it or below it, never over it. */
+.mui-ex-chart-dock { display: flex; gap: 12px; align-items: flex-start; }
+.mui-ex-chart-dock-bottom { flex-direction: column; align-items: stretch; }
+.mui-ex-chart-dock-content { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
+.mui-ex-chart-dock-panel { flex: 1 1 auto; min-width: 0; padding: 4px 8px 8px; }
+.mui-ex-chart-dock-tabs .mui-ex-chart-dock-tab-button { text-transform: none; }
+.mui-ex-chart-dock-label { display: inline-flex; align-items: center; gap: 4px; }
+.mui-ex-chart-dock-tab { padding-top: 8px; }
+.mui-ex-chart-dock-refusal { margin-bottom: 8px; }