@react-magma/charts 15.0.0-rc.2 → 15.0.0-rc.4

package/dist/charts.modern.module.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ComboChart, ScatterChart, MeterChart, HistogramChart, GaugeChart, BulletChart, BubbleChart, BoxplotChart, RadarChart, PieChart, LollipopChart, LineChart, DonutChart, StackedBarChart, GroupedBarChart, SimpleBarChart, StackedAreaChart, AreaChart } from '@carbon/charts-react';
 import styled from '@emotion/styled';
-import { Table, TableHead, TableRow, TableHeaderCell, TableBody, TableCell, I18nContext, Tooltip, IconButton, ButtonVariant, Dropdown, DropdownButton, DropdownContent, ModalSize, ThemeContext, Modal, Button, TypographyVisualStyle, Heading, useIsInverse, DropdownMenuItem, DropdownDivider } from 'react-magma-dom';
+import { Table, TableHead, TableRow, TableHeaderCell, TableBody, TableCell, I18nContext, Tooltip, IconButton, ButtonVariant, Dropdown, DropdownButton, DropdownContent, ModalSize, ThemeContext, Modal, Button, TypographyVisualStyle, Heading, useIsInverse, VisuallyHidden, Announce, DropdownMenuItem, DropdownDivider } from 'react-magma-dom';
 import { TableIcon, FullscreenExitIcon, FullscreenIcon, MoreVertIcon } from 'react-magma-icons';
 
 /******************************************************************************
@@ -1446,6 +1446,7 @@ function downloadImage(wrapperRef, title, format) {
     img.src = url;
 }
 function CarbonChartToolbar(_a) {
+    var _b;
     var config = _a.config, dataSet = _a.dataSet, isInverse = _a.isInverse, isTableOpen = _a.isTableOpen, isFullscreen = _a.isFullscreen, onOpenTable = _a.onOpenTable, onToggleFullscreen = _a.onToggleFullscreen, theme = _a.theme, title = _a.title, wrapperRef = _a.wrapperRef;
     var t = useChartToolbarI18n();
     var showTable = config.showAsTable !== false;
@@ -1468,7 +1469,7 @@ function CarbonChartToolbar(_a) {
             React.createElement(DropdownDivider, null),
             config.moreOptions))));
     return (React.createElement(ToolbarWrapper, { isFullscreen: isFullscreen, isInverse: isInverse, theme: theme },
-        React.createElement(ChartTitle, { isInverse: isInverse, theme: theme }, resolvedTitle),
+        React.createElement(ChartTitle, { as: "h".concat((_b = config.titleLevel) !== null && _b !== void 0 ? _b : 2), isInverse: isInverse, theme: theme }, resolvedTitle),
         React.createElement(ToolbarActions, { theme: theme },
             showTable && (React.createElement(ChartTableButton, { ariaLabel: resolvedTitle, icon: React.createElement(TableIcon, { size: 20 }), isInverse: isInverse, isTableOpen: isTableOpen, onClick: onOpenTable })),
             showFullscreen && (React.createElement(ChartFullscreenButton, { ariaLabel: "".concat(isFullscreen ? 'Exit' : 'View', " ").concat(resolvedTitle, " full screen"), icon: React.createElement(FullscreenIcon, { size: 20 }), exitIcon: React.createElement(FullscreenExitIcon, { size: 20 }), isInverse: isInverse, isFullscreen: isFullscreen, onClick: onToggleFullscreen })),
@@ -1482,7 +1483,9 @@ var CarbonChart = React.forwardRef(function (props, ref) {
     var internalRef = React.useRef(null);
     var _a = React.useState(false), isTableOpen = _a[0], setIsTableOpen = _a[1];
     var _b = React.useState(false), isFullscreen = _b[0], setIsFullscreen = _b[1];
+    var _c = React.useState(''), legendAnnouncement = _c[0], setLegendAnnouncement = _c[1];
     var lastTableTriggerRef = React.useRef(null);
+    var legendAnnouncedRef = React.useRef(false);
     var mergedRef = React.useCallback(function (node) {
         internalRef.current = node;
         if (typeof ref === 'function') {
@@ -1563,8 +1566,9 @@ var CarbonChart = React.forwardRef(function (props, ref) {
             var parent = legend.parentElement;
             if ((parent === null || parent === void 0 ? void 0 : parent.tagName) === 'FIELDSET') {
                 var existingCaption = parent.querySelector('legend');
-                if (existingCaption)
+                if (existingCaption && existingCaption.textContent !== legendLabel) {
                     existingCaption.textContent = legendLabel;
+                }
                 return;
             }
             var fieldset = document.createElement('fieldset');
@@ -1646,9 +1650,50 @@ var CarbonChart = React.forwardRef(function (props, ref) {
         }, 0);
         return function () { return clearTimeout(timer); };
     }, [type, dataSet]);
+    React.useEffect(function () {
+        var wrapper = internalRef.current;
+        if (!wrapper)
+            return;
+        var observer = new MutationObserver(function () {
+            var allItems = wrapper.querySelectorAll('.legend-item:not(.additional)');
+            if (allItems.length <= 1)
+                return;
+            var activeLabels = [];
+            allItems.forEach(function (el) {
+                var _a;
+                var checkbox = el.querySelector('.checkbox');
+                var label = el.querySelector('p');
+                if ((checkbox === null || checkbox === void 0 ? void 0 : checkbox.getAttribute('aria-checked')) === 'true' && label) {
+                    activeLabels.push(((_a = label.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '');
+                }
+            });
+            if (activeLabels.length === 1) {
+                if (!legendAnnouncedRef.current) {
+                    legendAnnouncedRef.current = true;
+                    setLegendAnnouncement("Only ".concat(activeLabels[0], " is selected"));
+                }
+            }
+            else if (activeLabels.length === allItems.length) {
+                legendAnnouncedRef.current = false;
+                setLegendAnnouncement('All items selected');
+            }
+            else {
+                legendAnnouncedRef.current = false;
+                setLegendAnnouncement('');
+            }
+        });
+        observer.observe(wrapper, {
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['aria-checked'],
+        });
+        return function () { return observer.disconnect(); };
+    }, [type, dataSet]);
     var groupsLength = Object.keys(buildColors()).length;
     var showTable = (chartToolbar === null || chartToolbar === void 0 ? void 0 : chartToolbar.showAsTable) !== false;
     return (React.createElement(FullscreenRoot, { ref: mergedRef, isInverse: isInverse, theme: theme },
+        React.createElement(VisuallyHidden, null,
+            React.createElement(Announce, null, legendAnnouncement)),
         React.createElement(CarbonChartWrapper, __assign({ "data-testid": testId, isInverse: isInverse, theme: theme, className: "carbon-chart-wrapper".concat(chartToolbar ? ' has-magma-toolbar' : ''), groupsLength: groupsLength < 6 ? groupsLength : 14, role: "region", "aria-label": ariaLabel || chartTitle, "aria-roledescription": "chart" }, rest),
             React.createElement(ChartContentWrapper, null,
                 chartToolbar && (React.createElement(CarbonChartToolbar, { config: chartToolbar, dataSet: dataSet, isInverse: isInverse, isTableOpen: isTableOpen, isFullscreen: isFullscreen, onOpenTable: openTableModal, onToggleFullscreen: toggleFullscreen, theme: theme, title: chartTitle, wrapperRef: internalRef })),